Polymer 1.0最新情報！（前編）ーPolymer 1.0とPolymer Catalog、活用事例の徹底解説

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 [ライブサイト] [コード]

（後編に続きます）