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があるかチェック！
- 以下の７つのカテゴリからなる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などは実装の参考になる
- 触ってて飽きない、おとなのおもちゃとしてよくできている