Firefox osでlineは作れるか

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アプリ

Firefox OSでLINEは作れるか?

なぜLINEを作るのか?
VS

パズドラも非常に面白い題
材だったが、殆どの処理が
Canvasとjavascriptに終始
する事が予想される事から
見送り。

スマホのUI、画面遷移
チャット機能(通信、データ管理)
VoIPでの通話
電話帳へのアクセス
GPS(ふるふる機能)
センサ(ふるふる機能)
QRコードリーダー
課金(スタンプショップ)
push通知

そのプラットフォームでLINEを実装する事が出来るのであれ
ば、既存の大抵のアプリは実現可能という事になる。多分。

今回はここまで
スマホのUI、画面遷移
チャット機能(通信、データ管理)
VoIPでの通話
電話帳へのアクセス
GPS(ふるふる機能)
センサ(ふるふる機能)
QRコードリーダー
課金(スタンプショップ)
push通知

チャット機能

チャット機能で必要なもの
チャット相手(識別可能なアカウント)
チャットサーバ
HTTP通信処理

チャット相手(アカウント)
自分のIDやプロフィールの管理
チャット時のチャット相手のIDやキャッシュなど
アプリ内でデータを保存する仕組みが必要となる

localStorage
key-value store
これの他にsessionStorageがある。
sessionStorageはアプリを終了するとデータが
消える
localStorageはデータを永続化する事が出来る

チャット相手(アカウント)
localStorageを使えばOK。
model用にjsを分けた。
localStorageへアクセスす
るモジュールdatabase.jsを
作成した。backbone-
localstorage.jsを使っても
いいかも

チャットサーバ
Node.jsでサクッと。アカウントのマッチングだけ。

HTTP通信処理
ふつーにjQuery.ajaxとかでやったらいい
んじゃないかなー

HTTP通信処理
が、ダメ
$.ajax({
url: "oraora.html",
}).success(function(data){
alert('success!!');
}).error(function(data){
alert('error!!!');
});

HTTP通信処理
Firefox OSにはホスト型とパッケージ型
アプリがある
ホスト型の場合は問題ないがパッケージ
アプリではクロスドメインの制約があ
り、外部URLへのアクセスが出来ない

HTTP通信処理
パッケージ型アプリは標準と特権と公認
でアプリのタイプが分かれる。
それぞれのタイプで出来る事が変わって
くる。

HTTP通信処理
特権タイプのアプリであれば、クロスド
メインの制約を無視する事が出来る。
manifest.webappに設定する

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

XHRを使う
概ねこんな感じで使う。jQuery.ajaxは動かなかったが、中
をいじればいけるかも
参考:XMLHttpRequest の HTML パース処理
https://developer.mozilla.org/ja/docs/HTML_in_XMLHttpRequest

大体こんな感じに
デモ

チャットまとめ
データ保存はlocalStorageでサクッと
manifest.webappのtypeにprivileged、permission設定が必要
通信処理は基本的にXHR直で

VoIPでの通話

VoIPでの通話
VoIPって何?
通話するには何が必要?
Firefox OSで実現できる?

VoIPって何?
Voice Over Internet Protocolの事。インター
ネット越しに音声通話等をする事
SIPをつかってP2Pで接続する、RTPなどで音
声のやり取りをする
SIPアカウントとかSIPプロバイダがある
(VoIPにおける電話番号的なモノ)

通話するには何が必要?
SIPスタック
Peer 2 Peerでの接続
RTP等による音声ストリーム

Firefox OSで実現できる?
というか、そもそも、
普通のブラウザで出来るのか?

WebRTC
W3Cが提唱する
APIの定義。プラ
グインなしでブラ
ウザ間で音声、ビ
デオ通話などをす
るプロジェクト

sipML5
WebRTCを用いた音声、ビデオ通話を実現する為の
javascriptライブラリ。
http://sipml5.org/

sipMLによる通話

sipMLが使えるか確認する
<script type="text/javascript" src="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>
ライブラリを読み込んで以下のコードで確認出来る。

sipML on Firefoxブラウザ
いけた

sipML on Firefox OS
だめだった
(´・!・`)

でも頑張れば出来るのかも
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でサポートするぜ！

VoIPまとめ
sipML5というライブラリがある
VoIP用パーミッションが用意されている
Firefox OSではまだWeb RTCはサポートされていないが、次
期verで対応との事なのでいずれ出来る様になるはず

LINEは作れる！(はず)

ご静聴ありがとうございました。
to be continued...

Firefox osでlineは作れるか

More Related Content

More from Toshihiro Yagi