titanium cli × alloy × coffeescript × jade で作るiphoneアプリのお話
Post on 16-Jun-2015
2.231 Views
Preview:
DESCRIPTION
TRANSCRIPT
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」について語ります。
アジェンダ
・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
最近よく使ってます。
Titanium製のアプリ紹介
サイボウズ Live for iPhone
最近よく使ってます。
家計簿アプリの Zaim
Titanium製のアプリ紹介
サイボウズ Live for iPhone
最近よく使ってます。
家計簿アプリの 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と比べて簡単そう
Titaniumのソース
でも、後々大変になりますこれ。
Titaniumのソース
何が大変って、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を楽しむ
更にTitaniumを楽しむ
・生のjsは書きたくない。短くしたいもん
更にTitaniumを楽しむ
・生のjsは書きたくない。短くしたいもん
・XMLも書きたくない。
更にTitaniumを楽しむ
・生のjsは書きたくない。短くしたいもん
・XMLも書きたくない。
・コマンドラインで作っていきたい！
更に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
・Alloyフレームワーク
・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
・Alloyフレームワーク
・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!!!!!!
top related