さわってみよう Firefox OS in 福岡

2012/12/06

自己紹介

Twitter: @masap 職業: 組み込みプログラマ（主に Wi-Fi） ハッシュタグ: #FirefoxOSjp

Firefox OS の概要

開発状況

Firefox OS バージョン 1 に向けて開発中● テスター達によるテスト段階。● 新規機能の取り込みはしない。● 2013年初頭にブラジルにて発売予定。

Firefox OSの構造

３層構造

Gaia ユーザーインターフェイス層

Gecko レンダリングエンジン

ハードウェア仮想化層

ユーザ空間

Linux カーネル カーネル空間

Gonk

Gaia

Gaia とは● HTML5 (+ CSS + JavaScript) で書かれた UI。● UI 自体が HTML5 で書かれているのは Firefox OS だ

け。● HTML5 を使っているのでカスタマイズが容易。今日の

テーマは Gaia のカスタマイズ。

Firefox OS を変えてみる

UI は全て Gaia で描かれている 実機にて変えてみる

● 起動画面● 壁紙

エミュレータインストール（Mac 編）

r2d2b2g のインストール

USBメモリ内のファイルを使用 r2d2b2g-mac.xpi ファイルを Firefox にドラッグ&ドロップす

る。 下記メッセージが表示されるので「今すぐインストール」ボタン

を押す。

r2d2b2g起動

Firefoxから起動 ツール → Web開発->Firefox OS Simulator

エミュレータ画面起動

起動 Simulatorと書かれたスイッチをスライドしてRunningに変更。 図のようにロック画面が表示されればOK。

エミュレータインストール（Windows XP 編）

r2d2b2g のインストール

USBメモリ内のファイルを使用 r2d2b2g-windows.xpi ファイルを Firefox にドラッグ&ドロップ

する。 下記メッセージが表示されるので「今すぐインストール」ボタン

を押す。

r2d2b2g起動

Firefoxから起動 Firefoxボタン → Web開発->Firefox OS Simulator

エミュレータ画面起動

起動 Simulatorと書かれたスイッチをスライドしてRunningに変更。 図のようにロック画面が表示されればOK。

起動画面のカスタマイズ(Mac/Windows 共通)

フォルダを開く

フォルダの場所を探す FirefoxのURL に about:support と入力。 「アプリケーション基本情報」の「フォルダを開く」ボタンを押

す。 extensions/r2d2b2g@mozilla.org/profile/webapps/system

.gaiamobile.orgを開く。

起動画面のカスタマイズ

ソースコードの書き換え application.zip をコピーして application.zip.bak としてバック

アップ。 application.zip を解凍。 application/index.html をエディタで開く。 #initlogoの中のbackgroundの

bottom, right を center に変更。 applicationフォルダの下をzipで圧縮。 ※フォルダを圧縮しないように注意！ エミュレーターを再起動。 Mozillaの文字が中央に表示されていれば成功。

壁紙の追加

壁紙の追加

ソースコードの書き換え extensions/r2d2b2g@mozilla.org/profile/webapps/wallpap

er.gaiamobile.orgを開く。 application.zipをバックアップする。 application/resources/320x480/に追加したい壁紙ファイル

を置く。

※サイズは320x480。 application/pick.html をエディタで開く。 div id=wallpapers の中に img 要素を追加。

壁紙の確認

壁紙の追加を確認