【Click】SheetDBを使いClickからスプレッドシートにデータを転送してみた

2023年1月7日 21:18

（なぜこれを書いたか）
NoCodeアプリのClickからスプレッドシートにデータを転送するやり方が知りたいという要望があったので手順を書いておきます。Clickからデータを直接、スプレッドシートには飛ばせないのでスプレッドシートAPIを経由してデータ転送することになります。

スプレッドシートAPIにはいろいろな種類がありますが、今回使うのはSheetDBです。私はSheetDBの無料枠（２つ）を使い切ってしまったので、最近はSteinというAPIを使っていますが、SheetDBはこの分野での王道と思っています。（使いやすいし、無料範囲でもスプレッドシートの行数に制限が無いのもありがたいです。しかも他のスプレッドシートAPIには無い機能も備えていたりします）

１．こんなアプリを作ります

前提条件としてどんなデータをスプレッドシートに転送するのかというと、架空の老人ケアハウスがあってそこの利用者さんを車で送迎するという状況を想定しています。メインは送迎に使う車の管理アプリになります。

車の運行に付随する以下の10個のデータをスプレッドシートに転送しようというのが今回の目的です。
（転送データ）
・日付（運転した日）
・車種
・運転者
・走行距離
・利用者さんの利用サービス種類
・同乗者人数
・車の使用目的（送り、迎え、ガソリン給油等）
・使用場所（行先）
・給油量（給油した場合）
・その他のコメント

項目が10個もあり、スマホ画面で表示すると見づらいのでスプレッドシートに転送しPCで閲覧しやすくします。また走行距離や給油量の月ごとの集計が容易に出来るようにするのが主な目的です。

（アプリの画面）
「入力画面」（左）と「データ一覧画面」（車両管理表）です。データはClick内部のデータベースには一切保管せず、すべてスプレッドシートで保持するようにしています。Clickからスプレッドシートのデータを読み込んでClickに表示しています。

（データが転送されたスプレッドシートの中身）
Clickから転送されたデータはスプレッドシートAPIを経由して下記画像のようにスプレッドシートに取り込まれています。

２．Clickのデータベースの準備をします

今回は入力項目が10個もあるので、毎回手入力するのは大変です。入力項目が決まっているものはそれだけでデータベースを作り、ドロップダウンで選択できるようにします。

（ドロップダウンにする項目）
「車種」、「運転手」、「利用サービス」、「利用同乗者数」、「利用区分」、「使用場所」の6個は内容が決まっているので、その都度の手入力ではなくドロップダウンからの選択にします。

ドロップダウンにする6種類のデータベースを下記に示します。（水色で囲んだところ）

それぞれのデータベースは以下のような内容になっています。
①車種

②運転者

③利用サービス（種類）

④利用同乗者数
これは手入力でもいいかな？と最初考えたのですが、選択する方が早いと思いあえてドロップダウンにしておきました。

⑤使用区分
使用区分というのは車を何に使ったかという事です。通常の送迎以外にガソリン給油とかその他の用事で使う場合もあるので項目に入れました。

⑥使用場所（車の行先）
利用者さんの住んでいる場所は大体決まっているのでこれもドロップダウンで選べるようにしました。新しいデータが必要になったらその都度追加することとします。

３．SheetDBの準備をします

スプレッドシートAPIとして今回SheetDBを使います。SheetDBを使えばスプレッドシートとの間で以下のデータのやり取りが出来るようになります。
・データの取得(GET)
・データの送信（Create）POST
・データの更新（Update）PUT/PATCH
・データの削除（Delete）

今回はデータをスプレッドシートに転送するだけなので上記のデータ通信のうちPOSTを使います。SheetDBのWebサイトにアクセスし、まずはAPI-Keyを取得します。

①API-Keyの取得
SheetDBのサイトの中から新規にAPIを作成する下記画面にアクセスして下さい。「＋Create new API」という青いボタンがあるのでそれをクリックします。

下記画面が現れるので右上の長細い欄にスプレッドシートのURLをコピーします。右下の「Create」ボタンを押すとAPI-Keyが作成されます。

すると下記の画面が現れ、スプレッドシートAPIのURL（エンドポイント）が表示されます。API-Keyはどうなったんだ！？と心配になりますが、APIのURLは以下の構造になっています。

「https://sheetdb.io/api/v1/{API-Key}」

v1/以下の部分がAPI-Keyとなります。これはアプリごとに異なる文字列となります。（AirtableのようにAPI-keyはどのデータベースでも共通というアプリもあります。まちまちです。）
※SheetDBは無料範囲ではアプリ2個まで作ることが出来ます。

（その他）
～シート名の指定方法～
ここで疑問を持たれる方もいるかと思います。スプレッドシートは何枚でもシート（タブ）が作れますよね。上記のURLはどのシートにアクセスできるのかと心配になりますが、初期設定では一番最初のシートにデータが転送されるようになっています。もし「sheet2」にデータを送りたい場合はURLにsheetパラメータを追加して、その後でシート名を指定して下さい。
（例）
シート名「sheet2」にデータを転送する場合のAPIのURL
「https://sheetdb.io/api/v1/{API-Key} ? sheet=sheet2」

４．ClickのカスタムClickFlowの設定（その１）

以下画像はホーム画面に各データのインプットやドロップダウンを配置した状態を示します。一番下にある「送信」ボタンにClickFlowを設定し、外部データベースであるスプレッドシートにデータを転送できるようにします。

（注意点）
外部データベースにアクセスするためのClickFlowは通常のClickFlowではなく、「カスタムClickFlow」という別のタイプがあるので必ずこれを選んで下さい。（下記画像参照）
「カスタムClickFlow」→「新カスタムClickFlow」と進む

するとスプレッドシートAPIに接続するための「General API」設定画面が出てきます。この画面に下記画像の番号順にデータを入力していきます。
①接続するAPIの名前：任意の名前を設定（下記ではSheetDB_APIとした）

②APIのURLを入力
・・・SheetDBの設定で出てきたAPIのURL（エンドポイント）を入力

③データの転送方式を選択：データ転送なので「POST」を選択

④変数の追加
今回Clickから転送するデータを変数化する部分です。10個のデータをスプレッドシートに送るのでそれを変数として登録します。ここでは実在するデータを試験値として登録し、実際そのデータを転送し、データのやり取りが正常かどうかを確認します。

⑤転送データをJSONで記入
・・・Clickから転送する10個のデータをJSONという形式で記入します。一見難しそうに見えますが、これはスプレッドシートAPIの種類に応じて書き方が異なります。考えても分からないのでSheetDBのDocumentationという解説書に事細かく説明があるのでその通りにやるだけです。悩んでも仕方ありません。

上記画像（スクリーンショット）で④「変数の追加」部分の下の方が切れてしまって見えないのでGeneralAPI設定画面の下の方の画像を示します。

10個のデータをスプレッドシートに転送するので、ここでは10個の変数を作ることになります。データの型に応じて変数を作っていきます。

（JSONデータの作り方）
上記画像の左半分に出ている「INPUTデータ」という部分はJSONという形式でデータ転送設定を記入します。今回はPOSTで以下のように設定しています。

｛"data":[{"使用日":"（使用日の変数）","車種":"（車種の変数）","運転者":"（運転者の変数）","走行距離":（走行距離）,"利用サービス":"（利用サービスの変数）","利用同乗者数":"（利用同乗者数の変数）","使用区分":"（使用区分の変数）","使用場所":"（使用場所の変数）","給油量":（給油量の変数）,"その他":"（その他の変数）"}]｝

（注意点）
１．数字型のデータは"（ダブルクォーテーション）で囲まないこと
・・・「走行距離」、「給油量」は数字型なので" "で囲まないで下さい。（何もしない）囲んでしまうと数字ではなく、テキスト型に変換されます。
また、「利用同乗者数」は見かけは数字なのですが、テキスト型で定義したので上記のJSONの記述では" "で囲んでいます。

２．JSONのオブジェクトの" "の囲み方ルール
キー　　：必ず"　"で囲む
バリュー：文字列は"　"で囲む。ブール値（true,false）、数字は何もしない

SheetDBのDocumentationの説明が昨年変更になり、非常に分かりづらくなりました。JSONの記述の仕方が初心者には理解出来ないと思う。上記を参考にやってみて下さい。

⑥「テスト」ボタンを押して試験値を転送してみる
JSONの設定まで終わったら画面下部にある「テスト」ボタンを押してデータ送信のテストをします。うまくいくと「成功」と表示が出ます。

「テスト」ボタンを押すと実際にスプレッドシートにデータが転送されます。転送されるデータというのは変数の作成の所で作った「試験値」が送られます。（下記画像参照）

⑦（テストがうまく行ったら）「作成」ボタンを押す
次に画面下部の「作成」ボタンを押します。この操作によってGeneral APIで行った設定が保存され、ホーム画面の「送信ボタン」から呼び出せるようになります。
GENERAL API画面での設定は以上になります。

５．ClickのカスタムClickFlowの設定（その２）

General APIの設定がすべて終了後、「作成」ボタンを押すと再びホーム画面に戻ってきます。
ホーム画面の「送信ボタン」をクリックして選択状態にするとClickFlowの部分にGeneral API画面で作成した「SheetDB_API」という設定が表示されます。（下記画像）

更に「SheetDB_API」という項目をクリックすると設定の中身が表示されます。今回スプレッドシートに転送する10個のデータの設定画面が出てきます。（下記画像）これを1個1個設定していきます。

（各項目の設定）
①使用日（車を使った日）
ここはデータを入れた日の日付データを設定します。日付関数の
Start of Todayを入れてやります。
②車種
ここはドロップダウンから車種が選択できるようにデータベースを作ったので以下のように項目を選択します。
「Form Inputs」→「ドロップダウン１DB」→「車名」

すると車種の欄には以下のような設定が入ります。
Selected 車両種類 > 車名

同様にして他の項目も入力していきます。
③運転者：　　　　selected 運転者 > 氏名
④走行距離：　　　インプット１
⑤利用サービス：　selected 利用サービス > サービス名
⑥利用同乗者数：　selected 利用同乗者数 > 数
⑦使用区分：　　　selected 使用区分 > 区分
⑧使用場所：　　　selected 使用場所 > 場所
⑨給油量：　　　　インプット２
⑩その他：　　　　インプット３

（注意点）
「走行距離」や「給油量」はデータ型が「数字」型に今回設定しているのでインプットの型も「数値」に設定しておいて下さい。（下記画像）
初期設定で「ラベル」（テキスト型）になっているので数値にしておかないと選択肢の候補に出てこなくなり、焦ります。

最終的に「送信」ボタンに設定するClickFlowは以下のようになります。

６．インプットでデータ送信する時の注意点

インプットの設定で注意して欲しい点があります。今回、インプットで入力する項目として「走行距離」、「ガソリンの給油量」、「コメント欄」の3つがあります。走行距離は毎回記入するとして、給油量やコメント欄は毎回入力するとは限りません。

書くことが無い時は空欄のままでいいんじゃない？と思うかもしれませんが、データベース的には歯抜け状態でデータ転送するのは良くないのです。データの列が乱れたり、ごっちゃになることがあるのです。

そこで何も記入することが無かったら「なし」とか「0」を初期値に入れてそれを転送するようにします。

下記画像は一番下に記入する「コメント欄」の設定を示しています。何も書くことが無かったら、「なし」というテキストが送信されるように初期設定しています。ガソリンの給油量も同様で、初期設定で「0」が転送されるようにしています。

ささいなことですが、間違いなく動作するデータベースを作るにはこういった配慮が必要なのです。

７．外部データベースと接続する

今回はClick内部にデータベースを持たずにすべて外部のスプレッドシートにだけデータを保管するようにしています。ただ、Clickから転送したデータを見るのにいちいちスプレッドシートを見に行くのでは不便です。

そこでスプレッドシートのデータをClick側で取得してClickのカスタムリストで表示することにします。

①外部データベースと接続する
データベース画面を開き、画面下部にある「外部データベースを追加」部分をクリックします。（下記画像）
すると接続のためのGeneral API設定画面が開きます。

②General API設定画面が開く
以下の2カ所に設定をして、画面下部の「プレビュー＆エラーチェック」をクリックします。
・「テーブル名」・・・任意の設定名称を付けておく（下記ではSheetDB）
・「接続先のURL」・・・SheetDBのAPIのURL（エンドポイント）を指定

「プレビュー＆エラーチェック」ボタンを押してうまく行くとスプレッドシートのデータが取得され、画面右上に表示されます。
画面下部の「保存」ボタンを押してGeneral APIの設定を保存します。

外部データベースと接続する際にも「General API」設定画面が出てきますが、こちらの場合は難しいところは無いです。

③外部データベースが追加されました
データベース画面下部の「外部データベース」という項目に「SheetDB」という新たな項目が追加になりました。（下記画像）
先ほど保存したGeneral APIの設定がここに保存され、ここを通じてスプレッドシートのデータをClickが読み込めるようになりました。

④カスタムリストにスプレッドシートのデータを表示してみる
ここでは「車両管理表」という新たなページを追加し、カスタムリストを配置します。そのカスタムリストをクリックして選択状態にして、外部データベースである「SheetDB」と紐づけてやります（下記画像）

⑤カスタムリストにテキストエレメントを配置してデータを読み込む
今回はスプレッドシートに10個の項目が転送されているのでカスタムリストにも同じ10個のデータが表示されるように設定します。

（やり方）
カスタムリストに10個テキストエレメントを配置し、外部データベースのSheetDBから各データを引っ張ってきます。
カスタムリストとSheetDBは現在紐づけられているのでテキストエレメントからSheetDBを見るとCurrent SheetDBとなっています。
（Currentというのは「現在の」とか「現在接続されている（データベースの）」という意味です）

Current SheetDBを選択するとスプレッドシートに転送した下記のデータが選べるようになっているのでそれぞれのテキストエレメントと紐づけの設定を行います。
・使用日
・車種
・運転手
・走行距離
・利用サービス
・利用同乗者数
・使用区分
・使用場所
・給油量
・その他

⑥外部データのプレビュー表示
テキストエレメントと紐づけたスプレッドシートのデータはプレビューで見ると以下のように表示されます。
スマホの狭い画面に10個もデータが並ぶので横1列というわけには行かないので2段になってしまいます。（ちょっと見づらい部分はあります。）

上記の操作を持って、今回目標としていた「スプレッドシートへのデータの送信」及び「送信したデータをClickに取り込んでリスト表示」が達成されました。ここまで読んで頂いて本当にお疲れさまでした。

今回のアプリは以下の2画面しかないんですが、10種類のデータを転送したり、取り込んだりしたので説明が長くなりました。ボリュームが大きいだけで難易度が高いわけではありません。

（あとがき）
初めてスプレッドシートAPIを使う方にとっては慣れない専門用語やデータ処理の考え方が出てきて大変だったかもしれません。私が思うに一番難しいと思うのはカスタムClickFlowの設定で行うGeneral APIの設定画面でしょうか？

変数の設定とか送信するデータをJSON形式で書くところが慣れないと大変だと思います。

（過去の投稿）

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