Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

OpenIL vol.1

http://www.infiniteloop.co.jp/blog/2014/02/publicstudy01/

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

OpenIL vol.1

  1. 1. SMARTPHONE CONTROLLER OpenIL vol.1
 中川 武憲
  2. 2. 自己紹介 • var age = 19 歳 (誕生日 2/24) • 北海道工業大学 学部 2 年生 • インフィニットループ アルバイト • 趣味は旅行、写真、プログラミング • Web Developer
  3. 3. あと 3 日で age++ するイベントが。
  4. 4. p.tl/53x8
 24 時間受付中
  5. 5. WORKS • IT 勉強会カレンダー for Android & iOS • Image Shortener - [img.ww24.jp] • Realtime Chat - [rtc.ww24.jp] • Connect Smartphone - [connect-sp.ww24.jp]
  6. 6. IT 勉強会カレンダー スマートフォンアプリ
  7. 7. IMAGE SHORTENER 短縮 URL を利用したオンラインストレージ
  8. 8. REALTIME CHAT Google Drive Realtime API を利用した Chat
  9. 9. CONNECT SMARTPHONE パソコンとスマホのリアルタイム連携
  10. 10. CONNECT SMARTPHONE
  11. 11. CONNECT SMARTPHONE • Express.IO を使った、スマートフォンとパソ コンのリアルタイムな連携アプリケーション
  12. 12. AGENDA • リアルタイムな連携とは • Express と Socket.IO • 仕組み • デモ • サンプルコード • 問題点、課題
  13. 13. CONNECT SMARTPHONE • リアルタイムな連携の例 • Chrome World Wide Maze • • https://chrome.com/maze/ jsdo.it WebSocket Controller • http://jsdo.it/controller
  14. 14. CHROME WORLD WIDE MAZE Google の迷路ゲーム
  15. 15. WEBSOCKET CONTROLLER jsdo.it
  16. 16. CONNECT SMARTPHONE スマートフォンをパソコンへ繋げて、コントローラに。
  17. 17. CONNECT SMARTPHONE • 仕組み • WebSocket Server (Socket.IO) • Web Application Server (Express.js) • Socket.IO + Express.js = Express.IO
  18. 18. 金の EXPRESS 物語調で解説
  19. 19. EXPRESS と SOCKET.IO あるプログラマがコードを書いていたところ、 git commit する前に手が滑ってエディタごと 落としてしまいました。! すると、突然女神が現れ「あなたが落としたのは金の express ですか?それとも銀の Socket.IO ですか?」と尋ねてきました。
  20. 20. EXPRESS と SOCKET.IO 正直者のプログラマは、「私が落としたのは生の WebSocket で通信するスパゲッティコード です」と答えます。
  21. 21. EXPRESS と SOCKET.IO 正直者のプログラマに感心した女神は、! 本題と無関係です。 express と Socket.IO を掛け合わせた、 express.io をプログラマに授けるのでした。
  22. 22. EXPRESS.IO express のような直感的なルーティング express と共有できるセッション
  23. 23. CONNECT SMARTPHONE /connect/{connection_id} にリダイレクト 接 続 処 理 アプリケーション・ゲームページにリダイレクト
  24. 24. CONNECT SMARTPHONE Connect Smartphone Game Page /connect/KCL98U 2 Smartphone
 (子端末) 2 3 3 PC
 (親端末) 1
  25. 25. CONNECT SMARTPHONE Connect Smartphone Game Page Socket.IO Smartphone
 (子端末) PC
 (親端末)
  26. 26. CONNECT SMARTPHONE • Connect Smartphone での接続処理 • 乱数から connection_id 生成 • 親端末と子端末を connection_id で照合 • 親端末に接続端末(子端末)の一覧を表示
  27. 27. DEMO connect-sp.ww24.jp
  28. 28. サンプルコード
  29. 29. 接続
  30. 30. 送信 (子端末)
  31. 31. 受信 (親端末)
  32. 32. CONNECT SMARTPHONE • 問題点 • 同じブラウザで 2 画面開くと、全く同じセッション 情報を持っているので、どちらが親か判別できない ! ! たまにバグる 先に接続してきた方が親で良いよね!
  33. 33. 両方子端末と判定されることがある。
  34. 34. CONNECT SMARTPHONE • なぜそうなるか… • HTTP リクエストはステートレス。状態を持たな い。状態を持たせるためにセッションを用いる。 • WebSocket 通信はステートフル。コネクション毎 に個々に状態を保持できる。ブラウザが同じであっ ても、親端末か子端末か判定可能。
  35. 35. CONNECT SMARTPHONE • リダイレクトさせる実装にした理由 • スタンドアロンな実装を目指した • サーバの実装不要でリアルタイム連携を実現 • URL ルーティングや子端末の認証など、面 倒な処理を一括して行った
  36. 36. 今後の課題 • 自動的に認証したい • パソコン スマホに限らず、
 ゲームでプレイヤーマッチングもできそう
  37. 37. リアルタイム通信楽しい!
  38. 38. express.io で
 快適なリアルタイム通信ライフを

×