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 Appsを使う場合、フォームへのアクセスを制限するため、「このフォームを表示する際に○○へのログインを求める」をONにしてください。これで、作者のアカウントが管理されているGoogle Appsのメンバーしかフォームにアクセスできなくなります。
フォームの項目を作成する
フォームの項目を順に作成しましょう。今回は、「商品名」「価格」「説明文」「商品番号」「イメージURL」「公開日」の6つの項目を作成していきます。フォームの項目部分にある「アイテムを追加」ボタンを使い、必要な数だけ項目を作成し、以下を参考に設定してください。
●商品名の項目
- 質問のタイトル:商品名
- 補足文:なし(空白のままでOK)
- 質問の型式:テキスト
- 必須の質問:ONにする
●価格の項目
- 質問のタイトル:価格
- 補足文:なし(空白のままでOK)
- 質問の型式:テキスト
- 詳細設定
- データの検証:ONにする
- 「数字」「整数」を選択する
- 必須の質問:ONにする
●説明文の項目
- 質問のタイトル:説明文
- 補足文:なし(空白のままでOK)
- 質問の型式:段落テキスト
- 必須の質問:ONにする
●商品番号の項目
- 質問のタイトル:商品番号
- 補足文:なし(空白のままでOK)
- 質問の型式:テキスト
- 必須の質問:ONにする
●イメージURLの項目
- 質問のタイトル:イメージURL
- 補足文:なし(空白のままでOK)
- 質問の型式:テキスト
- 必須の質問:OFFのまま
●公開日の項目
- 質問のタイトル:公開日
- 補足文:なし(空白のままでOK)
- 質問の型式:日付
- 年を含める:ONにする
- 時刻を含める:OFFのまま
- 必須の質問:ONにする