前回の記事で、テーブルを効率よく作成する方法を説明しました。今回はテーブルのあるこのテンプレート（HTMLファイル）にスプレッドシートの値を埋め込んでWEBサイトとして表示させる方法を解説をします。GASを使うと、APIと呼ばれる外部プログラムの導入なしに簡単に実装できます。
目次
テンプレートにスプレッドシートの値を埋め込む！
下の様なスプレッドシートの値を読み取って・・・
・・・テンプレート（HTMLファイル）の中に埋め込む方法を説明します。
スプレッドシートの値をWEBサイトに表示させる方法として、APIと呼ばれる外部プログラムと組み合わる方法がよく見られますが、GASではAPIを使う事なくシンプルにこれを実装できます。
URLにアクセスしてテンプレートをWEBサイトとして表示するには「doGET（）関数」と「HtmlServiceオブジェクト」を使う
このプログラムではURLにアクセスすると、テンプレートをWEBサイトとしてブラウザに表示します。この一見単純な動作はdoGET（）関数とHtmlServiceオブジェクトを用いています。
doGET（）関数は外部からのアクセスを受けて発動する関数で、スクリプトファイル中１つだけ定義できます。ここにテンプレートを表示する処理を記述しておくと、URLへアクセスするとテンプレートが表示されるようになります。
そしてテンプレートのWEB表示はHtmlServiceオブジェクトを使います。HtmlServiceオブジェクトはテンプレート（HTMLファイル）をブラウザに表示させるためのオブジェクトでこれで、表示対象となるテンプレートの指定、WEBサイトへの表示を行います。
素晴らしいのは、HtmlServiceオブジェクトにセルの値などを引き渡せることです。
ここまでの流れを図にするとこんな感じでしょうか。
ユーザーからは、URLにアクセスすると単にサイトページが表示されているだけに見えるのですが、実際は上記の様にアクセスの度にGASの内部で処理されているわけです。
GASでWEBサイトを表示させるお定まりのコード
ここまでの流れを示すプログラムを以下の様になります。
function doGET(e){
・
//テンプレートファイルからHTMLオブジェクトを生成
var myHTML = HTMLService.createTemplateFromFile(‘テンプレート‘);
・
//テンプレート内に埋め込む値をプロパティとして指定する
myHTML .プロパティ= ‘セルの値など‘;
・
//テンプレートをWEBサイトとしてホスティングする
return myHTML.evaluate( );
}
以上がセルの値などを埋め込んでテンプレートをWEBサイトとして表示するお定まりのコードです。以下にコードの内容を説明します。
①HTMLオブジェクトを作る
②HTMLオブジェクトにプロパティとして値を引き渡す
③HTMLオブジェクトをWEBサイトとしてホスティング
②でプロパティの値はいくつでも定義でき、配列でもかまいません。変数にスプレッドシートの値を取得した配列を定義しておくことで、スプレッドシートの値を簡単に引き渡せます。
また、②で引き渡したプロパティは、テンプレート内で同じ名前の変数として自由に利用できます。
特別な外部プログラム（APIなど）を使用せずに、スクリプトファイルからテンプレートに値を引き渡せることの素晴らしさ
ここで、何気ない以下の一文が大変すばらしいことについてお話させてください。
セルの値などは、googleのサーバー上で扱われるデータです。一方、テンプレートにあるHTMLコードはユーザーPC上のブラウザで作動しているものです。
サーバーからユーザーPC（クライアント）へのデータの受け渡しは本来とても煩雑です。外部プログラム（API）を組み込んだり、プログラムもサーバーとクライアントで異なる言語を使用したり、文字コードの変換をしたり・・・色々と煩雑な処理を伴う場合が多いのです。
こうした事が、たった１行のコードでできてしまう！ これは素晴らしい仕掛けだと思います。
スプレッドシートのセルの値を取得してHTMLServiveオブジェクトに引き渡すプログラム
以下では具体的にセルの値を取得するプログラムをご説明します。
まず参照元のシートですが、シート名を「支出」として、A1セルからF11セルまで（１１行ｘ６列の範囲）で以下の様に表示されているものとします。
以下の様なコードでセルの値を取得できます。
var myApp = SpreadsheetApp.openById(‘★スプレッドシートのID★’);
・
//対象シートをシートの名前を指定して取得
var mySheet = myApp.getSheetByName(‘支出’);
・
//データ記録範囲として、行数と列数を記載
var nRow=11;
var nCol=6;
・
//データ記録範囲を指定して範囲を取得
var myCells = mySheet.getRange(1,1,nRow,nCol);
myApp→mySheet→getRange→myCellsの４重の入れ子構造でようやくセルにたどりつけます。最後の行でmyCellsは配列でありセルの情報一式が入っています。
そして、以下のコードでテンプレートに値を引き渡しています。
長くなりましたので、ここで一旦記事を締めます。次の記事では、引き渡した値をテンプレート側で処理している部分を説明します。
