albatrosary's blog

Azure と Angular と Wercker CI とか

HTML5 Advent Calendar 6日目:Web Components の Brick がすごい

このエントリーは「HTML5 Advent Calendar 2014」12月6日の記事です。今回は Web Components がUIコンポーネントの主役になるとこうなるんだろうという世界を見てみます「Brick」というUIコンポーネントです。

HTML5 Advent Calendar 2014 - Qiita

Brick

Brickは、WebアプリケーションのUIを簡単かつ迅速に構築するために設計されたUIコンポーネントコレクションです。Brickコンポーネントは、開発者がすでに知っているHTML構文を使用して、アプリのUIを記述できるようにするWeb Components 標準を使用して構築されています。

http://mozbrick.github.io/

f:id:albatrosary:20141206102915p:plain

ここで定義されているコンポーネントが幾つかあります。

  • action
  • appbar
  • calendar
  • deck
  • flipbox
  • form
  • layout
  • menu
  • tabbar
  • storage-indexeddb

すべてを見るのは大変なので今回は視覚的にもわかりやすいカレンダーをハンズオンしてみます。

利用前に

Brickを使う前に github からモジュールをインストールします。手順は次の通りです。

$ git clone git@github.com:mozbrick/brick.git
$ cd brick
$ npm install & bower install
$ gulp build

これで準備完了

カレンダーコンポーネントを使ってみる

gulpでアプリケーションサーバを起動します。

$ gulp server

f:id:albatrosary:20141206103802p:plain

ディレクトリが表示されているだけなのでデモ用として「index.html」を作成します。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="dist/font-awesome/css/font-awesome.css">
  <script src="dist/es6-promise/promise.js"></script>
  <script src="bower_components/platform/platform.js"></script>
</head>
<body>
</body>
</html>

HTML Importsの利用

ここでカレンダーコンポーネントを読み込ませるための「HTML Templates」を「HTML Imports」します。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="dist/font-awesome/css/font-awesome.css">
  <script src="dist/es6-promise/promise.js"></script>
  <script src="bower_components/platform/platform.js"></script>
  <link rel="import" href="dist/brick-calendar/dist/brick-calendar.html">
</head>
<body>
</body>
</html>

Custom Elementsの利用

インポートできたので「Custom Elements」を利用します。利用する「Custom Elements」は次の通り

<brick-calendar></brick-calendar>

これをindex.htmlへ登録します

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="dist/font-awesome/css/font-awesome.css">
  <script src="dist/es6-promise/promise.js"></script>
  <script src="bower_components/platform/platform.js"></script>
  <link rel="import" href="dist/brick-calendar/dist/brick-calendar.html">
</head>
<body>

</body>
</html>

結果は次の通り

f:id:albatrosary:20141206104353p:plain

Custom Elementsの設定を変えてみる

定義したCustom Elementsに色々なプロパティを設定してみます

<brick-calendar controls></brick-calendar>

f:id:albatrosary:20141206104632p:plain

f:id:albatrosary:20141206104640p:plain

矢印が両サイドに表示されクリックすると年が移動します。さらに「chosen="2014-12-06"」を入れてみると

f:id:albatrosary:20141206104849p:plain

こういうふうにも

<brick-calendar controls span=2></brick-calendar>

f:id:albatrosary:20141206105028p:plain

最後に

今度Web開発はWeb Componentsの普及に伴いUIコンポーネント思考になることは間違いないと考えています。Brickのソースを読むと凄さが伝わってきますのでコードリーディングする価値ありかと思います。Brickが普及するかどうかはまた別の話だと思いますがWeb Componentsは間違いなく普及すると思います。特にエンタープライズにとっては重要なファクターになるのではと思います。