web1week 初参加しました よしたく です。
今回のテーマである「Like」から考えてThumbsUpというサービスを作成してみました。

ThumbsUpとは

ThumbsUpは、自分ががんばったことを入力してTwitterカードの形でシェアしていく単純なものです！

ThumbsUp

なぜThumbsUpにしたか

個人的なことですが、ここ最近うまくいって褒められたことと、自分としてはうまくいかなかったことの両方を経験しました。やはり人に褒められると嬉しく感じていいですよね。一方、うまくいかなかったことも自分なりにがんばった部分はあったので自分から自分へ褒めてあげたい気分になりました。

そこに #web1week の「Like」というテーマが発表され、自分の実体験と絡めて案を発散させていきました。人に褒められるのも嬉しいけど、まずがんばったことに対して自分が自分に「いいね！」をしてあげてほしいと思ったのと、またそれを人にシェアをしていいねがもらえたら良い循環が生まれるのではないかと思い「ThumbsUp」を作ってみることにしました。

技術的なこと

以前からTwitter上でOGPで遊ぶものをやってみたいと思ったので、ThumbsUpの発想になる前からOGPでいくことは決めていました。趣味でVue.jsを触っていたので今回は挑戦的な目標としてNuxt.jsを選択しました。OGP画像の保存先も必要だったのでCloud Firestore、Cloud Storage for Firebaseを選択しました。シェアした際のOGP用としてCloud Functions for Firebaseも使用しました。Atomic Designで開発したかったのですが、うまくいかないことが多かったので途中から完成させる方向に振り切って無視してしまいました。

（絶賛ファクタリング中なのでソースコード/GitHubは後日載せます...

イメージ

処理のイメージはこんな感じです。

感想と今後

web1week を通して、タグを眺めたときに知らない人たちと技術レベル関係なく一緒に盛り上がってる感じが得られてとてもよかったです。また、知り合いを誘って何人かで一緒に参加しましたが、slack上で相談させてもらったり、別の人が頑張って姿を見て自分も刺激をもらえたのでこちらも良かったです。

メインの機能は完成したので報告させていただきましたが、ヘッダーつけたり、リファクタリングしたりとまだまだやることがあるので引き続きがんばります！！！