Embed Size (px)
DESCRIPTION
Citation preview
Gaiaのソースコードに観るちょっと未来のWebApp開発
Firefox Developers Conference 2014 Kyoto2014.4.19
Bathtimefish 村岡 正和
HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバーGDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
HTML5-WEST.jp
Webアプリケーション開発 IT業務システム設計/開発Webサービス導入/事業戦略コンサルティング
@bathtimefish
監修しました。
実例ごとの実装例がたくさん書いてあります。ウェブサイト制作や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/Contents/MacOS/firefox -profile /work/gaia/profile-debug --no-remote
Firefox で Gaia をデバッグする
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で動くｗGoogleが書いてる仕様だから当たり前だけどね
FxOSは？
shared/js/html_imports.js
まだJSゴリゴリでしたｗｗｗ
いまはまだAPIの実装に先行してWebAppが設計されている。
Gecko側でAPI実装が完了したらJSも最適化されるはず。
https://bugzilla.mozilla.org/show_bug.cgi?id=877072
っていうかやってます。
ほかにもいろいろなテクニックが垣間みえるGaia Appsのコード。
一歩先のHTML, CSS, JSを参考にしてWebApp開発に役立ててはどうでしょうか？
happy����������� ������������������ coding����������� ������������������ :)
Thanks.
