あいつの日誌β

働きながら旅しています。

おすすめの図書をレコメンドするサイト(全2画面)を16時間ぐらいで作った話

Next.js Notion API Netlify

残りの人生で読むべき本をどうやって選別するのか考えたんですが、図書館でたくさん予約待ちしている本がいい感じに選別されているんじゃないかと思いました。というわけで渋谷図書館で予約待ちが多い本を表示するサイトを大体16時間ぐらいで作りました。

reading-list.tokyo

あらすじ

最近このブログでお金の話しかしていないのですが、先日面接で「本当にエンジニアなんですか？」という質問されてしまったのでたまにはテックブログを書こうと思います。

実を言うと Notion API を使ってみたかっただけだったりする

Notion API が2022年3月に正式公開されていたそうです。実を言うと全然知らなかったんですが、公開されて月日が流れているので恐らく安定しているだろうし、これを使って簡単なWEBサイトを作ろうと思いました。

というわけで以下の2画面で構成されるWEBサイトを作りました。

  • 書籍一覧を表示する
  • 書籍詳細を表示する

で、書籍詳細ページから Amazon へのリンクを貼っておきましたので良かったら皆様ボタンを押してみて下さい。

環境について

基本的にはこんな感じです。小さいものを作るのでできるだけシンプルに、なるだけ早くデプロイできる事を主眼にしたのでできるだけ自分が頑張らない方法を選択しました。

  • Next.js のプロセス(next start で動くアレ)を Netlify で動かす
  • pages/api 上で GraphQL サーバーを構築し、Notion API を呼び出す resolver を記述する
  • 管理画面の構築は Notion なので何もしなくていい

ログインが必要なWEBサービスなどになってくるとまた話が変わってくるのですが、場面によっては非常に有用な構成なんじゃないかと思っています。例えばハッカソンや勉強合宿といった場面ではかなり有効な構成だと思います。

また、今回の試作品では私は Notion の Database を一から作ったのですが、ラーメンの食べ歩きが好きで Notion にまとめたデータがある、といった人も少なからずいると思います。ラーメンに限らず既にコンテンツのタネが集まっている状態の人たちは結構いる気がします。

なので Notion API は結構面白い事ができると思うので、それらを試すのにこの構成は結構ありなんじゃないかと思います。ちなみに Vercel は無料枠での商用利用ができない様なので Netlify にしています

あとは Blog にマッチする気がしています。現在 microCMS という headless CMS を使っているのですが、ファイルのアップロードが地味に面倒です。Notion はリッチな UI なのでこの辺りがいい感じになっていると期待しています。

今回試作をかねて reading-list を作りましたが、次は Blog に挑戦する予定です。

とはいえ問題もある

Notion API のデータ構造にまだあまり慣れていないので、Notion API とのやりとりの記述に慣れる必要があります。リッチなUIであるが故なんでしょうけど。まあでも参照だけであればそんなに苦労しないと思います。たぶん。

あと何故かこういう風に返ってきてほしいデータが

{
  imgURL: { id: 'YmSL', url: 'xxxx' },
  description: { id: 'jVtF', rich_text: [{plain_text: 'xxxx'}] },
  name: { id: 'title', title: [{plain_text: 'xxx'}] }
}

こんな感じで返って来てしまい途方にくれました。id だけ返されても...

{
  imgURL: { id: 'YmSL' },
  description: { id: 'jVtF' },
  name: { id: 'title' }
}

もしかしたら私が入力した文字(図書館のサイトからコピペ)が悪さをしてしまったのかもしれませんが、エラーであるならきちんとエラーにして欲しいなあ、と思いました。

ちょっと対応策が分からなかったので JSON にしてハードコーディングしてデプロイしました。デプロイ直前で発生したので応急処置的な修正をし、結果的に resolver がハードコーディングされたJSONを返して、それを Graphql で fetch する、という良く分からない構成になってしまいました*1

ちょっと Notion API さわったばかりなので不具合が起きた場合の勘所がつかめていないのですが、その辺りはもうしばらく時間かかるかと思っています。

まとめ

そんなわけで readling-list.tokyo というサイトをデプロイしたというお話でした。残念ながら Notion API 使いたかったのに、結果使ってないのですけど。まあでも今回作ったものは 2画面しかないので Tutorial にちょうど良い規模なので、時間がある時にこれをネタにして技術的な記事を書ければいいなと思っています。

そして今後 Notion にデータを溜め込んでおけば簡単にコンテンツ化できると思うので積極的に Notion を活用していこうと思います。

こちらからは以上です。

*1:page component で JSON を import すればいいんでしょうけどすぐに直ると信じている