さわってみよう Firefox OS in 大阪

23
さわってみよう Firefox OS in 大阪 2013/1/26

Transcript of さわってみよう Firefox OS in 大阪

さわってみよう Firefox OS in 大阪

2013/1/26

自己紹介

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

Firefox OS の概要

開発状況

Firefox OS バージョン 1 に向けて開発中● テスター達によるテスト段階。● 2013年初頭にブラジルにて発売予定。● KDDI が販売を検討中!

Firefox OSの構造

3層構造

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 7 編)

r2d2b2g のインストール

URL: http://people.mozilla.org/~myk/r2d2b2g/ (70M ぐらいあるので会場の方は USB メモリでまわします) r2d2b2g-windows.xpi ファイルを Firefox にドラッグ&ドロッ

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

を押す。

r2d2b2g起動

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

エミュレータ画面起動

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

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

フォルダを開く

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

す。 extensions/[email protected]/profile/webapps/syst

em.gaiamobile.orgを開く。

起動画面のカスタマイズ

ソースコードの書き換え 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で圧縮。 ※フォルダを圧縮しないように注意! エミュレーターを再起動して右図が表示されていれば成功。

壁紙の追加

壁紙の追加

ソースコードの書き換え extensions/[email protected]/profile/webapps/wall

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

を置く。

※サイズは320x480。 application/pick.html をエディタで開く。 div class=”wallpaper” 要素を追加。

壁紙の確認

壁紙の追加を確認

Web API の活用(余力のある方向け)

Web API 一覧

Firefox OS で使用可能な API 近接センサー、電源管理、バイブレーション等 JavaScript から

ハードウェアを制御できる。 Firefox OS で使用可能な API 一覧

https://wiki.mozilla.org/WebAPI

※開発中なので動作しない/問題があるものもあり これ使ってみたい等あれば可能な限りサポートします