Webデザイナーを対象に、Google Apps Script（以下、GAS）の基本的な使い方から実践的なWebサービスの開発方法までを解説する本連載。今回はGoogleフォームを使って、オンラインショップの商品紹介ページを自動生成するシステムを作ります。
商品紹介ページの作成
前回はGoogleフォームから投稿したデータを基に、Googleサイトでページを作成する簡易的なCMSを構築しました。この2つを連動する手法は、ほかにもいろいろ応用できます。今回は一例として、ネットショップなどで掲載する「商品紹介ページ」を自動生成するシステムを作ってみましょう。
商品紹介には商品写真が必須なので、前回作成したインフォメーションページとは異なり、画像を掲載する必要があります。Googleフォームにはイメージをアップロードする機能がないので、画像共有サービスの「Flickr」にアップロードしておいた画像のURLを呼び出して表示します。URLとして送信するので、Flickrだけでなく、オンラインで画像を公開できるサービスならなんでも利用できます。
また、今回は「リスト」テンプレートを使って、自動生成した商品紹介ページをまとめる一覧ページも作成します。
フォームの作成
商品紹介の情報を投稿するフォームと、Googleサイトに用意する商品紹介ページをまとめるためのページを作成します。まずはフォームから設定しましょう。
Googleドライブ（https:/drive.google.com/）を開き、「新規」ボタンから「Googleフォーム」を選択し、新しいフォームを作成してください（「Googleフォーム」が見当たらない場合は、「その他」メニューから探してください）。
Googleドライブから「新規」ボタンの「Googleフォーム」を選択する
新しいフォームが開いたら、画面に「タイトルとテーマを選択」というダイアログが表示されます。「商品紹介フォーム」と入力し、設定したいテーマを選んでください。サンプルでは「デフォルト」テーマのままにしています。
現れたダイアログで、フォームの名前とテーマを指定し、「OK」をクリックする
Google Appsを使う場合、フォームへのアクセスを制限するため、「このフォームを表示する際に○○へのログインを求める」をONにしてください。これで、作者のアカウントが管理されているGoogle Appsのメンバーしかフォームにアクセスできなくなります。
「○○へのログインを求める」というチェックをONにしておく
フォームの項目を作成する
フォームの項目を順に作成しましょう。今回は、「商品名」「価格」「説明文」「商品番号」「イメージURL」「公開日」の6つの項目を作成していきます。フォームの項目部分にある「アイテムを追加」ボタンを使い、必要な数だけ項目を作成し、以下を参考に設定してください。
●商品名の項目
- 質問のタイトル：商品名
- 補足文：なし（空白のままでOK）
- 質問の型式：テキスト
- 必須の質問：ONにする
商品名の項目。型式をテキストにし、必須の質問をONにしておく
●価格の項目
- 質問のタイトル：価格
- 補足文：なし（空白のままでOK）
- 質問の型式：テキスト
- 詳細設定
- データの検証：ONにする
- 「数字」「整数」を選択する
- 必須の質問：ONにする
価格の項目。詳細設定で入力値が整数のみ受け付けるようにしておく
●説明文の項目
- 質問のタイトル：説明文
- 補足文：なし（空白のままでOK）
- 質問の型式：段落テキスト
- 必須の質問：ONにする
説明文の項目。段落テキストを使う
●商品番号の項目
- 質問のタイトル：商品番号
- 補足文：なし（空白のままでOK）
- 質問の型式：テキスト
- 必須の質問：ONにする
商品番号の項目
●イメージURLの項目
- 質問のタイトル：イメージURL
- 補足文：なし（空白のままでOK）
- 質問の型式：テキスト
- 必須の質問：OFFのまま
イメージURLの項目。必須の項目はOFFにする
●公開日の項目
- 質問のタイトル：公開日
- 補足文：なし（空白のままでOK）
- 質問の型式：日付
- 年を含める：ONにする
- 時刻を含める：OFFのまま
- 必須の質問：ONにする
公開日の項目。質問の形式は「日付」にする。項目の設定を終えたら「完了」をクリックする
