Google Apps Script で riot.js を使って業務アプリを作ったら めちゃくちゃ簡単だった話

ざっくりとした知識

Google Apps Script

• Google がホスティングするサーバーでAppsをJavascriptでかけるシステム。

Google Apps Script で 業務アプリを作る利点

• Googleの各種サービスに非常に簡単にアクセスできる。

riot.js とは

react.js ライク な フロントエンドを構築する javascript のライブラリ。
フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話
を読んでみよう。

boostrap とは

グリッドシステムがとても使いやすいCSSのフロントエンドのフレームワーク。

実践

Google Apps Script の基本部分を作成

[コード.js]

function doGet(){
  var pageTemplate = HtmlService.createTemplateFromFile('index');
  pageTemplate = pageTemplate.evaluate()
  pageTemplate.setSandboxMode(HtmlService.SandboxMode.IFRAME);
  pageTemplate.addMetaTag('viewport', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0');
  return pageTemplate;
}

Google Apps Script の index.html を作成。

Google Apps ScriptはSPA　(Single Page Application) 構成で、
複数ページの編成はできない。

上記のdoGetでGetアクセスがきた時、index.htmlを読み込む設定にしたのでindex.htmlを作成する。

また、すべてのファイルを **.html のファイルで入れる。

bootstrap を読み込む。

[index.html]

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

cdnで読み込むと簡単
riot.jsも読み込むが、javascriptはコンテンツの一番最後に読み込むのでここでは書かない。
同時にfont-awesomeも読み込むと激しくおすすめなので書いておく。

ファイルを分割

css, javascriptを分割しておく。
css.html, javascript.htmlを作成して、これを別途読み込むようにしておく。
このincludeはriot.jsのタグを読み込む際にも利用する。

[コード.gs]

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

[index.html]

<?!= include("css") ?> <!-- これでcss.htmlが読み込まれる-->

バックグラウンドを設定

Google Scriptではこれをやらないと一番最初の表示領域外の部分がレンダリングされないというバグが発生したことがある。
その対処のため、html直下に以下の様なdivを挟む

[index.html]

<div id="backgroundbox"> 
</div>

[css.html]

#backgroundbox{
  height:100%;
  width:100%;
  position:absolute;
  top:0%;
  left:0%;
  margin:0px;
  padding:0px;
  overflow:scroll;
}

riot.jsの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.2/riot+compiler.min.js"></script>

riotのタグファイルを作成して読み込む

riot.jsではオリジナルのタグファイルを作成して読み込ませるが、
Google Apps Scriptでは以下の様に行う。

• まず、tagファイルを **.html の名前で作成し、その中にriotのタグを作成する。

例： start.html

<start>
 <div>....</div>
</start>

• 次に、このタグファイルを読み込む。

[index.html]

<script>
riot.compile('<?= include("start") ?>')
</script>

読み込んだ「start.html」をriot.compileにかけることによって、タグが読み込まれる。

あとは

riot.mount('app', 'start')

などのようにすると、

<app></app>

に startタグがマウントされる。

めっちゃ簡単。めっちゃ楽しい！