Polymer starter kitであそんでみる

10697 ワード
google Polymer ServiceWorkers JavaScript WebAnimations JavaScript テキストリンク

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の実装は完了

SAMPLE出力結果

その他のカスタマイズ

すべてのレイアウトが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などは実装の参考になる
  • 触ってて飽きない、おとなのおもちゃとしてよくできている