連載

2014年10月20日

誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer：HTML5アプリ作ろうぜ！（13）（3/4 ページ）

Material DesginでWeb ComponentsでオープンソースでレスポンシブなJavaScriptフレームワーク「Polymer」をWeb上で活用するためのチュートリアル記事です。Bootstrapライクなレイアウトを実現するサンプルを交えてインストール方法や使い方を紹介します。

[山崎大助，inop／デジタルハリウッド大学院教員] PC用表示関連情報

LINE

Hatena

Polymerの構成――大きく二つに分類

　Polymerは、使用用途によって大きく「core-elements」「paper-elements」の二つのelementsグループに分けられます。

　アイコン、レイアウト要素、ツールバーなど、汎用UI要素を含むユーティリティ要素ならびにAjaxなどの機能を提供する非UI要素のセットです。core-elementsでもVisual Element（視覚要素）とNon-Visual Element（視覚要素ではない）の二つの用途に分けられます。

<core-overlay>
<core-tooltip>
<core-toolbar>
<core-menu>
<core-transition>
<core-menu>
<core-list>
<core-iconset>
<core-action-icons>

<core-layout>
<core-layout-grid>
<core-layout-trbl>

Layout

<core-media-query>

View

<core-shared-lib>
<core-firebase>

Services/libs

<core-localstorage>
<core-ajax>
<polymer-jsonp>
<polymer-file>
<polymer-meta>

Data

<polymer-signals>
<core-selector>

Behavior/interaction

　paper-elementsは「Material Design」を実装するためのUI要素です。その名の通り、「Material Design」における主要なUIコンセプトである“紙”のような質感を表現するものです。

<paper-button>
<paper-focusable>
<paper-icon-button>
<paper-ripple>
<paper-shadow>
<paper-tabs>

　Polymerでカスタムタグを作成するには、Polymer要素とカスタム要素の2つの理解が必要です。今回の記事では、この2点を中心に解説していきます。

　以下のコードのようにpolymer-element（要素）の中に「新たな仕様の要素」を記述できます。

　オリジナルの要素パーツを作ることも可能です。しかし、今すぐにガッツリと開発・制作で使うのでなければ、ダウンロードしたPolymerのソースコードには、作成されたクオリティの高いパーツがたくさんありますので、そちらを使った方が無難だと思われます。

<polymer-element name="tag-name">
  <template>
    ……
  </template>
  <script>Polymer('tag-name');</script>
</polymer-element>

　Polymer要素のname属性は重要な役割を持っています。なぜなら、Polymer要素のname属性で指定した名前が「カスタム要素名」になるからです。

　カスタム要素とは「divタグ」や「sectionタグ」のように最初から定義されてるタグではなく、自身で作る（カスタマイズして作成する）タグを指しています。そのため、name属性で付けた名前がカスタム要素のタグ名になることを覚えておきましょう。例を以下に記述します。

Polymer要素：<polymer-element name="tag-name" constructor="TagName">
カスタム要素：<tag-name></tag-name>

例）Polymer要素でname属性に「tag-name」と記述した場合

　name属性に記述する名前には「-」が必須です。例えば、my_iconsではなく「my-icons」、icondemoではなく「icon-demo」、tabBlackではなく「tab-black」など、「**-**」とハイフンを記述するルールがあります。

　慣れない方には最初はとっつきにくいと思いますが、最初から全てを理解しようとは思わず、ざっくりとそういうものだと認識して進めることが慣れるには良いと思います。