メインコンテンツにスキップ

Airtable API 連携

API連携(Beta)機能を使って、データベース管理ツール「Airtable」のデータを取得し、Studioのサイト上に表示するまでの手順と設定方法を説明します。

昨日アップデートされました

注意:外部サービス連携とAPI連携 (Beta) について

■外部サービス連携における注意

  • 本手順には外部サービスでの操作が含まれます。外部サービスの仕様や動作、この記事に記載していない操作については、チャット窓口のサポート対象外となる場合があります。

  • 記事内の外部サービスの画面や仕様は2022年9月時点の情報です。実際の画面が異なる場合は、各外部サービスの公式ドキュメントで最新情報を確認してください。

■API連携 (Beta) における注意

  • API連携 (Beta) の注意事項を必ず確認してください。

  • この記事ではAPI機能のBeta版について説明します。Beta版API機能は全プランで利用できますが、今後は提供プランを限定した正式版API機能のリリースを予定しており、正式版リリース後は本Beta版API機能の提供を停止する可能性があります。

データベース管理ツールAirtable上のデータをAPI連携で取得し、Studioの動的リスト(APIリスト)で利用できます。 この記事では、Notion APIから取得した変数データの連携手順と、連携後にデータを紐付ける設定について説明します。

APIで取得した変数データを動的ページで利用することはできません。


AirtableのAPI keyとcURLを準備し、StudioのデザインエディタからAirtable APIと連携する手順を説明します。

手順 1. API keyを生成する

  1. Airtableで[Account]内の[Overview]を開きます。

  2. [Generate API Key]ボタンをクリックし、API keyを生成します。

※ Airtableの仕様変更に伴い、2023年8月以降は新規のAPI keyを作成できません。

手順 2. API Keyをコピーする

  1. Airtable画面右上のアイコンをクリックし、[Account]を選択します。

  2. [Go to developer hub]をクリックします。

  3. [API key]タブを開き、表示されているAPI keyをコピーします。

手順 3. cURLをコピーする

  1. 連携したいAirtableのデータベースを開きます。

  2. 画面右上の[HELP]ボタンをクリックします。

  3. 画面右側に表示される[Help]欄の一番下にある[API documentation]をクリックします。

  4. 表示されたAPIドキュメント画面で、画面左の目次から、上から5番目付近にある対象データベース名(例:ARTIST TABLE)をクリックし、[List Records]を開きます。

  5. 表示されているcURLをコピーします。

  6. コピーしたcURL内の「YOUR_SECRET_API_TOKEN」を、先ほどコピーしたAPI keyに置き換えておきます。

手順 4. エディタ上で連携する

  1. Studioにログインし、該当のプロジェクトでデザインエディタを開きます。

  2. 画面左のナビゲーションから[接続]アイコンをクリックします。

  3. [API]タブを選択し、[+新規追加]をクリックします。

  4. 表示された画面で、APIタイプとして[Airtable]を選択します。

  5. AirtableでコピーしたcURLを入力欄にペーストし、[次へ]をクリックします。

    • API keyを組み込んだcURLになっていることを確認してください。

  6. API確認が実行され、成功すると[API確認済み] と表示されて連携完了です。

    設定が完了したら、設定画面枠外をクリックしてエディタに戻ります。

手順 5. APIリストをページに追加する

連携が完了すると、追加パネルのAPIタブからAirtableのAPIデータが紐付いたAPIリストが表示されます。

  1. デザインエディタの左パネルで[接続]アイコンをクリックし、[API]タブを開きます。

  2. 使用したいAirtableのAPIリクエストをクリックします。

  3. リストパーツが表示されるので、ドラッグ&ドロップまたはクリックでページに配置します。

  4. 配置したAPIリスト全体を選択した状態で、右パネルで[データ]タブを開くと、リストに紐付いているデータの詳細を確認できます。パネルが閉じている場合は、右パネルを開いてください。

手順 6. APIで取得した変数データ(プロパティ)をAPIリスト内のボックス要素に紐付ける

配置したリスト内のボックス要素に、取得した変数データ(プロパティ)を紐付けます。操作方法の詳細は、API連携(APIリスト)> 変数データ(プロパティ)の紐付けを参照してください。


プロパティ文言の表示を変更する

日付のフォーマットを変えたり、表示文字数を指定するなどテキストプロパティの表示を調整できます。

詳しくは、プロパティの文字列フィルタでご確認ください。

こちらの回答で解決しましたか?