さて、前回は haXe の簡単な紹介を行いました。
今回は実際にアプリケーションを作りつつ haXe の手触りを楽みたいと思います。
最初なので簡単なものを。「検索サービスにクエリを投げて戻り値を表示する」１ページ構成の JavaScript アプリケーションを作りましょう。
その前に、haXe のインストールがまだの方は済ませておいてください。
本エントリの内容とソースコードです。
- haxelib
- 前準備（レイアウトと HTML）
- Neko に nyan と言わせる
- JavaScript に nyan と言わせる
haxelib
せっかくなので jQuery を使いましょう。
haXe のライブラリ群に jQuery ラッパがあるのでインストールします。
haXe にはライブラリ管理ツールである haxelib が同梱されています。
最初に、haxelib の設定を行います。
$haxelib setup
次に、jQuery をキーワードにライブラリを検索します。
$haxelib search jQuery
hxScriptlet という名前のライブラリがヒットしたと思います。
haxelib info hxScriptlet で情報やリリースログを確認できます。
ではインストールしましょう。
$haxelib install hxScriptlet
前準備（レイアウトと HTML）
いよいよコーディングに移ります。
まずディレクトリレイアウトを決めましょう。
./myfirst（適当なプロジェクト名）
/src（haXe コードの格納場所）
Application.hx（ソースコード）
/web
index.html
こんな感じでしょうか。
次に HTML を書いてみます。
この辺りは miniwiki を参考にしています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="styles/styles.css" type="text/css" media="screen" charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First App</title>
</head>
<body>
<form>
<input type="text" id="search_word" />
<input type="submit" value="Search" />
</form>
<div id="haxe:trace"></div>
<div id="content"></div>
<script type="text/javascript" src="search_app.js" ></script>
</body>
</html>Neko に nyan と言わせる
次に Application.hx を書いてみます。
class Application {
public function new() {
trace("nyan");
}
public static function main() {
var app : Application = new Application();
}
}実行してみます。
$haxe -cp src -x Application Application.hx:4: nyan
二行目は実行結果です。うまく表示されたでしょうか？
-cp はアプリケーションを構成するファイル（ソース）へのパスを指定するオプションです。
-x は指定されたファイルを neko バイナリにコンパイルし neko で実行します。
オプションについては haxe -help を参照してください。
JavaScript に nyan と言わせる
Neko で nyan と言わせてみた次は JavaScript で nyan と言わせましょう。
先ほどは Neko 形式にコンパイルして Neko で実行しましたが、今度は JavaScript にコンパイルします。
$haxe -cp src -main Application -js web/search_app.js
先ほどの index.html をブラウザで開きます。
テキストボックスの下に Application.hx:4: nyan と表示されていましたか？
何となく haXe の手触りが掴めてきました。wktk が広がってきたところで次回に続きます。
その前に、最後のオプションはよく使う事になるのでビルドファイルにまとめておきましょう。
-cp src -main Application -js web/search_app.js
それでは、また次回。
コメント / トラックバック 1 件
[...] 前回 は haxe でコードを書き、JavaScript と Neko 二つの実行環境で nyan と言わせる所まで進みました。 今回は [...]
コメントする