Firefox osでlineは作れるか

5,395
-1

Published on

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,395
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
12
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

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日水曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×