目次


Polymer を導入して Web Components による革命に参加する

再利用可能なビジュアル・コンポーネントと機能コンポーネントを組み合わせて今風の Web アプリケーションとモバイル・アプリケーションをアセンブルする

Comments

HTML ブラウザーは、広く採用されているあらゆるテクノロジーと同じように、時間が経つにつれて時代遅れとなり、重要でなくなるリスクにさらされています。ネットワークで接続された情報へのアクセス・パターンが変化し、主流のユーザーが UI に新しいフィーチャーを求めるなか (そして競争相手となる別のテクノロジーが登場するなかで)、ブラウザー・ベンダーは、生き残り続けるために適応していかなければなりません。このニーズが認識されて誕生したのが、W3C Web Components です。この標準化を目的としたコミュニティー・イニシアティブは数年前に始まり、最近のあらゆるブラウザーのベンダーによってサポートされています。Web Components は、いくつかのドラフト仕様からなり、これらの仕様一式により、開発者は拡張可能かつ保守しやすい形で、再利用可能なカスタム HTML 要素 (Web コンポーネント) を作成して共有することができます。

Polymer は、豊富なツールによって十分にサポートされた、クロスプラットフォームのオープンソース・ライブラリーとして、新しく登場した Web Components 標準に従っています。今風の Web アプリケーションを作成したいと切望している開発者にとって、Polymer の登場は時期を得たものでした。Web アプリケーションのデザインは、今やシングル・ページの極めてインタラクティブなアプリケーションへと向かいつつあります。また、Web テクノロジーを使用して作成されたハイブリッド・モバイル・アプリケーションは、今では例外的なものではなくなり、標準的なものになってきています。今風の Web アプリケーションを作成するにしても、ハイブリッド・モバイル・アプリケーションを作成するにしても、Polymer を使用すれば、従来の JavaScript で DOM を操作するライブラリーを使用する場合より遥かに容易な作業となります。

Polymer (および Web Components ライブラリー全般) を扱う場合の立場には、次の 2 つがあります。

  • 利用者として: Web コンポーネントを利用して独自のアプリケーションを作成します。
  • 作成者として: 他の開発者と共有するため、あるいは独自のアプリケーションのために、再利用可能な Web コンポーネントを作成します。

このチュートリアルでは一連の例を通じて、Polymer を紹介するとともに、Polymer の Web コンポーネントを使用する方法、さらにはカスタマイズする方法を紹介します (サンプル・コードを入手するには、「ダウンロード」を参照してください)。関連するチュートリアルの「Polymer を使用して再利用可能なカスタム Web コンポーネントを作成する」では、IBM Bluemix の Mobile Cloud ボイラープレートを使用して独自の Web コンポーネントを作成する方法をステップ・バイ・ステップで説明しています。

Polymer: クロスプラットフォームの Web コンポーネント・ライブラリー

Polymer は、アプリケーションを作成するためや、新しい Web コンポーネントを作成するために、組み合わせて使用することが可能なビルド済みの Web コンポーネントを集めたライブラリーです。Polymer には、最近のすべてのブラウザーで同じように動作することを確実にする、業界標準のポリフィルも含まれています。ポリフィルが必要となる理由は、ブラウザー・ベンダーが今でもそれぞれに独自のペースで Web Components 標準のさまざまな側面の実装をアクティブに行っているからです。

Polymer は、あるブラウザー・ベンダーが、自社の製品を Web Components ベースとなる将来に適応させるために行った投資の成果です。Polymer 開発チームはこれまで前例がないほど、コア・ブラウザー (Chrome) の開発チームと密に連絡を取り合っていることから (これは、コアの Chrome でどのような変更が行われても、このライブラリーが高いパフォーマンス・レベルを維持し、正常に機能するようにするためです)、Chrome の開発はこのライブラリーと緊密に結び付いています。この記事を執筆している時点で、Polymer は「開発プレビュー」の段階にあります。

図 1 に、Polymer の大まかな構造を示します。

図 1. Polymer の大まかな構造

現在、Polymer のプラットフォーム実装を利用するアプリケーションでは、複数のブラウザーに対して Web Components を利用することができます。このプラットフォーム実装を利用するには、platform.js を読み込みます。Polymer は、このライブラリーと Polymer の各種コンポーネントが、Web Components 仕様をさまざまなレベルでネイティブ実装する各ブラウザーに対して同じ動作をすることを保証します。

Polymer は、このライブラリーと Polymer の各種コンポーネントが、Web Components 仕様をさまざまなレベルでネイティブ実装する各ブラウザーに対して同じ動作をすることを保証します。

Polymer を扱う場合、DOM、CSS、および JavaScript に関する知識や魅力は、これまでと変わらずに活かされます。しかもHTML、CSS、そして JavaScript だけを使用して、UI やアプリケーションの機能のある部分を完全にカプセル化した、再利用可能なカスタム HTML コンポーネントを作成することができます。

Polymer は、Web コンポーネントのデプロイメントに関連する作業に加え、コンポーネントの登録、ライフサイクルの管理、属性の処理、CSS スタイルの設定、メソッドの呼び出し、イベントの処理も支援します。Web 開発コミュニティーは現在、公開コンポーネントとして増え続けるオープンソースのライブラリーをシェアしています。他の開発者が作成した Web コンポーネントを使用する開発者として新たに学ばなければならないことは、新たに扱うことになる HTML タグのセットのみです。

ドロップイン式レスポンシブ・レイアウト・コンポーネント

例えば、アプリケーションを開く端末の画面サイズに応じて、アプリケーションのレイアウトが変更されるようにしたいとします。モバイル端末の小さいサイズの画面には、小さい画面に適したレイアウトを使用し、デスクトップ・ブラウザーには別のレイアウトを使用するといった具合です。この最初の例では、Polymer を使用してレスポンシブ・レイアウトを作成する方法がわかります。

図 2 に、デスクトップのブラウザーまたはタブレットのブラウザーでのレイアウトを示します。

図 2. デスクトップの画面サイズでのレスポンシブ・レイアウト

デスクトップ用のレイアウトでは、左側にサイドバー・パネルが表示されます。ナビゲーションのために使用することになるこのパネルには、そのパネルに固有の見出しと、クリックすると選択できるメニュー項目があります。典型的なアプリケーションでは、ナビゲーション・パネルで項目を選択すると、選択されたコンテンツが右側のパネルに表示されます。右側のパネルにも、最上部にそのコンテンツに固有のタイトル・ツールバーがあります。

端末の画面幅が狭くなると、左側のサイドバー・パネルが引っ込んで、コンテンツ・パネルだけが表示されます。残りのパネルのツールバーには、自動的にハンバーガーの形をしたメニュー・ボタンが表示されます。図 3 に、小型端末でのレイアウトを示します。

図 3. 携帯電話の狭い画面でのレスポンシブ・レイアウト

このパラグラフの下にある「レイアウトを表示する」ボタンをクリックして、デスクトップのブラウザーと携帯電話のブラウザーのそれぞれでサンプル・ページを開き、2 つのレイアウトを比較してください。あるいは、このチュートリアルのすべてのサンプルと同じく、デスクトップ版でブラウザー・ウィンドウの幅を手で調整し、携帯電話のブラウザーでの動作をシミュレートすることもできます。

ハンバーガー型メニュー・ボタンをタップまたはクリックすると、ドロワーが左からスライドインして、図 4 に示すようにメイン・パネルの右側の部分を占める動作 (これは一般に、有効な選択肢のリストを表示するための動作です) を観察してください。

図 4. 左からスライドインしてコンテンツ・パネルに重ねられるナビゲーション・スライドバー・メニュー

標準的な HTML/JavaScript ライブラリーを利用している場合、それらのライブラリーを使って同じような動作を実装するには、大量のコードが必要になることはご存知のことでしょう。リスト 1 に、Polymer を使用してレスポンシブ・レイアウトを作成するためのコードを記載します。

リスト 1. <core-scaffold> Polymer コンポーネントを使用したドロップイン式レスポンシブ・レイアウト
<!doctype html>
<html>

<head>
  <title>unquote</title>
  <meta name="viewport" 
  content=
  "width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <script src="../bower_components/platform/platform.js"></script>
  <link rel="import" 
     href="../bower_components/core-scaffold/core-scaffold.html">
</head>

<body>
  <core-scaffold>
  </core-scaffold>
</body>

</html>

リスト 1 では、<script> タグ内の platform.js によって Polymer プラットフォーム・ライブラリーが読み込まれます。その他のコンポーネントを読み込むには、HTML Imports が使用されます。この例では、core-scaffold.html によって <core-scaffold> Web コンポーネントが読み込まれます。

このように、リッチでレスポンシブなサイズ変更の動作を生成するために必要なことは、<core-scaffold> Web コンポーネントを読み込むことのみです。<core-scaffold> は新たに使用できるようになった HTML タグのように見えますが、実際には、Polymer のコア要素ライブラリーに含まれるカスタム Web コンポーネントです。Polymer はそのコアに有用な Web コンポーネントのすべてを揃え、Web 開発エクスペリエンスをこれまでより遥かに単純なものにすることを約束しています。このリンク先のドキュメントを閲覧すると、コンポーネントの実際の動作を確認することができます。

<body> には <core-scaffold> タグしか含まれていないことに注目してください。ここに含める必要があるのは、たったこれだけです。それは、<core-scaffold> カスタム要素には複雑なレスポンシブ UI の処理が完全にカプセル化されているためです。

Polymer のコンポーネント (<core-scaffold> など) を他のカスタム Web コンポーネントと組み合わせたり、Polymer のコンポーネント同士を組み合わせたりすることで、ページを作成することやシングル・ページの Web アプリケーション (あるいは独自のカスタム Web コンポーネント) を作成することができます。

属性を使用して Web コンポーネントをカスタマイズする

標準の HTML 要素と同じく、カスタム Web コンポーネントにも、さらなるカスタマイズをするために使用できる属性があります。Polymer の <core-scaffold> コンポーネントで使用できる属性には、以下の 2 つがあります。

  • responsiveWidth: サイドバーを左側に引き込む条件とする、端末画面の最小幅を制御します。この属性の値は、デフォルトで 600px に設定されます。
  • mode: コンテンツをスクロールするときの見出しの動作を制御します。mode の値は、デフォルトで seamed に設定されます (このチュートリアルの次の例で、デフォルト以外の modes 値を探ります)。

レスポンシブ・レイアウトが幅の狭いバージョンに切り替わるポイントを試すために、リスト 1responsiveWidth の値を小さくしてみてください。

<core-scaffold responsiveWidth='300px'></core-scaffold>

: HTML Imports のポリフィルを機能させるには、Web サーバーからアプリケーションを実行する必要があります。

カスタム要素の内部要素も HTML、CSS、および JavaScript で実装されますが、実装の詳細は、カスタム要素を使用するユーザーには見えないようになっています。カスタム要素の Shadow DOM が詳細をカプセル化するおかげで、コードとコンポーネントの内部実装との間の JavaScript 名前空間の衝突や CSS スタイルの汚染について懸念する必要はありません。

<core-scaffold> の内部は、他の複数の Polymer コア・コンポーネントで構成されています。次に、これらのコンポーネントをカスタマイズする方法を説明します。

合成: Web コンポーネントのベース

Web アプリケーション (またはシングル・ページのモバイル・アプリケーション) のコア UI 構造は、追加のビジュアル Web コンポーネントを <core-scaffold> インスタンスに組み込むことによって作り上げることができます。次の例では、サイドバーに選択メニューを追加する方法を示すとともに、コンテンツを縦方向にスクロールすると、コンテンツ・パネルの中で必要以上に縦方向に長くなっている見出しが短くなる仕組みも紹介します。

幅の狭い画面でアプリケーションを起動した場合、見出しの領域は必要以上に縦方向に長くなり、タブ・バーなどの他の UI コンポーネントを追加するのに十分なスペースができます (図 5 を参照)。

図 5. 必要以上に縦方向に長い見出しが表示されたコンテンツ・パネル

パネルのコンテンツをスクロール・ダウンすると、縦方向に長い見出しは、標準のツールバーの高さまで短くなります (図 6 を表示)。

図 6. 標準のツールバーの高さまで短くなった縦方向に長い見出し

コンテンツをもう一度先頭までスクロール・アップすると、見出しが縦方向に長くなります。いつでもハンバーガー型メニュー・ボタンをクリックすると、サイドバーが表れ、タイトルと dW ロゴを示すツールバーと、完全なメニューが表示されます (図 7 を参照)。

図 7. 引き出された状態のサイドバー・ドロワーに表示された選択可能なメニューとタイトル・ツールバー

この例のコードは、dwpcompose/index.html にあります (「ダウンロード」を参照)。図 8 に、組み合わされて骨格となる UI を形成する Web コンポーネントを示します。

図 8. Polymer コア・コンポーネントを組み合わせて構成された UI

この場合のコードには、さらに多くの HTML import が含まれています。Roboto フォント (モバイル用の簡潔なフォントで、現在の Android 端末のメインのフォント) 用の import をはじめ、それぞれの import がこの複合構成に含まれる Web コンポーネントのいずれかに対応しています。

<link rel="import" href="../bower_components/font-roboto/roboto.html">
  <link rel="import" href="../bower_components/core-scaffold/core-scaffold.html">
  <link rel="import" href="../bower_components/core-icon-button/core-icon-button.html">
  <link rel="import" href="../bower_components/core-menu/core-menu.html">
  <link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
  <link rel="import" href="../bower_components/core-item/core-item.html">

現在、<core-scaffold>mode 属性が waterfall-tall に設定されており、Web コンポーネントに対し、縦方向に長い見出しを短くする処理を行うように指示しています。<body> タグに設定された unresolved 属性は、一部のブラウザーでの FOUC (Flash of Unstyled Content) による不適切な表示を防ぐコードを有効にします。touch="auto" 属性により、サポートされているすべてのブラウザーで、一貫してタッチ動作の処理が行われるようになります。

<body unresolved touch="auto">
  <core-scaffold mode="waterfall-tall">

引き込み式のサイドバーは、<core-scaffold> 要素内に構成されています。見出しを構成するコンポーネントは、<core-header-panel> コンテナー内にある <core-toolbar><core-menu> の 2 つです。

<core-header-panel> 要素に設定された navigation 属性は、<core-scaffold> コンテナーに対し、ナビゲーションに関する格納可能なドロワーにこの要素を使用するように指示します。<core-header-panel> 要素にはまた、値が “seamed” に設定された mode 属性があり、すべてのコンテンツが見出しと一緒にスクロールすることを意味しています。dW ロゴ・アイコンとタイトルが含まれているのは、<core-toolbar> 要素です。

<core-header-panel navigation flex mode="seamed">
  <core-toolbar><img src='/images/dwlogo.svg' width='50px' height='30px'>
  <span flex>Compose</span>
  </core-toolbar>

<core-menu> 要素には、s1s2 という名前の 2 つの項目が含まれています。selected 属性の値は s1 になっているため、初期状態では項目 s1 が選択されています。2 つのメニュー項目に使用される explore という名前のアイコンは、(前にインポートした) <core-icon> コレクションから提供されます。

  <core-menu  id='menu'  selected="s1" >
    <core-item name="s1" icon="explore"  label="Selection 1"></core-item>
    <core-item name="s2" icon="explore"  label="Selection 2"></core-item>
  </core-menu>
</core-header-panel>

使用可能なアイコンとそれぞれの名前については、Polymer の「Icons」ページで確認することができます。

右側パネルのツールバーに表示されるハンバーガー型ボタンは、このツールバーのコンポーネントによって内部で管理されます。ただし、tool 属性を要素に追加することにより、このツールバーに要素を追加することができます。この例では、「Components」というタイトルをツールバーの一番下に追加しています。また、ツールバーの右側には、設定ボタン (実際には、more-vert という名前のアイコンが指定された <core-icon-button> 要素) を追加しています。中央の空きスペースは、flex 属性が指定された空の <span> が占拠しています。Polymer は、直感的な宣言型構文によるレイアウト属性 (ここで使用している flex など) をサポートしているため、ベースとなる CSS の Flexbox のデプロイメントが大幅に単純化されます。

最後になりましたが、同じく重要な点は、content クラスが指定された <div> は、<core-scaffold> の右側パネルのコンテンツ領域に「分配 (distribute)」(「挿入」を意味する Web Components 用語) されます。

 <div tool class="bottom indent">Components</div>

  <span tool flex></span>
  <core-icon-button tool icon="more-vert" on-tap="{{settingsAction}}"></core-icon-button>

  <div class="content">First line<br/>Second line</div>
  </core-scaffold>

</body>

Web コンポーネントによるビジネス・グラフの描画

ここからは、この scaffold を拡張し、データを追加して、アプリケーションを作成する作業に移ります。

次の例では、Web コンポーネントを使用してビジネス・グラフを描画します。このアプリケーションは、地域別売上グラフと月間総売上グラフの 2 つのうち、メニューの選択に応じていずれか一方の売上グラフを表示します。

引き込み式のドロワー・サイドバーを使用して、いずれかのグラフを選択することができます (図 9 を参照)。

図 9. 2 つの売上グラフを選択するためのサイドバー

「2014 Regional Sales (2014 年地域別売上)」を選択すると、図 10 の円グラフが表示されます。

図 10. 地域別売上を示す円グラフの表示

「2014 Global Monthly (2014 年月間総売上)」を選択すると、図 11 の棒グラフが表示されます。

図 11. 月間総売上を示す棒グラフ

現在のオープンソース・コミュニティーには、すぐに使用できる何百もの既製の Web コンポーネントが揃っています。この数は、市販の Web コンポーネントとともに、程なく数千に膨れ上がることでしょう。とりわけ人気の高い Web コンポーネント・リポジトリーとしては、Google Web Components (この例で使用している <google-chart> コンポーネントの出所です) とcustomelements.io の 2 つが挙げられます。それぞれの Web コンポーネントのドキュメントを読んで、利用できる属性、メソッド、イベント、統合に関する注意を理解してください。

以下のように、Bower を使用して Web コンポーネントをインストールすることができます。

bower install GoogleWebComponents/google-chart --save

このアプリケーションのコードは、dwpgraph/index.html にあります (「ダウンロード」を参照)。<google-chart> コンポーネントは、HTML Imports によってコードに読み込まれます。

<link rel="import" href="../bower_components/google-chart/google-chart.html">

このサンプル・アプリケーションでは、Web コンポーネントのスタイルを CSS で設定する方法や、イベントの処理、属性の変更、メソッドの呼び出しを行う方法もデモンストレーションします。

CSS で Web コンポーネントのスタイルを設定する

組み込み HTML 要素の場合と同じく、Web コンポーネントにはあらゆる CSS スタイルを適用することができます。

売上グラフ・アプリケーションのコードでは、<style> セクションに <google-chart> 要素のスタイル設定 (幅の設定) があります。

google-chart {
      width: 380px;
   }

Web コンポーネントからのイベントを処理する

標準 HTML 要素と同じように、Web コンポーネントもユーザー操作やその他の入力に応じてイベントを起動することができます。例えば、ユーザーが <core-menu> 項目をタッチまたはクリックすると、core-select イベントが起動されます。

イベントのハンドラーを作成するには、メニューにイベント・リスナーを追加します。ハンドラーを追加するためのコードは、以下のとおりです。

 var menu = document.querySelector('core-menu');

 menu.addEventListener( 'core-select', function (evt) {
    ... event handler logic ...
});

このアプリケーションのイベント・ハンドラー・ロジックは、選択された売上グラフを表示するために、<google-chart> Web コンポーネントの属性を操作します。これらのグラフのデータは、ハードコーディングされた JSON 対応 JavaScript オブジェクトから提供されます。本番アプリケーションの場合は、ネットワークを介してデータベースからデータをフェッチすることができます (おそらく、Polymer の <core-ajax> コンポーネントを使用することになります)。

カスタム Web コンポーネントの属性に変更を加える

Web コンポーネントには、宣言によって変更できる属性やプログラムによって変更できる属性が含まれています。これは、前に <core-scaffold> コンポーネントの responsiveWidth 属性で試したとおりです。売上グラフ・アプリケーションのイベント・ハンドラーでは、<google-chart> コンポーネントの 4 つの属性に、プログラムによって (DOM ノードの setAttribute() メソッドを使用して) JSON データ・ソースからの値が設定されます。

core-select イベントは、項目の選択が解除された場合にも起動されるため、isSelected フラグをチェックすることによって、項目が選択されている場合にのみロジックが実行されるようにしています。

menu.addEventListener( 'core-select', function (evt) {
   if (evt.detail.isSelected)  {
    var chart = document.querySelector('google-chart');
    var scaffold = document.querySelector('core-scaffold');
    var graph = document.getElementById('graph');
    var selectedGraph = analytics[menu.selected];
    chart.setAttribute("type", selectedGraph.type);
    chart.setAttribute("options", selectedGraph.options);
    chart.setAttribute("cols", selectedGraph.cols);
    chart.setAttribute("rows", selectedGraph.rows);
    
    graph.innerHTML = selectedGraph.name;
    console.log(menu.selected);
    scaffold.togglePanel();
  }
});

Web コンポーネントのメソッドを呼び出す

カスタム Web コンポーネントは、Web コンポーネントのユーザーが直接呼び出せるメソッドを実装することができます。<core-header-panel> の場合、scaffold が幅の狭い表示モードになっているときにドロワー・パネルをスライドイン/スライドアウトするために、togglePanel() というメソッドを呼び出すことができます。

イベント・ハンドラーのコードでは、chart 要素の属性が更新された後、scaffold.togglePanel() の呼び出しによってドロワー・パネルを閉じます。

chart.setAttribute("type", selectedGraph.type);
chart.setAttribute("options", selectedGraph.options);
chart.setAttribute("cols", selectedGraph.cols);
chart.setAttribute("rows", selectedGraph.rows);		
...
scaffold.togglePanel();

地図アプリケーション

Web コンポーネントは、視覚的な外観とユーザー・インタラクションの処理をカプセル化するだけでなく、データ・アクセス、アプリケーション・ロジック、そしてネットワーク通信を含めた完全なアプリケーション機能をカプセル化することもできます。

次の例では、動作する状態のインタラクティブな地図コンポーネントをまるごとアプリケーションに追加します。

このアプリケーションは、3 つの場所 (Raleigh (ラーレー)、San Francisco (サンフランシスコ)、San Diego (サンディエゴ)) を項目に持つメニューを表示します (図 12 を参照)。

図 12. 場所を選択するためのメニューを表示するアプリケーション

いずれかの場所を選択すると、選択した地域の地図がコンテンツ・パネルに表示されます。これらの地図は完全にインタラクティブなもので、航空写真に切り替えたり、ズームインしたりするなどの操作を実行することができます。これはすべて、ドロップイン式 Web コンポーネントのおかげです。

図 13 には、San Francisco (サンフランシスコ) の地図が表示されています。

図 13. San Francisco (サンフランシスコ) 地域のインタラクティブな地図を表示するアプリケーション

図 14 に示す Raleigh (ラーレー) の地図は、画面幅の狭いモードでのレイアウトが示されています。

図 14. Raleigh (ラーレー) を中心にしたインタラクティブな地図を幅の狭い画面モードで表示するアプリケーション

複雑な地図 UI の処理は Web コンポーネントに組み込まれていて、無料で手に入れられます。地図データを取得するためのネットワーク・アクセス、そしてそのデータの処理および表示も、この Web コンポーネントに統合されています。したがって、必要となる作業は、地図の中央に表示する場所の緯度と経度を指定することだけです。

地図アプリケーションを作成する

この地図アプリケーションのソース・コードは、dwpmap/index.html ファイルにあります (「ダウンロード」を参照)。アプリケーションのアーキテクチャーは、売上グラフのサンプル・アプリケーションと同様です。以下に、このアプリケーションの作成手順を要約します。

  1. Web コンポーネントをプロジェクトにインストールします。
    bower install PolymerLabs/google-map --save
  2. HTML Imports を使用して、Web コンポーネントをアプリケーションにインポートします。
    <link rel="import" href="../bower_components/google-map/google-map.html">
  3. <google-map> Web コンポーネントをコンテンツ領域に追加します。
      <div class="content">
        <google-map> 
        </google-map>
      </div>
  4. 都市の名前が表示されるようにメニュー項目をカスタマイズします。選択項目が変更されると、core-select イベントが起動されます。
    <core-menu id='menu' selected="sf" >
    <core-item name="rh" icon="explore" label="Raleigh"></core-item>
    <core-item name="sf" icon="explore" label="San Francisco"></core-item>
    <core-item name="sd" icon="explore" label="San Diego"></core-item>
    </core-menu>
  5. 場所の緯度と経度のデータを格納する JSON 対応データ・オブジェクトを作成します。キーは、メニュー内の <core-item> の名前と一致することに注意してください。
    var waypoints = { 
      "rh" : {"latitude":"35.843768", "longitude":"-78.645056", 
           "fullname":"Raleigh"},
    "sd" : {"latitude":"32.8245525", "longitude":"-117.0951632", 
    "fullname":"San Diego"},
    "sf": {"latitude": "37.77493", "longitude": "-122.414942", 
    "fullname":"San Francisco"}};
  6. 選択項目が変更されるたびに <google-map> コンポーネントの属性を更新するように、core-select イベント・ハンドラーをコーディングします。
    var menu = document.querySelector('core-menu');
    
     menu.addEventListener( 'core-select', function (evt) {
       if (evt.detail.isSelected)  {
        var map = document.querySelector('google-map');
        var scaffold = document.querySelector('core-scaffold');
        var location = document.getElementById('location');
        var selectedLocation = waypoints[menu.selected];
        map.setAttribute("latitude", selectedLocation.latitude);
        map.setAttribute("longitude", selectedLocation.longitude);
        location.innerHTML = selectedLocation.fullname;
        console.log(menu.selected);
        scaffold.togglePanel();
      }
     });

これらの数少ない Web コンポーネントを使用するだけで、高度な実際のアプリケーションを作成できることがすぐにわかるはずです。例えば、アプリケーションでオンライン分析処理 (OLAP) データ・セットを処理して売上関連の要約情報を世界地図に表示し、ユーザーがモバイル端末で地図の選択項目をタッチすると、各地域の (さらには、ある地域内の特定の店舗や場所における) 売上詳細を確認できるようにすることも可能です。この架空のサンプル・アプリケーションから、複合 Web コンポーネントの威力は明らかです。

Polymer のドラッグ・アンド・ドロップ式コンポーネント・デザイナーによって簡素化される設計

Web コンポーネントをハンドコーディングするのは簡単ですが、Web コンポーネントをさらに容易に扱えるようにしてより多くの開発者が利用できるように、Polymer にはオンラインで使用できる実用的なベータ版ドラッグ・アンド・ドロップ式デザイナーが用意されています。

組み合わせることができるという Web コンポーネントの性質のおかげで、ドラッグ・アンド・ドロップ式デザイナーを使用して既存のコンポーネントを組み合わせ、高度なコンポーネントを作成することも、さらには完全なアプリケーションを作成することもできます。

図 15 にドラッグ・アンド・ドロップ式デザイナーを実際に使用している様子を示します。

図 15. Polymer のドラッグ・アンド・ドロップ式カスタム要素デザイナー

このベータ版デザイナーには確かにいくつかの制限事項があります。ほとんどの高度なコンポーネント・アセンブリーでは、今でもなおドラッグ・アンド・ドロップによる設計では生成できないコードを手作業で作成しなければなりません。しかし、このデザイナーを使用して、基礎となる HTML ファイルを手作業で編集することはできます。近いうちに、アプリケーションおよびコンポーネントの作成に対処するより完全なソリューションがさまざまなソースから登場することは確実です。

まとめ

Polymer は Web Components 標準に従い、Web アプリケーション開発およびモバイル・アプリケーション開発のベースとして優勢を占めている (現在、開発者による拡張が可能な) DOM を次の 10 年も使い続けられるように拡張しています。Polymer は、最新世代のユーザーとアプリケーション開発者の需要により良く応えるために主力製品を進化、適応させるというブラウザー・ベンダーの真剣な取り組をあらためて確認するものです。


ダウンロード可能なリソース


関連トピック

  • Polymer を使用して再利用可能なカスタム Web コンポーネントを作成する」(Sing Li 著、developerWorks、2014年11月): この関連チュートリアルで、独自のカスタム Web コンポーネントを作成するためのステップ・バイ・ステップのガイダンスを読んでください。
  • Polymer: 入手可能な最新の Polymer コンポーネント、サンプル・コード、ドキュメントを見つけてください。
  • Google Web Components: このオープンソース・リポジトリーから入手できる、すぐに使用可能な Web コンポーネントを試してみてください。
  • Browser Compatibility: このサイトをモニターして、Polymer のクロスプラットフォーム・サポート、クロスブラウザー・サポート、および互換性についての最新情報を追跡してください。
  • customelements.io: このリポジトリーから入手できる、コミュニティーによって作成された多種多様な Web コンポーネントを調べてください。
  • Material Design: Polymer paper コンポーネント・コレクションで完全にサポートされている、Android の Material Design について詳しく学んでください。

コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Mobile development
ArticleID=990382
ArticleTitle=Polymer を導入して Web Components による革命に参加する
publish-date=11272014