Airtable API 連携

Aritable APIをSTUDIOへ連携する

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

データベース管理ツールである「Airtable」上のデータをAPI連携機能を用いて、STUDIO上で利用できます。連携・取得したデータを使い、サイトをデザインし公開することができます。

この記事では、STUDIOでの Airtable API 連携手順と連携後の設定についてご紹介します。

Airtable API 連携手順

Airtable のAPI keyを生成して、連携に必要なcURLをコピーします。

1. API keyを生成する

Airtable の Account内Overviewを開き、「Generate API Key」ボタンをクリックしてKeyを生成します。

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

2. API Keyをコピーする

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

「Go to developer hub」をクリックします。

「API key」タブに表示されるAPI keyをコピーします。

3. cURLをコピーする

利用したいデータベースを開き、右上のHELPボタンをクリックします。

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

すると以下のような画面が表示されます。

画面左に表示される目次の上から5番目にあるデータベース名(画像ではARTIST TABLE)をクリックし、List Recordsを開きます。

cURLをコピーします。コピーしたcURL内の「YOUR_SECRET_API_TOKEN」にコピーしたAPI keyを入れ替えておきます。

4. STUDIO上で連携する

STUDIO デザインエディターを開き、左の追加パネルからAPIタブを開きます。

「+新規追加」ボタンをクリックします。

表示された画面で、APIタイプ「 Airtable 」を選択します。

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

※API keyを追加したcURLであることを確認してください

その後API 確認が実施され、成功すると「API確認済み」となり連携完了です。
一度、設定画面枠外をクリックしてエディターへ戻ります。

5. APIデータをリスト内の要素に紐付ける

連携が完了すると、「追加パネル > APIタブ」に連携したAPIリクエストが表示されます。

使用したいAPI リクエストをクリックすると、APIリストが表示されるのでドラッグ&ドロップまたはクリックでページに配置します。

配置・追加したテキスト・画像ボックスなどの要素に、データパネルからAPIデータ(プロパティ)を紐付けてデザインしていきます。

プロパティの種類や紐付けの方法について詳しくは以下をご覧ください。

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

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

注意点

Airtable API連携の際は、API連携 (Beta) 自体の注意事項を必ずご確認ください。

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