見出し画像

【Click】SheetDBでスプレッドシートにデータを転送(POST)する(簡単編)

(なぜこれを書いたか)
前回ClickからSheetDBを経由してスプレッドシートにデータを転送するやり方を書きました。いつも私のブログを読んでくれている会社の後輩から「SheetDBのPOSTの説明で取り上げている例が複雑なのでもっと簡単に要点だけまとめたやつを作って欲しい。」と言われたので簡単編を作りました。

ただ簡単にするだけでは面白くないので前回のブログで書かなかったSheetDB独自のidの作り方についても触れておきます。

スプレッドシートにデータを転送すると更新とか削除もしたくなります。その時に「どの行を対象にするのか?」というのが非常に重要になってきて、行ごとのデータ(レコード)にidを振っておいた方が何かと便利なのでそのやり方を説明します。

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

1.スプレッドシートにデータを転送します

今回スプレッドシートには以下のようなデータをClickから転送します。Click内部には一切データは保管せず、すべてのデータをスプレッドシートに保管するという考えです。

idはSheetDBが自動で作成している

~idの作り方~
今回のポイントはidの作り方です。SheetDBには自動でid番号を振る機能(INCREMENT;「増加する」の意味)があり、今回それを使います。つまりidの数字を手入力するわけでなく、APIの方で勝手に数字を入れてくれるのです。

2.Click側の設定

~カスタムClickFlowの設定~
今回データを入力する項目は「製品」と「価格」の2つしかありません。(idは自動入力になります)ボタンにカスタムClickFlowを設定し、スプレッドシートAPI(SheetDB)と接続できるようにします。

カスタムClickFlow→新カスタムClickFLow と進むと以下のGeneral APIの設定画面が開きます。①~⑤に設定値を入力します。

①名前:任意の名前を付けます(下記例ではSheetDB_POSTとしました)

②APIのURL:SheetDBで発行されるAPIのURL(エンドポイント)を記入

③HTTP通信の方式:データ送信なのでPOSTを選択

④変数の追加
・・・今回は「製品」、「価格」の2つが変数になります。サンプルとして送信する値(試験値)を含めて設定します。製品はテキスト型、価格は数字型で設定しています。(価格もテキストでも構わない)

⑤INPUTデータ(送信するJSONデータ)
・・・変数は「製品」と「価格」2つですが、id番号を自動で作成するために以下のようなキーとバリュー値の組み合わせを作ります。(SheetDB独自のやり方です。他のスプレッドシートAPIではこうやりません。)

"id":"INCREMENT"  (注):INCREMENTは必ず大文字で" "で囲むこと。

INPUTデータの部分:「価格」は数字型で設定したので" "で囲って無い

~INCREMENTの機能~
idを自動作成するINCREMENTとは数字を1ずつ増加させる働きをします。データを転送するスプレッドシートにあらかじめidの列を作っておき、すでに数字が入力されていれば一番大きい数字に1を付け加えた数字が次のidになります。id列に何も入力されてなかったらidは1から始まります。

INCREMENTとは「増加する」の意味です。

~変数の追加~
今回の例では変数の追加の部分で「製品:マフィン」「価格:150」と入力しました。「テスト」ボタンを押すとこのデータがスプレッドシートに転送されます。

「マフィン」、「150」というデータが転送され、一番左のid列には7という数字が自動で入力されました。(それまでは一番大きい数字が6だったので+1した数字7が次のid番号になったのです。)

(その他)
~シート名の指定方法~

SheetDBの初期設定では最初(一番左側)のシートにデータが転送されるようになっています。もし「sheet2」にデータを送りたい場合はURLにsheetパラメータを追加して、その後でシート名を指定して下さい。
(例)
シート名「sheet2」にデータを転送する場合のAPIのURL
https://sheetdb.io/api/v1/{API-Key} ? sheet=sheet2

~ClickFlowの設定~
ホーム画面のボタンを選択状態にしてClickFlowの部分を見るとそ以前は無かった「SheetDB_POST」という設定が出来上がっています。(SheetDB_POSTとは先ほどGeneral APIで設定した内容に私が付けた名称です。)

変数の「製品」、「価格」をインプット1,インプット2から読み込む設定をします。

3.スプレッドシートのデータを読み込む

Clickには何のデータも保管されていないのでスプレッドシートに転送したデータを読み込んでカスタムリストで表示してみます。

データベース画面の一番下にある「外部データベースを追加」をクリックしてスプレッドシートからデータを読み込めるようにまたGeneralAPIで設定します。

~General APIの設定~
以下2カ所を設定して「プレビュー&エラーチェック」ボタンを押します。

テーブル名:任意の名前(下記例では「SheetDBデータ読み込み」とした)
接続先URL:スプレッドシートAPIのURL(エンドポイント)を指定

「保存」ボタンを押して設定内容を保存します。すると再度ホーム画面に戻ります。

ホーム画面にカスタムリストを配置し、General APIで読み込み設定をしたスプレッドシートのデータを表示します。

「id」、「製品」、「価格」の各項目をスプレッドシートのデータと紐づけます。例えばidであれば以下のような設定でデータを引っ張ってきます。
Current SheetDBデータ読み込み > id

以上の設定を行ってプレビューするとホーム画面に以下のような表示が現れます。インプットにデータを入れてボタンを押すと、下のカスタムリストにそのデータが表示されるようになります。

以上でSheetDBデータ送信(POST)の簡単編を終わります。
SheetDBは自動でid番号を振る機能の他にダブリの行を発見して削除してくれるなど他のスプレッドシートAPIには無い機能がいくつもありとても使いやすく便利です。

今回の内容をベースに「取得」(GET)、「更新」(Update)、「削除」(Delete)等の機能について別ブログで説明していきます。

Clickに関する記事で何かご希望があればコメント下さい。皆様に役立つような記事を書いていきたいと思っています。
(以前はAdaloの記事ばかり書いていましたが、Adaloはユーザー数が多いので自分がブログ書かなくても検索すれば同じようなものが出てきます。そういうわけで今はClickを中心にブログ書いています。)

(過去の投稿)


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