初心者向け：Google formの入力をChatGPTに渡す方法

# はじめに

本記事は以前紹介したアプリの実装方法についての説明です。

どんな人向け？
・フォームの使い方が知りたい
・フォームを使って少し複雑なことがしたい
・フォームとGASを連携させたい

https://qiita.com/firesign2023/items/d57fa2499ec8cab32b76

今回は「GoogleフォームからGASへデータを渡す」赤枠の部分についての手順を説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/b00c3b58-01eb-205b-518d-8a6b6bda10e1.png)

## 実装手順
①フォームの入力部分を作る
②フォームに入力したデータをGASに送信する（フォームとGASの連携）
③GASで受け取ったデータを加工する
④GAS内でChatGPT APIを呼び出す ※API Keyが必要です。
⑤ChatGPTの結果をGASで受け取り、LINEに通知する

## ①フォームの入力部分を作る

ブラウザ（Chrome）の新しいタブを開き、右上のメニューからフォームを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/025247d5-07d8-34d3-424a-46b9c10ad4db.png)

新規作成します。（色々とテンプレートがありますが、時間のある方は色々試してみると面白いかもです。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/736754ad-075d-b317-2164-1b79c8571708.png)

無題のフォームが表示されるので、ここから変更していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/8801e818-1662-1559-c1ce-0254a74f2643.png)

下記のような感じで選択して作っていきます。クリックして選ぶだけなので簡単です。

①頑張ったことの入力欄：記述式
②ChatGPTの回答を調整（やさしく～厳しくする）：ラジオボタン
入力を必須にすると空の状態で送信できなくなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/1ef4eae0-846d-a50a-b539-6926e2f88ce1.png)

## ②フォームに入力したデータをGASに送信する（フォームとGASの連携）

入力フォームが完成したので、次はGASと連携します。右上の`点`から`スクリプトエディタ`を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/74e6a52b-4610-a8c9-fb9c-69841280d6b5.png)

Google Apps Script(GAS)が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/4707a49b-ed81-bdbd-54d6-c3e8555b57b7.png)

フォームの入力を受け取るプログラムに書き換えていきましょう。
`コード.gs`に下のプログラムをコピー＆ペーストして`保存`してください。
`function myFunction(){}`は消しても大丈夫です。

~~~コード.gs

// フォームが送信されると実行されます
function onSubmit(form) {

  // フォームから送信された内容
  const itemResponses = form.response.getItemResponses();
  for(let i = 0;i < itemResponses.length;i++){
    const formData = itemResponses[i];
    const title = formData.getItem().getTitle();
    const response = formData.getResponse();
    console.log(title + response);
  }

  const timestamp = form.response.getTimestamp();// 時刻

  // GASのログに表示
  console.log(form.response.getTimestamp());  
  console.log(form.response.getRespondentEmail());  //メールアドレス
}

~~~

フォーム送信時にGASが起動するようにトリガーを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/8d915f8b-ea3d-aeec-252d-6c5f8700b573.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/deea8cab-6f18-aa52-7bcc-e7fc1be00be6.png)

`保存`ボタンを押した後にアカウントの選択と許可を求められるので、自分のアカウントを選び、`Allow`を押してください。

## フォームの動作を確認する

お疲れさまでした。これでGoogleフォームで入力した内容がGASで受け取れると思います。
問題なく動作するか見ていきましょう。
フォームの画面に戻って、右上の`送信`ボタンを押すと作ったフォームをテストできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/722d189f-59b9-9889-6245-3a35157d059a.png)

下のようにリンクをクリックしてコピーします。そのリンクをブラウザで表示させてください。
また、今回は使いませんが、他の人にフォームを回答してほしい場合はメールで送ることも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/224e6adc-93f3-f81f-99f2-cfea77a9ae03.png)

フォームを入力して送信ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/ec122161-f90e-3618-81f6-c20222aaa347.png)

フォームを編集していたページに戻ると回答したデータが確認できます。
自動でグラフまで作ってくれるので便利ですね

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/78b7ac77-3e31-fd23-a942-7eb8c1ebe246.png)

## GASの動作を確認する

GAS側の画面でフォームで入力したデータを見てみましょう。
左側のメニューから`実行数`を選択して、詳細を見れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/d6dcb7e8-6f29-f74b-af03-52043cb27014.png)

ログの詳細を見るとデバッグと書かれたところに色々とデータが入っているのがわかります。
これは`コード.gs`に書いた`console.log("xxx")`が動作したときに、その内容`xxx`が記録されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/61754de1-592a-bd78-ac76-d909da060251.png)

エラーが出た場合もログが残るのでうまく活用しましょう。

# 終わりに

最後まで読んでいただきありがとうございました。
Googleフォームをうまく使うことで色んなアプリを作ることができそうです。

・クイズアプリ
・イベントの出欠確認
・アンケートの集計

次回はChatGPTとの連携について書きます。
本記事が何かの参考になれば嬉しいです。

# 参考ページ

https://dev.classmethod.jp/articles/easy-googlespreadsheet-gas-to-chatgpt-api/

https://qiita.com/harunan0913/items/c5300260974b594b28cd