Dartium(DartのVMが搭載されたChromium)のバイナリが公開されたので、早速試してみた。環境は32bitのUbuntu Linux 11.10で、unameは↓ね。
検証環境
$ uname -a Linux masato-xubuntu 3.0.0-16-generic-pae #28-Ubuntu SMP Fri Jan 27 19:24:01 UTC 2012 i686 i686 i386 GNU/Linux
環境構築
バイナリを用意してくれたおかげで非常に簡単。
- 適切なバイナリを落としてくる。今回はこれを使用。dartium-lucid64.zipとかいう名前だから一瞬64bitじゃないとダメかと思ったけど、32bit OSでも普通に動いてる
- zip解凍してDartium起動する。zip解凍すると色々でてくるけど、重要なのはchromeだけ。ファイラーからだとchromeが共有ライブラリに見えて実行できなかったけど、普通にコマンドラインから起動すれば問題なかった。
- chromiumの情報を確認する。"chrome://version/"というURLを打つと色々情報が見れる。そこにDartVMという項目が出てればちゃんとDartiumが動いてるはず。自分が落としてきたのは下の表示だった。
コード書く
こことかこことかこの辺を参考にしながら書いてみた。コツがつかめれば実際のリファレンスの方をみるといいかも。特にdart:htmlのElementは良く読むべし。
<!doctype html>
<head>
<meta charset="utf-8">
<title>dartlang test</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="./css/client.css" />
</head>
<body>
<script type="application/dart">
#import("dart:html");
void main() {
var msg = "Testing dart!";
window.alert(msg);
print(msg);
Element btn = document.query('#button');
btn.on.click.add((Event e) {
Element stage = document.query('#stage');
stage.innerHTML = "OMGOMGOMGOMG";
});
}
</script>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="#">dartlang test</a>
</div>
</div>
</div>
<div class="container">
<div id="stage">AAAAAAAAAAAAAAAAAAAA</div>
<div id="button">Click ME!</div>
</div>
</body>
</html>
やってることはわりと単純。
- window.alertでアラートウィンドウにメッセージを出力する
- printでデバッグメッセージを出力する
- buttonというidを持つ要素のクリックハンドラでstageというidを持つ要素の中身を書きかえる
コードを埋めこんだhtmlができたら、あとは普通にDartiumで表示する。もし構文に何らかのエラーがあった場合はデベロッパーツールのConsoleに表示されるから見るといい。画像は上がクリック前、下がクリック後。
型チェック
ドキュメントにも書いてあるけど、Dartiumの実行時に環境変数を設定してやるとDartの型チェック機能を有効化できる
$ DART_FLAGS='--enable_type_checks --enable_asserts' ../lib/dartium-lucid64-inc-4350.4350/chrome &
この状態で意図的に型エラーが出るソースに書きかえた（Event eのところをint eにした）ところ、ちゃんとエラーが検出された。
感想
- バイナリのおかげでかなり簡単にDartが試せる。
- Consoleにエラーが出るからデバッグはまあまあやりやすい。まあこれはjavascriptでも一緒だけど。
- 型チェックは常にONでもいいかも。
0 件のコメント:
コメントを投稿