このページの本文へ

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

GoogleフォームとGoogleサイトで簡易CMS

2014年08月11日 11時00分更新

掌田津耶乃

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

 Webデザイナーを対象に、Google Apps Script(以下、GAS)の基本的な使い方から実践的なWebサービスの開発方法までを解説する本連載。今回は、Googleサイトで作成したWebサイトに、「お知らせ」ページを自動生成する簡易CMSを作ります。

GoogleサイトをGASで活用しよう

 「Googleサイト」は、用意されたパーツを組み合わせるだけでWebページを作れるWebサービスです。GoogleサイトはGASに対応しており、GASでスクリプトを組むことで、Webページの作成を自動化できます。Googleサイトで簡単なお知らせページを自動生成するツールを作ってみましょう。

Googleサイトを作成する

  まずは、Googleサイトで作ったWebサイトに、公開用のWebページを用意します。以下のアドレスにアクセスし、「作成」ボタンをクリックしてください(すでにGoogleサイトを利用している場合は、新たにサイトを作る必要はありません)。

https://sites.google.com/

Googleサイトにアクセスし、「作成」ボタンをクリックする

 新しいサイトの設定を入力するページが現れますので、以下のように入力してください。入力後、「作成」ボタンをクリックすればサイトが作成されます。

  • 使用するテンプレートを選択――Webサイトのテンプレートを選びます。新たに作るなら、「空のテンプレート」でOKです
  • サイトの名前――サイト名を入力します
  • サイトの場所――サイトのURLです。サイト名を入力すると自動設定されますが、変更してもかまいません(半角英数字のみ入力可)。すでに使われているURLは使用できません
  • テーマを選択――サイトのテーマを選びます。Webサイト全体のイメージが決定されますので、好きなテーマを選択してください。本サンプルでは「エレガント・オリーブ」を使います
Webサイトの初期設定画面。サイト名とURL、テーマなどを指定する

GoogleサイトにWebページを用意する

 作成したGoogleサイトを開き、お知らせページをまとめて管理するためのWebページを作ります。画面右上にある「新しいページ」ボタン(書類アイコンの中に+が表示されたもの)をクリックしてください。

画面右上の「新しいページ」ボタンをクリックする

 作成するページの設定画面が現れますので、ページ名を入力してください。ここでは「インフォメーション」としておきます。「使用するテンプレートを選択」では「ウェブページ」を選びます。なお、「サイトの場所」には自動的にURLが設定されますが、独自のURLを設定したい場合は、ページのURLを半角英数字で入力してください。それ以外の項目は、デフォルトのままでかまいません。

 次に、「作成」ボタンをクリックしてページを作成します。

新しいページの名前とテンプレートを設定し、「作成」ボタンをクリックしてページを作る

サブページリストを挿入する

 新しいページが作成され、デザイン画面に移ります。「挿入」メニューから「サブページリスト」を選んでください。

「挿入」メニューから「サブページリスト」を選ぶ

 画面にサブページリストの設定ダイアログが現れます。タイトルに「公開中のページ」と入力し、「保存」ボタンをクリックしてください。これでサブページ(このページの下の階層に配置されるページ)のリストを自動生成するパーツが追加されます。

タイトルを入力し、保存する

 画面右上にある「保存」ボタンをクリックしてください。変更内容が保存され、デザインモードからブラウズモード(実際にページを操作できる状態)に切り替わります。

「保存」ボタンをクリックして保存する

ページの設定を変更する

 画面右上にある歯車のアイコンが記されたボタンをクリックし、ポップアップして現れたメニューから「ページ設定」を選びます。

歯車アイコンから「ページ設定」を選ぶ

 画面にページの設定が現れます。ここで以下のように設定し、「保存」ボタンをクリックして保存してください。

  • ページのタイトルを表示する――ON
  • サブページへのリンクを表示する――OFF
  • 添付ファイルを許可する――OFF
  • コメントを許可する――OFF
  • ページの説明――適当な説明を記入します(空白のままでもOKです)
  • ページのURL――シンプルなほうが分かりやすいので、ここでは「info」としておきます
「ページ設定」で必要な設定項目を入力する

 これで、お知らせページが作成できました。表示スタイルは選択したテーマによって異なりますが、基本的な表示内容はほぼ同じように作れたはずです。

作成されたページ。選んだテーマによってデザインは異なる

この連載の記事

一覧へ

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

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

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

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

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

ランキング