【Click】SheetDBからスプレッドシートのデータを更新（PATCH）してみた

（なぜこれを書いたか）
SheetDBを使ってClickからスプレッドシートに送信したデータを取得（GET）、更新（PATCH）、削除（DELETE）するシリーズ物のブログを書いています。今回はデータの更新をする方法を説明します。

APIを使ってデータを更新するやり方はPUTとPATCHの2種類ありますが、SheetDBの場合はPATCHを使います。（これはAPIによって異なります。Stein等は変更はPUTを使う仕様です）

PATCHを使う更新では、更新の設定をしてないデータはそのまま保持されます。（PUTを使うと更新の設定してないデータは空白nullに変化してしまうので注意が必要です）

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

１．こんな画面を作ります

ホーム画面にはデータを送信するインプットとボタン、その下にスプレッドシートから取得したデータを表示するカスタムリストが配置されています。

（更新の流れ）
カスタムリストの中で更新したい行をクリックすると「更新」という画面に遷移し、データも合わせて転送されます。

「更新」画面に配置したインプットにそのデータが入ります。データを手作業で変更したらインプットの下にある「更新」ボタンを押すとデータが書き換わるという流れになります。

～更新画面の設定～
更新ボタンにカスタムClickFlowを設定します。
「カスタムClickFlow」→「新カスタムClickFlow」　と進む。
General APIの画面が開き、更新の設定を行います。

２．General APIの設定

General APIの設定画面が表示されたら下記画像の①～⑤の部分に各種設定を行います。
①名前：任意の名前（下記例ではSheetDB_PATCHとした）

②APIのURL：「https://sheetdb.io/api/v1/{API-KEY}/id/(idの変数)」
→「https://sheetdb.io/api/v1/{API-KEY}/列の名前/(行の位置)」の意味です。

③HTTP通信の種類：PATCH（PUTは選ばないこと）
※PATCHとは部分補修する、つぎ当てをする等の意味があります。全体を修正するのではなく、変えたい部分だけ変えるという意味があります。

④変数の追加：「id」、「製品」、「価格」の３つを変数として定義

⑤INPUTデータ（送信するJSONデータ）
変更するのは「製品」と「価格」のデータなのでJSONは以下のように記述
{"data":[{"製品":"（製品の変数）","価格":（価格の変数）}]}
※「価格」はこの例では数字型で設定しているので"　"で囲まないこと。

～「テスト」ボタンを押して通信の確認～
この例では「変数の追加」の部分で試験値に以下の値を設定しています。
id=3、製品＝コッペパン、価格＝120

変更前のスプレッドシート（id=3の部分）は以下のようになっています。

「テスト」ボタンを押すと試験値がスプレッドシートに送信され、以下のようにデータが更新されます。

id=3の行を見るとデータが書き換わっています。
製品：クリームパン→コッペパン
価格：150円 → 120円

３．ClickFlowの設定

General APIのテストがうまく行ったら、画面下の「作成」ボタンを押して設定内容（SheetDB_PATCHという名前を付けた）を保存します。

すると開発画面に戻り、更新画面のボタンを選択するとClickFlowの部分に
「SheetDB_PATCH」という新たな項目が出来ているのが分かります。

ここをクリックして変数の「id」、「製品」、「インプット」に以下のデータを紐づけます。
id：Current SheetDBデータ読み込み > id
製品：インプット７
価格：インプット８

設定は以上で終わりです。プレビューを起動してどのように見えるか確認しましょう。

ホーム画面のカスタムリストの一番上の行（アンパン、140円）をクリックすると「更新」画面に遷移し、データもインプットに送信されます。

※idは変更されては困るのでデータ送信先はインプットでは無く、あえてテキストエレメントを使っています。

ここで、あんぱんの価格を140円から160円に変更して「更新」ボタンを押してみます。

画面は以下のように変わります。価格のデータが140円から160円に更新されたことが分かります。

これでデータ更新の説明は終わりです。「データ更新」も以前説明した「データ検索」も対象となる行を探し出して処理を行っていますが、APIのURLの設定が違うので間違わないで下さい。

検索(GET)：
「https://sheetdb.io/api/v1/{API-KEY}/search?id=(idの変数)」

更新（PATCH）:
「https://sheetdb.io/api/v1/{API-KEY}/id/(idの変数)」

SheetDBのDocumentationをよく読んで使い方を理解しましょう。