TypeScript+AngularJSで作るFirefox OSアプリ

@vvakame関東Firefox OS勉強会 2nd

goo.gl/j0PJo

TypeScript+AngularJSで作るFirefox OSアプリおっ俺の思ってたFirefox OSと違う！

前段階で時間かかりすぎた…

わかめ まさひろGAE

Android

TypeScript

AngularJS

@v vakame

俺「独自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.

両者の共通点は将来の規格を先取りしていることただ単に便利だけど、その規格が実用化されたら…

今からやればいきなり新分野の第一人者になれる！？

実際にやってみたれなかった

無理やりやっつけたｗ

れた

感想

• 通常のAngularJSの開発手順と全く同じ

• 独自のAPIとか全然ないわー

• Building Block、Twitter Boostrap並にわかりやすい

問題点• offline対応

• Firefoxでhashbangで動作させるのどうやるの…(´・!・`)

• 正しくインストールボタン出したい…

• 標準イディオム的なのがわからない…

• 標準アプリのコード読むの辛い…

おわりに

http://goo.gl/CglFP

夏のコミケ情報

↓わかめも書いたよ！

内容すら知らないよ！↑