関東 Firefox OS 勉強会 12th の資料です https://firefox-os.doorkeeper.jp/events/28397

1. きつねさんでもわかる

2. #fxos
はじめに
コードリーディングとは・・・
• 読んで字のごとく、ソースコードを読む事。
エンジニアの「書く」時間と「読む」時間
• 殆どのエンジニアは書く自間の方が多い？
オープンソースのコードリーディング
• コードリーディングって敷居が高い？

3. #fxos
本日のアジェンダ
読み始める前に（準備編）
1. FirefoxOSってなぁに
2. FirefoxOSのソースはどこにあるの?
読んで行こう (実践編)
①Gaia ( user interface )
1. どのように読むのか(ツール説明)
2. 読み方編（デモ）
3. デバッグ（デモ）
②Gecko (browser engine)
1. どのように読むのか（ツール説明）
2. 読み方編（デモ）

4. #fxos
FirefoxOSってなぁに？
Mozilla財団が開発しているWebプラットフォーム
HTML5でアプリの開発を行える
Firefox/ThunderbirdでおなじみのブラウザエンジンGecko
が ほぼそのまま乗っている

5. #fxos
FirefoxOSのアーキテクチャ
Gaia
ユーザーインタフェース部
すべてhtml5,css,javascriptで書かれ
ている。
OSとのやり取りはWebAPI(Gecko)側
に実装されています。
Gecko
アプリケーションランタイム部
HTML,css, JavaScriptエンジン、
WebAPIの実装があります。
Gonk
プラットフォーム部
Linuxカーネル(AOSP)とHALで構成
されている。

6. #fxos
本日のスコープ
Gaia
ユーザーインタフェース部
すべてhtml5,css,javascriptで書かれ
ている。
OSとのやり取りはWebAPI(Gecko)側
に実装されています。
Gecko
アプリケーションランタイム部
HTML,css, JavaScriptエンジン、
WebAPIの実装があります。
Gonk
プラットフォーム部
Linuxカーネル(AOSP)とHALで構成
されている。

7. #fxos
ソースコードはどこに？
mozilla-central
http://hg.mozilla.org/mozilla-central
Github
https://github.com/mozilla-b2g/gaia
https://github.com/mozilla/gecko-dev

8. #fxos
よんでみよう

9. #fxos
Gaiaを読もう

10. #fxos
Gaiaを読もう
Github
https://github.com/mozilla-b2g/gaia
https://github.com/mozilla/gecko-dev

11. #fxos
Gaiaを読もう
MXR (Mozilla Cross Reference)
http://mxr.mozilla.org/gaia/

12. #fxos
Gaiaを読もう
/apps 直下に
アプリのコードが
入ってる。

13. #fxos
Gaiaを読もう
WebIDE (デバッグが可能)
https://developer.mozilla.org/ja/docs/Tools/WebIDE

14. #fxos
Gaiaを読もう(おまけ)
translateZはGPUを使用するので早い（あと低電力）
子要素だけを回転させるので、子要素のレイアウト変更、塗りつぶしなどに
よる予期せぬ動作を回避しています。

15. #fxos
Gaiaを読もう
OpenGrok
reading.fxos.org/source/

16. #fxos
Gaiaを読もう(まとめ)
UIの実装を調べたいときに見る
WebAPIの使い方の参考になる
HTML / JavaScript / CSSベースで書いてある
最初に読むとき、オススメのディレクトリ
/apps
• firefoxOS標準インストールされているアプリの格納箇所
• WebAPIの実践的な使い方が書かれている。
• Keybord, camera, bluetooth…など
割とブレークポイントを用いた動的解析は容易
読んで動きが良くわからないときはWebIDEでデバッグするのも有り！

17. #fxos
Geckoを読もう ( WebAPI )

18. #fxos
Geckoを読もう ( WebAPI編 ）
FirefoxOSとGeckoのバージョンを理解する
Firefox OS Gecko
2.0 32
2.1 34
2.2 37
3.0 ? 41 ?

19. #fxos
Geckoを読もう ( WebAPI編 ）
調べたいAPIを絞る ( Can I Use )
http://caniuse.com/#comparison

20. #fxos
Geckoを読もう ( WebAPI編 ）
調べたいAPIの仕様を見る ( W3C Document )
http://www.w3.org/TR/proximity/

21. #fxos
Geckoを読もう (Tool編)
MXR (Mozilla Cross Reference)
http://mxr.mozilla.org/mozilla-central/

22. #fxos
Geckoを読もう (Tool編)
殆どの場合 /dom 配下にWebAPIの実装がある

23. #fxos
Geckoを読もう (おまけ)
一部の近接センサーはバイナリ情報で遠いか近いかと言う情報を観測します。
この場合、センサーが返す値は最大検知範囲の値と近い状態の中で、最も小
さい値を報告する必要が有ります。

24. #fxos
Geckoを読もう (Tool編)
DXR (検索性が良いTool)
https://dxr.mozilla.org/mozilla-central/source/

25. #fxos
Geckoを読もう (Tool編)
ADB + (デバッグする)
https://developer.mozilla.org/ja/Firefox_OS/Debugging
初心者は同ページの「デバイス上でコンソールログを取る」から始めるのがオ
ススメ。

26. #fxos
Geckoを読もう (まとめ)
プラットフォーム部分を調べたいときに見る
WebAPIの実装とかエンジン部分とか
C,C++で書かれている
最初に見るべきオススメのディレクトリ
/dom
• だいたいココにWebAPIの実装がある
• レンダリングエンジンとかJSエンジンは別の場所
動的解析が割と大変(Gaiaに比べて)
慣れると簡単なのかもしれないけど、未だ慣れない

27. #fxos
まとめ / オススメ資料
• 簡単なまとめ
• コードリーディング入門ノウハウ
https://goo.gl/7Po36g
• Firefoxの基本(アプリケーション)
• つくろう！Firefox OS アプリ
http://www.slideshare.net/chikoski/firefox-os-43867933
• MDN アプリセンター
https://developer.mozilla.org/ja/Apps
• アーキテクチャ(全体像)
• FIrefox OSアーキテクチャクイックツアー
https://prezi.com/dxbgeptaxqtb/firefox-os/
• Firefox Diagrams
https://github.com/sotaroikeda/firefox-diagrams/wiki/Firefox-
Diagrams

28. #fxos
さいごに / イベント紹介
• FxOSコードリーディングミートアップ
• ひとりで読まず、みんなで読もう
https://firefox-os.doorkeeper.jp/

29. #fxos
さいごに / 個人的な一言
最初から全体から把握しようは読まない
モチベーションを維持する為に気になったところからつ
まみ始めるのがおすすめ。
例： 時計アプリの実装方法とか、気になるWebAPIとか
WoTでは最も先進的なプラットフォームだと思ってる
すべてがOpenなのでデバイス系APIを実機付きで手軽に
試せるのはFirefoxOSの強み！
(早くCHIRIMEN触りたい・・・)

30. #fxos
酒巻瑞穂は自身のポテンシャルを最大限発揮するために常に挑戦を通してその分野への大志を抱く意
欲的な専門家である。 以前は物流系での開発、主にデータベース設計やバックエンドのフレーム
ワーク構築/運用に情熱をかけ、 如何に生産性を上げつつ運用コストを削減するかと言う観点から製
造の基盤系技術や学習に挑戦と意欲を出していた。 近年ではWeb技術を中心としたフロントソフト
ウェア開発/製造において、 開発基盤と開発ライフサイクルを如何に効率化/高品質化するかに対して
情熱を注いでいる。 そこで得たWeb技術中心のUI製造ノウハウを元に、業務システムエンジニアに
向けたセミナーや勉強会に貢献しているだけでなく、 積極的にGoogleやMozilla等のOpen系のWeb技
術コミュニティーにて参加し、将来有力な開発基盤となりそうなOSSのコミッターを目指す野心家で
もある。
自己紹介
酒巻 瑞穂(さかまき みずほ)
グロースエクスパートナーズ フロントエンドエンジニア
Github: https://github.com/MSakamaki
ご清聴ありがとうございました。