Polymerとは、初めてのPolymerを使ってみる

この記事は、「Google Material Design をPolymerで表現する」の連載記事です。
「Google Material Designとは」や、その他の関連記事は、下記より参照ください

 

はじめに

 

Googleは「Google I/O 2014」で、Google Material Designを発表しました。
Google Material Designは、ユーザーにとって分かりやすいデザインを提供するためのVisual Language(視覚言語)です。

読み進めていると、ふと、デザインが苦手な筆者も、もしかしたらデザインができるようになるのでは無いかと淡い期待がうまれました。
しかし、実際にMaterial Designの概念を取り入れた、サイトを構築するには、概念にそって自身でデザインをしていくか、もしくはPolymerを使ってサイトを構築するかのどちらかでした。

私は、折角Polymerという素晴らしいフレームワークが用意されているのだから、Polymerを使って、Material Designを表現しようと思いました。

 

Polymerとは

 

Polymerとは、JavaScript UIフレームワークで、Web  Componentsを、モダンブラウザ以外でも利用できるようにしたライブラリです。
Web Componentsとは、今後、Web標準になる予定の技術で、Webページで利用する各パーツを、コンポーネント(カプセル化)にし、ページを作成します。
コンポーネント化にすることで、各パーツが再利用しやすくなったり、複数人での作業がしやすくなったりします。

最初にWeb Componentsを知ったときは、これまでにHTMLとCSSでサイトを構築してきてた制作者が小難しいWeb Componentsなんて使うか?と思っていましたが、実際に使ってみると、ただただコレはすごいと思うばかりでした。今後の制作スタイルがガラリと変わる日が来るかもしれませんね。

どうすごいのかは、簡単なPolymerのデモを用意しましたので、こちらを参照ください。

こちらのデモは、Rob Dodson氏のWeb Component Mashups at 3 a.m. 」を参考にしています。
素晴らしいデモですので、こちらも是非参考にしてみてください。

 

 

初めてのPolymer

 

 

  1. Polymerダウンロード

    まずはPolymerをダウンロードします。
    Polymerのページを見ると、Bowerか、zipをダウンロードするかどちらかの方法で進めることができます。

    ダウンロードしたファイルを展開すると、「components」フォルダが展開されたかと思います。主にこちらのフォルダ以下のファイルを読み込み、Polymerを使います。
     

  2. サーバーの準備

    次にPolymerの動作を確認するには、Webサーバーにアップロードするか、ローカルホストを立るか、どちらかが必要となります。
    私はGulpでローカルホストを起動し、確認を行っています。

    ローカルホスト環境が整っていない方は、こちらの記事も参考にしてみてください。
    Gulpでlocalhostサーバーを起動、さらにBrowser-Syncで作業効率化
     

  3. シンブルなHTMLの骨組を用意します。
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>Hello Polymer</title>
    </head>
    <body>
    
    </body>
    </html>
  4. Polymerのコアを読み込み、カスタムエレメント、<polymer-element>を宣言し、出力します。
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--Polymerのコアを読み込む-->
    <link rel="import" href="./components/polymer/polymer.html">
    </head>
    <body>
    <!--カスタムエレメントの宣言-->
    <polymer-element name="my-element" noscript>
      <template>
        <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span>
      </template>
    </polymer-element>
    
    <!--カスタムエレメントを出力-->
    <my-element></my-element>
    
    </body>
    </html>

 

上記の画面が出力されたでしょうか。
とてもシンプルなテンプレートでした。次回はさらに、jsonを読み込んで表示をしたり、エレメントの取り込み方を紹介いたします。

 

その他の記事(今後の公開予定)

 

[Material Designについて]

  1. Material Designとは(Introduction)

[Polymerを使ってMaterial Designを表現する]

  1. Polymerとは、初めてのPolymer
  2. [エレメント]
    Polymerエレメント、Jsonの読み込み

    Polymer Layoutエレメント
    Polymer Iconエレメント
  3. Polymerを使って、Material Designを表現しよう

※ 紹介する項目は書き進めるうちに、増えていくかと思います。週一くらいを目処に、記事を公開していきたいと思います。

 
 
関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。