狠狠撸

狠狠撸Share a Scribd company logo
Firefox OSでLINEは作れるか?
関東Firefox OS勉強会 1st
2013年6月19日(水)
13年6月19日水曜日
自己紹介
Twitter:@sys1yagi
blog:http://visible-true.blogspot.jp/
今年はjavascriptの年つーことでNode.jsお触り中。
Android本をまた書いてるよ(^q^)
著書Androidアプリ
13年6月19日水曜日
Firefox OSでLINEは作れるか?
13年6月19日水曜日
なぜLINEを作るのか?
VS
13年6月19日水曜日
なぜLINEを作るのか?
パズドラも非常に面白い題
材だったが、殆どの処理が
Canvasとjavascriptに終始
する事が予想される事から
見送り。
13年6月19日水曜日
なぜLINEを作るのか?
スマホのUI、画面遷移
チャット機能(通信、データ管理)
VoIPでの通話
電話帳へのアクセス
GPS(ふるふる機能)
センサ(ふるふる機能)
QRコードリーダー
課金(スタンプショップ)
push通知
13年6月19日水曜日
なぜLINEを作るのか?
そのプラットフォームでLINEを実装する事が出来るのであれ
ば、既存の大抵のアプリは実現可能という事になる。多分。
13年6月19日水曜日
今回はここまで
スマホのUI、画面遷移
チャット機能(通信、データ管理)
VoIPでの通話
電話帳へのアクセス
GPS(ふるふる機能)
センサ(ふるふる機能)
QRコードリーダー
課金(スタンプショップ)
push通知
13年6月19日水曜日
チャット機能
13年6月19日水曜日
チャット機能で必要なもの
チャット相手(識別可能なアカウント)
チャットサーバ
HTTP通信処理
13年6月19日水曜日
チャット相手(アカウント)
自分のIDやプロフィールの管理
チャット時のチャット相手のIDやキャッシュなど
アプリ内でデータを保存する仕組みが必要となる
13年6月19日水曜日
localStorage
key-value store
これの他にsessionStorageがある。
sessionStorageはアプリを終了するとデータが
消える
localStorageはデータを永続化する事が出来る
13年6月19日水曜日
チャット相手(アカウント)
localStorageを使えばOK。
model用にjsを分けた。
localStorageへアクセスす
るモジュールdatabase.jsを
作成した。backbone-
localstorage.jsを使っても
いいかも
13年6月19日水曜日
チャットサーバ
Node.jsでサクッと。アカウントのマッチングだけ。
13年6月19日水曜日
HTTP通信処理
ふつーにjQuery.ajaxとかでやったらいい
んじゃないかなー
13年6月19日水曜日
HTTP通信処理
が、ダメ
$.ajax({
url: "oraora.html",
}).success(function(data){
alert('success!!');
}).error(function(data){
alert('error!!!');
});
13年6月19日水曜日
HTTP通信処理
Firefox OSにはホスト型とパッケージ型
アプリがある
ホスト型の場合は問題ないがパッケージ
アプリではクロスドメインの制約があ
り、外部URLへのアクセスが出来ない
13年6月19日水曜日
HTTP通信処理
パッケージ型アプリは標準と特権と公認
でアプリのタイプが分かれる。
それぞれのタイプで出来る事が変わって
くる。
13年6月19日水曜日
HTTP通信処理
特権タイプのアプリであれば、クロスド
メインの制約を無視する事が出来る。
manifest.webappに設定する
13年6月19日水曜日
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日水曜日
XHRを使う
概ねこんな感じで使う。jQuery.ajaxは動かなかったが、中
をいじればいけるかも
参考:XMLHttpRequest の HTML パース処理
https://developer.mozilla.org/ja/docs/HTML_in_XMLHttpRequest
13年6月19日水曜日
大体こんな感じに
デモ
13年6月19日水曜日
チャットまとめ
データ保存はlocalStorageでサクッと
manifest.webappのtypeにprivileged、permission設定が必要
通信処理は基本的にXHR直で
13年6月19日水曜日
VoIPでの通話
13年6月19日水曜日
VoIPでの通話
VoIPって何?
通話するには何が必要?
Firefox OSで実現できる?
13年6月19日水曜日
VoIPって何?
Voice Over Internet Protocolの事。インター
ネット越しに音声通話等をする事
SIPをつかってP2Pで接続する、RTPなどで音
声のやり取りをする
SIPアカウントとかSIPプロバイダがある
(VoIPにおける電話番号的なモノ)
13年6月19日水曜日
通話するには何が必要?
SIPスタック
Peer 2 Peerでの接続
RTP等による音声ストリーム
13年6月19日水曜日
Firefox OSで実現できる?
というか、そもそも、
普通のブラウザで出来るのか?
13年6月19日水曜日
WebRTC
W3Cが提唱する
APIの定義。プラ
グインなしでブラ
ウザ間で音声、ビ
デオ通話などをす
るプロジェクト
13年6月19日水曜日
sipML5
WebRTCを用いた音声、ビデオ通話を実現する為の
javascriptライブラリ。
http://sipml5.org/
13年6月19日水曜日
sipMLによる通話
13年6月19日水曜日
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日水曜日
sipML on Firefoxブラウザ
いけた
13年6月19日水曜日
sipML on Firefox OS
だめだった
(??!?`)
13年6月19日水曜日
でも頑張れば出来るのかも
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日水曜日
VoIPまとめ
sipML5というライブラリがある
VoIP用パーミッションが用意されている
Firefox OSではまだWeb RTCはサポートされていないが、次
期verで対応との事なのでいずれ出来る様になるはず
13年6月19日水曜日
LINEは作れる!(はず)
13年6月19日水曜日
ご静聴ありがとうございました。
to be continued...
13年6月19日水曜日

More Related Content

Firefox osて?lineは作れるか