【Click】Stein（API）を使いClickからスプレッドシートにデータを転送した話

（なぜこれを書いたか）
前回、ClickからAPIを使ってスプレッドシートにデータを転送するやり方を書きました。その時はスプレッドシートAPIでSheetDBを使ったのですが、今回はStein（シュタイン）という別のAPIを使う話を書きます。

なんでそんな似たような話を書くかというとSheetDBは無料範囲だとアプリ2つまでしか使えないんです。有料にするとひと月$29.9という結構なお値段になってしまうので何とか無料範囲で制限の少ないAPIが無いかと探していたらSteinを発見しました。

Steinは作れるアプリ数に制限が無いのでいろいろなアプリを作ろうとしている人にはぴったりです。NoCodeでアプリを作ろうとすると有料オプションとかが多くて出費がかさみます。これからNoCodeを本格的にやってみようと思っている人にぜひ使って頂きたいと思っています。

今回はClickからデータをスプレッドシートに転送するPOSTのやり方について書きました。

１．Steinはこんなに太っ腹

前回ブログに書いたSheetDBと今回のSteinを下の表で比較してみます。無料範囲で見ると作れるアプリ数（API上限数）とアクセス回数（リクエスト数上限）がSteinが大幅に上回っているのが分かると思います。

ただ、スプレッドシートの最大行数はSheetDBが無制限、Steinは200行となっており、この点ではSteinは大きく負け越しています。何千行もあるスプレッドシートの場合はSheetDB一択と思いますが、それ以外の趣味でアプリを作るような場合はSteinで十分ではないかと思います。

２．SteinでAPI-Keyを取得する

SteinはスプレッドシートAPIと言われるアプリケーションで、NoCodeアプリからスプレッドシートにデータを転送するときに使われます。（Click等のアプリからスプレッドシートに直接データを渡すことが出来ないので使われます。）簡単な例題を基に使い方を以下で説明します。

①スプレッドシートを用意する
データを転送するスプレッドシートを用意し、どんなデータを転送するか簡単なリストを作っておきます。

スプレッドシートを立ち上げ、下図のようにパンの名前と価格を入力するリストを作りました。（ファイル名は「Steinサンプル」としました）
※最低1行分のデータ（見出し）があればOKです。

スプレッドシートのURLは後で必要になるのでコピーしてメモ帳などに控えておいて下さい。

②SteinのAPI-Keyを取得する
Steinのwebサイトにアクセスし、API-Keyを取得するところから始めます。
右上の「View dashboard」というボタンをクリックします。

次の画面で右上の「New API from Sheet」というボタンをクリックします。

画面の下にスプレッドシートのURLを入れる枠が表示されるのでここにURLを入力し、下の「Create API」ボタンをクリックします。

次の画面でAPIのURL（エンドポイント）が表示されます。
URLの構造は以下のようになっており、API-Keyはstorages/の後ろに表示されている文字列になります。
「https://api.steinhq.com/v1/storages/{API-Key}」

(注意点)
～URLに必ずシート名を追加すること！～
スプレッドシートはシートが何枚でも作れるのでアクセスするシートのシート名（タブ）をAPIのURLに必ず追加して下さい。（追加しないとエラーになります）
（例）
sheet2にアクセスする場合
「https://api.steinhq.com/v1/storages/{API-Key}/sheet2」・・・①

※SheetDB等は何も指定しないとデフォルトで一番左側のシートにアクセスすることになっていますが、Steinはそのような仕様になっていないので必ずシート名を指定して下さい。（シート名はエラーを防ぐ意味で日本語でなく英字にした方がいいです。例：シート1→sheet1）

Clickの設定画面でAPIのURLを記入する部分があるので上記①のURLはメモ帳などに控えておいて下さい。

３．Stein全般の使い方

SteinというスプレッドシートAPIはClickとスプレッドシートの間で以下のようなデータの受け渡しが可能です。
・データの取得（GET）
・データの追加（POST）
・データの更新（PUT）
・データの削除（DELETE）
（注）
～データ更新（Update）～
データの更新するときは一般的なスプレッドシートAPIだとPUTかPATCHが選択できますが、Steinの場合は必ずPUTを使う仕様になっています。PATCHは指定しないで下さい。

①使い方はすべて仕様説明書（documentation）に書いてある
はじめてSteinを使う場合には何をどうしたらよいのか分かりません。使い方説明はDocumentationという部分にすべて書いてありますのでここを読んで下さい。（下記画像の「Docs」部分）
行データの追加は「Add Rows to Sheet」の部分をクリックします

②行データの追加の仕方
Clickからスプレッドシートにデータを転送する際の通信の方式（POST）やデータ設定の仕方（JSON）はすべてここを参照して下さい。

転送するデータをJSON形式で設定するやり方はスプレッドシートAPIのアプリによってやり方がまちまちなので考えても分かりません。説明書に書いてある通りにやって下さい。

４．Clickの設定

①カスタムClickFlowの設定
ホーム画面に製品名と価格を記入するインプットを2つ配置し、その下にボタンを一つ持って来ます。

ボタンにはスプレッドシートにアクセスするためのClickFlowを設定します。注意点として、今回は外部データベースとアクセスするので通常のClickFlowではなく、「カスタムClickFlow」を選択して下さい。
カスタムClickFlow → 新カスタムClickFlow　と進む

②General APIの設定画面
カスタムClickFlowを選択すると以下のGeneral APIの設定画面が現れます。
①～⑤までを入力します。
①名前：APIの設定に任意の名前を付けます。
（以下では「Steinサンプル」としました。この名称は後で行うClickFlowの設定の時に使うので覚えておいて下さい。）

②APIのURL：SteinのAPIのURLを記入します。
③データの通信方式：POSTを選択します。
④変数の追加：
・・・製品と価格を変数にし、テストで送信する値（試験値）を1個設定します。
⑤INPUTデータの設定（JSON）：
・・・Clickから送信する「製品」、「価格」のデータをJSON形式で記述します。
（注）数字型のデータは（例：価格）は"　"で囲まない
囲んでしまうとテキスト型に変換されてしまい、数字の集計などが出来なくなってしまいます。

③「テスト」送信をしてみます
画面下の「テスト」ボタンを押して通信が正常に出来るかどうか確認します。正常の場合は以下のような応答データが表示されます。
{"updatedRange" : "sheet1!A5:B5"} → 5行目にデータが追加されたという意味

テスト送信がうまく行ったら画面下部の「作成」ボタンを押してGeneralAPIの設定内容を保存します。

④カスタムClickFlowの画面に戻る
General API設定画面の「作成」ボタンを押すとClickのホーム画面に戻ってきます。またボタンをクリックして選択状態にし、ClickFlowの部分を見ると以前は無かった「Steinサンプル」という項目が登録されています。（GeneralAPIで設定した内容を「Steinサンプル」という名前で保存しました。覚えていますか？）

⑤データ送信のClik Flowの設定
「Steinサンプル」という部分を選択すると「Steinサンプル」のデータ送信設定が表示されます。スプレッドシートに送信する「製品」と「価格」のデータはインプットから入力するので下記画面のように設定します。
　製品：インプット１
　価格：インプット２

（注意点）
～価格のデータは数字型に設定しておく～
インプットから入力する製品名と価格のうち、価格はデータ型が「数字型」なので下記画像のようにデータ型を数字型（数値）にしておきます。（初期設定はテキスト型になっている）

そうしておかないと上記の「Steinサンプル」のClickFlow設定で価格の欄でインプット2が候補として出てこなくなります。

５．データ送信が出来るか確認します

①データ送信の確認
データ送信の設定は以上で完了です。うまくできるかどうかプレビュー画面を起動してやってみましょう。「製品名」、「価格」に適当なデータを入力して送信ボタンを押してみます。（下記画面ではクリームパン、150円というデータを入れてあります。）

データ通信がうまく行くと、ホーム画面から入力したデータがスプレッドシートに追加されているのが分かります。（下記画像）

６．スプレッドシートのデータを取得する

今回のアプリではホーム画面から入力したデータはすべてスプレッドシートに転送され、Click内部のデータベースには保管されていません。送信したデータ一覧を見ようにもデータが無い状態です。

それでは困るのでスプレッドシートに転送したデータをClickで取得して、それをカスタムリストで表示してみることにします。

①外部データベースの取得
スプレッドシートのデータを取得するためにはデータベース画面を開いて画面下部の「＋外部データベースの取得」ボタンをクリックします。するとGeneral APIの画面がまた開きます。

②General APIを設定する
General APIの画面に下記の2項目を設定します。
１．テーブル名：
　→取得するスプレッドシートのデータに任意の名前を付けます。（下記では「スプレッドシートDB」とした）
２．接続先URL：スプレッドシートAPIのURLを記入します

設定したら画面右側の「プレビュー&エラーチェック」ボタンを押します。通信がうまく行くとスプレッドシートから取得したデータが下記画像のように表示されます。

データが取得出来たら画面下部の「保存」ボタンを押し、設定を保存します。

③カスタムリストをホーム画面に配置
ホーム画面の下半分の所にカスタムリストを配置し、外部データベースの「スプレッドシートDB」と紐づけます。（下図）

またスプレッドシートとClickのカスタムリストのデータの上下の順番が逆になってしまうので、最新データが上に来るようにソートの設定をします。
データを作成した日付データCreated Dateを基準に以下のように設定。
Created Date- Newst to Oldest

④テキストエレメントとデータベースの項目を紐づける
カスタムリストに配置されているテキストエレメント（TitleとSub title）に外部データベースの「製品名」、「価格」データを紐づけます。
　製品名：Current スプレッドシートDB > 製品
　価格：　Current スプレッドシートDB > 価格
※Currentというのは「現在紐づけられている」という意味です。

「価格」も同様に紐づけます。

⑦データ一覧を表示してみます
プレビュー画面を立ち上げると、スプレッドシートから取得されたデータは以下のように表示されました。（うまく行きました）

以上で設定に関する説明を終わります。今回、SteinというスプレッドシートAPIを使って以下の2つが出来るようになりました。

１．ClickからAPIを介してスプレッドシートにデータを転送する
２．スプレッドシートに転送したデータをClickで読み込み、表示する

（あとがき）
結構長くなってしまいましたね。ここまで読んで頂き有難うございます。
今回はデータをスプレッドシートにPOSTで転送するまでの内容しか書きませんでしたが、この他に「データの更新」、「データの削除」等も可能です。

特にデータの更新ではClick本体だけでは出来ない「データの一括更新」等が出来るようになります。スプレッドシートAPIを使うという事は、単にデータを外部に持っているというだけでなく、新たな機能が使えるようになるのでAPIの活用はNocodeアプリの活用範囲を格段に広げてくれます。是非APIを使いこなせるようにチャレンジしてみて下さい。

（過去投稿）