ワンフレーズで本と出会うサービス「一文一会」を作りました
ここ2週間くらい力を入れて開発していた「一文一会」というサービスが完成しました。
本のフレーズや紹介文がつぎつぎ（ランダムに）表示されるサービスです。
ビビッときたフレーズをクリックすると何の本なのか知ることができます。
好きな本を紹介することもできます。
もしよろしければ先にサービスを触ってみてください（そしてできれば新しいフレーズの登録もお願いします）
なぜ作ったのか
いまの世の中にはレコメンドが溢れています。どんなアプリを触っていても「おすすめ」という形で自分の好みにあったコンテンツが提示されつづけます。 好みのコンテンツが出ること自体は望ましいですが、セレンディピティ（素敵な偶然に出会うこと）を感じる機会は減ってしまっています。
たとえば、本屋をぶらぶら歩いてポップを眺めて、いままで読んだことがないようなジャンルの本を買うとか。
そんな体験をネット上で作れないかと考え、このサービスを思いつきました。
（実はこのアイディア自体は以前Railsで実現したことがあるのですが、その時からは技術力が上がったのでリメイクすることにしました）
どう作ったのか
ざざっと使った技術・サービスについて書きます。
- React
- Next.js
- tailwindcss
- firebase + firestore
- react-spring
- cloudinary
React + Next.js
フロントエンドフレームワークはReactとNext.jsを採用しました。Among Us Noteのときも採用した技術スタックです。
ウェブサイトのパーツをコンポーネントという形で適切なサイズに切り分けておけば、以前書いたコードを使い回すこともできて幸せです。
デプロイは以前と同様Vercelにしています。個人開発なら無料で使えます。
tailwindcss
巷で流行っていると噂のCSSフレームワークです。見た目を作るのに使いました。
他のCSSフレームワークは「ボタン」「ナビバー」「フッター」のような単位でCSSクラスが定義されているのに対し、tailwindcssは p-3 text-gray-700 、h-screen などのCSSクラスを複数組み合わせて見た目を作っていきます。
生のCSSを書く代わりにCSSクラスをぺたぺた切り貼りしていくイメージです。
最初はボタンひとつ作るのにも苦労するので、tailwindcssを採用するメリットは分かりづらいかもしれませんが、tailwindcssの良さは細かい見た目の調節が必要になったころから感じられるようになります。
Firebase + Firestore
FirebaseはBaaS（Backend as a Service）のひとつです。バックエンドとして良く使われるデータベースや認証などの機能をまるっと提供しています。 Firebaseを採用すればバックエンドの実装をほとんど行わなくて済むため、フロントエンド（特にユーザー体験）の開発に集中することができます。個人開発の味方……
今回はFirebaseの中でもFirestoreというデータベースを利用しています。
react-spring
ふわっとフレーズが現れて消えるアニメーションの実装に使いました。
react-springの useTransition を使うことで、DOMが追加されたとき、更新されたとき、消されたときにアニメーションを付与することができます。
↓ 公式のデモです
Cloudinary
OGPの生成のために使いました。Cloudinaryは画像や動画などのマルチメディア管理サービスです。Cloudinaryに画像をアップロードした後、その画像をクロップしたり、テキストを重ねたりして配信することができます。 なかなか大きな無料枠があるので、個人開発でも十分使えるのではないかと思っています。
↓ こんな感じでテンプレートをアップロードしておきます
↓ のようなURLにアクセスすることで画像に文字を重ねることができます
https://res.cloudinary.com/dv2ewdcmt/image/upload/l_text:[fontFamily]_[fontSize]:[text],w_[width],c_fit/vxxxxxxxx/filename.jpg
Google Fontsにある日本語フォントを使えるそうなのですが、現状すべての日本語フォントが使えるというわけではないです（2021年3月12日現在）。 そこでGoogle Fontsからフォントファイルをダウンロードして、Cloudinaryにアップロードするという方法を使いました。
具体的な方法は↓の記事のコメント欄をご覧ください。 qiita.com
（最初は vercel/og-image を使っていましたが、日本語フォントを使おうと思うと無料枠ではレスポンスが遅く、使い物になりませんでした）
まとめ
React + Next.js + tailwindcssで本と出会えるサービスを作りました。
バックエンドはFirebaseに丸投げすることで手間をガツッと削減しました。
無事リリースもでき、ブログも書き終わったのでオグリキャップを育てたいと思います。オグリキャップしか勝たん。
