Titanium CLI × Alloy
×
CoffeeScript × Jade
で作るiPhoneアプリのお話
Keitarou Oonishi
自己紹介
はじめてなもんで..
自己紹介
・Name : Keitarou Oonishi
・Job  : 専門学生 4月から東京でエンジニア
・Blog : http://www.absolute-keitarou.net/blog
・Twitter: @Dollhyn_k...
アジェンダ
・Titanium
・Alloyフレームワーク
・CoffeeScript
・Jade
・Titanium CLI
っと、はじめに
はじめに
今回のスライドでは、インストールの手順とかは、触
れていません。
かといって、Titanium熟練者さんがみても、喜ぶスライ
ドでもないです。
『こんなアプリの作り方あんのか!』って興味を持っ
ていただければ幸いです。
あと、スライド...
アジェンダ
・Titanium
・Alloyフレームワーク
・CoffeeScript
・Jade
・Titanium CLI
Titaniumについて
・javascriptを使って、iOS,Androidのアプリを作れちゃう!!
・Obj-c、Javaなんか知らなくっても作れちゃう。
・jsのコードをObj-cやJavaのコードに変換して動かしているような、
イメー...
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 = "H...
Titaniumのソース
これだけでもObj-c・Javaと比べて簡単そう
Titaniumのソース
でも、後々大変になりますこれ。
Titaniumのソース
何が大変って、UI・レイアウト・処理(イベント)が全部
JSで書けてしまうのでソースコードがカオスになります
var win =Ti.UI.createWindow({
	

 backgroundColor:'whi...
そこで、救世主
『Alloy』
アジェンダ
・Titanium
・Alloyフレームワーク
・CoffeeScript
・Jade
・Titanium CLI
Alloyについて
・Appcelerator公式のTitaniumフレームワーク
・RoRちっくなMVCフレームワーク
・コマンドからのファイル生成とかもできる!
・node.jsが必要!(バージョンによっては....)
フレームワーク構成
・assets/  画像とかぶちこむ
・controllers/ イベント書いたり、いろいろ
・views/   UIを書く
・models/ DB関係
・alloy.js 最初に読み込まれるファイル
・styles/   ...
ビュー
<Alloy>
	

 <TabGroup>
	

 	

	

 	

 <Tab id="tab1" icon="KS_nav_views.png" title="Tab 1">
	

 	

 	

 <Window id="wi...
スタイル
"#label1": {
	

 top:100,
	

 width:Ti.UI.SIZE,
	

 height:Ti.UI.SIZE,
	

 color: "#000"
},
"#label2": {
	

 top:200,...
モデル
exports.definition = {
	

 config: {
	

 	

 "columns": {
	

 	

 	

 "item":"text",
	

 	

 	

 "done":"integer",
	

 	...
コントローラー
function whereFunction(collection) {
	

 return !whereIndex ?
	

 	

 collection.models :
	

 	

 collection.where...
更に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.g...
アジェンダ
・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...
アジェンダ
・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	
 ...
最後に
っと以上。
Titanium CLI × Alloy × CoffeeScript × Jadeで作るiPhoneアプリのお話でした。
とにかく簡単・早く・楽しくアプリを作るとこができる
ので、みなさんも新しいおもちゃにどうですか?
以上、ご視聴ありがとうございました!!
Thank You!!!!!!
Upcoming SlideShare
Loading in...5
×

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

2,301

Published on

Titanium Alloy CoffeeScript Jadeを用いてiphone androidアプリを作ると楽しいよってゆうスライド

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,301
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. Titanium CLI × Alloy × CoffeeScript × Jade で作るiPhoneアプリのお話 Keitarou Oonishi
  2. 2. 自己紹介 はじめてなもんで..
  3. 3. 自己紹介 ・Name : Keitarou Oonishi ・Job  : 専門学生 4月から東京でエンジニア ・Blog : http://www.absolute-keitarou.net/blog ・Twitter: @Dollhyn_kei ・Skill : 主にRuby・Titanium・PHP・Wordpress       Ti歴は1年になりました。 初めてのスライドは最近の僕のおもちゃ「Titanium」について語ります。
  4. 4. アジェンダ ・Titanium ・Alloyフレームワーク ・CoffeeScript ・Jade ・Titanium CLI
  5. 5. っと、はじめに
  6. 6. はじめに 今回のスライドでは、インストールの手順とかは、触 れていません。 かといって、Titanium熟練者さんがみても、喜ぶスライ ドでもないです。 『こんなアプリの作り方あんのか!』って興味を持っ ていただければ幸いです。 あと、スライドはじめてだから期待しない!
  7. 7. アジェンダ ・Titanium ・Alloyフレームワーク ・CoffeeScript ・Jade ・Titanium CLI
  8. 8. Titaniumについて ・javascriptを使って、iOS,Androidのアプリを作れちゃう!! ・Obj-c、Javaなんか知らなくっても作れちゃう。 ・jsのコードをObj-cやJavaのコードに変換して動かしているような、 イメージ(あくまで、イメージ) ・Obj-CやJavaでTitaniumモジュールをつくることができるので、可能 性は無限大でしょう∞ ・基本的には『Titanium Studio』をインストールしたら開発できる
  9. 9. Titanium製のアプリ紹介 サイボウズ Live for iPhone 最近よく使ってます。
  10. 10. Titanium製のアプリ紹介 サイボウズ Live for iPhone 最近よく使ってます。 家計簿アプリの Zaim
  11. 11. Titanium製のアプリ紹介 サイボウズ Live for iPhone 最近よく使ってます。 家計簿アプリの Zaim 他にも調べたらたくさん!!
  12. 12. Titaniumのソース var win =Ti.UI.createWindow({ backgroundColor:'white' }); var label =Ti.UI.createLabel(); label.text = "HelloTitanium"; label.addEventListener("click", function(e){ alerts("Click"); }); win.add(label); win.open(); ラベルを1つ表示して、 クリックしたらダイアログ出す! みたいなソースはこんな感じ
  13. 13. Titaniumのソース これだけでもObj-c・Javaと比べて簡単そう
  14. 14. Titaniumのソース でも、後々大変になりますこれ。
  15. 15. Titaniumのソース 何が大変って、UI・レイアウト・処理(イベント)が全部 JSで書けてしまうのでソースコードがカオスになります var win =Ti.UI.createWindow({ backgroundColor:'white' }); var label =Ti.UI.createLabel(); label.text = "HelloTitanium"; label.addEventListener("click", function(e){ alerts("Click"); }); win.add(label); win.open(); UIとレイアウト UI 処理(イベント)
  16. 16. そこで、救世主 『Alloy』
  17. 17. アジェンダ ・Titanium ・Alloyフレームワーク ・CoffeeScript ・Jade ・Titanium CLI
  18. 18. Alloyについて ・Appcelerator公式のTitaniumフレームワーク ・RoRちっくなMVCフレームワーク ・コマンドからのファイル生成とかもできる! ・node.jsが必要!(バージョンによっては....)
  19. 19. フレームワーク構成 ・assets/  画像とかぶちこむ ・controllers/ イベント書いたり、いろいろ ・views/   UIを書く ・models/ DB関係 ・alloy.js 最初に読み込まれるファイル ・styles/   UIのレイアウトを書く
  20. 20. ビュー <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でゴリゴリ書いていく
  21. 21. スタイル "#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とか使ってる方も
  22. 22. モデル 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で雛形もつくれる
  23. 23. コントローラー 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" window function addToDoItem() { Alloy.createController("add").getView().open(); } // Show task list based on selected status type function 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でごりごり
  24. 24. 更にTitaniumを楽しむ
  25. 25. 更にTitaniumを楽しむ ・生のjsは書きたくない。短くしたいもん
  26. 26. 更にTitaniumを楽しむ ・生のjsは書きたくない。短くしたいもん ・XMLも書きたくない。
  27. 27. 更にTitaniumを楽しむ ・生のjsは書きたくない。短くしたいもん ・XMLも書きたくない。 ・コマンドラインで作っていきたい!
  28. 28. 更にTitaniumを楽しむ ・生のjsは書きたくない。短くしたいもん ・XMLも書きたくない。 ・コマンドラインで作っていきたい! ・好きなエディタ使いたいよ∼
  29. 29. アジェンダ ・Titanium ・CoffeeScript ・Alloyフレームワーク ・Jade ・Titanium CLI
  30. 30. CoffeeScriptとは ・javascriptのソースコードを生成するためのスク リプト言語 ・見た目はPythonっぽくなる ・とにかくコードが短くなる。 ・npm(nodejs)とかでインストールすると楽
  31. 31. 構文的特徴 ・functionのキーワードが -> に置き換えられる ・{}の代わりにインデントを使って構造を定義 ・クロージャが書きやすい ・() も場合によっては省略できる
  32. 32. サンプル # 位置情報の更新&ピンの表示 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 とにかく書いてて気持ちぃ...
  33. 33. アジェンダ ・Titanium ・Jade ・Alloyフレームワーク ・CoffeeScript ・Titanium CLI
  34. 34. Jadeとは ・HTMLやXMLを生成するスクリプト言語 ・Hamlのnode.js版!っでいいのかな? ・とにかくコードが短くなる。 ・npm(nodejs)でインストールすると楽
  35. 35. サンプル Alloy Window.container Label#label Hello,World これが
  36. 36. サンプル Alloy Window.container Label#label Hello,World こうなる <Alloy> <Window class="container"> <Label id="label">Hello,World</Label> </Window> </Alloy> うわっ短いっ
  37. 37. アジェンダ ・Titanium ・Titanium CLI ・Alloyフレームワーク ・CoffeeScript ・jade
  38. 38. 疑問 ・Titanium StudioじゃなくてSublime使いたい ・コマンドラインでアプリ作っていきたい ・コマンドラインでビルド回したい
  39. 39. 疑問 ・Titanium StudioじゃなくてSublime使いたい ・コマンドラインでアプリ作っていきたい ・コマンドラインでビルド回したい 全部できます!
  40. 40. Titanium CLI ・TitaniumはTitaniumコマンドを使ってアプリを作って いったり、ビルドだってできます。 ・また、Alloyコマンドもあり、MVCのジェネレートな どを行うことができます。 ・おまけにTitaniumさんは親切で対話的に実行するコ マンドがほとんどです。
  41. 41. 良く使うコマンド #ログイン 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
  42. 42. 最後に っと以上。 Titanium CLI × Alloy × CoffeeScript × Jadeで作るiPhoneアプリのお話でした。 とにかく簡単・早く・楽しくアプリを作るとこができる ので、みなさんも新しいおもちゃにどうですか?
  43. 43. 以上、ご視聴ありがとうございました!! Thank You!!!!!!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×