Firefox OSでLINEは作れるか?関東Firefox OS勉強会 1st

2013年6月19日(水)

13年6月19日水曜日

自己紹介Twitter:@sys1yagiblog: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="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-first-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日水曜日