このページの本文へ

GoogleフォームとGoogleサイトで簡易CMS (3/4)

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

文●掌田津耶乃

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

スクリプトを作成する

 フォームは完成しましたので、次に、フォームに入力した内容をページに反映するスクリプトを作成しましょう。スクリプトは、フォームの投稿内容を保存するスプレッドシートに作成します。フォームの「回答(0)」メニューから「回答を表示」を選んでください。

「回答を表示」を選んで、回答のスプレッドシートを開く

 なお、「回答を表示」がメニューにない場合は、まだ回答を保存するスプレッドシートが設定されていません。この場合は、「回答」メニューから「回答先を選択する」を選んでください。

回答のスプレッドシートが設定されていない場合は「回答先を選択する」を選ぶ

 画面にダイアログが現れますので、「新しいスプレッドシート」を選択し、タイトルに「インフォメーション(回答)」と入力して「作成」ボタンをクリックしてください。新しいスプレッドシートが作成され、回答先に設定されます。Googleフォームに戻り、「回答を表示」メニューを選んで開きましょう。

新しいスプレッドシートを設定する

スクリプトエディタを開く

 スプレッドシートを開いたら、「ツール」メニューから「スクリプトエディタ…」を選びます。

「スクリプトエディタ...」メニューを選ぶ

 スクリプトエディタが開いたら、「無題のプロジェクト」をクリックし、タイトルを入力してください(ここでは「インフォメーション(回答)」としました)。

タイトル部分をクリックし、プロジェクトに名前をつけて保存する

IDを調べる

 スプレッドシートのIDを調べましょう。スクリプトエディタにリスト1を記述してください。

リスト1


function getId(){
  Logger.log(SpreadsheetApp.getActiveSpreadsheet().getId());
}

 「ファイル」メニューから「保存」を選び、続いて「実行」メニューから「getId」を選んでください。スクリプトが実行されます。

「getId」メニューを選んでスクリプトを実行する

 画面に「承認が必要です」と表記されたダイアログが現れます。「続行」ボタンをクリックしてください。

「承認が必要です」ダイアログが現れる

 画面に「このアプリが許可をリクエストしています」というウィンドウが現れますので、そのまま「承認する」ボタンをクリックして承認してください。

承認するとスクリプトが実行される

 スクリプトが実行されます。スクリプトエディタに戻り、「表示」メニューの「ログ」を選びましょう。

「ログ」メニューを選ぶ

 画面にログのダイアログが現れ、IDが出力されます。あとで必要になりますので、これをコピーしておきましょう。

ログのダイアログに出力されるIDをコピーしておく

メインスクリプトを作成する

 以上で準備は整いました。ではスクリプトを作りましょう。スプレッドシートのスクリプトエディタに、リスト2のスクリプトを記述してください。

リスト2


function checkFormData(){
  var spreadsheet = SpreadsheetApp.openById("☆スプレッドシートのID☆");
  var sheet = spreadsheet.getSheets()[0];
  var endrow = sheet.getLastRow();
  for(var i = 2;i <= endrow;i++){
    var flg = sheet.getRange(i,6).getValue();
    if (flg == "finish"continue;
    var dayobj = new Date(sheet.getRange(i,3).getValue());
    var today = new Date();
    if (today.getYear() == dayobj.getYear() && 
      today.getMonth() == dayobj.getMonth() && 
        today.getDate() == dayobj.getDate()){
          var title = "[" + dayobj.getYear() + "-" + (dayobj.getMonth() + 1) + "-" + 
            dayobj.getDate() + "] " + sheet.getRange(i,2).getValue();
          var content = sheet.getRange(i,4).getValue();
          var address = sheet.getRange(i,5).getValue();
          newPage(title,content,address);
          sheet.getRange(i,6).setValue("finish");
    }
  }
}

function newPage(title,content,address){
  var num = PropertiesService.getScriptProperties().getProperty("page");
  var html = "";
  var contents = content.split("\n");
  for(var i = 0;i < contents.length;i++){
    html += "<p>" + contents[i] + "</p>";
  }
  if (address != ""){
    html += '<img src="' + getMapImage(address) + '">';
  }
  var site = SitesApp.getSiteByUrl("☆サイトのアドレス☆");
  var parent =  site.search("インフォメーション")[0]; 
  var page = site.createWebPage(title, "page" + parseInt(num), html);
  page.setParent(parent);
  PropertiesService.getScriptProperties().setProperty("page", num + 1);
}

function getMapImage(point) {
  var map = Maps.newStaticMap().setSize(800, 600)
    .setCenter(point).setZoom(18).setLanguage('ja')
    .setMapType(Maps.StaticMap.Type.ROADMAP);
  map.addMarker(point);
  return map.getMapUrl();
}

 ☆スプレッドシートのID☆には、先ほどgetIdで調べたスプレッドシートのIDを記入してください。また☆サイトのアドレス☆には、あなたが作成したGoogleサイトのアドレスを指定してください。これは、冒頭の「Googleサイトを作成する」のところで指定したアドレスです。http:から最後まですべて書いてください。

トリガーを設定する

 スクリプトが毎日決まった時間に実行されるようにトリガーを設定しましょう。スクリプトエディタの「リソース」メニューから「現在のプロジェクトのトリガー」を選択します。

「現在のプロジェクトのトリガー」メニューを選ぶ

 現れたダイアログで、「トリガーが設定されていません……」のリンクをクリックしてください。

ダイアログに表示されるリンクをクリックする

 新しいトリガーの設定項目が追加されるので、以下のようにトリガーを設定し、保存してください。なお、ここでは日付が変わる午前0時すぎに実行するようにしていますが、ほかの時間帯を選んでもかまいません。

「checkFormData」「時間主導型」「日タイマー」「午前0時~1時」

トリガーの設定を行なう。指定の時間帯にcheckFormDataが実行されるようにしておく

 「保存」ボタンをクリックすると、「承認が必要です」のダイアログが現れるので、「続行」ボタンをクリックします。

「承認が必要です」ダイアログが現れる

 画面に許可をリクエストするウィンドウが現れます。「承認する」ボタンをクリックして許可してください。これで毎日決まった時間にスクリプトが実行されるようになります。

ウィンドウが現れたら「承認する」ボタンをクリックする

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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

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