30分で作れる!セミナー受付がラクになる自動システム (2/4)
2014年04月16日 11時00分更新
申し込み者に地図付きメールを返信する
GASを使って、より実用的なセミナー受け付けフォームを作成します。まずは、フォームからセミナーの参加申し込みをした人に、Googleマップから取得した地図付きの受講票をメールで送信します。作成したフォームの「ツール」メニューから「スクリプト エディタ...」メニューを選んでください。
新たにスクリプトエディタが現れたら、タイトル名部分をクリックし、「セミナー申し込みフォーム」と名前を入力しておきましょう。
スクリプトエディタが用意できたら、スクリプトを記述しましょう。リスト1、リスト2を記述してください。便宜上、リストを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年7月7日(月) 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関数が実行されるようになりました。設定したら、「保存」ボタンを押してトリガーの設定を保存します。「承認が必要です」という警告が現れたら「続行」ボタンを押し、「許可のリクエスト」ウィンドウで「承認する」ボタンをクリックしてください。これでスクリプトが実行できます。
完成したらフォーム作成の画面に戻り、実際にライブフォームを開いて、フォームから送信してみましょう。送信すると、メッセージが画面に表示されます。
それからしばらくすると(だいたい十数秒〜数分後)、登録したアドレスにセミナーの受講票メールが届きます。このメールには、セミナーの内容と開催場所のGoogleマップ画像が添付されています。マップ画像は800×600ピクセルのサイズで作成してありますので、そのまま印刷して利用できるでしょう。
処理の内容: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に設定した名前を使って画像を指定するのです。