回答後に集計結果がリアルタイム表示されるアンケートを実装してみた

<html><head></head><body>こんにちは、Customer Engineerのgamiです！最近はピクミン4をやっていて、いま「王の穴」を攻略中です。
さて、Craft Functionsを使った自動化をしていると 「Googleスプレッドシートにデータを書き込みたい」 と思うことがあります。たとえば次のようなケースです。
<ul>
<li>スプレッドシートに手動で入力したスケジュールをベースに接客サービスの公開/非公開を切り替えたい</li>
<li>Craft Functions内で利用する設定値を運用者が簡単に変更できるようにスプレッドシートに外出ししたい</li>
</ul>
一方で、外部プログラムからスプレッドシートを操作するためのGoogle Sheets APIの認証フローは複雑で、スプレッドシートだけではなくGoogle Cloud Platform（以下GCP）の管理画面を触る必要があったりして、毎回手順を調べては思い出してを繰り返しています。
そこで今回は自分の備忘録も兼ねて、 Craft FunctionsからGoogleスプレッドシートを操作するための手順 についてまとめます。
<h1 id="手順">手順</h1>
手順は次の通りです。
<ol>
<li>GCPプロジェクトでGoogle Sheets APIを有効化する</li>
<li>Googleサービスアカウントを作成し、キーをCraft Secret Managerに登録する</li>
<li>サービスアカウントに対象スプレッドシートへの権限を付与する</li>
<li>Craft Functionsでそのサービスアカウントを使ってスプレッドシートを操作する</li>
</ol>
順番に説明します。
<h2 id="1. GCPプロジェクトでGoogle Sheets APIを有効化する">1. GCPプロジェクトでGoogle Sheets APIを有効化する</h2>
まず、Google Sheets APIを有効化します。 
公式ドキュメントに記載の通り、Google Workspaceだけでは完結せず、GCPプロジェクトを利用する必要があります。
<a href="https://developers.google.com/workspace/guides/get-started?hl=ja" target="_blank" rel="noreferrer">Google Workspace での開発 &nbsp;|&nbsp; Google for Developers</a>
適当なGCPプロジェクトを作成または選択し、[APIとサービス &gt; 有効なAPIとサービス &gt; APIとサービスの有効化] からGoogle Sheets APIを検索し、有効化します。
<img src="https://ik.imagekit.io/plaid/89b72e8a-0ffc-4a32-b29a-d4b97da78a08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.09.39.png" alt="スクリーンショット2023-08-1413.09.39.png">
<img src="https://ik.imagekit.io/plaid/5c519b42-0c84-42de-b495-259a9e8ad867/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.10.01.png" alt="スクリーンショット2023-08-1413.10.01.png">
<img src="https://ik.imagekit.io/plaid/d026c746-7ed9-4167-adda-47729d7a6f96/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.10.10.png" alt="スクリーンショット2023-08-1413.10.10.png">
<h2 id="2. Googleサービスアカウントを作成し、キーをCraft Secret Managerに登録する">2. Googleサービスアカウントを作成し、キーをCraft Secret Managerに登録する</h2>
次に、同一GCPプロジェクトでGoogleサービスアカウントを作成します。後にそのアカウントを使って認証をします。
[IAMと管理 &gt; サービスアカウント &gt; サービスアカウントを作成] から適当な名称のアカウントを作成します。
<img src="https://ik.imagekit.io/plaid/227adf6a-c6bc-42ea-8235-8f3c762422eb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.15.34.png" alt="スクリーンショット2023-08-1413.15.34.png">
作成したサービスアカウントを選択し、[キー &gt; 鍵を追加 &gt; 新しい鍵を作成] からJSON形式のキーファイルをダウンロードします。
<img src="https://ik.imagekit.io/plaid/faefbf7a-98af-4a2f-a672-e436f2e8cf0c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.16.12.png" alt="スクリーンショット2023-08-1413.16.12.png">
作成したサービスアカウントを使ってCraft Functionsで認証するために、ダウンロードしたJSONキーファイルの中身をCraft Secret Managerから利用可能にします。
KARTEの管理画面を開き [Craft &gt; シークレット &gt; 作成] からシークレットを作成し、適当な名称でJSONキーファイルの中身を登録します。
<img src="https://ik.imagekit.io/plaid/1b4ab3e2-088a-4713-be63-52889d1c1e61/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.23.18.png" alt="スクリーンショット2023-08-1413.23.18.png">
<h2 id="3. サービスアカウントに対象スプレッドシートへの権限を付与する">3. サービスアカウントに対象スプレッドシートへの権限を付与する</h2>
Google Sheets APIを有効化したとしても、個別のスプレッドシートに対して自由にアクセスできるわけではありません。スプレッドシート毎に、閲覧権限や編集権限を付与する必要があります。
Functionからデータを読み書きしたいスプレッドシートを開き、右上の [共有]ボタンから当該サービスアカウントに対する権限を付与します。
<img src="https://ik.imagekit.io/plaid/1d490492-2ff5-409a-97e2-8f256b0eee49/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1514.20.04.png" alt="スクリーンショット2023-08-1514.20.04.png">
JSONキーに含まれるclient_emailの値を入力し、権限には <code>編集者</code> を選択します。readだけしたい場合は <code>閲覧者</code> を指定しても問題ありません。
以上で、Functionからスプレッドシートにアクセスするための準備は完了です。
<h2 id="4. Craft Functionsでそのサービスアカウントを使ってスプレッドシートを操作する">4. Craft Functionsでそのサービスアカウントを使ってスプレッドシートを操作する</h2>
最後に、実際にCraft Functionsからスプレッドシート上のデータを読み書きしてみます。
サンプルコードは、下記URLで公開しています。
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/read-write-spreadsheet" target="_blank" rel="noreferrer">https://github.com/plaidev/craft-codes/tree/main/craft-functions/read-write-spreadsheet</a>
以下、重要な点をかいつまんで説明します。
まず、Craft Secret Managerに登録したJSONキーを利用して、今回作成したGoogleサービスアカウントでJWT方式の認証をします。
<pre><code class="language-js hljs">import { google } from "googleapis";

// GoogleサービスアカウントのJSONキーをシークレットから取得
const secrets = await secret.get({ keys: [SERVICE_ACCOUNT_KEY_SECRET] });
const _jsonKey = secrets[SERVICE_ACCOUNT_KEY_SECRET];
const jsonKey = JSON.parse(_jsonKey);

// Google Drive APIの初期化
const jwtClient = new google.auth.JWT(
 jsonKey.client_email,
 null,
 jsonKey.private_key,
 ["https://www.googleapis.com/auth/spreadsheets"]
);
await jwtClient.authorize();
</code></pre>
次にjwtClientをパラメータに渡して、Google Sheets APIを利用するためのオブジェクトを得ます。
<pre><code class="language-js hljs">const sheets = google.sheets({ version: "v4", auth: jwtClient });
</code></pre>
あとは、スプレッドシートID、シート名、範囲などを指定してgetやupdateをするだけです。
<pre><code class="language-js hljs">async function getSsValues(sheets, range) {
 const res = await sheets.spreadsheets.values.get({
 spreadsheetId: SPREADSHEET_ID,
 range,
 });
 return res.data.values || null;
}
async function updateSsValues(sheets, range, values) {
 await sheets.spreadsheets.values.update({
 spreadsheetId: SPREADSHEET_ID,
 range,
 valueInputOption: "USER_ENTERED", // Userの入力値と同様に扱う
 resource: {
 values,
 },
 });
}
</code></pre>
認証さえ突破してしまえば、あとは簡単ですね。
<h1 id="実際に動かしてみる">実際に動かしてみる</h1>
実際に動作を確認してみましょう。
前述のサンプルコードに必要な定数を入力した内容でCraft Functionsを作成し、実際に実行してみます。すると、関数が実行される度にスプレッドシート上のcountが1つずつインクリメントされるようになります。
<img src="https://ik.imagekit.io/plaid/df3e5429-202f-420d-8433-684a67be984e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1514.05.18.png" alt="スクリーンショット2023-08-1514.05.18.png">
実際にreadとwriteがうまく動いていることが確認できました。
<h1 id="おわりに">おわりに</h1>
今回はCraft FuncitonsからGoogleスプレッドシートを直接利用する方法について紹介しました。 
Googleスプレッドシートは多くの人にとって馴染み深いので、データ入稿やデータ確認などの運用を考えたときに採用しやすいプロダクトです。
ぜひ皆さんも、Craft + Googleスプレッドシートを使ったソリューションを考えて開発してみてください！
<hr>
プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ 
ぜひ気軽にお問い合わせください。
↓ パートナー企業になりたい
<ul>
<li><a href="https://ecosystem.plaid.co.jp/" target="_blank" rel="noreferrer">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
↓ PLAIDで働きたい
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer" target="_blank" rel="noreferrer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer" target="_blank" rel="noreferrer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>
</body></html>

Craft FunctionsからGoogleスプレッドシートのデータを読み書きするために必要な作業やFunctionの実装についてまとめました。

Craft Functionsからスプレッドシートのデータを読み書きする