Embed Size (px)
Citation preview
Firefox OS コードリーディング入門
きつねさんでもわかる
#fxos
はじめに
コードリーディングとは・・・• 読んで字のごとく、ソースコードを読む事。
エンジニアの「書く」時間と「読む」時間• 殆どのエンジニアは書く自間の方が多い？
オープンソースのコードリーディング• コードリーディングって敷居が高い？
#fxos
本日のアジェンダ読み始める前に（準備編）
1. FirefoxOS ってなぁに2. FirefoxOS のソースはどこにあるの ?
読んで行こう ( 実践編 ).① Gaia ( user interface )
1. どのように読むのか ( ツール説明 )2. 読み方編（デモ）3. デバッグ（デモ）
.② Gecko (browser engine)1. どのように読むのか（ツール説明）2. 読み方編（デモ）
#fxos
FirefoxOS ってなぁに？Mozilla 財団が開発している Web プラットフォーム
HTML5 でアプリの開発を行える
Firefox/Thunderbird でおなじみのブラウザエンジンGecko が ほぼそのまま乗っている
#fxos
FirefoxOS のアーキテクチャ
Gaiaユーザーインタフェース部すべて html5,css,javascript で書かれている。OS とのやり取りは WebAPI(Gecko)側に実装されています。
Geckoアプリケーションランタイム部HTML,css, JavaScript エンジン、 WebAPI の実装があります。
Gonkプラットフォーム部Linux カーネル (AOSP) と HAL で構成されている。
#fxos
本日のスコープGaiaユーザーインタフェース部すべて html5,css,javascript で書かれている。OS とのやり取りは WebAPI(Gecko)側に実装されています。
Geckoアプリケーションランタイム部HTML,css, JavaScript エンジン、 WebAPI の実装があります。
Gonkプラットフォーム部Linux カーネル (AOSP) と HAL で構成されている。
#fxos
ソースコードはどこに？
mozilla-centralhttp://hg.mozilla.org/mozilla-central
Githubhttps://github.com/mozilla-b2g/gaiahttps://github.com/mozilla/gecko-dev
#fxos
よんでみよう
#fxos
Gaia を読もう
#fxos
Gaia を読もうGithubhttps://github.com/mozilla-b2g/gaiahttps://github.com/mozilla/gecko-dev
#fxos
Gaia を読もうMXR (Mozilla Cross Reference)http://mxr.mozilla.org/gaia/
#fxos
Gaia を読もう/apps 直下にアプリのコードが入ってる。
#fxos
Gaia を読もうWebIDE ( デバッグが可能 )https://developer.mozilla.org/ja/docs/Tools/WebIDE
#fxos
Gaia を読もう ( おまけ )
translateZ は GPU を使用するので早い（あと低電力）
子要素だけを回転させるので、子要素のレイアウト変更、塗りつぶしなどによる予期せぬ動作を回避しています。
#fxos
Gaia を読もうOpenGrokreading.fxos.org/source/
#fxos
Gaia を読もう ( まとめ )UI の実装を調べたいときに見るWebAPI の使い方の参考になる
HTML / JavaScript / CSS ベースで書いてある
最初に読むとき、オススメのディレクトリ/apps• firefoxOS 標準インストールされているアプリの格納箇所• WebAPI の実践的な使い方が書かれている。• Keybord, camera, bluetooth… など
割とブレークポイントを用いた動的解析は容易読んで動きが良くわからないときは WebIDE でデバッグするのも有り！
#fxos
Gecko を読もう ( WebAPI )
#fxos
Gecko を読もう ( WebAPI 編 ）FirefoxOS と Gecko のバージョンを理解する
Firefox OS Gecko
2.0 32
2.1 34
2.2 37
3.0 ? 41 ?
#fxos
Gecko を読もう ( WebAPI 編 ）調べたい API を絞る ( Can I Use )http://caniuse.com/#comparison
#fxos
Gecko を読もう ( WebAPI 編 ）調べたい API の仕様を見る ( W3C Document )http://www.w3.org/TR/proximity/
#fxos
Gecko を読もう (Tool 編 )MXR (Mozilla Cross Reference)http://mxr.mozilla.org/mozilla-central/
#fxos
Gecko を読もう (Tool 編 )殆どの場合 /dom 配下に WebAPI の実装がある
#fxos
Gecko を読もう ( おまけ )
一部の近接センサーはバイナリ情報で遠いか近いかと言う情報を観測します。この場合、センサーが返す値は最大検知範囲の値と近い状態の中で、最も小さい値を報告する必要が有ります。
#fxos
Gecko を読もう (Tool 編 )DXR ( 検索性が良い Tool)https://dxr.mozilla.org/mozilla-central/source/
#fxos
Gecko を読もう (Tool 編 )ADB + ( デバッグする )https://developer.mozilla.org/ja/Firefox_OS/Debugging
初心者は同ページの「デバイス上でコンソールログを取る」から始めるのがオススメ。
#fxos
Gecko を読もう ( まとめ )プラットフォーム部分を調べたいときに見るWebAPI の実装とかエンジン部分とか
C,C++ で書かれている
最初に見るべきオススメのディレクトリ/dom• だいたいココに WebAPI の実装がある• レンダリングエンジンとか JS エンジンは別の場所
動的解析が割と大変 (Gaia に比べて )慣れると簡単なのかもしれないけど、未だ慣れない
#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 Diagramshttps://github.com/sotaroikeda/firefox-diagrams/wiki/Firefox-Diagrams
#fxos
さいごに / イベント紹介• FxOS コードリーディングミートアップ
• ひとりで読まず、みんなで読もうhttps://firefox-os.doorkeeper.jp/
#fxos
さいごに / 個人的な一言最初から全体から把握しようは読まない
モチベーションを維持する為に気になったところからつまみ始めるのがおすすめ。例： 時計アプリの実装方法とか、気になる WebAPI とか
WoT では最も先進的なプラットフォームだと思ってるすべてが Open なのでデバイス系 API を実機付きで手軽に試せるのは FirefoxOS の強み！( 早く CHIRIMEN触りたい・・・ )
#fxos
酒巻瑞穂は自身のポテンシャルを最大限発揮するために常に挑戦を通してその分野への大志を抱く意欲的な専門家である。 以前は物流系での開発、主にデータベース設計やバックエンドのフレームワーク構築 /運用に情熱をかけ、 如何に生産性を上げつつ運用コストを削減するかと言う観点から製造の基盤系技術や学習に挑戦と意欲を出していた。 近年では Web技術を中心としたフロントソフトウェア開発 /製造において、 開発基盤と開発ライフサイクルを如何に効率化 / 高品質化するかに対して情熱を注いでいる。 そこで得た Web技術中心の UI製造ノウハウを元に、業務システムエンジニアに向けたセミナーや勉強会に貢献しているだけでなく、 積極的に Google や Mozilla等の Open系の Web技術コミュニティーにて参加し、将来有力な開発基盤となりそうな OSS のコミッターを目指す野心家でもある。
自己紹介酒巻 瑞穂 ( さかまき みずほ )
グロースエクスパートナーズ フロントエンドエンジニア
Github: https://github.com/MSakamaki
ご清聴ありがとうございました。
