読者です 読者をやめる 読者になる 読者になる

ぶるーすくりーん

ぽんこつプログラマ日記

Polymerをつかってみた

html5 webcomponent polymer

Polymerちょっとサイトを見たくらいで、いじいじしてなかったのですが、やっぱ触りだけでも押さえておいた方が来たる未来に備えてよいかなと思い、さわってみました。

インストール

$ bower init
$ bower install --save Polymer/polymer
$ bower install --save Polymer/core-elements
$ bower install --save Polymer/paper-elements
$ bower install --save Polymer/platform

とりあえず使ってみる

とりあえず、簡単にためせそうなcore-menuを使ってみます。

以下のHTMLファイルを作成。

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/platform/platform.js"></script>

    <!-- Import element -->
    <link rel="import" href="bower_components/core-menu/core-menu.html">
    <link rel="import" href="bower_components/core-item/core-item.html">

  </head>
  <body>
    <!-- Use element -->
    <core-menu selected="0">
      <core-item icon="settings" label="Settings"></core-item>
      <core-item icon="dialog" label="Dialog"></core-item>
      <core-item icon="search" label="Search"></core-item>
    </core-menu>

  </body>
</html>

いろいろごにょごにょためしたいので、BrowserSyncも使えるようにしておきます。 BrowserSyncの使い方は、BrowserSyncでうきうきレスポンシブ対応アプリ開発を参照してください。

サーバ起動。

$ gulp serve

こんな感じのメニューが表示されます。
ポチポチすると選択中のメニューが太字になる。

f:id:tajima0111185:20140706155205p:plain


では、このメニューをPaper Element使った版にかえてみます。

今度使うのはpaper-tabsです。
DEMOみるとなかなかかわいいです。

HTMLを書き換えていきます。

まず、importを変更。

    <!-- Import element -->
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
    <link rel="import" href="bower_components/paper-tab/paper-tab.html">

さらに、スマホでもいい感じに表示されるようにviewport宣言をheadタグに追加。

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"">

bodyはこんな感じで。

  <body>
    <!-- Use element -->
    <paper-tabs selected="0">
      <paper-tab>Settings</paper-tab>
      <paper-tab>Dialog</paper-tab>
      <paper-tab>Search</paper-tab>
    </paper-tabs>

  </body>

こんな感じの表示になります(この画像はスマホ版の例)。

f:id:tajima0111185:20140706155211p:plain


DEMOページの実装を参考に色つけたり、選択したときのインクアニメーションをはずしたりとかしてみます。

まずは、スタイル定義。
headタグに以下を追加。

    <!-- Style -->
    <style shim-shadowdom>
          paper-tabs, core-toolbar {
            background-color: rgba(50, 50, 50, 0.6);
            color: #fff;
            box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
          }
    </style>

それから、paper-tabsのエレメントとしてnoink定義を追加。

    <paper-tabs selected="0" noink>

ちょっとかっこよくなりました。

f:id:tajima0111185:20140706155215p:plain

使ってみて

import一発でアニメーション、スタイルシートつきのものが使えてしまうのはすごいなと思いました。
webcomponentそのものも不勉強だったので、これがwebcomponentの威力かと驚きました。

Polymerさんについては、もう少し公式ライブラリ揃えてくれると嬉しいなーと感じました。
あと、目的のドキュメントにたどりつくのが難しい。

既存のElementを利用する場合は、基本的にElement collectionsのページでElement探して、DEMOページのソースを見るという方法がよさそうです。

以上、まだ飲み込みきれていないけど、Polymerさんで遊んでみたレポートでした。