2011 2/25開催のNHN HTML5勉強会で使用したスライドです。 内容は、HTML5のWebSocketを使用した、アバターの着替えとリアルタイムコミュニケーションのデモなどです。 http://atnd.org/events/13029

1. サービス開発 更新：２０１１／０２／２５ 作成：山森 拓 所属： WEBサービス開発０チーム

2. 自己紹介 名前： 山森 拓 仕事： Webサービス開発 家訓： やられたら、やりかえせ

3. 目次 「Session ３」って、なんの紹介？ 人を感じるサービス （DEMO） 場を感じるサービス （DEMO） 感想 まとめ

4. 目次 「Session ３」って、なんの紹介？ 人を感じるサービス （DEMO） 場を感じるサービス （DEMO） 感想 まとめ

5. 「Session ３」って、なんの紹介？ Session １： HTML5の技術 Session ２： 導入事例 Session ３： プロトタイプなど？

6. 「Session ３」って、なんの紹介？ Session ３： 開発者による、 「逆提案」の内、 「HTML5」に触れているデモを紹介 ※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません ※紹介するデモは、ＰＣ上で試されたものになります。

7. 「Session ３」って、なんの紹介？ 「逆提案」って？

8. 「逆提案」ってなに？ 登場人物 企画 デザイン 開発 テスト

9. 「逆提案」ってなに？ ○○を作ろう！！ 企画 デザイン 開発 テスト

10. 「逆提案」ってなに？ △△を作ろう！！ こんなことも出来るよ！ 企画 デザイン 開発 テスト

11. 「逆提案」ってなに？ 当然ですが・・・

12. 「逆提案」ってなに？ 「技術」の未来は、 「技術者」が知っている。

13. 「逆提案」ってなに？ でも・・・

14. 「逆提案」ってなに？ 大事なこと： その「技術」が、 「サービス」として使えるか？

15. 「逆提案」ってなに？ つまり・・・

16. 「逆提案」ってなに？ 逆提案とは： 開発者が、 「サービス」に役立つ技術を選別し、 「サービス」を提案すること。

17. 「Session ３」って、なんの紹介？ ふりだしに戻る

18. 「Session ３」って、なんの紹介？ Session ３： 開発者による、 「逆提案」の内、 「HTML5」に触れているデモを紹介

19. 逆提案 Session ３： １． 人を感じるサービス ２． 場を感じるサービス ※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません。

20. 目次 「Session ３」って、なんの紹介？ 人を感じるサービス （DEMO） 場を感じるサービス （DEMO） 感想 まとめ

21. 提案 Ａ コンセプト： 「既存サービス ＋ α」

22. 提案 Ａ ： 既存サービス ＋ α 注目サービス：「マイホーム」

23. 提案 Ａ ： 既存サービス ＋ α ココ

24. 提案 Ａ ： 既存サービス ＋ α ココ

25. 提案 Ａ ： 既存サービス ＋ α 訪問者 自分

26. 提案 Ａ ： 既存サービス ＋ α 訪問履歴 「訪問履歴」は、 昔から存在していた。

27. 提案 Ａ ： 既存サービス ＋ α 訪問履歴 もっと・・・ 人を感じるサービスを！

28. 提案 Ａ ： 既存サービス ＋ α 「訪問履歴」 「訪問者・表示」 訪問者

29. 提案 Ａ ： 既存サービス ＋ α ＋α

30. 提案 Ａ ： 既存サービス ＋ α 『あっ！？ 訪問された！！』 そこに、 人を感じるサービス ＜臨場感＞

31. 提案 Ａ ： 既存サービス ＋ α ＤＥＭＯ

32. 提案 Ａ ： 既存サービス ＋ α 結果： 新しいコミュニケーションの形

33. 目次 「Session ３」って、なんの紹介？ 人を感じるサービス （DEMO） 場を感じるサービス （DEMO） 感想 まとめ

34. 提案 Ｂ ： 場を感じるサービス コンセプト： Ｗｅｂサービスの可能性

35. 提案 Ｂ ： Ｗｅｂサービスの可能性 「人を感じるサービス」の結果 新しいコミュニケーションの形

36. 提案 Ｂ ： Ｗｅｂサービスの可能性 会話をイメージすると・・・ http://www.flickr.com/photos/dilaudid/4954719152/

37. 提案 Ｂ ： Ｗｅｂサービスの可能性 『みんなで、どこ行く？ なにする？ 』 http://www.flickr.com/photos/photopoweragainstempire/2358100271/

38. 提案 Ｂ ： Ｗｅｂサービスの可能性 『みんなで、どこ行く？ なにする？ 』 そこに、 場を感じるサービス ＜臨場感＞

39. 提案 Ｂ ： 場を感じるサービス ＤＥＭＯ

40. 目次 「Session ３」って、なんの紹介？ 人を感じるサービス （DEMO） 場を感じるサービス （DEMO） 感想 まとめ

41. 感想 実際に、作ってみて・・・・・・

42. 感想 大変でした！！ http://www.flickr.com/photos/elblogazo/10900060/

43. 感想 でも・・・

44. 感想 いろいろ・おもしろい！！ http://www.flickr.com/photos/78391121@N00/338096053/

46. 補足： 「node.js / socket.io-node」って？ お手軽 「リアルタイム通信」用 サーバとライブラリ

48. Ｖ８エンジンを利用

51. 苦労： 「node.js / socket.io-node」 特定Ｓｅｓｓｉｏｎ群への データＰｕｓｈ機能がない 自分へ返す○ みんなへ返す○ グループへ返す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 不要なＰｕｓｈデータは無視！ 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()

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イベントで解決 「飛び続けて邪魔」 「無駄に２種類存在」 などなど・・・ いろいろと、文句言って、 ごめんなさい。

74. 苦労： 「Drag ＆ Drop」 「dragover」

75. 目次 「Session ３」って、なんの紹介？ 人を感じるサービス （DEMO） 場を感じるサービス （DEMO） 感想 まとめ

77. 開発には、慣れが必要（サーバ側ＪＳなど）

79. 開発には、慣れが必要（サーバ側ＪＳなど）

80. 基幹部分の改修は面倒（奥の方はＣ++ ）※ハンゲーム用の プラットフォームを作ってしまえばいい

83. イベントの挙動に気を使う（ブラウザ単位）※まだ、無理に使う必要はない

84. 最後に・・・ 最後に・・・

85. 最後に・・・ 今回のデモ

86. 最後に・・・ 今回のデモ 人を感じるサービス 場を感じるサービス

87. 最後に・・・ 新技術？

88. 最後に・・・ 新技術？

89. 最後に・・・ 未来のお話し？

90. 最後に・・・ 未来のお話し？

91. 最後に・・・ 「今」 実現できます

92. 最後に・・・ 「ＨＴＭＬ５」も同じ

94. Drag & Drop

95. Web Storage

96. Web Database

97. Web Workers

98. Web Socket

100. ご静聴、 ありがとうございました。