12:00addMenucreateFilecreateTemplateFromFilegetFolderByIdHtmlServiceTweetPocketHTMLメール用のソースコード生成を自動化したいECサイト制作をやっていると、販促用のメールマガジンを作ることがよくあります。HTMLメール自体はテンプレート化されていて、変更するのは商品情報だけ。その場合、毎回ソースコードを変更するのは大変だし、何よりHTMLがわからないと変更できないのもメンテナンス性悪いなと思ってスプレッドシートの値を変更するだけで、HTMLメールを生成して指定したディレクトリにドキュメントとして保存するようにしようと思ってまとめました。以下のようなデータを準備しました。このデータをHTMLテンプレートに流し込む処理を書いていきます。「ツール」→「スクリプトエディタ」からスクリプトエディタを起動して、「ファイル」→「新規作成」からHTMLファイルを選択して名前をつけます。「index.html」とつけました。HTMLの枠組みだけ組みます。charset="UTF-8"><title>メールマガジン</title></head><body><ul></ul></body></html>ul要素の中にli要素を商品点数分ループさせて出力というものを作ってみます。スタイルなどは割愛します。スプレッドシートのデータ取得とHTMLテンプレートとの連携スプレッドシートの商品データの取得とテンプレートへデータを渡すところまでGASファイルに記述します。シート名:商品データのオブジェクトを取得。商品データの数を取得。最終行から見出しの1行分を引いて算出。HtmlServiceクラスのcreateTemplateFromFileメソッドでテンプレートを指定。テンプレートにproductDataという変数名でスプレッドシートの値を渡す。スプレッドシートの値が取得できているかは、Logger.log(html.productData);で確認します。うん、ちゃんと取得できている。準備ができたらHTMLファイル側に処理を書きます。?></ul></body></html>9〜15行目を追加しました。productData配列をforEachで繰り返します。option配列にデータを1件ずつ取得して該当の情報をもとにHTMLを構成します。指定したフォルダに保存する準備あとは保存先を指定します。exportHTML関数に以下のコードを追加します。MimeType.HTML);}13行目でファイルを保存するフォルダを取得します。getFolderById関数の引数「xxxxxフォルダIDを入力してくださいxxxxx」にはフォルダIDを設定してください。フォルダIDはURLの末尾部分になります。最後にフォルダに出力するファイルを設定します。createFile関数の第一引数で保存するファイルの名前を指定。今回はタイムスタンプをファイル名の末尾につけるようにしました。第二引数でHTMLファイルの内容を取得して書き出し。準備ができたら今度は、スプレッドシートからHTML出力関数を実行できるようにカスタム(独自)メニューを追加します。entries);}10行目のsheet.addMenu()関数でメインメニューを追加します。サブメニューは配列(JSON形式)で引数として渡してあげます。(サブメニューを増やす時はJSONデータを増やしてあげましょう)exportHTMLは先程作成したフックになる関数です。functionNameに指定してあげます。スプレッドシートの画面をリロードするとメニューが表示されます。それでは実行してみましょう。実行して確認してみるそれでは実行メニューをクリックしてみましょう。いざ実行!\(^o^)/できた!\(^o^)/保存できて中身もできあがってる〜!これでスプレッドシートを更新すれば動的に出力できるな。シートを追加してフォルダIDや行列数などリテラル値になるようなものもシートに記入して変更できるようにしておくとますます便利ですなぁ。「株式会社まなびと」の代表取締役はじめました。宮崎県で活動するフロントエンドエンジニア。フロントエンド業の傍らWordPressのプラグイン開発や公式テーマレビュー、Webマーケティングやプログラミング教室の講師などのいろいろなお仕事をしてます。JSerでPHPer。