LANG SELRCT

コードを書く場所についてはこちら

2018年1月3日水曜日

Scriptletsを使う

HTML ServiceでScriptletsを使ってHTMLとCSSとJavaScriptを別ファイルに分ける


例としてこういうボタンを作ってみる




クリックするとアラートが表示されます


このボタンを作るために
HTMLとCSSとJavaScriptをファイル毎に分けるとこのように書けます
  • HTMLファイルにボタンを置く
  • CSSファイルにスタイルを書く
  • JSファイルにスクリプトを書く


これをGoogle Apps Scriptではすべて.htmlにして以下のようなファイルを作ります
ファイル名は任意
  • HTMLファイル → index.html
  • CSSファイル → style.html
  • JSファイル → script.html


そしてindex.html の中で style.html と script.html を以下のように読み込みます

<?!= include('style'); ?>
<?!= include('script'); ?>

<?!=  ?> は Google Apps Scriptでは Force-printing scriptlets と 呼ばれています

コード.gsを以下のように書くと Scriptlets を使えるようになります



コード.gs
function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
意訳
この機能がやること
指定したHTMLファイルを表示してScriptlets(<? ?><?= ?><?!= ?>)を使えるようにする


この機能がやること
渡されたHTMLファイルの中身を返す




index.html
<!DOCTYPE html>
<html>
  <head>
    <?!= include('style'); ?>
  </head>
  <body>
    <button type="button" id="bt" class="bt">アラートを出す</button>
    <?!= include('script'); ?>
  </body>
</html>
意訳
これはHTML5文書です


styleを読み込む


ボタンを置く
scriptを読み込む





style.html
<style>
  .bt {
    color: gray;
    font-size: 12px;
    padding: 5px;
    background-color: whitesmoke;
    border: 2px solid silver;
    border-radius: 5px;
  }
</style>
意訳
ここからスタイルです

文字色はgray
フォントサイズは12px
内側の余白は5px
背景色はwhitesmoke
枠線は幅2pxで1本線で色はsilver
角丸は5px





script.html
<script>
document.getElementById("bt").onclick = bt_clicked;

function bt_clicked(){
  alert("ボタンがクリックされました")
}
</script>
意訳
ここからスクリプトです
id が bt の要素がクリックされたら bt_clicked を実行する

この機能がやること
アラートにメッセージを表示する




ファイルを分けずに書く場合


index.html の中に style も script も書くと以下のようになります

コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}



index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .bt {
      color: gray;
      font-size: 12px;
      padding: 5px;
      background-color: whitesmoke;
      border: 2px solid silver;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <button type="button" id="bt" class="bt">アラートを出す</button>
  <script>
    document.getElementById("bt").onclick = bt_clicked;

    function bt_clicked() {
      alert("ボタンがクリックされました")
    }
  </script>
</body>
</html>


補足


Scriptletsについて調べたこと
  • 通常コード.gs側に書くスクリプトを記述できる
  • google.script.runとは異なりページが読み込まれた後に再度実行できない


google.script.run を実行する方法


Scriptlets には3つの使い方があるようです

1. Standard scriptlets
  • <? var value = "hello" ?>
  • コードを実行するが画面には結果を表示されない


2. Printing scriptlets
  • <?= value ?>
  • HTMLやJavaScriptにエスケープ文字を追加して画面に表示する
    • クロスサイトスクリプティング(XSS)攻撃から保護するためのエスケープ文字を追加する


3. Force-printing scriptlets
  • <?!= value ?>
  • HTMLやJavaScriptをそのまま画面に表示する
    • クロスサイトスクリプティング(XSS)攻撃から保護するためのエスケープ文字を追加しない
  • 通常は Printing scriptlets を使う



参考

HTML Service: Templated HTML / Scriptlets
https://developers.google.com/apps-script/guides/html/templates

Separate HTML, CSS, and JavaScript
https://developers.google.com/apps-script/guides/html/best-practices

to protect against cross-site scripting (XSS) attacks
https://developers.google.com/closure/templates/docs/security

Class google.script.run (Client-side API)
https://developers.google.com/apps-script/guides/html/reference/run