さわってみよう Firefox OS in 大阪
- 1. さわってみよう Firefox OS in 大阪 2013/1/26
- 2. 自己紹介 Twitter: @masap 職業: 組み込みプログラマ（主に Wi-Fi） ハッシュタグ: #FirefoxOSjp
- 4. 開発状況 Firefox OS バージョン 1 に向けて開発中 ● テスター達によるテスト段階。 ● 2013年初頭にブラジルにて発売予定。 ● KDDI が販売を検討中！
- 5. Firefox OSの構造 ３層構造 Gaia ユーザーインターフェイス層 Gecko レンダリングエンジン ユーザ空間 ハードウェア仮想化層 Gonk Linux カーネル カーネル空間
- 6. Gaia Gaia とは ● HTML5 (+ CSS + JavaScript) で書かれた UI。 ● UI 自体が HTML5 で書かれているのは Firefox OS だ け。 ● HTML5 を使っているのでカスタマイズが容易。今日の テーマは Gaia のカスタマイズ。
- 7. Firefox OS を変えてみる UI は全て Gaia で描かれている 実機にて変えてみる ● 起動画面 ● 壁紙
- 8. エミュレータインストール （Mac 編）
- 9. r2d2b2g のインストール USBメモリ内のファイルを使用 r2d2b2g-mac.xpi ファイルを Firefox にドラッグ&ドロップす る。 下記メッセージが表示されるので「今すぐインストール」ボタン を押す。
- 10. r2d2b2g起動 Firefoxから起動 ツール → Web開発->Firefox OS Simulator
- 11. エミュレータ画面起動 起動 Simulatorと書かれたスイッチをスライドしてRunningに変更。 図のようにロック画面が表示されればOK。
- 12. エミュレータインストール （Windows 7 編）
- 13. r2d2b2g のインストール URL: http://people.mozilla.org/~myk/r2d2b2g/ （70M ぐらいあるので会場の方は USB メモリでまわします) r2d2b2g-windows.xpi ファイルを Firefox にドラッグ&ドロッ プする。 下記メッセージが表示されるので「今すぐインストール」ボタン を押す。
- 14. r2d2b2g起動 Firefoxから起動 Firefoxボタン → Web開発->Firefox OS Simulator
- 15. エミュレータ画面起動 起動 Simulatorと書かれたスイッチをスライドしてRunningに変更。 図のようにロック画面が表示されればOK。
- 17. フォルダを開く フォルダの場所を探す FirefoxのURL に about:support と入力。 「アプリケーション基本情報」の「フォルダを開く」ボタンを押 す。 extensions/r2d2b2g@mozilla.org/profile/webapps/syst em.gaiamobile.orgを開く。
- 18. 起動画面のカスタマイズ ソースコードの書き換え application.zip をコピーして application.zip.bak としてバッ クアップ。application.zip を解凍。 application/index.html をエディタで開く。 #initlogoの中のbackgroundの initlogo.png を firefox-phone-mini.png に bottom, right を center に変更。 application/shared/resources/branding に firefox-phone-mini.png をコピー。 applicationフォルダの下をzipで圧縮。 ※フォルダを圧縮しないように注意！ エミュレーターを再起動して右図が表示されていれば成功。
- 19. 壁紙の追加
- 20. 壁紙の追加 ソースコードの書き換え extensions/r2d2b2g@mozilla.org/profile/webapps/wall paper.gaiamobile.orgを開く。 application.zipをバックアップする。 application/resources/320x480/に追加したい壁紙ファイル を置く。 ※サイズは320x480。 application/pick.html をエディタで開く。 div class=”wallpaper” 要素を追加。
- 21. 壁紙の確認 壁紙の追加を確認
- 23. Web API 一覧 Firefox OS で使用可能な API 近接センサー、電源管理、バイブレーション等 JavaScript から ハードウェアを制御できる。 Firefox OS で使用可能な API 一覧 https://wiki.mozilla.org/WebAPI ※開発中なので動作しない/問題があるものもあり これ使ってみたい等あれば可能な限りサポートします