狠狠撸
Submit Search
Firefox osて?lineは作れるか
?
9 likes
?
6,848 views
Toshihiro Yagi
Follow
1 of 38
Download now
Downloaded 15 times
More Related Content
Firefox osて?lineは作れるか
1.
Firefox OSでLINEは作れるか? 関東Firefox OS勉強会
1st 2013年6月19日(水) 13年6月19日水曜日
2.
自己紹介 Twitter:@sys1yagi blog:http://visible-true.blogspot.jp/ 今年はjavascriptの年つーことでNode.jsお触り中。 Android本をまた書いてるよ(^q^) 著書Androidアプリ 13年6月19日水曜日
3.
Firefox OSでLINEは作れるか? 13年6月19日水曜日
4.
なぜLINEを作るのか? VS 13年6月19日水曜日
5.
なぜLINEを作るのか? パズドラも非常に面白い題 材だったが、殆どの処理が Canvasとjavascriptに終始 する事が予想される事から 見送り。 13年6月19日水曜日
6.
なぜLINEを作るのか? スマホのUI、画面遷移 チャット機能(通信、データ管理) VoIPでの通話 電話帳へのアクセス GPS(ふるふる機能) センサ(ふるふる機能) QRコードリーダー 課金(スタンプショップ) push通知 13年6月19日水曜日
7.
なぜLINEを作るのか? そのプラットフォームでLINEを実装する事が出来るのであれ ば、既存の大抵のアプリは実現可能という事になる。多分。 13年6月19日水曜日
8.
今回はここまで スマホのUI、画面遷移 チャット機能(通信、データ管理) VoIPでの通話 電話帳へのアクセス GPS(ふるふる機能) センサ(ふるふる機能) QRコードリーダー 課金(スタンプショップ) push通知 13年6月19日水曜日
9.
チャット機能 13年6月19日水曜日
10.
チャット機能で必要なもの チャット相手(識別可能なアカウント) チャットサーバ HTTP通信処理 13年6月19日水曜日
11.
チャット相手(アカウント) 自分のIDやプロフィールの管理 チャット時のチャット相手のIDやキャッシュなど アプリ内でデータを保存する仕組みが必要となる 13年6月19日水曜日
12.
localStorage key-value store これの他にsessionStorageがある。 sessionStorageはアプリを終了するとデータが 消える localStorageはデータを永続化する事が出来る 13年6月19日水曜日
13.
チャット相手(アカウント) localStorageを使えばOK。 model用にjsを分けた。 localStorageへアクセスす るモジュールdatabase.jsを 作成した。backbone- localstorage.jsを使っても いいかも 13年6月19日水曜日
14.
チャットサーバ Node.jsでサクッと。アカウントのマッチングだけ。 13年6月19日水曜日
15.
HTTP通信処理 ふつーにjQuery.ajaxとかでやったらいい んじゃないかなー 13年6月19日水曜日
16.
HTTP通信処理 が、ダメ $.ajax({ url: "oraora.html", }).success(function(data){ alert('success!!'); }).error(function(data){ alert('error!!!'); }); 13年6月19日水曜日
17.
HTTP通信処理 Firefox OSにはホスト型とパッケージ型 アプリがある ホスト型の場合は問題ないがパッケージ アプリではクロスドメインの制約があ り、外部URLへのアクセスが出来ない 13年6月19日水曜日
18.
HTTP通信処理 パッケージ型アプリは標準と特権と公認 でアプリのタイプが分かれる。 それぞれのタイプで出来る事が変わって くる。 13年6月19日水曜日
19.
HTTP通信処理 特権タイプのアプリであれば、クロスド メインの制約を無視する事が出来る。 manifest.webappに設定する 13年6月19日水曜日
20.
manifest.webappの設定 typeにprivilegedで特権アプ リとして動かす事が出来る。 公開する前にコードレビュー に相当する審査が必要とな る。 XHRを使う為に、 ”systemXHR”パーミッショ ンを設定する。 "type": "privileged", "permissions": { "systemXHR":
{ "description": "xhr" } } manifest.webappの一部 https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps 特権、公認アプリのdoc 13年6月19日水曜日
21.
XHRを使う 概ねこんな感じで使う。jQuery.ajaxは動かなかったが、中 をいじればいけるかも 参考:XMLHttpRequest の HTML
パース処理 https://developer.mozilla.org/ja/docs/HTML_in_XMLHttpRequest 13年6月19日水曜日
22.
大体こんな感じに デモ 13年6月19日水曜日
23.
チャットまとめ データ保存はlocalStorageでサクッと manifest.webappのtypeにprivileged、permission設定が必要 通信処理は基本的にXHR直で 13年6月19日水曜日
24.
VoIPでの通話 13年6月19日水曜日
25.
VoIPでの通話 VoIPって何? 通話するには何が必要? Firefox OSで実現できる? 13年6月19日水曜日
26.
VoIPって何? Voice Over Internet
Protocolの事。インター ネット越しに音声通話等をする事 SIPをつかってP2Pで接続する、RTPなどで音 声のやり取りをする SIPアカウントとかSIPプロバイダがある (VoIPにおける電話番号的なモノ) 13年6月19日水曜日
27.
通話するには何が必要? SIPスタック Peer 2 Peerでの接続 RTP等による音声ストリーム 13年6月19日水曜日
28.
Firefox OSで実現できる? というか、そもそも、 普通のブラウザで出来るのか? 13年6月19日水曜日
29.
WebRTC W3Cが提唱する APIの定義。プラ グインなしでブラ ウザ間で音声、ビ デオ通話などをす るプロジェクト 13年6月19日水曜日
30.
sipML5 WebRTCを用いた音声、ビデオ通話を実現する為の javascriptライブラリ。 http://sipml5.org/ 13年6月19日水曜日
31.
sipMLによる通話 13年6月19日水曜日
32.
sipMLが使えるか確認する <script type="text/javascript" src=/slideshow/firefox-osline/23190157/"SIPml-api.js"></script> <script> window.onload
= function(){ var $ = function(id){return document.getElementById(id);} var readyCallback = function(e){ $("result").innerHTML="WebRTC Ready!"; }; var errorCallback = function(e){ console.error('Failed to initialize the engine: ' + e.message); $("result").innerHTML= 'Failed to initialize the engine: ' + e.message; } SIPml.init(readyCallback, errorCallback); } </script> ライブラリを読み込んで以下のコードで確認出来る。 13年6月19日水曜日
33.
sipML on Firefoxブラウザ いけた 13年6月19日水曜日
34.
sipML on Firefox
OS だめだった (??!?`) 13年6月19日水曜日
35.
でも頑張れば出来るのかも permissionにVoIPの文言が https://hacks.mozilla.org/2013/04/webrtc-update-our-?rst-implementation-will-be-in-release-soon-welcome-to-the-party-but-please-watch-your-head/ https://developer.mozilla.org/ja/docs/Web/Apps/App_permissions 次期verでサポートするぜ! 13年6月19日水曜日
36.
VoIPまとめ sipML5というライブラリがある VoIP用パーミッションが用意されている Firefox OSではまだWeb RTCはサポートされていないが、次 期verで対応との事なのでいずれ出来る様になるはず 13年6月19日水曜日
37.
LINEは作れる!(はず) 13年6月19日水曜日
38.
ご静聴ありがとうございました。 to be continued... 13年6月19日水曜日
Download