SONICMOOV Googleページ

Googleが推し進めるWeb Componentsの時代がやってくるー!?

Googleが推し進めるWeb Componentsの時代がやってくるー!?

  • このエントリーをはてなブックマークに追加

2回目の投稿となります。はなたつです。
8月にソニックメンバーと山登り予定なので体力をつけています。

今回はWeb Componentsというものについて書いていきます。

目次

  1. Web Componentsとは
  2. Web Componentsを使うメリット
  3. Polymerをインストールしよう
  4. Material Design に触れてみる
  5. あとがき

Web Componentsとは

Web Componentsとは名前の通りWebをコンポーネント化するための仕組みで、再利用性やメンテナンス性・開発効率を上げるのに大きな効果があるといわれています。

現在のところ一部のモダンブラウザでしか機能を使う事が出来ませんが、「Polymer」というライブラリを用いる事により未対応ブラウザの補完を行ってくれたり、あらかじめ用意されているコンポーネントを用いてサイトに組み込む事が出来ます。

ただIEで確認したところバージョン10以降にしか対応していないため案件の概要により使用出来なかったりしますが、スマホサイトだと実用的だと思います。

また、Web ComponentsはGoogleが推し勧めているWebの仕様のため、今後の為にまとめていきます

Web Componentsを使うメリット

メリットとしては、以下のような点が挙げられます。

  • 再利用性が高い
  • マークアップがシンプルになる
  • Shadow DOMによりパーツの内外への影響を避けられる

Polymerをインストールしよう

Polymerの機能はコンポーネントという単位で細かく分かれており、作るものの要件に応じてコンポーネントを選択して使います。
コンポーネントのインストール方法はいくつか方法がありますが今回はbowerを使ってインストールをしていきます。
bowerはnpmで提供されているためnpmのインストールも必要になります。

ここからはコマンドプロントでの操作となります。(※Windowsの場合)

# 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

 

初期化処理の時に色々と聞かれますが全部Enterで問題ありません。
2で指定したフォルダを開き bower_components フォルダが出来ていたら成功です。

Material Design に触れてみる

早速Material Designに触れてみたいと思います。

用意されているコンポーネントは公式のドキュメントを見ましょう。
正直多すぎて覚えきれない…
http://www.polymer-project.org/docs/elements/

今回はこの中のcore-iconをご紹介します。

まず作業用のhtmlを作成し、コンポーネントのcore-iconを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>

 

この段階では

<core-icon></core-icon>

に何も定義されていないためこのタグだけでは何も表示されません。

<core-icon src=”hoge.png”>のように画像を読み込んでみましょう。
すると指定した画像が24pxの背景画像としてページに表示されます。

components_img1

この24pxという値はコンポーネント(bower_components/core-icon/core-icon.html)内でsize: 24,というデフォルトの値が指定されているためそれが適用された形となります。
サイズを変えたい場合にはこのコンポーネント内のdefault値を変更するか

<core-icon src="hoge.png" size="32">

「size=””」を指定する事でその値で表示する事が出来ます。

またPolymerではデフォルトで色々なアイコンが用意されています。
先ほどのソースに加えて core-icons のコンポーネントを読み込みます。

<link rel="import" href="bower_components/core-icons/core-icons.html">

これで用意されているアイコンを使用する準備が出来ました。

 

先ほど<core-icon></core-icon>とタグを入れていましたが

<core-icon icon="delete"></core-icon>

icon=”delete”を追加してみます。

components_img2

上のようなアイコンが表示されたでしょうか。

用意されているアイコンは他にも色々とあります。
bower_components/core-icons/core-icons.html を見てみると

<link rel="import" href="iconsets/icons.html">

という記述が見つかると思います。

このタグの下に

<link rel="import" href="iconsets/av-icons.html">

を足してみましょう。

これで av-icons.html 内にあるアイコンも使えるようになります。
av-icons.html を見てみると「replay」「movie」「news」の様なアイコンが用意されているのが分かります。

では先ほどと同じように

<core-icon icon="replay"></core-icon>

と指定してみます。

 

 

自分でアイコンの追加等を行っていない限り恐らく何も表示されていないと思います。
再度 av-icons.html の中身を見てみるとアイコンの記述の前に

<core-iconset-svg id=”av” iconSize=”24″>

という記述があると思います。
この id=”av” という記述がこの av-icons.html に記述されているアイコンを使うためのトリガーとなります。

実際に使う場合にはアイコン名の前にID:を付与します。

<core-icon icon="av:replay"></core-icon>

components_img3

上のアイコンが表示されましたか?
他のアイコンを使う場合にも上記と同じ要領で書き換えていけばOKです。

ソース内を見ると分かりますが、アイコンは全てsvgになっているため背景色を指定する事でアイコンの色を変更する事が出来ます。

上記 av:replay アイコンを書き換えたい場合は、CSS内で

core-icon[icon="av:replay"] {
    fill: #9aed00;
}

fill:色指定 と記述をするとアイコンが

components_img4

このようになります。

あとがき

今回は触りだけご紹介しました。
Web Componentsは大掛かりなプロジェクトなのでここで紹介しきるのは難しいのですが、興味を持った方は公式ドキュメントなどを見ながら色々と使ってみてはどうでしょうか。

勿論コンポーネントを自分で作る事も出来ますし、
http://customelements.io/

上記サイトで色々な方が作成したコンポーネントが公開されているのでそれらを試してみても面白いかもしれません。

以上、Web Componentsのご紹介でした!

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

はなたつ(マークアップエンジニア)

マークアップエンジニアをやっています。ソニックムーブのラーメン男子といえば私です。今日もラーメン屋を探して西へ東へ…神楽坂周辺に美味しいラーメン屋がありましたら教えてください。

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation