河合良哉

Polymer 1.0最新情報!(後編)ーGoogle I/O Web Appの作り方、Polymer Starter Kitで始めるMaterial Design、etc.

本記事は、「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のほとんど全てが使われている。

NewAPIs_IOWA
使っている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が実現されている、とのことでした。

template
TemplateとHTML Importsを使った動的なコンテンツを読み込み

import_Pomyler1.0
Polymer 1.0で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の実行のようなページを構成するために必要な処理が実行できるようになる

webanimation_promises
Material Designを実現しているAnimation flowのコード

このように、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の世界では真新しい機能になります。もちろん、アプリが開いていない状態でも通知を受けることが可能です。

pushnotification
プッシュ通知を表示させた例

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

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

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

PushNotification
プッシュ通知の送信

プッシュ通知を使う目的は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のようになることも少なくない」と続きます。

draw_baby
赤ちゃんの顔のスケッチ: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つにまとめた結果です。

PolymerStarterKit
Polymer Starter Kit

ここから「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つの例でしかないので、必要に応じてカスタマイズすることも可能。

adaptiveui
Adaptive UI
リンク:Adaptive UI(英語)

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」をキャッシュのストラテジとして、キャッシュしたいファイル名を予め宣言しています。

Platinum Element
Plutinum Elementsを使ったオフラインキャッシュのコード
リンク:Platinum Elements(英語)

Production-ising Cache

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

BuildByGulp
Gulpを使ったビルドシステム

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単独のカンファレンスの告知がありました。

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

Polymer Summit
Polymer Summit@アムステルダム 2015/09/15

PolymerTeam
Polymer Teamの皆さん

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

(Speaker: Matthew McNulty)

あとがき

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

webaudio-controls
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のセッションでした。

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js Polymer Progressive Web Apps React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket WebVR