Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rapid Prototyping by TiShadow

Rapid Prototyping by TiShadow

TiShadow で iOS / Android アプリのプロトタイプを爆速で作る方法

astronaughts

April 03, 2013
Tweet

More Decks by astronaughts

Other Decks in Programming

Transcript

  1. Rapid Prototyping by TiShadow Ti.Developers.meeting vol.6 in Osakan Space TiShadow

    で iOS / Android アプリのプロトタイプを爆速で作る方法
  2. れや れやねんおまえ やねんおまえだれやね おまえだれやねんおまえ れやねんおまえだれやねん おまえだれやねんおまえだ やねんおまえだれやねん まえだれやねんお やねんお astronaughts

    Ti.Developers.meeting vol.6 in Osakan Space  Mobile App Engineer / ChatWork Masahiro Ueno
  3. ChatWork 作ってます。 Ti.Developers.meeting vol.6 in Osakan Space 99% Titanium mobile

  4. What’s TiShadow Ti.Developers.meeting vol.6 in Osakan Space TiShadow ってなんやねん?

  5. https://github.com/dbankier/TiShadow Ti.Developers.meeting vol.6 in Osakan Space \ とりあえずここみなはれ / 

  6. Ti.Developers.meeting vol.6 in Osakan Space

  7. Ti.Developers.meeting vol.6 in Osakan Space で、TiShadow ってなにできんの?

  8. Ti.Developers.meeting vol.6 in Osakan Space What you can do with

    TiShadow • Full Application Deployment • Testing / Assertions • TiShadow REPL • Code Snippets Via Webpage • TiShadow Appify • Launch From Web (Currently only working on iOS) ?
  9. Ti.Developers.meeting vol.6 in Osakan Space so amazing. ͱΓ͋͑ͣͳΜ͔͛͢ʔ

  10. んよく よくわかりませ よくわかりませんよくわ りませんよくわかりません よくわかりませんよくわか りませんよくわかりません くわかりませんよくわか ませんよくわか よくわ Ti.Developers.meeting

    vol.6 in Osakan Space
  11. Ti.Developers.meeting vol.6 in Osakan Space Adobe Edge Inspect のようなツール

  12. Ti.Developers.meeting vol.6 in Osakan Space so amazing. Ͱ΋ͱʹ͔͛͘͢ʔ

  13. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速プロトタイピング

  14. Ti.Developers.meeting vol.6 in Osakan Space その前に Node の環境が必要 ! •

    npm も必要 • Titanium CLI や alloy も Node だよ • くわしくはググってね
  15. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速までの道のり1 • TiShadow をインストール

    $ sudo npm install -g tishadow • TiShadow アプリの Ti プロジェクトを生成 $ mkdir ~/tishadowapp && tishadow app -d ~/ tishadowapp • TiShadow ΞϓϦΛΠϯετʔϧ $ ti build -p ios ?
  16. Ti.Developers.meeting vol.6 in Osakan Space \ インストールするとこんな感じ /

  17. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速までの道のり2 • TiShadow サーバーを起動

    $ tishadow server • TiShadow アプリから TiShadow サーバーに接続 ip ΞυϨεʢγϛϡϨʔλͩͱ 127.0.0.1 ͱ͔ʣ • 自分のアプリを TiShadow ΞϓϦʹసૹ $ tishadow run ?
  18. Ti.Developers.meeting vol.6 in Osakan Space で、ここからが 爆速

  19. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速プロトタイピング 自分のアプリを修正したらただͻͨ͢Β $ tishadow

    run {
  20. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速プロトタイピング Demo

  21. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速プロトタイピング ! ご覧のとおり全デバイス上に アプリが一瞬で転送されます

  22. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速自動テスト

  23. Ti.Developers.meeting vol.6 in Osakan Space テストに Jasmine が使える ! •

    BDD テストフレームワーク • くわしくはググってね
  24. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速自動テスト • 自分のアプリに Jasmine

    のテストを書く MYAPP/Resources/spec/xxx_spec.js • テストを TiShadow ΞϓϦͰ࣮ߦ $ tishadow spec ?
  25. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速自動テスト テストケース書いたらただͻͨ͢Β $ tishadow

    spec {
  26. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速自動テスト Demo

  27. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速自動テスト ! ご覧のとおり全デバイス上で 一括テストが可能です

  28. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速、おまけ

  29. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速、おまけ ところで、Grunt.js って御存知ですか? ?

  30. Ti.Developers.meeting vol.6 in Osakan Space \ コレ超便利 /

  31. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速、おまけ ? • 流行りのコマンドラインビルドツール

    • Ti 開発でも Grunt.js を使うといい • Lint 系ツールなどの連携
  32. https://github.com/astronaughts/grunt-tishadow Ti.Developers.meeting vol.6 in Osakan Space \ テキトー過ぎだけど、とりあえずつこてみなはれ / 

    grunt-tishadow 作りました
  33. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速、おまけ ?• grunt-tishadow のインストール

    $ npm install grunt-tishadow • Gruntfile.js にタスクをセット watch, jsHint, tishadow spec • grunt watch にファイル保存毎にタスク実行 $ grunt watch
  34. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速、おまけ {自分のアプリを修正したらただͻͨ͢Β 勝手にタスク実行される

  35. Ti.Developers.meeting vol.6 in Osakan Space TiShadow で爆速、おまけ Demo

  36. Ti.Developers.meeting vol.6 in Osakan Space URL “• tishadow https://github.com/dbankier/TiShadow •

    jasmine http://pivotal.github.com/jasmine/ • grunt http://gruntjs.com/ • grunt-tishadow https://github.com/astronaughts/grunt-tishadow
  37. Ti.Developers.meeting vol.6 in Osakan Space End Rapid Prototyping by TiShadow

    TiShadow で iOS / Android アプリのプロトタイプを爆速で作る方法