Twitterのフォロワーにあなたの個人的ベスト３を紹介するサービスを作った話です。
フォロワーって趣味嗜好が近い人が多いと思うので、
その人たちに個人的なベスト３を見てもらうことで、
共感や異論をもらって議論するの楽しそうじゃないですか？
作ったもの
個人的ランキングから始めるTwitterでのコミュニケーション
Twitterで自分の個人的なランキングを発表するためのWebサービス作りました。
Twitterであなたをよく知るフォロワーに向けて個人的なベスト３とその理由を投稿することで、
参考にされやすく、異論としてあなたが好みそうなものを教えてもらえたり、フォロワーと議論を楽しんだりと、
Twitterでのコミュニケーションが広がりそうじゃないですか？
ランキングをTwitterで見やすい画像にして反応をもらうサービス
投稿したランキングをもとにシステムがTwitterで見やすいサイズの画像を作成するので、
それをTwitterに投稿することでフォロワーに自分の好きなものをアピールできます。
Twitterアカウントでログインすることで自動ツイートすることも可能です。
そしてそのランキングに、「参考になった」や「異論を唱える」ことができます。
異論を唱えるとは、他の人が作ったランキングとあなたが思うランキングが違かったときに、
このランキングだったら自分はこの順番になるというのを投稿することができる機能です。
なんで作ったか
ネットにはたくさんのレビューがあるけど参考にならない
何か物を買ったりする時に、最近はAmazonや価格.comなどでレビューを見てどれにするか選ぶことが多いと思います。
そんなときに、レビューがたくさんあって何を参考にすればいいかわからなくなることってないですか？
知らない人より知っている人のレビューの方がいい
当然のことなんですが、レビューは人の環境や性格など様々な要素で変わるので人それぞれ違います。
なので、どんな人か知っている人がしているレビュー1つの方が何百という知らない人のレビューよりも説得力があってわかりやすいと思うんですよね。
どうやってつくったのか
使用した技術
- Next.js
フロントエンドとバックエンドのAPIを利用 - Firebase
TwitterアカウントでログインするのにAuthentication、データベースにFirestore Database、画像のストレージにStorageを利用 - Sharp
Node.jsの画像編集ライブラリ。ランキング画像を作成するのに利用 - Text To SVG
画像に文字を埋め込むのに文字をSVGするために利用。SVGをSharpで編集する - Google Cloud Run
サーバーレスでNext.jsをデプロイするのにCloud Runを利用
Cloud RunでNext.js
今回はTwitterで見やすいようにするためにOGPを実装したかったのでSSRでデプロイしようと思いました。
Next.jsをデプロイするならおそらく一番簡単なのはVercelだと思いますが、
Vercelは個人的かつ非営利的な目的な場合は無料である程度使えるのですが、
広告などを入れて収益を得ようとすると月$20のプランに加入する必要があります。
前にYouTubeで納品する動画版Skebみたいなサービスをリリースして半年だけどユーザーがいない話という記事を書いたのですが、
ユーザーがいるかどうかわからないサービスでは、使われた分だけお金を払う従量課金のほうがいいです。
そこで、Firebaseでデプロイしようと思ったのですが、
FirebaseでNext.jsをSSRでデプロイするにはCloud Functionを使わなくちゃいけないようでやめました。
なのでGoogle Cloud PlatformでCloud Runをデプロイしました。
Cloud Runの料金の通り無料枠もあって安心です。
Sharpで画像作成
リンクに飛ばなくてもTwitter内でランキングの内容を確認できるようにしたかったので、
SharpというNode.jsのライブラリを使ってTwitterに画像を添付した際にきれいに見れる、
1200×1600の画像を作成します。
この画像に文字を埋め込むにはtext-to-svgというライブラリを使って文字をSVGにして、
それを画像に合成していきます。
最後に
ログインしなくてもランキングの画像を作成することはできるので、
このサービスを使っておすすめをフォロワーに好きなものをアピールしてみてください。
参考
Next.jsをSSRでFirebaseデプロイ
ここまで簡単になったNext.js on Cloud Run
【Node.js】 画像処理モジュールsharpの使い方を網羅してみました