Check! Google Apps Script - UIの実装は HtmlService + Polymer の利用が主流に？

こんにちは、[cloudpack][] の @dz_ こと[大平かづみ][]です。

Prologue - はじめに
===============================================

Google系のツールを作ろうと思ってドキュメンテーションを読んでいると、どうやら昨年12月に *UI周りに変更* があり、使おうと思ったAPIが *ことごとく廃止予定* なのです… (´・ω・`)

これはそもそも Google Apps のUIの作り方がガラッと変わっているのだと気付き、その方針や新しい実装方法を確認してみました。


これからの Apps Script UI の考察・まとめ
================================================

状況
-------------------------------------------
- Google Apps Script のUIに関して、 [UI service][] に代わり、[HTML service][] を利用してHTMLベースで作れるようになりました
- HTML service は遅く制限も多かったが、2014年12月11日 に改善が発表されました
- UI service の今後は…
 - UI service の[廃止予定][Apps Script Sunset Schedule]は、2015年6月30日
 - UI service の廃止後は、ドキュメントやスクリプトエディタのオートコンプリートなどから削除されます
 - 過去に UI service を使って作成したUIについては、継続して動作するようです

HTML service について
-------------------------------------------

- スピード改善された __IFRAMEサンドボックスモード__ を利用する
- HTML が利用可能
- CSS, JavaScript も利用可能 (後述)
- UI のデザインコンセプトは、Google が提唱する [Material design][] がベース
    - Material design に沿った UI実装には、[Polymer][] の paper elements が利用可能 (後述)

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

[UI service]:https://developers.google.com/apps-script/reference/ui/ "UI Service - Google Apps Script &mdash; Google Developers"

[HTML service]:https://developers.google.com/apps-script/guides/html "HTML Service: Create and Serve HTML - Google Apps Script &mdash; Google Developers"

[Apps Script Sunset Schedule]:https://developers.google.com/apps-script/sunset "Apps Script Sunset Schedule - Google Apps Script &mdash; Google Developers"


Javascript, css をインクルードするには？
--------------------------------------------

JavaScript, CSS のインクルードは、`HtmlService.createHtmlOutputFromFile()` を利用します。

- 参考: [Separate HTML, CSS, and JavaScript][]
- 参考: 
[published an alternate version of the Google Translate add-on on GitHub][]

以下は web app を作る場合のサンプルコードです。

### サンプルコードのファイル構成

- Code.gs
- index.html
- index.js.html
- index.css.html

### サンプルコード

```js:Code.gs
function doGet(request) {
  return HtmlService.createTemplateFromFile('index.html').evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}
```
```html:index.html
<!-- CSS用ファイルをインクルードする -->
<?!= include('index.css.html'); ?>

...
...

<!-- javascript用ファイルは最後にインクルードする -->
<?!= include('index.js.html'); ?>
```
```html:index.js.html
<script>
...
</script>
```
```html:index.css.html
<style>
...
</style>
```

Polymer について
---------------------------------------------

Polymer について少し調べてみました。
![20150125_polymer_001.png](https://qiita-image-store.s3.amazonaws.com/0/3812/5b69b405-0e29-cf85-845b-9733a6f3d9c4.png)

Polymer 自体は、UIコンポーネントを独自に作ることができるようです。
推奨されるインストール方法は、 [Bower][install-with-bower] を利用します。[ZIPをダウンロードして展開する方法][install-from-zip-files] もあります。
また、 Material design をベースにした UIセットが公開されています。(後述)

[install-with-bower]:http://polymer-project.org/docs/start/getting-the-code.html#using-bower "Installing with Bower - Polymer"
[install-from-zip-files]:https://www.polymer-project.org/docs/start/getting-the-code.html#using-zip "Installing from ZIP files - Polymer"


Apps Script で Material design でUI実装するには？
---------------------------------------------
[Google のサンプルコード][published an alternate version of the Google Translate add-on on GitHub] では、 Polymer で作られた `paper-xxx` というUIセット「 [Polymer paper elements][] 」を利用しているようです。
これは、 Material design をベースに作られていて、 [Material design with Polymer][] に、概要説明と各エレメントの利用方法について記載されています。[各エレメントの動作サンプル][Paper elements sampler] も参考になると思います。


[Polymer paper elements]:https://www.polymer-project.org/docs/elements/paper-elements.html "Polymer paper elements - Polymer"
[Material design with Polymer]:https://www.polymer-project.org/docs/elements/material.html "Material design with Polymer - Polymer"
[Paper elements sampler]:https://www.polymer-project.org/components/paper-elements/demo.html "Paper Elements Sampler"


### Polymer paper elements の導入方法

いろいろ検討してみたのですが、 Apps Script ではプロジェクトへのファイル追加ができない(?)ことがわかり、容易に参照できる仕組みもみつけられませんでした。最終的に [Google のサンプルコード][published an alternate version of the Google Translate add-on on GitHub] を確認してみたところ、Google App Engine においているようです。

とりいそぎは、この Google App Engine においてある Polymer コンポーネントを `import` して利用することはできました。

```html:導入のサンプルコード
<!-- ネイティブ API を利用するための polyfills をインクルードします。ファイルの先頭に記述します -->
<script src="//polymerstaticfiles.appspot.com/bower_components/webcomponentsjs/webcomponents.js"></script> 

<!-- Polymer core を import します -->
<link rel="import" href="//polymerstaticfiles.appspot.com/bower_components/polymer/polymer.html">

<!-- 必要な element を import します -->
<link rel="import" href="//polymerstaticfiles.appspot.com/bower_components/paper-button/paper-button.html">
...
```

が、人様(?)のリソースを使うのは気が引けるし、動作が遅い気がします…
かといって、Google App Engine に置くくらいなら、Bower でインストールできる別の環境でもよいわけで、この先よいソリューションが出てくるのでしょうか、結局行き詰りました… orz

ということで、ここまで読んでもらって申し訳ありませんが、しっくりくる導入方法を見つけられませんでした…。
また良い情報得たら更新いたします！


あれこれメモ
==============================================

以下は、調べていく段階で残しておきたかった訳やポイントなどのメモです。

「Apps Scriptの HtmlService のスピード改善」について
----------------------------------------------

上記のまとめは、このブログ記事「[Speeding up HtmlService in Apps Script][]」を糸口にしました。

[Speeding up HtmlService in Apps Script]:http://googleappsdeveloper.blogspot.jp/2014/12/speeding-up-htmlservice.html "Speeding up HtmlService in Apps Script'

この記事だけでは、HTMLでどうUIをどう作るの？というところまで書かれておらず、どうやら [Polymer][] をどう利用していくかについて辿り着くまでが迷いました。

### クイック和訳 (一部)

> Apps Script's HTML service is a great way to easily build user interfaces for Docs, Sheets, and Forms add-ons. However, HTML service is S-L-O-W. And until today there have been quite a few restrictions on using HTML service, including the inability to use a variety of JavaScript libraries.

&quot;Apps Script の HTML service は、 Docs、Sheets や Forms の add-on のためのユーザインタフェースを簡単に作成する良い方法です。しかし、HTML service は お・そ・い 。そして、今日まで、 HTML service を使うにあたり、様々な JavaScript ライブラリが利用不可だったりなどのかなりの数の制限がありました。&quot;

> Today, we are introducing an update to HTML service — IFRAME sandbox mode. Using this sandbox mode, you can significantly improve the performance. There are three key benefits. 

&quot;今日、私たちは HTML service をアップデートしたことを発表します。それは IFRAMEサンドボックスモードです。このサンドボックスモードを使うことで、パフォーマンスを大幅に改善できます。以下に3つの主要な利点を挙げます。&quot;

> 1.Your UI loads up much faster
> 2.Standard HTML, JavaScript, and CSS features are now available without any restrictions
> 3.It requires very few code changes: just set the SandboxMode to `IFRAME`:

1. UI のロードがより速くなります
2. 標準的なHTML、JavaScript や CSS の機能を制限なしに利用できるようになりました
3. 少々のコードを変更する必要があります: 単に `SandboxMode` で `IFRAME` を指定するだけです:

> We couldn’t resist using the new HTML service ourselves, so we’ve [published an alternate version of the Google Translate add-on on GitHub][] that uses the iframe sandbox mode as well as [Polymer][] and [material design][] concepts.

私たち自身も新しいHTMLサービスを利用することに反発することはできません、それで私たちは、[Polymer][] や [material design][] を利用し、IFRAMEサンドボックスモードを利用した [Google Translate add-on の代替え版を GitHub で公開][published an alternate version of the Google Translate add-on on GitHub] しました。

[published an alternate version of the Google Translate add-on on GitHub]:https://github.com/google/google-apps-script-samples/tree/master/translate "published an alternate version of the Google Translate add-on on GitHub"

[Polymer]:https://www.polymer-project.org/ "Welcome - Polymer"

[material design]:http://www.google.com/design/spec/material-design/ "Introduction - Material design - Google design guidelines"

「HTML service 移行のサンプルコード」について
--------------------------------------------

上記記事で挙げられている [サンプルコード][published an alternate version of the Google Translate add-on on GitHub] も確認しました。
ソースコードでは確かに Polymer を使っている模様。 Material design をベースにした Polymer paper elements を使っているのがわかります。


### クイック翻訳 (一部)

README.md

> This sample was originally designed as a quickstart for Google Docs Add-ons, and has since been updated to use [Material design][] as implemented by [Polymer][].

&quot;このサンプルは当初、 Google Docs Add-on の [クイックスタート][quickstart for docs add-on] のために設計したもので、[Polymer][] で実装される [Material design][] を利用して更新しています。&quot;

[quickstart for docs add-on]: https://developers.google.com/apps-script/quickstart/docs "Quickstart: Add-on for Google Docs - Google Apps Script &mdash; Google Developers"



Epilogue - おわりに
===============================================

一応、人様(?)のリソースを使うことで、Polymer paper elements の動作確認はできました。

ただ、資料が散在していて結構時間がかかりましたし、結局スマートな導入方法がわからずじまいでした… orz
Polymer もまだ DEV PREVIEW とのことで、安定するにはもう少しかかるのかなと、個人的に思いました。

近況
===================================================

Phalcon関連
---------------------------------------
- [爆速フレームワーク!! Phalcon PHP Framework](
http://qiita.com/dz_/items/55ae18f7fe3a873bace1 "爆速フレームワーク!! Phalcon PHP Framework")
- [Meet Volt ! Phalcon 謹製テンプレートエンジン Volt - from 第71回 PHP勉強会](http://qiita.com/dz_/items/974a90b32ba6a6e38182 "Meet Volt ! Phalcon 謹製テンプレートエンジン Volt - from 第71回 PHP勉強会")
- [Meet Phalcon! - Phalcon PHPフレームワークを Nginx on Amazon EC2 にインストール！](http://qiita.com/dz_/items/e70d61487224b854b971 "Meet Phalcon! - Phalcon PHPフレームワークを Nginx on Amazon EC2 にインストール！") ← :new: :sparkles: 

技術ブログ寄稿
-----------------------------------------

[cloudpack技術ブログ][cloudpack-blog]でも、AWS Lambda や 運用ツール Serf に関して記事を書いています。ご興味あれば読んでいただけると嬉しいです！

- <a href="http://blog.cloudpack.jp/author/oohira/" title="大平 かづみ の記事一覧 | cloudpack技術情報サイト"　target="_blank" rel="nofollow">大平 かづみ の記事一覧</a>


[cloudpack]:https://cloudpack.jp/ "cloudpack（クラウドパック） 400社を超える導入実績! EC2などAWSクラウドの導入設計、構築、運用保守サービス"
[cloudpack-blog]:http://blog.cloudpack.jp/ "cloudpack技術情報サイト"
[大平かづみ]:http://blog.cloudpack.jp/author/oohira/ "大平かづみの記事一覧"