Dartでひと足お先に「Web Components」体験（環境構築編）

毎度お世話になっております。クラスメソッドの稲毛です。

めでたく「Alpha Release」から「M1 Release」となった「Dart」ですが、活発に開発が進められているサブプロジェクトの中の「Dart Web Components」というものに興味を持ったのでちょっと触ってみました。

Web Componentsって？

「Web Components」は、W3Cでワーキングドラフト（2012/11/07現在）として公開されている仕様です。新設する「element」要素や「template」要素を用いて、HTML文書内に再利用可能なコンポーネントを定義したりできるようになる仕組みのようです。Dartでは「Dart Web Components」としてひと足先に実装が進められています。

注意

Dart SDKだけでなく依存関係にあるパッケージ（html5libなど）は、関連せずに日々更新されている為、バージョンの組み合わせによっては急に動作しなくなることがありますのでご注意ください。

筆者環境

• OS
  • Mac OS X 10.8.2
• Dart Editor
  • version 0.1.2_r14508
• Dart SDK
  • version 0.1.2.0_r14508

Dart Web Componentsパッケージの導入

Dartには「Pub」と呼ばれるパッケージ管理機能が用意されており、これを利用して「web_components」パッケージを導入します。

1. アプリケーションの作成

まずはDart Editorの「File」メニューから「New Application」を選択して新規アプリケーションを作成します。

標準のテンプレートに従って次のような構成でファイルが作成されます。

2. 「pubspec.yaml」の編集

appのルートディレクトリにある「pubspec.yaml」を「web_components」導入の為に編集します。

pubspec.yaml

name:  app
description:  A sample application

#dependencies:
#  unittest: { sdk: unittest }

コメントアウトされている「dependencies」を次のように編集します。

pubspec.yaml

name:  app
description:  A sample application

dependencies:
  web_components: any

3. Pub Installの実行

変更を保存した「pubspec.yaml」を右クリックしてコンテキストメニューを開き、「Pub Install」を選択します。

依存関係にあるパッケージ全てがダウンロードされたら導入の完了です。

ビルド環境の構築

アプリケーションを「web_components」で構築する方法は三種類用意されています。

1. Command-line API
2. Editor background compilation
3. Dartium on-demand compilation

今回は、せっかく開発環境としてDart Editorを使っていますので、2番目のDart Editorのバックグラウンドでコンパイルさせる方法をとりました。ですので、実行用のファイル群をコンパイルによって一度生成する形式をとります。（3番目のオンデマンドコンパイルはうまく動作しませんでした。）
これらのコンパイル方法については「Tools for Dart Web Components」に記述があります。

「build.dart」ファイルの作成

appのルートディレクトリに「build.dart」ファイルを新規作成します。

作成したbuild.dartファイルを下記のように編集します。

build.dart

import 'package:web_components/component_build.dart';
import 'dart:io';

void main() {
  build(new Options().arguments, ['app.html']);
}

これで、ソースコードを編集し保存する毎に、「app/out/」へコンパイルされたソースが出力されます。

まとめ

「注意」にも書いた通り、ここ数日「web_components」に触れているだけでも、「依存パッケージのディレクトリ構成がおかしい」や「WindowsでPub Installができなくなった」、「ビルドエラーで生成がうまくいかない」など、数々のトラブルが発生しました。こればかりは絶賛開発進行中のプロジェクトなので仕方ないかなと思っています。(^_^;)
兎にも角にもトラブルさえなければ「Pub」によるパッケージ管理によって依存するパッケージが取得できるので、手軽にアプリケーションを構築することができます。次回が本命で、「Dart Web Components」が提供する「MDV（Model-driven Views）」や「Web Components」の実装を体験します。