FirefoxOSアプリ開発 JSとの健全な付き合い方
•
24 likes•13,009 views
2013/06/19 関東FirefoxOS勉強会1stでの発表に用いたスライドです
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Recently uploaded
Recently uploaded (12)
FirefoxOSアプリ開発 JSとの健全な付き合い方
- 9. Firefox OS アプリ開発にチャレンジ 1. FirefoxOS 開発環境を入れる 2. アプリつくってみる 3. 公開してみる 4. デバッグしてみる 2013年6月19日水曜日
- 17. IDEは... • 専用のIDEなどはない模様 • 特に普段使いのツールがない場合は Sublime Text 2 オススメ http://www.sublimetext.com/ 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 simulator Dashboard 2013年6月19日水曜日
- 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-stub 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日水曜日
- 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日水曜日