チャック袋ゲームフェスでのGoogleフォームを活用した全自動Webサイト構築についての話

どうも、いせごんです。
今回ゲームマーケット2023春で、米光一成さんが主催する「チャック袋ゲームフェス」に参加しました。詳細はこちら。
このフェスを超ざっくりいうと、チャック袋に入ったゲームを販売する人たちを集めてゲムマを盛り上げよう！というものです。事前にLINEのオープンチャットで集まって、情報を集約して、発信していこう！的な感じです。

今回この記事を書こうと思った理由は、イベント主催者に役立つ情報だと思ったからです。つまり、Googleフォームを使うことで自動的に情報が更新されるWebサイトを作りたい人向けです。これはイベント主催者は比較的役立つと思うのです。

簡単な経緯

最初は各自でGoogleスプレッドシートに記入していく形式がいいのではないか、と話していました。

当初出たイメージ

一覧性が高いので、情報処理が得意な人や目的が明確な人にとってはわかりやすく見やすいです。
でもゲームマーケットの出展者ではなく、参加者として見た時に、これも悪くはないけど、もっとビジュアルに訴えかけるものの方がいいと思ったわけです。いろいろな人がいて、目的が明確な人だけでなく、ぶらっと落ち着いて全体像を見渡したい人もいます。ようは余白が欲しいと思ったわけです。

そこで真っ先に思ったのが、まとめた情報をWebサイトに落とし込んでいくのがいいではないか、ということです。しかしここで問題があります。

私自身が出展者として、いろいろと準備等があるのです。特にグループではなく一人でやっている自分としては、自分のリソースをどこまで割くかの問題があるわけです。このフェスへの参加はギリギリでもOKなので、状況によっては前日付近に追加があった場合も稼働しなくてはなりません。
自分のこともやりながら、サイト更新を考えると、もし１歳半の娘や自分が体調を崩した場合に稼働できず迷惑をかけることにもなります。

じゃあWebサイトはやめるのか？と言われたら、Noです。
まだ可能性は探っておらず、ある程度の条件を出したにすぎません。

つまり、自動的にやってくれる仕組みがあれば解決するわけです。もしそれが比較的容易に構築できるのであれば、そちらにしてもいいのではないか、というわけですね。

Googleフォームで情報を集約する。それをスプレッドシートに書き出すことはできるので、そこからどうやってWebサイトに持っていくかという話です。
いろいろと調べた結果、「siteoly」というサービスを発見しました。しかも１つのサイトであれば、無料で作成ができます。
情報自体はpaizaさんの開発日記しかないものの、やってみなければ始まらないのでやってみることにしました。

siteolyで構築していくよ

まあ、まずは先ほどのサイトを参考にしながら試しに作ってみました。
※Google Docsの権限を譲渡するので、かなりヒヤヒヤしますが、機密情報を扱っていないアカウントなので譲渡しました。もしこれをやる場合は、機密情報を扱っていないアカウントで行うといいと思います。

豊富なテンプレートから選ぶことができます。

サイト構築までは、Googleスプレッドシートが高度なWebサイトに大変身するノーコードサービス「Siteoly」を使ってみた！だけで十分だと思います。

なので私はGoogleフォームで集約した情報をどうやって持ってくるかという話をしていきます。

必要な知識

全体像のイメージはこんな感じ

スプレッドシートの「Body-Cards」タブのところに、「importrange関数」を使って、情報を持ってくるだけです。
importrange関数は、指定したスプレッドシートから指定した範囲のセルの情報を読み込むことができます。
つまり、スプレッドシートAの情報を、スプレッドシートBで読み込むことができるわけです。

Googleフォームはスプレッドシートに自動的に書き出してくれる機能があるので、そこで書き出されたスプレッドシートの情報を、siteolyのサイト構築に必要なスプレッドシートで自動的に読み込ませればいいわけです。

使い方
=importrange("URL","範囲")

例）
=importrange("http://docs.google.com/****","C2:K")

※ダブルクオーテーションが必要です！！！！！！！
抜けてないか確認してください。

画像を読み込ませたい場合

1)Googleフォームにアップロードされた画像のフォルダの権限を「リンクを知っている全員」で「閲覧者」に変更すること。

2)Background Image Linkの列にこの式を入れる。

="https://drive.google.com/uc?export=view&id="&RIGHT(T2,LEN(T2)-FIND("=",T2,1))

※T2はGoogleフォームにアップロードされた画像ファイルのURLです。
　ここだけ必要に応じて変更してください。

これだけです。
超ざっくり説明すると、共有のURLと閲覧のURLは異なるので、必要なIDだけ引っこ抜いて閲覧のURLに変更しています。

たまにハマる罠

importrange関数がうまく作動しなくて、エラーになることがあります。
正直、原因が全くもってよくわかんないです。
同じ式でも時間をおいて試すとうまくいったので、焦らず時間をおいてみてください。

まとめ

今回、超ざっくりと説明しましたが、これらの情報があれば格段に構築しやすくなっていると思うのでぜひご活用ください。（こんなことをやろうとすると人は、ある程度Googleアプリを使ったことがあって情報リテラシーがあると思うので、情報は割愛しても大丈夫だと思ってます。もし、もっと詳しく教えてくれよべいべーって人がいたら、コメントください。できる限りお答えしようと思います）
情報収集や実験とか構築とかそこそこ時間がかかりましたが、常にGoogleフォームやLINEに意識を向けて更新し続けるよりもクリーンな状態でゲムマを迎えられたのでよかったです。

サイトは１個しか作れないので、次回同じようなことをやる場合は消さないといけないので、時間を見つけてGoogleサイトなどにデータを移行しようと思います。

そんな私が作ったゲームはBOOTHで販売中です。
ぜひみなさん買ってくださいね！！！！

以上、終わりっ！