こんにちは！カスタマーエンジニアの神谷です。この前、甥っ子に積み木を買ってあげたら、それで遊んでいる動画が送られてきてほっこりしました。

さて今回は、Craft FunctionsからGoogle Apps Script経由（以下、GAS）で、Googleスプレッドシート（以下、スプレッドシート）のデータを読み書きする方法をご紹介します。以前こちらの記事でも、Craft Functionsからスプレッドシートのデータを読み書きする方法をご紹介しましたが、アプローチが異なります。

以前の記事の場合は、GCPプロジェクトでGoogle Sheets APIの有効化及び、サービスアカウントの作成が必須でした。ただし会社や組織によっては、エンジニアしかGCPプロジェクトに触ることが許されず、利用申請してもなかなか許可が出ないこともあるでしょう。そこで今回は、GCPプロジェクトに触れずとも、Craft FunctionsからGASにHTTPリクエストを送り、GAS経由でスプレッドシートを読み書きする方法をご紹介したいと思います。

ちなみにご存じの方も多いと思いますが、HTTPリクエストにはGETとPOSTの2種類があり、今回はその2つそれぞれを使って、スプレッドシートを操作する方法をご紹介します。まずは、GETリクエストをきっかけにスプレッドシートに書かれている数値をCraft Functions側で受け取るもの。そして、POSTリクエストを利用してCraft Functionsからデータを送り、スプレッドシートに数値を書き込むものの2種類です。

スクリーンショット2024-01-2315.02.44.png
具体的な例として、特定のページ閲覧をトリガーにし、ページが閲覧される度にGAS経由でスプレッドシートを操作し、その数が1ずつ増えていくようなものを作ってみます。GETリクエストで現在書かれている数値を受け取り、POSTリクエストでは、そこに1を足した数値を送ってスプレッドシートに書き込んでみます。処理の流れとしては、上の図のようになります。とてもシンプルで、わかりやすい内容かと思います。

スクリーンショット2024-01-260.45.21.png
スプレッドシートには、上記のようなアウトプットが出てくる想定です。これは、GETリクエストで受け取ったB1セルの値に1を足した後に、POSTリクエストでそれを送信して書き込んでいます。

スクリーンショット2024-01-260.04.22.png
ちなみに、Craft FuncitonsのログではGETリクエストの結果を確認できます。スプレッドシートには、このログの最新の数値に1が足されたものが出ていることを確認します。

利用時の注意点

今回紹介する手法はGCPを使わないので便利そうに見えますが、実はこちらにも多少のデメリットがあります。Craft Functionsという外部で作られたプログラムからGASにアクセスする流れのため、デプロイしたGASに誰でもアクセスできるようにする必要があります。しかしGoogleアカウントが会社で一括管理されている場合、このGASデプロイ時に指定するアクセス権限が社内のみに制限されている場合があり、その場合はプライベートアカウントで誰でもアクセスできるGASを作る必要があったりと、一筋縄ではいきません。会社のセキュリティによると思うので、状況をよく確認したうえでお試しください。

ちなみに会社のGoogleアカウントの設定が気になる方は、実際の手順に進む前に以下の点をご確認ください。後ほど、手順のところでも改めて説明しますが、ひとまずここだけ見れば、今回のソリューションが会社のGoogleアカウントだけで実現可能か確認できます。

スクリーンショット2024-01-2514.33.36.png

会社のGoogleアカウントで、スプレッドシートを開きます
上のメニューから、拡張機能→Apps Scriptの順にクリックしてGASのエディターを開きます
GASの中身はそのままでいいので、右上のデプロイ→新しいデプロイをクリックします
種類の選択でウェブアプリを選択すると上記のような画面が出るので、アクセスできるユーザーに全員があるかチェックします

もしここで、アクセスできるユーザーに全員があれば、会社のGoogleアカウントのみで今回のソリューションが実現できます。もし、自分のみや会社のメンバーのみしかない場合は、残念ながらプライベートアカウントなど別のGoogleアカウントを使って、デプロイ時に誰でもアクセスできるようなウェブアプリを作る必要があります。

ここまでご覧になったうえで、実際の手順を知りたい方向けに、以下順を追って説明していきます。

手順

具体的な手順は以下の通りです。

Craft接客を作成し、Craft Functions起動のきっかけとなるトリガーを設定する
HTTPリクエストを受け取りスプレッドシートを操作するGASを作成し、ウェブアプリとしてデプロイする
GASにHTTPリクエストを飛ばすためのCraft Functionsを作成する

1つず順番に見ていきましょう。

1. Craft接客を作成し、Craft Functions起動のきっかけとなるトリガーを設定する

最初にCraft接客を作成し、Craft Functionsを起動するためのトリガーを設定しましょう。これを忘れると、Craft FunctionsやGASが正しく実装されていても、全く動かないので注意してください。

スクリーンショット2024-01-0913.51.04.png
KARTEの接客サービス作成画面でCraftと検索してください。そこで出てくる2つのうち、Craft Functions連携を選択します。対象ユーザー、トリガー、アクションと順番に設定していきましょう。

スクリーンショット2024-01-2315.23.41.png
今回はテスト的にやっているので、対象ユーザーは自分だけが該当するセグメントを作って、それを指定しています。実際に使う場合は、皆さんのお好きなように設定してください。

スクリーンショット2024-01-2315.23.59.png
トリガーとなる対象イベントには、閲覧数をカウントしたいページのパスを指定しています。ここも実際には、皆さんが実現したいイベントを設定してください。

スクリーンショット2024-01-2315.24.20.png
アクションに関しては、配信比率を100%にしておきましょう。イベントが発生した際に、それがカウントされたりされなかったりするのは変なので、常にトリガーが発動するよう100%にしておきます。続いて、右の編集をクリックします。

スクリーンショット2024-01-2317.17.47.png
編集をクリックすると、上の画面が出ます。ファンクション名のところに、後で作成するCraft Functionsの名称を入れます。それ以外は弄らなくてよいので、保存します。

ここまでできたら、適当な接客サービス名をつけて公開してください。

2. HTTPリクエストを受け取りスプレッドシートを操作するGASを作成し、ウェブアプリとしてデプロイする

次に、スプレッドシートを操作するGASファイルの作成および、デプロイをします。

スクリーンショット2024-01-260.47.27.png
スクリーンショット2024-01-260.47.55.png
スプレッドシートのファイルのメニューから、拡張機能→Apps Scriptの順にクリックします。そうすると、GASのエディターが開きます。

GASのファイルに適当な名前をつけ、エディターには以下のコードを入力してください。

// シート名
const SHEET_NAME = 'xxxxxxxxx'; // 実際のシート名に変更してください

// HTTP GET リクエストを処理
function doGet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
  const currentValue = sheet.getRange("B1").getValue();

  // 現在のB1セルの値を返す（空の場合は0が返る）
  return ContentService.createTextOutput(currentValue || 0);
}

// HTTP POST リクエストを処理
function doPost(request) {
  const requestData = request.postData.contents;

  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);

  // A1 セルに 'count:' をセット
  sheet.getRange("A1").setValue('count:');

  // 受け取った値でセルの値を更新
  sheet.getRange("B1").setValue(parseInt(requestData));

  // レスポンスを返す
  const responseText = "Value updated to: " + (currentValue + 1);
  return ContentService.createTextOutput(responseText);

}

上記のコードの中身について、軽く補足しておきます。

SHEET_NAMEには、操作するスプレッドシートのシート名を入れてください
GETリクエストを受け取る場合の関数名は、doGetで固定しておく必要があります
POSTリクエストを受け取る場合の関数名は、doPostで固定しておく必要があります
A1セルに「count:」という文字列を固定で入れ、リクエストが飛んでくる度に、B1セルに数字が1ずつインクリメントされていく処理になっています

次に、このGASをウェブアプリとしてデプロイします。デプロイすることによって、Craft FunctionsからHTTPリクエストを飛ばせるようになるので、忘れずに行いましょう。

スクリーンショット2024-01-2514.33.36.png

右上のデプロイから、新しいデプロイを選択します
すると上の画面が出るので、左上の種類の選択からウェブアプリを選択します
ウェブアプリの実行者を自分、アクセスできるユーザーに全員を選択してデプロイを押します

注意点のところでも触れましたが、アクセスできるユーザーに全員があるかどうかが、そのGoogleアカウントで今回のソリューションが実現できるかどうかの肝です。もし会社のGoogleアカウントが制限されている場合、プライベートのアカウントを使って良いのならば、GASはそちらで作成してみてください。

スクリーンショット2024-01-2317.59.41.png
デプロイに成功すると、上記のような画面に変わります。下のウェブアプリのところに表示されているURLをコピーして、控えておいてください。これが、Craft FunctionsからHTTPリクエストを飛ばすURLになります。ちなみにGASの中身を編集した場合、再度デプロイする必要があることに気を付けてください。その際は、デプロイ後に表示されるURLも変わるので、HTTPリクエストの飛ばし先も新しいURLに変更する必要があります。

3. GASにHTTPリクエストを飛ばすためのCraft Functionsを作成する

最後に、GAS経由でスプレッドシートを操作するための、Craft Functionsを作成しましょう。今回のブログでは、ここが本題になります。サンプルコードは、下記URLで公開しています。

https://github.com/plaidev/craft-codes/tree/main/craft-functions/gas-read-write-spreadsheet

ソースコードの取得手順は、以下の通りです。

[Craft > ファンクション > 作成 > テンプレートから作成] を選択
Craft FunctionsからGoogle Apps Script経由で、スプレッドシートのデータを読み書きする方法というテンプレートを検索し「取得」ボタンをクリック
「反映」ボタンをクリック
Functionを有効化して保存

スクリーンショット2024-01-2318.07.01.png
まずは変数タブのところで、ウェブアプリとしてデプロイした、GASのエンドポイントのURLを設定しておきましょう。コード内に直接埋め込むこともできますが、変数として設定しておくことで、コードをいじらずともリクエスト先のURLを変更できます。

以下、少しコードの内容について補足しておきます。

// スプレッドシートから現在のB1セルの値を取得する関数
async function fetchCurrentCount() {
  const response = await fetch(GAS_END_POINT_URL);
  const currentCount = await response.text();
  return currentCount;
}

// スプレッドシートのB1セルの値を更新する関数
async function updateCurrentCount(currentCount) {
  await fetch(GAS_END_POINT_URL, {
    method: 'POST',
    body: currentCount.toString(), // 数値を文字列に変換
  });

  // 更新後の数値を返す
  return currentCount;
}

GETリクエストでB1セルから現在の値を取得するfetchCurrentCount関数と、POSTリクエストでB1セルの値を更新するupdateCurrentCount関数を定義しています。それぞれの中で、GETリクエストとPOSTリクエストを定義し、必要な処理を記述しています。

try {
    // HTTP GET リクエストを送信してB1セルの値を取得
    const currentCount = await fetchCurrentCount();
    logger.log('GETリクエストのレスポンス:', currentCount);

    // GETで受け取ったB1セルの値に1を加える
    const newCount = Number(currentCount) + 1;
    
    // HTTP POST リクエストを送信して、スプレッドシートのB1セルを新しい値に更新
    await updateCurrentCount(newCount);
  } catch (error) {
    // エラーが発生した場合の処理
    logger.error('リクエストに失敗しました：', error.message);
  }

ここでまずcurrentCount関数を実行し、指定したGASのエンドポイントに対して、HTTPリクエストを送信しています。GETリクエストの結果をCraft Funcitons側で受け取り、そこに1を足したものを、updateCurrentCount関数を通じてPOSTリクエストで送っています。logger.logを使って、GETリクエストの結果がログとして出力されるようにもしています。

ここまでできたら、Craft Functionsを有効化して保存してください。

検証

実際に指定したページを閲覧してみて、その度にスプレッドシートのB1セルに数字が1ずつインクリメントされていくことを確認してみましょう。
スクリーンショット2024-01-260.45.21.png
全て正しく設定できていれば、冒頭にも掲載した上記のような結果が得られるはずです。

スクリーンショット2024-01-260.04.22.png
GETリクエストの結果を見たい場合は、Craft Functionsのログというタブから確認できます。最初は空なので、1回目のページ閲覧ではゼロが取得され、そこから1ずつ値が増えていることがわかるでしょう。スプレッドシートには、最新のGETリクエストで取得された値に1を足した数が出力されていることもわかるはずです。

終わりに

今回は、Craft FunctionsからGAS経由でスプレッドシートのデータを読み書きする方法をご紹介しました。冒頭で述べたように、Googleアカウントが会社で一括管理されている場合、上手くいかない可能性もあるので、その点だけご注意ください。

プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！
ぜひ気軽にお問い合わせください。

↓ パートナー企業になりたい

CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem

↓ PLAIDで働きたい

Craft FunctionsからGoogle Apps Script経由で、スプレッドシートのデータを読み書きする方法