【01_WEBアプリ基本】テーブル形式フォーム〔解説編Vol.3〕スプレッドシートの値を「APIを使わずに」取得してWEBサイトに表示する〔後編〕

記事概要

前の記事ではスプレッドシート上のデータを取得することをしました。この記事ではスクリプト側で引き渡したセルの値をテンプレート上でどの様に扱うのかを解説します。

この記事ではテンプレートファイルを扱います。（プロジェクトでHTMLの方を選択してください）（前の記事ではスクリプトファイルだったので注意）

テンプレート側に引き渡した変数を使用して、WEBサイト用のフォームに値を埋め込む

引き継いだmyCells配列から値を拾い出して、冒頭の画像の様なテーブルを表示するには、テンプレート（THMLファイル）で、＜table＞～＜/table＞タグ中に以下の様なコードを記述します。（インラインコード部は薄い黄色、その中に埋め込んだ変数は薄い橙色にしてあります）

テンプレート内なので、HTMLコードとそのインライン表記になっています。同じJavascriptベースなので混乱しやすいですが、スクリプト内とプログラム環境が違う点にご注意ください。

＜!—- テーブルタグとID名称宣言—–＞
＜table id=”TableBody”＞
・
＜!—- JavaScriptのインライン記述-【↓ここから】—-＞
＜?
・
// GsValuesの各行 iRow に対して実行。myCellsはGASから渡される。
for(var iRow in myCells) {
・
・// 各行を Row に代入
・var Row = myCells[iRow];
・・
・// 行頭タグ　「tr」｜タグは　？＞・・・＜？で挟む
・?＞＜tr＞＜?
・・
・// カレント行の各列 iCol に対して実行
・for(var iCol in Row) {
・・・
・// 該当行の各列 iCol をCellに代入
・・var Cell = Row[iCol];
・・
・// 見出しや末尾の列の場合はthタグ記述
・・if (iRow == 0 || iCol == 0 || iCol == 5) {
・・・?＞＜th＞＜?=Cell ?＞＜/th＞＜?
・・・
・// 他の場合tdタグ記述
・・} else {
・・・if (iCol == 1 || iCol == 4) {
・・・・・?＞＜td contenteditable=”true” inputmode=”numeric”＞＜?=Cell ?＞＜/td＞＜?
・・・} else {
・・・・・?＞＜td contenteditable=”true” inputmode=”text”＞＜?=Cell ?＞＜/td＞＜?
・・・}
・・}
・}
・?＞＜/tr＞＜?
}
?＞
＜!—- JavaScriptのインライン記述-【↑ここまで】—-＞
＜/table＞

・

下線のあるピンクの文字がスクリプトから引き渡されたプロパティの値が格納されている変数です。このようにテンプレート内でスクリプトからの値を利用するには、プロパティと同じ名前の変数にするだけで利用できます。

スクリプトから引き渡されたプロパティの値・・プロパティと同じ変数を使うだけ

とても簡単です！

セルの値をmyCellsから引き出すのは少々煩雑で、行配列を引き抜いて、次に行配列から各セルを抽出します。