梅雨の前に大物洗濯と掃除を済ませたく、休日の天気がいいとうれしい藤井です。
今回は、さまざまな情報を管理できるNotionとノーコードで手軽にWebサイトを作成できるSTUDIOを連携して、趣味の旅行で撮影してきた写真を紹介するギャラリーサイトを作成してみました！
実際にSTUDIOとNotionを連携してみて感じたことと合わせて、連携方法やメリットを紹介します。
STUDIOのAPI連携とは
STUDIOのAPI連携とは、外部サービスから取得したデータをSTUDIO上でデザインして、公開できる機能です。
今回は、Notionのデータベースで用意した写真や撮影地などの情報をSTUDIO上で取得して、ギャラリーサイトとしてデザイン・公開しました。
完成したサイトはこちらです！
STUDIOのAPI連携条件
- 利用できるHTTPリクエストメソッドは、GET / POST
- 外部テータの取得のみに対応（POSTもデータ取得の用途のみ）
- 取得データの表示件数は、最大20件
- パラメータの追加は、1つまで
- 将来的にプラン制限が入る可能性がある
https://help.studio.design/ja/articles/6500751-api%E9%80%A3%E6%90%BA-beta#h_a2c44a2bde
STUDIOとNotionを連携するメリット
ノーコードツールのSTUDIOとさまざまな情報を管理できるNotionを連携することで、次のようなメリットがあります。
- データの更新・管理はNotion、デザインとサイト公開はSTUDIOと役割分担できる
- 連携した情報は、スマホからも更新できる
- STUDIOのプロジェクトメンバーでなくても部分的なコンテンツの管理を行える
おすすめの活用方法
- 手軽に更新したいおしらせなどのコンテンツの作成・管理
- 商品リストなど同じ項目を一覧表示するコンテンツの作成・管理
- 部分的なコンテンツの更新・管理のみをお任せしたいときに導入
現時点でSTUDIOのAPI連携は、表示件数が20件までと制限があるので、更新が必要な小さなコンテンツの管理に向いていると思います。
たくさん記事を表示するオウンドメディアのようなコンテンツにはあまり向いておらず、そのような場合はSTUDIO純正のCMSを活用するのがおすすめです。
また、将来的にプラン制限が入る可能性もあるようなので、長期で運用予定のサイトコンテンツでは、少し慎重に導入を検討する必要もありそうですね。
STUDIOとNotionを連携する手順
それでは、Notion側の作業とSTUDIO側の作業に分けて、API連携とサイト制作の手順を紹介します。
Notionですること①：データベースを用意する
今回は、一覧に写真と撮影した地域、年月を表示したいので、次のようなデータベースを作成しました。
image、region、dateプロパティに加え、カテゴリページを作成するために、categoryプロパティを用意しています。
Notionですること②：インテグレーションを作成する
Notionの My Integrations にアクセスして、「+新しいインテグレーション」から基本情報に任意の名前を入力してインテグレーションを作成します。
インテグレーションが作成できたら、機能を設定します。
「コンテンツを読み取る」と「コメントの読み取り」にチェックを入れ、「ユーザー情報なし」を選択しましょう。
シークレットはSTUDIOでAPIを追加する際に必要になるので、コピーしておきましょう。
Notionですること③：データベースとインテグレーションを接続する
はじめに用意したデータベースを開いて、右上の3点メニューを開いて、「接続先」を選択します。
検索窓に作成したインテグレーションの名前を入力し、候補に表示されたらそちらを選択したら、接続完了です。
Notionですること④：データベースIDを取得する
データベースIDは、接続したデータベースのページURLから取得します。URLは「https://www.notion.so/ワークスペース名/データベースID?v=ビューID」で構成されているので、「ワークスペース名/」の後ろから「?」 までの文字列をコピーしておきましょう。
STUDIOですること①：APIを追加する
いよいよNotionとSTUDIOを連携していきます！
連携したいプロジェクトのデザインエディターで左のパネルから「追加」→「API」→「+新規追加」、画面中央に表示されるパネルから「Notion」を選択します。
「Notion API Key」と「Database ID」の入力画面が表示されるので、Notion側で取得したインテグレーションシークレットとデータベースIDを入力します。
並び替え設定は、必要に応じて選択してください。
「次へ」を選択するとAPIの確認が行われます。
成功すると次の画面に「API確認済み」と表示され、NotionとSTUDIOのAPI連携が完了です！
STUDIOでやること②：resultをアートボードに配置、デザインする
API連携が完了すると、デザインエディターで左のパネルの「追加」→「API」に連携したAPIが表示されます。
使用したいAPIを選択するとresultにAPIリストが表示されているので、そちらをドラッグ＆ドロップでアートボードに配置します。
配置したあと、デザインエディターで要素のレイアウトなどを変更しましょう。
STUDIOでやること③：データを要素に紐付ける
データを紐付けたい要素を選択すると、左のパネルにAPIで取得したデータが表示されます。
この中の「propaties」を開いて、該当するデータの右にある「⚫︎」をクリックしたまま紐付けたい要素までドラッグしましょう。
アートボード上の要素にデータが反映されたら、紐付け完了です！
完成サイト
今回、STUDIOとNotionをAPI連携して作成したサイトはこちらです。
感想
実際にSTUDIOとNotionをAPI連携してみて、複雑なデータの紐付けも視覚的に操作できて、専門的な知識がなくても実装できるところが魅力的だと感じました。
また、取得したデータにフィルターをかけるなどのカスタマイズもできて、幅広く利用できるようにも思いました。
一方で、いくつかデメリットも感じたので紹介しておきます。
- 現時点では、取得したデータから記事ページを作成することはできない
→ 一般的なブログのように一覧から記事ページを表示したい場合は、- 記事ページごとにAPIを追加してデータを取得
- Notionで作成したページにリンクさせる
- ひとつのAPIにフィルターをかけて複数ページで汎用することはできない
→ 今回のカテゴリページは、ページごとに新たにAPIを作成し、フィルターを指定して必要なデータを取得しました（ちょっと大変）
ひとつのAPIデータをフィルタリングして複数ページで利用できるようになるとうれしいなぁ。
STUDIOのAPI連携機能は、まだBeta版なので、今後の更新にも注目したいですね。
おわりに
STUDIOとNotionをAPI連携する方法、メリットなどを紹介しました。
たくさんの記事を表示するオウンドメディアを作成する場合は、STUDIOのCMSを利用するのがよいですが、手軽に更新・管理したいコンテンツを作成したいときなどには、今回紹介した方法を導入してみるのもおすすめです。
STUDIOのAPI連携機能で、Webサイト制作や運用方法の幅がより広くなるので、ご興味のある方はぜひお試しください♪
