この記事は主にテンプレートでの記事になります。テンプレートでテーブルの上側にある以下の様な日付設定部分の表示とその処理の説明です。
目次
ユーザの日付入力部
このアプリでは、Googleスプレッドシートで日付を名前としたシートを自動作成します。そして、デフォルトではその日付は今日（作業した日）になっています。詳しい解説は以下にありますので、ご参照ください。
そこを、ユーザに入力した日付に差し替えるだけです。
ユーザの日付入力ボックスは以下の様に記述しています。
＜input type=”number” id=”mM” class=”myDate” value=”＜?=Number(myDate.substring(5,7)) ?＞”＞月＜br＞
＜input type=”number” id=”mD” class=”myDate” value=”＜?=Number(myDate.substring(7,9)) ?＞”＞日＜br＞
・
＜span ＞読込みシート名＜/span＞
＜span id=”myrDate“＞＜?=myDate ?＞＜/span＞
ごく普通の＜INPUT＞タグですので細かい説明は不要と思いますが、入力ボックスの年、月、日のiｄ名を、mY、mM、mDでそれぞれ決めている点、デフォルトで今日の日付 myDate（今日の日付のシート名）から抽出した数字を入れている点がポイントです。
また、クラスという属性を指定しています。クラスは複数のオブジェクトに跨って設定できるのが特徴です。
入力ボックスの下には、現状の読み込みシート名を示すテキストがあり、iｄ名をmyrDate、デフォルトの値をmyDateとしています。
入力が切り替わったら即テキストに反映させる
このアプリでは、ユーザが入力を終えたら、「読み込みシート」のテキストに反映させています。
どういう事かと言うと・・・以下の「読み込みシート名」が
日付を変えると・・・
ユーザがボタンなどをクリックしなくても即反映されます。
それはどうやっているのでしょうか？
コードを抜き出してみます。
$(function() {
//セレクトボックスが切り替わったら発動
$('.myDate').change(function() {
（中略）
var newDate = "D" + tDate.getFullYear() + tNames[tDate.getMonth()]+
（中略）
//選択したvalue値をp要素に出力
$('#myrDate').text(newDate);
});
});・
JQueryには要素の値が変わったら発動する以下の様な関数があり、それを用いてテキストを変更しています。（全体では、以下を含めた一連の流れを改めて関数として指定しています）
・
JQueryの$(セレクタ).changeを使っているのでした。（ここでtextというJQueryの関数があるのですが、これについては次に説明します）
入力情報から呼び出すシート名を生成する
ユーザは日付を入れ終わったら、以下にある「読込み」ボタンをクリックします。このボタンを押すと、該当シートの値が読み込まれます。
上記のボタンのHTMLコードは以下の様なものです。
・
doUpdateTable(行数, 列数)関数はユーザ定義関数です。この関数を発動している訳です。（具体的な行数、列数は、インラインコード＜?= ?＞で変数として表現しています）
上記の関数をみてみます。
＜!—- JQuery記述-【↓ここから】–＞
var nDate = $(‘#myrDate‘).text();
$(‘#myDate‘).text(nDate);
var myDate0 = $(‘#myDate‘).text();
＜!—- JQuery記述-【↑ここまで】–＞
google.script.run.withSuccessHandler(onSuccess2).GetSheet(myRows, myCols, myDate0);
}
・
変数nDateに、myrDateオブジェクトのテキストを代入しています。ここではまたもやJQueryを使っています。この部分の構文は以下です。
$(セレクタ).text(変数)・・・セレクタが指すオブジェクトのテキストを変数の値にする。
・
やっている事は、ヘッダに表示されているシート名を取得して、
テーブル上のシート名（以下のテキストです）に反映し、改めてその値を取得し・・・
google.script.run.関数を使って、スクリプト側のGetSheet（行、列、シート名）という関数を発動させることです。
GetSheetについては以下の記事とほぼ同じ内容です。（指定シート名が引数として追加されている点、スプレッドシートへの読み込み／書き込みが違うだけです）
全体は後の記事で紹介するとして、ここでは抜粋だけ表示します。
//シートの値をHTMLに返す関数
function GetSheet(myRows, myCols, myDate0){
//アプリケーションの取得
var myApp = SpreadsheetApp.openById('☆各自のスプレッドシートのID☆');
（中略）
//対象シートをシートの名前を指定して取得
var myDate =myDate0
var mySheet = myApp.getSheetByName(myDate);
//対象シートが無ければコピー
var myFrmSheet = myApp.getSheetByName('書式');
if(!mySheet){
var mySheet = myFrmSheet.copyTo(myApp);
mySheet.setName(myDate);
}
//取得範囲として行数、列数を設定
var nRow=myRows;
var nCol=myCols;
//シートの値を返り値として渡す
var myCells = mySheet.getRange(1,1,nRow,nCol).getValues();
return myCells;
}
取得した該当シートのセルの値をテーブルに反映
スクリプトが返してきたスプレッドシートのセルの値は、以下の要領でテーブルのセルのtextContentを変える事で反映させています。
テーブルオブジェクト.rows[iRow].cells[iCol].textContent = 取得したセルの値;
・
ただし、プルダウンへの反映はJQueryを使っています。
$(プルダウンのID（＝行番号にしています）).closest(‘tr’).find(‘select’).val(取得したセルの値);
テーブル内にあるプルダウンを取得するのはなかなか難しく、JQueryの助けを借りたわけです。なお、
closest(‘tr’).find(‘select’) は
「指定要素に最も近い＜tr（行）＞要素に埋め込まれた＜select＞要素を探す」 という意味です。
それで見つかった要素に
val(取得したセルの値)
という文で、プルダウンの値（value属性）をセルの値にしています。
長くなりましたが、以上となります。次回の記事ではコード全体をご紹介します。
