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

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

• 1.
  JSとの健全な付き合い方 @kassy_kz Firefox OS アプリ開発 2013年6月19日水曜日
• 2.
  2013年6月19日水曜日
• 3.
  2013年6月19日水曜日
• 4.
  その日、開発者たちは思い出した 鳥かご（Andr⃝id）の中に囚われていた屈辱を... ヤツラ（Go⃝gle）に支配されていた恐怖を... 2013年6月19日水曜日
• 5.
  彼らは救世主なのか.... それとも... 武器：オープン技術 2013年6月19日水曜日
• 6.
  進撃のFirefox 2013年6月19日水曜日
• 7.
  ※個人の感想です 2013年6月19日水曜日
• 8.
  自己紹介 •名前 •かっしー （神奈川県） •@kassy_kz •特徴 •健全 2013年6月19日水曜日
• 9.
  Firefox OS アプリ開発にチャレンジ 1.FirefoxOS 開発環境を入れる 2. アプリつくってみる 3. 公開してみる 4. デバッグしてみる 2013年6月19日水曜日
• 10.
  FirefoxOS 開発環境を入れる 2013年6月19日水曜日
• 11.
  • （デスクトップの）Firefoxをインストール http://www.mozilla.jp/firefox/ シミュレーターをインストール 2013年6月19日水曜日
• 12.
  シミュレーターをインストール • FirefoxOSシミュレーターはFirefoxブラウザのアドオン • Firefoxブラウザで以下のURLにアクセス https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/ 2013年6月19日水曜日
• 13.
  Firefox OSシミュレーター起動 2013年6月19日水曜日
• 14.
  Firefox OSシミュレーター起動 2013年6月19日水曜日
• 15.
  Firefox OSシミュレーター起動 2013年6月19日水曜日
• 16.
  カンタンじゃないですか •シミュレーターの起動までにかかる 手間はAndroidよりも数段カンタン 2013年6月19日水曜日
• 17.
  IDEは... • 専用のIDEなどはない模様 • 特に普段使いのツールがない場合は SublimeText 2 オススメ http://www.sublimetext.com/ 2013年6月19日水曜日
• 18.
  次はアプリ開発を... 2013年6月19日水曜日
• 19.
  アプリ開発... •Firefoxサイトにquick start なるものが... 2013年6月19日水曜日
• 20.
  どれどれ.... 2013年6月19日水曜日
• 21.
  どれどれ.... 2013年6月19日水曜日
• 22.
  どれどれ.... 2013年6月19日水曜日
• 23.
  どれどれ.... 2013年6月19日水曜日
• 24.
  どれどれ.... 2013年6月19日水曜日
• 25.
  普通に考えればカンタンにわかる... こんなでけぇプロジェクト、扱えねえってことくらい.... 2013年6月19日水曜日
• 26.
  絶望が俺のゴールだ 2013年6月19日水曜日
• 27.
  ちょーーカンタンなHello World プロジェクト •本当に最低限のアプリ構成 • HTML、JS、CSS 各一つ... • もしご入用の方いらっしゃれば以下からどぞ... https://github.com/kassy-kz/FirefoxOS_Template 2013年6月19日水曜日
• 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.
  ちょーーカンタンな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.
  エミュレーターへのアプリインストール manifest.webapp を選択 起動！！Add Directoryおす Firefox simulatorDashboard 2013年6月19日水曜日
• 31.
  実機へのアプリインストール Push おす ※実機とPCをUSBで接続して Yeah 2013年6月19日水曜日
• 32.
  もっと高度なTemplateは以下を参考に.... • https://github.com/mozilla/mortar • https://marketplace.firefox.com/developers/docs/quick_start （参考）Templateアプリの画面 mortar-app-stubmortar-list-detail mortar-tab-view mortar-game-stub 2013年6月19日水曜日
• 33.
  アプリ公開してみる 2013年6月19日水曜日
• 34.
  アプリ公開してみる • 公開方法 • 自前サーバーで公開（普通のWebと同じ） •インストール＆ダウンロードさせることも可能 • Firefox Marketplaceで公開 • Host型（自前サーバーで提供） • Package型（アプリをzipにかためてmozillaに送る） 2013年6月19日水曜日
• 35.
  アプリ公開してみる • 公開方法 • 自前サーバーで公開（普通のWebと同じ） •インストール＆ダウンロードさせることも可能 • Firefox Marketplaceで公開 • Host型（自前サーバーで提供） • Package型（アプリをzipにかためてmozillaに送る） 2013年6月19日水曜日
• 36.
  アプリ公開してみる https://marketplace.firefox.com/developers/submit/ zipで固めて... MarketPlaceでアップロード 審査へ ※Firefox marketplaceでpackage公開の場合 2013年6月19日水曜日
• 37.
  JSとの健全なおつきあいを... JavaScriptのデバッグ 2013年6月19日水曜日
• 38.
  Firefox OSシミュレーターで JavaScriptのデバッグ 2013年6月19日水曜日
• 39.
  Firefox OSシミュレーターで JavaScriptのデバッグ 2013年6月19日水曜日
• 40.
  Firefox OSシミュレーターで JavaScriptのデバッグ デバッガ 2013年6月19日水曜日
• 41.
  Firefox OSシミュレーターで JavaScriptのデバッグ ブレークポイント ステップ実行 2013年6月19日水曜日
• 42.
  このデバッガ... 2013年6月19日水曜日
• 43.
  このデバッガ... 5 10 15 20 （行番号の高さが... ） 2013年6月19日水曜日
• 44.
  残念だ.... 2013年6月19日水曜日
• 45.
  実機でのデバッグは.... 2013年6月19日水曜日
• 46.
  実機でのデバッグは.... https://t.co/kDc19wCpQf 2013年6月19日水曜日
• 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.
  あれ... （真っ白 . .. ） 2013年6月19日水曜日
• 49.
  2013年6月19日水曜日
• 50.
  2013年6月19日水曜日
• 51.
  実機デバッグできなくなった だと. . . 2013年6月19日水曜日
• 52.
  まとめ 2013年6月19日水曜日
• 53.
  今回の発表は！！ 開発者の皆様の糧になったのですよね！！？ 2013年6月19日水曜日
• 54.
  実は... こんな素晴らしい書籍が... Firefox OSアプリ開発ガイド http://amzn.to/155TXez 神書籍すぎる... 2013年6月19日水曜日
• 55.
  何の成果も！！ 得られませんでしたァァァ！！！ 2013年6月19日水曜日
• 56.
  申し訳ありませんでした 発表は以上です ご静聴ありがとうございました 2013年6月19日水曜日