<p>この記事は<a href="https://adventar.org/calendars/7722" target="_blank" rel="nofollow noopener noreferrer">GMO ペパボエンジニア Advent Calendar 2022</a>の 17 日目の記事です。<br>
16日目は<a href="https://takumakume.github.io/blog/2022-12-16-manifest-template-operator/" target="_blank" rel="nofollow noopener noreferrer">「任意のmanifestにgo-templateを埋め込めるOperatorを実装した」</a>でした。</p>
<h2 id="%E5%8B%95%E6%A9%9F">
<a class="header-anchor-link" href="#%E5%8B%95%E6%A9%9F" aria-hidden="true"></a> 動機</h2>
<p>社内ではドキュメントや日報などに Notion が使われています。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__251a6ec1a1b41" src="https://embed.zenn.studio/card#zenn-embedded__251a6ec1a1b41" data-content="https%3A%2F%2Ftech.pepabo.com%2F2019%2F11%2F19%2Fwhy-notion%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://tech.pepabo.com/2019/11/19/why-notion/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://tech.pepabo.com/2019/11/19/why-notion/</a></p>
<p>日々たくさんの日報書かれています。しかし、日報に対して気軽にリアクションをとる方法がありませんでした。<br>
そこで、Notion に埋め込める拍手ボタンを作りました。</p>
<p>拍手ボタンのデモページ ↓<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__beb10e0a660df" src="https://embed.zenn.studio/card#zenn-embedded__beb10e0a660df" data-content="https%3A%2F%2Fyu5.notion.site%2FHakusyu-on-Notion-Demo-d562b625be0b420a816e334e27e20ba1" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://yu5.notion.site/Hakusyu-on-Notion-Demo-d562b625be0b420a816e334e27e20ba1" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://yu5.notion.site/Hakusyu-on-Notion-Demo-d562b625be0b420a816e334e27e20ba1</a></p>
<h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 使用方法</h2>
<p>拍手ボタンは Notion にサイトを埋め込む機能を使用して設置します。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a7a89c7807629" src="https://embed.zenn.studio/card#zenn-embedded__a7a89c7807629" data-content="https%3A%2F%2Fhakusyu.vercel.app%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://hakusyu.vercel.app/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://hakusyu.vercel.app/</a></p>
<p>上記のサイトにアクセスし、<code>拍手対象のNotionのページのURL</code>,<code>〇〇の日報</code>などの拍手対象の文字列を入力します。</p>
<p>ボタンをクリックしたら、URL がクリップボードにコピーされるので、Notion に貼り付けます。<br>
「埋め込みを作成する」をクリックし、拍手ボタンが埋め込むことができます<br>
<img src="https://storage.googleapis.com/zenn-user-upload/1d7df629fbac-20221216.gif" alt loading="lazy" class="md-img"></p>
<h2 id="%E6%A7%8B%E6%88%90%E3%82%84%E5%B7%A5%E5%A4%AB%E7%82%B9">
<a class="header-anchor-link" href="#%E6%A7%8B%E6%88%90%E3%82%84%E5%B7%A5%E5%A4%AB%E7%82%B9" aria-hidden="true"></a> 構成や工夫点</h2>
<h3 id="%E6%A7%8B%E6%88%90">
<a class="header-anchor-link" href="#%E6%A7%8B%E6%88%90" aria-hidden="true"></a> 構成</h3>
<p><img src="https://storage.googleapis.com/zenn-user-upload/55811e43eb19-20221204.png" alt="サービスの構成図" loading="lazy" class="md-img"></p>
<p>フロントエンドは Next.js で、Vercel でホスティングしています。バックエンドは Ruby on Rails で、Render にデプロイしてあります。<br>
RDS としては PlanetScale を採用しました。フロントエンドは REST API を介してバックエンドと通信しています。<br>
構成に関しては、好きなものと使ってみたいものを優先して作りました。</p>
<p><strong>作業時のスクラップ</strong><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8676cf3edea3d" src="https://embed.zenn.studio/card#zenn-embedded__8676cf3edea3d" data-content="https%3A%2F%2Fzenn.dev%2Fyu_9%2Fscraps%2F29c42206515bf6" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/yu_9/scraps/29c42206515bf6" style="display:none" target="_blank">https://zenn.dev/yu_9/scraps/29c42206515bf6</a></p>
<h4 id="%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9F%E7%82%B9">
<a class="header-anchor-link" href="#%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9F%E7%82%B9" aria-hidden="true"></a> 良かった点</h4>
<p><strong>RDS が PlanetScale を使用しているため、Rails API のデプロイ先を自由に変えるころができた</strong><br>
Render、fly.io、heroku へデプロイをして、最終的に Render にしました。<br>
Render は github と連携して、自動デプロイができて、無料枠が存在するため採用しました。</p>
<p><strong>APIと拍手ボタンを再利用できた</strong><br>
hakusyu apiを作ったことで、拍手ボタンのコンポーネントを再利用し、<a href="https://yukyu.net" target="_blank" rel="nofollow noopener noreferrer">自分のブログ</a>に拍手ボタンを実装できました。開発時はそんなことは考えていなかったのですが、ふとブログにも設置したいなと思いたちやってみたら、すぐにできました。</p>
<h3 id="%E6%82%AA%E3%81%8B%E3%81%A3%E3%81%9F%E7%82%B9">
<a class="header-anchor-link" href="#%E6%82%AA%E3%81%8B%E3%81%A3%E3%81%9F%E7%82%B9" aria-hidden="true"></a> 悪かった点</h3>
<p><strong>システムの規模が大きすぎる</strong><br>
Controllerが1つしかない、簡単なRails APIであるため、<br>
Rails を使うほどでもない気がしています。しかし、OからRailsアプリを作る手順の学び直す機会にはなりました。CORSの設定など、一からの開発だから行うことを実際に手を動かしながらやれました。</p>
<p><strong>新しい技術をつかっていない</strong><br>
個人開発するときは、何かしら自分が初めて使う技術を採用することにしていましたが、Next.js、Ruby on Railsと慣れたものばかりでした。</p>
<h3 id="%E5%B7%A5%E5%A4%AB%E7%82%B9">
<a class="header-anchor-link" href="#%E5%B7%A5%E5%A4%AB%E7%82%B9" aria-hidden="true"></a> 工夫点</h3>
<p><strong>Notion は URL で内容が推測できる</strong></p>
<p>Notion のページのタイトルが<code>my name is ugo これはみんなには内緒だよ</code>であった場合、Notion の URL は<code>https://notion.so/&lt;username&gt;/my-name-is-ugo-&lt;一意のID&gt;</code><br>
となります。英数字のみがURLに反映されるようになっています。<br>
万が一、Notion ページのタイトルが機密性の高い英文で内容だった場合、URL だけでどんな内容なのか推測できてしまいます。なので、URL は DB に暗号化して保存されるようにしました。</p>
<p><strong>emojiパラメータでボタンの絵文字を変更できる</strong></p>
<div class="code-block-container"><pre><code>https://hakusyu.vercel.app/?url=test&amp;emoji=💚
</code></pre></div><p>として、埋め込むと<br>
<img src="https://storage.googleapis.com/zenn-user-upload/3ef8c16b0265-20221216.png" alt loading="lazy" class="md-img"><br>
このように、ボタンの絵文字を変更できるようにしてあります。なので、「拍手」以外にも「いいね」「好き」などを表現できます。</p>
<h2 id="%E5%B1%95%E6%9C%9B">
<a class="header-anchor-link" href="#%E5%B1%95%E6%9C%9B" aria-hidden="true"></a> 展望</h2>
<p>Notion APIを使って拍手のデータガNotionのテーブルに記録されるようにできるようにしたいなと思っています。</p>
<h2 id="%E8%B3%87%E6%96%99">
<a class="header-anchor-link" href="#%E8%B3%87%E6%96%99" aria-hidden="true"></a> 資料</h2>
<p>CTOA若手エンジニアコミュニティ 勉強会#1にて「Notionで拍手できるようにした話」として発表しました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4a87d8d6b336b" src="https://embed.zenn.studio/card#zenn-embedded__4a87d8d6b336b" data-content="https%3A%2F%2Fspeakerdeck.com%2Fyukyu30%2Fnotiondepai-shou-dekiruyounisitahua" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/yukyu30/notiondepai-shou-dekiruyounisitahua" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/yukyu30/notiondepai-shou-dekiruyounisitahua</a></p>
<hr>
<p>GMOペパボエンジニア Advent Calendar<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__959260b2c6226" src="https://embed.zenn.studio/card#zenn-embedded__959260b2c6226" data-content="https%3A%2F%2Fadventar.org%2Fcalendars%2F7722" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://adventar.org/calendars/7722" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://adventar.org/calendars/7722</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__79bba34d5ce9" src="https://embed.zenn.studio/card#zenn-embedded__79bba34d5ce9" data-content="https%3A%2F%2Fadventar.org%2Fcalendars%2F7784" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://adventar.org/calendars/7784" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://adventar.org/calendars/7784</a></p>


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

Discussion