polymer-starter-kitであそんでみる

Polymer starter kit

Polymer starter kit

Polymer starter kit Downloads available

以下の２つのレベルが用意されている

polymer-starter-kit Beginners
polymer-starter-kit Intermediate - Advanced users

polymer-starter-kit Beginners

polymer-starter-kit-light
Beginnerというよりシンプル版、Coreバージョン

polymer-starter-kit Intermediate - Advanced users

polymer-starter-kit
bower install時にElementがすべて読み込まれる
実行環境もすべて格納されている
こっちのほうがBeginnerなんじゃないか
こちらを使ってみる

polymer-starter-kit IntermediateのInstall

1. ダウンロード

Polymer starter kit Downloads available

「↓ polymer-starter-kit-x.x.x.zip」をクリック
zipファイルがローカルにダウンロードされる
- 【例】 polymer-starter-kit-1.0.3.zip

2. 解凍、設置

zipファイルを解凍する
解凍で生成されたディレクトリの中身を作業フォルダにコピー
- 【例】/polymer-starter-kit-1.0.3/ 以下

3. セットアップ

npm、bower、gulpが動作する環境において以下のコマンドを順に実行

cd ［作業フォルダ］
npm install
bower install

4. 実行

以下のコマンドを実行

gulp serve

ブラウザが自動起動する
「 http://localhost:3000/ 」で「app/」直下のdemoファイル「index.html」が表示される
よって「 http://localhost:3000/ 」のDocument Rootは「app/」直下
demoファイル「index.html」はレスポンシブ実装

index.htmlにdemo実装されているElement

Element名	特徴	demo
iron-flex-layout	flexboxレイアウト制御
iron-icon	アイコン表現	demo
iron-pages	singleページ実装の各ページ格納ブロック
iron-selector	メニュー表現などの選択状態の制御	demo
paper-drawer-panel	レスポンシブUI用ドローワーパネル	demo
paper-ripple	クリック時の波紋アニメーション	demo
paper-icon-button	Material Designのアイコン表現集	demo
paper-item	Material Designのlist表現集	demo
paper-menu	おもにサイドナビに用いる縦型のメニュー表現	demo
paper-scroll-header-panel	スクロールアニメーションを伴うヘッダー	demo
paper-toast	ページボトム部分にトースターアニメーションによって表示されるメッセージボックス	demo
paper-toolbar	おもにヘッダー部分に利用するツールバー	demo

自作Elementの追加

Element「my-sample.html」を作成する例

Element作成

「app/elements/」以下に「my-sample/my-sample.html」を作成する
watchタスクが作動しているためbuildプロセスは自動実行される

<dom-module id="my-sample">
  <style>
    /* style */
  </style>
  <template>
    <p>SAMPLE SAMPLE SAMPLE SAMPLE SAMPLE</p>
  </template>
  <script>
    (function() {
      Polymer({
        is: 'my-sample',
        properties: {}
      });
    })();
  </script>
</dom-module>

import

「app/elements/elements.html」末尾に「rel="import"」によってimportを追加する

<link rel="import" href="my-sample/my-sample.html">

実装

「app/index.html」の<paper-material elevation="1">内に読み込む

<my-sample></my-sample>

以上3ステップで自作Elementの実装は完了

その他のカスタマイズ

すべてのレイアウトがElementに依存しているため、demo実装済みの何かをカスタマイズするにもそれ以外の何かをカスタマイズするのもすべてElement単位で行う

Polymer Element Catalog

Polymer Element CatalogでどんなElementがあるかチェック！

Polymer Element Catalog

以下の７つのカテゴリからなるElement集が存在する（2015年8月現在）
コードやDemoの参照に便利
polymer-starter-kit Intermediateにこれらが標準で読み込まれるため、CatalogからのDownloadは必要ない

記号	カテゴリ名	内容
Fe	Iron Elements	利用頻度の高いUIを網羅しいろいろなサービスで利用できるElement集。
Md	Paper Elements	Google's Material DesignのリファレンスElement。Material Designの実装状況をここで知ることができる。
Go	Google Web Components	Google APIなどGoogleの機能を利用できるComponent集。
Au	Gold Elements	ECに利用するElement。入力や決済に役立つComponent集。
Ne	Neon Elements	Web Animationsが実装されたNeon AnimationなどのElement。
Pt	Platinum Elements	Offline Application、Notification、PushなどService Worker系で必要となる実装を集約したElement。
Mo	Molecules	Moleculesとは「分子」の意味。サードパーティー製のライブラリなどラッピングする際に利用する。現在格納されているのはmarkdownのラッパー（2015年8月現在）。

感想

案件に利用する機会はないだろうという想定のもとに今回意図的に機会をつくって触ってみた
そして結論．．．、案件に利用する機会はないかな．．．あるかな．．．
運用少なくレスポンスとか考えなくていいstatページなら使ってみてもよいか
使い慣れると簡単に画面が完成するため、モック作成などdemo作業には利用したいと感じた
singleページ実装とか頭使わずに作成したいときに便利
UIトレンドチェックのために全Elementを時々さらっておきたい
Material Designなどは実装の参考になる
触ってて飽きない、おとなのおもちゃとしてよくできている