alloy / test / apps / ui / dashboardのサンプルが良かった。

こんなかんじのをサクッと作れるのがいいですね。

ドキュメントによると、

Alloy uses Backbone.js to provide support for its models and collections. Alloy also borrows the concepts of migrations and adapters from Rails for storage integration.

ということでmodelの仕組みはbackbone.jsっぽくてマイグレーションはRoRっぽいが、設定周りがちょっと違う。

• 'sql' for the SQLite database on the Android and iOS platform.
• 'localStorage' for HTML5 localStorage on the Mobile Web platform.
• 'properties' for storing data locally in the Titanium SDK context.

とどのストレージを使うか選ぶ。backbone.jsとかspine.jsだとlocalstrageかrestなところが選択肢が増えたことで型とか設定するようになっている。

モデルの変更とかで送られてくるイベントの種類はドキュメントに書いてないのでソースコード読まないといけないっぽいんだけど、backbone.jsと同じかなと思っている。

alloy / test / apps / models / propertiesを眺めてみたんだけどcollectionの位置づけがわからなかった(backbone.jsのコレクションとモデルって分かれてるよね)。

なんか書いてみないとダメだな。

alloy / test / apps / advanced / themesはconfig.jsonでプラットフォームごとにテーマを切り替えるというサンプル。

TSSっていうのはAlloyのスタイルシート(CSS)みたいなものだが、exprを使うと演算できる。昨日@k0sukeyが言ってたのはこれのことかと今更理解したわけだが。

スライダーが縦になっているが、これはTSSをみると

"#slider": {
    leftTrackImage: '/title_green.png',
    top: 228, 
    left: -145,
    width: 350,
    transform: expr(Titanium.UI.create2DMatrix().rotate(-90))
},

こんな感じで縦方向に-90度回転されている。

alloy / test / apps / advanced / inheritanceを読んでみた。継承は分かりやすいが、windowまわりがいまいちわからん。

controller/index.js

$.index.open();

function openDialog(e) {  
    Alloy.createController(e.source.title, {
        message: 'Opened ' + e.source.title
    }).openDialog($.index);
}

createControllerメソッドで文字列を渡すとコントローラーが作られる。

views/index.xmlはこんな感じになっていて

<Alloy>
    <Window>
        <View layout="vertical">
            <Button onClick="openDialog">baseDialog</Button>
            <Button onClick="openDialog">animatedDialog</Button>
        </View>
    </Window>
</Alloy>

Buttonのtextじゃなくてtitleで渡される(e.source.title)みたいだ。コード追っかけててちょっと引っかかった。

openDialogメソッドはそれぞれのコントローラーで実装されている。

controllers/baseDialog.js

var args = arguments[0] || {};
$.message.text = args.message || 'dialog';

exports.openDialog = function(win) {
    $.refWin = win; 
    $.refWin.add($.cover);
    $.refWin.add($.dialog);
}

exports.closeDialog = function() {
    $.refWin.remove($.cover);
    $.refWin.remove($.dialog);
    $.refWin = $.cover = $.dialog = null;   
}

refWinってなんだよ？と思ったが新しい属性作って放り込んでいるだけなのかな？あとWindowにWindowを追加してんの?($.refWin.add)。それとも$.cover,$dialogはviewなんだろうか？コンパイル後のコードを読むにはどうしたらいいんだろうか？

継承はexports.baseControllerにスーパークラスを指定する。あとは普通にメソッドを上書きすればいい。

// Establish inheritance from baseDialog
exports.baseController = 'baseDialog';

// Override baseDialog's openDialog() function. We will still
// be able to use baseDialog's closeDialog() function.
exports.openDialog = function(win) {
    $.refWin = win; 
 ...

}

参加されたみなさんお疲れ様でした。

titanium cliでのアプリ開発の流れを学んだのが大きな収穫だった。Titanium Studioを使わずにEmacsで開発できるようになるのは個人的には非常に大きい。

ステッカー頂いた。

インストールとか使い方は先取り “新” Titanium CLIの通りなんだが、titanium createコマンドがなかったのでちょっと躓いた。結局Developer Preview: The New Titanium Command Line Interfaceにあるように

titanium sdk install --branch 3_0_X --default

と打って、3.0系を入れることでtitanium createが使えるようになった。

もくもく会ではtodoMVCをalloyでやるつもりだったんだけど、Alloyのドキュメント読んで、Test/Basicsを触ったら終わってしまった。

todoサンプルを見つけたのでこっちも読んでみる。

• 「Titanium もくもく会 Tokyo #2」に参加してきました
• todolist.alloy
• Ti Weekly Clips (2012/10/28～2012/11/03) #TitaniumJP

その他

• iPad miniは実物みると欲しくなる
• mac book pro retina素敵。コンパイル速くて羨ましい(僕のはmacbook 2008 early)

IT技術の教育応用は最近興味がある分野です、というよりも自分の技術適用の動機付けとしてちょうどいい。

例えば、けいさんかあどなど、シャッフルするのが面倒くさいし、隣でストップウォッチ構えて張り付いてあげないといけない。

これはTitanium Mobileでつくる動機としては正当なのでプロトタイプをつくってみた。

が、これは不評だった。電卓っぽいボタンだと数字の位置を知らないので探して押すのに時間がかかる。娘はイライラしだして途中で投げ出してしまった。

結局、シャッフル機能と、カード送りする機能（正解の時のみ次に進むのは要らない）、計測する機能があればいいだけということを理解したので、CoffeeScriptで書きなおすことにした。

応答の早いsiriがあれば面白いのにと思ったが。

CoffeeScriptファーストガイド モダンJavaScriptによるアプリケーション開発 (NEXTーONE)
飯塚 直
翔泳社 / 2940円 ( 2012-05-26 )

@k0sukeyに教えてもらったalloyっていうTitanium Mobile用のMVCフレームワークがなかなか面白げなので触ってみた。

backbone.jsを土台にしているそうなので、そこら辺を知っていれば分かりやすいかなと思う。

Quick Startを写経したら10分程度でここまで出来た、すごいラクチンかもしれない!

注意点(Titanium StudioとNode.js使っている前提で)

• nodebrewとか使っている場合はplugins/ti.alloy/plugin.pyのguessPathsにパスを追加しておく
• これみてプラグインを入れておく

静岡 Titanium Mobile もくもく会 #01

というわけで、こういったあたりの内容でもくもく会をやります。

• 静岡 Titanium Mobile もくもく会 #01

基本はもくもく会（無線LAN完備）なのですが、プロジェクタも用意してあるので、@k0sukeyがalloyのさわりをレクチャーしてくれるかもしれないし、僕(CoffeeScript派)がSpine.jsの布教活動をしているかもしれません。緩い流れで進行していくと思います。

• Titanium Mobile
• Alloy
• Backbone.js(or Spine.js)
• jQuery Mobile
• (Cocos2D)

なんかに興味がある方は参加するとハッピーになれるはず。

それから会場の吉原にはB級グルメのつけナポリタンがあるので、変わったつけ麺が食べてみたいという動機でもいいかもしれないですね。

緑の本読んだら、これを読むのがいいかも。

Appcelerator Titanium Smartphone App Development Cookbook
Boydlee Pollentine
Packt Publishing / 3810円 ( 2011-12 )

参考になったテク

• Raphael.jsを使ってチャートを実装
• 「引っ張って更新」の実装
• Facebookや他のSNS系サービスとの連携のさせ方

5章の食べログとの連携をやろうとしたんだけど、食べログAPIは住所や電話番号といった細かい個人情報を登録する必要があり気持ち悪かったので、登録せずに読み流すだけにした。

Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)
北尾 雅人
翔泳社 / 3129円 ( 2011-06-10 )

というわけで、一通り読んだ。

黒い方の本を最初に読んだのだけど全体像がつかめなくて、緑のほうをススメられたので読んでみたら緑ののほうがわかり易かった。

ただ、Titanium Studioの説明がないので、黒い本を読むかネットの情報を少し漁る必要があるかなと思う。

Titanium Mobile iPhone/Androidアプリ開発入門―JavaScriptだけで作る
小澤 栄一
秀和システム / 2520円 ( 2012-02 )

用途にもよると思うけどjQuery Mobileで作るようなweb的なレイアウトのものは最初からTitanium Mobile利用してもいいかなと思った。

あとは簡単なゲームを作ろうと思ったら、objective-cで書く必要があるよなという感じで、cocos2d for iphoneぐらいは使えるようになっておこうと。

Twitterクライアントの作成をアプリ作成の入門にするのも下火になりそうだし、面倒くさくなる前に作ってみた。お盆のあたりからだらだらコードを写経してたので1ヶ月もかかったが、3,4章のTwitterクライアントまではできた。

Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)
北尾 雅人
翔泳社 / 3129円 ( 2011-06-10 )

4-3-2で紹介されていたキーボードツールバーが動かなくて困ったが、元のソースコードをコンパイルしても動かなかったので、バージョンの関係かなとさらっと流すことにした。

5章は食べログAPIを使ったアプリの開発なのでこれも楽しみ。

それから、function(){}とか()();とか毎回書くのもだるいので写経が終わったらCoffeeScriptで書くことにした。