Your SlideShare is downloading. ×

NHN HTML5勉強会 サービス開発

1,859

Published on

2011 2/25開催のNHN HTML5勉強会で使用したスライドです。 …

2011 2/25開催のNHN HTML5勉強会で使用したスライドです。

内容は、HTML5のWebSocketを使用した、アバターの着替えとリアルタイムコミュニケーションのデモなどです。

http://atnd.org/events/13029

Published in: Technology, Sports
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,859
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • この機能は、なぜ、作られたのか?ですが、、、
  • みんなで、どこ行く? なにする?つまり、みんなで行ける場所、みんなで出来る何かが出来る「場」が必要ですね。
  • そんな、場を感じられるサービスのデモを作ってみました。
  • いろいろと、おもしろかったですね。
  • さて、今回は・・・
  • まさに、今、ここに、人を感じるという、「リアル」さを、とっても簡単に実現できました。
  • 補足です。
  • 方法は、至って、シンプルです。
  • そうすると
  • 特定グループのみと通信ができて、ハッピーになれますね
  • Transcript

    • 1. サービス開発
       更新:2011/02/25
       作成:山森 拓
       所属: WEBサービス開発0チーム
    • 2. 自己紹介
      名前:
       山森 拓
      仕事:
       Webサービス開発
      家訓:
       やられたら、やりかえせ
    • 3. 目次
      「Session 3」って、なんの紹介?
      人を感じるサービス (DEMO)
      場を感じるサービス (DEMO)
      感想
      まとめ
    • 4. 目次
      「Session 3」って、なんの紹介?
      人を感じるサービス (DEMO)
      場を感じるサービス (DEMO)
      感想
      まとめ
    • 5. 「Session 3」って、なんの紹介?
      Session 1: HTML5の技術
      Session 2: 導入事例
      Session 3: プロトタイプなど?
    • 6. 「Session 3」って、なんの紹介?
      Session 3:
      開発者による、
      「逆提案」の内、
      「HTML5」に触れているデモを紹介
      ※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません
      ※紹介するデモは、PC上で試されたものになります。
    • 7. 「Session 3」って、なんの紹介?
      「逆提案」って?
    • 8. 「逆提案」ってなに?
      登場人物
      企画
      デザイン
      開発
      テスト
    • 9. 「逆提案」ってなに?
      ○○を作ろう!!
      企画
      デザイン
      開発
      テスト
    • 10. 「逆提案」ってなに?
      △△を作ろう!!
      こんなことも出来るよ!
      企画
      デザイン
      開発
      テスト
    • 11. 「逆提案」ってなに?
      当然ですが・・・
    • 12. 「逆提案」ってなに?
      「技術」の未来は、
      「技術者」が知っている。
    • 13. 「逆提案」ってなに?
      でも・・・
    • 14. 「逆提案」ってなに?
      大事なこと:
      その「技術」が、
      「サービス」として使えるか?
    • 15. 「逆提案」ってなに?
      つまり・・・
    • 16. 「逆提案」ってなに?
      逆提案とは:
      開発者が、
      「サービス」に役立つ技術を選別し、
      「サービス」を提案すること。
    • 17. 「Session 3」って、なんの紹介?
      ふりだしに戻る
    • 18. 「Session 3」って、なんの紹介?
      Session 3:
      開発者による、
      「逆提案」の内、
      「HTML5」に触れているデモを紹介
    • 19. 逆提案
      Session 3:
      1. 人を感じるサービス
      2. 場を感じるサービス
      ※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません。
    • 20. 目次
      「Session 3」って、なんの紹介?
      人を感じるサービス (DEMO)
      場を感じるサービス (DEMO)
      感想
      まとめ
    • 21. 提案 A
      コンセプト:
      「既存サービス + α」
    • 22. 提案 A : 既存サービス + α
      注目サービス:「マイホーム」 
    • 23. 提案 A : 既存サービス + α
      ココ
    • 24. 提案 A : 既存サービス + α
      ココ
    • 25. 提案 A : 既存サービス + α
      訪問者
      自分
    • 26. 提案 A : 既存サービス + α
      訪問履歴
      「訪問履歴」は、
      昔から存在していた。
    • 27. 提案 A : 既存サービス + α
      訪問履歴
      もっと・・・
      人を感じるサービスを!
    • 28. 提案 A : 既存サービス + α
      「訪問履歴」
      「訪問者・表示」
      訪問者
    • 29. 提案 A : 既存サービス + α
      +α
    • 30. 提案 A : 既存サービス + α
      『あっ!? 訪問された!!』
      そこに、
      人を感じるサービス
      <臨場感>
    • 31. 提案 A : 既存サービス + α
      DEMO
    • 32. 提案 A : 既存サービス + α
      結果:
      新しいコミュニケーションの形
    • 33. 目次
      「Session 3」って、なんの紹介?
      人を感じるサービス (DEMO)
      場を感じるサービス (DEMO)
      感想
      まとめ
    • 34. 提案 B : 場を感じるサービス
      コンセプト:
      Webサービスの可能性
    • 35. 提案 B : Webサービスの可能性
      「人を感じるサービス」の結果
      新しいコミュニケーションの形
    • 36. 提案 B : Webサービスの可能性
      会話をイメージすると・・・
      http://www.flickr.com/photos/dilaudid/4954719152/
    • 37. 提案 B : Webサービスの可能性
      『みんなで、どこ行く? なにする? 』
      http://www.flickr.com/photos/photopoweragainstempire/2358100271/
    • 38. 提案 B : Webサービスの可能性
      『みんなで、どこ行く? なにする? 』
      そこに、
      場を感じるサービス
      <臨場感>
    • 39. 提案 B : 場を感じるサービス
      DEMO
    • 40. 目次
      「Session 3」って、なんの紹介?
      人を感じるサービス (DEMO)
      場を感じるサービス (DEMO)
      感想
      まとめ
    • 41. 感想
      実際に、作ってみて・・・・・・
    • 42. 感想
      大変でした!!
      http://www.flickr.com/photos/elblogazo/10900060/
    • 43. 感想
      でも・・・
    • 44. 感想
      いろいろ・おもしろい!!
      http://www.flickr.com/photos/78391121@N00/338096053/
    • 45. 感想:HTML5は?
      今回は・・・
      • node.js / socket.io-node
      ( WebSocket…etc…)
      • Drag and Drop API
    • 感想
      • node.js / socket.io-node
      ( WebSocket…etc…)
      • Drag and Drop API
    • 感想: node.js / socket.io-node
      簡単に、「リアル」を実現!!
      http://www.flickr.com/photos/52799096@N00/3474866062/
    • 46. 補足: 「node.js / socket.io-node」って?
      お手軽
      「リアルタイム通信」用
      サーバとライブラリ
    • 47. 補足: 「node.js」って?
      特徴:
      • サーバサイドJavascriptの1つ(奥はC++)
      • 48. V8エンジンを利用
      • 49. イベント駆動型 (single thread multi-connection)
    • 補足: 「socket.io-node」って?
      特徴:
      • リアルタイム通信用 JSライブラリ
      • 50. サーバ / クライアント用 JSのペアで利用
       (socket.IO-node / socket.IO)
      • IE7/IE8 にも対応
    • 疑問: 「node.js / socket.io-node」
      ココで困った!
      http://www.flickr.com/photos/icools/196158649/
      http://www.flickr.com/photos/devos/115905057/
    • 51. 苦労: 「node.js / socket.io-node」
      特定Session群への
      データPush機能がない
      自分へ返す○
      みんなへ返す○
      グループへ返すorz
    • 52. 自分へ返す
      client.send()
    • 53. みんなへ返す
      client.broadcast()
    • 54. グループへ返す
      orz
    • 55. 苦労: node.js / socket.io-node
      どうしよう・・・
      http://www.flickr.com/photos/trojanguy/5428689747/
    • 56. 苦労: node.js / socket.io-node
      ごまかそう!
      http://www.flickr.com/photos/alicepopkorn/4011970135/
    • 57. 苦労: node.js / socket.io-node
      不要なPushデータは無視!
      http://www.flickr.com/photos/barkbud/4280166825/
    • 58. 苦労: node.js / socket.io-node
      client.broadcast()
      「来店データ」
      「来店処理」の実施

      無視
      「来店処理」の実施
      無視
      ×

      ×
    • 59. 苦労: node.js / socket.io-node
      でも本当は・・・
      不要な通信はしたくない
    • 60. 苦労: node.js / socket.io-node
      「sessionId」と「場所」をマッピング
      コネクション確立
      「sessionId」 + 「場所Id」
      場所:A
      sessionId:1000
      sessionId:1003
      sessionId:1008
    • 61. 苦労: node.js / socket.io-node
      後は、「socket.io-node」に、
      特定のsession群にだけ、
      データPushできる機能を付与
      ※ここら辺かな?
      /socket.io-node/lib/socket.io/listener.js(Listener)
      /socket.io-node/lib/socket.io/client.js (method)
    • 62. グループへ返す
      subscribe()
    • 63. 感想
      • node.js / socket.io-node
      ( WebSocket…etc…)
      • Drag and Drop API
    • ドラッグされるモノの準備
      これを・・・
      <span id="contents">
    • 64. ドラッグされるモノの準備
      こうする!
      <span id="contents" draggable="true">
    • 65. ドロップされる場所の準備
      これを・・・用意
      <div id="dropzone">
      ここにドロップしてね!
      </div>
    • 66. ドロップされる場所の準備
      こうする!
      <div id="dropzone" class="drop">
      ここにドロップしてね!
      </div>
    • 67. ドラッグ時の処理
      後はJavaScriptで
      elmContents.addEventListener('dragstart',
      function(e){
      // ~ドラッグ時の処理~
      }
      , false);
    • 68. ドロップ時の処理
      ドロップ側にも・・・
      elmDropzone.addEventListener('drop',
      function (e) {
      // ~ドロップ時の処理~
      }
      , false);
    • 69. 「Drag & Drop」
      どんなタグでも簡単に
      Drag & Drop!
    • 70. 疑問: 「Drag & Drop」
      ココで困った!
      http://www.flickr.com/photos/devos/115905057/
    • 71. 苦労: 「Drag & Drop」
      ドラッグ中は、
      他のイベントが取得できない!?
    • 72. 苦労: 「Drag & Drop」
      mouse関連の
      イベントが取得できないと・・・
      他人のカーソルが見れない
    • 73. 苦労: 「Drag & Drop」
      dragoverイベントで解決
      「飛び続けて邪魔」
      「無駄に2種類存在」
      などなど・・・
      いろいろと、文句言って、
      ごめんなさい。
    • 74. 苦労: 「Drag & Drop」
      「dragover」
    • 75. 目次
      「Session 3」って、なんの紹介?
      人を感じるサービス (DEMO)
      場を感じるサービス (DEMO)
      感想
      まとめ
    • 76. まとめ:node.js / socket.io-node
      • 利用だけなら簡単
      • 77. 開発には、慣れが必要(サーバ側JSなど)
      • 78. 基幹部分の改修は面倒(奥の方はC++ )
    • まとめ:node.js / socket.io-node
      • 利用だけなら簡単
      • 79. 開発には、慣れが必要(サーバ側JSなど)
      • 80. 基幹部分の改修は面倒(奥の方はC++ )
      ※ハンゲーム用の
        プラットフォームを作ってしまえばいい
    • 81. まとめ:draganddrop
      • 利用は簡単・・・かな?(今までと・・・)
      • 82. イベントの挙動に気を使う(ブラウザ単位)
    • まとめ:draganddrop
      • 利用は簡単・・・かな?(今までと・・・)
      • 83. イベントの挙動に気を使う(ブラウザ単位)
      ※まだ、無理に使う必要はない
    • 84. 最後に・・・
      最後に・・・
    • 85. 最後に・・・
      今回のデモ
    • 86. 最後に・・・
      今回のデモ
      人を感じるサービス
      場を感じるサービス
    • 87. 最後に・・・
      新技術?
    • 88. 最後に・・・
      新技術?
    • 89. 最後に・・・
      未来のお話し?
    • 90. 最後に・・・
      未来のお話し?
    • 91. 最後に・・・
      「今」
      実現できます
    • 92. 最後に・・・
      「HTML5」も同じ
    • 93. 最後に・・・
      いろいろ試したり・・・
    • 最後に・・・
      これからも、
      注目してます!
    • 100. ご静聴、
      ありがとうございました。

    ×