2回目の投稿となります。はなたつです。
8月にソニックメンバーと山登り予定なので体力をつけています。
今回はWeb Componentsというものについて書いていきます。
目次
Web Componentsとは
Web Componentsとは名前の通りWebをコンポーネント化するための仕組みで、再利用性やメンテナンス性・開発効率を上げるのに大きな効果があるといわれています。
現在のところ一部のモダンブラウザでしか機能を使う事が出来ませんが、「Polymer」というライブラリを用いる事により未対応ブラウザの補完を行ってくれたり、あらかじめ用意されているコンポーネントを用いてサイトに組み込む事が出来ます。
ただIEで確認したところバージョン10以降にしか対応していないため案件の概要により使用出来なかったりしますが、スマホサイトだと実用的だと思います。
また、Web ComponentsはGoogleが推し勧めているWebの仕様のため、今後の為にまとめていきます
Web Componentsを使うメリット
メリットとしては、以下のような点が挙げられます。
- 再利用性が高い
- マークアップがシンプルになる
- Shadow DOMによりパーツの内外への影響を避けられる
Polymerをインストールしよう
Polymerの機能はコンポーネントという単位で細かく分かれており、作るものの要件に応じてコンポーネントを選択して使います。
コンポーネントのインストール方法はいくつか方法がありますが今回はbowerを使ってインストールをしていきます。
bowerはnpmで提供されているためnpmのインストールも必要になります。
ここからはコマンドプロントでの操作となります。（※Windowsの場合）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[code lang="javascript"] # 1.Bower のインストール npm install bower -g # 2.作業フォルダに移る cd C:\xampp\htdocs\hogehoge # 3.初期化処理 bower init # 4.Polymer のインストール bower install --save Polymer/polymer # 5.コンポーネントのインストール bower install --save Polymer/core-elements bower install --save Polymer/paper-elements [/code] |
初期化処理の時に色々と聞かれますが全部Enterで問題ありません。
2で指定したフォルダを開き bower_components フォルダが出来ていたら成功です。
Material Design に触れてみる
早速Material Designに触れてみたいと思います。
用意されているコンポーネントは公式のドキュメントを見ましょう。
（正直多すぎて覚えきれない…）
http://www.polymer-project.org/docs/elements/
今回はこの中のcore-iconをご紹介します。
まず作業用のhtmlを作成し、コンポーネントのcore-iconをhtml内で読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[code lang="html"] <!DOCTYPE html> <html> <head> <meta charaset="utf-8" /> <script src="bower_components/platform/platform.js"></script> <link rel="import" href="bower_components/core-icon/core-icon.html"> </head> <body> <core-icon></core-icon> </body> </html>[/code] |
この段階では
|
1 |
＜core-icon＞＜/core-icon＞ |
に何も定義されていないためこのタグだけでは何も表示されません。
＜core-icon src=”hoge.png”＞のように画像を読み込んでみましょう。
すると指定した画像が24pxの背景画像としてページに表示されます。
この24pxという値はコンポーネント（bower_components/core-icon/core-icon.html）内でsize: 24,というデフォルトの値が指定されているためそれが適用された形となります。
サイズを変えたい場合にはこのコンポーネント内のdefault値を変更するか
|
1 2 3 |
[code lang="html"] <core-icon src="hoge.png" size="32"> [/code] |
「size=””」を指定する事でその値で表示する事が出来ます。
またPolymerではデフォルトで色々なアイコンが用意されています。
先ほどのソースに加えて core-icons のコンポーネントを読み込みます。
|
1 2 3 |
[code lang="html"] <link rel="import" href="bower_components/core-icons/core-icons.html"> [/code] |
これで用意されているアイコンを使用する準備が出来ました。
先ほど＜core-icon＞＜/core-icon＞とタグを入れていましたが
|
1 2 3 |
[code lang="html"] <core-icon icon="delete"></core-icon> [/code] |
icon=”delete”を追加してみます。
上のようなアイコンが表示されたでしょうか。
用意されているアイコンは他にも色々とあります。
bower_components/core-icons/core-icons.html を見てみると
|
1 2 3 |
[code lang="html"] <link rel="import" href="iconsets/icons.html"> [/code] |
という記述が見つかると思います。
このタグの下に
|
1 2 3 |
[code lang="html"] <link rel="import" href="iconsets/av-icons.html"> [/code] |
を足してみましょう。
これで av-icons.html 内にあるアイコンも使えるようになります。
av-icons.html を見てみると「replay」「movie」「news」の様なアイコンが用意されているのが分かります。
では先ほどと同じように
|
1 2 3 |
[code lang="html"] <core-icon icon="replay"></core-icon> [/code] |
と指定してみます。
…
自分でアイコンの追加等を行っていない限り恐らく何も表示されていないと思います。
再度 av-icons.html の中身を見てみるとアイコンの記述の前に
＜core-iconset-svg id=”av” iconSize=”24″＞
という記述があると思います。
この id=”av” という記述がこの av-icons.html に記述されているアイコンを使うためのトリガーとなります。
実際に使う場合にはアイコン名の前にID:を付与します。
|
1 2 3 |
[code lang="html"] <core-icon icon="av:replay"></core-icon> [/code] |
上のアイコンが表示されましたか？
他のアイコンを使う場合にも上記と同じ要領で書き換えていけばOKです。
ソース内を見ると分かりますが、アイコンは全てsvgになっているため背景色を指定する事でアイコンの色を変更する事が出来ます。
上記 av:replay アイコンを書き換えたい場合は、CSS内で
|
1 2 3 4 5 |
[code lang="css"] core-icon[icon="av:replay"] { fill: #9aed00; } [/code] |
fill:色指定 と記述をするとアイコンが
このようになります。
あとがき
今回は触りだけご紹介しました。
Web Componentsは大掛かりなプロジェクトなのでここで紹介しきるのは難しいのですが、興味を持った方は公式ドキュメントなどを見ながら色々と使ってみてはどうでしょうか。
勿論コンポーネントを自分で作る事も出来ますし、
http://customelements.io/
上記サイトで色々な方が作成したコンポーネントが公開されているのでそれらを試してみても面白いかもしれません。
以上、Web Componentsのご紹介でした！
