titanium cli × alloy × coffeescript × jade で作るiphoneアプリのお話
Post on 16-Jun-2015
2.233 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歴は1年になりました。
初めてのスライドは最近の僕のおもちゃ「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();
ラベルを1つ表示して、クリックしたらダイアログ出す!みたいなソースはこんな感じ
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