Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

FirefoxOSアプリ開発 JSとの健全な付き合い方

12,353 views

Published on

2013/06/19 関東FirefoxOS勉強会1stでの発表に用いたスライドです

Published in: Technology

FirefoxOSアプリ開発 JSとの健全な付き合い方

  1. 1. JSとの健全な付き合い方@kassy_kzFirefox OS アプリ開発2013年6月19日水曜日
  2. 2. 2013年6月19日水曜日
  3. 3. 2013年6月19日水曜日
  4. 4. その日、開発者たちは思い出した鳥かご(Andr⃝id)の中に囚われていた屈辱を...ヤツラ(Go⃝gle)に支配されていた恐怖を...2013年6月19日水曜日
  5. 5. 彼らは救世主なのか....それとも...武器:オープン技術2013年6月19日水曜日
  6. 6. 進撃のFirefox2013年6月19日水曜日
  7. 7. ※個人の感想です2013年6月19日水曜日
  8. 8. 自己紹介•名前•かっしー (神奈川県)•@kassy_kz•特徴•健全2013年6月19日水曜日
  9. 9. Firefox OS アプリ開発にチャレンジ1. FirefoxOS 開発環境を入れる2. アプリつくってみる3. 公開してみる4. デバッグしてみる2013年6月19日水曜日
  10. 10. FirefoxOS 開発環境を入れる2013年6月19日水曜日
  11. 11. • (デスクトップの)Firefoxをインストールhttp://www.mozilla.jp/firefox/シミュレーターをインストール2013年6月19日水曜日
  12. 12. シミュレーターをインストール• FirefoxOSシミュレーターはFirefoxブラウザのアドオン• Firefoxブラウザで以下のURLにアクセスhttps://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/2013年6月19日水曜日
  13. 13. Firefox OSシミュレーター起動2013年6月19日水曜日
  14. 14. Firefox OSシミュレーター起動2013年6月19日水曜日
  15. 15. Firefox OSシミュレーター起動2013年6月19日水曜日
  16. 16. カンタンじゃないですか•シミュレーターの起動までにかかる手間はAndroidよりも数段カンタン2013年6月19日水曜日
  17. 17. IDEは...• 専用のIDEなどはない模様• 特に普段使いのツールがない場合はSublime Text 2 オススメhttp://www.sublimetext.com/2013年6月19日水曜日
  18. 18. 次はアプリ開発を...2013年6月19日水曜日
  19. 19. アプリ開発...•Firefoxサイトにquick start なるものが...2013年6月19日水曜日
  20. 20. どれどれ....2013年6月19日水曜日
  21. 21. どれどれ....2013年6月19日水曜日
  22. 22. どれどれ....2013年6月19日水曜日
  23. 23. どれどれ....2013年6月19日水曜日
  24. 24. どれどれ....2013年6月19日水曜日
  25. 25. 普通に考えればカンタンにわかる...こんなでけぇプロジェクト、扱えねえってことくらい....2013年6月19日水曜日
  26. 26. 絶望が俺のゴールだ2013年6月19日水曜日
  27. 27. ちょーーカンタンなHello World プロジェクト• 本当に最低限のアプリ構成• HTML、JS、CSS 各一つ...• もしご入用の方いらっしゃれば以下からどぞ...https://github.com/kassy-kz/FirefoxOS_Template2013年6月19日水曜日
  28. 28. ちょーーカンタンなHello World プロジェクト• manifest.webapp• FirefoxOSのアプリに必要なマニフェストファイル{"version": "0.1","name": "Template","description": "My Template","launch_path": "/index.html","icons": {"16": "/img/icons/icon_16.png","48": "/img/icons/icon_48.png","128": "/img/icons/icon_128.png"},"developer": {"name": "you","url": "http://example.com"},"installs_allowed_from": ["*"],"default_locale": "en"}2013年6月19日水曜日
  29. 29. ちょーーカンタンなHello World プロジェクト• app.js// Activity#onCreateに相当window.onload = function() { // Button#findViewByIdに相当" var btn1 = document.getElementById(btn1); // Button#setOnClickListnerに相当" btn1.onclick = function() { // TextView#setTextに相当" document.getElementById(div1).innerHTML = Hello World;" }}2013年6月19日水曜日
  30. 30. エミュレーターへのアプリインストールmanifest.webappを選択起動!!Add DirectoryおすFirefox simulator Dashboard2013年6月19日水曜日
  31. 31. 実機へのアプリインストールPush おす※実機とPCをUSBで接続してYeah2013年6月19日水曜日
  32. 32. もっと高度なTemplateは以下を参考に....• https://github.com/mozilla/mortar• https://marketplace.firefox.com/developers/docs/quick_start(参考)Templateアプリの画面mortar-app-stub mortar-list-detail mortar-tab-view mortar-game-stub2013年6月19日水曜日
  33. 33. アプリ公開してみる2013年6月19日水曜日
  34. 34. アプリ公開してみる• 公開方法• 自前サーバーで公開(普通のWebと同じ)• インストール&ダウンロードさせることも可能• Firefox Marketplaceで公開• Host型(自前サーバーで提供)• Package型(アプリをzipにかためてmozillaに送る)2013年6月19日水曜日
  35. 35. アプリ公開してみる• 公開方法• 自前サーバーで公開(普通のWebと同じ)• インストール&ダウンロードさせることも可能• Firefox Marketplaceで公開• Host型(自前サーバーで提供)• Package型(アプリをzipにかためてmozillaに送る)2013年6月19日水曜日
  36. 36. アプリ公開してみるhttps://marketplace.firefox.com/developers/submit/zipで固めて... MarketPlaceでアップロード 審査へ※ Firefox marketplaceでpackage公開の場合2013年6月19日水曜日
  37. 37. JSとの健全なおつきあいを...JavaScriptのデバッグ2013年6月19日水曜日
  38. 38. Firefox OSシミュレーターでJavaScriptのデバッグ2013年6月19日水曜日
  39. 39. Firefox OSシミュレーターでJavaScriptのデバッグ2013年6月19日水曜日
  40. 40. Firefox OSシミュレーターでJavaScriptのデバッグデバッガ2013年6月19日水曜日
  41. 41. Firefox OSシミュレーターでJavaScriptのデバッグブレークポイントステップ実行2013年6月19日水曜日
  42. 42. このデバッガ...2013年6月19日水曜日
  43. 43. このデバッガ...5101520(行番号の高さが... )2013年6月19日水曜日
  44. 44. 残念だ....2013年6月19日水曜日
  45. 45. 実機でのデバッグは....2013年6月19日水曜日
  46. 46. 実機でのデバッグは....https://t.co/kDc19wCpQf2013年6月19日水曜日
  47. 47. 実機でのデバッグは....• 実機とPCをUSBで接続• 実機とadb 接続して/data/b2g/mozilla/ ** ** /prefs.js の末尾に次の一文を追記user_pref("marionette.defaultPrefs.enabled", false);• コマンドラインで以下の命令入力• adb forward tcp:6000 tcp:6000• Firefoxブラウザのリモート接続でlocalhost:6000番に接続• デバッガ起動手順2013年6月19日水曜日
  48. 48. あれ...(真っ白 . . . )2013年6月19日水曜日
  49. 49. 2013年6月19日水曜日
  50. 50. 2013年6月19日水曜日
  51. 51. 実機デバッグできなくなっただと. . .2013年6月19日水曜日
  52. 52. まとめ2013年6月19日水曜日
  53. 53. 今回の発表は!!開発者の皆様の糧になったのですよね!!?2013年6月19日水曜日
  54. 54. 実は... こんな素晴らしい書籍が...Firefox OSアプリ開発ガイドhttp://amzn.to/155TXez神書籍すぎる...2013年6月19日水曜日
  55. 55. 何の成果も!!得られませんでしたァァァ!!!2013年6月19日水曜日
  56. 56. 申し訳ありませんでした発表は以上ですご静聴ありがとうございました2013年6月19日水曜日

×