CoffeeScript、Jade、Yamlで作るiPhone,Androidアプリ

お正月太りがヤバいポリドッグです。
飲んだり食べたり、また飲んだり・・・休み明けからダイエットを頑張ろうと思います。

さて、せっかくの休みなので普段で着ない事をやろうということで、僕は年末からtitaniumで遊んでいました。
で、せっかくTitaniumで作るなら、AlloyがいいよねってことでAlloyを使って書いていた僕ですが、どうせならCoffee+Jade+Yamlで書きたいよねってことで、頑張っていました。

ただ、この辺の内容って昔書いていたんですね。
・tssを書くのがだるいのでyamlを使って書いたというお話
・Alloyでjade+CoffeeScriptしてみた

で、今回なにが違うかっていうと主にディレクトリ構造を変更しています。
今までだったら通常のディレクトリにjsに混ざって、coffeeファイルがあったり、jadeがあったり、なんかあまり美しくないと・・・

ということでCoffeeScript, jade, yamlで作る方法を説明していきます。
※titaniumはインストールしてあるものとします。

CoffeeScript、Jade、Yamlでの開発環境の用意のしかた

1. alloyのプロジェクトを作成する

$ titanium create -p android, ios -n sample02 --id sample02.hoge.fuga
$ cd sample02
$ alloy new

2. jmkファイルを用意する

$ alloy generate jmk

これでapp/alloy.jmkファイルが作成されます。

3. coffee,jade,yamlようのディレクトリを準備する

$ mkdir -p app/alt/{assets,controllers,lib,models,styles,views}

coffee,jade,yamlはすべてapp/altの中に入れるようにします。
で実際にbuildする際にapp内の適切なディレクトリにコンパイルしてjs,xml,tssに変換されるようになっています。

4. 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で開発できるようになります。
めっちゃ便利！

5. 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"

ってな感じに書きましょう。

5. 試しに実行してみる
iOS

titanium build -p ios

AndroidはGenymotion経由で動かしましょう。
sdkを3.2.0はめんどくさい事しなくてもGenymotionで動かせます。

titanium build -p android -t device

参考: Titanium CLI 3.2にしたらGenymotionとの連携が楽になる

最後とに、実際に動かした時のキャプチャ
・Android
Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

・iOS
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

ということで、残り少ないお正月ですが、みなさんもぜひtitaniumで遊んでみてください。
web系の仕事の方は結構楽しめるのかと思いますよー。

※Objective-Cとくらべて〜みたいな事を言う人はぜひXcode立ち上げてください