脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

MENU

AirtableのデータをAdaloに連携する手順紹介|初心者のアプリ開発

f:id:yuka-edu:20210620162700p:plain

どこかの記事で読んだ、「Adaloといえば外部連携!」という言葉。

わからないことだらけですが、とりあえずAirtableとの連携に挑戦してみました!

英語サイトを読みながら、試行錯誤で無事連携できたので、今日は設定手順を紹介させていただきます。

 

この記事を読むとわかること・・・

・AirtableのデータをAdaloに連携する手順

 

前提事項

Adaloの外部データ連携は有料プランとなります。

無料プランでもお試しができるので、試してみて気に入ったら有料プランに切り替えてください。

 

yuka-edu.hatenablog.com

  

Airtableとは何か

そもそも、Airtableをよく知らなかったのですが、スプレッドシートとデータベースのハイブリッドな仕組みなようです。

中身はリレーショナルデータベースの機能ですが、エクセルのようなスプレッドシートのように使えるそうです。

 

う〜んよくわからないですが、

使った感想としては、エクセルとは違い、列ごとにキチンと項目を定義するので、変な値は入れられないと言った感じです。日付を設定した列には、日付以外は入れられない。そんな感じです。

データベースはデータ管理に特化されているので、今後、別のアプリケーションに連携するなどの拡張性を持てるところが良いところだと思います。

 

こちらのサイトにAirtableの基本をわかりやすく説明されています。

Airtableの基本

 

Airtableにデータを準備

列ごとに項目を定義すればエクセルと同じ感じで使えるので、サクッとデータを用意しました。

今日は発表会の参加者リストです。

必ずデータを用意してから設定してください。

データがないとAdalo設定時にエラーとなります。

f:id:yuka-edu:20210619160932p:plain

 

AirtableとAdaloの設定手順

では、実際に連携するための設定手順を紹介します。

ここからは、こちらのサイトの手順(英語)を実際にやっていきます。

Connecting to Airtable - Adalo Resources

英語の説明しかないのですが、英語の勉強にもなる!はず!ということで、頑張って読みながらやってみました。

 

Airtableでの設定

Airtableはタブレット端末や携帯用のアプリもあるのですが、アプリからはできないようなので、パソコンからの操作をお願いします。 

 

Step1
  1. 画面右上のAccountを選択 

f:id:yuka-edu:20210619161745p:plain

 

 Step2
  1. Create API Key を選択 

f:id:yuka-edu:20210619161805p:plain

 こんな感じでAPIキーが生成されます。

f:id:yuka-edu:20210619161814p:plain

 

Step3
  1. 画面右上のHELPを選択
  2. Midway down select < > API を選択

f:id:yuka-edu:20210620150009p:plain

 

Step4
  1. 画面左の "テーブル名"を選択(ここではTable1テーブルです)
  2. List recordsを選択
  3. 画面右上の show API key を選択

f:id:yuka-edu:20210620152259p:plain


画面右側の(a)〜(d) は必要な項目を都度コピーして、Adaloの設定画面にペーストしていきます。

 

Adaloでの設定

事前に外部連携をできるように設定をお願いします。

Database Collectionsを選ぶと、無料版で2週間お試し設定ができます。

 

Step1
  1. 画面左のDatabaseアイコンを選択
  2. + ADD COLLECTION を選択

f:id:yuka-edu:20210620152312p:plain

 

Step2

それぞれ必要項目を入力していきます。

  1. Collection Name:好きな名前を入力
  2. API Base URL:Airtable API 情報の(a) を入力
  3. + Add ITEM > header を選択
  4. Name :Airtable API 情報の(b) を入力
  5. Value:Airtable API 情報の(c)を入力
  6. NEXTを選択

f:id:yuka-edu:20210620152322p:plain

*Airtable API 情報 画面

  • (a)は ? の手前までをコピーします。
  • (b) (c) は:をコピーしないでください。

f:id:yuka-edu:20210620152259p:plain

 

Step3
  1. Get All を選択
  2. Results Key に Airtable API 設定の(d) を編集
  3. DONE を選択

f:id:yuka-edu:20210620152350p:plain

 

Step4
  1. Update を選択
  2. Method に PATCH を選択
  3. NEXT を選択

f:id:yuka-edu:20210620152402p:plain

 

Step5
  1. RUN TEST を選択

f:id:yuka-edu:20210620152413p:plain

テスト結果が返されます。

Test Successful! となればOKです。

  1. SAVE COLLECTION を選択

f:id:yuka-edu:20210620152423p:plain

エラーになってしまう場合は、API Base URL やHeaderの値を見直してみてください。

英語にはなりますが、参考にしたAdalo公式ページを改めて載せておきます。

help.adalo.com

コレクションの一覧にAirtableの「発表会が追加されました!」

f:id:yuka-edu:20210620152610p:plain

 

まとめ

初めて、外部連携を試してみました!

エラーが出てしまうと、原因探しにあっという間に時間を使ってしまいます。

Databaseって、今まではSQLクエリの知識がないとデータを取り出せなかったのですが、Airtableはそんな知識不要で感覚的にテーブルを作れちゃう仕組みなんですね。

少しでも、私の設定内容がお役に立てれば嬉しいです。

 

▽続きの記事はこちら

yuka-edu.hatenablog.com

 

▽ NoCodeアプリ Adalo

www.adalo.com