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

[山崎大助，inop／デジタルハリウッド大学院 教員]

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

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

汎用UI要素と非UI要素のセット「core-elements」

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

• Visual Element（視覚要素）

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

• Non-Visual Element（視覚要素ではない）

<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

「Material Design」を実装する「paper-elements」

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

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

Polymerでカスタムタグを作成するには

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

Polymer要素

　以下のコードのように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」など、「**-**」とハイフンを記述するルールがあります。

Polymer要素に使用できる属性一覧

• name（必須）
• attributes
• extends
• noscript
• constructor

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