7月27日（月）に『関東 Firefox OS 勉強会 12th』に参加してきました。内容としては、Firefox OSやアプリの開発ツールの最新情報、コードリーディングについてといった感じでした。Firefox OSはWeb標準技術で実装されていて、アプリはFirefoxがあれば開発が可能です。アプリ開発に必要な技術的な知識もコードリーディングをすることで学ぶことができます。そんなFirefox OSのコードリーディングのコツを学んできたので、まとめておきます。
Firefox OSの概要
まず、Firefox OSの概要についてまとめておきます。
Firefox OSとは
Firefox OSは、Mozillaが開発しているスマホ向けOSであり、Web標準技術によるオープンなプラットフォームです。アプリもWebサイトと同じように開発することができます。
- 必要なスキルはWeb技術のみ
- 開発ツールはブラウザFirefoxのみ
- 開発者登録や費用も不要
Firefox OSのこれから
Firefox OSは現在Ignite Initiativeの段階にあります。「User Focus」、「Web Platform」、「Community」の三原則を元に開発が進められています。今年の11月2日にはFirefox OS 2.5のリリースの予定があります。注目すべきポイントは以下となります。
- Webのピン留め（Pin the Web）
- 音声認識（Voice Control）
- 開発者向けデバイス＆ビルド
- ユーザの声を直接反映
- コミュニティサポート
Firefox OSのアーキテクチャ
ソースコードを読んでいく上で、Firefox OSの構成を把握しておく必要があります。Firefox OSは以下の3つの部分からできています。これらもしっかり頭に入れておく必要があります。
- Gaia
- ユーザーインターフェース部。すべてWeb標準技術（HTML5 / CSS / JavaScript）で書かれています。
- Gecko
- アプリケーションランタイム部。Web APIの実装がある。C、C++で書かれています。
- Gonk
- プラットフォーム部。Linuxカーネル(AOSP)とHALで構成されています。
Firefox OSのソースコードを読む
Firefox OSのソースコードは以下に公開されています。いくつか紹介します。
MXR（Mozilla Cross-Reference）
GitHub
OpenGrok
以下のようなものもあります。
これらはソースコードがそのまま公開されているだけなので、ひとつひとつ読んでいたら日が暮れます。この膨大な数のソースコードをどう読んでいけばよいかコツを以下にまとめていきます。
Gaiaを読む
Gaiaは上でも触れたようにFirefoxのUIを司る部分となり、HTML5、CSS、JavaScriptで書かれているので読みやすく、最初に読む部分として最適と言えます。Gaiaを読むことで、UIをどう実装しているかなど理解を深めることができます。
Gaiaの中で特に最初に読むのにオススメなディレクトリは「appsディレクトリ」配下となります。Firefoxの標準アプリの格納場所であり、WebAPIの実践的な使い方が学べます。
Gaiaのソースコードを読む
Gaiaのソースコードは以下にて読むことができます。
MXR（Mozilla Cross-Reference）で読む
GitHubで読む
OpenGrokで読む
Geckoを読む
Geckoはアプリケーションランタイム部を司り、WebAPIの実装がなされている箇所となります。C、C++で書かれています。Geckoを読む際は、調べたいWebAPIを絞ってから、該当のソースを読むのがよいということです。
調べたいWebAPIを絞るためのツールとして、「Can I Use」を使います。
ちなみにFirefox OSとGeckoのバージョンの関係は以下の通りです。
| Firefox OS | Gecko |
|---|---|
| 2.0 | 32 |
| 2.1 | 34 |
| 2.2 | 37 |
| 2.5 | 43 |
調べたいWebAPIの仕様は「W3C」の技術レポートインデックスで確認します。
Geckoのソースコードを読む
Geckoのソースコードは以下にて読むことができます。ほとんどのWebAPIの実装は「dom」配下にあります。
MXR（Mozilla Cross-Reference）で読む
GitHubで読む
OpenGrokで読む
Firefox OSアプリのソースをWebIDEで読む
Firefoxには、ブラウザ上でFirefox OSのアプリを開発できるようにWebIDEという統合開発ツールが組み込まれています。このWebIDEを使ってソースコードを読むことも可能です。Firefoxの標準アプリのソースを読む方法を例にして、WebIDEの使い方などをまとめておきます。
WebIDEを起動する
WebIDEを起動するには、Firefoxの上部メニューから「ツール」→「Web開発」と進んで、「WebIDE」をクリックします。
または、FirefoxのカスタムバーにWebIDEを起動するためのボタンが組み込まれているので、こちらのボタンを押します。
Firefox OSシミュレーターをWebIDEにインストールする
Firefox OSアプリを動かすためのFirefox OSシミュレーターはバージョンごとにWebIDEにインストールできるようになっています。
Firefox OSシミュレーターをインストールするには、WebIDEの「ランタイムを選択」から「シミュレータをインストール」を選択します。
それぞれのバージョンごとにインストールすることができるようになっています。今回は安定版の最新のもの（バージョン2.0）をインストールすることにします。
インストールが完了したら、WebIDEの「ランタイムを選択」に追加されます。シミューレータの項目の「Firefox OS 2.0」を選択すると、Firefox OS 2.0のシミュレータが起動します。
Firefox OSのアプリのソースコードを読む
Firefox OSシミュレータを起動すると、WebIDEのメインプロセスからアプリを起動することができるようになります。今回は時計の標準アプリである「Clock」を起動することにします。
Firefoxシミュレータにアプリが立ち上がります。WebIDEのDOMインスペクタでソースコードを確認することができます。
例えば、Clockアプリの秒針はtransformプロパティでスタイルされていることがわかります。
以上のように、WebIDEにはDOMインスペクタだけでなく、JavaScritを確認するためのデバッガなどもあります。これらを活用してFirefox OSアプリのソースコードを読んでいくことなります。
ありがたいことに、Firefox OSのソースはコメントが充実しています。これはすごく勉強になると思います。
まとめ
今回のFirefox OS勉強会に参加して、Firefox OSアプリを作るかどうか別として、Firefox OSのソースコードを読むだけでもかなり勉強になりそうだなと思いました。特にコード内に細かくコメントが書かれているということで、それがすごく役に立つと思います。
それから、しっかりソースコードを読むことによって、どうやってハードウェアを制御しているのかなどもわかるようになっているので、難解ではあると思いますが、それはそれで読み甲斐がありますね。
WebIDEも正直これまでちゃんと触ってきていませんでしたが、今回の勉強会に参加して実際に起動して試してみましたが、いつもの開発ツールを使う感覚でアプリの開発ができてしまうということで、かなり敷居は低いと思いました。
参考リンク & スライド
Firefox OSコードリーディング
Firefox OSの基本(アプリケーション)
アーキテクチャ(全体像)
コミュニティ
勉強会のスライド
- 『Firefox OSアプリ開発ガイド』
- 著者: 本間雅史, 宮家秀二, 秋葉秀樹, 今村博宜, 山本祐輔
- 出版社: リックテレコム
- 単行本: 280ページ
- 発売日: 2013年6月10日
- ISBN: 4897979218
コメント