Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Firefox OSでLINEは作れるか?関東Firefox OS勉強会 1st2013年6月19日(水)13年6月19日水曜日
自己紹介Twitter:@sys1yagiblog:http://visible-true.blogspot.jp/今年はjavascriptの年つーことでNode.jsお触り中。Android本をまた書いてるよ(^q^)著書Androidアプ...
Firefox OSでLINEは作れるか?13年6月19日水曜日
なぜLINEを作るのか?VS13年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日水曜日
localStoragekey-value storeこれの他にsessionStorageがある。sessionStorageはアプリを終了するとデータが消えるlocalStorageはデータを永続化する事が出来る13年6月19日水曜日
チャット相手(アカウント)localStorageを使えばOK。model用にjsを分けた。localStorageへアクセスするモジュールdatabase.jsを作成した。backbone-localstorage.jsを使ってもいいかも13...
チャットサーバ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!!!);...
HTTP通信処理Firefox OSにはホスト型とパッケージ型アプリがあるホスト型の場合は問題ないがパッケージアプリではクロスドメインの制約があり、外部URLへのアクセスが出来ない13年6月19日水曜日
HTTP通信処理パッケージ型アプリは標準と特権と公認でアプリのタイプが分かれる。それぞれのタイプで出来る事が変わってくる。13年6月19日水曜日
HTTP通信処理特権タイプのアプリであれば、クロスドメインの制約を無視する事が出来る。manifest.webappに設定する13年6月19日水曜日
manifest.webappの設定typeにprivilegedで特権アプリとして動かす事が出来る。公開する前にコードレビューに相当する審査が必要となる。XHRを使う為に、”systemXHR”パーミッションを設定する。"type": "pr...
XHRを使う概ねこんな感じで使う。jQuery.ajaxは動かなかったが、中をいじればいけるかも参考:XMLHttpRequest の HTML パース処理https://developer.mozilla.org/ja/docs/HTML_i...
大体こんな感じにデモ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における電...
通話するには何が必要?SIPスタックPeer 2 Peerでの接続RTP等による音声ストリーム13年6月19日水曜日
Firefox OSで実現できる?というか、そもそも、普通のブラウザで出来るのか?13年6月19日水曜日
WebRTCW3Cが提唱するAPIの定義。プラグインなしでブラウザ間で音声、ビデオ通話などをするプロジェクト13年6月19日水曜日
sipML5WebRTCを用いた音声、ビデオ通話を実現する為の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 $ = functi...
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-...
VoIPまとめsipML5というライブラリがあるVoIP用パーミッションが用意されているFirefox OSではまだWeb RTCはサポートされていないが、次期verで対応との事なのでいずれ出来る様になるはず13年6月19日水曜日
LINEは作れる!(はず)13年6月19日水曜日
ご静聴ありがとうございました。to be continued...13年6月19日水曜日
Upcoming SlideShare
Loading in …5
×

Firefox osでlineは作れるか

6,170 views

Published on

  • Be the first to comment

Firefox osでlineは作れるか

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

×