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

30分で作れる！セミナー受付がラクになる自動システム (2/4)

2014年04月16日　11時00分更新

文●掌田津耶乃

ツイートする

申し込み者に地図付きメールを返信する

　GASを使って、より実用的なセミナー受け付けフォームを作成します。まずは、フォームからセミナーの参加申し込みをした人に、Googleマップから取得した地図付きの受講票をメールで送信します。作成したフォームの「ツール」メニューから「スクリプトエディタ...」メニューを選んでください。

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

　新たにスクリプトエディタが現れたら、タイトル名部分をクリックし、「セミナー申し込みフォーム」と名前を入力しておきましょう。

スクリプトエディタのタイトルをクリックして名前を入力する

　スクリプトエディタが用意できたら、スクリプトを記述しましょう。リスト1、リスト2を記述してください。便宜上、リストを２つに分けていますが、続けて記述すればOKです。

リスト1


function submitForm(e){
  var itemResponses = e.response.getItemResponses();
  var username = '';
  var mail = '';
  for (var i = 0; i < itemResponses.length; i++) {
    var itemResponse = itemResponses[i];
    var question = itemResponse.getItem().getTitle();
    var answer = itemResponse.getResponse();
    if (question == 'お名前'){ username = answer; }
    if (question == 'メールアドレス'){ mail = answer; }
  }
  var title = '「米国Webマーケティングのいま」セミナーお申込み受け付けのご案内';
  sendMailToUser(title, username, mail);
}

リスト2


function sendMailToUser(title, username, mail){
  var png = getMapImage("☆マーカーの場所☆");
  var message = '<html><body><p>' + username + '様<br><br>'
    + 'この度は弊社主催のセミナーに'
    + 'お申込みいただき、誠にありがとうございます。<br>'
    + '当日ご来場の際は本状を印刷して受付にご提出ください。<br><br>'
    + '――お申込みのセミナー情報――<br><br>'
    + '【セミナー名】米国Webマーケティングのいま<br>'
    + '【開催日時】2014年７月７日（月）　14:00~16:00<br>'
    + '【開催場所】株式会社●●●マーケティング　セミナールーム203<br>'
    + '【開催住所】東京都千代田区富士見12345<br>'
    + '（最寄り駅：飯田橋）<br><br>'
    + '【Googleマップ】<br>'
    + '<img src="cid:map" width="400px" height="300px"><br>'
    + '――――――――<br><br>'
    + '【セミナー運営事務局】<br>'
    + '株式会社●●●マーケティング　担当：吉田<br>'
    + '電話番号　0012345678<br>'
    + 'メール　info@●●●.com</body</html>';
  MailApp.sendEmail({
    to: mail,
    subject: title, 
    htmlBody: message,
    inlineImages:{ map: png},
    attachments:[png]
  });
}

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.getBlob().getAs(MimeType.PNG);
}

　「☆マーカーの場所☆」には、Googleマップで表示する場所（住所あるいは、Googleマップで検索して出てくる著名な建物であれば建物名でもOKです）を指定します。

フォームを完成させる

　このスクリプトでは処理を3つの関数に分けて整理してあります。submitFormは、フォームを送信した時に実行する処理をまとめたものです。sendMailToUserでは、タイトル、ユーザー名、メールアドレスを引数に指定して呼び出すと受講票メールを送信する処理です。またgetMapImageは、位置を示すテキストからGoogleマップの静止画像を生成して返します。

　スクリプトの内容は後で説明するとして、まずはスクリプトを完成させましょう。スクリプトの記述が終わったら、「リソース」メニューから「現在のプロジェクトのトリガー」を選んでください。

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

　ダイアログが現れたら、「トリガーが設定されていません……」のリンクをクリックしてトリガー設定を追加し、「submitForm」「フォームから」「フォーム送信時」を選択してください。

submitFormをフォーム送信時に実行するようにしておく

　これで、フォームが送信されるとsubmitForm関数が実行されるようになりました。設定したら、「保存」ボタンを押してトリガーの設定を保存します。「承認が必要です」という警告が現れたら「続行」ボタンを押し、「許可のリクエスト」ウィンドウで「承認する」ボタンをクリックしてください。これでスクリプトが実行できます。

「許可のリクエスト」ウィンドウでリクエストを承認する

　完成したらフォーム作成の画面に戻り、実際にライブフォームを開いて、フォームから送信してみましょう。送信すると、メッセージが画面に表示されます。

フォームを送信すると、このようなメッセージが表示される

　それからしばらくすると（だいたい十数秒〜数分後）、登録したアドレスにセミナーの受講票メールが届きます。このメールには、セミナーの内容と開催場所のGoogleマップ画像が添付されています。マップ画像は800×600ピクセルのサイズで作成してありますので、そのまま印刷して利用できるでしょう。

届いたメールには、セミナーの内容と共にGoogleマップの画像（pngファイル）が添付されている

処理の内容：Googleマップイメージの生成

　Googleマップの画像をメールに添付して送信するために、getMapImage関数にGoogleマップの画像作成処理をまとめています。以下のように呼び出します。


変数 = getMapImage( "住所や建物名など" );

　getMapImage関数は、Googleマップで指定した地点の地図画像を表示し、そこからBlobという画像データのオブジェクトを生成して返します。例えば、getMapImage("JR東京駅")と呼び出せば、JR東京駅にマーカーを表示したマップイメージが変数に取り出せます。このgetMapImage関数をそのままコピー＆ペーストすれば任意の場所へ張り込めます。

処理の内容：HTMLメールの送信

　作成したGoogleマップイメージを使ってHTMLメールを作成し、送信しています。HTMLメール送信の書き方は、以下になります。


MailApp.sendEmail({
    to:送信先,
    subject:タイトル, 
    htmlBody:コンテンツ,
    inlineImages:{ イメージの指定 },
    attachments: イメージの配列
  });

　inlineImagesには、{名前: イメージ}というように、getMapImageで作成した画像に名前をつけてまとめておきます。この名前は、メールに表示するコンテンツのHTMLソースコード内で使います。

　サンプルではinlineImages:{ map: png}として、pngイメージに「map」という名前をつけました。メールの本文となるHTMLソースコードでは、<img>タグに「src="cid:map"」というようにして画像を指定してあります。HTMLメール内で画像を扱う場合には、"cid:名前"という具合に、inlineImagesに設定した名前を使って画像を指定するのです。

前へ 1 2 3 4 次へ