まえおき
昨年末、Notion公式Slackアプリがアップデートされました。
これまではSlack上で組織内のNotion記事をOGPのようにプレビューするための公式手段が用意されていなかったため、このアップデートは多くの人にとって朗報だったのではないでしょうか。
このアップデートがある前は、自前でプレビューする機能を実装する必要があったため（少なくとも自分は公式のNotionAPIに対応する良さそうなアプリを見つけられず😞)、弊社でも自前で実装して1年弱ほど運用を続けていました。
この機会に公式アプリへ乗り換えることを検討したのですが、検討の結果、自前のSlackアプリを運用し続けることにしました。
今回は、弊社で利用しているSlackアプリがどのような仕様で実装・構築されているのか紹介したいと思います。
公式と弊社でのプレビュー表示の違い
Notion公式アプリのプレビューがこちらです。
弊社で実装しているプレビューがこちらです。
大きな違いとして挙げられるのは
- コンテンツ内容をできるだけプレビュー内に含めている
- Databaseプロパティをカスタマイズして表示している
の2点です。
自前実装を始めたときになぜこの仕様が必要だったのか、順番に説明します。
可能な限りSlack上だけで記事閲覧が完結するようにしている
もちろんプレビューが何も無い状態と比較すると、タイトルや序文が表示されるだけでも、クリックすべきか圧倒的に判断しやすいです。
ですが、コンテンツ内容をできるだけ正確にプレビューに含める事により、Notionに遷移しなくてもざっと内容がわかるなら、それに越したことはないと考えて仕様を作っていきました。
もちろんSlack上での表現の限界があるため、すべてというわけにはいきません。このあたりを実装する上でのポイントは別途Podcastなどで話せればなと思います。
Databaseプロパティが記事のスコープを絞る手がかりを与える
弊社では、NotionのDatabaseを活用して、ページ同士にタグ付けし合うような構成にしています。どのチームの話なのか、誰が関係しているのかという情報がDatabaseプロパティに保存されています。
そのため Databaseプロパティがないとタイトルからだけでは判断が難しい というケースがよく見られました。これは、運用していく中でわかったことです。
例えば「開発フローについて」という記事タイトルだったとして、それが特定のチームの話なのか、全体に関わることなのか、スコープがパッと見てわかりづらいという感じです。
Notionいいねの利用を促進する
弊社ではNotion記事にいいねボタンを付ける機能を独自で作って運用しています。
いいね が多くされている記事は読んでみようかなと思いますよね。これも、プレビュー表示に必要な要素だと考え実装しています。
実装の仕組み
Slackには、投稿にリンクが含まれる場合にそれをプレビューするための仕組みがあります。(unfurlという単語の意味はこれを見て初めて知りました)
記事内より引用
図を簡単に説明すると、左上のような投稿があったらSlackは link_shared イベントを発生させます。そのイベントを、右下の自前処理で受け取ってプレビュー情報を整形し、Slack APIの chat.unfurl メソッドによりSlackへ情報を送信すると、左上の投稿が上書きされて、プレビューを出すことができるというものです。
システム構成
実装上こちらで用意するのは図でいう右下の処理だけになります。
弊社では、AWS Lambda上にServerless Framework で構築しています。
最初はGoogle App Scriptという選択肢を考えましたが、Bolt SDKを使いたかったということと、上述の通り表示にこだわっていた関係でNotion APIの処理が少し煩雑になりそうだったため、nodeで実装することにしました。
設定関連
-
Notion Integration
- プレビューしたい記事にConnectionを設定しておく必要があります。
- 記事をまとめたDatabaseがあれば、そこに一括で設定すると良いと思います。
-
Slackアプリ
-
Event Subscriptions > Subscribe to bot eventsでlink_sharedを設定します。 -
Event Subscriptions > App unfurl domainsでnotion.soを指定します。 -
OAuth & Permissions > Scopes > Bot Token Scopesで以下を設定します。-
channels:read,groups:read,mpim:read- publicチャンネル、privateチャンネル、DMのいずれでも動作するよう3つとも許可します。
-
links:read,links:write- unfurlのために必要です。
-
-
まとめ
弊社では、Notion公式が提供するアプリとはまた違った形で、Slack上でのプレビュー機能を運用しています。
ソースコード自体はどこのドメインでも使えるように汎用化してあるのですが、TypeScript初心者の初学習用に作ったものだったので公開できるレベルない状態です・・・要望等が多ければ、多少リファクタして公開することも検討したいと思います。
Podcast
準備中・・・実装上のポイントなどを含めた解説を配信する予定です。
TimeTreeのエンジニアによる記事です。採用情報: timetreeapp.com/intl/ja/corporate/careers / TimeTree Company Deck: bit.ly/3IyEEWt
Discussion