５分程度で分かる? Appceleratorの方のAlloy
•Als KEY, PDF herunterladen•
11 gefällt mir•3,912 views
Ti.Developers.meeting vol.5のLTで発表したスライドです。全然５分に収まらない内容で超駆け足になりまして申し訳ありませんでした。 たとえ発表できていても内容がコレなので、何らかの形でフォローアップしたいと思います。
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (16)
Ähnlich wie ５分程度で分かる? Appceleratorの方のAlloy
Ähnlich wie ５分程度で分かる? Appceleratorの方のAlloy (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (10)
５分程度で分かる? Appceleratorの方のAlloy
- 1. eting Vol.5 LT ers.me Ti.Devlop ５分程度で分かる? Appcの方のAlloy @donayama (KITAO Masato) Titan, TCAD, TCMD
- 2. 自己紹介 • 緑Ti本の人です。 • Ti歴2.5年の実戦レスの 永遠の初心者デス • Titanium Newsも 宜しくお願いします
- 5. あろいとは？ • Alloy【名】合金 • qnypさんのとは違い、 Appceleratorが作って いる公式のMVCモデルに 則したフレームワーク
- 6. 公式 フレームワーク • Appcelerator 公式Wikiの Mobile Best Practices では ガイドライン化を避けていたのに、 遂に満を持して？公開したもの • 内部のコードネームは ZipTi という名前 • 上記のWikiについては下記アドレス参照 • https://wiki.appcelerator.org/display/guides/Mobile+Best+Practices • http://d.hatena.ne.jp/donayama/20120102/bestpractices
- 7. どんなシロモノ？ • 恐ろしいほどにRuby on Rails指向のアプ リケーション構成 • コマンドラインでの処理のモロモロ • ディレクトリ構成 • ただし、ワタクシRoR触っていたのかなり前 なので…。あとはRubyの方に託します :-P
- 8. ちなみに • Alloy is unstable now. • OS X only now • むっちゃコミットされまくり。 • なので、ご紹介する内容もいつまで有効な のかさっぱり分かりません(^^; • 試す場合は人柱として挑みましょう！
- 9. Alloyの目的(Goal) •見慣れた事があるものばかり(^^; •生産性の向上 •保守性の向上 •ベストプラクティスの確立
- 10. 能書きはこれぐらいにして
- 11. インストールしてみる • 要 node.js • nodeを公式サイトからDLしてdmgから 放り込めばok • ターミナルでnpmからインストール $ sudo npm install alloy -g • ちなみにワタクシの環境ではパスで怒られ たので以下のシンボリックリンクを貼った $ ln -s /usr/bin/alloy /usr/local/bin/alloy
- 12. Hello World Project • アプリケーションプロジェクトをAlloy化す ることでAlloy開発可能になる • プロジェクト自体はTitanium Studioや titanium.py, MakeTi, Titanium(CLI) で作れば良いよ！
- 13. alloy化の方法 • 作成したプロジェクトのディレクトリルート をカレントにして以下のコマンドを実行 $ alloy new . • alloyに必要なappやpluginsなどのフォル ダが展開される
- 14. ディレクトリ構成 • app配下がalloyの支配下 • views - 画面定義をviewName.xmlで定義 • controllers - 画面処理・ロジックをviewName.jsで定義 • styles - 見た目の操作をviewName.jsonで定義 • models - モデル定義のJSONファイルが入る • assets - 画像などのリソースファイルを設置 • migrations - DBのmigration設定を配置 • lib - アプリ特化のライブラリ・モジュールを配置 • vendor - 他者提供などのモジュールを設置 • config - アプリ特化の設定をJSONで指定 • pluginsにti.alloyが入り、TiStudioではビルド前処理が走る • ちなみにResourcesはノータッチ
- 15. 開発方法 • 君はTiStudioを使用してもいいし、またコ ンソールを利用してもいい • TiStudioではplugins/ti.alloy経由での 実行 • CLIでは次のようにすればおk • $ alloy compile // 毎回しなくても良さそう • $ alloy run . iphone
- 16. 実行してみる
- 17. views/index.xml • UIレイアウトを行う <Window class="container"> <Label id="t">Hello, World</Label> </Window> • XMLの要素がUI部品に対応 • Window = Ti.UI.Window • Label = Ti.UI.Label • 属性が初期化プロパティ(コンストラクタ引数)
- 18. views/index.xml • ちなみにMapViewはTi.UIじゃないと思われ た方はなかなかスルドイ！ • <View ns= Ti.Map />とするらしいよ… • 正直ヒドいと思います、これ。
- 19. 余談 • みんな大好きXML!! • なんてことないよね…書くのメンドクサイ • TiStudioにGUIデザイナが搭載されるため だろうと思ってあきらめるしかないねorz
- 20. views/index.xml • ボタンを追加する <Window class="container"> <Label id="t">Hello, World</Label> <Button id="b">あろーい</Button> </Window>
- 21. 実行してみる…あれ？
- 22. styles/index.json • UIレイアウト補助を行う (トールさんに否定されたJSSっぽいんよ) { � ".container": { � � "backgroundColor":"white" � }, � "Label": { � � "width": Ti.UI.SIZE, � � "height": Ti.UI.SIZE, � � "color": "#000" � } } • さっきの現象はButtonの位置指定をしていな かったため！
- 23. styles/index.json { � ".container": { � � "backgroundColor":"white" � }, � "Label": { � � "width": Ti.UI.SIZE, � � "height": Ti.UI.SIZE, � � "color": "#000" � }, � "#b":{ � "bottom": 100, � "width": Ti.UI.FILL � } }
- 24. よーしよしよし
- 25. controllers/index.js • 画面制御やらロジックを記述する $.t.on('click',function(e) { � alert($.t.text); }); $.index.open(); • $=alloyのラッピングobjのエイリアス • $.tでid= t のオブジェクトを掴んで、 on( event名 , callback関数)メソッドで addEventListenerが出来る
- 26. controllers/index.js • 次のようにすればボタンを押してalert表示 $.t.on('click',function(e) { � alert($.t.text); }); $.b.on('click',function(e){ alert($.b.title); }); $.index.open(); • ちなみに$.∼は奥深そうなのですが、 正直あんまり調べれてません orz
- 27. これらの追加 • 基本的にview名をベースに対応づけるのが標 準らしい。 $ alloy generate view tweets $ alloy generate style tweets -- 失敗する(^^; $ alloy generate controller tweets
- 28. これらの追加 • ViewとControllerはまとめて作れる $ alloy generate vc hoge Alloy by Appcelerator. The MVC app framework for Titanium. 2012-07-07 09:27:44 -- [INFO ] Generated view and styles named hoge 2012-07-07 09:27:44 -- [INFO ] Generated controller named hoge 2012-07-07 09:27:44 -- [INFO ] Generated view-controller named hoge
- 30. 詳しくは... • GitHub見てくだちい... • https://github.com/appcelerator/alloy/ • そのうちTitanium Newsか、はてなダイア リーのほうで記事をまとめます... • http://ti-news.hatenablog.jp/ • http://d.hatena.ne.jp/donayama/ • 気長にお待ちください(^^;
- 31. code strong,
Hinweis der Redaktion
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n