このエントリーは「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 標準を使用して構築されています。
ここで定義されているコンポーネントが幾つかあります。
- 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
ディレクトリが表示されているだけなのでデモ用として「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>
結果は次の通り
Custom Elementsの設定を変えてみる
定義したCustom Elementsに色々なプロパティを設定してみます
<brick-calendar controls></brick-calendar>
矢印が両サイドに表示されクリックすると年が移動します。さらに「chosen="2014-12-06"」を入れてみると
こういうふうにも
<brick-calendar controls span=2></brick-calendar>
最後に
今度Web開発はWeb Componentsの普及に伴いUIコンポーネント思考になることは間違いないと考えています。Brickのソースを読むと凄さが伝わってきますのでコードリーディングする価値ありかと思います。Brickが普及するかどうかはまた別の話だと思いますがWeb Componentsは間違いなく普及すると思います。特にエンタープライズにとっては重要なファクターになるのではと思います。
