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

まえおき

こちら参照

https://qiita.com/Guz9N9KLASTt/items/06dbf9967be9c7155bfd

経緯

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

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

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

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

要件

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

技術系

使用技術

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

リポジトリ

https://github.com/Suntory-N-Water/my-notion-manager

レイアウト

ログイン画面

PC

SP

ページ作成画面

PC

SP

実装手順

APIキーの設定

Notion | Where teams and agents work togethernotion.so

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

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

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

こちら参照

Notionでの接続の追加と管理 | Notionヘルプ – Notion (ノーション)ヘルプセンターnotion.so

上で設定した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! を押します。

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

感想

• JWTを調べながら実装した
  • なんとなく認証に対する理解が深まった
• NotionAPIすげぇ
  • おもろいもの思いついたらまた何か作りたい
• TailWind CSSは小規模なら良いと思ったけど大規模には向かなそう？
• Web APIに対する理解を深めたい
• App Routerナンモワカランから体系的にまとまった教材を探したい

今後の方針

• アプリ側から BookNotion で登録したテーブルを項目を削除する機能
• 本の予測表示？機能
• APIの型定義(レスポンスから型定義するのだるくてanyのまま)
• useEffect以外の画面リダイレクト
• ドキュメントの拡張
• ログイン回数の制限(冷静にEmailにしたのは謎)