Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

GASでデータを読むときは非同期にするのが良心的

google

shuzo-kino.hateblo.jp
の続きです。
前回は簡単のためfor文でぶん回しましたが……公式のベストプラクティスによると、
こういう場合は非同期読み込みした方がいいようです。

実際のところ

前回のサンプルからhello.htmlのみいじります。

WEBお作法にもれず、GASでもJavascriptは極力あとに出すことをが推奨されています。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  
  <p>List of things:</p>
    <ul id="data">
      <li>Loading...</li>
  </ul> 
  </body>
</html>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getData();
});

function showThings(things) {
  var list = $('#data');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}
</script>

読み込んだ状態ではLoading...とでて
f:id:shuzo_kino:20180808223508p:plain
読み込みが終わるとリスト表示されます。
イマドキですね。
f:id:shuzo_kino:20180808223652p:plain

参考もと

HTML Service: Best Practices  |  Apps Script  |  Google Developers

GAS WEBアプリにて、テンプレートを用いてデータを流し込む

google

GAS WEBアプリにて、テンプレートを用いてデータを流し込む方法です。
これでG suiteのアプリデータと連動したり、表示するデータを予め生成できたりします。

実際のところ

function doGet() {
  var template = HtmlService.createTemplateFromFile('hello.html');
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function getData(){
  return ['I', 'My', 'Me', 'Mine']
}

HTMLの方はerbめいたインライン型を採用しています。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?= 'Yeah:' ?>
    <? var data = getData();
      for (var i = 0; i < data.length; i++) { ?>
        <b><?= data[i] ?></b>
    <? } ?>
  </body>
</html>

無事アップロードされると、以下のようなのが出るはず。
f:id:shuzo_kino:20180806230208p:plain

参考もと

HTML Service: Templated HTML  |  Apps Script  |  Google Developers

【イベントログ】Maker Faire Tokyo 2018に出展してきました

イベントログ

話題の実寸大ドイツ戦車

ロボット演奏団

砂のディスプレイ

え、ポン子！？ 古のvtuverポン子ナンデ！？

子供の手押しキャタピラ

まさかのInMoov!
10才のお子さんが作ったとかで、MFT初上陸


デジタルエンジニアの為のアナログデバイス入門機
アナログディスカバリーの小型版とも言えるとかなんとか


念願のFlashAir薄い本5巻を手に入れたぞ！

Apps ScriptをWEBアプリとして公開してみる

google 
function doGet() {
  var template = HtmlService.createTemplateFromFile('index.html');
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

HTMLファイルを作成
f:id:shuzo_kino:20180802003056p:plain
名前はindexとしてみましょう。
f:id:shuzo_kino:20180802003100p:plain

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Yeah!!
  </body>
</html>

ウェブアプリケーションとして導入
f:id:shuzo_kino:20180802003112p:plain



f:id:shuzo_kino:20180803000228p:plain

「最新のコード」という奴で中身が確認できます。
私の環境では、どういうわけか定時されたＵＲＬでは一般公開が上手くいっていません
f:id:shuzo_kino:20180803000749p:plain

HtmlTemplate

google

実際のところ

一旦変数tmpにHTMLテンプレートデータを打ち込むサンプルは以下の通り。

var template = HtmlService.createTemplate('<?= foo ?>');
template.foo = 'Hello World!';
var tmp = template.evaluate().getContent()

参考もと

HTML Service: Templated HTML  |  Apps Script  |  Google Developers