対象プラン：全プラン
Aritable APIと連携する
注意：
本手順には外部サービスの手順も含まれています。外部サービスの仕様や動作、記事内の手順以外についてはチャット窓口でのサポート対象外となる可能性があります。
記事内の外部サービスの画面や仕様は2022年9月時点の情報です。記事と異なる場合、外部サービスにて最新情報をご確認ください。
API連携 (Beta) の注意事項を必ずご確認ください。
この記事では、API機能のBeta版についてご紹介しています。Beta版API機能は全プランでご利用いただけますが、今後は提供プランを限定した正式版API機能のリリースを予定しています。 正式版リリース後は、本Beta版API機能の提供を停止する可能性がございますこと、あらかじめご了承いただけますと幸いです。
API連携機能を使い、データベース管理ツールである「Airtable」上のデータを連携・取得します。このデータを使いサイトをデザインし公開することができます。本記事では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」をクリックします。
すると以下のような画面が表示されます。
画面左に表示される目次の上から５番目にあるデータベース名（画像ではARTIST TABLE）をクリックし、List Recordsを開きます。
cURLをコピーします。コピーしたcURL内の「YOUR_SECRET_API_TOKEN」にコピーしたAPI keyを入れ替えておきます。
4. エディタ上で連携する
デザインエディターを開き、左の追加パネルからAPIタブを開きます。
「＋新規追加」ボタンをクリックします。
表示された画面で、APIタイプ「 Airtable 」を選択します。
次に、Airtableでコピーした cURLを入力欄にペーストし、「次へ」をクリックします。
※API keyを追加したcURLであることを確認してください
その後API 確認が実施され、成功すると「API確認済み」となり連携完了です。
一度、設定画面枠外をクリックしてエディターへ戻ります。
5. APIデータをリスト内の要素に紐付ける
連携が完了すると、「追加パネル > APIタブ」に連携したAPIリクエストが表示されます。
使用したいAPI リクエストをクリックすると、APIリストが表示されるのでドラッグ＆ドロップまたはクリックでページに配置します。
配置・追加したテキスト・画像ボックスなどの要素に、データパネルからAPIデータ（プロパティ）を紐付けてデザインしていきます。
プロパティの種類や紐付けの方法について詳しくは以下をご覧ください。
また、日付のフォーマットを変えたり、表示文字数を指定するなどテキストプロパティの表示を調整できます。
詳しくは、プロパティの文字列フィルタでご確認ください。
