• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Firefox OS勉強会 2nd TypeScript+AngularJS
 

Firefox OS勉強会 2nd TypeScript+AngularJS

on

  • 2,560 views

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

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

Statistics

Views

Total Views
2,560
Views on SlideShare
1,771
Embed Views
789

Actions

Likes
5
Downloads
10
Comments
0

4 Embeds 789

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Firefox OS勉強会 2nd TypeScript+AngularJS Firefox OS勉強会 2nd TypeScript+AngularJS Presentation Transcript

    • 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 ○ getSelf ○ checkInstalled × getSelf × checkInstalled Desktop版はまた 別の結果に…
    • 襲い来る のエラー アプリを起動しようと すると死ぬ
    • 開発サーバのせい! • python -m SimpleHTTPServer 8989 • →こいつが犯人だ!!!! • npm install http-server && ./node_modules/http-server/bin/http-server • →こいつは大丈夫… 気がつくのに6時間 くらいかかった
    • pushStateェ… 誰か解決策知りませんか • appcacheと相性が悪い… • サーバの補助がないと404になりやすい • /book/2001 にアクセス→offline… • もちろん 404 そして復帰できない • アプリとしてはめちゃ辛い • hashbang復権の時!?
    • 戻る方法ないお… 標準Webとの互換性… • ブラウザだとBackは必ずある • Firefox OSとかFirefoxアプリはない • 辛い…(´・!・`) • Androidのようにハードキー欲しい… • アプリがサポートしてない場合killって 立ち上げ直し… わかるかっヽ(`"´)ノ
    • TypeScript+AngularJSで 作るFirefox OSアプリ @vvakame 関東Firefox OS勉強会 2nd
    • TypeScriptとは
    • JavaScriptなんてクソだ! • JavaScriptは確かに良い言語だよ • しかし腐ってる部分もたいへん多い • packageとかnamespaceとかない • 綺麗なコード書ける=上級者 • prototypeのOOP??ナニソレ • 型( ゚#゚)クレ 動的型付とかやだよ! • なのにブラウザ上で動くのはJSだけ
    • 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 夏のコミケ情報
    • ↓わかめも書いたよ! 内容すら知らないよ!↑