Googleフォームで取得した画像をスプレットシートで表示する方法【セル内に画像で表示】

アンケートやイベント参加者申し込みの管理に便利なGoogleフォーム。今回はGoogleフォームで記入者に画像ファイルをアップロードしてもらった際に、送付してもらった画像をスプレットシートセル内で表示する方法になります。

#Googleフォームでアップロードされた画像をスプレットシートのセル内で表示する方法
Googleフォームでは、画像をアップロードする項目を設定できるので大変便利なのですが、回答結果がまとまっていくスプレットシート内では画像リンク（URL）として管理されるため、そのままでは回答者がアップロードした写真をスプレットシート上で一覧で確認することができません。

割と不便だったりするので、画像リンク（URL）を変換するなどスプレッドシートの関数を組み合わせることによってスプレットシートのセル内に画像として表示する方法をまとめます。

#（下準備: Googleフォームの作成と共有設定）
**Googleフォームの作成】**
今回はサンプルとして、以下のフォームを作成しました。イベント参加フォーム（厳かな会合…）でプロフィール画像をアップロードしてもらうイメージです。

<img width=50% alt="google_forms_show_image.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609490/7677b4c8-71d9-36e5-1204-33e07d99fb70.jpeg">

**【回答集計するスプレットシート】**
で、回答集計は以下のようなイメージになります。ご覧の通りでプロフィール画像がURL（Googleドライブで管理している格納先URL）になっているため、画像を確認するにはそれらをひとつひとつ辿っていく必要があります（~~めんどくさい…~~）。

<img width=100% alt="google_forms_show_image_02-2048x614.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609490/f513a953-20f5-2fa2-7d61-5687e8f1b655.jpeg">

>（参考）
上記のサンプルデータと、各種結果は[こちら](https://docs.google.com/spreadsheets/d/1pSpe733qB3ztR2ZmNjhom-bPtLLsKwSSD8qLmmOmiV8/edit?usp=sharing)にて公開しておりますので、必要に応じてコピペして使ってください。

#画像の共有設定と表示用シートの作成
（~~ここもまだ下準備の説明です…~~）ということで、画像を表示するには画像を共有する設定にしないといけません。

**【画像を共有設定にする】**
画像が格納されるフォルダ（デフォルトではGoogleフォームを作成したフォルダと同じ場所に生成されます。）があると思うので、フォルダごと共有設定を行うようにしてください。**（個人情報等を扱う場合は、自己責任でご対応をお願い致します!!）**内容に応じて、見せたい人にだけ共有をするように適宜設定をお願いします。今回は私は、リンクを知っている人は全て閲覧できるように設定しました。（フォルダ右クリック → 共有 → 共有可能なリンクを取得）

![google_forms_show_image_03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609490/04ec4070-8c16-3019-a9e9-3eb0c89e2a3c.jpeg)
**【作成画像表示用のシートを新規で作成】**
なんでもいいのでシートを新規で作ってください。今回は”画像表示用”という名前のシートを新規で追加しました。

Googleフォームで新規回答が発生するとレコードが追加される行に入力していた値が全てリセットされた上で上書きされてしまう仕様のようです。そのため、画像表示のために関数をあらかじめ指定しておいたとしても、その値が上書きされてしまい改めて関数を指定することになり手間になります。なので、その二度手間を防ぎ、新規回答分も自動で画像表示ができるように新規のシートを作成しています。

<img width=100% alt="google_forms_show_image_04-1536x568.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609490/ba66d048-d06b-f117-7759-9d8d265c5750.jpeg">

#画像URLの変換とIMAGE関数による画像表示

ようやく本題です。いきなり結果です。
![google_forms_show_image_05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609490/5793ece3-0187-5c80-eb1d-0b8f3d6f0c06.jpeg)

画像がこのように一覧で表示されるようになります（ざっくり！！）。

**1. Queryの入力**

一番左端のA1セルに以下をコピペしてください。

```
= Query(‘フォームの回答 1‘!A1:E50,”Select *”)
```
シート名とセル範囲は元シート（回答が集計されるシート）に合わせて設定をするようにしてください。（今回のケースでは以下の通りです。参考まで。）

![google_forms_show_image_06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609490/1c10206b-a4e2-2299-6d82-c9711b4786b7.jpeg)

**2. 関数の入力**
Googleフォームの設問数 + 1番目のセル（今回であればF列）の2行目に、以下の数式を入力するようにしてください。

```
= IFERROR(IMAGE(CONCATENATE(“http://drive.google.com/uc?export=view&“,QUERY(SPLIT(E2,“?”),“select Col2”))))
```

`画像共有用のURL`を作成し、その値を用いてIMAGE関数で画像を表示するようにしています。（あとは念のためエラーが返ってきたときにエラーメッセージを非表示にするためにIFERROR関数を使っています。）

>画像共有用のURLですが、具体的には以下のような構造になります。また上記の関数内で関連するところを色分けするとこのようになります。

>http://drive.google.com/uc?export=view&id=【画像id】

>前半のURLは固定値なので手打ちで指定、後半の画像idの部分は、もともとGoogleフォームに入力される画像URL（こちらは共有用URLではないからそのままでは使えないため要加工）から”?”の部分で文字列を分割して、2番目の値（これが画像idになる）を抜き取っています。そして、それら双方をCONCATENATE関数で結合しています。

**3. 関数のコピペ**
あとは入力した関数（今回のケースだとF2セル）をただただ下の列までコピペをしておきます。（1つお隣のセル（画像URL）に参照するセルがないと、エラーとなりエラーメッセージが邪魔なのですが、それをIFERROR関数で省いています。）

---
以上になります。新しいシートを作って前述の3ステップをしておけば、Googleフォームの新規回答があった際にも、画像つきでシートに回答内容が反映されるようになります。

名簿管理や、商品管理など結果がその場で確認できるので便利ですね。ただ、画像は共有設定をしないといけないので、セキュリティ面には注意するようにしてくださいね。

最後になりますが、IMAGE関数では画像の大きさも指定できるので、必要に応じてGoogleリファレンスにてご確認ください！！