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.
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,684 views

Published on

Published in: Technology
  • Login to see the comments

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

×