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 の廃止予定は、2015年6月30日
• UI service の廃止後は、ドキュメントやスクリプトエディタのオートコンプリートなどから削除されます
• 過去に UI service を使って作成したUIについては、継続して動作するようです

HTML service について

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

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

サンプルコード

Code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('index.html').evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

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

index.html

<!-- CSS用ファイルをインクルードする -->
<?!= include('index.css.html'); ?>

...
...

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

index.js.html

<script>
...
</script>

index.css.html

<style>
...
</style>

Polymer について

Polymer について少し調べてみました。

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

Apps Script で Material design でUI実装するには？

Google のサンプルコード では、 Polymer で作られた paper-xxx というUIセット「 Polymer paper elements 」を利用しているようです。
これは、 Material design をベースに作られていて、 Material design with Polymer に、概要説明と各エレメントの利用方法について記載されています。各エレメントの動作サンプル も参考になると思います。

Polymer paper elements の導入方法

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

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

導入のサンプルコード

<!-- ネイティブ 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.

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

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.

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

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 で公開 しました。

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

上記記事で挙げられている サンプルコード も確認しました。
ソースコードでは確かに 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.

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

Epilogue - おわりに

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

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

近況

Phalcon関連

• 爆速フレームワーク!! Phalcon PHP Framework
• Meet Volt ! Phalcon 謹製テンプレートエンジン Volt - from 第71回 PHP勉強会
• Meet Phalcon! - Phalcon PHPフレームワークを Nginx on Amazon EC2 にインストール！ ←

技術ブログ寄稿

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

• 大平 かづみ の記事一覧