Titanium CLI × Alloy × CoffeeScript × Jade で作るiPhoneアプリのお話

Titanium CLI × Alloy ×

CoffeeScript × Jade

で作るiPhoneアプリのお話Keitarou Oonishi

自己紹介

はじめてなもんで..

自己紹介・Name ：　Keitarou Oonishi

・Job　：　専門学生 4月から東京でエンジニア

・Blog ：　http://www.absolute-keitarou.net/blog

・Twitter：　＠Dollhyn_kei

・Skill ：　主にRuby・Titanium・PHP・Wordpress　　　　　　Ti歴は１年になりました。

初めてのスライドは最近の僕のおもちゃ「Titanium」について語ります。

http://www.absolute-keitarou.net/blog

http://www.absolute-keitarou.net/blog

アジェンダ

・Titanium

・Alloyフレームワーク

・CoffeeScript

・Jade

・Titanium CLI

っと、はじめに

はじめに

今回のスライドでは、インストールの手順とかは、触れていません。かといって、Titanium熟練者さんがみても、喜ぶスライドでもないです。『こんなアプリの作り方あんのか！』って興味を持っていただければ幸いです。

あと、スライドはじめてだから期待しない！

アジェンダ

・Titanium・Alloyフレームワーク

・CoffeeScript

・Jade

・Titanium CLI

Titaniumについて・javascriptを使って、iOS, Androidのアプリを作れちゃう！！

・Obj-c、Javaなんか知らなくっても作れちゃう。

・jsのコードをObj-cやJavaのコードに変換して動かしているような、イメージ（あくまで、イメージ）

・Obj-CやJavaでTitaniumモジュールをつくることができるので、可能性は無限大でしょう∞

・基本的には『Titanium Studio』をインストールしたら開発できる

Titanium製のアプリ紹介

サイボウズ Live for iPhone

最近よく使ってます。




家計簿アプリの Zaim




家計簿アプリの Zaim

他にも調べたらたくさん！！

Titaniumのソースvar win = Ti.UI.createWindow({ backgroundColor:'white'});

var label = Ti.UI.createLabel();label.text = "Hello Titanium";label.addEventListener("click", function(e){ alerts("Click");});win.add(label);

win.open();

ラベルを１つ表示して、クリックしたらダイアログ出す！みたいなソースはこんな感じ

Titaniumのソース

これだけでもObj-c・Javaと比べて簡単そう


でも、後々大変になりますこれ。


何が大変って、UI・レイアウト・処理（イベント）が全部JSで書けてしまうのでソースコードがカオスになります

var win = Ti.UI.createWindow({ backgroundColor:'white'});

var label = Ti.UI.createLabel();label.text = "Hello Titanium";label.addEventListener("click", function(e){ alerts("Click");});win.add(label);

win.open();

UIとレイアウト

UI

処理（イベント）

そこで、救世主『Alloy』

アジェンダ

・Titanium

・Alloyフレームワーク・CoffeeScript

・Jade

・Titanium CLI

Alloyについて

・Appcelerator公式のTitaniumフレームワーク

・RoRちっくなMVCフレームワーク

・コマンドからのファイル生成とかもできる！

・node.jsが必要！（バージョンによっては....）

フレームワーク構成

・assets/ 　画像とかぶちこむ・controllers/　イベント書いたり、いろいろ

・views/ 　　UIを書く

・models/ DB関係

・alloy.js 最初に読み込まれるファイル

・styles/　　 UIのレイアウトを書く

ビュー

<Alloy> <TabGroup> <Tab id="tab1" icon="KS_nav_views.png" title="Tab 1"> <Window id="window1" title="Tab 1" backgroundColor="#fff"> <Label id="label1">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">Window2</Label> </Window> </Tab>

</TabGroup></Alloy>

ViewはXMLでゴリゴリ書いていく

スタイル

"#label1": { top:100, width: Ti.UI.SIZE, height: Ti.UI.SIZE, color : "#000"},"#label2": { top:200, width: Ti.UI.SIZE, height: Ti.UI.SIZE, color : "#000"},

Styleはtssでセカセカ書いていく

cssみたいにかけちゃうのが素敵

玄人さんはSassとか使ってる方も

モデルexports.definition = { config: { "columns": { "item":"text", "done":"integer", "date_completed":"text" }, "adapter": { "type": "sql", "collection_name": "todo" } },

extendModel : function(Model) { _.extend(Model.prototype, { validate : function(attrs) { for (var key in attrs) { var value = attrs[key]; if (value) { if (key === "item") { if (value.length <= 0) { return 'Error : No item!'; } } if (key === "done") { if (value.length <= 0) { return 'Error : No completed flag!'; } } } } } });

return Model; },

extendCollection : function(Collection) { _.extend(Collection.prototype, { comparator: function(todo) { return todo.get('done'); } });

return Collection; }}

・Backbone.jsライク

・Sqliteが簡単に使える！

・generateで雛形もつくれる

コントローラーfunction whereFunction(collection) { return !whereIndex ? collection.models : collection.where({ done: whereIndex === 1 ? 0 : 1 }); }

// Perform transformations on each model as it is processed. Since // these are only transformations for UI representation, we don't// actually want to change the model. Instead, return an object// that contains the fields you want to use in your bindings. The // easiest way to do that is to clone the model and return its // attributes with the toJSON() function.function transformFunction(model) { var transform = model.toJSON(); transform.item = '[' + transform.item + ']'; return transform;}

// open the "add item" windowfunction addToDoItem() { Alloy.createController("add").getView().open();}

// Show task list based on selected status typefunction showTasks(e) { if (typeof e.index !== 'undefined' && e.index !== null) { whereIndex = e.index; // TabbedBar } else { whereIndex = INDEXES[e.source.title]; // Android menu } todos.fetch();}

・Controllerはjsでごりごり

更にTitaniumを楽しむ


・生のjsは書きたくない。短くしたいもん



・XMLも書きたくない。




・コマンドラインで作っていきたい！




・コマンドラインで作っていきたい！

・好きなエディタ使いたいよ～

アジェンダ

・Titanium

・CoffeeScript・Alloyフレームワーク

・Jade

・Titanium CLI

CoffeeScriptとは・javascriptのソースコードを生成するためのスクリプト言語

・見た目はPythonっぽくなる

・とにかくコードが短くなる。

・npm（nodejs）とかでインストールすると楽

構文的特徴

・functionのキーワードが -> に置き換えられる

・{}の代わりにインデントを使って構造を定義

・クロージャが書きやすい

・() も場合によっては省略できる

サンプル# 位置情報の更新＆ピンの表示setUserLocation = (map) -> Titanium.Geolocation.purpose = '位置情報を取得します' Titanium.Geolocation.getCurrentPosition (e)-> if !e.success || e.error latitude = longitude = 0 alert '位置情報が取得できませんでした' else latitude = e.coords.latitude longitude = e.coords.longitude

userPos = Titanium.Map.createAnnotation latitude:latitude longitude:longitude title:"現在地" animate:true

map.removeAllAnnotations() map.addAnnotation userPos map.selectAnnotation userPos map.show() map.setLocation latitude:latitude longitude:longitude latitudeDelta:0.01 longitudeDelta:0.01

とにかく書いてて気持ちぃ...

アジェンダ

・Titanium

・Jade


・CoffeeScript

・Titanium CLI

Jadeとは

・HTMLやXMLを生成するスクリプト言語

・Hamlのnode.js版！っでいいのかな？

・とにかくコードが短くなる。

・npm（nodejs）でインストールすると楽

サンプルAlloy Window.container Label#label Hello, World

これが

サンプルAlloy Window.container Label#label Hello, World

こうなる

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

うわっ短いっ

アジェンダ

・Titanium

・Titanium CLI


・CoffeeScript

・jade

疑問

・Titanium StudioじゃなくてSublime使いたい

・コマンドラインでアプリ作っていきたい

・コマンドラインでビルド回したい

疑問

・Titanium StudioじゃなくてSublime使いたい

・コマンドラインでアプリ作っていきたい

・コマンドラインでビルド回したい

全部できます！

Titanium CLI

・TitaniumはTitaniumコマンドを使ってアプリを作っていったり、ビルドだってできます。

・また、Alloyコマンドもあり、MVCのジェネレートなどを行うことができます。

・おまけにTitaniumさんは親切で対話的に実行するコマンドがほとんどです。

良く使うコマンド＃ログインtitanium login

＃プロジェクトの作成titanium create

＃Alloyフレームワークの適用alloy new

＃コントローラー・ビュー・スタイルの追加alloy generate controller コントローラー名

＃モデルの作成alloy generate model モデル名 sql フィールド名:型フィールド名:型 ………

＃シミュレータで実行titanium build -‐p ios

＃実機ビルドtitanium build -‐T device -‐-‐platform iphone

＃リリースビルドtitanium build -‐T dist-‐appstore -‐p ios

最後に

っと以上。 Titanium CLI × Alloy × CoffeeScript × Jadeで作るiPhoneアプリのお話でした。

とにかく簡単・早く・楽しくアプリを作るとこができるので、みなさんも新しいおもちゃにどうですか？

以上、ご視聴ありがとうございました！！

Thank You!!!!!!

Technology

Titanium CLI × Alloy × CoffeeScript × Jade で作るiPhoneアプリのお話