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

Like this? Share it with your network

Share

Firefox OS勉強会 2nd TypeScript+AngularJS

  • 2,816 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,816
On Slideshare
2,018
From Embeds
798
Number of Embeds
4

Actions

Shares
Downloads
10
Comments
0
Likes
5

Embeds 798

http://unsolublesugar.com 753
https://twitter.com 39
http://localhost 5
http://s.deeeki.com 1

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. ↓わかめも書いたよ! 内容すら知らないよ!↑