Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
きつねさんでもわかる
#fxos
はじめに
コードリーディングとは・・・
• 読んで字のごとく、ソースコードを読む事。
エンジニアの「書く」時間と「読む」時間
• 殆どのエンジニアは書く自間の方が多い?
オープンソースのコードリーディング
• コードリーディングって...
#fxos
本日のアジェンダ
読み始める前に(準備編)
1. FirefoxOSってなぁに
2. FirefoxOSのソースはどこにあるの?
読んで行こう (実践編)
①Gaia ( user interface )
1. どのように読むのか(...
#fxos
FirefoxOSってなぁに?
Mozilla財団が開発しているWebプラットフォーム
HTML5でアプリの開発を行える
Firefox/ThunderbirdでおなじみのブラウザエンジンGecko
が ほぼそのまま乗っている
#fxos
FirefoxOSのアーキテクチャ
Gaia
ユーザーインタフェース部
すべてhtml5,css,javascriptで書かれ
ている。
OSとのやり取りはWebAPI(Gecko)側
に実装されています。
Gecko
アプリケーシ...
#fxos
本日のスコープ
Gaia
ユーザーインタフェース部
すべてhtml5,css,javascriptで書かれ
ている。
OSとのやり取りはWebAPI(Gecko)側
に実装されています。
Gecko
アプリケーションランタイム部
H...
#fxos
ソースコードはどこに?
mozilla-central
http://hg.mozilla.org/mozilla-central
Github
https://github.com/mozilla-b2g/gaia
https:/...
#fxos
よんでみよう
#fxos
Gaiaを読もう
#fxos
Gaiaを読もう
Github
https://github.com/mozilla-b2g/gaia
https://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を読もう
OpenGrok
reading.fxos.org/source/
#fxos
Gaiaを読もう(まとめ)
UIの実装を調べたいときに見る
WebAPIの使い方の参考になる
HTML / JavaScript / CSSベースで書いてある
最初に読むとき、オススメのディレクトリ
/apps
• firefoxO...
#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の実装がある
...
#fxos
まとめ / オススメ資料
• 簡単なまとめ
• コードリーディング入門ノウハウ
https://goo.gl/7Po36g
• Firefoxの基本(アプリケーション)
• つくろう!Firefox OS アプリ
http://ww...
#fxos
さいごに / イベント紹介
• FxOSコードリーディングミートアップ
• ひとりで読まず、みんなで読もう
https://firefox-os.doorkeeper.jp/
#fxos
さいごに / 個人的な一言
最初から全体から把握しようは読まない
モチベーションを維持する為に気になったところからつ
まみ始めるのがおすすめ。
例: 時計アプリの実装方法とか、気になるWebAPIとか
WoTでは最も先進的なプラット...
#fxos
酒巻瑞穂は自身のポテンシャルを最大限発揮するために常に挑戦を通してその分野への大志を抱く意
欲的な専門家である。 以前は物流系での開発、主にデータベース設計やバックエンドのフレーム
ワーク構築/運用に情熱をかけ、 如何に生産性を上げ...
Upcoming SlideShare
Loading in …5
×

きつねさんでもわかる Firefox OS コードリーディング入門

5,800 views

Published on

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

Published in: Software
  • Be the first to comment

きつねさんでもわかる Firefox OS コードリーディング入門

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

×