はじめに
GASでサイトを作るとき、一般的な作り方が大きく変わってしまいます。多くの場合これで戸惑ってしまうでしょう。そこでまとめてみました。
1.一番最初にサイトを表示
main.htmlというhtmlを表示します。
function doGet() {
var template = HtmlService.createTemplateFromFile("main");
return template.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle("タイトル")
.setFaviconUrl("アイコンのURL");
}
2.JavascriptとCSSをHTMLから分離させたい
一般的には.jsや.cssを生成しますがGASではちょっと違います。
<script>
// Javascript
</script>
<style>
/* CSS */
</style>
<?!= HtmlService.createHtmlOutputFromFile("main_js").getContent() ?>
<?!= HtmlService.createHtmlOutputFromFile("main_css").getContent() ?>
htmlファイルを複数生成してそれをくっつけるというやり方を使用することで疑似的に分けることができます。<?!= ?>タグはGASオリジナルなので次説明します。
3.特殊タグ
GASもJavascriptですがHTMLの方のJavascriptとは全くの別物です。
<? ?>はHTML内に埋め込むことでJavascriptを中に書いて処理を埋め込めます。
<?= ?>タグはGAS側の処理を実行できると同時にその値を埋め込みます。
また、<?!= ?>とすると<?= ?>と基本は同じですがその値をhtmlとして埋め込むことができます。
例えばスプレッドシートの値をHTMLに埋め込みたいときは以下のように書くことができます。
function getData() {
var spreadSheet = SpreadsheetApp.openById('/*ID*/').getActiveSheet();
// A1の値を返す
return spreadSheet.getRange(1, 1).getValue();
}
<p>このスプレッドシートのA1の値は<?= getData() ?>だよ。</p>
下のようにタグを駆使すれば簡単にテーブルが出来上がります。
function rowPlusCol (int row, int col) {
return row + "-" + col;
}
<table>
<tbody>
<?
var rowCount = 3
var colCount = 5
for (var i = 1; i <= rowCount; i++) { ?>
<tr>
<? for (var j = 1; j <= colCount; j++) { ?>
<th><?= rowPlusCol(i, j); ?></th>
<? } ?>
</tr>
<? } ?>
</tbody>
</table>
だいぶ見づらくなりましたけどかなり便利です。<?!= ?>はselectのoptionのときに便利です。
function setOptions() {
var retOptions = "";
for (var i = 0; i < 10; i++) {
var option = "<option>" + (i + 1) + "番目のオプション" + "</option>"
retOptions += option;
}
return retOptions;
}
<select>
<?!= setOptions() ?>
</select>
こんなに簡単に...
4. GASからHTMLへの値の受け渡し
htmlを取得する際、以下のようにすれば値が定数っぽく(?)受け渡せます。
function getSecondHtml () {
var template = HtmlService.createTemplateFromFile("second");
template.htmlUserName = "Qiita";
// template.定数名 = 値;
return template.evaluate().getContent();
}
<h1><?= htmlUserName ?>さん、おかえりなさい。</h1>
ほぼ埋め込みと変わらないですが、定数だと安心かな(??)
もちろん<?!= ?>も使えます。
5.HTMLのJsでGASのメソッドを使う。
埋め込みしてもいいけどおなじJavascriptだし、失敗するかも...ってとき。画面遷移とかの時にお勧め(後述)
(GASとの通信が切れると失敗してしまいます。失敗したときの処理を書くところも用意されててさらに安心)
function myFunction() {
// なんでもどうぞ
}
<script>
// 埋め込み (シンタックスハイライトがおかしい)
var result = <?= myFunction(); ?>;
// 埋め込まない
google.script.run
.withSuccessHandler(function(result) {
// 成功 結果：result
})
.withFailureHandler(function(result) {
// 失敗 結果：result
})
.myFunction();
</script>
長さ的にはかさばるけどJsではこっちを使った方がいい。
6.画面遷移サンプル(jQuery+GAS)
GASは動的サイト作りにくいので静的が一般的だと思います。ついでに、次の画面にデータを送りましょう。
function getSecondHtml(userName) {
var template = HtmlService.createTemplateFromFile("second");
template.htmlUserName = userName;
return template.evaluate().getContent();
}
<head>
<!-- jQueryの導入これであってる？？ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div id="main">
<!-- ここに差し替える -->
</div>
</body>
<script>
function goToNext() {
google.script.run
.withSuccessHandler(function(result) {
// 差し替える
$('#main').html(result).show();
initSecond();
})
.withFailureHandler(function(result) {
// 失敗
})
.getSecondHtml("Qiita");
}
</script>
<h1><?= htmlUserName ?>さん、おかえりなさい。</h1>
<script>
function initSecond() {
// 差し替えがおわったら最初に実行しなきゃいけないこと
}
</script>
まとめ
GoogleAppsScriptは便利な割にディレクトリというものがない、基本HTML拡張子のみ許可などの理由から動的サイトを作ることができないんですよね。でも、静的サイトにはそれなりの良さがあるので僕は我慢してますwそのときに忘れてしまうことをメモしました。とくに大事なのは特殊タグ。これさえあれば逆に書きやすいので。それではまた。
Twitter→https://twitter.com/Cyber_Hacnosuke?lang=ja