Help us understand the problem. What is going on with this article?

GoogleAppsScriptでWebサイトを作るときに必要な基本知識

はじめに

GASでサイトを作るとき、一般的な作り方が大きく変わってしまいます。多くの場合これで戸惑ってしまうでしょう。そこでまとめてみました。

1.一番最初にサイトを表示

main.htmlというhtmlを表示します。

コード.gs
function doGet() {
  var template = HtmlService.createTemplateFromFile("main");
  return template.evaluate()
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setTitle("タイトル")
  .setFaviconUrl("アイコンのURL");
}

2.JavascriptとCSSをHTMLから分離させたい

一般的には.js.cssを生成しますがGASではちょっと違います。

main_js.html
<script>
  // Javascript
</script>
main_css.html
<style>
  /* CSS */
</style>
main.html
<?!= HtmlService.createHtmlOutputFromFile("main_js").getContent() ?>
<?!= HtmlService.createHtmlOutputFromFile("main_css").getContent() ?>

htmlファイルを複数生成してそれをくっつけるというやり方を使用することで疑似的に分けることができます。<?!= ?>タグはGASオリジナルなので次説明します。

3.特殊タグ

GASもJavascriptですがHTMLの方のJavascriptとは全くの別物です。

<? ?>はHTML内に埋め込むことでJavascriptを中に書いて処理を埋め込めます。
<?= ?>タグはGAS側の処理を実行できると同時にそのを埋め込みます。
また、<?!= ?>とすると<?= ?>と基本は同じですがその値をhtmlとして埋め込むことができます。

例えばスプレッドシートの値をHTMLに埋め込みたいときは以下のように書くことができます。

コード.gs
function getData() {
  var spreadSheet = SpreadsheetApp.openById('/*ID*/').getActiveSheet();
  // A1の値を返す
  return spreadSheet.getRange(1, 1).getValue();
}
main.html
<p>このスプレッドシートのA1の値は<?= getData() ?>だよ。</p>

下のようにタグを駆使すれば簡単にテーブルが出来上がります。

コード.gs
function rowPlusCol (int row, int col) {
  return row + "-" + col;
}
main.html
<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のときに便利です。

コード.gs
function setOptions() {
var retOptions = "";
for (var i = 0; i < 10; i++) {
  var option = "<option>" + (i + 1) + "番目のオプション" + "</option>"
  retOptions += option;
}
return retOptions;
}
main.html
<select>
<?!= setOptions() ?>
</select>

こんなに簡単に...

4. GASからHTMLへの値の受け渡し

htmlを取得する際、以下のようにすれば値が定数っぽく(?)受け渡せます。

コード.gs
function getSecondHtml () {
  var template = HtmlService.createTemplateFromFile("second");
  template.htmlUserName = "Qiita";
  // template.定数名 = 値;
  return template.evaluate().getContent();
}
second.html
<h1><?= htmlUserName ?>さん、おかえりなさい。</h1>

ほぼ埋め込みと変わらないですが、定数だと安心かな(??)
もちろん<?!= ?>も使えます。

5.HTMLのJsでGASのメソッドを使う。

埋め込みしてもいいけどおなじJavascriptだし、失敗するかも...ってとき。画面遷移とかの時にお勧め(後述)

(GASとの通信が切れると失敗してしまいます。失敗したときの処理を書くところも用意されててさらに安心)

コード.gs
function myFunction() {
  // なんでもどうぞ
}
main.html
<script>
  // 埋め込み (シンタックスハイライトがおかしい)
  var result = <?= myFunction(); ?>;

  // 埋め込まない
  google.script.run
  .withSuccessHandler(function(result) {
    // 成功 結果:result
  })
  .withFailureHandler(function(result) {
    // 失敗 結果:result
  })
  .myFunction();
</script>

長さ的にはかさばるけどJsではこっちを使った方がいい。

6.画面遷移サンプル(jQuery+GAS)

GASは動的サイト作りにくいので静的が一般的だと思います。ついでに、次の画面にデータを送りましょう。

コード.ga
  function getSecondHtml(userName) {
    var template = HtmlService.createTemplateFromFile("second");
    template.htmlUserName = userName;
    return template.evaluate().getContent();
  }
main.html
<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>
second.html
<h1><?= htmlUserName ?>さん、おかえりなさい。</h1>

<script>
function initSecond() {
  // 差し替えがおわったら最初に実行しなきゃいけないこと
}
</script>

まとめ

GoogleAppsScriptは便利な割にディレクトリというものがない、基本HTML拡張子のみ許可などの理由から動的サイトを作ることができないんですよね。でも、静的サイトにはそれなりの良さがあるので僕は我慢してますwそのときに忘れてしまうことをメモしました。とくに大事なのは特殊タグ。これさえあれば逆に書きやすいので。それではまた。
Twitter→https://twitter.com/Cyber_Hacnosuke?lang=ja

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away