Alloy本格的にはじめました - 40歳からのキャリアチェンジ

現在、作業が比較的落ち着いてるのと、先々考えても、Alloyはひとまず抑えておいたほうがよいかと思って、やや食わず嫌い気味だったAlloyを最近本格的にいじりはじめました。

過去何度かトライはしていたのですが、自分が欲しいサンプルアプリ（まずは画面遷移系のもの）の情報が見つからなかったことも有り、本格的な利用は躊躇してたこともあり、似たような人がいるかもしれないと思い、ひとまず画面遷移系のアプリについて以下に簡単にまとめておこうと思います

プロジェクト作成までの流れ

自分の実行環境

Titanium SDK 3.2
Alloy 1.3.1

Titanium の新規プロジェクト作成する

CLIベースで最近作業してるので、ひとまずその流れを以下に示します。

※気が向いたら、Titanium Studioでの流れもキャプチャ付きでまとめておきたい

ホームディレクトリ配下に、titaniumというディレクトリがある前提での説明になってますので、適宜読み替えていただければと思います。

ti create --name=alloysample1 --id=info.h5y1m141.alloysample1--platform=ios

上記実行すると、オプション設定間違ってるからか、ターゲットのOSを聞かれるので、その後に、任意のOS（ひとまずiOS）と入力する。しばらくすると

Project 'alloysample1' created successfully in 90ms

という感じでプロジェクト作成完了します

Alloyを利用するための手順

Titanium の新規プロジェクト作成完了したら、今度はAlloyが利用できるようにします。

~/titanium
% cd alloysample1
~/titanium/alloysample1
% alloy new
       .__  .__
_____  |  | |  |   ____ ___.__.
\__  \ |  | |  |  /  _ <   |  |
 / __ \|  |_|  |_(  <_> )___  |
(____  /____/____/\____// ____|
     \/                 \/
Alloy 1.3.1 by Appcelerator. The MVC app framework for Titanium.

[INFO] Deployed ti.alloy plugin to plugins/ti.alloy/plugin.py
[INFO] Deployed ti.alloy hook to plugins/ti.alloy/hooks/alloy.js
[INFO] Installed "ti.alloy" plugin to tiapp.xml
[INFO] Generated new project at: app

Alloyが利用できるようになったかと思いますが、念のためこの段階でbuildしてみます

ti build --platform ios

build完了すると、以下の様な画面が表示されるかと思います。

f:id:h5y1m141:20140407212021p:plain

Alloy導入後のプロジェクトのディレクトリ構造は以下のようになります。

├── LICENSE
├── README
├── Resources
│   ├── alloy
│   ├── app.js
│   └── iphone
├── app
│   ├── README
│   ├── alloy.js
│   ├── assets
│   ├── config.json
│   ├── controllers
│   ├── models
│   ├── styles
│   └── views
├── build
│   ├── alloy
│   ├── iphone
│   └── map
├── plugins
│   └── ti.alloy
└── tiapp.xml

JavaScriptではなくCoffeeScriptで書きたいので、設定ファイルを編集する

Titanium×Alloy×CoffeeScript×Jadeでいいんじゃーねの情報を参考に、~/titanium/alloysample1/app/alloy.jmk を以下内容で作成します

task("pre:compile", function(event,logger) {
  var wrench = require("wrench"),
      fs = require("fs"),
      jade = require("jade"),
      view_root = event.dir.views,
      path = require("path"),
      coffee = require("coffee-script");
  
  event.alloyConfig.xml = [];
  event.alloyConfig.coffee = [];
       
  wrench.readdirSyncRecursive(view_root).forEach(function(view) {
    if (view.match(/.jade$/)) {
      event.alloyConfig.xml.push(view.replace(/\.jade$/, ".xml"));
      fs.writeFileSync(
        path.join(view_root,view.replace(/\.jade$/, ".xml")),
        jade.compile(fs.readFileSync(path.join(view_root,view)).toString())(event));
    } 
  });
 
  wrench.readdirSyncRecursive(event.dir.home).forEach(function(target){
    if (target.match(/\.coffee$/)) {
      event.alloyConfig.coffee.push(target.replace(/\.coffee$/, ".js"));
      fs.writeFileSync(
        path.join(event.dir.home,target.replace(/\.coffee$/, ".js")),
        coffee.compile(fs.readFileSync(path.join(event.dir.home + "/" + target)).toString(), { bare: true }));
    }
  });
});
  
task("post:compile",function(event,logger){
  var fs = require("fs"),
      view_root = event.dir.views,
      path = require("path");
  
  event.alloyConfig.xml.forEach(function(view){
    if (!view.match(/index.xml/g)) {
      fs.unlinkSync(path.join(view_root, view));
    }
  });
  event.alloyConfig.coffee.forEach(function(target){
    fs.unlinkSync(event.dir.home + "/" + target);
  });  
});

app/controllers/index.coffee

$.index.open()
$.label.addEventListener 'click', (e) ->
  alert e.source.text

app/views/index.xml

<Alloy>
    <Window class="container">
        <Label id="label">Hello, World</Label>
    </Window>
</Alloy>

XMLでもいいのですが、上記でalloy.jmkにて、Jade利用できるようにしていたので、index.xmlではなく、index.jadeを以下のように準備しました

app/views/index.jade

Alloy
  Window.container
    Label#label Hello, World!!!!!!!

これをベースにして、画面遷移の方法を考えます

画面遷移系のサンプルアプリ

理解してしまうと簡単なのですが、そこに至るまでに意外と時間がかかったのも事実なのでここは少しじっくり解説していこうと思います。

作成するファイル＆それぞれの対応関係

まず、現在作成中のプロジェクトのappディレクトリのcontrollers、styles、viewsにそれぞれ以下のようにファイルを作成します

controllers
- index.coffee
- newWindow.coffee
styles
- index.tss
- newWindow.tss
views
- index.jade
- index.xml
  - index.xmlがないとうまくコンパイルされないのでそれは残してあります
- newWindow.jade

起動時の画面＆画面遷移後の画面イメージと、それぞれ対応するファイル群の対応関係を絵にしてみました

f:id:h5y1m141:20140408063502p:plain

f:id:h5y1m141:20140408063432p:plain

キモとなるコードの解説

上記の対応関係の紫色の枠＆線でつなげてる部分が画面遷移する上でキモとなる処理になるかと思います。

具体的には

画面遷移先の処理と対応関係にある呼び出し先のコントローラーを起動時に実行されるindex.coffeeに記述する
- Alloy.createController('xx')としてる所。xxの方は処理を渡すコントローラーの名前の拡張子を取った名前（今回だとnewWindow）を指定する
- 処理を渡した後に呼びだすメソッド名を記述する
呼び出される側のコントローラーのファイルの newWindow.coffee
- 処理を渡した後に呼びだされるメソッドを実装する。
- 遷移後のWindowは、Window#newWindow.container という形でマークアップしており、id名であるnewWindowを指定してopen()にてWindowを開く

という感じです。

実際のコード

起動時の画面

index.coffee

$.mainWindow.open()

$.label.addEventListener 'click', (e) ->
  newWindow = Alloy.createController('newWindow')
  return newWindow.move()

index.jade

Alloy
  Window#mainWindow.container
    Label#label Hello, World!!!!!!!

index.tss

".container": {
    backgroundColor:"#fff"
},
"#label": {
    width: Ti.UI.SIZE,
    height: 40,
    color: "#000",
  top:50,
  left:10

}

遷移後の画面

newWindow.coffee

exports.move = () ->
  alert "Moved!"
  return $.newWindow.open()

newWindow.jade

Alloy
  Window#newWindow.container
    Label#label This is a new Window

newWindow.tss

".container":{
    backgroundColor:"#fff"
}

"#label": {
    width: Ti.UI.SIZE,
    color: "#222",
  top:"50%"
}

最後に最近参考にした情報のまとめ

Alloy関連の情報は結構色々ネット上にあるのですが、これまとまっていたら嬉しいと思う人が結構いそうなので、とりあえず以下に箇条書きでまとめておきました

サンプルアプリ
- Aaron Saundersさんが作ったシンプルなやつ
  - 作られた時期が古いのでAlloy.getController()とかなってるので利用には注意が必要。
Alloy全般
- Alloy Framework のドキュメントの日本語訳です。
  - これは本当に凄い！
ナビバー関連の
- Titaniumで実施したiOS7対応
- TitaniumでiOSのNavBarにローディング中を示す表示をしてみる前編
その他開発する上で効率化につながる情報
- Titanium×Alloy×CoffeeScript×Jadeでいいんじゃーね
  - 元々、TitaniumのClassicの方でCoffeeScritpで書いていたので、その流れでAlloyも効率的にCoffeeで書けるならと思って見つけたページ。しかもJade（いっつも読み方わからないけど、ジェードっていうのかな？）が使えるなら、最近Node.js由来の技術を多用してる自分としてもありがたい
- gitTio
  - Titanium Modulesとか Alloyの Widgetsの検索＆インストールを簡単に行えるnpmモジュール。詳しくはgitTio - Titanium用モジュール/Alloyウィジェット管理ツールが参考になると思います