🔖

noteの記事を集計してPM本のランキングサイトを作ったので、お世話になった技術・サービスを紹介していく

ひまらつ

2023/10/19に公開

表題の通り、noteの記事を集計してPM本のランキングサイトを作りました。「PM Book Feed」というサイトです。

https://book.pm-feed.io/

↓画面はこんな感じ

本のランキングが並んでいて、その本を紹介しているnoteの記事が添えられている

このサイトを作るなかで、お世話になった技術・サービスを紹介していきたいと思います。

（※PM=プロダクトマネージメントorプロジェクトマネージメント）

はじめに: ランキングの仕組み

ランキングの作り方ですが、「noteの記事で本が紹介されている回数」 を集計して作っています。PM関連のハッシュタグがついたnoteの記事を読み、そこにAmazonのリンクがあればカウントする、というやり方です。

Qiitaを集計して技術書ランキングを作った「テック・ブック・ランク」というサイトがあり、これにインスパイアされています。プロダクトマネージャーはnoteで発信している方が多いので、noteで同じようなものをつくってみました。

人気のPM本のリストが欲しいなーとはずっと思っていました。自身の経験として、プロダクトマネージャーをはじめたときにどの本を読めば良いか迷ったという思い出があったので、それを解消できたかなと思います。より詳しい経緯や背景はnoteに書いたので、もし興味あれば読んでみてください:)

技術構成

全体感

まず、全体感としては下の画像のようになっています。

バックエンドがGCPの Cloud Functions と PlanetScale 、
フロントエンドが Next.js + Tailwind CSS + Mantine です。
ページはJamstack構成になっていて、 Cloudflare Pages にホスティングしています。
本にタグをつける部分は手動で行なっており、 microCMS を利用しています。

それぞれ簡単に紹介していきます。

バックエンド

Cloud Functions はnoteの新着記事をチェックしにいく「クローラ」と、フロントで表示するデータを返す「API」とに分かれています。
クローラはPub/SubとCloud Schedulerを組み合わせて定期的に実行されるようになっており、自動的に最新のランキングに更新されます。

PlanetScale はMySQLベースのサーバレスDBです。ブランチ機能や水平スケーリングなど、運用時に助かる機能が提供されています。詳しくはこちらの記事がわかりやすいです。

普段の個人開発ではFirestoreを使うことが多いんですが、期間を絞ってのランキング集計などはRDBの方が簡単に作れるかなと思い、PlanetScaleにしました。
PlanetScaleは今回初めて触りましたが、画面やオンボーディングも大変わかりやすく、ノーストレスで使えました。今後も使っていきたいです。

PlanetScaleのクールな管理画面

フロントエンド

フロントエンドはNext.jsで書いていて、Jamstack構成で作りました。

自分はCSSの知識が浅いので、装飾やレイアウトはいつも Tailwind にお世話になっています。
基本的な画面であればほぼTailwindで事足りると思っています。今回もCSSは一行も書いていません。

Mantine はTypeScriptベースのUIライブラリで、クールなコンポーネントが多数提供されています。カスタマイズ性も高いので実案件でも使いやすいと思います。
UIライブラリのなかでは後発ですが、その分ドキュメントが大変充実しており、迷うことなく利用できます。最近のお気に入りです。

Mantineの画面。実際に値を変更して見た目とコードをプレビューできる

ホスティング

Cloudflare Pages にホスティングしています。
Next.jsをCloudflare Pagesにデプロイする公式のドキュメントがあり、この手順通りに進めて問題なくホスティングできました。

PlanetScaleもそうですが、最近のサービスは管理画面がわかりやすいし、ドキュメントも明確に書かれていて助かりますね。ちなみに pm-feed.io のドメインもCloudflareで取得しています。

Cloudflareではアナリティクス機能も提供されています。
訪問ユーザー数やページビュー、リファラルなどの指標が確認できるので、個人開発レベルなら十分だと感じました。　Google Analyticsを入れるのは腰が重いけどある程度のアクセス数は知りたかったりするので、個人的にうれしいポイントです。

タグ管理

運用を楽にしたいのでほとんど自動化したんですが、タグだけは手動です。
本の概要からChatGPTにタグを生成してもらったり、noteの記事についているタグを付与するなども試したのですが、クオリティ的に満足できず手動にしました。「興味のあるジャンルから本を探す」体験がスムーズかどうかは大事にしたいポイントでした。

手動でのタグ管理は microCMS で行っています。
microCMSは自由にスキーマを組めるんですが、今回は「本のID」と「タグ」を紐づけるAPIを用意しました。

本のIDと、あらかじめ用意したタグを紐づける画面

microCMSに入稿した内容はAPIで取得できます。「本に紐づいたタグを取得」 したり、「あるタグがついた本のID一覧を取得」 したりなどして、この情報を使っています。

今後はタグも自動でつけたいと思っています。microCMSはAPI経由でも入稿できるので、自動化するときも構成を組みやすそうというのもタグ管理にmicroCMSを選んだ理由です。

ChatGPT/Copilotによる実装の高速化

実装を進めるうえで、ChatGPTやCopilotがとても便利だったので紹介します。

実装方法を聞く

実装していてわからない点はChatGPTに聞きました。例えば今回、画面左側の領域はスクロールしても流れていかずに画面内に留まるようになっています。

この実装の名前が分からないため、検索エンジンで調べづらいですよね。そこで、「TailwindCSSとMantineで開発しています。スクロールした時に画面内に要素が留まるようにするには？」 のようにChatGPTに聞いてやり方を教えてもらいました（答え: Tailwindの sticky を使う）。

実際に動くコード例も教えてくれるので、すぐに貼って試せるのもうれしいですね。

Fix using Copilot

IDEはVisual Studio Codeを使っていて、Copilotを入れています。コードに問題があったときに「quick fix」のオプションが表示されるんですが、「Fix using Copilot」 というメニューが出るようになっています。

実際に覚えている例でいうと、mapを書くときに間違えてPythonの文法で書いてしまったことがありました。当然エラーが出るんですが、Fix using Copilotすると完璧にTypeScriptの文法に変換してくれました。ちゃんと取り組めば手動でも修正はできますが、脳のメモリを省エネ化できた感覚を覚えました。

キャラクター画像をChatGPT/DALL-E 3に描いてもらう

ヘッダー部分にタコのキャラクターを表示しているんでが、これはChatGPTに描いてもらったものです。

マスコットキャラクターのオクトくん

2023年10月よりChatGPTとDALL-E 3が連携できるようになり、自然言語で指示して画像を作ってもらえるようになりました（ChatGPT Plus あるいは Enterpriseが必要）。このキャラクターはそのDALL-E 3に描いてもらったものです。

「本を読んでいるタコ、白基調でシンプルな、漫画タッチの線画」 というようなプロンプトを英語で投げて描いてもらってます。お試し感覚だったのですが、2テイク目で自分の理想にピッタリの絵が出てきて驚きました。このクオリティのイラストをすぐ作ってくれるなんて、エンジニア的には本当にありがたいですね…！

おわりに

説明が長くなってしまいましたが、モダンなサービスのおかげで楽しく開発できました。

最後に作ったサイトを再掲します。「PM本のランキング」と銘打ってはいますが、エンジニアリングやUXデザインの本も多く並んでいるので、よかったら知らない本を探してみてください。