StudioとNotionのAPI連携の手順【画像解説】

この記事ではSTUDIOのAPI連携機能を使って、Notionのデータベースの情報をSTUDIOで制作したサイトに表示する方法を解説していきます。

APIのことが全くわからないという方でも実装できるように画像付きで細かく説明します。

なお、記事公開時点ではSTUDIOのAPI連携機能はBeta版のため、仕様変更等で記事内の表現と実際の環境が異なる場合があります。ご了承ください。

Notionで管理し、STUDIOで見せる

今回行うAPI連携の全体像は以下のような形になります。

Webサイトに掲載したい情報はNotion側で管理し、STUDIOのAPI連携機能を使ってそれらのデータを吸い上げ、綺麗にレイアウトして見せるという役割分担です。

Notionの情報管理のしやすさと、STUDIOのデザインの自由度の高さ、それぞれの良いとこ取りと言えます。

Notionと連携してコンテンツを管理するメリット

2022年10月時点ではSTUDIOのCMSの更新はPCからしか行えませんが、Notionと連携すればNotionのデータベースをスマホから更新し、STUDIOのサイト上に反映させることが可能になります。

また、STUDIOのCMSの管理権限はすべてのコンテンツに対して一括付与となりますが、Notionの場合、ページ単位で編集権限を付与できるため、局所的に編集作業をお願いしたい場合などに柔軟な対応が可能というメリットがあります。

1．Notion側でインテグレーションを作成する

それでは、API連携の手順を説明していきます。まずはSTUDIOとNotionを連携させる際に必要になるキーやIDの取得の作業から行います。

https://www.notion.so/my-integrations にアクセスし、［＋新しいインテグレーション］をクリックし、画面に表示された基本情報を入力していきます。

名前とロゴはご自身がわかりやすいものを入力・アップロードしてください。関連ワークスペースはAPI連携をしたいワークスペースを選択します。

機能については以下のように設定します。

• コンテンツを読み取る：ON
• コンテンツを更新：OFF
• コンテンツを挿入：OFF
• コメントの読み取り：ON
• コメントを挿入：OFF
• ユーザー情報なしを選択

最後に［送信］を押して完了です。

次の画面でトークン（下図）が発行されますが、こちらはのちほど使用しますので、一旦ウィンドウを残しておくとスムーズです。ここでの作業は終了で、次はNotionのワークスペースに移動します。

2．Notion上でコネクトの追加とデータベースIDを取得する

NotionのページURLが必要となるため、ブラウザ版でログインします。

連携させたいデータベースのページを開いたら、ページ右上の［メニュー］→［＋コネクトの追加］→［先ほど作成したインテグレーション名］を選択します。

「〇〇はこのページとすべての子ページにアクセスできるようになります。続行しますか？」というメッセージが表示されますので、「はい」を選択します。

これでこのページをSTUDIOと連携させるためのNotion側の準備が完了です。

この後、STUDIOとの連携作業でデータベースIDが必要になるので、ここでコピーしておくとスムーズです。データベースIDはページURLのうち下記の枠内の部分になります。

［ワークスペース名/］の後ろから［？］の前までの部分、もしくは［notion.so/］の後ろから［？］の前までの部分です。

ちなみに今回はNotionでこのようなテーブルデータベースを作成しました。

次はSTUDIOに移動します。

3．STUDIO側でNotionのAPI連携を設定する

STUDIOのデザインエディタで［＋追加］タブ→［API］→［＋新規追加］→「新しいAPIを追加する」→［Notion］を選択します。

次の画面で［Notion API Key］と［Database ID］の入力を求められますので、ここまでの手順で用意したそれぞれの文字列を入力します。

入力すると［並び替え設定］の項目が出現します。こちらはNotionから持ってきたデータをどのような順番でSTUDIO上で表示するかを指定する項目になります。

今回は開催日の昇順で表示したいため、選択肢の中から［開催日 ↑］を選択します。

次の画面で「API確認済み」と表示されれば連携完了ですが、前の画面で並び替え設定を選択したにも関わらずボディーの欄が空欄になっていることがあります。

本来であれば

{
    "sorts": [
        {
            "property": "開催日",
            "direction": "ascending"
        }
    ]
}

と記述されている必要があります（開催日のプロパティを参照して、ascending（昇順）に並べるということを指示する内容）。なお、降順にする場合は「ascending」を「descending」に書き換えます。

不具合で空欄になっている場合は、一旦表示されているポップアップを閉じてから、［鉛筆マーク］をクリックして再度開くと表示されます。

なお、名称はここで変更することができます。

4．STUDIOのデザインエディタにNotionのデータを流し込む

通常のボックスやテキストボックスを追加するときと同じように、APIのresultをドラッグ＆ドロップします。

4-1．プロパティの紐づけ方

追加されたボックスの中の要素をクリックすると左上に紐づけのアイコンが出現します。

クリックするとAPI連携で取得した情報が表示されます。この中で使うのは［properties］です。

クリックするとNotion側で用意していたプロパティの一覧が表示されます。ここでは例として、まずヘッダー画像をSTUDIOのデザインエディタに流し込んでみたいと思います。

［properties］→［ヘッダー画像］→［files］→［file］の順に展開していきます。紐づけに使用するのは［url］の情報です。こちらを画像を表示させたい箇所に紐づけます。

テキストデータも同様の手順です。例えば講座名であれば、［講座名］→［title］と展開して［plain_text］の情報をデザインエディタ上のテキストボックスに紐づけます。

紐づけが完了した後にNotionのデータを書き換えたとき、デザインエディタ上の表示は即時には更新されない仕様のようです。デザインエディタ上の表示を更新したいときは、下図の「更新ボタン」を押してください。

4-2．紐づけがうまくできない例

※この項目は紐づけが問題なくできている方は読む必要はありません。

プロパティの紐づけを行うときに、一点注意することがあります。それはNotionのデータベースが空欄のアイテムを選択していると紐づけの設定ができないということです。

すこしややこしい事象のため、まずは以下の画像をご覧ください。

「須山貴弘」の「肩書等」の欄が空欄になっています。この状態でSTUDIO上で「肩書等」のプロパティの紐づけを行うときに、「須山貴弘」のアイテムを選択して手順を進めると、「0 items」と表示されてしまい紐づけが行えません。

「肩書等」が空欄ではないアイテム（今回は中島健太郎または守野游）を選択すれば、肩書等のテキストまでたどり着くことができ、紐づけられます。

当然と言えば当然なのですが、仕組みに慣れていないうちは分かりづらい点でもあるので注意が必要です。

4-3．カラーコードの適用

ややイレギュラーな操作が必要なのはカラーコードを使う場合です。Notion側で指定したカラーコードをSTUDIOのボックスの塗りや文字色に適応したい場合は、該当するボックスを選択し、紐づけアイコンをクリック→［properties］→［カラーコード］と展開し、カラーコードを表示したらそれをデザインエディタ上部の［塗り］の方に持っていきます。

塗りを適応したいボックスに直接ドロップしてもうまくいかないのでご注意ください。

4-4．リンクの設定方法

リンクを設定したい場合は右側パネルの［リンク］から設定します。タブを［URL］に切り替えてから入力フィールドをクリックするとNotion側のプロパティの一覧が表示されますので、その中からリンクとして指定したいものを選択します。

上記と同様の手順で必要なプロパティをすべて紐づけ、あとはいつも通りSTUDIOのデザインエディタ上でデザインを調整したら完成です。

補足：Notion側で色の指定をする場合

アイテムごとに色を変更したい場合、Notionにカラーコードを記入するのテキストプロパティを作成し、そこに任意のカラーコードを入力することで実装できます。

その都度、カラーコードを入力しても実装自体はできますが、毎回ひと手間かかってしまうので、関数で自動的にカラーコードが入力されるように設定する方が良いと思います。

今回はSTUDIO側で表示するときにタグの部分に色をつけたかったので、選択したタグに応じてカラーコードが入力されるよう設定しました。

プロパティの作成で種類は「関数」を選択し、下図のように記入します。

(prop("タグ") == "コンディショニング") ? "#e0e9eb" : ((prop("タグ") == "手技") ? "#e2ebe0" : ((prop("タグ") == "ストレングストレーニング") ? "#ebe0e0" : "")) 

上記の関数は「タグでコンディショニングを設定したときに”#e0e9eb”のカラーコードを入力する（以下同様）。」という指示になります。使用するタグの数を増やす場合は一番後ろの「 ””)) 」の直前に［((prop("タグ") == "タグの名称") ? "カラーコード" :］を追加し、一番後ろに「)　半角括弧」を一つ追加してください。以降、指定するタグの数が増えるごとに一つずつ半角括弧の数を増やしていくことになります。

まとめ

連携の設定は初回はひと手間かかりますが、一度接続してしまえばそれ以降はNotion側で気軽に編集が行えるというメリットがあります。

ただ、STUDIOのCMSの管理画面も非常に使いやすいため、Notion側で管理する形態に切り替える必要性については吟味する必要があると思います。目的意識なく、なんとなく一部分だけをAPI連携に切り替えると、「ここはNotionで更新、こっちはSTUDIO CMSで更新、ここは…」というように逆に管理が煩雑になる可能性もあります。

現時点ではAPI連携の場合、STUDIO側でのデザイン表現において一部制約があることにも注意が必要です。

STUDIOのAPI連携機能はBeta版のため、今後の展開を楽しみに待ちたいと思います。

参考

Notion API 連携｜STUDIO U