Your SlideShare is downloading. ×
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Firefox OS勉強会 2nd TypeScript+AngularJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Firefox OS勉強会 2nd TypeScript+AngularJS

2,134

Published on

Firefox OS勉強会 2nd http://atnd.org/events/40742 の発表資料。 …

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,134
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
11
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 実際にやってみたれなかった 無理やりやっつけたw れた
  • 36. 感想 • 通常のAngularJSの開発手順と全く同じ • 独自のAPIとか全然ないわー • Building Block、Twitter Boostrap並に わかりやすい
  • 37. 問題点 • offline対応 • Firefoxでhashbangで動作させるの どうやるの…(´・!・`) • 正しくインストールボタン出したい… • 標準イディオム的なのがわからない… • 標準アプリのコード読むの辛い…
  • 38. おわりに
  • 39. http://goo.gl/CglFP 夏のコミケ情報
  • 40. ↓わかめも書いたよ! 内容すら知らないよ!↑

×