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

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

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

ただ、この辺の内容って昔書いていたんですね。

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

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

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

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

1
2
3


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

jmkファイルを用意する

1

$ alloy generate jmk

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

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

1

$ 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で先に必要なライブラリを入れておきましょう

1
2
3


npm install -g cofee-script
npm install -g jade
npm install -g js-yaml

インストールがおわったらjmkファイルを以下のように記載してください

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86


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でも出しましょう

1
2
3
4
5


# app/alt/controllers/index.coffee
doClick = (e)-&gt;
  alert $.label.text

$.index.open()

1
2
3
4


//- app/alt/views/index.jade
Alloy
  Window.container
    Label#label(onClick="doClick") Hello, World

1
2
3
4
5
6
7


## app/alt/styles/index.yml
".container":
  backgroundColor: "white"
"Label":
  width: Ti.UI.SIZE
  height: Ti.UI.SIZE
  color: "#000"