TypeScript+AngularJSで
作るFirefox OSアプリ
@vvakame
関東Firefox OS勉強会 2nd
goo.gl/j0PJo
TypeScript+AngularJSで
作るFirefox OSアプリ
おっ俺の思ってた
Firefox OSと違う!
前段階で時間かかりすぎた…
わかめ まさひろ
GAE
Android
TypeScript
AngularJS
@vvakame
俺「独自FWなんでしょ?」
そんなことはなかった
ていうか完全にタダの
Webアプリだった
俺「専用マークアップなんでしょ?」
そんなことはなかった
Building Blockは
使った方がよさげ
俺「ドキュメントないんでしょ?」
日本語まである
しかしHyperLinkが残念で り着きたいものに
全然たどり着けない(無いわけではない)
俺「開発大変だったりしない?」
シミュレータが高速!
Chromeでもできる!
ひどい!><;
俺「端末出まわってない」
Firefoxアプリになるよ
Remote Install欲しい
Firefox OS(KEON)
Android(GalaxyNexus)
Android(Nexus7)
Mac OS X(PC)
俺「既存Webアプリ移植は大変?」
とりあえず
そのままでよくね?
manifestすこし書く
JavaScriptすこし書く
ちょっと対応を入れたほう
が良くはなるぽい
俺「Firefox OSってめちゃ簡単!?」
そんなことはない
orz
この辛み for you
ぽよい
• アプリインストールボタン出したい
• インストール済なら当然出さない
• navigator.mozApps.checkInstalled(url) 
• navigator.mozApps.getSelf() 
• 両方挙動が安定...
未インストール
ブラウザ内
インストール済
ブラウザ内
インストール済
アプリ内
期待通りの動作をしない→×
期待通りの動作しなさすぎでしょ!
もっと素直に動いてください頼む!
○ getSelf
× checkInstalled
○ getS...
襲い来る のエラー
アプリを起動しようと
すると死ぬ
開発サーバのせい!
• python -m SimpleHTTPServer 8989
• →こいつが犯人だ!!!!
• npm install http-server &&
./node_modules/http-server/bin/htt...
pushStateェ…
誰か解決策知りませんか
• appcacheと相性が悪い…
• サーバの補助がないと404になりやすい
• /book/2001 にアクセス→offline…
• もちろん 404 そして復帰できない
• アプリとしてはめ...
戻る方法ないお…
標準Webとの互換性…
• ブラウザだとBackは必ずある
• Firefox OSとかFirefoxアプリはない
• 辛い…(´・!・`)
• Androidのようにハードキー欲しい…
• アプリがサポートしてない場合kil...
TypeScript+AngularJSで
作るFirefox OSアプリ
@vvakame
関東Firefox OS勉強会 2nd
TypeScriptとは
JavaScriptなんてクソだ!
• JavaScriptは確かに良い言語だよ
• しかし腐ってる部分もたいへん多い
• packageとかnamespaceとかない
• 綺麗なコード書ける=上級者
• prototypeのOOP??ナニソレ...
TypeScriptは神
• 可読性の高いJavaScriptに変換して実行
• ECMAScript6を意識
• 言語仕様的にはJSのSuperSet!
• moduleある!classもある!継承もある!
• 型もあるよ!
• 既存の資産も...
結論:みんなやろう
詳細 goo.gl/eTLdo
型定義ファイル
 goo.gl/4HLSo 
pull req出した!
AngularJSとは
jQueryなんかいらない
• JSのフレームワーク 重量級の選手
• MVCをキッチリ分けられる
• 双方向データバインディング
• 次世代を担うCOOLな仕様
• WebComponent (っぽい)
• Object.observe (的...
結論:みんなやろう
詳細 goo.gl/yjiqT
TypeScript+AngularJS
チョー最高! Q.E.D.
両者の共通点は将来の規格を先取りしていること
ただ単に便利だけど、その規格が実用化されたら…
今からやればいきなり新分野の第一人者になれる!?
実際にやってみたれなかった
無理やりやっつけたw
れた
感想
• 通常のAngularJSの開発手順と全く同じ
• 独自のAPIとか全然ないわー
• Building Block、Twitter Boostrap並に
わかりやすい
問題点
• offline対応
• Firefoxでhashbangで動作させるの
どうやるの…(´・!・`)
• 正しくインストールボタン出したい…
• 標準イディオム的なのがわからない…
• 標準アプリのコード読むの辛い…
おわりに
http://goo.gl/CglFP
夏のコミケ情報
↓わかめも書いたよ!
内容すら知らないよ!↑
Upcoming SlideShare
Loading in...5
×

Firefox OS勉強会 2nd TypeScript+AngularJS

2,234

Published on

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

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

No Downloads
Views
Total Views
2,234
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
12
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Firefox OS勉強会 2nd TypeScript+AngularJS

  1. 1. TypeScript+AngularJSで 作るFirefox OSアプリ @vvakame 関東Firefox OS勉強会 2nd goo.gl/j0PJo
  2. 2. TypeScript+AngularJSで 作るFirefox OSアプリ おっ俺の思ってた Firefox OSと違う! 前段階で時間かかりすぎた…
  3. 3. わかめ まさひろ GAE Android TypeScript AngularJS @vvakame
  4. 4. 俺「独自FWなんでしょ?」
  5. 5. そんなことはなかった ていうか完全にタダの Webアプリだった
  6. 6. 俺「専用マークアップなんでしょ?」
  7. 7. そんなことはなかった Building Blockは 使った方がよさげ
  8. 8. 俺「ドキュメントないんでしょ?」
  9. 9. 日本語まである しかしHyperLinkが残念で り着きたいものに 全然たどり着けない(無いわけではない)
  10. 10. 俺「開発大変だったりしない?」
  11. 11. シミュレータが高速! Chromeでもできる! ひどい!><;
  12. 12. 俺「端末出まわってない」
  13. 13. Firefoxアプリになるよ Remote Install欲しい
  14. 14. Firefox OS(KEON) Android(GalaxyNexus) Android(Nexus7) Mac OS X(PC)
  15. 15. 俺「既存Webアプリ移植は大変?」
  16. 16. とりあえず そのままでよくね? manifestすこし書く JavaScriptすこし書く ちょっと対応を入れたほう が良くはなるぽい
  17. 17. 俺「Firefox OSってめちゃ簡単!?」
  18. 18. そんなことはない orz この辛み for you
  19. 19. ぽよい • アプリインストールボタン出したい • インストール済なら当然出さない • navigator.mozApps.checkInstalled(url)  • navigator.mozApps.getSelf()  • 両方挙動が安定しない… やりたいことは単純な はずなんだけどなぁ
  20. 20. 未インストール ブラウザ内 インストール済 ブラウザ内 インストール済 アプリ内 期待通りの動作をしない→× 期待通りの動作しなさすぎでしょ! もっと素直に動いてください頼む! ○ getSelf × checkInstalled ○ getSelf ○ checkInstalled × getSelf × checkInstalled Desktop版はまた 別の結果に…
  21. 21. 襲い来る のエラー アプリを起動しようと すると死ぬ
  22. 22. 開発サーバのせい! • python -m SimpleHTTPServer 8989 • →こいつが犯人だ!!!! • npm install http-server && ./node_modules/http-server/bin/http-server • →こいつは大丈夫… 気がつくのに6時間 くらいかかった
  23. 23. pushStateェ… 誰か解決策知りませんか • appcacheと相性が悪い… • サーバの補助がないと404になりやすい • /book/2001 にアクセス→offline… • もちろん 404 そして復帰できない • アプリとしてはめちゃ辛い • hashbang復権の時!?
  24. 24. 戻る方法ないお… 標準Webとの互換性… • ブラウザだとBackは必ずある • Firefox OSとかFirefoxアプリはない • 辛い…(´・!・`) • Androidのようにハードキー欲しい… • アプリがサポートしてない場合killって 立ち上げ直し… わかるかっヽ(`"´)ノ
  25. 25. TypeScript+AngularJSで 作るFirefox OSアプリ @vvakame 関東Firefox OS勉強会 2nd
  26. 26. TypeScriptとは
  27. 27. JavaScriptなんてクソだ! • JavaScriptは確かに良い言語だよ • しかし腐ってる部分もたいへん多い • packageとかnamespaceとかない • 綺麗なコード書ける=上級者 • prototypeのOOP??ナニソレ • 型( ゚#゚)クレ 動的型付とかやだよ! • なのにブラウザ上で動くのはJSだけ
  28. 28. TypeScriptは神 • 可読性の高いJavaScriptに変換して実行 • ECMAScript6を意識 • 言語仕様的にはJSのSuperSet! • moduleある!classもある!継承もある! • 型もあるよ! • 既存の資産も捨てなくて済むよ!
  29. 29. 結論:みんなやろう 詳細 goo.gl/eTLdo 型定義ファイル  goo.gl/4HLSo  pull req出した!
  30. 30. AngularJSとは
  31. 31. jQueryなんかいらない • JSのフレームワーク 重量級の選手 • MVCをキッチリ分けられる • 双方向データバインディング • 次世代を担うCOOLな仕様 • WebComponent (っぽい) • Object.observe (的な)
  32. 32. 結論:みんなやろう 詳細 goo.gl/yjiqT
  33. 33. TypeScript+AngularJS
  34. 34. チョー最高! Q.E.D. 両者の共通点は将来の規格を先取りしていること ただ単に便利だけど、その規格が実用化されたら… 今からやればいきなり新分野の第一人者になれる!?
  35. 35. 実際にやってみたれなかった 無理やりやっつけたw れた
  36. 36. 感想 • 通常のAngularJSの開発手順と全く同じ • 独自のAPIとか全然ないわー • Building Block、Twitter Boostrap並に わかりやすい
  37. 37. 問題点 • offline対応 • Firefoxでhashbangで動作させるの どうやるの…(´・!・`) • 正しくインストールボタン出したい… • 標準イディオム的なのがわからない… • 標準アプリのコード読むの辛い…
  38. 38. おわりに
  39. 39. http://goo.gl/CglFP 夏のコミケ情報
  40. 40. ↓わかめも書いたよ! 内容すら知らないよ!↑
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×