PWAppsとは、最新のWeb技術を有効に活用し、漸進的（Progressive）に高度なユーザー体験を提供しようとする概念です。このPWAppsの概念を具体化する一つの手法として、「PRPL」（パープル）と名付けられた開発・提供パターンが提案されました。本稿ではこのPRPLを解説するとともに、その有効性や課題点を考察します。

本稿は、Google I/O 2016の二つのセッションに関する、解説記事です。

• Polymer and Progressive Web Apps: Building on the modern web
• Progressive, Performant, Polymer: Pick Three

PRPLの概要、PWAppsとの関係

PRPLは、次の4つの頭文字をとった、開発パターンです。

• Push
• Render
• Pre-cache
• Lazy-load

モバイルWebアプリケーションにおいて、現行のWeb開発・提供パターンが抱える課題点を解決するものとしてGoogleが今回の I/Oで提案した新たなフレームワークパターンです。

Web Componentsや、Service Worker、HTTP/2 Serveer Pushといった Webの最新技術をフルに活用し、レスポンス性の高いユーザー体験を提供しようというものです。PWAppsの具体的なパターンの一つとして位置付けられます。

PRPLについては、以降のパラグラフで詳しく解説するとして、まず最初にPWAppsについて概説します。

PWAppsが最初に発表されたのは、昨年11月。シリコンバレーGoogleオフィスで開催された Chrome Dev Summitのことです。モバイルWebアプリにメインターゲットをおき、ネイティブアプリに近いユーザー体験（オフライン動作や高速なレスポンス性）を漸進的に提供していこうという考え方です。

ここで、漸進的といっても、イマイチピンと来ない方も多いことでしょう。具体例としてService Workerのパターンについて紹介します。Service Workerの詳細ついては、HTML5 RocksやGoogleの安田絹子さんの記事（Service WorkerのChrome実装者です！）を参照ください。

Service Workerは、オフラインWebを実現する最新Web標準技術の一つ。オフライン環境でも動作するWebアプリケーションの提供を可能とします。オールドファッションなオフライン Web（Application Cache）とは異なり、柔軟なキャッシュ制御が可能となるため、多様なWebアプリケーションにオフライン Webの世界を適用することができます。ネイティブアプリのようにオフラインでも動作するWebアプリ体験を提供することが可能となるわけです。

また、Service Workerは単なるオフラインアプリの実現にとどまりません。多様なキャッシュ制御ができるということは、リソース（HTMLやJavascriptファイルなど）のロード時間短縮が可能となることを意味しており、アプリキャッシュによる高速なレスポンス性を実現します。

さらに、Service Workerは、プッシュ通知もサポートします。これにより、該当のWebサイトにアクセスしていなくても、通常のモバイルアプリのようにプッシュ通知を提供することができます。Service WorkerはモバイルアプリとWebアプリとの間の様々なギャップを埋め、より高度なユーザー体験を提供するためのAPIなのです。

では、このService Workerと漸進性との関係はなんでしょう？答えは単純で、Service Workerは、それが対応していないブラウザ環境であっても、Webサイトのサービス提供自体を止めることはありません。

したがって、非対応ブラウザ利用ユーザーには、ベースとなるWebサービスのみを提供し、対応ブラウザ利用ユーザーには、オフライン対応・高速なレスポンス性・プッシュ通知といったより高度なユーザー体験を提供します。これが漸進的なWebアプリケーションと言われる所以です。

現状のWeb開発課題を解決するPRPL

さて、本題のPRPLです。これは前述のService Workerなど、様々な最新Web技術を活用したWeb開発・提供パターンです。もちろん、PWAppsの理念に基づいています。

現状のWebアプリ開発の課題。バンドルの肥大化

最近のWebアプリ開発手法は、コンポーネント化による独立性・安定性の向上と、バンドル（単一ファイルの生成）による高速性の両者に基づいています。BabelやReact、npmといったツール類を用い、ES2015やTypeScript記法による洗練されたコンポーネント志向のコーディングを行いつつ、mochaやwebpackなどを用い、オートメーション化されたテスト駆動開発と全てのコンポーネントを集約したコンパイルの実行、バンドルを行うのがベストプラクティスとなっています。

ここで、コンポーネント化のメリットは解説不要でしょう。Webアプリの各機能要素をライブラリとしてコンポーネント開発することで、独立性・安定性・再利用性といった様々な恩恵を得ることができます。

一方で、バンドル化のメリットはなんでしょうか？答えは、ロード時間の短縮です。この点は、PRPLを理解する上で重要な知識となりますので、より詳しく紹介します。

そもそも、Webはコンポーネント志向を支えるプラットフォームであると捉えることができます。それぞれのコンポーネント要素（Javascriptライブラリ、HTMLテンプレート、CSS）は、それぞれ個別のリソースファイルとして提供され、 <script> タグや、 <link> タグなどにより個別にダウンロード、ブラウザ内で一連のプログラムとして結合・コンパイルされ、Webサービスとして提供されます。

しかし、このような開発・提供手法は甚大なユーザー体験の低下を招きます。HTTP/1.1の制約により、ファイルロード時間の増大を促してしまうのです。HTTP/1.1はリクエスト＆レスポンス型のデータ転送プロトコルとなっているため、リソースファイルのダウンロードが完了しないと、次のファイルのダウンロードを開始することができません。

この影響は無視することができないものであり、仮にブラウザとWebサーバー間の往復転送遅延時間を0.1秒とし、300個のコンポーネントリソースをダウンロードしなければならないとなると、0.1 x 300で合計30秒の待ち時間がサービス起動にかかってしまいます（実際には、平行ダウンロードにより数分の一に短縮されますが、極端な例として理解ください）。

これを解決するのがバンドルです。Webアプリ開発時に、サーバーサイドで一連のコンポーネントリソースを結合した一つのファイル（バンドル）を生成し、サービス提供時には、バンドルファイルのみをダウンロードすることで、転送待ち時間によるサービス起動時間を短縮する手法が用いられています（バンドル時には単に結合するだけでなく、ブラウザ依存の解決や、構文チェック・コードの最適化・重畳リソースの削減など、各種コンパイルプロセスが実行されます）。

しかし、これは新たな問題を引き起こしました。それはバンドルファイルの肥大化です。全てのコンポーネントが一つのリソースファイルに集約されるため、設計を怠るととんでもないサイズのバンドルファイルが生成されます。

最近では、SPA（Single-Page Application）の進展により、全てのルート（SPAに不慣れな方は、個別のWebページと考えていただいて結構です）を制御する一つのバンドルファイルが提供されることも珍しくありません。

このようなケースでは数百キロバイトのバンドルファイルとなることもチラホラ。ダウンロード時間の増大をもたらします。これは、モバイル環境のユーザーにとっては、とくに深刻な状況になりえます。

コンポーネント志向への回帰。PRPLによる解決

このバンドルファイルの肥大化問題を解決するのがPRPLです。最新のWeb技術を活用することで、バンドルを行わずとも、転送待ち時間によるユーザー体験の低下を解決することができます。

コンポーネントの定義

PRPLでは、各コンポーネントがWeb ComponentsのCustom Elementsで提供されることを前提とします。具体的には、各コンポーネントが カスタム要素としてHTMLファイルとして提供され、親となるHTMLからはHTML Importsにより各コンポーネントの利用が宣言されます。

この手法の重要な点は、標準化された手法によりコンポーネントの利用が宣言されること、これによりサーバーサイドでHTML Importsのリンクを解析し、Webサービスに必要となるコンポーネントツリーを得ることができます。これが、その後の HTTP/2 Server pushの適用につながります。

HTTP/2 Server pushの適用

先に解説した通り、HTML Importsで記述した場合、個別のリソースファイルの転送待ち時間によるサービス起動時間の増大が発生します。これを解決するため、PRPLではHTTP/2 Server pushが利用されます。

HTTP/2は、HTTP/1.1に続く最新バージョンのファイル転送プロトコル。HTTP/1.1のリクエスト＆レスポンスによる待ち時間の制約を受けずに、複数リソースファイルを効率的・スピーディーにダウンロードすることが可能になります。

HTTP/2では、ダウンロード完了を待つことなく、以降のリソースダウンロードを行うことができます。したがって、サーバーサイドでバンドルすることなく、個別のコンポーネントファイルを高速に転送することができるのです。

PRPLでは、さらなる転送時間の短縮を図るため、HTTP/2 Server pushが用いられます。先にも書いた通り、PRPLでは各コンポーネントファイルがHTML Importsの記法により親となるHTMLファイルに記載されています。したがって、最初のHTMLファイルがダウンロード完了しないと、各コンポーネントファイルのダウンロードを開始することができません。

しかし、HTTP/2 Server pushを用いると、この待ち時間すら短縮することができます。前述の通り、PRPLでは、サーバーサイドで HTML Importsを解析し、コンポーネントツリーを得ます。そして、そのコンポーネントを最初のHTMLファイルに対するレスポンスヘッダーに記述することで、HTTP/2サーバーはクライアントからのリクエストを待つことなく、以降のコンポーネントリソースをPushすることができます。

これにより、いわゆる0 RTT（Round-Trip Time）で、全てのコンポーネントリソースをブラウザに転送することが可能になります。

Service workerによるpre cache

ここまでであげた手法により、初期起動に必要となる リソースを高速に転送し、ユーザーの起動待ち時間を短縮することが可能となりました。しかし、Webサービスは、初期画面だけではありません。その後の、ユーザー操作に基づいた各画面の提供が必要となります。

例えば、ショッピングサイトでは、各商品画面や商品購入画面が必要となります。これらを形成するコンポーネントは、初期画面に含まれるものもあるでしょうし、それ以外のものも含まれるでしょう。これらのコンポーネントリソースのダウンロード待ち時間を短縮するために、PRPLではService Workerが用いられます。

PRPLでは、初期画面用のコンポーネントリソースをService Workerを用いて、キャッシュに保存します。以降の画面で該当のコンポーネントが必要になった場合は、このキャッシュが用いられるためダウンロードは発生しません。

また、初期画面を表示したあと、以降の画面で必要となるコンポーネントリソースをバックグラウンドで事前にダウンロードし、Service Workerを用いキャッシュとして保存します（pre cache）。したがって、これらのコンポーネントリソースについても待ち時間は発生しません。非常にレスポンス性の高いWebアプリをon-the-flyで提供することが可能となります。

さらにユーザー体験を向上する lazy load

最後にlazy loadです。Webアプリのリソースには優先度があります。例えば、ファーストビューには表示されない画像ファイル、初期画面のメニューコンポーネントなどは、優先度が低いリソースの典型的なものです（メニューは、ファーストビューに含まれますが、最初からは表示されてなくてもいいですよね！）。

これらのリソースについては、lazy-loadとして、優先度の低いものとして宣言してしまいます。こうすることで、ブラウザはこれらのリソースのダウンロード順番の優先度を下げ、ファーストビューに本当に必要なものを優先して表示することができるようになります。

サンプルサイト、開発ツール

PRPLを活用したサンプルサイトとして、ショッピングサイトのサンプルが公開されています。

https://shop.polymer-project.org/

Chromeのdev tool、networkタブのwarter fallパターンから、PRPLの転送フローを確認することができます。

また、開発ツールPolymer App ToolboxではPRPLの一端が提供されています。

$ npm install -g polymer-cli
$ mkdir my-app; cd my-app
$ polymer init app-drawer-template
#... write code ...
$ polymer build

HTTP/2対応ブラウザ、非対応ブラウザ用に、それぞれPRPLの概念に基づいた非bundle版、bundle版のjsが生成されます（こういったところに、PWAppsの概念が適用されています）。ただし、こちらの開発ツールでは、HTTP/2サーバーは提供されておらず、PRPL概念の一部を具体化したものとなっています。その点は、注意してください。

PRPLは即座に利用可能か？

さて、今回のGoogle I/Oで発表・提案された新たな開発・提供手法のPRPL。最新のWeb技術を活用することで、従来のWebアプリが内包する課題を解決し、モバイル環境での最高のユーザー体験提供を目指したものです。ただ、ここで気になるのが、以下の2点です。

• 「PRPLは今すぐ、production環境に適用できるものなのか？」
• 「本当にこれまでの開発プラクティスよりも優れているのか？」

この点について、（あくまで）個人的な見解を述べ、本稿を締めたいと思います。

まず結論から言うと、「Productionでの利用は、まだ早い」 というのが僕の率直な感想です。

その理由として、以下の点があげられます。

まだHTTP/2の環境が整備されていない

HTTP/2は、最近標準化が完了したばかり、実装はまだ完全には追いついていません。実際、apahceやnginxではHTTP/2の基本機能は搭載されているものの、Server pushまだ未サポートです。

また、これらの実装が完了したからといって、それがすぐ Productionに適用できるというものではありませんし、AmazonのELBやHerokuなどIaaS/PaaS事業者側のサポートも必要となるでしょう。WebSocketがそうであったように、サーバーサイドのエコシステムが整備されるのにはしばらく時間が必要です。

まだ開発者フレンドリーではない

開発ツールPolymer App Toolboxを見てみてもわかりますが、PRPLの概念はnpm + webpackのような開発者フレンドリーな開発手法とは相性が悪いです（実際、bowerが用いられています）。

Webアプリのコンポーネント開発において、Javascript部分が占める割合は非常に大きく、これをbowerベースで行い、いちいちHTML Importsで記述することは大変なストレスとなります。やはり、npm + webpackでストレスレスにコーディングしたい…、というのがJSエンジニアの率直な意見でしょう。

cacheとの相性が悪い

PRPLで用いられているHTTP/2 Server pushですが、Webのキャシュと非常に相性が悪いことが知られています。基本的に、ブラウザの状態と無関係にリソースをPushする仕組みのため、ブラウザにキャッシュがあろうがなかろうが、リソースをPushしてしまいます。

したがって、「初回の起動である」、「常にダイナミックに変動するリソースである」の場合を除いてHTTP/2 Server pushの効果は限定的ですし、逆に負の効果をもたらします(キャッシュがあるのであれば、リソースをPushする必要はない)。バンドルのサイズ肥大化の問題も、persistant cache制御さえちゃんとしてやれば、初回起動時およびバンドル変更時の問題だけになります。

最後に

最後にネガティブな意見を述べましたが、僕はPRPLの考えには基本的に賛同しています。Googleは常にWebをより良いものにするため、努力を続けている企業。その姿勢の表れであると感じています。

本稿で述べたPRPLの限界点は、現状のツール環境に依存するところが大きく、新たなツールが登場することでこの状況は一変することでしょう（本来、ツールは概念の一部を具現化するものであって、それをもって概念全体を評価されるべきものではありません）。

さまざまな概念やツールが融合し、開発者がフィードバックしていくことで、よりよい形が作り上げられていく。これまでのWeb開発の進化がそうであったように、そのような文脈の中でPRPLや、それのベースとなっているPWAppsが進化していくことでしょう。

Googleが開発するWeb ComponentsのライブラリPolymerのバージョン1.1が、2015年8月13日にリリースされました。本記事では、Polymer v1.1のAPIの主要なAPIを解説しつつ、その参考情報を紹介していきます。

また、この記事は「Web ComponentsのこれからーPolymer 0.8、X-Tag、Brick、Bosonic」を事前に読むと理解が深まりますが、これからPolymer v1.1を始めてみるということであれば、本記事単体でも参考にしてもらえればと思います。

Polymer v1.1までの変更点

v0.5からv0.8にかけての差分は前回の記事にて紹介しましたが、その1週間後にv0.9がリリースされ、さらに2週間後にv1.0がリリースされています。

• 0.8 released! – polymer blog
• 0.9 released! – polymer blog
• 1.0 – polymer blog
• 1.1 Release – polymer blog
• Migration guide

v0.8からv1.0にかけてAPIに変更が加えられていますが、v1.0からv1.1へかけては破壊的なAPIの変更はありません。今回は以降で、Polymer v1.x系の主な機能と、参考リソースの紹介をしていきます。

カスタム要素の登録

<dom-module> に <template> と <script> を記述して宣言します。 <script> 内で実行しているPolymer()関数は、 <dom-module> に指定しているID（カスタム要素の名前）を渡し、その他の引数でカスタム要素の振る舞いを決定します。返り値にはカスタム要素のコンストラクタが返却されるので、それを使ってカスタム要素のインスタンスを生成することも可能です。

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">

  <template>
    <style>
      div { color: red; }
    </style>
    <div>Shadow DOM in My Element</div>
  </template>

  <script>
    var MyElement = Polymer({is: 'my-element'});
  </script>

</dom-module>

v0.8との違いは、カプセル化されるカスタム要素のスタイルを記述する <style> と、Polymer関数を実行する <script> を <dom-module> の中に書くようになった点です。v0.5までの <polymer-element> を彷彿させます。v1.1では <template> の外側に <style> を書いてもスタイルが適用されますが、パフォーマンスは悪く推奨されません。

カスタムコンストラクタ

カスタム要素のコンストラクタを自前で書きたい場合は、Polymer()関数の引数として、factoryImplキーワードと共にコンストラクタ関数を渡します。カスタムコンストラクタによって、引数を渡すことが可能になります。

<script>
  var MyElement = Polymer({
    is: 'my-element',
    factoryImpl: function(foo, bar) {
      // custom constructor is called
    }
  });

  var myInstance = new MyElement('foo', 100);
</script>

このfactoryImplはコンストラクタ関数（ここではMyElement）をnewキーワードと共呼び出した場合のみ実行され、HTMLドキュメントで <my-element> が評価された場合には呼ばれません。

ネイティブ要素の継承

ネイティブ要素を継承したカスタム要素を作る場合は、Polymer()関数の引数にextendsキーワードに継承するネイティブのHTML要素を指定します。v0.5まではカスタム要素の継承もサポートされていましたが、Custom Elementsの仕様としてdocument.registerElement()にカスタム要素名を渡せないのと同様、ブラウザネイティブの要素（inputやbuttonなど）のみを指定できるようになっています。

<script>
  var MyElement = Polymer({
    is: 'my-element',
    extends: 'button'
  });
</script>

ネイティブ要素を拡張するカスタム要素を使うには、extendsに指定した要素にカスタム要素名をis属性に指定します。JavaScriptからインスタンスを生成する場合は、コンストラクタをnewするか、document.registerElement()の第二引数にカスタム要素名を指定してください。

<button is="my-element">My Element</button>

<script>
  console.log(new MyElement() instanceof HTMLButtonElement);
  // => true
  console.log(document.createElement('button', 'my-element') instanceof HTMLButtonElement);
  // => true
</script>

ライフサイクルコールバック

カスタム要素には4つのライフサイクルが存在し、Polymerでもそれらをハンドリングできます。ライフサイクルについてはWeb Componentsを構成する4つの仕様 ー Web Components基礎編という記事の「カスタム要素の挙動を設定する」をセクションにて解説しています。ブラウザネイティブではcreatedCallback・attachedCallback・detachedCallback、attributeChangedCallbackの4つが定義されていますが、PolymerではCallbackが省略されている他、readyというShadow Root配下のDOM構築が完了したタイミングで発火されるハンドラも定義できるようになっています。

<script>
  Polymer({
    is: 'my-element',
    created: function () {
      console.log('my-elementが生成されました');
    },
    attached: function () {
      console.log('my-elementがHTMLドキュメントに追加されました');
    },
    detached: function () {
      console.log('my-elementがHTMLドキュメントから切り離されました');
    },
    attributeChanged: function (name, type) {
      console.log('my-elementの' + name + '属性が変更されました');
    },
    ready: function () {
      console.log('my-elementのDOM構築が完了しました');
    }
  });
</script>

ハンドラの実行順序をまとめると以下のようになります。

1. createdコールバック
2. readyコールバック
3. factoryImplコールバック
4. attachedコールバック
5. (detachedコールバック)

behaviorsを使った振る舞いの制御

カスタム要素の振る舞いを制御するには、これまでのようにPolymer()に直接ハンドラなどを指定するほか、behaviorsにプロトタイプとなるようなオブジェクトを渡すことでも可能です。オブジェクトで定義できるのは先程登場したライフサイクルコールバック、後述するデフォルト属性やプロパティ、オブザーバー（observer）、イベントハンドラの登録（listener）です。

<script>
var MyBehavior = {
  ready: function() {
    console.log('DOM is ready');
  }
};

Polymer({
  is: 'my-element',
  behaviors: [MyBehavior]
});
</script>

見ての通り、behaviorsにはオブジェクトを配列で指定することが可能です。複数指定されてハンドラが重複する（例えば、複数のオブジェクトでreadyが定義されている）場合は、配列上で後から出現するオブジェクトが優先されます（つまり右辺が優先されます）。

カスタム要素のデフォルト属性

カスタム要素のデフォルト属性は、引数のhostAttributesに定義します。hostAttributesに指定した属性とその値は、カスタム要素の属性のデフォルト値になります。

<script>
  var MyElement = Polymer({
    is: 'my-element',
    hostAttributes: {
      role: 'navigation'
    }
  });
</script>

この時 <my-element> は、デフォルトで <my-element role="navigation"></my-element> として評価されます。

カスタム要素のプロパティ

カスタム要素のプロパティは、引数のpropertiesに定義します。プロパティ名をキーに、typeやvalueなどの属性を渡すことでプロパティの特徴を定義します。簡略化された形としては、propertyName: typeという指定も可能です

<script>
  Polymer({
    is: 'my-element',
    properties: {
      foo: {
        type: Number,
        value: 0,
        observer: 'fooChanged'
      }
      bar: {
        type: String,
        computed: 'computeBar(foo)'
      }
    }
    fooChanged: function(newValue, oldValue) {
      // ...
    },
    computeBar: function(foo) {
      return String(foo + 100);
    }
  });
</script>

ここではfooとbarの2つをmy-elementのプロパティとして定義していますが、それぞれobserverとcomputedという属性を渡しています。

オブザーバー関数を指定するobserver

observerはプロパティの変更を監視するオブザーバー関数を指定する属性です。ここではfooChangedという関数を定義しているので、関数名を文字列で渡しています。v0.5まではpropertyNameChangedといったような命名規則を用いてオブザーバー関数を定義していましたが、v1.1においてその機能はありません。監視する関数には引数として、変更後の値（newValue）と変更前の値（oldValue）が引数と渡されるので、前後値を利用することができます。

コンピュート関数を指定するcomputed

computedはプロパティの値を動的に算出するための関数を指定する属性です。observer同様に関数名を文字列で渡しますが、ここではbarプロパティに対しcomputeBar(foo)という値を渡しています。この記述によってcomputeBar関数にはfooプロパティが引数として渡され、barの値は関数が返却する値を参照します。

HTML属性に反映するかどうかを指定するreflectToAttribute

プロパティの値に変更があっても通常はHTML属性に反映されませんが、reflectToAttributeにtrueを指定するとHTMLの属性も更新されるようになります。

<script>
  Polymer({
    is: 'my-element',
    properties: {
      foo: {
        type: String,
        reflectToAttribute: true
      }
    },
    ready: function() {
      this.foo = 'Hello!';
      // this.setAttribute('foo', 'Hello!');と同等の振る舞いが得られる
    }
  });
</script>

この時、readyの関数が実行されたタイミングで <my-element></my-element> は <my-element foo="Hello!"></my-element> となり、setAttribute('foo', 'Hello!')を実行したときと同様の振る舞いが得られます。

イベントハンドラの登録

v0.5以前まではイベントハンドラの登録をブラケットを使って宣言的に定義していましたが、v1.1からはブラケットを使わなくなった他、listenersプロパティにイベントとそのハンドラをハッシュ形式で定義が可能です。

<dom-module id="my-element">

  <template>
    <button on-click="clickHandler">Button</button>
  </template>

  <script>
    var MyElement = Polymer({
      is: 'my-element',
      listeners: {
        'tap': 'myElementTapHandler'
      },
      clickHandler: function(e, detail) {
        // button click handler
      },
      myElementTapHandler: function(e, detail) {
        // my-element tap handler
      }
    });
  </script>

</dom-module>

ジェスチャーイベントのハンドリング

先程のサンプルでtapというDOMネイティブには存在しないイベントに対してmyElementTapHandlerというハンドラを登録していますが、Polymerは自前で実装するにはやや面倒な4つのイベントをサポートしています。

• down: マウスや指によって要素が押下された時
• up: マウスや指が押下後に離された時
• tap: downとupが連続して発生した時
• track: マウスや指が押下されたまま移動した時

それぞれのイベントのハンドラに渡されるイベント引数のdetailプロパティには様々な付加情報が渡されます。詳しくは公式ドキュメントを確認してください。

カスタムイベントの発火

fireという関数を実行することで、ホスト要素を呼び出し元オブジェクトとしてカスタムイベントを発行することが出来ます。引数にはカスタムイベント名と、ハンドラのdetailプロパティに渡すデータを指定します。

<dom-module id="my-element">

  <template>
    <button on-click="clickHandler">Button</button>
  </template>

  <script>
    var MyElement = Polymer({
      is: 'my-element',
      clickHandler: function(e, detail) {
        this.fire('foo', {
          bar: 100
        });
      }
    });
  </script>

</dom-module>

<my-element></my-element>

<script>
  var myElement = document.querySelector('my-element');
  myElement.addEventListener('foo', function(e) {
    console.log(e.detail.bar);
    // => 100
  });
</script>

ここでは <my-element> のボタンをクリックした時にfooというカスタムイベントを発行し、付加データとして{ bar: 100 }という値を渡しています。

データバインディング

データバインディングは以前と同様にカーリーブラケット{{}}およびスクエアブラケット[[]]で指定します。ブラケットではプロパティおよびコンピュート関数を評価することが可能で、v0.5まで有効だった演算子などはサポートされていません。

<dom-module id="my-element">

  <template>
    <input value="{{foo}}" type="text">
    <input value="[[bar]]" type="text">
  </template>

  <script>
    Polymer({
      is: 'my-element',
      properties: {
        foo: String,
        bar: Number
      }
    });
  </script>

</dom-module>

ここでは<my-element>のプロパティとして定義しているfooやbarを、 <input> のvalueにバインディングしています。これによってfooやbarの値に変更があると、<input>に自動で反映されます。

カーリーブラケット{{}}とスクエアブラケット[[]]

カーリーブラケット{{}}とスクエアブラケット[[]]の差は、データバインディングの方向が一方向に制限されるかどうかの違いです。{{}}のデータバインディングは双方向か一方向かが記述によって変わりますが、[[]]は一方向のみであり参照しているプロパティを受け取るのみです。

カーリーブラケット{{}}で指定した際にバインディングの振る舞いを決定するのは、プロパティのnotifyフラグとreadOnlyフラグです。

<script>
  Polymer({
    is: 'my-element',
    properties: {
      foo: {
        type: String,
        notify: true
      },
      bar: {
        type: Number,
        readOnly: true
      }
    }
  });
</script>

notifyフラグはプロパティの変更をホスト要素に通知するかどうか、readOnlyフラグはプロパティが読み取り専用かどうかを決定します。この例ではnotify: trueなので、 <my-element foo="{{value}}"></my-element> としたときにfooに変更があるとvalueへ値が反映されます。

ネイティブ要素との双方向データバインディング

ネイティブ要素との双方向データバインディングも target-prop="{{hostProp::target-change-event}}" という構文でサポートしています。ここでは<input>に入力された値に括弧を付与して<div>に埋め込んでいます。

<dom-module id="my-element">

  <template>
    <input value="{{foo::input}}" type="text">
    <div>{{computeBar(foo)}}</div>
  </template>

  <script>
    Polymer({
      is: 'my-element',
      properties: {
        foo: {
          type: String
        }
      },
      computeBar: function(foo) {
        return `「${foo}」`;
      }
    });
  </script>

</dom-module>

入力された値を参照するタイミングはinputイベントで、バインドするホストプロパティはfooなので、 input value="{{foo::input}}"> になります。これによって、ネイティブ要素のプロパティからカスタム要素へのプロパティへのデータバインディングが行われます。

属性とのデータバインディング

属性に対してデータをバインディングするには以下のように$=を使い、ブラケット{{}}にはこれまでと同様にカスタム要素のプロパティやコンピュート関数を記述します。

<template>
  
  <!-- Attribute binding -->
  <my-element selected$="{{value}}"></my-element>
  <!-- results in <my-element>.setAttribute('selected', this.value); -->

  <!-- Property binding -->
  <my-element selected="{{value}}"></my-element>
  <!-- results in <my-element>.selected = this.value; -->
  
</template>

プロパティとのデータバインディングには <my-element foo={{value}}> と記述することでdocument.querySelector('my-element').foo = valueを振る舞いますが、HTMLの属性にバインディングするためには <my-element foo$={{value}}> のように$=で指定することで document.querySelector('my-element').setAttribute('foo', value) が動的に実行されます。

ネイティブの属性であるclassやstyleには、次のように$=でバインディングすることが可能です。

<!-- class -->
<div class$="{{foo}}"></div>

<!-- style -->
<div style$="{{background}}"></div>

<!-- href -->
<a href$="{{url}}">

<!-- label for -->
<label for$="{{bar}}"></label>

<!-- dataset -->
<div data-bar$="{{baz}}"></div>

HTML上の属性名とDOMのプロパティ名が異なる場合には留意が必要でしょう。data-*の場合、data-fooへの実際のプロパティはelement.dataset.fooとなるため、data-foo={{bar}}ではバインディングできず、element.setAttribute('data-foo', bar)となるdata-foo$={{bar}}を使う必要があります。

Templateのリピート

配列のデータは <template is="dom-repeat"> を使ってリピートし、要素ひとつひとつを参照することが出来ます。以下はis="dom-repeat"を使って配列を展開しているサンプルです（公式より引用）。

<dom-module id="employee-list">

  <template>
    <div> Employee list: </div>
    <template is="dom-repeat" items="{{employees}}">
      <div># <span>{{index}}</span></div>
      <div>First name: <span>{{item.first}}</span></div>
      <div>Last name: <span>{{item.last}}</span></div>
    </template>
  </template>

  <script>
    Polymer({
      is: 'employee-list',
      ready: function() {
        this.employees = [
          {first: 'Bob', last: 'Smith'},
          {first: 'Sally', last: 'Johnson'}
        ];
      }
    });
  </script>

</dom-module>

<template is="dom-repeat"> に加えて展開したい配列をitems属性で指定します。配列の要素の数だけ <template > の内部が繰り返されますが、この中では要素を表すitemと配列のインデックスを示すindexという二つの変数を参照できます。

itemsで参照している配列に変更を加える場合には、インスタンスの関数をそのまま使うのではなくPolymerのインスタンスが備えている専用の関数を使います。例えばこのサンプルのemployeesに値を追加する場合は、 this.employees.push({...})ではなくthis.push('employees', {...})とする必要があります。pushの他にはpop、splice、shift、unshiftも同様です。これらの関数を使わないと、配列への変更が検知されずに再描画されません。

Polymerのデータバインディングの更なる詳細についてはData binding – Polymer 1.0を参照してください。

Polymer内部で行うDOM操作

<dom-module>内部のDOMの操作を行う場合は、Shadow RootのDOM APIではなく専用のインターフェースが用意されています。

IDが与えられている要素の参照

要素に対してIDが与えられていると、this.$.idという形で自動的に参照が生成されます。これはv0.5まで存在していた機能なので、馴染みのある人もいるかと思います。

<dom-module id="my-element">

  <template>
    This is my-element <span id="foo"></span>!
  </template>

  <script>
    Polymer({
      is: 'my-element',
      ready: function() {
        this.$.foo.textContent = this.foo;
      }
    });
  </script>

</dom-module>

また、動的に生成された要素を参照する場合はthis.$$(selector)という関数が用意されています。これにCSSセレクタを渡すと、セレクタにマッチする最初の要素が返却されます。

Polymer.dom()を使ったDOM操作

Polymer内部のDOM操作を行う場合は、Shadow Root配下の要素のDOM APIを直接実行するのではなく、Polymer.dom()という専用のAPIが用意されています。Polymer.dom()の引数にはNodeを渡し、返却されるオブジェクトには、ネイティブのDOM APIと同等の振る舞いをするAPIが用意されています。いずれもDOMのAPIと同じ命名と引数で設計されていますが、サブセットとして用意されているに過ぎず、完全に互換性があるわけではないことに注意してください。

親子関係

• Polymer.dom(parent).childNodes
• Polymer.dom(node).parentNode
• Polymer.dom(node).firstChild
• Polymer.dom(node).lastChild
• Polymer.dom(node).firstElementChild
• Polymer.dom(node).lastElementChild
• Polymer.dom(node).previousSibling
• Polymer.dom(node).nextSibling
• Polymer.dom(node).textContent
• Polymer.dom(node).innerHTML

クエリ

• Polymer.dom(parent).querySelector(selector)
• Polymer.dom(parent).querySelectorAll(selector)

コンテンツの参照

• Polymer.dom(contentElement).getDistributedNodes()
• Polymer.dom(node).getDestinationInsertionPoints()

属性の操作

• Polymer.dom(node).setAttribute(attribute, value)
• Polymer.dom(node).removeAttribute(attribute)
• Polymer.dom(node).classList

Polymer.domから行う追加や削除といったDOM操作は、パフォーマンスを考慮し遅延して実行するようになっています。そのため、操作後のノードの座標やgetComputedStyle()を使ったスタイルの取得をする場合は、操作をPolymer.dom.flush()を使って適時実行し、反映します。

カスタム要素のスタイリング

CSSのスタイリングは、これまでと同様にShadow DOMをスタイリングする記法が適用されます。PolymerはShadow DOMの実装状況で振るまいが変わらないように、Shady DOMという軽量なポリフィルを採用しているため、CSSセレクタをネイティブと同様に書くことはできません。

例えば、<content>を参照する::contentセレクタです。Shadow DOMがブラウザネイティブに実装されていれば単一でも評価されるはずですが、Shady DOMの互換性として::contentセレクタには何らかの親セレクタを指定する必要があります。これは ::content .bar と記述された場合にShady DOMで実現しているスコープを再現できなくなるためです。この場合、 .foo > ::content .bar と書く必要があり、実際には .foo > .bar のように評価されます。

<dom-module id="my-element">

  <template>
    <style>
      :host {
        display: block;
        border: 1px solid red;
      }
      .foo > ::content .bar {
        background: orange;
      }
    </style>

    <div class="foo"><content></content></div>
  </template>
  
  <script>
    Polymer({
      is: 'my-element'
    });
  </script>

</dom-module>

まとめ

Polymer v1.1の主な機能について解説しました。v0.5 → v0.8 → v0.9 → v1.0…とAPIに多くの変更が加えられてきましたが、メジャーリリースになったことで、これまでのような大きな変更は（ おそらく ）なくなるでしょう。

最後に、今年9月の14日〜15日にオランダのアムステルダムにて開催されたPolymer Summit 2015にて、参考リソースが多く公開されたのでそれを紹介します。

Polymer Codelabs

Polymer Codelabsは、Polymerを使ったアプリケーションを作成していくチュートリアル集です。Polymer Summitに合わせて11個のチュートリアルが公開されています。こちらも英語ですが、環境のセットアップから丁寧に解説されています。

セッション動画リスト

Polymer Summit 2015の各セッションはすべて以下のチャンネルで配信されていますので、興味のある方は是非チェックしてみてください。

本記事は、「Polymer 1.0最新情報」の後編になります（前編はこちらから）。Google I/OでPolymer 1.0が取り上げられた「Polymer and modern web APIs: In production at Google scale」のセッションをレポートします。Polymerの最新情報や活用事例、Polymer Catalog、Polymer Starter Kitなど、盛りだくさんのこのセッションの翻訳と解説を前後編に分けてお伝えします。

後編となる本記事では、「ライブサイトへの適用例（後半）」、「Polymer Starter Kitとは」を解説します。

ライブサイトへの適用例（後半）

前編に引き続き、Polymerのライブサイトへの適用例の後半です。コードを交えながら具体的に解説していきます。

Google I/O Web App

このアプリは社内ではIOWA（アイオワ）と呼んでいる。IOWAはModen Web Platformでの良い実装例で、デスクトップでもモバイルでも動作して、コンテンツが最初に読込まれるときマテリアルデザインのエフェクトと共に表示され、ページとコンテントの間の表示での大きなエフェクトついているし、デスクトップでもモバイルでもビデオをクリックすると全画面になる。Webアプリでここまでネイティブアプリ感が出せている。

そのIOWAには想像できる新しいWeb APIのほとんど全てが使われている。

ここからIOWAのポイントは以下です。

• バックエンド：広範囲に渡ってAppEngine上でGoを使用
• Material Designの実装に関して：Web Animation、Promiseで各種エフェクトを実現
• 開発したチーム：ソフトウェア エンジニアではなく、Developer Relationsチーム
• ツール：誰でも使うことのできる3rdパーティ製のツールを使い、Googleの特別なツールは使っていない

ここから実装方法に関しての説明になります。

Templateを使ったSPA（シングル・ページ・アプリケーション）の実現

Google Santa Tracker 2014ではURLルーティングを行うことでSPAを実現していましたが、IOWAではTemplateとHTML Importsを使って動的にコンテンツを読み込でいるそうです。

1. 異なるid属性を付けた複数のTemplateを1つのページに配置
2. ref属性を持ったTemplateタグを配置
3. ref属性に予め埋め込んだTemplateのidどれかを指定

すると、指定したidのTemplateのコンテンツがTemplateの中に差し込まれます。IOWAは予め複数ファイルでページをTemplateとして用意して、必要に応じてそれらのファイルを動的に読み込む（HTML Imports）ことでSPAが実現されている、とのことでした。

Material Designの実現

ビデオ等は遅延ゼロの理想状態でMaterial Desginの動きは説明されているが、Webアプリではそうはいかないので工夫が必要です。IOWAではWeb Animation、Promiseを使い、ロジカルなアニメーションのシーケンスを作ることで実現しているそうです。

1. Promiseが”page-transition-start”のEventを発行し、ページトップ部分の色を変更するのと同時にコンテンツをページ表示領域から外側にスライドしフェードアウトさせる
2. Import Page Method（TemplateとHTML Importを使ったSPA実現方法）を使ってページのコンテンツをAjaxで取得する
3. コンテンツの準備が完了したら、ページ全体のアニメーションを実行する。このアニメーションは基本的にコンテンツを200ms以下の時間でページにスライドさせていて、パララックスのエフェクトもかけている
4. 動的なページ読み込みとアニメーションが完了した時点で、例えばJavaScriptの実行のようなページを構成するために必要な処理が実行できるようになる

このように、PromiseとWeb Animation APIをWrapして利用することでCSSのアニメーションが動いたり、ネットワーク接続が発生したりと非同期な処理が起こっている状態でも、ロジカルな同期が可能です。

オフライン ファーストの実現

IOWAで注目すべき機能で、Service Workersを使って実現している。Service WorkersのおかげでWeb開発者が実現できることの代表例は以下です。

• ページキャッシュ
• プッシュ通知（Push Notification）
• バックグラウンド・シンク
• ネットワークリクエストの横取り

IOWAではこれらの機能を使い、アクセス解析を行うGoogle Analyticsへのリクエストをオンライン時はリアルタイムに、オフライン時は横取りをして一旦IndexDBに蓄積。オンラインになった段階で再現をしてオフライン時のアクセス解析を可能にしています。一般的にも、こうすることで重要なインサイトを逃さず見ることができるでしょう。

オフライン時の動作の実装で注意した点

Webサイトがオフラインでも動作することはユーザは体験したことがないので、例えばオフラインになったときにアプリケーションを終了されてしまうことを防いだりします。またオフライン動作することに驚かれないために、IOWAでは「オンラインからオフライン」に遷移した時にアプリケーション側で何が起こっているかユーザが把握できるよう、トースト（自動的に消える小さなお知らせエリア）で状態を知らせることができるように注意して実装してます。

実際に以下のリストのような事象が起こった場合にトーストを出しています。

• 初回アクセス時：次回からは最初からオフラインで動作します
• オフライン時の情報情報更新：オンラインになった時に情報をサーバに通知します

オフラインとは電波（Wi-Fi、3G、4G等）の状況が悪いとき、Airplaneモード等でインターネットにつながらなくなった状態のことを指しています。

プッシュ通知(Push Notifications)

プッシュ通知はNativeなアプリでは当たり前になっている機能ですが、Webの世界では真新しい機能になります。もちろん、アプリが開いていない状態でも通知を受けることが可能です。

プッシュ通知も新しい機能なので、オフライン時の動作と同じく状況をトーストで通知しています。このプッシュ通知を動作させるためには、ユーザが通知を受ける/受けないを選択することに加えて、通知を受け取る許可をユーザがブラウザに対して行う必要があります。

プッシュ通知を行う目的はWebサイト/アプリへの再訪にあります。IOWAではその効果測定のためにプッシュ通知からどれだけユーザが実際にサイト/アプリに再訪してくれたかをAnalyticsを利用して計測しています。

プッシュ通知の送信は一見難しそうですが、Elementがあるので心配しないでください。実際にはこのような形で実装することができます。

プッシュ通知を使う目的はWebサイト/アプリへの再訪です。なのでIOWAではプッシュ通知からどれだけユーザが実際にサイト/アプリに再訪してくれたかの計測をAnalytics利用して行っています。

ここまでお話してきた、オフライン動作の実現、Service Workers、プッシュ通知に関してもElementが存在していて、Platinum Elementsに実装しています。

リンク：Platinum Elements（英語）

最後に「6ヶ月の出来事のお話しだったので、駆け足の説明で盛りだくさんになってしまった。紹介した2つはライブサイトも動作しているし、ソースコードも公開しているので、詳しくはそちらをご覧ください」と結びました。

(Speaker: Eric Bidelman)

リンク：Google I/O web app [ライブサイト] [コード]

Polymer Starter Kitとは

「PolymerのDeveloper Toolを担当しているAddy Osmaniです」と自己紹介から始まりました。

そして間髪入れず、最近の出来事からの例えを交えて「物事の筋道にはステップを踏まないと思い通りのモノは作れない」ということの説明が始まりました。

Addyの友達に赤ちゃんが生まれたそうで、赤ちゃんのスケッチしてプレゼントしようと考えたそうです。そしてスケッチ方法をGoogle.comで検索をすると「まずは丸を書くことが最初のステップ（Step1）」という結果だったそうです。「実現可能性を確信したけど、次のステップを探した結果がStep2でした。このStep1からStep2への飛躍は非常に大きく、これを目標に続けると最終的にはStep1.5のようになることも少なくない」と続きます。

Polymerはまさに例に挙げたStep1からStep2へ移行しようとしている段階なので、これを避けるべくPolymer Teamは「Polymer Starter Kit」で、この状況の回避を行うとのこと。「Polymer Starter Kit」は、過去1年間でPolymerを使ったプロジェクトGoogle I/O App、Web Starter Kit、Google Santa Trackerを見返して、そこから得られた知見を1つにまとめた結果です。

ここから「Polymer Starter Kitがどのようなものなのか？」の説明に入ります。

Material Design

非常に高いレベルでMaterial Designをサポートしています。Toolbar，Header-Panelのようなモバイルアプリを開発するときに必ず必要になるパーツ、URLルーティングや複数の画面サイズにフィットするような仕組みもサポートしている。CSS Custom Propertyを使って、アプリ全体のテーマカラーを数行のコードで変更する可能で、非常にパワフル。

モバイルWebアプリ開発ではテーマカラーの変更、クロスデバイス（Android、iOS、Windows Phone）でホーム画面へのアイコンリンクの準備も最初からできているので、再訪へとつなげられる。

Adaptive UI

今回のI/OでMaterial Design Teamが発表したガイドライン。これはデバイスによってインタラクションをどう作り込むのがよいのかのガイドラインですが、Polymer Starter Kitはこれらを全てを含んでいる。あくまでもこれらは1つの例でしかないので、必要に応じてカスタマイズすることも可能。

App Template

Navigation Card Layout、住所録のようなアプリに最適なNavigation List Detail Layout、List Card Over Layout(Wider Card View Layout)などが用意されていて、すぐに利用できるLayoutのセットとなっている。

Offline-first (in your app)

Ericもオフラインの重要性を訴えた通りで、またRob Dodsonも「2015年は、もしアプリがオフラインをサポートしていないのであれば、それは本当の意味でのモバイルWebエクスピリエンスを提供できていない、という考え方が現実になるだろう」と言っています。良いことにPolymer Starter Kitはデフォルトでオフライン ファーストになっているので何の設定をすることもなくAirplaneモードや、オフラインになったときにもアプリに含まれる全てのページにアクセスすることが可能。

Service Workers

素晴らしい機能だけど、導入するには多くの設定が必要です。ですが、

> There is an element for that!

で、Polymer CatalogにあるPlatinum Elementsを使えば、Service Workersを使ったキャッシュ機能を簡単に実装することができます。

Service Workersのセット・アップの例です。Service Workersの登録し、キャッシュのストラテジを数行で設定している。例では「Network First」をキャッシュのストラテジとして、キャッシュしたいファイル名を予め宣言しています。

Production-ising Cache

ユーザにできるだけ小さく、できるだけ速いアプリを提供するという意味ではビルドプロセスはとても重要。Polymer TeamはストリーミングビルドシステムのGulpが大好きなので、Polymer　Starter Kitに採用している。

web-component-testerなどのクオリティテスト、Vulcanize等のミニフィケーション等が可能。Browser Syncを使っているので、アプリに変更を加えるとその変更はクロスデバイスで伝搬され（クリック/タップ、スクロールも含む）全てのデバイスで一度に確認することも可能。

実際に「Polymer Starter Kit」を適応して「Paper Reader」という名のRSSリーダアプリを作ったお話は変わります。

使った技術の一覧で、これらの1つ1つにElementが存在しています。

• 記事をGoogle Feedから取得（RSS、Atom、Media RSS feedに対応）
• 既読/未読の管理にはFirebaseを利用
• オフラインでの動作
• 新着のプッシュ通知

まとめると、Polymer Starter Kitは大きく分けて、以下の4つを含んでいる。

• Components
• Layout
• Theming
• Build tools

「これらのElementやPolymer Starter Kitを使って、何を作るかはあなた次第です」

と最後に結び、Matthew McNultyに戻ります。

(Speaker: Addy Osmani)

リンク：Polymer Starter Kit（英語）

まとめ

ここ2年間で、Polymerが約束をして実現したことは以下の通り。

• Web Components
• Interoperability
• 宣言的な書き方ができること

ChromeではWeb Componentsがリリースされて1年、またProductionに耐えられるPolymer 1.0がリリースされた。

Salesforde、Vaadin、Atabistなどの3rdパーティも、PolymerをProduction用に使っている。Google Santa Tracker、Google I/O web appはオフラインで動作します、Polymer Starter Kitも今日から使えるし、今後は1.0には入れられなかった新しい機能、Elementを早いペースで次々に追加する予定です。

Polymerについての情報の取得等のリンクは以下。

• 最新情報：polymer-project.org
• Polymer Teamと直接会話：Slackチャンネル

そして、Polymer単独のカンファレンスの告知がありました。

「2015年9月15日にアムステルダムにて、PolymerだけのカンファレンスPolymer Summitを開催します。1日中、Polymerを、また最先端のWeb開発を学びにくてください」とのことです！

最後に「バグも見つけてね」でセッションは終了でした。

(Speaker: Matthew McNulty)

あとがき

個人的にはPolymerを最初に触ったのが2013年頃で、そのキッカケは楽器系のアプリを作った時に必ず使いたくなるリッチなノブ、スライダ、スイッチ、鍵盤を簡単に配置できる世界を夢見たwebaudio-controlsが開発され始め、それに乗っかって一緒にはじめたことでした。

今回のセッションに参加して、その中で何度もリピートされていた言葉、 “There is an element for that!“（それ、エレメントあるよ！）をwebaudio-controlsを作ってから、実際に自分自身が言っていたことに気が付きました。

また、ブラウザにMIDI機器を接続して遊べるWebアプリを、簡単に作ることができる世界を夢見てx-webmidiというElementも作りました。これを作った理由は「ゼロから書くのはちょっと…という理由で手が出しずらい、という印象を少しでも和らげたい」からでした。

この「手軽に使えること」だったり「ゼロから書くのはちょっと…という理由で手が出しずらい、という印象を少しでも和らげたい」という想いがさらに一般に拡がりElementが量産されたのであれば、その未来はブラウザにはよりプリミティブなAPIが実装されるようになり、ブラウザのAPIをより使いやすくする、APIを組合せることで新たな枠組みを作るためのWeb Componentsが「ブラウザのAPIとWebアプリの中間に新たなクリエイティブな層」を創り出して、Web開発がExtensible Webな時代へ突入するのかな？なんて、Webの未来をモヤモヤ考えさせられる2015年のPolymerのセッションでした。

Polymerは、Google I/O 2015にて1.0が正式リリースとしてアナウンスされました。本記事は、Google I/OでPolymerが取り上げられた「Polymer and modern web APIs: In production at Google scale」のセッションをレポートします。Polymerの最新情報や活用事例、Polymer Catalog、Polymer Starter Kitなど 盛りだくさんのこのセッションの翻訳と解説を前後編に分けてお伝えします。

前編となる本記事では、「Polymer1.0の特徴」、「Polymer Catalogとすぐに使えるElements」、「ライブサイトへの適用例（前半）」を解説します。

Polymer1.0の特徴

Polymerが全体的にどう変わったのか、その特徴をまとめて説明してくれました。Polymer1.0の特徴を全て紹介しきれていないとのことですが、セッションで特に紹介されていたのは以下の通りです。

• 高速化(0.5と比較)：Chromeでは3倍、モバイルSafariでは4倍高速化した
• 軽量化(0.5と比較)：以前より35％コード量減らしPolyfillも含めてgzipをすると19kb-42kb
• Shady DOMの採用：スピードを重視したShadow DOMのPolyfillで100％互換ではない
• CSS Custom プロパティ：プロパティの変更だけでテーマやスタイルの変更を可能に

「PolymerはWeb標準技術であるWeb Componentsのライブラリであって、そのElementを作ることができます。なので、結果的にそれらのElementはWeb標準技術の上に作られたのと同意である。他のブラウザ上でも動作するし、AngularやReactといったFrameworkの中に一緒に共存させることもできる、というところが最大の特徴であり利点でもあります」

セッションでは、これらの説明をコンテナを運ぶ物流システムに例え「標準化を元に作られたコンテナ（Polymer Element）だからこそ、標準化されたボート・電車・トラックで効率的に運ぶことだってできる（ブラウザのInteroperabolity）」という形で説明をしていました。この例えは、Polymer TeamはSan Franciscoのオフィスにいて、普段の会話の中に湾を行き交う輸送船について話すことが多いことに由来しているそうです。

(Speaker: Matthew McNulty)

Polymer Element Catalogとすぐに使えるElements

ここからPolymerを使ってWebアプリを作るときのElementについて話に変わります。

「Polymer Teamは全ての開発者にPolymerを使って高品質なアプリを簡単に作ってもらうことを目標にしています。そして、アプリはElementによって出来が左右されるので、高品質なアプリを作るには高品位なElementが不可欠です。なのでGoogleでは高品質なElementを提供します」

という導入があり、続いて具体的にElementの説明です。

まずは去年から公開されていたElementとして、Iron Element、Paper Elementが紹介されています。そして、新しく追加されたElementとして、Google Web Components、Platinum Elements、Gold Elementsがあります。

• Iron Element (Fe)
  新しく聞こえますが、Core Elementから名称を変更しました。内容は以前と変わらずElementの基本となり、どのアプリケーションにも使うようなエレメントのセット。
• Paper Element (Md)
  Material DesignのリファレンスになるElementのセット。
• Google Web Components (Go)
  Google SDKとも言えるようなElementでGoogleのServiceやAPI（GCP、Drive、Map、Hangout、Calendar、Analytics、YouTube、Docs、Chrome Web Store、アドレス帳など）を利用する際に利用するElementのセット。
• Platinum Elements (Pt)
  オフライン・キャッシング、ServiceWorkers、Push Notificationのようなとてもパワフルな機能を最も簡単に利用することのできるElementのセット。このElementを使うことで、半年前には夢だと思っていたような機能が簡単に実装可能。
• Gold Elements (Au)
  モバイルでの高品質な決済のチェックアウト遷移を作成できるElementのセット。日付、カード番号等の自動Validationが可能。

これらのうち、新しく追加された3つのElementは、Web開発者が特定の問題を解決するために用意しているものとのことです。このPolymer Catalogについては次のように説明しています。

「このサイトの目的は、解決したい問題がある場合は解決策を見つければいいのだけど、例えば、何かに触発されたかったり、思ったこともないようなデザインを見つけたかったり・眺めたかったり、考えたこともないようなアプリケーションを考えたいという場合もあります。この2つ「解決策を見つける」、「インスピレーションを得たい」を実現させる為に、Elementをブラウスでき、デモを動作可能で、ドキュメントも読むことができるのがPoymer Catalogです」

リンク：Polymer Catalog（英語）

Polymerを使ってアプリを実装、公開している3rdパーティとそのアプリの紹介

「Polymer TeamではWeb開発者が「実装したい」と考えるであろう機能は、”There is an element for that!“（それ、Elementであるよ！） と言えるようにりたいと思っていますが、我々の以外でも同じことを想っている方々は多くいます。そこで、ここでは出版関連を行っているAtabist、Enterprise向けのJavaアプリ用のFrameworkを作っているVaadin、そしてSalesforceの3つの事例を紹介します」

Atabist

出版関連を行っている会社で、Web上に本を作るPlatformをリリース。Webは音声、映像、画像、地図、ブラフを一緒に配置して1つにまとめるにはとてもよい媒体で、これらの1つ1つをPolymerのElementにして自由に配置できるようにしたのがこのPlatform。

リンク：Atabist（英語）

Vaadin

Enterprise向けのアプリを書くためのFrameworkを作っている有名な会社の1つで、Front-endのComponentsはPolymer Elementを使って実装している。特に大量のデータを表示することに重きを置き開発されていて、例えば、v-gridというElementを作っていて、これを使うとアドレス帳のようなモノを表示、LazyLoading、行または列の複数選択の機能もElementを実装することができる。グラフを描くElementも作っていてタグ名を変えるだけで、グラフの種類を変更することができる。

リンク：v-grid（英語）

Salesforce

Salesforceは彼らのPlatform上でそのデータを表示するアプリケーションを作るためのSDK、APIを公開している。このアプリケーション開発をより簡単にしたいということで、Polymer Elementでの提供を行っている。

ライブデモ：デザイナ（英語）

Google社内でのPolymerの実用例

最後にGoogle社内でのPolymerの実用例の紹介です。Polymer Teamは「GoogleさんはLiveサイトでPolymerを使っているの？」とよく聞かれるそうですが「もちろん使っている」とのことで、そのうち3つを紹介してくれました。

Translate：Translation TeamはTranslateの質を上げるためにコミュニティのメンバーが参加して作り上げることのできるシステムを新しく作った。サイト全体がPaper Elementを使ったMaterial Designを採用している。このプロダクトはFront-endエンジニア2人で2～3ヶ月の開発期間で完成させることができたとのこと。Paper Elementを使っているので、開発者はどうやってMaterial Desiginを実装するかということは気にせず、アプリケーションの本質部分に集中して開発を進めらたそうです。

ライブデモ（英語）

Play Music：Play TeamもPaper Elementを使ってMaterial Designを採用しているので、アプリケーションの本質部分に集中して開発を進めることができたとのことです。Play Musicは現在はPolymer Elementの組合せで作られていて、同じような音楽再生用WebサイトにElementを再利用することも可能です。（日本からはアクセスできません）

YouTubeのモバイルWebサイト：多くのPolymerを使ったサイトはまだGoogle社内にしか公開されていないのですが、その中の1つ、それがYouTubeのモバイルのFront-End。これも全てがPolymer Elementで作られています。キビキビ動き、アニメーション、トランジションもついていて、とてもよいUIに仕上がっている。またビデオを画面の角にドラッグして動かすというWebでは実現が可能とは予想していなかったであろう動作も実現できている。このようにWebでもNativeのような最高の動作をPolymer Elementで作ることができる。

「Elementはとても素晴らしく、紹介したような素晴らしいElementを作ることができます。Polymer Teamは引続き素晴らしいElementを開発していきます。そして、コミュニティからもっと素晴らしいElementが出てくることを楽しみにしています」

と結び、次のライブサイトへの適用例の説明に移りました。

(Speaker: Taylor Savage)

ライブサイトへの適用例（前半）

ここからはEric Bidelmanにバトンタッチです。彼の3年間を振り返ってのお話からです。

Polymer Teamにいて「これはどうやってWeb Componentsで実現するの？」ということを開発者と話してきて、そこでよく質問にあがる具体例が「どうやってSPA（Single Page Application）をWeb Componentsでどう実装するのか？」、「他言語化やLazyLoad、またURLルーティングはど実現するのか？」というような「Polymerを使ってどう実現したいモノを実装するか？」という部分です。それに対してPolymer Teamはこう答えているそうです。

> There is an element for that!

という掴みがあり、続いてEric Bidelmanが前回のI/Oから数多くの実験を実際に行い、Google.com上のアプリを作りそれらを公開して、実際に使えるのかを試してみた、というストーリで実例を2つ紹介してくれました。

「これらの事例ではPolymer1.0ではなく、ちょっと遅いけどGoogle.comで公開されているのは0.5。なんだけど、1.0と書き方が少し違うだけで本質的なPolymerの部分は同じなので、これからお話をする事例には影響は特にないのです」

と捕捉があって、Google Santa Tracker 2014とGoogle I/O Web Appの説明が始まります。

Google Santa Tracker 2014

このアプリは12月に公開されたアプリで、サンタ村を訪れることができ、12月中は毎日新しいゲームを提供したりしているAdvent Calendarのアプリ。日々提供されるゲームだったり、そのSceneのことを社内ではLaunchと呼んでいて、それらの全部がElementになっていて、Web AudioだったりWeb GLだったりを使っているものもある。クリスマスイブには今どこでサンタがプレゼントを配っているかも見ることができる。もちろんそれもElementになっている。

コード的な説明です。<santa-app> が全体をオーケストレーションするElementで、Google Analyticsに、また音楽の再生・停止をするEventの発火を行う。<santa-app> の内部にはさらにElementが入っている。URLルーティングもElementを作って対応していて、LazyLoadingのElementとを結びつけ、ユーザがSceneを選択したときにJavaScript、CSSが動的に読み込まれるような仕組みになっている。このプロジェクト全体的にElementはDeclarativeにしていて、各Sceneのプログレスバー、背景色、背景画像もそのおかげでHTMLのAttributeでの設定が可能になっている。

Google Santa Tracker 2014の説明は以上でした。

リンク：Google Santa Tracker [ライブサイト] [コード]

（後編に続きます）

この記事は、連載「基礎からわかるWeb Components徹底解説～仕様から実装まで理解する〜」の第5回目になります。今回は、先日発表されたPolymer 0.8の変更点、MozillaのWeb Componentsへの関わり方やX-Tag、Brick、BosonicといったPolymer以外の周辺ライブラリについて紹介します。

Polymer 0.8のリリース

先日、Polymerのバージョン0.8がリリースされました。

• 0.8 Released! – Polymer Blog

0.8は1.0のリリースに向けたアルファリリースと位置付けられています。APIも正式版への提案として大きく変更が加えられており、これまでとの互換性も保たれていません。既に実践でPolymerを使っていて、0.8へアップデートを行う場合はこれまでのコンポーネントを作り直す必要があります。

アルファ版ということで、ユーザーのフィードバックや再設計を経て、さらなる変更がある可能性もありますが、より完成度の高いライブラリに近づいていくことでしょう。アップデートに伴い、どのような変更があるのかを見ていきます。

ポリフィルライブラリ

これまでポリフィルライブラリとして推奨されてきたwebcomponents.jsですが、以降はwebcomponents-lite.jsが推奨されています。webcomponents.jsとwebcomponents-lite.jsの差はShadow DOMのポリフィルを含んでいるかどうかなのですが、Polymer 0.8ではよりシンプルで軽量な shady DOM というShadow DOMのポリフィルを含んでいるためです。

• webcomponents/webcomponentsjs
• webcomponents/webcomponents-lite

異なる用途でShadow DOMのポリフィルを必要とする場合は別ですが、Polymerを利用するためであれば、webcomponents.jsの重いShadow DOMのポリフィルを含まず、軽量なwebcomponents-lite.jsを選択するのが望ましいと言えます。

軽量化とパフォーマンスの向上

APIの大きな見直し（後述）と抜本的なリファクタリングによって、ライブラリのファイルサイズの軽量化と実行パフォーマンスの向上が図られています。以下はPolymerLabs/benchmarksで試すことができるベンチマークの結果です（Polymer公式サイトより引用）。初期描画までの時間の棒グラフになっており、低ければ低いほど描画までの時間が短くパフォーマンスが良いということになります。

いくつかのデバイス・ブラウザで計測されていますが、いずれも0.5に比べて0.8が数倍高速に動作するという結果が出ています。もとよりWeb ComponentsはHTML ImportsのCustom Elementsの遅延評価されるという性質によるコンポーネントのがたつきやチラつきが問題になりがちですが、最も重要である初期描画までのパフォーマンスが向上されているのは嬉しいところです。

互換性のない大きなAPIの変更

冒頭で述べた通り、0.5以前と互換性はありません。

• About this release – Polymer
• Migration guide – Polymer

リリースノートとマイグレーションガイドを元に主な変更点を見ていきます。さらなる詳細な差分については、公式ドキュメントを確認してください。

カスタム要素の登録

これまでは、<polymer-element>要素を用いてカスタム要素の登録を行ってきました。

<polymer-element name="my-element">
  <template>
    <style>
      div { color: red; }
    </style>
    <div>Shadow DOM in My Element</div>
  </template>
  <script>
    Polymer();
  </script>
</polymer-element>

0.8からは以下のように、<dom-module>を起点にした方法に変更されます。<dom-module>要素のIDに登録したいカスタム要素名（ここではmy-element）を指定し、PolymerコンストラクタでそのIDを参照しています。

<dom-module id="my-element">
  <style>
    div { color: red; }
  </style>
  <template>
    <div>Shadow DOM in My Element</div>
  </template>
</dom-module>

<script>
  var MyElement = Polymer({is: 'my-element'});
</script>

Polymer({is: 'my-element'});の実行より前に、<dom-module>がロードされている必要があります。<style>タグを<template>の外に配置するようになった点にも注意して下さい。要素の継承についても同様にextendsキーワードで行うことができますが、0.5以前では可能であったカスタム要素の継承は廃止され、<button>や<textarea>のようなビルドインのHTML要素のみになっています。また、これまではconstructor属性にコンストラクタ関数名を指定していましたが、0.8では属性が廃止されるとともにPolymer()がカスタム要素のコンストラクタを返却するようになりました。

document.registerElementの第二引数に指定するextendsの値にもカスタム要素名を指定することはできず、コンストラクタ関数の返却もdocument.registerElementが行います。いずれも素の挙動に近い振る舞いになったと言えるでしょう。

カスタム要素のパースの順序

カスタム要素を含むカスタム要素を作成する場合は、内包するカスタム要素が事前に登録されている必要があります。つまり、<child-element>を含む<parent-element>を作成する場合、<child-element>が事前に登録されていなければなりません。

デフォルト属性とプロパティの宣言

カスタム要素のデフォルト属性とプロパティ宣言の方法も変わります。0.5までは以下のように、デフォルト属性は<polymer-element>に、プロパティの宣言はattributesにスペース区切りで指定していました。

<polymer-element name="your-element" attributes="foo bar" role="button" layout horizontal wrap>
  <template>
    <button>Your Element</button>
  </template>
  <script>
    Polymer({
      foo: 0,
      bar: 'Hello!'
    });
  </script>
</polymer-element>

0.8以降は以下のように、Polymer()コンストラクタにhostAttributesやpropertiesを渡すことで宣言します。

<dom-module id="your-element">
  <template>
    <button>Your Element</button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'your-element',
    hostAttributes: {
      role: 'button',
      class: 'layout horizontal wrap'
    },
    properties: {
      foo: {
        type: Number,
        value: 0
      },
      bar: {
        type: String,
        value: 'Hello!'
      }
    }
  });
</script>

layout、horizontal、wrapといったようなレイアウトに関するカスタム属性も通常のCSSクラスになり、hostAttributesのclassに指定します。また、このレイアウト機能はPolymerのコアから分離されpolymer.htmlに同梱されなくなったので、別途layout.htmlをインポートする必要があります。

オブザーバーの登録

プロパティの値の監視や、宣言的なイベントハンドラ登録といった機能もPolymerの強力な機能のひとつですが、これらにも少々変更があります。

これまでは、fooというプロパティに対してfooChangedというオブザーバー関数を宣言すると命名規則によって自動でバインドされる機能がありました。また、IDを振った要素はthis.$.idという形でコンストラクタ内でノードを参照することが可能であり、それをobserversに定義することでもプロパティの監視が可能でした。

<polymer-element name="your-element" attributes="foo">
  <template>
    <input type="text" id="input">
  </template>
  <script>
    Polymer({
      foo: 0,
      observers: {
        'this.&.input.value': 'inputValueChanged'
      },
      fooChanged: function (oldValue, newValue) {
        console.log('newValue is ', newValue);
      },
      inputValueChanged: function () {
        console.log('this.&.input.value is changed');
      }
    });
  </script>
</polymer-element>

0.8からはこのpropertyNameに対してpropertyNameChangedという関数を定義することで自動バインドされる仕組みと、IDを振った要素がthis.$にぶら下がる機能が廃止されます。これによってプロパティの監視を行うには、以下のように、ブラケットで囲った変数に対し、observer属性にオブザーバー関数を明示的に宣言することになります。

<dom-module id="your-element">
  <template>
    <input type="text" value="{{inputValue}}">
  </template>
</dom-module>

<script>
  Polymer({
    is: 'your-element',
    properties: {
      foo: {
        type: Number,
        value: 0,
        observer: 'fooChanged'
      },
      inputValue: {
        observer: 'inputValueChanged'
      }
    },
    fooChanged: function (oldValue, newValue) {
      console.log('newValue is ', newValue);
    },
    inputValueChanged: function () {
      console.log('inputValue is changed');
    }
  });
</script>

暗黙的にオブザーバー関数がバインドされる分、直感的に解り難い機能であったので、このように明示的な宣言方法になるのは嬉しいところです。

イベントハンドラの登録とデータバインディング

ブラケット{{}}によるデータバインディングや、イベントハンドラの登録もPolymerお馴染みの機能ですが、これらにも少々変更があります。

<polymer-element name="our-element">
  <template>
    <input type="text" value="{{firstName}}">
    <input type="text" value="{{lastName}}">
    <button on-click="{{onClick}}">Say full name</button>
  </template>
  <script>
    Polymer({
      onClick: function () {
        alert("{{firstName + ' ' + lastName}}");
      }
    });
  </script>
</polymer-element>

0.8からは{{}}内の式の評価はサポートされなくなります。

この例で言えば、"{{firstName + ' ' + lastName}}"のような表現はできなくなります。代わりにcomputedを用いて、式評価後の値を参照するプロパティを宣言する必要があります。これは0.5以前とは異なり、0.8からはpropertiesの配下に定義する属性になることに注意してください。

同じく、{{}}を使ってon-click="{{onClick}}"のように定義していたイベントハンドラの登録は、カーリーブラケットを使わずに記述します。

<dom-module id="our-element">
  <template>
    <input type="text" value="{{firstName}}">
    <input type="text" value="{{lastName}}">
    <button on-click="onClick">Say full name</button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'our-element',
    properties: {
      firstName: String,
      lastName: String,
      fullName: {
        type: String,
        computed: 'computeFullName(firstName, lastName)'
      }
    },
    computeFullName: function (firstName, lastName) {
      return firstName + ' ' + lastName;
    },
    onClick: function () {
      alert('{{fullName}}');
    }
  });
</script>

このようにfullNameにcomputed: computeFullName(firstName, lastName)とすることでcomputeFullNameの実行結果を参照することが可能です。

DOMの操作

Polymer内でDOM操作を行う場合、通常のShadow Rootから実行するDOMのAPIではなく、Polymer.domという専用のAPIを使う必要があります。

• Polymer.dom(parent).appendChild(node)
• Polymer.dom(parent).insertBefore(node, beforeNode)
• Polymer.dom(parent).removeChild(node)
• Polymer.dom(parent).querySelector(selector)
• Polymer.dom(parent).querySelectorAll(selector)
• Polymer.dom(parent).childNodes
• Polymer.dom(node).parentNode
• Polymer.dom(contentElement).getDistributedNodes()
• Polymer.dom(node).getDestinationInsertionPoints()

Polymer.domから行う追加や削除といったDOM操作は、パフォーマンスを考慮し遅延して実行するようになっています。そのため、操作後のノードの座標やgetComputedStyle()を使ったスタイルの取得をする場合は、操作をPolymer.dom.flush()を使って適時実行し、反映します。

// 従来のDOM操作
this.appendChild(node);
this.shadowRoot.appendChild(node);

// Polymer.domを使ったDOM操作
Polymer.dom(this).appendChild(node);
Polymer.dom(this.root).appendChild(node);

いずれもDOMのAPIと同じ命名と引数で設計されていますが、サブセットとして用意されているに過ぎず、完全に互換性があるわけではありません。例えば、firstChildといったプロパティは用意されていないので、この場合は代わりにchildNodes[0]を使ってください。

MozillaのWeb Componentsへの関わり方

MozillaもWeb Componentsに対し、積極的な姿勢を見せています。FirefoxでもWeb Componentsの仕様のうち、いくつかが実験的に実装され、またX-TagやBrickといったWeb Componentsをつかったコンポーネント作成を後押しするライブラリもリリースしています。

X-Tag

X-TagはWeb Componentsの作成をサポートするライブラリです。webcomponents.jsをポリフィルとし、記述の簡略化や一元化いったライブラリとしての目的もPolymerと似ている部分がありますが、Polymerに比べて多くのブラウザをサポートしているという特徴があります。X-Tagのブラウザターゲットは以下の通りです。

• Firefox 5+ desktop & mobile
• Chrome 4+, Android 2.1+
• Safari 4+ desktop & mobile
• Internet Explorer 9+
• Opera 11+ desktop & mobile

以下は公式ドキュメント引用のX-Tagを使ったカスタム要素作成のコード例です。Polymerほど多機能ではない分、シンプルで全体像を把握しやすいかもしれません。

xtag.register('x-accordion', {
  // extend existing elements
  extends: 'div',
  lifecycle:{
    created: function(){
      // fired once at the time a component
      // is initially created or parsed
    },
    inserted: function(){
      // fired each time a component
      // is inserted into the DOM
    },
    removed: function(){
      // fired each time an element
      // is removed from DOM
    },
    attributeChanged: function(){
      // fired when attributes are set
    }
  },
  events: {
    'click:delegate(x-toggler)': function(){
      // activate a clicked toggler
    }
  },
  accessors: {
    'togglers': {
      get: function(){
        // return all toggler children
      },
      set: function(value){
        // set the toggler children
      }
    }
  },
  methods: {
    nextToggler: function(){
      // activate the next toggler
    },
    previousToggler: function(){
      // activate the previous toggler
    }
  }
});

Brick

X-Tagだけでなく、UIコンポーネント群として配布しているのがBrickです。PolymerとX-Tagとの関係になぞらえるなら、BrickはCore ElementsやPaper Elementsと同じような存在と言えます。以前まではX-Tagが使われていましたが、現在は非依存になっています。

BrickもPolymerの対抗馬として注目されていましたが、開発が中断されているのか、最近は更新がない状態です。参照しているポリフィルライブラリもwebcomponents.jsではなく、旧称のplatform.jsになっているので、利用する場合は注意してください。

Web Componentsの各仕様へのMozillaの対応

2014年12月の記事ですが、MozillaのWeb Componentsに対する興味深い記事が公開されました。

• Mozilla and Web Components: Update

記事には、端的に述べると 「Custom ElementsとShadow DOMの実装は進め、HTML Importsの実装は見送ります。差し当たって、HTML Importsの機能はJavaScriptのライブラリでやってください。」 とあります。HTML Importsが実装されないことについての議論がコメント欄にて行われていますが、この記事の筆者であるAnne van Kesterenは以下のように述べています。

> Both ES6 modules and service workers open up resource dependency management to web developers. And while ES6 modules is mostly intended for JavaScript, we want to see what kind of dependency systems will be built on these two systems in libraries and frameworks before committing to a standardized design. Especially before committing to one that is not influenced by them. （ES6 modulesやService Workersも依存関係の解決に関わってくる。ES6 modulesはJavaScript向けのものだし、ライブラリやフレームワークにとってどのような機構になるかを見たい）

依存管理の仕組みが、HTML ImportsとES6 modules、Service Workerのような、Web WorkersのimportScriptsといった方法が複数存在してしまうことを懸念してのことと察します。例えばHTML ImportsとES6 modulesは目的を共有するものではないはずですが、HTML ImportsでロードするHTML内でES6 modulesが使われるようなケースも加味して、様子を見たいということでしょう。

Bosonic

BosonicもPolymerやX-Tag同様に、Web Componentsの作成を支援するライブラリです。

• Bosonic Web Component
• bosonic/bosonic – GitHub

PolymerやX-Tagと異なるのは、これらのようにライブラリとして機能を補完したりするのではなく、作成したWeb ComponentsをBosonicを使って事前にビルドするトランスパイラであるという点です。Bosonicでビルドすることで、Internet ExplorerやSafariを含めたWeb Componentsに関するAPIが実装されていないブラウザでも機能するコードが生成されます。

Bosonicはブラウザターゲットは以下の通りです。

• Internet Explorer 9, 10, 11
• Safari 8
• Android 4.4
• iOS 8.1
• Chrome 35
• Firefox 30

Bosonicで生成するコード例

以下は公式で例示されている<b-hello-world>というWeb ComponentsをBosonicを使ってビルドする例です。

<element name="b-hello-world">
  <style>
    :host {
      text-align: center;
      font-weight: bold;
      color: red;
    }
  </style>
  <template>
    <p>Hello world!</p>
  </template>
  <script>
    ({
      createdCallback: function() {
        var root = this.createShadowRoot();
        root.appendChild(this.template.content.cloneNode(true));
      }
    });
  </script>
</element>

Bosonicを使ってコンパイルすると、以下の様なCSSとJavaScriptのコードが出力されます。

b-hello-world {
  text-align: center;
  font-weight: bold;
  color: red;
}

(function () {
  var BHelloWorldPrototype = Object.create(HTMLElement.prototype, {
    createdCallback: {
      enumerable: true,
      value: function () {
        var root = this.createShadowRoot();
        root.appendChild(this.template.content.cloneNode(true));
      }
    }
  });
  window.BHelloWorld = document.registerElement('b-hello-world', { prototype: BHelloWorldPrototype });
  Object.defineProperty(BHelloWorld.prototype, '_super', {
    enumerable: false,
    writable: false,
    configurable: false,
    value: HTMLElement.prototype
  });
  Object.defineProperty(BHelloWorldPrototype, 'template', {
    get: function () {
      var fragment = document.createDocumentFragment();
      var div = fragment.appendChild(document.createElement('div'));
      div.innerHTML = ' <p>Hello world!</p> ';
      while (child = div.firstChild) {
        fragment.insertBefore(child, div);
      }
      fragment.removeChild(div);
      return { content: fragment };
    }
  });
}());

これらのファイルと、いくつかのポリフィル（HTMLImports、MutationObservers、WeakMap、Custom Elements）をHTMLでロードすることで、非対応のブラウザでも<b-hello-world>を使うことができます。

トランスパイラとして導入するメリット

新しいAPIで書かれたコードを、非対応のブラウザ向けに従来のAPIで実行できるようにするというのは、ES6をBabelでES5に変換するというアプローチと同様です。新しい技術の導入は常にブラウザサポートと天秤にかかり、サポートを優先するが故に新しい技術を試すことができないというジレンマも多いでしょう。しかし、こういったトランスパイラによって、新しい技術の導入と古いブラウザのサポートが、コストをかけずに両立できるのは非常に嬉しいところなのではないでしょうか。

<element>タグを使った古い記述であったり、リポジトリの更新もしばらくされていないなど、使うには少々抵抗があります。しかし、トランスパイラというアプローチは非常に興味深いものがありますので、メンテナンスが再開されるのを期待したいところです。

まとめ

Polymer 0.8のアップデート、X-Tag・Brick・Bosonic、およびFirefoxの実装状況について紹介しました。

ブラウザの実装状況は、Internet Explorer・Safariが未だに思わしくありません。仕様についても、FirefoxがHTML Importsの実装を遅らせたようにまだ確実とはいえない状況です。しかしこれは議論が行われている表れでもあり、Polymerの0.8がリリースされたことも含めて、Web Componentsに関する技術は普及に向けて着実に前進しているといえます。

しかし、Shadow DOMによってCSSやJSがカプセル化されても、今度はコンポーネント化のアプローチについて頭を悩ませることになるでしょう。Web Componentsが一般化するには仕様の安定やブラウザのサポートだけではなく、我々開発者でナレッジを蓄積していくことが最も重要です。

この記事は、連載「基礎からわかるWeb Components徹底解説～仕様から実装まで理解する〜」の第4回目になります。今回は、前回紹介したGoogleが開発するWeb Componentsのライブラリ、Polymerを元に作られたコンポーネント群「Core Elements」と「Paper Elements」について紹介します。

Core ElementsとPaper Elements

Core ElementsとPaper ElementsはGoogleが開発するWeb Components群です。Core Elementsは、Webを構成する要素をWeb Componentsとして切り出し抽象化したものであり、Paper ElementsはデザインコンセプトMaterial DesignをWebで実現します。

いずれもPolymerをベースに作られている他、各コンポーネントが異なるコンポーネントに依存したつくりになっているものもあります。アーカイブファイルの配布もされていますが、Bowerであればインストール時に依存関係は自動で解決されるため、意識する必要はありません。

インストールして実際に利用する例

Core Elementsのひとつであるcore-imageというコンポーネントを、Bowerを使ってインストールし、実際に使う例を以下に示します。core-imageは通常のimgタグにはない、画像のリサイズやプリロードといった機能を備えたWeb Componentsです。

まず、コマンドラインからBowerを使ってcore-imageをインストールします。bower.jsonに依存情報を記録する場合は--saveオプションを付けます。

$ bower install Polymer/core-image

実行後は、デフォルトであればbower_componentsフォルダ配下にcore-imageと、core-imageが依存するサブリソースがダウンロードされています。core-imageが依存するのはPolymer Coreのみですが、Polymer Coreが依存するリソースがさらに存在するので、それらもダウンロードされています。

ダウンロードしたcore-image.htmlをHTML内でロードすることで、core-image要素を使えるようになります。

<html>
  <head>
    <link rel="import" href="bower_components/core-image/core-image.html">
  </head>
  <body>
    <core-image src="http://lorempixel.com/400/400"></core-image>
  </body>
</html>

サンプルでは、ダウンロードされたPolymer Coreを参照していませんが、ロードしているcore-image.htmlの中でPolymer Coreのインポートが行われているため、改めてPolymer Coreを読み込む必要はありません。

Polymerチームは、依存管理にBowerを使うことを推奨しています。自身でWeb Componentsを作成し、公開する場合は依存するリソースをbower.jsonに書き、コンポーネント内のサブリソースへの参照も、Bowerが使われることを意識するとよいでしょう。

基本的な要素・機能を提供するCore Elements

Core Elementsは、ユーザーインターフェースの基礎です。よく使われるけどブラウザネイティブには提供されていない機能や、Polymerの強力な機能との橋渡しとなるコンポーネントを提供します。後述のPaper Elementsの土台になっているように、拡張前提のコンポーネントも多くあります。

• Polymer core elements Polymer公式サイトのCore Elementsのページ
• Core Elements Sampler Core Elementsのサンプル集

UI関連のCore Elements

UIに関するCore Elementsとしては、既存のHTMLでは提供されていないドロップダウンやオーバーレイといった汎用的なUIや、既存のUIの機能を補完しているコンポーネントが用意されています。

例えば、core-dropdown-menuを使ったドロップダウンが挙げられます。ドロップダウンのUIは今や当たり前のように見かけますが、要件が出る度にイチから実装していたケースも多いのではないでしょうか。

以下は、core-dropdown-menuとcore-menu及びcore-itemを組み合わせて実装するドロップダウンメニューの例（公式サイトから引用）です。

<core-dropdown-menu label="Choose a pastry">
  <core-dropdown class="dropdown">
    <core-selector>
      <core-item label="Croissant"></core-item>
      <core-item label="Donut"></core-item>
      <core-item label="Financier"></core-item>
      <core-item label="Madeleine"></core-item>
    </core-selector>
  </core-dropdown>
</core-dropdown-menu>

他にも以下のようなインターフェースが切り出されています。

• core-collapse 折りたたみコンテンツ
• core-drag-drop ドラッグアンドドロップ
• core-menu メニューアイテム
• core-overlay 他のコンテンツに覆いかぶさるオーバーレイ
• core-tooltip ホバー時に表示されるツールチップ

機能を補完している例としては、core-inputがあります。

core-inputはis="core-input"のように、ネイティブHTMLの拡張として利用します。拡張されたinput要素は、aria-labelやaria-disabledといったARIAで定義されるアクセシビリティを自動で保管したり、フォームとしてサブミットされた時の値をcommittedValueとして取得できるようになります。

他には前述のcore-imageも、後者に該当すると言えるでしょう。

アニメーション関連のCore Elements

Core ElementsにはUIパーツだけでなく、アニメーションを抽象化したコンポーネント群があります。その中核を成すのがcore-animationです。

core-animationでアニメーションを定義し、core-animation-keyframeとcore-animation-propでアニメーションの具体的な挙動を指定します。以下はcore-animation要素でアニメーションを定義する例（公式サイトから引用）です。

<core-animation id="fadeout" duration="500">
  <core-animation-keyframe>
    <core-animation-prop name="opacity" value="1"></core-animation-prop>
  </core-animation-keyframe>
  <core-animation-keyframe>
    <core-animation-prop name="opacity" value="0"></core-animation-prop>
  </core-animation-keyframe>
</core-animation>

<div id="el">Fade me out</div>

<script>
  var animation = document.getElementById('fadeout');
  animation.target = document.getElementById('el');
  animation.play();
</script>

ここではキーフレーム毎に透過度を変化させ、フェードアウトのアニメーションを宣言しています。そして、アニメーションさせたい要素を、core-animationのtarget属性に指定することでフェードアウトさせてます。これはJavaScriptのコードで命令的に行っています。

複数のアニメーションを組み合わせて使いたい場合は、core-animation-groupというグルーピングを担うコンポーネントもあります。

ブラウザAPI関連のCore Elements

提供しているのは、汎用的なアイコンやユーザーインターフェースといったビジュアルに関わる部分に限りません。Core ElementsではAjaxやキーボードアクションのハンドリング等、見た目には直接関わらない機能もWeb Componentsとして抽象化しています。

• core-a11y-keys キー押下のハンドリング
• core-ajax Ajaxの定義及びハンドリング
• core-localstorage ローカルストレージへのアクセス

今まではJavaScriptからそれぞれのAPIを実行し制御していた機能ですが、これらによって、他の要素との連携がPolymerが提供するデータバインディング機能などで容易になる他、HTMLに記述することで宣言的に挙動を定義していくことが可能になります。

以下はデータバインディングを利用してinput要素に入力した値をローカルストレージに保存する例です。

<input type="text" value="{{value}}">
<core-localstorage name="localstorage-key" value="{{value}}"></core-localstorage>

core-localstorageのvalue属性の値がローカルストレージに保存されるので、inputのvalueとバインドすることで入力値がそのまま保存されるようになります。今まではイチからJavaScriptで制御していたことを考えれば、よりわかりやすく、そしてグッと楽になっています。

Material Designを実現するPaper Elements

Paper ElementsはMaterial DesignをWebで実現するWeb Components群です。Polymer Coreへ依存している他、Core Elementsをベースに構成されているコンポーネントが多くを占めています。

Material Designについては、話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そうという記事を一読するとよいでしょう。

• Polymer paper elements Polymer公式サイトのPaper Elementsのページ
• Paper Elements Sampler Paper Elementsのサンプル集

UI関連のPaper Elements

UI関連のPaper Elementsとしては、Core ElementsのUIコンポーネントにMaterial Designを取り入れた要素が多くあります。これは要素の一覧を見比べてもらうとわかるかと思います。

以下はpaper-dropdown-menuの利用例です。

<paper-dropdown-menu label="Your favorite pastry">
  <paper-dropdown class="dropdown">
    <core-menu class="menu">
      <paper-item>Croissant</paper-item>
      <paper-item>Donut</paper-item>
      <paper-item>Financier</paper-item>
      <paper-item>Madeleine</paper-item>
    </core-menu>
  </paper-dropdown>
</paper-dropdown-menu>

このように、利用方法もほぼ同じです。Paper Elementsとして独自に拡張しているのは、影やエフェクトのdurationなどのMaterial Designの表現に関わる部分だけとも捉えられます。

Material Designを体現するエフェクト

影の動きや波紋のようなインタラクションや、奥行きを表現するZ座標のルールといった、特徴的なMaterial Designのコンセプトを担うのは、以下のコンポーネントです。

• paper-ripple クリックした位置から波紋が広がるエフェクト
• paper-spinner 円状のスピナー
• paper-shadow 紙で持ち上げられ影がついたようなエフェクト

特にpaper-rippleとpaper-shadowはMaterial Designのコンセプトの中核を担っており、Paper Elementsのほとんどが、この2つのいずれかに（あるいは両方に）依存したコンポーネントになっています。

paper-shadowを利用する例

実際にpaper-shadowを取り入れてみます。以下はpaper-shadowを使わずにレイアウトしています。

paper-shadowを使うには、冒頭で解説したようにBowerを使ってインストールして、影を付けたい要素をpaper-shadowタグで囲むだけです。

<paper-shadow z="2">
  <core-selector id="theme-selector" selected="default">
    <paper-item name="arta">Arta</paper-item>
    <paper-item name="ascetic">Ascetic</paper-item>
    <paper-item name="color-brewer">Color Brewer</paper-item>
    <paper-item name="docco">Docco</paper-item>
    ...
  </core-selector>
</paper-shadow>

このコードの場合はcore-selectorを囲っていますが、Core Elementsである必要はありません。divでもsectionでも大丈夫です。適用すると以下のようになります。

サンプルページでは、簡単ではありますが他のPaper Elementsも使っています。Paper Elementsを取り入れる例としては、PolymerでMaterial Designなチャットアプリを作ろうという記事に、より実践的なチュートリアルがあります。

Polymer Designer

Core ElementsやPaper Elementsを試す手段としてPolymer Designerがあります。

Polymer Designerではブラウザ上で、Core ElementsやPaper Elementsをドラッグアンドドロップで配置し、データバインディング等もGUI上で行いコンポーネントを作成することが可能なツールです。Web上でお手軽に試したい場合には、こちらを使うのもよいでしょう。

使い方についてはWeb Componentsが変えるWeb開発の未来という記事で触れています。

おわりに

Core ElementsとPaper Elementsの概要・使い方について紹介しました。Web Componentsを使ってWebページの基礎を組み立てるならCore Elementsは便利ですし、Material DesignをWebに取り入れるには、Paper Elementsが既にデファクトスタンダードと言えるかもしれません。

使う分にはもちろん便利なCore ElementsとPaper Elementsですが、興味があればGitHubで公開されているソースコードを見てみることをオススメします。どういった設計でどのように抽象化しているかを見るのも、今後Web Componentsを自分で作っていく上できっと参考になるはずです。

まず始める前にこのライブデモ、Kitteh Anonymousをデスクトップまたはモバイルのモダンブラウザで実際に試してみてください。ここでは、このデモの簡略版であるLiteバージョンを実際に作成する方法をステップ・バイ・ステップで紹介したいと思います。

必要な知識

• Polymerの基礎知識
• パッケージマネージャ、Bowerの基本的な使い方（Polymerと依存するファイルをインストール、アップデートするのに使いますが、必ずしも使う必要はありません）

泉水翔吾さんの記事、Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそうや、佐藤歩さんの話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そうを先に読むのをおすすめします。

PolymerとWebスタンダード

ちまたに数多く存在する、JavaScript UI library。Polymerも単にまたそのひとつ、と思うかもしれません。しかしPolymerが他と違うのは、これがW3C WebプラットフォームプリミティブのWeb Componentsを基礎に作られていることです。このWeb Componentsファミリーに含まれるものに

• Shadow DOM
• Custom Elements
• HTML Imports

などが挙げられます。

そしてPolymerに含まれる

webcomponents.js

Object.observe()

レゴブロックのようにWebを構築しよう

Polymer webコンポーネントはカプセル化された何度も再利用できるコンポーネント。まるでレゴで家を構築するかのように、既存のパーツを使ったり自分で組み立てたパーツを使ったりと、いろいろなパーツを組み合わせてWebアプリを作ることができます。

実際にPolymerでアプリを作るには、まず必要な要素をインポートしてから使うことになります。

<!-- Import element --> 
<link rel="import" href="paper-fab"> 
... 
<!-- Use element --> 
<paper-fab icon="send"></paper-fab>

Material DesignとPolymerの関係

Material Designは、既存のどのスクリーンサイズやデバイスにでも対応できる、ビジュアルとインタラクションデザインにすぐれたデザインスペックで、もともとはAndroid 5.0 Lollipop用にデザインされたものが、のちにWeb用としてPolymerのPaper Elementsとして適応されるようにました。

1. Paper Elementsを使ってみよう

さて実際にこれらを使って自分のアプリを作ってみましょう。 まず、Polymerをインストール、そしてアプリ構築に必要なコンポーネントをインポートします。

1.1. Polymerをインストール

$ bower install --save Polymer/polymer

これで必要最低限のファイルがそろいます。

インストールが終わったら、index.htmlの

<head>

webcomponents.min.js

<!DOCTYPE html> 
<html> 
  <head> 
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> 
  </head> 
  <body>
...

1.2. UI コンポーネントをインポート

このデモのUIには、いくつかのPolymer CoreとPaper Elements、そして自作のカスタム要素が使われています。

1. core-scaffold (レスポンシブレイアウトを構成するheader、toolbar、menuなどがすでに揃った骨組み)
2. core-item
3. paper-input
4. paper-fab
5. カスタム (のちに作成しましょう)

Bowerを使って４つのcomponentsをインストールします。

$ bower install Polymer/core-scaffold 
$ bower install Polymer/core-item 
$ bower install Polymer/paper-input 
$ bower install Polymer/paper-fab

インストールが終わったら、これらをHTML importsを使ってインポートします。

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>   

<link rel="import" href="bower_components/core-scaffold/core-scaffold.html"> 
<link rel="import" href="bower_components/core-item/core-item.html"> 
<link rel="import" href="bower_components/paper-input/paper-input.html"> 
<link rel="import" href="bower_components/paper-fab/paper-fab.html">

このようにすることで、これらの要素がDOM上で使われる前に依存ファイルを含めて全てがしっかりロードされることになります。

1.3. ベーシックUIの構成

まず、

<core-scaffold>

<core-header-panel>

<core-toolbar>

<core-drawer-panel>

<body fullbleed unresolved>
  <core-scaffold>

    <!-- ドロウアーパネル -->
    <core-header-panel navigation flex>
        <core-toolbar class="tall">
            <!-- an avatar and username will be here -->
        </core-toolbar>
    </core-header-panel>

    <!-- アプリのタイトル -->
    <div tool layout horizontal flex>
        <span flex>Kitteh Anonymous</span>
        <core-icon icon="account-circle"></core-icon>
        <span><!-- number of people online --></span> 
    </div>

    <!-- メインコンテンツ -->
    <div flex>
            ...
    </div>
  </core-scaffold>
</body>

これでアプリのコア・ストラクチャーができました。

<core-scaffold>

ここで

<body>

fullbreed

unresolved

他、要素の要所に

flex

layout horizontal | vertical

1.4. 個々のUI Elementsを使う

次に、このベースレイアウトの中に、先ほど一緒にインポートした個々のUIパーツを使います。 例えば次に示すコードサンプルでは、スクリーン横幅にあわせスタイライズされたインプットと、送信ボタンを表示しています。

二重カーリーブラケットに囲まれた

{{input}}

{{sendMyMessage}}

on-

<!-- メインコンテンツ -->   
<div class="send-message" layout horizontal>
 <paper-input flex label="Type message..." id="input" value="{{input}}"></paper-input>
 <paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab> 
</div>

実際のアプリの中でコンポーネントがどのようにインポートされているかは、GitHub Repo上のlite.htmlのソースコードを見て確認してみてください。

1.5. データバインディング

PolymerはHTMLの新スタンダードである

<template>

<template>

<body fullbleed unresolved>
  <template is="auto-binding">
    <core-scaffold>
      ...
    </core-scaffold>
  </template>
</body>

これで、前チャプター(1.4)で既出の

paper-input

{{input}}

var template = document.querySelector('template[is=auto-binding]');
doSomething(template.input);

他、このデータモデルを使えば、要素を繰り返し使うようなマークアップを簡略化するなどということもできるのです。 実際にドロウアーパネルUIの中に、

core-item

<template repeat="{{item in items}}">
  <core-item icon="{{item.icon}}" label="{{item.title}}"></core-item>
</template>

core-item

<core-icons>

template.items = [
  {title: 'Uno', icon: 'cloud'},
  {title: 'Dos', icon: 'polymer'},
  {title: 'Tres', icon: 'favorite'}
];

これで、モデルを生成・変更した時に自動的にテンプレートにインスタンスが生成され、DOM上には下の図のように表示されます。

2. カスタム要素の作成

メインUIとなる部分にチャットの会話を表示させましょう。このUIパーツには、アバター、ユーザーID、チャットのテキストが表示させるようにしたいのですが、Polymer CoreにもPaperにもそういったバーツは存在しません。ですので自分でカスタム要素を作ってみましょう。

まず新規のHTMLファイルを作成します。ここではこのファイル名を、

x-chat-list.html

このカスタム要素は、属性、

avatar

color

username

text

ここでは、カスタム要素の作製法を一から説明はしませんが、簡略化されたカスタム要素は次のようになります。

<polymer-element name="x-chat-list" attributes="avatar color username text">
  <template>
  <section class="user-list" layout horizontal>
    <div class="avatar {{color}}" style="background-image: url({{avatar}})"></div>
    <div flex>
      <div class="username">{{username}}</div>
      <div class="text">{{text}}</div>
    </div>
  </section>
  </template>
  <script>
    Polymer('x-chat-list', { // デフォルト値を指定
      avatar: '', 
      color: '',
      username: '',
      text: ''
    });
  </script>
</polymer-element>

この例ではわかりやすく見せるために、

<style>...</style>

x-chat-list.html

できあがったら

index.html

<link rel="import" href="x-chat-list.html">

<div flex class="chat-list">
  <template repeat="{{message in messages}}">
    <x-chat-list color="{{message.color}}" 
                 avatar="{{message.avatar}}" 
                 username="{{message.uuid}}" 
                 text="{{message.text}}"></x-chat-list>
  </template>
</div>

データは実際の生のチャットの会話を、PubNubデータ・ストリームサービスを使って表示させます。詳しくは次のセクションで説明します。

かなりはしょってしまいましたが、カスタム要素を作る詳しい説明は公式のドキュメントを参照してください。

3.PubNub Elementでメッセージの送信・受信をする

アプリのUI部分はすべて完成しましたので、今度はチャットルームそのものを作ってみましょう。データの送受信はPubNubが提供するリアルタイム・データストリームのPolymerエレメント版である、

<pubnub-element>

<pubnub-element>

publish_key

publish_key

3.1. <pubnub-element>をインストール・インポート

インストールは、他の要素同様にBowerを使うことができます。

$ bower install --save pubnub-polymer

インストール後は

index.html

<link rel="import" href="bower_components/pubnub-polymer/pubnub-element.html">

3.2. <pubnub-element>を使う

まず、

<core-pubnub>

<core-pubnub publish_key="your_pub_key" subscribe_key="your_sub_key" uuid="{{uuid}}">
</core-pubnub>

ここで使われる

uuid

var randomColor = function() {   
  var colors = ['navy', 'slate', 'olive',...];   
  return colors[(Math.random() * colors.length) >>> 0];
};

var randomCat = function() { ... }; 

template.uuid = randomColor() + '-' + randomCat();

3.3. メッセージの送信

<core-pubnub-publish>

<core-pubnub publish_key="demo" subscribe_key="demo">
  <core-pubnub-publish id="pub" channel="polymer-chat" message="Hello">
  </core-pubnub-publish>
</core-pubnub>

では、ユーザが文字を入力して送信ボタン(

<paper-fab>

on-*

on-tap

<paper-fab>

<paper-fab icon="send" on-tap="{{sendMyMessage}}"></paper-fab>

template.sendMyMessage = function(e) {
  if(!template.input) return; // 入力フィールドが空の場合は何もしない

  template.$.pub.message = {
    uuid: uuid, 
    avatar: avatarUrl,
    color: color, 
    text: template.input  
  };
  template.$.pub.publish();
};

これでユーザの情報とメッセージテキストが、サーバに送られました。次はすべてのユーザがこれを受信して、内容ををDOMに表示させてみましょう。

3.4. 受信データのリアルタイムバインディング

ネットワークに送られたメッセージは

<core-pubnub-subscribe>

<core-pubnub-subscribe 
  channel="polymer-chat" 
  id="sub" 
  messages="{{messages}}" 
  on-callback="{{subscribeCallback}}">

ここでの

messages

<x-chat-list>

messages

messages="{{messages}}"

core-pubnub-subscribe>

<x-chat-list>

ではもう一度、

<x-chatlist>

<div flex class="chat-list">
  <template repeat="{{message in messages}}">
    <x-chat-list 
      color="{{message.color}}" 
      avatar="{{message.avatar}}" 
      username="{{message.uuid}}" 
      text="{{message.text}}"></x-chat-list>
  </template>
</div>

メッセージが受信された際には、

<core-pubnub-subscribe>

on-callback

template.subscribeCallback = function(e) {
  template.async(function(){
    var chatDiv = document.querySelector('.chat-list');
    chatDiv.scrollTop = chatDiv.scrollHeight; // scroll to bottom
  });
};

これで、PolymerでMaterial Designの美しいデザインを使った簡単なチャットルームが完成しました！

このチュートリアルではわかりやすくするために、デモで使われているすべてのフィーチャーについてや、Shadow DOMのスタイリングについての説明は省略してあるので、さらに知りたい方は是非、GitHub のRepoで確認してみてください。

デモとチュートリアル、楽しんでいただけたなら幸いです！Happy coding!

Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう

この記事は、連載「基礎からわかる Web Components 徹底解説 〜仕様から実装まで理解する〜」の第3回目になります。連載の第3回目となる今回は、Googleが中心となって開発を進めるPolymerというWeb Componentsのライブラリについて解説します。

Web Componentsをより柔軟に、そして強力にするライブラリ

Polymerは素のWeb Componentsにおいて、煩雑である部分を簡略化し、機能をより強力なものにし、基礎となるコンポーネントを提供します。BSDライセンスのもと、オープンソースで開発が行われており、ソースコードもGitHubにて公開されているので、Pull Requestを送るなどのかたちで私たちも開発に貢献することが可能です。

• Welcome Polymer

Polymerが提供する機能は、主に3つのパートに分かれています。Web Componentsの作成を簡単に、そして強力なものにする Polymer Core 。次に、一般的なUIの基礎の他、アニメーションや通信機能等を抽象化した Core Elements 。最後に、Google I/O 2014で発表されたデザインコンセプト「Material Design」をWebで実現する Paper Elements です。また、その他にも同じくPolymerチームが開発する、Web Componentsが未実装のブラウザでもWeb Componentsを利用可能にする WebComponents.js というポリフィルも提供されています。

Core Elements及びPaper Elementsは、Polymer Coreをベースに作られているため次回紹介するものとし、今回はPolymerの機能の中心となる Polymer Core と、この WebComponents.js について解説します。

Polymer Core

Polymer Coreは、素のWeb Componentsでは煩雑とも言える作成の手順を簡略化し、テンプレート機能やデータバインディングといった、Web Componentsを作る上で土台となる強力な機能を提供します。Core ElementsやPaper ElementsはこのPolymer Coreをベースに構成されています。よって、Core ElementsやPaper Elementsの利用にはPolymer Coreが必要です。

カスタム要素の作成をシンプルに書き換える

まずは、Web Componentsを作る最もシンプルな例を比べてみましょう。

<template id='sample-element-template'>
  <button>Sample Element</button>
</template>
<script>
  var SampleElementPrototype = Object.create(HTMLElement.prototype);
 
  SampleElementPrototype.createdCallback = function () {
    var shadowRoot = this.createShadowRoot();
    var template = document.querySelector('#sample-element-template');
    var clone = document.importNode(template.content, true);
    shadowRoot.appendChild(clone);
  };

  document.registerElement('sample-element', {
    prototype: SampleElementPrototype
  });
</script>

これはPolymerを使うことで以下のようにシンプルに書き換えることができます。

<link rel="import" href="polymer.html">

<polymer-element name="sample-element">
  <template>
    <button>Sample Element</button>
  </template>
  <script>
    Polymer({
      ready: function () {}
    });
  </script>
</polymer-element>

document.registerElement('sample-element')によるカスタム要素の宣言は、Polymerの場合、<polymer-element name=”sample-element”>のように<polymer-element>のname属性によって行われます。

また、カスタム要素の雛形となる<template>からの要素のコピーとShadow Rootの作成をcreatedCallbackで行っていた部分は、<polymer-element>が自動的に行うため省略できます。

このカスタム要素の定義のエントリポイントとなる<polymer-element>は、polymer.htmlをインポートすることで利用可能になります。

<polymer-element>の属性値

<polymer-element>固有の属性値として、次の4つがあります。

• name 定義するカスタム要素名を指定する（必須）。
• attributes プロパティをスペース区切りで指定する（任意）
• extends 継承する他の要素名を指定する（任意）。document.registerElement()の第二引数に指定するextendsと異なり、カスタム要素名を与えることが可能。
• noscript Polymer()をコールする必要がない場合に指定する（任意）
• constructor カスタム要素のコンストラクタ名を指定する（任意）。カスタム要素のコンストラクタは指定した名称でグローバル空間にエクスポートされる。document.registerElement()の返り値に指定する名称と同等。

以下はconstructor属性とattributes属性を指定する例です。

<link rel="import" href="polymer.html">

<polymer-element name="sample-element"
  constructor="SampleElement"
  attributes="foo bar baz">
  <template>
    <button>Sample Element</button>
  </template>
  <script>
    Polymer({
      foo: 0,
      bar: 'Hello!'
    });
  </script>
</polymer-element>

constructor="SampleElement"と指定することで、このHTMLが評価されると、new SampleElement()でインスタンスを作成することができます。

また、attributes="foo bar baz"でプロパティを3つ定義しました。これはPolymer()関数内で初期値を指定しており、この例においてfoo、bar、bazの初期値はそれぞれ0、'Hello!'、undefinedということになります。

プロパティの宣言については、他にもpublishedを使った方法があります。こちらに関してはPolymer公式のPublished properties – API developer guideを参照してください。

ライフサイクルコールバック

カスタム要素のプロトタイプに指定していたライフライクルコールバックは、それぞれ”Callback”が省略され、Polymer()に引数として指定します。

<link rel="import" href="polymer.html">

<polymer-element name="sample-element">
  <template>
    <button>Sample Element</button>
  </template>
  <script>
    Polymer({
      created: function () {},
      attached: function () {},
      detached: function () {},
      attributeChanged: function () {}
    });
  </script>
</polymer-element>

また、素のCustom Elementsでは提供されていないPolymer特有のコールバックとしてreadyとdomReadyがあります。readyは<sample-element>内で行っているShadow DOMの構築やイベントへのリスナの定義といった様々な処理が完了したタイミングで発火し、domReadyは、宣言するカスタム要素に内包されるコンテンツの生成が完了したタイミングで発火します。

テンプレート機能とデータバインディング

Templateの仕様は不活性なHTML要素を提供するという非常にシンプルなものですが、Polymerは、テンプレートエンジンMustacheでお馴染みのブラケット{{}}を使ったテンプレート機能を提供します。

<template>
  <ul>
    <template repeat="{{item in items}}">
      <li>{{item.name}} - {{item.message}}</li>
    </template>
  </ul>
</template>
<script>
  Polymer({
    ready: function () {
      this.items = [{
        name: 't32k',
        message: 'In Canada.'
      }, {
        name: 'hiloki',
        message: 'So hungry.'
      }, {
        name: '1000ch',
        message: 'Feeling lucky.'
      }];
    }
  });
</script>

{{variable}}のように変数名を記述することで値が展開されるほか、コード例の{{item in array}}のようにinを挿入することで、配列の要素を列挙することも可能です。この変数のコンテキストは常に作成するカスタム要素(this)になります。

また、この{{}}による変数の挿入は、次のon-click="{{onClick}}"のような書式でイベントハンドラの設定をする他、そのままデータバインディングにもなります。

<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="sample-element" attributes="message">
  <template>
    <input type="text" value="{{message}}">
    <button on-click="{{onClick}}"><content></content></button>
  </template>
  <script>
    Polymer({
      message: '',
      onClick: function () {
        alert(this.message);
      }
    });
  </script>
</polymer-element>

まず、on-click="{{onClick}}"によってボタンがクリックされた時の処理を指定し、このonClickで指定されるイベントハンドラはPolymer()コンストラクタを参照しています。もちろんここでも変数のコンテキストはカスタム要素自身（this）になっています。

次に<input type=”text” value=”{{message}}”>となっている部分に着目してください。<input>要素の入力値に対し{{message}}という変数を割り当てていますが、これはデータバインディングの力によって入力値が随時message変数に代入されるようになります。先ほどのonClickにおいて、このmessageをアラートで表示するようにしていますが、message変数を介して`<input>要素への入力値が表示されることになります。

最後に、<sample-element>の属性値を宣言しているattributesでもmessageという属性を定義しています。こちらも例外なくデータバインディングが適用され、<sample-element message=”Input Value”>Button</sample-element>とすれば Input Value が初期値として表示されます。

Web Componentsのポリフィルライブラリwebcomponents.js (旧platform.js)

Web Componentsを実際のWebで使うには、Custom ElementsやHTML Importsといった機能が、仕様にそってブラウザに実装されている必要があります。各機能は2014年末の時点で、実装を先行して積極的に進めていたChrome(Version 39.0.2171.71)をはじめ、Opera(26.0.1656.32)、Firefox(34.0.5)はフラグを立てることでサポートされています。

しかしSafari、Internet Explorerは共に実装を見合わせている状態で、ユーザーの環境を考慮するとこれらのブラウザでもWeb Componentsが動くことが望ましいです。

こういった環境をサポートするのが、webcomponents.jsというPolymerチームの開発するポリフィルライブラリです。これをロードすることで、Web Componentsに関する機能が未実装のブラウザでも利用することが可能になります。また、Mozillaが開発するWeb ComponentsのライブラリであるX-TagやUIコンポーネント群であるBrickもサブセットとして利用しています。

• Polyfills – WebComponents.org webcomponents.jsに関する解説
• webcomponents/webcomponentsjs GitHubのリポジトリ

以前まではplatform.jsという名前で知られていましたが、Polymerの公式アナウンスでv0.5.0からwebcomponents.jsへの名称変更とGitHubのリポジトリがWeb Componentsへ移管が発表されました。コミットログを見る限り開発体制も変わっていないように見えますので、役割に応じて分担を適切に図った結果と言えるでしょう。

webcomponents.jsのインストールと利用方法

webcomponents.jsはGitHubのリポジトリからダウンロードすることができます。

• Releases · webcomponents/webcomponentsjs

Bowerもしくはnpmからもダウンロードすることが可能です。プロジェクトのパッケージ管理に合わせて選んでください。

# bowerでインストール
$ bower install --save webcomponentsjs

# npmでインストール
$ npm install --save webcomponents.js

あとはダウンロードしてきたwebcomponents.jsをHTML内でロードするだけです。Web ComponentsのAPIを実行される前に評価されている必要があることに注意する必要があります。公式では、head要素で最初のscript要素としてロードすることを推奨しています。

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>

また、webcomponents.jsはWeb Componentsの仕様4つ全てをサポートしますが、Shadow DOMのポリフィルを除いたwebcomponents-lite.jsもあります。重いShadow DOMのサポートがない分、軽量化されているので、もしShadow DOMを必要としないのであればwebcomponents-lite.jsを選択するのもよいでしょう。

webcomponents.jsのカスタムビルド

Web Componentsのポリフィルを提供するwebcomponents.jsですが、webcomponents-lite.jsのように補完する機能を選べるように、Custom Elements・HTML Imports・Shadow DOMそれぞれ個別のポリフィルを行うカスタムビルドが用意されています。先程のbowerによるインストールでCustomElements.js、HTMLImports.js、ShadowDOM.jsが同梱されているので、これらをロードすることで個別にポリフィルを行うことも可能です。

自身でカスタムビルドを行う場合はリポジトリをクローンし、gulpで用意されているカスタムビルドを実行します。

# リポジトリのクローン
$ git clone git@github.com:webcomponents/webcomponentsjs.git

# クローンしたリポジトリに移動
$ cd webcomponentsjs

# 依存モジュールのインストール
$ npm install

# gulpのbuildタスクを実行
$ gulp build

実行後、distフォルダにそれぞれのファイルが生成されます。ES6の機能であるWeakMapやMutationObserverもポリフィルとして用意され、Web Componentsに関する仕様であるCustom Elements、HTML Imports、Shadow DOMに、内部で使われているのは非常に興味深い点です。

Polymerとwebcomponents.jsの取り扱い

このように、Polymerはカスタム要素を構築する上での機能拡張であり、webcomponents.jsはWeb Componentsの前提となる機能を提供します。よって、「Web Componentsを作る上でPolymerがなければ作れない」ということはありませんし、提供したいブラウザ環境にWeb Componentsの仕様が実装されていればwebcomponents.jsは不要です。

説明した通りPolymerでは、素のWeb Componentsとは少々異なる方法論を強いられます。これは、Web Componentsの仕様が今後変わる場合に、PolymerがAPIのギャップを吸収してくれる可能性を示唆しています。ですが、Polymer自体のAPIの変更がある場合にそれに追従しなければならないですし、Web Componentsの仕様そのものに比べればサポートがいつまで行われるかという懸念もあります。これらを踏まえると、Web Componentsの機能をひと通り理解した上でPolymerを使うことが望ましいと言えるでしょう。

まとめ

Web Componentsの基礎仕様・実践的なコンポーネント作成に続き、今回はWeb Componentsを支えるPolymerについて解説しました。次回はPolymerを実際に使って作られた、便利な基礎コンポーネント群 Core Elements と、Material DesignをWebで実現する Paper Elements について扱います。

この記事では2014年7月にGoogle I/Oで発表されたMaterial Designについて、どのようなコンセプトなのか、これまでのデザインガイドラインと何が違うのか、ポイントをおさえて紹介します。記事の後半では、Material DesignをWebで実現するためのPolymerとPaper Elementsに関しても説明します。

Material Designという視覚的言語

Material Designの目的は、ひとつの視覚的な言語（Visual Language）によって、あらゆるプラットフォーム、あらゆるスクリーンサイズのデバイスで、一貫性のある体験を提供することです。

それを実現するため、伝統的なグラフィックデザインとテクノロジーによる可能性を引き出して開発に取り組み、ガイドラインは生きたドキュメントとして更新され続けるとしています。

フラットな中に、自然な影や動きを取り入れた

Material Designは、フラットデザインを取り入れた他のデザインガイドラインと同様に、伝統的なグラフィックデザイン、たとえばタイポグラフィーやレイアウトの原則を取り込んでいます。文字やグラフィックを中心に構成された現在のアプリやWebに、はるか昔から積み重ねられてきたノウハウを融和させることで、優れたビジュアルが得られます。

しかし、単なるビジュアルのルールだけでは、スクリーンサイズの多様性の中で、UIや体験の一貫性を保つのはどこかで限界があるのかもしれません。そこでMaterial Designは、「Material is the Metaphor」というコンセプトを取り込んでいます。

http://googledevelopers.blogspot.jp/2014/06/this-is-material-design.html

規則性のある影や、連続性のあるモーションなどを、現実世界のメタファとして細部に取り込むことで、深いレベルで一貫性をもった世界を構築しようとしています。これらの表現に、現実の物質世界と同じ物理的性質をもたせることで、認知的な負担を少なくし、より自然にアフォーダンスを受け取れるようにしています。

例えば、フラットな面に影の表現を加えることで、オブジェクトの重なりやヒエラルキーが表現できます。強く影をつけた大きなボタンは、ユーザーの目にひときわ浮き立つプライマリなアクションとして認識されます。

このような影について、Android Lではリアルタイムソフトシャドウとして、現実世界のメタファを通して、より自然な振る舞いになるようエンジニアリングが発揮されています。モーションについても、直線的な動きではなく、現実世界の慣性に従った動きになるようにガイドラインで定められています。

Material Design Paper

Material Designのコンセプトについて詳しくは、PDFで9つの特徴にまとまっています。Google I/Oのデザインブースでは、このPDFの図画が、実際の紙にインクで印刷されたものが頒布されていました。

「具体的な」デザインガイドライン

Material Designのガイドラインとして、具体的にどのようなデザインを実現すれば良いかのドキュメントは、プレビュー版としてすでに公開されています。

以前のAndroid Designにおいても詳細な項目が用意されていましたが、今回のガイドラインでは、そこにアニメーションや陰影の深度に関する項目をはじめとして、多岐にわたり詳細な情報が掲載されています。特徴的なのは、文字のレイアウト、アニメーション、陰影の表現、画像のフェード効果など細部に至るまで、具体的な数値とサンプルをもって表現していることです。

ガイドラインの一例

さらにAndroidの開発ライブラリはもちろん、後半で紹介するPaper Elementsが、ガイドラインを体現した実装として存在しています。具体的なガイドラインと、それを反映した実装の2つが揃うことによって、Material Designのガイドラインは、他のデザインガイドラインよりも確かで、強固なものになっています。

Google I/O でのセッション

• Google I/O 2014 – Material design principles – YouTube
• Google I/O 2014 – Material design: Structure and components – YouTube
• Google I/O 2014 – Material design: Visual style and imagery – YouTube
• Google I/O 2014 – Material design: Motion – YouTube

キーノートの中で紹介されたMaterial Designですが、その後のセッションでもテーマごとに、詳細な内容の紹介がありました。より深く理解したい方は、これらの動画もチェックしてみると面白い話が聞けるはずです。（YouTubeでは英語字幕が表示されるので、聞きやすいです）

Webで実現するためのPolymerとPaper Elements

ここまでMaterial Designについて紹介しましたが、いよいよこのデザイン原則をWebの世界に取り込むため、PolymerとPaper Elementsについて説明します。

はじめにPolymerとは、Web Componentsが変えるWeb開発の未来で説明されたWeb Componentsをより強力に、より柔軟に使えるようにGoogleで開発されているラッパーライブラリです。Web Componentsが注目を集め始めたのと同時に、Polymerの話題も多く目にするようになっています。

Polymerには、そのラッパーとしての機能を活かして作成された、汎用コンポーネント群があります。それがCore ElementsとPaper Elementsです。このうち、Paper ElementsがMaterial DesignをWebで表現するための鍵になりますが、実際に開発するにはPolymer本体に、これらCore ElementsとPaper Elementsを組み合わせて利用します。

ここでは、Rob DodsonによるUnlock the next era of UI development with Polymerというセッション（SlideShare）の内容を参考に紹介していきます。

レイアウトを構築する

はじめにCore Elementsを使ったアプリケーションのレイアウトについて紹介します。Core Elementsには、一般的なナビゲーションパターンのレイアウトを、手軽に制御できるコンポーネントが用意されています。

たとえばcore-header-panelを利用すると、よくある固定ヘッダーとコンテンツ部分の管理ができます。これまで、普通にHTMLとCSSでレイアウトして、インナースクロール用のJavaScriptライブラリを組み込んで実現していたUIが、ひとつのコンポーネントをHTML内に取り込むだけで作れるようになります。

core-drawer-panel (参考スライドP27から引用)

上図のようなドロワーメニューを内包したレスポンシブなレイアウトも、core-drawer-panelを利用すると、drawerとmainという属性をそれぞれ持った要素を、子要素として追加すれば容易に制御できます。

もうひとつレイアウトするための強力な機能が存在します。それがLayout attributesです。これはPolymer本体に備えられた機能です。

layout属性 (参考スライドP35から引用)

このように、layout属性を付与して、要素を並べる方向（vertical, horizontal）や、子要素にflexなどの指定を行うことで、CSSを使わずにHTML側で基本的なレイアウトを制御できます。ここでは一例を紹介しましたが、詳細はPolymerのドキュメントを確認してみてください。

Material Designを使う

いよいよPaper Elementsが登場します。Core Elementsが基本的な機能と素朴な見た目しか持たない汎用コンポーネント群であるのに対して、Paper ElementsはMaterial DesignのガイドラインにおけるUIコンポーネントを、ビジュアルとインタラクションの両面において実装しています。

たとえばpaper-tabsは、次の画像のようなマークアップでMaterial Designで表現されたタブのUIを組み込むことができます。

paper-tabs (参考スライドP44から引用)

このようなPaper ElementsのUIコンポーネントはPaper Elements Samplerで動作デモを確認できます。

Material Designは影や波紋のようなエフェクトといったインタラクションも重要です。Paper Elementsの中にはそのような、特定のUIを表現するものではなく、エフェクトを適用するための要素も用意されています。

paper-shadow (参考スライドP47から引用)

paper-shadowは親要素に、z属性で指定されたコンテンツの深度に応じて、適切な影の表現をつけられます。Material Designでは、影を表現するために、深さを表現するKey Shadowと、オブジェクトの形態を示すAmbient Shadowの2つが使われています。このpaper-shadowもCSSのbox-shadowで2種類の影をかさねて表現しています。

前半で説明したとおり、Material Designにおける影は、ただの装飾ではなく、オブジェクトの階層やユーザーのフォーカスを得るための、意図的な表現です。多くのオブジェクトに、このようなエフェクトを積極的に使っていくことになります。

paper-ripple (参考スライドP46から引用)

paper-rippleは親要素に、clickやtouchしたときのエフェクトを適用できます。デモを見ると、それがどのような効果か分かりやすいはずです。このエフェクトは、親の要素と同じサイズのcanvasを展開して、その上で波紋のようなエフェクトを表現しています。

スタイルを適用する

Polymerの要素は、Shadow DOMが使われているため、従来どおりのCSSセレクタでは、内側の要素にスタイルを適用できません。ここではCSS Scoping Moduleとして定義されている、::shadowと/deep/セレクタを紹介します。

::shadowは、疑似要素としてShadow DOMのルートにアクセスできます。次の例では、Polymerで作られたx-fooが持つShadow DOM内のspanにアクセスして、color: redを指定しています。

<style>
x-foo::shadow span {
  color: red;
}
</style>

<polymer-element name="x-foo" noscript>
  <template>
    <span>Hi!</span> <!-- color: red -->
  </template>
</polymer-element>

<x-foo></x-foo>

/deep/は、::shadowと同じくShadow DOM内へのアクセスを可能にしますが、より強力にネストしたShadow DOMの奥深くまで適用できます。次の例では、x-helloの中にあるすべてのspanにcolor:blueを適用しています。::shadowの場合だと、x-worldの中のspanにはネストしたShadow DOMの境界を越えられず適用されません。

<style>
x-hello /deep/ span {
  color: blue;
}
</style>

<polymer-element name="x-hello" noscript>
  <template>
    <span>Hello</span> <!-- color: blue -->
    <x-world></x-world>
  </template>
</polymer-element>

<polymer-element name="x-world" noscript>
  <template>
    <span>World</span>  <!-- color:blue -->
  </template>
</polymer-element>

<x-hello></x-hello>

一方、Core ElementsにはPolymerの要素間でスタイルを共有するために、core-styleというコンポーネントが用意されています。

core-style (参考スライドP58から引用)

core-styleを使ってid属性が指定されたStyle Producerで定義されたスタイルを、ref属性を指定してStyle Consumerから参照することで、コンポーネントをまたいで特定のスタイルを共有できます。

トランジションを利用する

core-animated-pagesを利用すると、Single Page Applicationのように、ひとつのHTMLで複数のコンテンツを切り替えて表示するときに、トランジションを適用できます。core-animated-pagesも、対象の要素に属性を付与するだけで、トランジション効果を得られます。

<polymer-element name="animated-sample" noscript>
  <template>
    <style>
      section > div { color:white; height: 500px; }
    </style>

    <!-- コンテンツ切り替え用のタブ -->
    <paper-tabs id="tabs" selected="0">
      <paper-tab>ONE</paper-tab>
      <paper-tab>TWO</paper-tab>
      <paper-tab>THREE</paper-tab>
    </paper-tabs>

    <!-- コンテンツとトランジション付与 -->
    <core-animated-pages
      selected="{{$.tabs.selected}}"
      transitions="cross-fade-all">
      <section>
        <div style="background:red">
          <h1>ONE</h1>
        </div>
      </section>
      <section>
        <div style="background:blue">
          <h1>TWO</h1>
        </div>
      </section>
      <section>
        <div style="background:orange">
          <h1>THREE</h1>
        </div>
      </section>
    </core-animated-pages>
  </template>
</polymer-element>

<animated-sample></animated-sample>

core-aniamted-pagesのtransitions属性で、使いたいトランジションの種類を宣言すると、中のコンテンツが切り替わるときにトランジションが適用されます。

Paper Elementsのサンプルアプリ

Paper Elementsを駆使することで、Material DesignがWebでどのように表現されるのかは、Topekaというサンプルのクイズアプリが用意されています。スマートフォンにも対応しているので、モバイルデバイスでどの程度動いてくれるのかも、自分でさわって確かめてみると面白いはずです。

http://www.polymer-project.org/apps/topeka/

さいごに

今回はMaterial Designとそれを実現するPolymerとPaper Elementsについて、Google I/O 2014での情報をもとにご紹介しました。Material DesignもPolymerも、Preview版というステータスであり、まだ始まったばかりのプロジェクトです。これらが、今後どのように普及し、Webの世界にも影響を与えていくのか楽しみに思います。

先日開催された第49回HTML5とか勉強会でも「Material Design with Polymer」と題して、同じようなテーマについてご紹介しました。YouTubeとSpeakerDeckでそれぞれ当日の録画とスライドが公開されているので、こちらも合わせてご覧いただけると理解が深まるはずです。Material Designについて詳しく説明していたり、Paper Elementsを利用したオリジナルのデモを行っていたりもしますので、ぜひご覧ください。

Web Componentsが変えるWeb開発の未来

Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。

• 「なぜWeb Componentsが生まれたのか」
• 「Web Componentsが何を解決してくれるか」

この2点を上記セッションに沿って解説していきます。

HTML/CSSが持つ弱点

Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。

しかし、このようにせっかく作った部品を再利用しようとすると、たちまちリスクを生んでいました。これはHTMLやCSSがスコープを持たず、既存のHTML/CSSを上書きし汚染してしまう可能性を持っていたためです。一般的なプログラム言語にはスコープが存在しますが、Cascading Style Sheetの名の通り、記述された内容は全て後勝ちで宣言されます。CSSのクラスはJavaScriptに例えるならば、全てグローバル変数のような存在であると言えるでしょう。

これに対して、開発者は様々な工夫を行ってきました。CSSに命名規則を設けてより強固な設計概念を作ったり、コンポーネント管理をJavaScript上で行うべくライブラリを作ったり…。しかしそれらは共通の構成を持っているわけでもなく、APIもバラバラです。つまりそのルールの元でしか通用せず、万人共通の解決策にはなりません。

Web Componentsあらわる

そこで生まれたのがWeb Componentsです。Web Componentsは以下の4つの仕様から構成されます。

• Custom Elements – Custom Elementsによってネイティブで実装されていない、新しいHTML要素を定義することが可能になりました。定義された要素はHTML中に書いたり、document.createElement('new-element')等、既存のタグと同じように使うことができます。
• Templates – Templatesはtemplateタグを使った、DOMベースで利用可能なテンプレートの仕様です。HTMLをテンプレートとして利用したいケースは多々ありましたが、それを実現するにはscript type='text/template'等の、ハックアイデアを使うしかありませんでした。
• HTMLImports – HTMLImportsはlinkタグを使った、HTMLをロードするための新たな仕様で、これを使うことで断片化したHTMLのロードを容易に行うことができるようになります。HTMLにおいて、サブリソースのロードは珍しくありません。画像であればimg、音声であればaudio、スクリプトであればscriptを使ってロードしますが、HTMLのロードはiframeを使う必要がありました。しかし、iframeを使ったロードは制限が多く、XMLHttpRequestを使う方法もコンポーネントのロードとしては利用し難いものです。
• Shadow DOM – 前述の通りHTML/CSSにはスコープが存在しませんが、Shadow DOMがそれを解決します。DOMのAPIとして追加されたcreateShadowRoot()を使うことで、Shadow Rootという他のDOMに干渉されないような新しいノードを生成します。

Shadow DOMとTemplatesを使って新たな要素を構成し、Custom Elementsを使って定義します。それらを集約したHTMLファイルをHTMLImportsを使ってロードすることで、晴れて新しい要素を使うことが可能になります。これがWeb Componentsの考え方です。

Web Componentsが解決してくれること

セッション中にBidelmanも触れているとおり、既存のHTML+CSSによるWebページの構築は、混沌とした状態を生み出してしまうことは周知の事実です。 以下はGmailの例ですが、アプリケーションが複雑化すればするほどDOMのネストは深くなり、セマンティクス性は皆無です。

でも、Web Componentsを使って要素を再定義して、もし以下のようにできたらクールではありませんか？

<mail-label-list>
  <mail-label type='starred'>スター付き</mail-label>
  <mail-label type='important'>重要</mail-label>
  <mail-label type='sent'>送信済みメール</mail-label>
  <mail-label type='draft'>下書き</mail-label>
</mail-label-list>
<mail-list>
  <mail-item title='...' to='...' from='...' datetime='...' label='...'></mail-item>
  <mail-item title='...' to='...' from='...' datetime='...' label='...'></mail-item>
  <mail-item title='...' to='...' from='...' datetime='...' label='...'></mail-item>
</mail-list>
...

また、命名規則やJavaScriptのライブラリに頼ったコンポーネント化とは異なり、 標準化を目指したブラウザの仕様である ことも重要なポイントです。これは、仕様の策定が進み各ブラウザの実装が追いつけば、ライブラリや方法論に依存せずコンポーネントを再利用することができることを意味しています。

Web Componentsが抱える課題等

ブラウザの対応状況

• 2013年時のブラウザネイティブ対応状況
• 2014年時のブラウザネイティブ対応状況
• PolymerのPlatform.jsのポリフィル利用時

Web Componentsの過渡期であった2013年の段階では、ChromeとFirefoxが、Templates・Custom Elements・Shadow DOMをそれぞれ部分的にサポートしている状態でしたが、2014年のGoogle I/O時点ではChrome、Firefox、Operaが大半をサポートしているというところまで来ています。そして、Polymerチームが開発しているWeb Componentsのポリフィルライブラリである Platform.js を使うことでSafari、Internet Explorerを含めたほとんどのブラウザでWeb Componentsを利用することが可能になりました。

パフォーマンス

実行速度面についてはもちろん、実際に動作するPC・モバイルといったデバイスによって異なるので一概には言えませんが、プロセッサやメモリの進化はネットワーク等に比べて早いのと、ブラウザのJITコンパイル等の最適化が進むに連れて、気にならないレベルになるかと予想（期待）しています。

また、Webパフォーマンスの初歩としてHTTPリクエストを削減するというアプローチが広く浸透していますが、Web Componentsを使ったリソースの断片化は相反する関係にあると言えます。先程のブラウザの実装状況や仕様の策定状況を考慮しても、しばらくはPolymer等のポリフィルライブラリを利用するのが現実的かと思います。従ってWeb Components同士にHTMLImportに加えて、ネットワークを介して必要になるリソースが、今までより多くなるのは間違いないでしょう。

Polymer/vulcanizeという、事前にWeb Componentsを結合するビルドツールもありますが、ネットワーク越しにあるコンポーネントをロードしたいケースも多々あるでしょうから、今後更なる最適化アプローチが現れるかもしれません。

Polymer Designerを使ったWeb Componentsの作成

Polymerを使ったコンポーネントの作成は、ソースコードレベルでももちろん可能ですが、今回はPolymer designer toolを使ってみます。これはブラウザ上で、Polymerの要素を組み合わせて新たなコンポーネントをGUIで作ることが可能なサービスです。ちなみに、このサイト自体がPolymerを使ったWeb Componentsで構成されており、非常に興味深いです。

yt-search-video + speech-mic

今回はyt-search-videoというYouTubeにある動画を検索し表示するコンポーネントと、speech-micというマイク入力を認識し扱うコンポーネントを組み合わせて、音声入力でYouTubeの動画を検索するコンポーネントを作成してみます。

コンポーネントの選択

画面右下のPALETTEにコンポーネントの一覧があります。使いたいものを選択し、画面左の方眼紙のようなキャンバスにドラッグアンドドロップします。今回はyt-search-videoとspeech-micを配置します。

配置されたコンポーネントは、TREEに一覧表示されます。 TREE中で選択している要素はキャンバス内でもハイライトされていたり、右上のPROPERTIES や STYLESの表示対象になったりと、直感的に使うことが可能です。

データバインディングの設定

マイクの入力値をYouTubeの検索クエリと紐付けたいので、その設定を行います。マイクの入力値はspeech-micのcompleteTranscriptなので、それをyt-search-videoのImFeelingLuckyとバインディングします。

完成！

これで完成です。画面左上の <> ボタンをクリックすると生成されたコードを見ることが可能で、実際の挙動もデザイナー上で確認することが可能です。生成されたコードや依存コンポーネントをインポートすれば、もちろん実際にmy-elementとして使うことができます。簡単な手順で作成可能ですので、よかったら試してみてください。

生成されたコードを見てみると、completetranscript="{{ $.yt_search_video.ImFeelingLucky }}"とPolymerのお作法通りにバインディングされています。このデータバインディングはWeb Componentsに備わっているわけではなく、Polymerが提供する強力な機能の1つです。

<link rel="import" href="../components/polymer/polymer.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #yt_search_video {
        width: 300px;
        height: 300px;
        left: 280px;
        top: 160px;
        position: absolute;
      }
      #speech_mic {
        left: 640px;
        top: 290px;
        position: absolute;
      }
    </style>
    <yt-search-video id="yt_search_video"></yt-search-video>
    <speech-mic completetranscript="{{ $.yt_search_video.ImFeelingLucky }}" id="speech_mic"></speech-mic>
  </template>

  <script>

    Polymer('my-element', {
      
    });

  </script>

</polymer-element>

Web ComponentsおよびPolymerに関する資料

Polymer公式

• Getting started – Polymerの公式チュートリアルです。Web Componentsの基礎を抑えた後は、こちらをどうぞ。
• API developer guide – いざPolymerのデバッグをする時は、こちらを見ることになるかもしれません。

HTML5Rocks

　HTML5RocksにもWeb Componentsに関する記事がいくつもあります。えーじさんが日本語訳をしてくれてます。

• Shadow DOM 101 – Shadow DOMの記事
• HTML で利用可能になった Template タグ – クライアントサイドのテンプレートの標準化 – Templatesの記事
• Custom Elements – HTMLに新しい要素を定義する Custom Elementsの記事
• HTML Imports – ウェブのための#includeHTML Importsの記事

Others

ほかにも参考になるリソースがありますので紹介します。

• なぜ Web Components はウェブ開発に革命を起こすのか – えーじさんの記事です。Web Componentsの歴史やコンセプトおよび、仕様策定の現状などがわかりやすく書かれているので、一読することをオススメします。
• Web Componentsで行うHTMLのコンポーネント化 – こちらは私が以前会社のブログに寄稿したものです。Web Componentsの概要と利用方法を、コードまで落としこんで詳細に解説しています。
• Why Web Components Aren’t Ready for Production… Yet – 英語です。ブラウザの対応状況、Polymerが行っているポリフィルの仕組み、パフォーマンスについての言及など、様々な考察がされています。

まとめ

以上、簡単ではありますが、Web ComponentsとPolymerについて紹介しました。

Web Componentsが普及すれば、今までHTML/CSSが備えていなかったパーツの可搬性は解決され、コンポーネント（機能を含めたUIパーツ等）の流用は容易になり、今まで行っていた機能の再開発をする必要がなくなることも期待できます。

デザイナーがデザインし、ディベロッパーがHTML/CSSを組み、インタラクションをつける人がJavaScriptを書いているような分断されがちであったワークフローも徐々に境がなくなり、1つの機能単位でコンポーネントを実装するようなフローになっていくかもしれません。

今後もWeb Components/Polymerの動向に注目です。Web Components及びPolymerのより詳細な実装については、次回以降の記事で解説します。