Firefox OSのソースコードを読む – コードリーディングのすすめ

7月27日(月)に『関東 Firefox OS 勉強会 12th』に参加してきました。内容としては、Firefox OSやアプリの開発ツールの最新情報、コードリーディングについてといった感じでした。Firefox OSはWeb標準技術で実装されていて、アプリはFirefoxがあれば開発が可能です。アプリ開発に必要な技術的な知識もコードリーディングをすることで学ぶことができます。そんなFirefox OSのコードリーディングのコツを学んできたので、まとめておきます。

Mozilla Firefox

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)

Mozilla_Cross-Reference(MXR)
MXR – Gaia | MXR – mozilla-central

GitHub

Mozilla-B2G - GitHub
mozilla-b2g/gaia | mozilla/gecko-dev

OpenGrok

open_grok
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」を使います。

can_i_use
Can I use… Support tables for HTML5, CSS3, etc

ちなみにFirefox OSとGeckoのバージョンの関係は以下の通りです。

Firefox OSGecko
2.032
2.134
2.237
2.543

調べたいWebAPIの仕様は「W3C」の技術レポートインデックスで確認します。

w3c
All Standards and Drafts – 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」をクリックします。

fxos_webide_01
メニューからWebIDEを起動

または、FirefoxのカスタムバーにWebIDEを起動するためのボタンが組み込まれているので、こちらのボタンを押します。

fxos_webide_09
専用ボタンからWebIDEを起動

Firefox OSシミュレーターをWebIDEにインストールする

Firefox OSアプリを動かすためのFirefox OSシミュレーターはバージョンごとにWebIDEにインストールできるようになっています。

Firefox OSシミュレーターをインストールするには、WebIDEの「ランタイムを選択」から「シミュレータをインストール」を選択します。

fxos_webide_02
「シミュレータをインストール」を選択

それぞれのバージョンごとにインストールすることができるようになっています。今回は安定版の最新のもの(バージョン2.0)をインストールすることにします。

fxos_webide_03
Firefox OSシミュレータをインストール

インストールが完了したら、WebIDEの「ランタイムを選択」に追加されます。シミューレータの項目の「Firefox OS 2.0」を選択すると、Firefox OS 2.0のシミュレータが起動します。

fxos_webide_04
Firefox OSを起動

Firefox OSのアプリのソースコードを読む

Firefox OSシミュレータを起動すると、WebIDEのメインプロセスからアプリを起動することができるようになります。今回は時計の標準アプリである「Clock」を起動することにします。

fxos_webide_05
アプリ(Clock)を選択

Firefoxシミュレータにアプリが立ち上がります。WebIDEのDOMインスペクタでソースコードを確認することができます。

fxos_webide_06
アプリ(Clock)が起動

例えば、Clockアプリの秒針はtransformプロパティでスタイルされていることがわかります。

fxos_webide_07

以上のように、WebIDEにはDOMインスペクタだけでなく、JavaScritを確認するためのデバッガなどもあります。これらを活用してFirefox OSアプリのソースコードを読んでいくことなります。

ありがたいことに、Firefox OSのソースはコメントが充実しています。これはすごく勉強になると思います。

fxos_webide_08

まとめ

今回のFirefox OS勉強会に参加して、Firefox OSアプリを作るかどうか別として、Firefox OSのソースコードを読むだけでもかなり勉強になりそうだなと思いました。特にコード内に細かくコメントが書かれているということで、それがすごく役に立つと思います。

それから、しっかりソースコードを読むことによって、どうやってハードウェアを制御しているのかなどもわかるようになっているので、難解ではあると思いますが、それはそれで読み甲斐がありますね。

WebIDEも正直これまでちゃんと触ってきていませんでしたが、今回の勉強会に参加して実際に起動して試してみましたが、いつもの開発ツールを使う感覚でアプリの開発ができてしまうということで、かなり敷居は低いと思いました。

参考リンク & スライド

Firefox OSコードリーディング

Firefox OSの基本(アプリケーション)

アーキテクチャ(全体像)

コミュニティ

勉強会のスライド

Firefox OSアプリ開発ガイド
  • 『Firefox OSアプリ開発ガイド』
  • 著者: 本間雅史, 宮家秀二, 秋葉秀樹, 今村博宜, 山本祐輔
  • 出版社: リックテレコム
  • 単行本: 280ページ
  • 発売日: 2013年6月10日
  • ISBN: 4897979218

コメント一覧

  • 必須

コメント