【Click】SheetDBでスプレッドシートのデータを検索（GET）してみた

（なぜこれを書いたか）
前回、SheetDBを使い、Clickからスプレッドシートにデータを転送するやり方（簡単編）をブログに書きました。今回はそのデータを基に検索するやり方（GET）を説明します。

私は最近いろいろなスプレッドシートAPIを使っており、APIによって設定がそれぞれ違うのでSheetDBの設定の仕方をよく忘れてしまうので備忘録を兼ねてまとめてみました。

（SheetDBのブログ）
・Clickからスプレッドシートにデータを転送（POST）する
・Clickからスプレッドシートのデータを検索（GET）する　※本編
・Clickからスプレッドシートのデータを更新（PATCH）する
・Clickからスプレッドシートのデータを削除（DELETE）する

１．検索（GET）を使う場面とは？

前回はホーム画面から「製品」と「価格」のデータをスプレッドシートに送信し、Clickの外部データベースの読み込みを通じてそのデータをカスタムリストに表示するところまで説明しました。

「外部データベースの読み込み」でデータを取得する場合はスプレッドシートのデータを全部読み込みますが、今回説明するGETは該当する行を取得するときに使います。（1行もしくは複数行）

「カスタムリストにデータが表示されているのに何でそんなことするの？」と思われるかも知れませんが、データ数が膨大になった時に必ず使う手法です。今回の例ではスプレッドシートにデータ数が7個（7行）しかないのでリストを一目見れば、どこにどんなデータが書いてあるというのがすぐ分かりますが、これが何百、何千というデータがあったらどうでしょうか？

クロワッサンの値段はいくらだっけ？と思った時、もしデータリストに2000個のデータがあったらリストをスクロールしてデータ検索は多分しないと思います。（めんどくさくてやってられない）

２．検索の画面を追加します

現在ホームにはデータ転送のインプットとボタンがあるので別画面に検索の画面を作ります。「検索ページへ」というボタンを作り、ここを押すと検索画面に移動します。

①検索画面の設定
（例）
id番号をキーワードに入れるとその行のデータが取得できるシステム

idを入力するインプットを設け、その下に検索用のボタンを配置します。
APIを通してその行のデータが取得出来たら、データを保管するためのインプットを3つ用意します。（id、製品、価格）

②検索ボタンにカスタムClickFlowを設定

検索ボタンにカスタムClickFlowを設定します。
「カスタムClickFlow」→「新カスタムClickFlow」

※下記画像ではSheetDB_GETというGeneral APLをすでに作ってあるのでこういう表示になっています。

③General APIの設定
検索用のGeneral APIの設定を行います。一番のポイントは②のAPIのURLを入力する部分です。スプレッドシートAPIのURLは以下の形で表現されます。
「https://sheetdb.io/api/v1/{API-Key}」

検索（Search）する場合は以下のように｛API-Key｝の後ろにsearchパラメータを追加します。
「https://sheetdb.io/api/v1/{API-Key}/search?id=(idの変数)」

・HTTP通信の種類は「GET」を選択します。
・変数の追加：idの設定だけします。（idはテキスト型で設定しました）

（その他）
～シート名の指定方法～
SheetDBの初期設定では処理の対象になるのは最初（一番左側）のシートです。もし「sheet2」を対象にしたい場合はURLにsheetパラメータを追加して、その後でシート名を指定して下さい。
（例）
シート名「sheet2」を対象にする場合のAPIのURL
「https://sheetdb.io/api/v1/{API-Key} ? sheet=sheet2」

～「sheet2」のシートでGETする場合～
「https://sheetdb.io/api/v1/{API-Key} /search?id=(idの変数)& sheet=sheet2」

（注）パラメータが複数になる場合は?を何度も使うことはせず、追加されるパラメータを&でつなぎます。

設定後、「テスト」ボタンを押して通信がうまく行くかどうか確認します。※変数の設定ではid=3というデータを試験値として登録してあります。

id=3というのはスプレッドシートではクリームパン、140円のデータが入っている行（レコード）です。

「作成ボタン」を押すとデータが保存され、開発画面に戻ります。「検索画面」でボタンにClickFlowの設定を行います。

「検索」ボタンを選択状態にするとClickFlowの所に先ほど保存した「SheetDB_GET」という項目が表示されます。（下図）
この例ではidはインプット3から入力されるのでClickFlowのid欄には「インプット3」と設定します。

ここまでの設定で、インプット３に入力した番号の行データがJSONの形で取得できる状態になります。

今度はその取得したデータをインプット４，５，６に取り込んでデータを表示出来るようにします。そのために追加のClickFlowとして「エレメントの値変更」という設定を３つ追加します。（下図）

～３つのエレメントの値変更～
以下のように設定します。
インプット４：SheetDB_GET >id
インプット５：SheetDB_GET >製品
インプット６：SheetDB_GET >価格

これでClickFlowの設定は終わりです。プレビューで画面を動きを確認してみましょう。例えばidに１と入れて、検索ボタンを押すとid=1の行のデータが取得できます。（下記画像）

３．まとめ

今回はスプレッドシートからデータを検索（GET）するやり方を説明しました。設定で悩む箇所としてはGeneral API設定画面でAPIのURLを以下のように記入する部分かと思います。
「https://sheetdb.io/api/v1/{API-Key}/search?id=(idの変数)」

こういう部分はAPIによって記入の仕方が違うので考えても分かりません。Documentationという説明書をよく読んで、その通りに設定を行うことが重要です。

今回はスプレッドシートのデータの検索の仕方を説明しました。この後はデータの更新、削除について別ブログで説明します。