eting Vol.5 LT          ers.meTi.Devlop    5分程度で分かる?    Appcの方のAlloy           @donayama (KITAO Masato)              Titan...
自己紹介• 緑Ti本の人です。• Ti歴2.5年の実戦レスの 永遠の初心者デス• Titanium Newsも 宜しくお願いします
さて、タイトルはああ書きましたが…
あのAlloyが5ふんたらずでせつめいできるわけがない
あろいとは?• Alloy【名】合金• qnypさんのとは違い、 Appceleratorが作って いる公式のMVCモデルに 則したフレームワーク
公式 フレームワーク• Appcelerator 公式Wikiの  Mobile Best Practices では ガイドライン化を避けていたのに、 遂に満を持して?公開したもの• 内部のコードネームは ZipTi という名前• 上記のWik...
どんなシロモノ?• 恐ろしいほどにRuby on Rails指向のアプ リケーション構成 • コマンドラインでの処理のモロモロ • ディレクトリ構成• ただし、ワタクシRoR触っていたのかなり前 なので…。あとはRubyの方に託します :-P
ちなみに• Alloy is unstable now.• OS X only now• むっちゃコミットされまくり。 • なので、ご紹介する内容もいつまで有効な  のかさっぱり分かりません(^^; • 試す場合は人柱として挑みましょう!
Alloyの目的(Goal)•見慣れた事があるものばかり(^^; •生産性の向上 •保守性の向上 •ベストプラクティスの確立
能書きはこれぐらいにして
インストールしてみる• 要 node.js • nodeを公式サイトからDLしてdmgから   放り込めばok• ターミナルでnpmからインストール $ sudo npm install alloy -g • ちなみにワタクシの環境ではパスで怒...
Hello World Project• アプリケーションプロジェクトをAlloy化す ることでAlloy開発可能になる• プロジェクト自体はTitanium Studioや titanium.py, MakeTi, Titanium(CLI)...
alloy化の方法• 作成したプロジェクトのディレクトリルート をカレントにして以下のコマンドを実行 $ alloy new .• alloyに必要なappやpluginsなどのフォル ダが展開される
ディレクトリ構成• app配下がalloyの支配下  • views - 画面定義をviewName.xmlで定義  • controllers - 画面処理・ロジックをviewName.jsで定義  • styles - 見た目の操作をvie...
開発方法• 君はTiStudioを使用してもいいし、またコ ンソールを利用してもいい • TiStudioではplugins/ti.alloy経由での  実行 • CLIでは次のようにすればおk  • $ alloy compile  // 毎...
実行してみる
views/index.xml• UIレイアウトを行う<Window class="container">  <Label id="t">Hello, World</Label></Window>• XMLの要素がUI部品に対応 • Windo...
views/index.xml• ちなみにMapViewはTi.UIじゃないと思われ た方はなかなかスルドイ!• <View ns= Ti.Map />とするらしいよ… • 正直ヒドいと思います、これ。
余談• みんな大好きXML!! • なんてことないよね…書くのメンドクサイ • TiStudioにGUIデザイナが搭載されるため  だろうと思ってあきらめるしかないねorz
views/index.xml• ボタンを追加する<Window class="container">  <Label id="t">Hello, World</Label>  <Button id="b">あろーい</Button></Win...
実行してみる…あれ?
styles/index.json• UIレイアウト補助を行う    (トールさんに否定されたJSSっぽいんよ){�   ".container": {�   �   "backgroundColor":"white"�   },�   "La...
styles/index.json{�   ".container": {�   �    "backgroundColor":"white"�   },�   "Label": {�   �    "width": Ti.UI.SIZE,� ...
よーしよしよし
controllers/index.js• 画面制御やらロジックを記述する$.t.on(click,function(e) {�   alert($.t.text);});$.index.open();• $=alloyのラッピングobjのエイ...
controllers/index.js• 次のようにすればボタンを押してalert表示$.t.on(click,function(e) {�   alert($.t.text);});$.b.on(click,function(e){  al...
これらの追加• 基本的にview名をベースに対応づけるのが標   準らしい。$ alloy generate view tweets$ alloy generate style tweets -- 失敗する(^^;$ alloy generat...
これらの追加• ViewとControllerはまとめて作れる$ alloy generate vc hogeAlloy by Appcelerator. The MVC app framework for Titanium.2012-07-0...
models...• ビルドでコケテて調査できてませんorz
詳しくは...• GitHub見てくだちい...•   https://github.com/appcelerator/alloy/• そのうちTitanium Newsか、はてなダイア リーのほうで記事をまとめます...•   http://...
code strong,
Upcoming SlideShare
Loading in...5
×

5分程度で分かる? Appceleratorの方のAlloy

5,864
-1

Published on

Ti.Developers.meeting vol.5のLTで発表したスライドです。全然5分に収まらない内容で超駆け足になりまして申し訳ありませんでした。

たとえ発表できていても内容がコレなので、何らかの形でフォローアップしたいと思います。

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

No Downloads
Views
Total Views
5,864
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide
  • \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
  • 5分程度で分かる? Appceleratorの方のAlloy

    1. 1. eting Vol.5 LT ers.meTi.Devlop 5分程度で分かる? Appcの方のAlloy @donayama (KITAO Masato) Titan, TCAD, TCMD
    2. 2. 自己紹介• 緑Ti本の人です。• Ti歴2.5年の実戦レスの 永遠の初心者デス• Titanium Newsも 宜しくお願いします
    3. 3. さて、タイトルはああ書きましたが…
    4. 4. あのAlloyが5ふんたらずでせつめいできるわけがない
    5. 5. あろいとは?• Alloy【名】合金• qnypさんのとは違い、 Appceleratorが作って いる公式のMVCモデルに 則したフレームワーク
    6. 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. 7. どんなシロモノ?• 恐ろしいほどにRuby on Rails指向のアプ リケーション構成 • コマンドラインでの処理のモロモロ • ディレクトリ構成• ただし、ワタクシRoR触っていたのかなり前 なので…。あとはRubyの方に託します :-P
    8. 8. ちなみに• Alloy is unstable now.• OS X only now• むっちゃコミットされまくり。 • なので、ご紹介する内容もいつまで有効な のかさっぱり分かりません(^^; • 試す場合は人柱として挑みましょう!
    9. 9. Alloyの目的(Goal)•見慣れた事があるものばかり(^^; •生産性の向上 •保守性の向上 •ベストプラクティスの確立
    10. 10. 能書きはこれぐらいにして
    11. 11. インストールしてみる• 要 node.js • nodeを公式サイトからDLしてdmgから 放り込めばok• ターミナルでnpmからインストール $ sudo npm install alloy -g • ちなみにワタクシの環境ではパスで怒られ たので以下のシンボリックリンクを貼った $ ln -s /usr/bin/alloy /usr/local/bin/alloy
    12. 12. Hello World Project• アプリケーションプロジェクトをAlloy化す ることでAlloy開発可能になる• プロジェクト自体はTitanium Studioや titanium.py, MakeTi, Titanium(CLI) で作れば良いよ!
    13. 13. alloy化の方法• 作成したプロジェクトのディレクトリルート をカレントにして以下のコマンドを実行 $ alloy new .• alloyに必要なappやpluginsなどのフォル ダが展開される
    14. 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. 15. 開発方法• 君はTiStudioを使用してもいいし、またコ ンソールを利用してもいい • TiStudioではplugins/ti.alloy経由での 実行 • CLIでは次のようにすればおk • $ alloy compile // 毎回しなくても良さそう • $ alloy run . iphone
    16. 16. 実行してみる
    17. 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. 18. views/index.xml• ちなみにMapViewはTi.UIじゃないと思われ た方はなかなかスルドイ!• <View ns= Ti.Map />とするらしいよ… • 正直ヒドいと思います、これ。
    19. 19. 余談• みんな大好きXML!! • なんてことないよね…書くのメンドクサイ • TiStudioにGUIデザイナが搭載されるため だろうと思ってあきらめるしかないねorz
    20. 20. views/index.xml• ボタンを追加する<Window class="container"> <Label id="t">Hello, World</Label> <Button id="b">あろーい</Button></Window>
    21. 21. 実行してみる…あれ?
    22. 22. styles/index.json• UIレイアウト補助を行う (トールさんに否定されたJSSっぽいんよ){� ".container": {� � "backgroundColor":"white"� },� "Label": {� � "width": Ti.UI.SIZE,� � "height": Ti.UI.SIZE,� � "color": "#000"� }}• さっきの現象はButtonの位置指定をしていな かったため!
    23. 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. 24. よーしよしよし
    25. 25. controllers/index.js• 画面制御やらロジックを記述する$.t.on(click,function(e) {� alert($.t.text);});$.index.open();• $=alloyのラッピングobjのエイリアス• $.tでid= t のオブジェクトを掴んで、 on( event名 , callback関数)メソッドで addEventListenerが出来る
    26. 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. 27. これらの追加• 基本的にview名をベースに対応づけるのが標 準らしい。$ alloy generate view tweets$ alloy generate style tweets -- 失敗する(^^;$ alloy generate controller tweets
    28. 28. これらの追加• ViewとControllerはまとめて作れる$ alloy generate vc hogeAlloy by Appcelerator. The MVC app framework for Titanium.2012-07-07 09:27:44 -- [INFO ] Generated view and styles named hoge2012-07-07 09:27:44 -- [INFO ] Generated controller named hoge2012-07-07 09:27:44 -- [INFO ] Generated view-controller named hoge
    29. 29. models...• ビルドでコケテて調査できてませんorz
    30. 30. 詳しくは...• GitHub見てくだちい...• https://github.com/appcelerator/alloy/• そのうちTitanium Newsか、はてなダイア リーのほうで記事をまとめます...• http://ti-news.hatenablog.jp/• http://d.hatena.ne.jp/donayama/• 気長にお待ちください(^^;
    31. 31. code strong,
    1. A particular slide catching your eye?

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

    ×