【Adalo】Airtableのデータを操作してみた（その１_データの取得Read）

（構成）
第１回：AdaloからAirtableのデータを取得（Read）※本編
第２回：AdaloからAirTableにデータを追加（Create）
第３回：AdaloからAirTableのデータを更新（Update）
第４回：AdaloからAirTableのデータを削除（Delete）
第５回：Airtableから読み込んだデータにfilter、sortをかける

（API接続 関連ブログ）　
・SheetDBを使ってAdaloからスプレッドシートのデータを変更した　
・Sheetsonを使ってAdaloからスプレッドシートのデータを変更した　

（なぜこの記事を書いたか）
Adaloの外部データベースとしてAirtableを使うことはよくあると思います。ネットを見るとAirtableのデータをAdaloで読み込む記事はよく目にするのですが、逆にAdaloからAirtableのデータを変更する記事は殆ど目にしません。

こういう場合、おそらくZapier等の連携アプリでやる人が多いため直接AdaloからAirtableのデータを操作するという事をしないのかも知れません。確かにZapierもいいのですが、無料範囲だと月に100回しかアクセスできないのであっという間に無料範囲を使い切ってしまうこともあると思います。

そこで今回は連携アプリ（Zapier、Integromat等）は使わずに、APIを通じてAdaloとAirtableを直接接続して、Adalo側からAirtableのデータを操作してみます。

～Airtable側の設定～

１．データベースの作成

Airtableで「会社」というファイルの中に「健康診断3」という名前のシートを作りました。データを入れるフィールドとして「名前」、「身長」、「体重」、「Date」（データを入力した時間の意味）の４つを設けました。
（※なぜDateというフィールドが必要なのか疑問に思われている方もいると思いますが、後で説明します。）

ちなみに今回のデータをAirtble風に言うと以下のようになります。
・Base：「会社」（Excelの「Book」（ファイル）に相当します）
・Table：「健康診断3」（Excelの「シート」に相当）

Base（ベース）と言っても基地（Base）ではなくてData BaseのBaseです。

２．API documentationを開く

画面右上の「HELP」（または隣の?マーク）をクリックすると右側にリスト一覧が表示されます。

一番下に表示されている「API Documentation」をクリックして次画面に進みます。

３．List Recordsを開く

設定に必要なAPI情報は「List Records」という部分に記載されています。

画面右側には「健康診断3」というテーブルの各種API設定が載っています。
下記の情報がAdaloの設定画面で必要になります。
①API のURL
②認証の設定
③API Key
④Result key：「records」

～Adalo側の設定～

４．外部データベースの読み込み設定

～Name&Typeの設定（1ページ目）～
データベースコレクションのExternal Collections（外部データベース）の「＋ADD COLLECTION」をクリックして、設定を開始します。

これが設定画面の1ページ目です。AirtbleのAPI Documentationを参照しながら設定を行っていきます。

（設定の仕方）
・Collection Name：分かりやすい名前を付けます
・API Base URL　  ：下の①部分です
・Auth Setup　　  ： Header部分に②認証データを入力します
　　　　　　　　　　Authorization　Bearer (API Key)の形です

～Endpointsの設定（2ページ目）～
・一番上の「Get All」：
「Results key」→ records  と入力（入力しないとエラーが出ます。）

（意味）
HTTP通信（例えばGET）でAPI接続をするとJSON形式でデータが返ってきます。JSONは{"records"：{・・・・}}のようなオブジェクト構造になっており、keyがrecords、valueが｛・・・・｝の部分です。Result keyは返ってきたデータのキー（key）の部分という意味で、Airtbleはrecordsの部分が相当します。

・UpdateのMethodの設定を変更
「PUT」（初期設定）→「PATCH」に変更

(意味)
データUpdate（更新）の時はPUTかPATCHのいずれかを選択します。似ていますがデータの変更の仕方異なります。
PATCH・・・データの一部分だけを変更し、その他の部分はそのまま。
PUT・・・・データの一部分だけ変更すると、変更を設定してないその他の部分は空欄になる。

～Test Connection(3ページ目)～
テスト通信を行います。（「RUN TEST」ボタンを押します）

通信がうまく行くとTest Successful!という以下の画面が表示されます。
画面右下の「Create Collection」ボタンを押して外部データベースの設定を保存します。

５．外部データベースの読み込み完了

データベースのアイコンをクリックすると以下のように読み込んだプロパティを確認することが出来ます。（ただ、この時点ではデータの実際の中身は見ることが出来ません）

Airtbleで設定したのは「名前」、「身長」、「体重」、「Date」の４つの項目だけだったのに読み込まれたプロパティには「id」、「Created Time」等が追加されています。（Adaloユーザーにはcreated Timeはなじみが有りますが、idという項目が自動で追加された部分はAirtbleの大きな特徴です。）

後で説明する「Upadate」や「Delete」でこのidが大活躍します。

６．データをカスタムリストで表示する

Home画面にカスタムリストを配置し、さっき読み込んだデータベースと紐づけます。

～読み込んだデータをTextコンポーネントと紐づける～
「名前」、「身長」、「体重」、「Date」の4項目をAirtbleに入力しましたが、「Date」はここでは表示不要なので残りの3項目をtextコンポーネントと紐づけます。

じゃあ、何で「Date」なんていう余計な項目をわざわざ作ったんだ？と思っているところでしょう。後で説明するソートで使うのです。

７．プレビューで表示（何故か順番がバラバラ）

Airtbleのデータを表示すると以下のようになります。表示はされるのですが、何故かデータの順番がバラバラになってしまいます。

Airtbleってこういうもんなんでしょうか？（誰か教えて下さい！！！）
最初やった時はびっくりしました。何度やっても順番がバラバラなので今はそういうもんだと思っています。

そうは言っても気持ち悪いのでソートしてみたいと思います。

８．読み込んだデータをソートする

ソートしようとしたのですが、「ソート」という項目が無く、FILTERしか見当たりません。外部データベースを読み込むとソートという項目が出てこないようです。（あせった。）

～FILTERでソートする～
「＋ADD FILTER」部分をクリックすると「Query Parameter」という見慣れない項目が出てきます。よく分からないのでAdalo Resourcesを見たら外部データベースを使った時のソートのやり方が出ていました。

Sorting Airtable Lists

ソートするには「並べ替える項目（列）」と「並び順」（昇順、降順）の２つの設定が必要です。これを以下のようなやり方で設定すると書かれていました。（Adaloの設定ではなくAirtbleのやり方のようです。）

①ソートする項目（field）の設定
Name：sort[0][field]
Value：Date　　→ここで「Date」(入力した日付&時間)を使う
（注意）
Valueの設定はマジックテキストは使わないでテキストを手入力して下さい。（何故かはよく分かりませんが、マジックテキストでDateを表示するとうまく動きません）

Airtableが自動で作ってくれるcreatedTimeをマジックテキストで読み込んで使ったのですが、これではダメでした。理由は分かりませんがValueはテキストの手入力しないとダメなようです。

②ソートする順序（昇順、降順）
Name：sort[0][direction]
Value：desc

※ソートの順番
asc  ：昇順（ascend）
desc：降順(descend)

ソートの順序を設定します。（下記は降順descの設定）

～ソートが完成！～

やっと出来ました。（意外に長かったです。ふっ～。）
ただ、読み込んだデータの順番がバラバラなのはどうも腑に落ちません。今回ソートするためにわざわざDateという日付＆時間のデータを入力しましたが、これも変ですよね。

データを入力するとAirtble側で勝手にCreatedTimeというデータを作ってくれているのにこれを使うと何故かダメなんです。（画面が表示されない）本当にAirtbleは謎が多いです。（誰か私に教えて下さい）

予定よりずいぶん長くなったのでCreate(データ追加)、Update（データ更新）,Delete（データ削除）は別のページを作って説明することにします。

第１回：AdaloからairTableのデータを取得（Read）※本編
第２回：AdaloからAirTableにデータを追加（Create）
第３回：AdaloからAirTableのデータを更新（Update）
第４回：AdaloからAirTableのデータを削除（Delete）
第５回：Airtableから読み込んだデータにfilter、sortをかける

（過去の投稿はこちら）
https://note.com/mucho3/n/n632515d056d1