Ti / Drkcore

tiTokyoにいってきた

Sun, 17 Feb 2013 07:02:08 +0919

スタッフの皆様お疲れ様でした。

後半のセッションが特に面白かったですね。

デンソー

車情報連携ユニットが楽しそう。発表聞いていて、クルマもスマホと同じ持ち運ぶデバイスなんだなーと思った。電気自動車は充電するしなー。あとVelocityの意味でビッグデータの範疇に入っていくのかな。

Alloy

最近ご無沙汰のAlloy。WidgetsとThemeが便利そうなので積極的に使っていこうと思った。ちなみに僕の開発環境は

なんだけど、ちょっと前にtylusっていうTSSをStylusで書くモジュールを発見したので使おうと思っている。

LanicaのPlatino

さくさく動いていてヤバイ、これは面白そう。Alloyでも動くそうだし。楽しみだ。

AlloyでiPhoneのカメラを扱う

Sun, 13 Jan 2013 09:50:57 +0919

カメラで写真を取ってデータベースに格納するアプリを作ってみた。スクロールビューで画像が入れ替わるのがよくわからんがひと通りできた。

スキャフォールドはこことかここを参照。

controllers/index.coffee

カメラ用のボタンを押したら内蔵カメラを起動して、写真をファイルに保存したら、パスをデータベースに保存する。

pts = Alloy.Collections.photo

cameraButton = Ti.UI.createButton
  systemButton: Ti.UI.iPhone.SystemButton.CAMERA

$.win1.rightNavButton = cameraButton

cameraButton.addEventListener 'click', ->
  Ti.Media.showCamera
    success: (event) ->
      now = (new Date).getTime()
      file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,
              String.format("%d-%d", now, Math.floor(Math.random() * 1000)))
      file.write(event.media)
      photo = Alloy.createModel('photo', { path: file.nativePath })
      photo.save()
      Alloy.Collections.photo.add photo
      return
    mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

pts.fetch()

$.index.open()

models/photo.js

モデルの定義

exports.definition = {
  config: {
    "columns": {
      "path": "string"
    },
    "adapter": {
      "type": "sql",
      "collection_name": "photo"
    }
  }
}

views/index.xml

コレクションの定義をしておく

<Alloy>
    <Collection src="photo"/>
    <TabGroup>
        <Tab id="tab1" title="写真" icon="dark_book.png">
      <Window id="win1" title="写真">
            <ScrollView id="scroll" dataCollection="photo">
              <Require src="photo"/>
            </ScrollView>
      </Window>
        </Tab>
        <Tab id="tab2">
      <Window id="win2">
      </Window>
        </Tab>
    </TabGroup>
</Alloy>

views/photo.xml

個々の画像

<Alloy>
  <ImageView image="{path}" width="100%">
  </ImageView>
</Alloy>

AlloyのCollectionが見つからない

Sun, 13 Jan 2013 08:58:08 +0919

黒い本の写真アプリをAlloyで作っている。

app/models/photo.jsに

exports.definition = {
    config: {
        "columns": {
            "path": "text"
        },
        "adapter": {
            "type": "sql",
            "collection_name": "photo"
        }
    }
}

とモデルとコレクションを定義しておいて、index.jsで

cameraButton = Ti.UI.createButton
  systemButton: Ti.UI.iPhone.SystemButton.CAMERA

$.win1.rightNavButton = cameraButton

cameraButton.addEventListener 'click', ->
  Ti.Media.showCamera
    success: (event) ->
      now = (new Date).getTime()
      file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,
              String.format("%d-%d", now, Math.floor(Math.random() * 1000)))
      file.write(event.media)
      photo = Alloy.createModel('photo', { path: file.nativePath })
      photo.save()
      Alloy.Collections.photo.add photo
      return
    mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

で、写真の撮影は出来てセーブするときにAlloy.Collections.photo.addメソッドがない（というかAlloy.Collections.photoがundefined）というエラーに悩まされている。

130113 追記

index.xmlにCollectionタグを追加したり、なんかごちゃごちゃやってたらうまくいくようになった。エラーの原因は結局わかってない。

Titanium Studio3.0が動かない場合はPythonのpathとsdkのバージョンを確認する

Wed, 09 Jan 2013 14:04:37 +0919

ドはまっていたTitanium Studioがやっと動いた。

Titanium Studioの Help -> Titanium Studio -> View LogFileを見てみると

File "osx/3.0.0.v20121127170203/iphone/provisioner.py", line 10, in <module>
    from OpenSSL import crypto
ImportError: No module named OpenSSL

って出ていたのでprovisioner.pyの先頭行が

#!/usr/bin/env python

で、brew経由の/usr/local/bin/pythonを見ていてそっちにOpenSSLがインストールされていないのが原因だった。早速インストールしようとするとgccがないって怒られた。

$ sudo pip install pyOpenSSL
gcc-4.2: error trying to exec '/usr/bin/i686-apple-darwin11-gcc-4.2.1': execvp: No such file or directory

これはsof見て解決。

これでmobileprovisionを認識するようになったけれど、今度は

Available developer names:
[ERROR] :  Unable to find an iOS Developer Certificate for "NAME (NUMBER)"

ってのが出るようになったんだけど、これはTISTUD-2969にあるようにバグらしいのでバージョンをあげればいい。

$ titanium sdk install --branch 3_0_x --default

で最新のバージョンを入れた(3.0.0.v20121127170203 -> 3.0.1.v20130108000206)。Titanium Studioでバージョンを切り替える場合はtiapp.xmlをいじる。

追記13.01.09 titanium コマンドで実機に送る

実機に送る場合

titanium build -p iphone -T device -P [UUID] -f -V [NAME]

2012年に読んだ本

Fri, 28 Dec 2012 07:43:55 +0919

今年読んだ本で良かったもの。

すごいHaskellたのしく学ぼう!

これはピカイチだった。RWHで停滞感が漂いまくっていた僕のHaskell理解力がかなり上がったのは間違いない。そういえば、最近Haskellしか書いてないなぁと2012年のエントリに付けられたタグを数えたらHaskell 90, Python 70, javascript 44だった。

すごいHaskellたのしく学ぼう!
Miran Lipovača
オーム社 / 2940円 ( 2012-05-23 )

あとはtwitterで色々教えてもらったりとか、三島Haskell無名関数の会が出来てモチベーションが上がったりとか色々タイミングが良かったということもあるが。来年も引き続きハスケりたい。

型というか、閉じている、自己同型といったイメージは数学ガールが良いかも

数学ガールガロア理論 (数学ガールシリーズ 5)
結城浩
ソフトバンククリエイティブ / 1995円 ( 2012-06-01 )

数学ガールが届いた

チケット駆動開発

自分の仕事にアジャイルな要素を入れたいというのはここ数年ずっと考えていて、やっと来年すこし取り組めそうで嬉しい。

僕のチケット駆動に対する期待は、創薬研究への応用なので、チケット駆動開発の背景にある考え方がぎっしり詰まった本書は、色々な発見や再発見があったり、今の仕事のアナロジーを見つけたりとかなり満足度の高い本だった。

チケット駆動開発
小川明彦
翔泳社 / 3444円 ( 2012-08-24 )

チケット駆動開発を読んだ

今年システムを少し運用してみて、意識の高低のバラツキを吸収する仕組みとしてゲーミフィケーション的なものも考えて行かないといけないし、受動的な情報伝達手段も考えて行かないといけないなぁと感じた。

（そもそも潜在的に）意識の高いマネジメント層は、能動的に情報アクセスしない研究者層（というより労働者層）が存在することを理解できないので、「そんなのホームに登録しておけばいいだけなんんじゃないか？」なんて言うんだけど、それすら能動的な情報アクセスなんだよなぁ。

デジタルサイネージのようなものにも手を出してみたい。

幸せな未来は「ゲーム」が創る
ジェイン・マクゴニガル
早川書房 / 2940円 ( 2011-10-07 )

JavascriptとTitanium Mobile

今年はクライアントサイドのMVCも熱かった。去年Javascriptを勉強してた時には、まさかiPhoneアプリの方に進んでいくとは思わなかったが。

ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理
Alex MacCaw
オライリージャパン / 2940円 ( 2012-06-09 )

ステートフルJavaScriptはjavascript MVCフレームワークの本でSpine.jsの解説に近い。そしてこの知識はTitanium MobileでJavascriptを使ったiPhoneアプリ開発で役立つ！

AlloyはTitaniumのためのMVCフレームワークでBackbone.jsを使ってつくられている。これを使うとjavascriptを利用してiPhoneアプリとかAndroidアプリが作れちゃうわけだ(下のエントリ参照)。

バージョンあげたら実機転送がうまくいかなくなって、最近は停滞気味ですが、来年はもうちょっと力を入れて取り組みたいと思っている（なんかアプリをリリースしたい）。

それから僕はCoffeeScriptが好きなので使っていますが、他にもNode.jsのテンプレートエンジン(Jade,eco,ejs)なんかも使えるので好みの開発スタイルを探求するためにCoffeeScriptやNode.jsの入門書もあわせて読んでおくとよいかも。

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

サーバサイドJavaScript Node.js入門
清水俊博
アスキー・メディアワークス / 3990円 ( 2012-10-26 )

過去に読んだ本

Titanium Studioでドハマリ中 -> XCodeを使って一部解決

Fri, 30 Nov 2012 05:53:01 +0919

最近Alloy+Emacsで快適に開発していたのだが、ちょっと実機転送したいアプリがあったので久々にTitanium Studioを起動したら思いっきりハマっている。

run iOS deviceすると次の画面が出てきて何を直したらいいのかさっぱり分からん。

そもそも、App IDとプロビジョニングプロファイルをきちんと理解していないからなぁ。ドキュメントをきちんと読んでおかないとダメだな。

あと、そのうち東京のもくもく会にも行ってみたいなぁ。

追記121128

KitchenSinkでも同じようなことになった。

初回インポートしてApp IDを変更して実機転送したところ初回は

一般設定して

次にcertificatesの設定して

最後にプロビジョニングプロファイルを登録

これで実機転送できる。

しかし二度目の実機転送を行おうとするとPlease add a provisioning profileという画面が出て先に進まなくなる。

TitaniumのQAで似たようなのを見つけた

Xcodeのコマンドラインツールを再インストールしたら直ったというコメントがあったので、ついでに4.4.1から4.5.2にあげてみたけど変わらず。他のヒトが試したようにTitanium Studioを再インストールしたり、titanium, alloyを最新版にあげてみたけどダメ。

あとは、コメントにあったとおりにpreview version入れてみるくらいだけど、時間切れなので帰ってきたらやる

121128追記

RC(3.0.0.201211271925)とNightlyBuild(3.1.0.201211271945)入れてみたけど変わらず。

ところで、

titanium build -p iphone -T device -P XXXXXX -V "XXX XXXX"

とやってみたけどシミュレータが立ち上がってしまうのはなんでなんだろ？オプションでなにか足りないものがあるのかなぁ、、、

XCodeを使ったらちょっと前進 (追記2012.11.30)

XCodeを使ってみることにした

titanium build -b -f -p iphone -T device -F iphone -P [UUID] -V [NAME]

でapp/build/[application].xcodeprojができているので、それをXCodeで開いて実機を選択してrunすればいい。

これで、KitchenSinkは実機に転送できた。

Alloyで作ったアプリも転送できるんだが、

couldn't find app.js

というエラーが出る。

Alloyでつくる簡易RSSリーダー

Fri, 23 Nov 2012 08:16:33 +0919

Titanium Mobile iPhone/Androidアプリ開発入門の簡易RSSリーダーをAlloyで書きなおしてみた

CoffeeScrptで開発する方法については、ここを参照のこと。

軽くハマったのはviewかな。

views/index.xml

最初TabGroupにidを設定したら、$.index.openでエラーがでた。

結局$.indexってなんじゃろか？とドキュメントを読んだら解決した。

要するにViewのトップレベルには

Ti.UI.Window
Ti.UI.TabGroup
Ti.UI.iPad.SplitWindow

のいずれかが必要で、idが明示的に指定されてない場合には、そのファイル名がidとして利用される。

規約に従うことにしたらxmlはシンプルになった。

<Alloy>
    <TabGroup>
    </TabGroup>
</Alloy>

controllers/index.coffee

コントローラーは本の通りに。スタイルとかも全部コントローラーに書いちゃったのでindex.tssはいじってない。

createApplicationTabGroup =  ->
  tab1 = createRSSTab 'Developer Blog', 'http://developer.appcelerator.com/blog/feed'
  tab2 = createRSSTab 'Q&A', 'http://developer.appcelerator.com/questions/feed/newest'
  $.index.addTab tab1
  $.index.addTab tab2
  return

createRSSTab = (title, url) ->
  win = Ti.UI.createWindow
    title: title

  tab = Ti.UI.createTab
    title: title
    icon: 'KS_nav_views.png'
    window: win

  tableView = Ti.UI.createTableView {data:[]}
  win.add(tableView)

  win.addEventListener 'open', ->
    query = String.format "select * from rss where url = '%s'", url
    Ti.Yahoo.yql query, (res) -> 
      if res.success is false
        alert("Yahoo YQL error.")
        return
      res.data.item.forEach (item) ->
        tableView.appendRow
          title: item.title
          color: '#000'
          link: item.link
          hasChild: true
    return

  tableView.addEventListener 'click', (event) ->
    detailWin = Ti.UI.createWindow {title: event.rowData.title, backgroundColor: '#fff'}
    webView = Ti.UI.createWebView {url: event.rowData.link}
    detailWin.add(webView)
    tab.open(detailWin)
    return

  return tab

createApplicationTabGroup()

$.index.open()

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

AlloyでのiPhoneアプリ開発にCoffeeScriptを使う

Sun, 18 Nov 2012 08:47:11 +0919

犬が早朝から吠えたので4時に叩き起こされたが、タイムラインを追いかけていたらAlloy with CoffeeScript のお誘いというこれは！というエントリがあがっていたので、早速誘われてみた。尚、jsとcoffeeは一緒のディレクトリに置いておくのが好みなので@k0sukeyのオリジナルなjmkに変更をくわえてあります。

ストップウォッチをつくる

Titanium Mobile iPhone/Androidアプリ開発入門のストップウォッチを参考にしました。

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

本書ではui.jsという1つのファイルで完結していますがAlloyのようなMVCフレームワークを使ったほうがコードの見通しは良くなると思います。

雛形をつくる

$ titanium create stopwatch # 対話でターゲットデバイスやapp-id設定
$ cd stopwatch
$ alloy new # alloyのひな形作成
$ alloy generate jmk

coffeeがコンパイルされるようにする

stopwatch/app/alloy.jmkを以下のように書きなおす。これでapp/controller のcoffeeファイルはalloy compileでコンパイルされるようになります。

task("pre:compile", function(event,logger) {
    var wrench = require("wrench"),
    fs = require("fs"),
    path = require("path"),
    controller_root = event.dir.controllers,
    coffee = require("coffee-script");

    wrench.readdirSyncRecursive(controller_root).forEach(function(controller){
    if (controller.match("coffee$")) {
        fs.writeFileSync(
        path.join(controller_root,controller.replace("coffee", "js")),
        coffee.compile(
            fs.readFileSync(path.join(controller_root, controller)).toString(),
            { bare: true }));
    }
    });
});

task("post:compile",function(event,logger){
});

alloyの開発

あとは普通に。

app/views/index.xml

<Alloy>
    <TabGroup>
        <Tab id="tab1" icon="dark_clock.png" title="ストップウォッチ">
            <Window id="window1" title="ストップウォッチ">
                <Label id="label">
          00:00:00.000
                </Label>
        <Button id="button">
          Start
        </Button>
            </Window>
        </Tab>
        <Tab id="tab2" icon="dark_info.png" title="使い方">
            <Window id="window2" title="使い方">
          <WebView url="howto.html">
          </WebView>
            </Window>
        </Tab>
    </TabGroup>
</Alloy>

/app/styles/index.tss

{"Window": {
  "barColor": "#000",
  "backgroundColor": "#000"
},
"Tab": {
  "backgroundColor": "#000"
},
"#label": {
  "color": "#fff",
  "width": "auto",
  "height": "auto",
  "font": {
    "fontSize": 40,
    "fontWeight": "bold"
  }
},
"#button": {
  "color": "#000",
  "width": 150,
  "height": 40,
  "bottom": 30
}}

webview用のhtmlは /app/assets/iphone/howto.htmlに

<html>
    <head>
        <title>使い方</title>
    </head>
<body>
    <h1>使い方</h1>このサンプル
は<a href="http://www.amazon.co.jp/dp/479803231X">Titanium Mobile
iPhone/Androidアプリ開発入門</a>のストップウォッチのサンプルをAlloyで
書きなおしてみたものです。
<img src="http://ec2.images-amazon.com/images/I/41jDZ5IY01L._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU09_.jpg"/>
</body>

興味を持ったら購入して読んでみるとよいと思いますよ。

</html>

最後にcoffeeをapp/controllers/index.coffeeに

started =false
intervalID = null

startStopwatch = ->
  $.label.text = "00:00:00.000"
  startTime = new Date()

  _updateTimer = ->
    u_sec = 1000
    u_min = 60 * u_sec
    u_hour = 60 * u_min
    now = new Date()
    diff = now - startTime

    hour = Math.floor(diff/u_hour)
    min = Math.floor((diff - hour*u_hour)/u_min)
    sec = Math.floor((diff - hour*u_hour - min*u_min)/u_sec)
    msec = diff / u_sec
    $.label.text = ("0" + hour).slice(-2) + ":" +
                   ("0" + min).slice(-2) + ":" +
                   ("0" + sec).slice(-2) + "." +
                   ("00" + msec).slice(-3)

  intervalID = setInterval(_updateTimer, 3)
  return

$.button.addEventListener 'click', -> 
  if started
    clearInterval(intervalID)
    $.button.title = "Start"
    started = false
  else
    startStopwatch()
    $.button.title = "Stop"
    started = true
  return

$.index.open()

実行

$ alloy run

Let's Enjoy!

flymakeを使ってAlloyのTSSをリアルタイム文法チェック

Sat, 17 Nov 2012 18:59:32 +0919

Alloyのtssの文法ってよく分からんですね。css-modeあててもjs2-modeをあててもエラーばっか吐くし、快適にコーディングできん。

ということでちょっと調べてみた。

Alloyのソースコード探していたらgrammerのとこにtss.pegjsってのがあって、ヘッダを読んでみるとTSS parser based on JSON parserって書いてあったので基本的にはJSONらしい。

それにしては{で始まらないよなぁとソースコードを追いかけていくとcompilerUtilsに

// Add enclosing curly braces, if necessary
contents = /^\s*\{[\s\S]+\}\s*$/gi.test(contents) ? contents : '{' + contents + '}';

ってあって、要するに{で始まってない場合ファイルのコンテントを{}で囲むことになっているらしい。それからtssはキー値を""で囲まなくてもいいんだけど、囲んでも別に問題なかったりする。

結論としてはJSONで書いておけば、即時構文チェックとかシンタックスハイライトとか効かせられていいんじゃないかと。

つまり

"Label": {
  font: {fontSize: 20, fontFamily: "Helvetica Neue"},
  color: "#999"
}

って書いてるところを、最初から

{"Label": {
  "font": {"fontSize": 20, "fontFamily": "Helvetica Neue"},
  "color": "#999"
}}

って書くようにすれば、事前に構文のエラーを潰せて気持ちがいい。

Emacsの設定

json-modeを使ってみますが、package.elでは入れられないのでgit cloneしてrequireします。javascript-modeを継承しているのでTabの設定なんかはそっちの設定に従う。

次にFlymakeの設定をする。構文チェックにjslintを使うのでインストールしてない場合には

npm install -g jslint

で入れます。

Emacsのほうの設定はこんな感じ。tabはスペース2個分（個人的な好み）にした。それからelectric-pair-modeも入れてるので{},""をよろしくやってくれる。

;; JSON
(require 'json-mode)
(add-to-list 'auto-mode-alist '("\\.tss$" . json-mode))
(add-hook 'json-mode-hook 'electric-pair-mode)
(add-hook 'json-mode-hook '(lambda ()
                 (setq js-indent-level 2)
                 ))

(when (load "flymake" t)
  (defun flymake-jslint-init ()
    (let* ((temp-file (flymake-init-create-temp-buffer-copy
               'flymake-create-temp-inplace))
           (local-file (file-relative-name
                        temp-file
                        (file-name-directory buffer-file-name))))
      (list "jslint" (list "--terse" local-file))))

  (setq flymake-err-line-patterns
    (cons '("^\\(.*\\)(\\([[:digit:]]+\\)):\\(.*\\)$"
        1 2 nil 3)
          flymake-err-line-patterns))

  (add-to-list 'flymake-allowed-file-name-masks
               '("\\.tss\\'" flymake-jslint-init)))

(load-library "flymake-cursor")

この設定で少し使ってみる。

Emacs+titanium cli+alloyでiPhoneアプリを開発する

Sat, 17 Nov 2012 11:31:21 +0919

静岡javaScript勉強会 #2に参加されるみなさんこんにちは、参加されないみなさんもこんにちは。僕は11月のすべての土曜日を留守にして家族の顰蹙を買うという重圧に耐え切れずに早々に離脱してしまいましたので朝からお家でjsってます。

ところで、@tomofの「Backbone.js入門」面白かったですか？よっしゃーいっちょおとうさんもbackbone.jsでウェブアプリケーションつくっちゃうぞーっていう気になりましたか？はいそうですか、そうですよね。ついでに、その勢いでBackbone.jsっぽい開発のノリでiPhoneアプリを開発できたら面白いと思いません？思いますよね。

やりましょう、Alloyで!(孫社長風味でよろしく)

というような内容のエントリです。

Titanium CLIとAlloyのインストール

Titanium CLIはTitaniumで開発するためのコマンドラインのツールで、AlloyはTitaniumのためのMVCフレームワークですが、両方共Node.jsのv0.8以上がインストールされていればnpmでインストールできるはずです。

npm install -g titanium
npm install -g alloy

うまくいかない場合は下のサイトを参考にしてください。

エディタ

EmacsでもvimでもST2でも好きなモノを使えば良いとおもいますが、僕はEmacs(24)をつかっています。でnxmlモードにzencoding-modeをあててあります。入ってない場合はM-x list-packaegesでzencoding-modeを選んでインストールしたらinit.elに下の内容を追記しておけばいいです。

(add-hook 'sgml-mode-hook 'zencoding-mode) 
(add-hook 'nxml-mode-hook 'zencoding-mode)

他にはjavascriptの開発用にjs2-modeを入れているのとcoffeeモードにflymakeが効くようにしてありますが今回の内容では必要ありません。

追記121118: CoffeeScriptを使って開発する方法

開発の流れ

最初にtitaniumコマンドでプロジェクトの雛形をつくります

$ titanium create
Titanium Command-Line Interface, version 3.0.13
Copyright (c) 2012, Appcelerator, Inc.  All Rights Reserved.

Please report bugs to http://jira.appcelerator.org/

Target platforms: (android,ios,ipad,iphone,mobileweb) iphone
App ID: com.example.tabsample
Project name: tabsample

[INFO] Creating Titanium Mobile application project
[INFO] Project 'tabsample' created successfully in 276ms

プロジェクトのディレクトリに移動してalloyの雛形をつくります。

$ cd tabsample/
$ alloy new
       .__  .__                
_____  |  | |  |   ____ ___.__.
\__  \ |  | |  |  /  _ <   |  |
 / __ \|  |_|  |_(  <_> )___  |
(____  /____/____/\____// ____|
     \/                 \/
Alloy by Appcelerator. The MVC app framework for Titanium.

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

ここからEmacsを使っていきます。まずはapp/views/index.xmlを修正します。中身を全部消してzencodingでさくっと用意します。zencodingはC-returnで起動させて

Alloy>TabGroup>(Tab#tab icon title>Window#window title backgroundColor>Label#lable)*2

みたいにワンライナーで書けるので便利すぎです。

zencodingで大まかにスキャフォールドを用意したら、アトリビュートなんかを設定します。ちなみに画像はここから取ってきてapp/assets/iphone/に起きました。

<Alloy>
    <TabGroup>
        <Tab id="tab1" icon="KS_nav_views.png" title="Tab 1">
            <Window id="window1" title="Tab 1" backgroundColor="#fff">
                <Label id="label1">
          I am Window1
                </Label>
            </Window>
        </Tab>
        <Tab id="tab2" icon="KS_nav_ui.png" title="Tab 2">
            <Window id="window2" title="Tab 2" backgroundColor="#fff">
                <Label id="label2">
          I am Window2
                </Label>
            </Window>
        </Tab>
    </TabGroup>
</Alloy>

app/styles/index.tssはLabelの設定だけ。

    "Label": {
    font: {fontSize:20, fontFamily:"Helvetica Neue"},
    color: "#999"
}

tssにはどのモードをアサインするのがいいのでしょうか？誰か知っていたら教えて下さい。(追記121117 json-modeあててみた)

iOSシミュレータを起動

プロジェクトのトップディレクトリで

$ alloy run

するとシミュレータが立ち上がります。素敵ですね。これで、雛形作ってシミュレータを動かすところまでできました。あとはapp以下を良い感じにいじってイケてるアプリを作るだけですね。

シミュレータが立ち上がるまでに結構待たされるのでストレスを感じますが、それは僕のmacが遅いからですね。はやく買い換えたい。

おまけ(Alloyの開発にJadeを使う)

@k0sukeyにAlloyJadeという素敵なものがあることを教えてもらいました。Jade派の僕としては非常に惹かれるので後で試そうかなと思っています。