Notionに拍手ボタンを設置するサイトを作った

動機

社内ではドキュメントや日報などに Notion が使われています。

私たちがNotionを使う理由 - Pepabo Tech Portal

日々たくさんの日報書かれています。しかし、日報に対して気軽にリアクションをとる方法がありませんでした。 そこで、Notion に埋め込める拍手ボタンを作りました。
拍手ボタンのデモページ ↓

Hakusyu on Notion

使用方法

拍手ボタンは Notion にサイトを埋め込む機能を使用して設置します。

https://hakusyu.vercel.app/

上記のサイトにアクセスし、などの拍手対象の文字列を入力します。
ボタンをクリックしたら、URL がクリップボードにコピーされるので、Notion に貼り付けます。 「埋め込みを作成する」をクリックし、拍手ボタンが埋め込むことができます

構成や工夫点

構成

フロントエンドは Next.js で、Vercel でホスティングしています。バックエンドは Ruby on Rails で、Render にデプロイしてあります。 RDS としては PlanetScale を採用しました。フロントエンドは REST API を介してバックエンドと通信しています。 構成に関しては、好きなものと使ってみたいものを優先して作りました。
作業時のスクラップ

renderとplanetScaleを使ってWebアプリを作る

良かった点

RDS が PlanetScale を使用しているため、Rails API のデプロイ先を自由に変えるころができた Render、fly.io、heroku へデプロイをして、最終的に Render にしました。 Render は github と連携して、自動デプロイができて、無料枠が存在するため採用しました。
APIと拍手ボタンを再利用できた hakusyu apiを作ったことで、拍手ボタンのコンポーネントを再利用し、自分のブログに拍手ボタンを実装できました。開発時はそんなことは考えていなかったのですが、ふとブログにも設置したいなと思いたちやってみたら、すぐにできました。

悪かった点

システムの規模が大きすぎる Controllerが1つしかない、簡単なRails APIであるため、 Rails を使うほどでもない気がしています。しかし、OからRailsアプリを作る手順の学び直す機会にはなりました。CORSの設定など、一からの開発だから行うことを実際に手を動かしながらやれました。
新しい技術をつかっていない 個人開発するときは、何かしら自分が初めて使う技術を採用することにしていましたが、Next.js、Ruby on Railsと慣れたものばかりでした。

工夫点

Notion は URL で内容が推測できる
Notion のページのタイトルがであった場合、Notion の URL は となります。英数字のみがURLに反映されるようになっています。 万が一、Notion ページのタイトルが機密性の高い英文で内容だった場合、URL だけでどんな内容なのか推測できてしまいます。なので、URL は DB に暗号化して保存されるようにしました。
emojiパラメータでボタンの絵文字を変更できる
として、埋め込むと
このように、ボタンの絵文字を変更できるようにしてあります。なので、「拍手」以外にも「いいね」「好き」などを表現できます。

展望

Notion APIを使って拍手のデータガNotionのテーブルに記録されるようにできるようにしたいなと思っています。

資料

CTOA若手エンジニアコミュニティ 勉強会#1にて「Notionで拍手できるようにした話」として発表しました。

Notionで拍手できるようにした話

GMOペパボエンジニア Advent Calendar

🎅GMOペパボエンジニア Advent Calendar 2022 - Adventar