Firefox OS勉強会 2nd http://atnd.org/events/40742 の発表資料。 TypeScriptとAngularJSを使ってFirefox OSアプリを作成する。

1. TypeScript+AngularJSで
作るFirefox OSアプリ
@vvakame
関東Firefox OS勉強会 2nd
goo.gl/j0PJo

2. TypeScript+AngularJSで
作るFirefox OSアプリ
おっ俺の思ってた
Firefox OSと違う！
前段階で時間かかりすぎた…

3. わかめ まさひろ
GAE
Android
TypeScript
AngularJS
@vvakame

4. 俺「独自FWなんでしょ？」

5. そんなことはなかった
ていうか完全にタダの
Webアプリだった

6. 俺「専用マークアップなんでしょ？」

7. そんなことはなかった
Building Blockは
使った方がよさげ

8. 俺「ドキュメントないんでしょ？」

9. 日本語まである
しかしHyperLinkが残念で り着きたいものに
全然たどり着けない(無いわけではない)

10. 俺「開発大変だったりしない？」

11. シミュレータが高速！
Chromeでもできる！
ひどい！＞＜;

12. 俺「端末出まわってない」

13. Firefoxアプリになるよ
Remote Install欲しい

14. Firefox OS(KEON)
Android(GalaxyNexus)
Android(Nexus7)
Mac OS X(PC)

15. 俺「既存Webアプリ移植は大変？」

16. とりあえず
そのままでよくね？
manifestすこし書く
JavaScriptすこし書く
ちょっと対応を入れたほう
が良くはなるぽい

17. 俺「Firefox OSってめちゃ簡単！？」

18. そんなことはない
orz
この辛み for you

19. ぽよい
• アプリインストールボタン出したい
• インストール済なら当然出さない
• navigator.mozApps.checkInstalled(url)
• navigator.mozApps.getSelf()
• 両方挙動が安定しない…
やりたいことは単純な
はずなんだけどなぁ

20. 未インストール
ブラウザ内
インストール済
ブラウザ内
インストール済
アプリ内
期待通りの動作をしない→×
期待通りの動作しなさすぎでしょ！
もっと素直に動いてください頼む！
○ getSelf
× checkInstalled
○ getSelf
○ checkInstalled
× getSelf
× checkInstalled
Desktop版はまた
別の結果に…

21. 襲い来る のエラー
アプリを起動しようと
すると死ぬ

22. 開発サーバのせい！
• python -m SimpleHTTPServer 8989
• →こいつが犯人だ！！！！
• npm install http-server &&
./node_modules/http-server/bin/http-server
• →こいつは大丈夫…
気がつくのに6時間
くらいかかった

23. pushStateェ…
誰か解決策知りませんか
• appcacheと相性が悪い…
• サーバの補助がないと404になりやすい
• /book/2001 にアクセス→offline…
• もちろん 404 そして復帰できない
• アプリとしてはめちゃ辛い
• hashbang復権の時！？

24. 戻る方法ないお…
標準Webとの互換性…
• ブラウザだとBackは必ずある
• Firefox OSとかFirefoxアプリはない
• 辛い…(´・!・`)
• Androidのようにハードキー欲しい…
• アプリがサポートしてない場合killって
立ち上げ直し… わかるかっヽ(`"´)ﾉ

25. TypeScript+AngularJSで
作るFirefox OSアプリ
@vvakame
関東Firefox OS勉強会 2nd

26. TypeScriptとは

27. JavaScriptなんてクソだ！
• JavaScriptは確かに良い言語だよ
• しかし腐ってる部分もたいへん多い
• packageとかnamespaceとかない
• 綺麗なコード書ける＝上級者
• prototypeのOOP？？ナニソレ
• 型( ﾟ#ﾟ)ｸﾚ 動的型付とかやだよ！
• なのにブラウザ上で動くのはJSだけ

28. TypeScriptは神
• 可読性の高いJavaScriptに変換して実行
• ECMAScript6を意識
• 言語仕様的にはJSのSuperSet！
• moduleある！classもある！継承もある！
• 型もあるよ！
• 既存の資産も捨てなくて済むよ！

29. 結論：みんなやろう
詳細 goo.gl/eTLdo
型定義ファイル
goo.gl/4HLSo
pull req出した！

30. AngularJSとは

31. jQueryなんかいらない
• JSのフレームワーク 重量級の選手
• MVCをキッチリ分けられる
• 双方向データバインディング
• 次世代を担うCOOLな仕様
• WebComponent (っぽい)
• Object.observe (的な)

32. 結論：みんなやろう
詳細 goo.gl/yjiqT

33. TypeScript+AngularJS

34. チョー最高！ Q.E.D.
両者の共通点は将来の規格を先取りしていること
ただ単に便利だけど、その規格が実用化されたら…
今からやればいきなり新分野の第一人者になれる！？

35. 実際にやってみたれなかった
無理やりやっつけたｗ
れた

36. 感想
• 通常のAngularJSの開発手順と全く同じ
• 独自のAPIとか全然ないわー
• Building Block、Twitter Boostrap並に
わかりやすい

37. 問題点
• offline対応
• Firefoxでhashbangで動作させるの
どうやるの…(´・!・`)
• 正しくインストールボタン出したい…
• 標準イディオム的なのがわからない…
• 標準アプリのコード読むの辛い…

38. おわりに

39. http://goo.gl/CglFP
夏のコミケ情報

40. ↓わかめも書いたよ！
内容すら知らないよ！↑