1. Gaia
のソースコードに観るちょっと未来のWebApp開発
Firefox Developers Conference 2014 Kyoto
2014.4.19
Bathtimefish 村岡 正和

2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
HTML5-WEST.jp
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
@bathtimefish

3. 監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中！！

4. Firefox OSの
薄い本書きました。
http://goo.gl/mA8ebW
好評発売中！
開発に、「もえあがる」のはつきものだ
第一話 がいあハックス
（Gaia開発環境の構築とデバッグ）
著

5. Firefox OS
Gaia
Gecko
Gonk
UI
Render
Device

6. https://github.com/mozilla-b2g/gaia

7. GaiaをFirefoxで起動する
https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Hacking

8. $ git clone -b v1.4 https://github.com/mozilla-b2g/gaia
$ cd gaia
$ DEBUG=1 make
$ /Applications/FirefoxNightly.app/Contents/MacOS/
firefox -profile /work/gaia/profile-debug --no-remote
Firefox で Gaia をデバッグする

9. DEMO

10. http://goo.gl/mA8ebW
詳しくは、「狐物語」を読んでください
第一話 がいあハックス
（Gaia開発環境の構築とデバッグ）
起動からデバッグまで、
ぜんぶ書きました。

11. Gaia Appsコードは大いに
HTML5 WebApp開発の参考になる
さすがはJSのお膝元ですね :)

12. 中でもボクはSettingsがお気に入り。

13. いろいろおもしろい
コードあるけど、
LTなのでいっこだけ。

14. apps/settings/index.html
Wifi, 機内モードなどの各メニューの
UIが別々のhtmlファイルとして
部品化されている。

15. http://www.w3.org/TR/html-imports/

16. フラグ立てたChromeで動くｗ
Googleが書いてる仕様だから当たり前だけどね

17. FxOSは？

18. shared/js/html_imports.js
まだJSゴリゴリでしたｗｗｗ

19. いまはまだAPIの実装に先行して
WebAppが設計されている。
Gecko側でAPI実装が完了したら
JSも最適化されるはず。

20. https://bugzilla.mozilla.org/show_bug.cgi?id=877072
っていうかやってます。

21. ほかにもいろいろなテクニックが
垣間みえるGaia Appsのコード。
一歩先のHTML, CSS, JSを参考に
してWebApp開発に役立ててはど
うでしょうか？

22. happy

23. coding

24. :)

25. Thanks.