Notionに拍手ボタンを設置するサイトを作った
この記事はGMO ペパボエンジニア Advent Calendar 2022の 17 日目の記事です。
16日目は「任意のmanifestにgo-templateを埋め込めるOperatorを実装した」でした。
動機
社内ではドキュメントや日報などに Notion が使われています。
私たちがNotionを使う理由 - Pepabo Tech Portal
日々たくさんの日報書かれています。しかし、日報に対して気軽にリアクションをとる方法がありませんでした。
そこで、Notion に埋め込める拍手ボタンを作りました。
拍手ボタンのデモページ ↓
Hakusyu on Notion
使用方法
拍手ボタンは Notion にサイトを埋め込む機能を使用して設置します。
https://hakusyu.vercel.app/
上記のサイトにアクセスし、
拍手対象のNotionのページのURL〇〇の日報などの拍手対象の文字列を入力します。ボタンをクリックしたら、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 のページのタイトルが
my name is ugo これはみんなには内緒だよであった場合、Notion の URL はhttps://notion.so/<username>/my-name-is-ugo-<一意のID>
となります。英数字のみがURLに反映されるようになっています。
万が一、Notion ページのタイトルが機密性の高い英文で内容だった場合、URL だけでどんな内容なのか推測できてしまいます。なので、URL は DB に暗号化して保存されるようにしました。emojiパラメータでボタンの絵文字を変更できる
Plain Text
として、埋め込むと
このように、ボタンの絵文字を変更できるようにしてあります。なので、「拍手」以外にも「いいね」「好き」などを表現できます。
展望
Notion APIを使って拍手のデータガNotionのテーブルに記録されるようにできるようにしたいなと思っています。
資料
CTOA若手エンジニアコミュニティ 勉強会#1にて「Notionで拍手できるようにした話」として発表しました。
Notionで拍手できるようにした話
GMOペパボエンジニア Advent Calendar