このページの本文へ

PROGRAMMING Web制作をちょっと便利にするGoogle Apps Script入門 ― 第9回

Googleフォームでカタログページを自動生成

2014年09月22日 13時00分更新

掌田津耶乃

  • この記事をはてなブックマークに追加
本文印刷

 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にする
公開日の項目。質問の形式は「日付」にする。項目の設定を終えたら「完了」をクリックする

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング