2023/10/14

自分だけのBookNotionを爆誕させた

KindleのハイライトをNotionにまとめる自分専用BookNotionアプリを開発。

まえおき

こちら参照

BookNotionを更に神アプリにしたいその１ - Qiita

はじめに BookNotionというアプリをご存知ですか？ KindleのハイライトをかんたんにNotionに保存できる読書記録アプリ(公式サイトより) すごくざっくり説明すると、ハイライトした箇所をNotionにまとめることができるアプリです。追加するときもメモと...

経緯

ソースコード内で本のタイトルを入力してデータベースへアクセスし、突合させることでしかハイライトとコメントを取得できていなかった

外出先でもやりたいな～と思ってましたが、

🤔「デプロイしても自分だけしかアクセスできなければよいのでは？」

と感じ自分だけのBookNotionを爆誕させた

要件

どこでもハイライトとコメントをページにまとめることができる
それっぽいデザインで実装する
自分だけしか実装させない都合上、ログイン機能を設ける
最低限の機能から実装していき、徐々に拡張していく
誰でもできるようにはしない(めんどうだから)

技術系

使用技術

フロントエンド：Next.js
スタイリング：Tailwind CSS
ホスティング：Vercel
認証：JWT

リポジトリ

github.com

Build software better, together

GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over 420 million projects.

レイアウト

ログイン画面

PC

SP

ページ作成画面

PC

SP

実装手順

WARNING

BookNotionでNotionにハイライトを登録していると前提

APIキーの設定

notion.so

The AI workspace that works for you. | Notion

A tool that connects everyday work into one space. It gives you and your teams AI tools—search, writing, note-taking—inside an all-in-one, flexible workspace.

まずはNotionAPIを設定しましょう。

新しいインテグレーションを選択
名前を設定
送信でAPIキーを取得
機能を選択し、適切な権限を与える(めんどいんで全部与えてました)
保存

データベースにNotionAPIを連携する

こちら参照

notion.so

インテグレーションの追加・管理 – Notion (ノーション)ヘルプセンター

Notion APIを使用すれば、他のソフトウェアをNotionに接続してワークスペース内のアクションを自動化したり、弊社パートナーが構築したコネクトにアクセスしたりできます 🤖

上で設定したAPIを連携させる必要があります。
連携先はBookNotionで登録したハイライトが格納されているデータベースになります。

.env.localへの値設定

以下の情報を.env.localにします。

EMAIL=すきなアドレス
PASSWORD=ハッシュ化したパスワード
JWT_SECRET=秘密鍵
API_KEY=APIキーの設定で取得したAPIキー
DATABASE_ID=BookNotionのデータベースID
PAGE_URL=作成後のページが追加されるページのID

データベースIDの確認方法は、BookNotionで追加したデータベースのページURLが以下の場合、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxがデータベースIDになります。
https://www.notion.so/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx?v=yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

ページIDはhttps://www.notion.so/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxの場合、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxがページIDになります。

パスワードのハッシュ化

パスワードを平文で保存するのは良くないと怒られたのでハッシュ化します。
このあたりはご自身で調べたものを実行してください。

実際にやってみよう

左から、本アプリ、貼り付け先のページ、BookNotionのデータベースがあります。

今回ハイライトとコメントをまとめたいのは解像度を上げる――曖昧な思考を明晰にする「深さ・広さ・構造・時間」の４視点と行動法という本なので、そのまま送信フォームに入力しCreate a Notion page!を押します。

するとページが追加されて中を見るとハイライトが中見出し、コメントが通常のテキスト形式で出力されているのが確認できます。