「新型コロナウイルスにも負けない明るい投稿を促したい！」Webサイトを作ってみた

##この記事の"目的"と"思い"
新型コロナウイルスの感染が拡大してきた当初、悲しいニュースや不安なニュースが溢れていました。これは仕方のないことですが、それを見るたびに、暗い気持ちになってしまっていました。
けれど、心まで暗くなっては前に進むのも難しくなっていってしまうと思いました。どんなに厳しい状況でも見渡すと明るいニュースやプラスに捉えることのできることはあると思います。だから、その投稿を促すことはできないかと思い、今回Webサイトを作りました。

つい先日一部地域を除き緊急事態宣言が解除されましたが、未だ完全に収束したとは言えず、気は抜けない状況が続いています。医療従事者の方は、長期に渡って厳しい中で闘う状況が続いています。

感染者が少なくなっている今では、あまり力にはなれないかもしれないけれど、少し勇気を出して公開してみることにしました。

今回この記事では、以下を中心に記載したいと思います。

   - どんなサイトを作ったのか
   - つまづいたところ


※なお、筆者は今までIT業界（主に上流工程）で働いていましたが、Webは初めてで今回初めてWebサイトを作りました。そのため、言葉など間違っているかもしれないですが、その点は遠慮なくご指摘いただけると幸いです。

##作ったWebサイトについて
「身近な明るい投稿は、きっと誰かのあと１歩前に進む力になる」という考えをベースに、
SNSへの投稿ボタン、特定のハッシュタグがついた投稿の表示　この２つを実現しました。
[https://plusplus.tokyo](htttps://plusplus.tokyo)
（理想は、このWebサイトを見れば明るい投稿が溢れている状態でした。、、、理想は。）

|![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615598/fbd01dc0-9e01-02e1-73d9-0dd5780cf79d.png)|
|:--|


##実現した方法について
半ば無理やりですが、今回は、
WordPressでページの大半を作成して、ツイッター表示の部分だけGoを使ってHTMLを吐き出す。これをWordPressで読み込む様にしました。
（本当はリアルタイムでTwitter部分を表示したかったのですが、APIの利用制限の都合上断念）

イメージとしては、こんな感じです↓

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615598/ea3c1b72-250a-b7ff-f1e3-08a3133038e9.png)|
|:--|

##環境などについて
環境、使用ツール、言語などは以下の通りです。

<table>
<tr>
  <th>環境、ツールなど</th>
  <th>補足</th>
  <th colspan=2>参考にさせてもらったサイト（抜粋）</th>
</tr>
<tr>
  <td rowspan=2>aws lightsail</td>
  <td rowspan=2>当初はlolipopサーバをレンタルしていたが変更（理由は後ほど）</td>
  <td>ドメイン設定</td>
  <td>
    <a href="https://hacknote.jp/archives/44586/">
      https://hacknote.jp/archives/44586/
    </a>
  </td>
</tr>
<tr>
  <td>SSL化</td>
  <td>
    <a href="https://lightsail.aws.amazon.com/ls/docs/ja_jp/articles/amazon-lightsail-using-lets-encrypt-certificates-with-wordpress">
      https://lightsail.aws.amazon.com/ls/docs/ja_jp/articles/amazon-lightsail-using-lets-encrypt-certificates-with-wordpress
    </a>
 <br/>（結構Amazonのドキュメントが丁寧でした。他のサイトを参考にやっても上手くやってもいかず結局amazonのドキュメントに戻ってきました。）
  </td>
</tr>
<tr>
  <td rowspan=2>WordPress 5.4.1</td>
  <td rowspan=2>初めてWebページを作るということもあったため</td>
  <td>lightsailからの設定</td>
  <td>
    <a href="https://www.karelie.net/aws-lightsail-build-wordpress-ssl/">
      https://www.karelie.net/aws-lightsail-build-wordpress-ssl/
    </a>
  </td>
</tr>
<tr>
  <td>外部HTMLの埋め込み</td>
  <td>
    <a href="http://ailaby.com/inc_html/">
      http://ailaby.com/inc_html/
    </a>
    <br />他は、ひたすら触って、疑問はGoogleで調べて試しての繰り返し</td>
</tr>
<tr>
  <td rowspan=2>Go 1.14.2</td>
  <td rowspan=2>当初使う予定はなかったが、特定のハッシュタグを表示する部分で使用<br />※パッケージは、ChimeraCoder/anacondaを使用</td>
  <td>Twitter APIを使う方法</td>
  <td>
    <a href="https://rightcode.co.jp/blog/information-technology/golang-introduction-twitter-api">
      https://rightcode.co.jp/blog/information-technology/golang-introduction-twitter-api
    </a>
  </td>
</tr>
<tr>
  <td>TwitterAPIからの情報をHTMLへ落とし込む</td>
  <td>
    <a href="https://rightcode.co.jp/blog/information-technology/golang-introduction-twitter-api">
    https://rightcode.co.jp/blog/information-technology/golang-introduction-twitter-api
    </a>  
  </td>
</tr>
<tr>
  <td rowspan=2>Twitter API</td>
  <td rowspan=2>特定のハッシュタグで検索した結果を表示したかったため</td>
  <td>Developer登録</td>
  <td>
    <a href="https://digitalnavi.net/internet/3072/">
      https://digitalnavi.net/internet/3072/
   </a>
  </td>
</tr>
<tr>
  <td>APIの使い方</td>
  <td>
    <a href="https://developer.twitter.com/en/docs/tweets/search/overview">
      https://developer.twitter.com/en/docs/tweets/search/overview
    </a>
  </td>
</tr>
</table>



##つまづいたところ
ただ、先に記載した様に初めてWebサイトを1から作ったということもあって、想定を遥かに超える時間を要してしまいました。（色々と想定できていなかったことも多かった、、、）
#### 1) Twitter タイムライン表示
だいぶ前にTwitterのウィジェットを使ったことがあり、それを利用して表示しようと思っていたのですが、Twitterのタイムライン検索ウィジェットは2018年に廃止されており、Twitter APIを使って検索から表示を自力で行う必要が出てきた。
（それを使えばちょちょいだ！と思った私が甘かった、、、）

#### 2) レンタルサーバ
どこにするのか悩みましたが、検索し当初はlolipopを契約しました。
しかし、実現にあたり、Twitter APIを利用したタイムライン表示のためにGo言語をインストール必要が出てきました。
（Go言語でなくても可能ですが、Go言語を勉強中なのでせっかくなら使いたかった）
その上で、lolipopなどのレンタルサーバでは懸念（他の利用者への迷惑やそもそもサポートしているのか不明）があったため、aws lightsailへ変更しました。
（もちろんWordPressも移し替えが必要になりました。私の場合は、ページ数が少ないということもあり作り直しました。）

また、最近はawsを使ったサービスがとても多くなっているため、awsは触っておきたかった。

#### 3) WordPress
初めて使いましたが、確かに直感的で分かりやすく、SEOなどの心配が不要などのメリットがある一方で、ブラックボックスで途端にメジャーでないことをしようとすると、つまづく。そういった印象でした。
確かにモダン？なデザインになったかもしれないですが、ソースを見ると恐ろしくごちゃごちゃしている状態になっていると思います。
きっともっとシンプルにかけるはず。

本来であればスピードを上げないといけないのに、引っかかってしまいかなりの時間を要してしまいました。
WordPressを使うのか、はたまた他の製品を使うのか、１から自力で作るのかは、最初に冷静に考えた方がいいかもしれないなと思いました。


##最後に
ここには書ききれない程の本当にたくさんのことに引っ掛かりました。
しかし、その度に先人が残した記事に救ってもらい、ようやく公開できるまで漕ぎ着けました。
先に参考にさせてもらったサイトを記載しましたが、ほんの一部を抜粋した状態です。
記事を残すことの偉大さと大変さを身を持って感じた次第です。

長々と書きましたが、今回作成したWebページとこの記事には大きな力はないかもしれないですが
１人でも多くの人の前を向く１歩になれれば、本当に嬉しく思います。

よし、またGo言語の勉強がんばろっと！