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

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

2012/12/06

自己紹介

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

開発状況

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

Firefox OSの構造

 ３層構造

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

Gecko レンダリングエンジンユーザ空間

ハードウェア仮想化層

Gonk

Linux カーネルカーネル空間

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

起動画面のカスタマイズ
(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 要素を追加。

壁紙の確認

 壁紙の追加を確認

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

More Related Content

What's hot

Viewers also liked

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

More from Honma Masashi

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