ローコードツール"n8n"でGoogleフォームを使ってみた

# はじめに

## n8n.とは
n8n（エヌ・エイト・エヌ）は、異なるアプリケーション間でデータのやり取りを自動化するオープンソースのワークフロー自動化ツールです。ビジュアルインターフェースを使用してAPIや外部サービスと簡単に連携できます。

# やりたいこと
1. Googleフォームからファイルがアップロードされる
1. リンクされているスプレッドシートが更新される
1. アップロードされたCSVファイルを読み込む

# Googleフォームとスプレッドシートの作成
事前準備として、Googleフォームとスプレッドシートを作成する
## Googleフォームの作成
### フォルダの作成
Googleドライブを開き、`+新規`から`新しいフォルダ`を作成
![スクリーンショット 2024-04-27 053340.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/688b2554-356e-3dbe-c1de-757da5315a30.png)

### Googleフォームの作成
作成したフォルダに移動し、`+新規`から `Google フォーム`をクリック
### Googleフォームの編集
赤枠部分を変更します
![スクリーンショット 2024-04-27 054140.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/0843e7b2-d24d-3b0f-fe5f-50c0da6db101.png)

## スプレッドシートを作成
上タブの`回答`を選択し、`スプレッドシートにリンク`をクリック
![スクリーンショット 2024-04-27 054346.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/4ad913c2-d5e1-4703-e420-bd6fd4cc13f2.png)

`新しいスプレッドシートを作成`を選択し`作成`
![スクリーンショット 2024-04-27 054603.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/a620719f-6014-89c0-7ec0-1c6db3053642.png)

作成されたスプレッドシートが表示される
シート横の`+`をクリックし、追加で`転記`シートを作成する
![スクリーンショット 2024-04-28 102852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/10c1864f-ca27-09bc-0cae-7addff1a44ee.png)


## 確認
作成したフォルダに以下のファイルが作成されているのが確認できる
![スクリーンショット 2024-04-27 055338.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/99c09537-c918-f962-dc7d-5eb092a4947a.png)
### Googleフォームからアップロードしてみる
#### プレビューを開く
Googleフォームの画面上部右側の`プレビュー`アイコンをクリック
![スクリーンショット 2024-04-28 051712.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/99c65e1e-c847-05a6-280d-4840b18eedb5.png)

#### ファイルを追加
1. `ファイルを追加`をクリック
![スクリーンショット 2024-04-28 051947.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/8bbef259-27f9-787a-fb1e-d5dbecedd355.png)

csvファイルを追加
適当なcsvファイルもしくは[サンプル.csv](https://drive.google.com/uc?export=download&id=1DiOzOH7dbzW1Bwh_Oc1RFusrpjqglgC_
)をダウンロードして使用してください

送信
![スクリーンショット 2024-04-28 054009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/5f89a9f8-b3f4-1d75-dfa2-f5928bb79513.png)

リンクしたスプレッドシートにアップロードデータが入力される
![スクリーンショット 2024-04-28 054155.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/1d83d7fd-b9ce-994c-498a-e16b459fbfef.png)

## 登録
事前準備が完了したので、n8nの登録から始めます
### [n8nの公式ウェブサイト](https://n8n.io) にアクセス
![スクリーンショット 2024-04-27 045347.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/ada5a008-7ec9-2105-0d69-8bc0cbcca579.png)

### アカウントを作成する
#### 必要事項を入力する
![スクリーンショット 2024-04-27 050127.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/85fa6b2b-e887-d55d-681d-12c917c22e87.png)

#### 表示される質問に答える
![スクリーンショット 2024-04-27 050440.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/a83a9e87-354f-e592-cf34-217121ae6f81.png)

#### 連携するアプリケーションを選択
今回は「Google Sheets」「Gmail」「Google Drive」を選択
![スクリーンショット 2024-04-27 050728.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/9d0dd02a-6084-6f0c-9eee-a4f35ccfc26a.png)

#### メンバーを設定
個人開発のため、`Skip`を選択
![スクリーンショット 2024-04-27 050950.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/f718cc17-1f67-f9a0-47f0-9caeb0bc6a6c.png)

#### 登録完了
`Start automating`を押します。
![スクリーンショット 2024-04-27 051228.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/d2b0be50-aa0e-6cdf-a1b4-b639dca7b42b.png)

# ワークフロー作成
n8nのワークフローを作成していく
## トリガーをノードを作成する
### トリガーとなるワークフローを選択
`Add first step...`->`googlesheets`と検索し、選択
![スクリーンショット 2024-04-27 060059.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/1d130cd3-b93a-1e13-cc61-522d1a34e3c7.png)

### トリガーの条件を選択
今回は`On Row Added Or Updated`(行の追加か更新が行われたら)を選択
![スクリーンショット 2024-04-27 060204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/f87e92d9-7b22-c96e-8a79-4f31a505c666.png)
 
### 認証情報を設定
#### 認証情報を作成
`Google Sheets Trigger`の画面が開くので、`Select Credential`をクリックし、`- Create New Credential-`を選択
![スクリーンショット 2024-04-27 061046.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/bc37dec9-f195-becf-abdd-17c5cfff52e1.png)

#### `Client ID` `Client Secret`を入力する
OAuth同意画面が表示されるので、`Client ID`と`Client Secret`を入力する

:::note warn
[アカウント認証のためには、GoogleCloudPlatformの設定が必要です](#googlecloudplatformの設定)
:::
　※ OAuth Redirect URLは、GoogleCloudPlatformの設定で使用します。
 ![スクリーンショット 2024-04-28 032356.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/0c865733-3e04-7271-9d20-fae73cdc6efb.png)

#### 認証
`Client ID`と`Client Secret`を入力すると`Sign in with Google`ボタンが表示されるので、クリック
![スクリーンショット 2024-04-28 041718.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/b65781b8-350c-56b0-e7fd-47add593b638.png)

アカウント選択
![スクリーンショット 2024-04-28 042536.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/69ce2773-92c7-a170-3cad-7c15cba58e8d.png)

アプリへのアクセスを許可
`続行`をクリック
![スクリーンショット 2024-04-28 042720.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/2d17576b-c949-708a-e3c6-f623adec672e.png)

アクセス権を選択
`すべて選択`し、`続行`をクリック
![スクリーンショット 2024-04-28 042812.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/6229f258-7286-baad-ff66-bea14bd308e1.png)

接続成功
接続成功すれば、画面上部に`Account connected`と表示される
![スクリーンショット 2024-04-28 044509.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/15783c0b-7f11-cae2-fd55-47b12325f723.png)

### `Document`と`Sheet`の選択
認証接続が成功しており、必要なAPIを有効にしていれば、`Document`と`Sheet`は事前準備で作成したフォルダとスプレッドシートが選択できる
![スクリーンショット 2024-04-28 050007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/7c1c4fdb-3985-e37b-5352-6a5850596002.png)

選択後、`Fetch Test Event`をクリック
接続が上手く行けば、右側に取得したデータが表示される
![スクリーンショット 2024-04-28 055005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/f5e49e58-e126-c9f9-4ff1-e80d52ba731b.png)
canvasにノードが追加されている
![スクリーンショット 2024-04-28 100858.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/ebd5c499-1a43-66bb-ce48-a62cdf0c445c.png)

### 新しいノードを設定する
同じスプレッドシート内にシートを追加するノードを作成する
#### ノードの追加
`Google Sheets Trigger`の右につながっている`+`をクリック
![スクリーンショット 2024-04-28 101119.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/efc07e8b-11c1-873c-e128-63a22683ad14.png)

`Google Sheets Trigger`を追加したときと同じように、`googlesheets`を検索し、クリック
![スクリーンショット 2024-04-28 101511.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/8e0dd368-fd79-1296-1d65-adb2849e2800.png)

アクションを選択する
今回は`Append or update row in sheet`(行を追加or更新)を選択
![スクリーンショット 2024-04-28 112025.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/7eddcdfb-f145-4f8b-769f-31bd30d709a1.png)

ドキュメントを設定する
※ 今回は`転記`シートを選択
![スクリーンショット 2024-04-28 112324.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/ff6f4109-c8d8-bbbf-bc6b-bc071730ff95.png)

`Mapptin Column Mode`と`Column to Match On`を設定する
今回はそれぞれ`Map Automatically`(自動マッピング)、`タイムスタンプ`に設定し、`Test step`をクリック
![スクリーンショット 2024-04-28 113013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/21996af7-e63a-075a-e588-4ea9afad8cca.png)

OUTPUTに取得したデータが表示されれば成功
![スクリーンショット 2024-04-28 113243.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/11e7a628-b910-6d67-1666-32e01cfb269f.png)

スプレッドシートを確認すると、転記シートにちゃんと入力されています
![スクリーンショット 2024-04-28 114439.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/a68135a3-0a4c-2ff8-4e3f-8c3ccdc935df.png)

`save`をクリックして保存します
![スクリーンショット 2024-04-28 110222 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/7dbd8f0d-2012-1a08-54d0-d7d40d2c8138.png)

ワークフローの作成はこれで終了です

# 動作確認
実際にGoogleフォームでファイルがアップロードされれば、`転記`シートが更新されるのか確認します。
## ワークフローをAcriveにする
`Inactive`をクリック
![スクリーンショット 2024-04-28 110445.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/ef849c6c-2772-6f3b-73db-bdc9dcf49d33.png)

`Got it`をクリック
![スクリーンショット 2024-04-28 110358.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/73b2a8ac-3dac-4a3d-edad-08c9cb520868.png)

Activeになりました
![スクリーンショット 2024-04-28 110728.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/6b4933a9-2f4a-3f57-cb9e-5a677cd8b879.png)

これで、Googleフォームでアップロードされたら動作するようになりました

## Googleフォームでアップロードする
Googleフォームのプレビュー画面を表示し、csvファイルをアップロード
![スクリーンショット 2024-04-28 054009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/afb290f4-f5a8-b4d4-abb0-da243c6b33e0.png)

`フォームの回答１`シートが更新され...
![スクリーンショット 2024-04-28 114920.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/5d4b899d-e1e8-b244-4b4d-dba3603a1d47.png)

少し時間がかかって...
`転記`シートが更新されました
※ 自動で追加された`row_number` `change_type`は気にしないでください
![スクリーンショット 2024-04-28 115114.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/cf2a91a2-5d29-6cd9-c56c-d209a270f550.png)

これで動作確認ができました

# 最後に
n8nを使って、Googleフォームからアップロードされたデータをスプレッドシートに転記することができました。
基本的な動作は理解できたので、csvの中身を取得するなど応用的な動作も試してみたいと思います。

# 参考記事
最初は以下の記事で実装することができました。ありがとうございます。
- [初めてn8nに触れる人向け！簡単ワークフロー「Googleスプレッドシートを取得してみよう」](https://degitalka.laughall.co.jp/posts/1c44cef8-9e6b-4af1-9f76-3751e48e69fb)
- [[TIPS]n8nでGoogleのOAuth2認証を利用するためにGoogleCloudPlatformの設定手順を解説](https://degitalka.space/posts/a23f0112-1be5-4060-9c58-fc207c920aa5)

<font color="red">※ 以下はGoogleCloudPlatformの説明です。</font>
# GoogleCloudPlatformの設定
[GoogleCloudPlatform](https://cloud.google.com/?hl=ja) のサイトに移動し、Gmailアカウントでログインします。利用規則の同意が求められたら、同意して続行してください
![スクリーンショット 2024-04-27 094614.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/7ac6ec3a-fdf4-96e4-3ee4-e7c18466d53f.png)

## プロジェクトの作成
GoogleColudPlatformはプロジェクトという単位で管理しているので、最初にプロジェクトの作成が必要です
### プロジェクト作成
`プロジェクトの選択` -> `新しいプロジェクト` をクリック
![スクリーンショット 2024-04-27 095042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/f7b316fd-5473-735f-29d2-66e89c0857a1.png)

変更の必要はないので、そのまま`作成`をクリック
![スクリーンショット 2024-04-27 095347.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/d7541e53-3dd6-c2a9-cd68-009efd094897.png)

## OAuth同意画面の設定
### OAuth同意画面を開く
`APIとサービス` -> `OAuth同意画面` をクリック
![スクリーンショット 2024-04-27 095823.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/debede76-0d5b-aa43-0ac2-eb522ace917d.png)

### OAuth同意画面作成
`外部` を選択し、`作成` をクリック
![スクリーンショット 2024-04-27 100025.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/c28b3f2b-9448-c3fd-37e4-6fe914a3c082.png)

### アプリ登録の編集[OAuth同意画面]
下記必須項目を入力して、`保存して次へ` をクリック
- アプリ名：自由
- ユーザーサポートメール：ログインしているGmail
- デベロッパーの連絡先情報：ログインしているGmail
![スクリーンショット 2024-04-27 103047.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/0e267ab7-3ecd-ad9b-d22d-d20cf2120ed7.png)

### アプリ登録の編集[スコープ]
変更せずそのまま`保存して次へ` をクリック
![スクリーンショット 2024-04-27 103333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/036f05cd-d2df-7053-82d2-252a96190cfc.png)

### アプリ登録の編集[テストユーザー]
1. `+ADD USERS` をクリック
![スクリーンショット 2024-04-27 105747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/b03c0d8b-cf8f-f7aa-6ccf-bdadcbf13d69.png)

ログインしているGmailを入力します
![スクリーンショット 2024-04-27 105928.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/56346683-88bf-c356-1fc8-80ac9aa797b7.png)

`保存して次へ` をクリック
![スクリーンショット 2024-04-27 110258.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/4e57fe4f-60cc-7729-3420-504deff0b484.png)

### アプリ登録の編集[概要の画面表示]
以下の概要画面が表示されたらOAuth同意画面の登録は完了です
![スクリーンショット 2024-04-27 110518.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/514571b1-f164-55e6-7e39-9d9404df61fa.png)

## 認証情報を作成
### OAuthクライアントID作成画面を表示する
画面左メニューの`認証情報`->`+認証情報を作成`->`OAuthクライアントID`をクリック
![スクリーンショット 2024-04-27 120217.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/213e6255-d260-b3fe-07dc-e6b1b1999771.png)

### OAuthクライアントIDを作成する
下記を設定し、`作成`をクリック
    - アプリケーションの種類：ウェブアプリケーション
    - 名前：自由
承認済みのリダイレクトURI：[n8nのOAuthRedirect URL](#5-credentialの作成画面が開きます)
![スクリーンショット 2024-04-27 120643.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/e5bf4b8f-af15-f0ad-6acc-600ec063a9b3.png)

作成完了
作成された`クライアントID`と`クライアントシークレット`をn8nのCredential(認証情報)に入力します
![スクリーンショット 2024-04-27 125327.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/8047e0b5-64ca-6e74-833b-6c7bd949caa8.png)

※ `クライアントID`と`クライアントシークレット`は、画面左メニュー`APIとサービス`->`認証情報`からも確認できます
![スクリーンショット 2024-04-28 041121.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/c7346fc0-8600-e6db-288e-89b714cfd52a.png)

## 操作するサービス(API)を選択する
### APIライブラリ から API を有効にする
1. 画面左メニューの`ライブラリ`をクリック
![スクリーンショット 2024-04-27 130043.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/c0d4427e-e6e0-9aa0-1408-61cd67b5508f.png)

操作したいAPIを検索する
今回は`Google Drive API` `Gmail API` `Google Sheets API`を有効にします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/3bc2d624-9b2e-2418-a160-2786d0908284.png)

`有効にする`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/1f674451-4ee9-6d0a-1a91-080d727f100c.png)

`API/サービスの詳細`画面に自動で遷移すれば完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3534893/e9fb8e14-0206-d665-9d92-217777a4a7dd.png)

続けて`Gmail API`と`Google Sheets API`を有効にする

以上でGoogle Cloud Platformの設定は完了です

[ワークフロー作成に戻る](#認証)