SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
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="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日水曜日

Mais conteúdo relacionado

Semelhante a Firefox osでlineは作れるか

Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説光吉 浜谷
 
NDS31 はじめてChrome App
NDS31 はじめてChrome AppNDS31 はじめてChrome App
NDS31 はじめてChrome Appcivic Sasaki
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイトrie05
 
Trend and use case 20120607a with Ar (Augmented reality) -Ar(拡張現実) の動向と活用事例
Trend and use case 20120607a with Ar (Augmented reality) -Ar(拡張現実) の動向と活用事例Trend and use case 20120607a with Ar (Augmented reality) -Ar(拡張現実) の動向と活用事例
Trend and use case 20120607a with Ar (Augmented reality) -Ar(拡張現実) の動向と活用事例Etsuji Kameyama
 
Effective SQLite For Android
Effective SQLite For AndroidEffective SQLite For Android
Effective SQLite For AndroidShinobu Okano
 
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介Etsuji Kameyama
 
Windows PhoneについてGdgd話すよ
Windows PhoneについてGdgd話すよWindows PhoneについてGdgd話すよ
Windows PhoneについてGdgd話すよKenji Wada
 
Amazon Pollyに何かしゃべってもらおうか(仮)
Amazon Pollyに何かしゃべってもらおうか(仮)Amazon Pollyに何かしゃべってもらおうか(仮)
Amazon Pollyに何かしゃべってもらおうか(仮)Koichiro Oki
 
3行説明「ZakurIT」
3行説明「ZakurIT」3行説明「ZakurIT」
3行説明「ZakurIT」R Tamura
 

Semelhante a Firefox osでlineは作れるか (10)

Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説
 
NDS31 はじめてChrome App
NDS31 はじめてChrome AppNDS31 はじめてChrome App
NDS31 はじめてChrome App
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
 
Trend and use case 20120607a with Ar (Augmented reality) -Ar(拡張現実) の動向と活用事例
Trend and use case 20120607a with Ar (Augmented reality) -Ar(拡張現実) の動向と活用事例Trend and use case 20120607a with Ar (Augmented reality) -Ar(拡張現実) の動向と活用事例
Trend and use case 20120607a with Ar (Augmented reality) -Ar(拡張現実) の動向と活用事例
 
Effective SQLite For Android
Effective SQLite For AndroidEffective SQLite For Android
Effective SQLite For Android
 
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介
 
WPFことはじめ
WPFことはじめWPFことはじめ
WPFことはじめ
 
Windows PhoneについてGdgd話すよ
Windows PhoneについてGdgd話すよWindows PhoneについてGdgd話すよ
Windows PhoneについてGdgd話すよ
 
Amazon Pollyに何かしゃべってもらおうか(仮)
Amazon Pollyに何かしゃべってもらおうか(仮)Amazon Pollyに何かしゃべってもらおうか(仮)
Amazon Pollyに何かしゃべってもらおうか(仮)
 
3行説明「ZakurIT」
3行説明「ZakurIT」3行説明「ZakurIT」
3行説明「ZakurIT」
 

Mais de Toshihiro Yagi

Potato04 The end of confusion of callback between activity and fragment.
Potato04 The end of confusion of callback between activity and fragment.Potato04 The end of confusion of callback between activity and fragment.
Potato04 The end of confusion of callback between activity and fragment.Toshihiro Yagi
 
Potato03 KotlinでAndroidアプリ開発(後編)
Potato03 KotlinでAndroidアプリ開発(後編)Potato03 KotlinでAndroidアプリ開発(後編)
Potato03 KotlinでAndroidアプリ開発(後編)Toshihiro Yagi
 
Potato02 ViewSticker作りました
Potato02 ViewSticker作りましたPotato02 ViewSticker作りました
Potato02 ViewSticker作りましたToshihiro Yagi
 
Potato01 No more 手書き ViewHolder
Potato01 No more 手書き ViewHolderPotato01 No more 手書き ViewHolder
Potato01 No more 手書き ViewHolderToshihiro Yagi
 
Re viewのリアルタイムプレギュー機能をつくってみたよ
Re viewのリアルタイムプレギュー機能をつくってみたよRe viewのリアルタイムプレギュー機能をつくってみたよ
Re viewのリアルタイムプレギュー機能をつくってみたよToshihiro Yagi
 

Mais de Toshihiro Yagi (8)

Potato04 The end of confusion of callback between activity and fragment.
Potato04 The end of confusion of callback between activity and fragment.Potato04 The end of confusion of callback between activity and fragment.
Potato04 The end of confusion of callback between activity and fragment.
 
Potato03 KotlinでAndroidアプリ開発(後編)
Potato03 KotlinでAndroidアプリ開発(後編)Potato03 KotlinでAndroidアプリ開発(後編)
Potato03 KotlinでAndroidアプリ開発(後編)
 
Potato02 ViewSticker作りました
Potato02 ViewSticker作りましたPotato02 ViewSticker作りました
Potato02 ViewSticker作りました
 
Potato01 No more 手書き ViewHolder
Potato01 No more 手書き ViewHolderPotato01 No more 手書き ViewHolder
Potato01 No more 手書き ViewHolder
 
Re viewのリアルタイムプレギュー機能をつくってみたよ
Re viewのリアルタイムプレギュー機能をつくってみたよRe viewのリアルタイムプレギュー機能をつくってみたよ
Re viewのリアルタイムプレギュー機能をつくってみたよ
 
Flight入門
Flight入門Flight入門
Flight入門
 
Abc2011 yagi
Abc2011 yagiAbc2011 yagi
Abc2011 yagi
 
Abc2011 2 yagi
Abc2011 2 yagiAbc2011 2 yagi
Abc2011 2 yagi
 

Firefox osでlineは作れるか