CoffeeScript、Jade、Yamlで作るiPhone,Androidアプリ
お正月太りがヤバいポリドッグです。 飲んだり食べたり、また飲んだり・・・休み明けからダイエットを頑張ろうと思います。
さて、せっかくの休みなので普段で着ない事をやろうということで、僕は年末からtitaniumで遊んでいました。 で、せっかくTitaniumで作るなら、AlloyがいいよねってことでAlloyを使って書いていた僕ですが、どうせならCoffee+Jade+Yamlで書きたいよねってことで、頑張っていました。
ただ、この辺の内容って昔書いていたんですね。
で、今回なにが違うかっていうと主にディレクトリ構造を変更しています。 今までだったら通常のディレクトリにjsに混ざって、coffeeファイルがあったり、jadeがあったり、なんかあまり美しくないと・・・
ということでCoffeeScript, jade, yamlで作る方法を説明していきます。 ※titaniumはインストールしてあるものとします。
CoffeeScript、Jade、Yamlでの開発環境の用意のしかた
- alloyのプロジェクトを作成する
$ titanium create -p android, ios -n sample02 --id sample02.hoge.fuga
$ cd sample02
$ alloy new
- jmkファイルを用意する
$ alloy generate jmk
これでapp/alloy.jmkファイルが作成されます。
- coffee,jade,yamlようのディレクトリを準備する
$ mkdir -p app/alt/{assets,controllers,lib,models,styles,views}
coffee,jade,yamlはすべてapp/altの中に入れるようにします。 で実際にbuildする際にapp内の適切なディレクトリにコンパイルしてjs,xml,tssに変換されるようになっています。
- jmkファイル用意する ちなみにcoffee-script,jade,js-yamlに依存してしまうのでnpmで先に必要なライブラリを入れておきましょう
npm install -g cofee-script
npm install -g jade
npm install -g js-yaml
インストールがおわったらjmkファイルを以下のように記載してください
task("pre:compile", function(event,logger) {
var wrench = require("wrench"),
fs = require("fs"),
jade = require("jade"),
jade_root = event.dir.home + "/alt/views",
coffee_root = event.dir.home + "/alt",
yml_root = event.dir.home + "/alt/styles",
view_root = event.dir.views,
js_root = event.dir.models,
tss_root = event.dir.home + "/styles",
path = require("path"),
coffee = require("coffee-script"),
js_yaml = require("js-yaml");
var yml = {};
yml.compile = function(yaml,target) {
var replaceVal = function(target,value,object) {
for ( var key in object) {
if (object.hasOwnProperty(key)) {
if (typeof(object[key]) !== "object") {
if (object[key] === target) {
object[key] = value;
}
} else {
replaceVal(target,value,object[key]);
}
}
}
}
var object = js_yaml.load(yaml);
if (typeof(object.parameters) === "object") {
var param = object.parameters;
delete object.parameters;
for (var key in param) {
if (param.hasOwnProperty(key) && typeof(param[key]) !== "object") {
replaceVal('%'+key+'%',param[key],object);
}
}
}
var json = JSON.stringify(object,null, " ");
json = json.replace(/['"]expr(.+?)['"]/gi, "expr$1");
json = json.replace(/['"]Ti(.+?)['"]/gi, "Ti$1");
json = json.replace(/['"]Titanium(.+?)['"]/gi, "Titanium$1");
return json;
}
event.alloyConfig.xml = [];
event.alloyConfig.coffee = [];
// jadeの変換
wrench.readdirSyncRecursive(jade_root).forEach(function(view) {
if (view.match(/.jade$/)) {
fs.writeFileSync(
path.join(view_root,view.replace(/\.jade$/, ".xml")),
jade.compile(fs.readFileSync(path.join(jade_root,view)).toString())(event)
);
}
});
// coffeeの変換
wrench.readdirSyncRecursive(coffee_root).forEach(function(target){
if (target.match(/\.coffee$/)) {
fs.writeFileSync(
path.join(event.dir.home,target.replace(/\.coffee$/, ".js")),
coffee.compile(fs.readFileSync(path.join(coffee_root + "/" + target)).toString(), { bare: true }));
}
});
// ymlの変換
wrench.readdirSyncRecursive(yml_root).forEach(function(target){
if (target.match(/\.yml$/)) {
fs.writeFileSync(
path.join(tss_root,target.replace(/\.yml$/, ".tss")),
yml.compile(fs.readFileSync(path.join(yml_root + "/" + target)).toString(), { bare: true }));
}
});
});
task("post:compile",function(event,logger){
});
たったこれだけで、coffee,jade,yamlで開発できるようになります。 めっちゃ便利!
- Hallo Worldでも出しましょう
# app/alt/controllers/index.coffee
doClick = (e)->
alert $.label.text
$.index.open()
//- app/alt/views/index.jade
Alloy
Window.container
Label#label(onClick="doClick") Hello, World
## app/alt/styles/index.yml
".container":
backgroundColor: "white"
"Label":
width: Ti.UI.SIZE
height: Ti.UI.SIZE
color: "#000"
ってな感じに書きましょう。
- 試しに実行してみる iOS
titanium build -p ios
AndroidはGenymotion経由で動かしましょう。 sdkを3.2.0はめんどくさい事しなくてもGenymotionで動かせます。
titanium build -p android -t device
参考: Titanium CLI 3.2にしたらGenymotionとの連携が楽になる
最後とに、実際に動かした時のキャプチャ
Android
iOS
ということで、残り少ないお正月ですが、みなさんもぜひtitaniumで遊んでみてください。 web系の仕事の方は結構楽しめるのかと思いますよー。
※Objective-Cとくらべて〜みたいな事を言う人はぜひXcode立ち上げてください