関東Firefox OS勉強会 1st(仮)の内容ざっくりまとめ。

各プレゼンの資料はモバイルクリエイターズ(仮)の「ホーム‎＞資料置き場‎Firefox OS」の「2013/6/19 関東Firefox OS勉強会 1st(仮)」からアクセスしてください。

togetterはこの辺→http://togetter.com/li/520923

Firefox OSのカスタムROM開発を始めてみた

@androidsolaさん。
資料はhttp://www.slideshare.net/sola1980/firefox-osrom。

概要

普段はAndroidを弄っている。AndroidのカスタムROM（JCROM）を作ったりしている。

今回は、FirefoxOSをカスタマイズしてみようという話。

Firefox OSのビルドの準備

改造する準備。まずソースを取得する。
Mozillaのサイトに手順が書いてある。
但し変化が激しく安定していないので、安定している版を自分で取得。

Ubuntu 12.04か12.10を用意して環境変数を設定するだけ。

リポジトリからcloneして、config用のスクリプト（config.sh）でターゲットを指定する。

その後、日本語環境用のパスの設定などを行う。
またソースが公開されていないファイルがあるので、端末（実機）からファイルを吸い出す。これも吸い出し用のスクリプトを実行するだけ。

FirefoxOSの改造

JCROMでは見た目を変えたりできる。テーマ設定。
これをFirefox OSでもやってみる。

設定画面の追加

設定アプリの一番上にJCROM Settingsを追加した。
これをタップするとテーマを設定できる。

（Firefox OSのソースの）gaia/appsの下に各種アプリがあり、その中にsettingsアプリがある。これに手を入れることでFirefox OSの設定画面を変更することができる。
具体的には、インストールしているテーマ（の構成ファイル）をSDカードから読み込む、設定画面に表示するアイコンを追加するといったことを行う。

ステータスバーの画像、背景、通知領域の変更。

テーマ変更の仕組み

「JCROM Settings」画面の「Enable JCROM Theme」チェックボックスの状態変化（これを「jcrom.theme.enabled」イベントとして紐付ける）をホームスクリーンやロックスクリーンの実装側で拾い、画像を変更する（あるいは戻す）処理を実行する。

「Select Theme」画面も同様で、テーマのセレクトボックスの変更イベント（「theme.select」イベント）を拾って処理をかける。

ステータスバー／通知領域／ロックスクリーン等の処理追加

例えばステータスバーを変更したい場合。
「gaia/apps/system/js/statusbar.js」にSettingListenerを追加して、設定画面で定義したjcrom.theme.enabledイベントとtheme.selectイベントに対応する処理を記述する。

アプリのテーマ変更

アプリのテーマ変更も試してみた。
ブラウザを立ち上げたときのトップページのロゴを変更できるようにする。
結果としては壁紙等の変更と同様の方法でできたが、SettingListenerを使うために以下の実装が必要。

・「settings_listener.js」を読み込む処理を追加する
・SDカードへのアクセス権限（読み込み）を追加する（←テーマ用のデータがSDカードに入っているので）

まとめ

やる気が続けば、全面的に変えてみようと思っている。

Androidと比べた時の、FirefoxOSの良い点。

ビルド時間が短い。Androidで50分かかるところが、FirefoxOSは30分で終わる。

テーマ変更時の切り替えが早い。
Androidで10秒ぐらい待つダイアログを出していたところが、FirefoxOSだとすぐ終わる。

Firefox OSは元々Boot to Gecko（B2G）という名前だが、それに準えてBoot to JCROMという名前でサイトを作っている。（https://sites.google.com/site/jcromfirefox/）

Boot to JCROMで行っていることは、日本語環境入りのFirefox OS環境、JCROMとしての機能をFirefox OSに実装した環境。
興味があればforkしてpull requestしてほしい。

実装の感覚としては、Java（Android）よりJavaScript（Firefox OS）の方が楽。

開発はemacsで。

JSとの健全なつきあい方

残念で有名な@kassy_kzさん。

資料はhttp://www.slideshare.net/KazutoshiKashimoto/firefox-os-23190140。

概要

標題にJSとあるが、この発表ではJavaScriptの話はあまり出てこない。

@kassy_kzさんは自称健全。

Firefox OSシミュレータ

（PC版の）Firefoxブラウザのアドオンでシミュレータをインストール。（https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/）

Androidと違って、シミュレータを立ち上げるまでが早い。簡単。

専用のIDEはない。

アプリの開発

簡単なHello Worldプロジェクトを作った。（https://github.com/kassy-kz/FirefoxOS_Template）

一般のWebアプリと違って、マニフェストファイルが必要。

アプリ公開の方法

自前のサーバで普通のWebサイトとして公開する、もしくはMarketplaceで公開する。

Marketplaceを使う場合、更にHost型とPackage型に分かれる。

Host型は、普通のWebサイトと同様に自前のサーバで公開する。

Package型ではアプリをZipで固めて、Marketplaceのサイトでアップロードする。
但し審査がある。

デバッグ

JavaScriptのデバッグ

Firefox OS Simulatorの画面上でConnectボタンを押して接続して、ブレークポイントを置いてステップ実行したりデバッグしたりする。

デバッガのおかしな点。
行番号と実際のコードの行の位置が合っていない。ちょこちょこずれる。
これだとブレークポイントをうまく張れない。難。

実機でのデバッグ

実機とPCをUSBで繋いだ後にadb接続して、
adb forwardでtcp6000番に繋いで……。
という手順があったが、この方法は2013/1/10以降動かなくなったのでシミュレータでデバッグしてね、ということらしい。
現時点ではシミュレータで確認しないと行けない。

（浅井さん補足）
Firefox OSは、最近の設計では各アプリが子プロセス上で動いている。
で、デバッガ側がこの実装に追いついていないため、今のところはリモートデバッグができない。

まとめ

Firefox OSアプリ開発ガイドはすばらしい。

Firefox OSでLINEは作れるか？

@sys1yagiさん。
資料はhttp://www.slideshare.net/bs_yagi/firefox-osline。

概要

普段はAndroidアプリを作っていたりフレームワークを見ていたり。
今年はJavaScriptをやろうかということでnode.jsを弄ったり、その流れでFirefox OS。

なぜLINEを作るか？

Firefox OS＝新しいOSに手を出すに当たって、LINEとパズドラが候補に挙がった。
が、パズドラはおそらくCanvasとJavaScriptに終始すると思ったので見送った。

LINEは、スマホのUIや画面センサ、チャットやVoIPで通話や連絡帳へのアクセス、GPS（ふるふる機能）、センサ、QRコードリーダ、push通知等々の様々な機能から成る。
なのでLINEが作れれば大抵のアプリが作られるだろうと言うことで。

今回はチャット機能とVoIP機能に絞って話す。

チャット機能

チャット機能を実現する上で必要となるのは、チャット相手のアカウントの識別とチャットサーバ、HTTP通信処理。
アカウントの方は、自分のIDやプロフィール、チャット相手の情報をキャッシュして残す＝アプリ内で保存する機能が必要。

WebStorage

ローカルでデータを保存する仕組みで、実体はkey-value store。
sessionStorageとlocalStorageがあり、前者はアプリを終了する（セッションを終了する）とデータが消える。
localStorageはデータを永続化できる。

localStorage。
簡単にデータを保存したり取り出したりできる。
backbone-localstorage.jsを使ってもいける。

チャットサーバ

node.jsでちょろっと作った。

HTTP通信処理

jQuery.ajaxで簡単にいけるのではと思っていたが、単純に書いても動かない。

先ほど（@kassy_kzさんの話で）Host型とPackage型の話が出てきたが、Package型はアプリとして端末に保存するのでクロスドメインの制約を受ける。つまり外部URLとやり取りできない。

（浅井さん補足）
XHRはCORS（Cross-Origin Resource Sharing）で制限を解除できる。
Access-Control-Allow-Originを指定して、特定のOriginからのデータ取得を許可する。
（補足ここまで）

パッケージ型には更に種類があって、標準（Plain）、特権（Privileged）、公認（Certified）。（http://twitter.com/dynamitter/status/347307846561591296）
それぞれのアプリで使用可能な権限が変わる。

特権（privileged）のアプリであればパーミッションを宣言すれば良い。XHRを使うために、systemXHRパーミッションを追加する。

但し、privilegedの場合はコードレビューレベルの審査を受けることになるので、何でもかんでもprivilegedにすればよいというわけではない。

XHR。
jQueryのajax()は動かなかったが、XMLHttpRequestのインスタンスを作る時にmozSystem:trueを指定すれば使えた。
jQueryでも、ajax()の実装内で箇所にそういう記述をすればいけるのでは。

キーボードもHTML。なのでキーボードを出すとレイアウトがずれる。

XHRを使うまとめ。
manifest.webappのtypeにprivileged、permission設定が必要。
通信処理は基本的にXHR直で（＝現行のライブラリを使わない）。

VoIPでの通話

VoIPを実現するためには、SIPスタック。P2Pでの接続、RTP等による音声ストリーム。といった条件が必要。（補足：VoIPイコールSIPではない）
これらがFirefox OSで使えるか。

WebRTC

プラグインなしでブラウザ間で音声やビデオチャットをする仕様。
更に調べると、sipML5が内部でWebRTCを使っている。

Firefox OSでsipMLが使えるか確認した。
結論として、従来のFirefox OSブラウザではいけたが、Firefox OSではダメだった。

CertifiedのパーミッションにVoIPが追加される予定。次期バージョンでサポートされるらしい？
bugzillaでチケットが登録されていて、それが通ればいけそう。

課金

割と簡単そう。
ライブラリが最初から提供されていて、公式のドキュメントにも方法が書いてある。

難しいのは、スマホの画面遷移のフォロー。魔境。

FirefoxOSアプリ開発のポイント

@dynamisさん。

シミュレータに全言語対応のバージョンがあって、そこに言語設定を書いておくと日本語UIが確認できる。
何かあれば、浅井さんの方に伝えてもらえれば開発の方に伝えるなり浅井さんの方で対応するなりする。

現在、SDKっぽい雰囲気のものを作っている。
これがFirefox OSの本体に入っていて……。（聞き逃し）

アプリ開発の注意事項。

User-Agentが他のモバイルOSと異なる。
「Android;」は含まない。
Mobile端末であることは識別できるので、Webサイト側でFirefox OS向けの対応を行って、PC版へリダイレクトされないように対応してほしい。

戻るボタンがない。
URLをどんどん下っていくと戻れないページが多いが、Firefox OSでは「戻れない」「アプリを一度終了しないといけない」ということになる。
シミュレータ等でテストしながら確認してほしい。

Hosted型とPackaged型。
あと、端末メーカでないと作れない公認（Certified）アプリ。

カメラを使いたい場合は、権限を要求するのでなくカメラアプリを呼ぶような作りにした方がよい。

inline-scriptは禁止される。（JavaScriptのコードを別ファイルに切り離さないとダメ）

Content Security Policy。
一部APIを使うにはCSPが必要。
アプリではCSPはデフォルト無効。
packagedの場合は自分のアプリ内、Hosted型の場合は同一ドメインでないと、sourceに書いても使えない。scriptとかobjectとか。

権限が適切であることを説明できないと、レビューを通れないかも知れない。

モバイルクリエイターズ（仮）

@kojiraさん。

Android周りに携わってきて勉強会等を定期的に行っていたが、この一年ほど遠ざかっていた。

モバイルクリエイターズ（仮）を立ち上げた。
今130名ぐらい。オンラインでやってきたが、オフラインでも勉強会をやったりしようということで、今回のFirefox OS勉強会もモバイルクリエイターズ（仮）名義で開催している。

Androidをやってきて感じたのは、まずは自分から情報を発信すること。
勉強会を開いたり、プラットフォーム横串で技術情報をまとめていきたいと考えている。