Gaia
のソースコードに観るちょっと未来のWebApp開発
Firefox Developers Conference 2014 Kyoto
2014.4.19
Bathtimefish 村岡 正和
HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
H...
監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中!!
Firefox OSの
薄い本書きました。
http://goo.gl/mA8ebW
好評発売中!
開発に、「もえあがる」のはつきものだ
第一話 がいあハックス
(Gaia開発環境の構築とデバッグ)
著
Firefox OS
Gaia
Gecko
Gonk
UI
Render
Device
https://github.com/mozilla-b2g/gaia
GaiaをFirefoxで起動する
https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Hacking
$ git clone -b v1.4 https://github.com/mozilla-b2g/gaia
$ cd gaia
$ DEBUG=1 make
$ /Applications/FirefoxNightly.app/Conten...
DEMO
http://goo.gl/mA8ebW
詳しくは、「狐物語」を読んでください
第一話 がいあハックス
(Gaia開発環境の構築とデバッグ)
起動からデバッグまで、
ぜんぶ書きました。
Gaia Appsコードは大いに
HTML5 WebApp開発の参考になる
さすがはJSのお膝元ですね :)
中でもボクはSettingsがお気に入り。
いろいろおもしろい
コードあるけど、
LTなのでいっこだけ。
apps/settings/index.html
Wifi, 機内モードなどの各メニューの
UIが別々のhtmlファイルとして
部品化されている。
http://www.w3.org/TR/html-imports/
フラグ立てたChromeで動くw
Googleが書いてる仕様だから当たり前だけどね
FxOSは?
shared/js/html_imports.js
まだJSゴリゴリでしたwww
いまはまだAPIの実装に先行して
WebAppが設計されている。
Gecko側でAPI実装が完了したら
JSも最適化されるはず。
https://bugzilla.mozilla.org/show_bug.cgi?id=877072
っていうかやってます。
ほかにもいろいろなテクニックが
垣間みえるGaia Appsのコード。
一歩先のHTML, CSS, JSを参考に
してWebApp開発に役立ててはど
うでしょうか?
happy
Gaiaのソースコードに見るちょっと未来のweb app開発
Upcoming SlideShare
Loading in …5
×

Gaiaのソースコードに見るちょっと未来のweb app開発

2,287 views
2,203 views

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,287
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
2
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Gaiaのソースコードに見るちょっと未来のweb app開発

  1. 1. Gaia のソースコードに観るちょっと未来のWebApp開発 Firefox Developers Conference 2014 Kyoto 2014.4.19 Bathtimefish 村岡 正和
  2. 2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など むらおか まさかず 村岡正和 HTML5-WEST.jp Webアプリケーション開発 IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング @bathtimefish
  3. 3. 監修しました。 実例ごとの実装例がたくさん書いてあ ります。ウェブサイト制作やCMSの運 用時に便利です。 好評販売中!!
  4. 4. Firefox OSの 薄い本書きました。 http://goo.gl/mA8ebW 好評発売中! 開発に、「もえあがる」のはつきものだ 第一話 がいあハックス (Gaia開発環境の構築とデバッグ) 著
  5. 5. Firefox OS Gaia Gecko Gonk UI Render Device
  6. 6. https://github.com/mozilla-b2g/gaia
  7. 7. GaiaをFirefoxで起動する https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Hacking
  8. 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. 9. DEMO
  10. 10. http://goo.gl/mA8ebW 詳しくは、「狐物語」を読んでください 第一話 がいあハックス (Gaia開発環境の構築とデバッグ) 起動からデバッグまで、 ぜんぶ書きました。
  11. 11. Gaia Appsコードは大いに HTML5 WebApp開発の参考になる さすがはJSのお膝元ですね :)
  12. 12. 中でもボクはSettingsがお気に入り。
  13. 13. いろいろおもしろい コードあるけど、 LTなのでいっこだけ。
  14. 14. apps/settings/index.html Wifi, 機内モードなどの各メニューの UIが別々のhtmlファイルとして 部品化されている。
  15. 15. http://www.w3.org/TR/html-imports/
  16. 16. フラグ立てたChromeで動くw Googleが書いてる仕様だから当たり前だけどね
  17. 17. FxOSは?
  18. 18. shared/js/html_imports.js まだJSゴリゴリでしたwww
  19. 19. いまはまだAPIの実装に先行して WebAppが設計されている。 Gecko側でAPI実装が完了したら JSも最適化されるはず。
  20. 20. https://bugzilla.mozilla.org/show_bug.cgi?id=877072 っていうかやってます。
  21. 21. ほかにもいろいろなテクニックが 垣間みえるGaia Appsのコード。 一歩先のHTML, CSS, JSを参考に してWebApp開発に役立ててはど うでしょうか?
  22. 22. happy

×