見出し画像

【Adalo】Sheetsonを使ってスプレッドシートのデータを読み込んでみる(GET)

(構成)
SheetsonはスプレッドシートAPIです~
第一回:スプレッドシートのデータを読み込む_READ(GET)※本ページ
第二回:スプレッドシートにデータを追加する_CREATE(POST)
第三回:スプレッドシートのデータを更新する_UPDATE(PUT)
第四回:スプレッドシートのデータを削除する_DELETE(DELETE)

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

Adaloからスプレッドシートのデータを読み込んだり、変更したりするにはスプレッドシートAPIを使うと便利です。Adaloから直接スプレッドシートのデータを読み書きできないのでAPIの力を借りるわけです。

スプレッドシートAPIにもいろいろ種類があって、以前はSheetDBというAPIを紹介しましたが、今回はSheetsonというAPIをご紹介します。何でそんなにいろいろな種類のAPIを紹介するのかと不思議に思われる方もいると思いますが、それはSheetsonが無料で使える範囲がとてつもなく大きく、とても太っ腹なところに感銘したからなんです。

sheetsonのURL https://docs.sheetson.com/

画像16

(Sheetson 料金)
無料プランでほとんどのことが出来てしまいます。逆に太っ腹すぎて心配になってしまいます。(ちゃんと儲かってんの?)

画像17

~このページを読むと分かる事~
・Adaloからスプレッドシートのデータを読み込む方法
(スプレッドシートAPIとしてSheetsonを使用)

~準備~
Sheetsonを使ってスプレッドシートのデータを読み込む場合、各種設定が必要になってきます。順を追って説明します。この通りにやれば迷うことなくデータの読み込みが出来ます。

1.スプレッドシートでデータを作る
Sheetsonの使い方に関しては技術資料のドキュメント(表紙ページのDocs)にすべて書いてあります。まずはここをよく読んで下さい。

画像3

サンプルとしてスプレッドシートで以下のような簡単なデータを作りました。1行目のデータは各種プロパティの見出し行として使います。(必ず設定して下さい)

見出し行とシート名(タブ)はURLにパラメータとして追加する場合があるので英字にした方がエラーを避けることが出来ます。(特にシート名は必ず英字にして下さい。大文字でも小文字でも構いません)

画像1

2.「編集者権限」で共有設定をする
他の種類のスプレッドシートAPIでは共有設定をすることはあまりないのですが、Sheetsonは必要です。google@sheetson.comを「編集権限」で共有をかけて下さい。

画像2

3.API Keyを取得
表紙のページの「Go to Console」という部分をクリックするとユーザー一人に対して1つのAPI Keyが割り当てられます。

画像4

以下のような画面が現れます。ユーザーのメールアドレス、加入しているプラン(最初はFreeプランになっている)、API-Key等が表示されています。

画像5

この表示もちょっと独特なのです。他のスプレッドシートAPIではスプレッドシートごとにAPI Keyは割り当てられるのですが、Sheetsonの場合はユーザー1人に対して1個だけ付与されます。スプレッドシートが複数になる場合はスプレッドシートIDを認証のヘッダー部分に記入することで対応しています。

4.必要項目を一覧にする
設定に必要な項目は大きくわけると下記の4項目です。Adaloで各種設定をするときに一覧でまとまっていないと、あっち行ったりこっち行ったりして混乱するので一覧表にまとめることをお勧めします。(自分は大変混乱したので必ず一覧表を作ってから作業をしています)

①API Key
②スプレッドシートID(以下で示した部分です)
(例)
「https://docs.google.com/spreadsheets/d/{スプレッドシートID}/edit
#gid=0」
③API のURL

 https://api.sheetson.com/v2/sheets/(参照するシート名)
④ヘッダー(Header)認証 → 下記の2つ必要
1個目:
Authorization
Bearer(API Keyを入力)

2個目:
X-Spreadsheet-Id
(スプレッドシートIDを記入)

~Adalo側での設定~
5.外部データベースの読み込み


Adaloの左ツールバーの一番下に「External Collection」(外部データベース)という項目があります。「+ADD COLLECTION」をクリックして外部データベースを読み込む設定を行います。(ここでは「外部データベース」とはスプレッドシートのデータの事です)

画像7

6.Name & URLの入力
・Collection Name:分かり易い名前を入力(日本語可)
・API Base URL: https://api.sheetson.com/v2/sheets/{シート名(タブ名)}
・Auth Setup(認証):
 →Headerを2回クリックして2種類の認証データを入力します。
1個目の認証(Header)
  Authorization
  Bearer (Your API Key)


2個目の認証(Header)
  X-Spreadsheet-Id
(Your Spreadsheet ID)

画像8

7.End points
Get Allの部分をクリックしてResults Keyに小文字でresultsと入力
入力したら「Done」をクリックします。

画像9

8.Test Connection(接続テスト)
うまく接続できるかどうか「Run Test」をクリックします

画像10

9.読み込み成功画面が表示されます
エラー表示が出たら、エラーの原因が表示されているのでもう一度「BACK」ボタンを押して全画面に戻り、やり直ししてみて下さい。

私は初めてSheetsonを使ったとき、何度やってもエラーが出てしまい、いい加減嫌になってきました。落ち着いて最初からやり直したらうまく行きました。

(私が間違えた箇所)
①スプレッドシートの「認証」(編集者権限)を忘れていた。
②EndpointsのGet Allの「Result Key」の入力をしていなかった。
 → resultsと入力した。

画像11

10.Adaloに外部データベースが表示されます
ここでは「Cities Data」という外部データベースが表示されました。プロパティ名は表示されていますが、具体的な中身のデータはここでは見ることが出来ません。

AdaloのHome画面などにカスタムリストを配置してデータベースと紐づけしてデータの中身を確認します。

rowIndexという行データは特別設定していませんが、自動的に割り振られて表示されます。ここがSheetsonの特徴です。airTableなどのデータベースも自動でid番号が割り振られますので同じ類です。(sheetsonのrowIndexは行番号なので2とか3とかいう番号が割り振られます。)

画像12

11.カスタムリストと外部データベースを紐づけします

画像13

12.プレビューで表示します
外部データベースから取得したデータは以下のように表示することが出来ました。

画像14

(元々の外部データベース)
元々のスプレッドシートは以下のようなデータです。「country」という項目がありましたが、すべてUSAなので不要と思い、Adaloには表示していません。rowIndexは勝手についてくるのでid代わりに表示することにしました。

画像15

今後このデータベースにデータを追加したり、変更したり、削除したりします。長くなったので別ページに書くことにします。
(別ページで説明)
・Create(POST)・・・・・行の追加
・Update(PUT/PATCH)・・・データの変更(更新)
・Delete(DELETE)・・・・・データの削除(行単位で削除)

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

この記事が気に入ったらサポートをしてみませんか?