nhn html5勉強会 サービス開発
DESCRIPTION
2011 2/25開催のNHN HTML5勉強会で使用したスライドです。内容は、HTML5のWebSocketを使用した、アバターの着替えとリアルタイムコミュニケーションのデモなどです。http://atnd.org/events/13029TRANSCRIPT
![Page 1: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/1.jpg)
サービス開発
更新: 2011/02/25
作成: 山森 拓
所属: WEBサービス開発0チーム
![Page 2: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/2.jpg)
自己紹介
名前:山森 拓
仕事:Webサービス開発
家訓:
やられたら、やりかえせ
![Page 3: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/3.jpg)
目次
1. 「Session 3」って、なんの紹介?
2. 人を感じるサービス(DEMO)3. 場を感じるサービス(DEMO)
4. 感想
5. まとめ
![Page 4: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/4.jpg)
目次
1. 「Session 3」って、なんの紹介?
2. 人を感じるサービス(DEMO)3. 場を感じるサービス(DEMO)
4. 感想
5. まとめ
![Page 5: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/5.jpg)
「Session 3」って、なんの紹介?
Session 1 : HTML5の技術
Session 2 : 導入事例
Session 3 : プロトタイプなど?
![Page 6: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/6.jpg)
「Session 3」って、なんの紹介?
Session 3 :
開発者による、「逆提案」の内、「HTML5」に触れているデモを紹
介
※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません※紹介するデモは、PC上で試されたものになります。
![Page 7: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/7.jpg)
「Session 3」って、なんの紹介?
「逆提案」って?
![Page 8: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/8.jpg)
「逆提案」ってなに?
企画 デザイン 開発 テスト
登場人物
![Page 9: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/9.jpg)
「逆提案」ってなに?
企画 デザイン 開発 テスト
○○を作ろう!!
![Page 10: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/10.jpg)
「逆提案」ってなに?
企画 デザイン 開発 テスト
△△を作ろう!!こんなことも出来るよ!
![Page 11: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/11.jpg)
「逆提案」ってなに?
当然ですが・・・
![Page 12: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/12.jpg)
「逆提案」ってなに?
「技術」の未来は、「技術者」が知っている。
![Page 13: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/13.jpg)
「逆提案」ってなに?
でも・・・
![Page 14: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/14.jpg)
「逆提案」ってなに?
大事なこと :
その「技術」が、「サービス」として使えるか?
![Page 15: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/15.jpg)
「逆提案」ってなに?
つまり・・・
![Page 16: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/16.jpg)
「逆提案」ってなに?
逆提案とは :
開発者が、「サービス」に役立つ技術を選別
し、「サービス」を提案すること。
![Page 17: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/17.jpg)
「Session 3」って、なんの紹介?
ふりだしに戻る
![Page 18: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/18.jpg)
「Session 3」って、なんの紹介?
Session 3 :
開発者による、「逆提案」の内、「HTML5」に触れているデモを紹
介
![Page 19: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/19.jpg)
逆提案
Session 3 :
1. 人を感じるサービス
2. 場を感じるサービス
※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません。
![Page 20: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/20.jpg)
目次
1. 「Session 3」って、なんの紹介?
2. 人を感じるサービス(DEMO)3. 場を感じるサービス(DEMO)
4. 感想
5. まとめ
![Page 21: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/21.jpg)
提案 A
コンセプト :
「既存サービス + α」
![Page 22: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/22.jpg)
提案 A : 既存サービス + α
注目サービス :「マイホーム」
![Page 23: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/23.jpg)
提案 A : 既存サービス + α
ココ
![Page 24: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/24.jpg)
提案 A : 既存サービス + α
ココ
![Page 25: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/25.jpg)
提案 A : 既存サービス + α
自分
訪問者
![Page 26: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/26.jpg)
提案 A : 既存サービス + α
訪問履歴
「訪問履歴」は、昔から存在していた。
![Page 27: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/27.jpg)
提案 A : 既存サービス + α
訪問履歴
もっと・・・人を感じるサービスを!
![Page 28: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/28.jpg)
提案 A : 既存サービス + α
訪問者
「訪問履歴」
「訪問者・表示」
![Page 29: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/29.jpg)
+α
提案 A : 既存サービス + α
![Page 30: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/30.jpg)
『あっ!? 訪問された!!』
そこに、人を感じるサービス
<臨場感>
提案 A : 既存サービス + α
![Page 31: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/31.jpg)
DEMO
提案 A : 既存サービス + α
![Page 32: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/32.jpg)
結果 :
新しいコミュニケーションの形
提案 A : 既存サービス + α
![Page 33: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/33.jpg)
目次
1. 「Session 3」って、なんの紹介?
2. 人を感じるサービス(DEMO)3. 場を感じるサービス(DEMO)
4. 感想
5. まとめ
![Page 34: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/34.jpg)
コンセプト :
Webサービスの可能性
提案 B : 場を感じるサービス
![Page 35: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/35.jpg)
提案 B : Webサービスの可能性
「人を感じるサービス」の結果
新しいコミュニケーションの形
![Page 36: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/36.jpg)
会話をイメージすると・・・
提案 B : Webサービスの可能性
http://www.flickr.com/photos/dilaudid/4954719152/
![Page 37: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/37.jpg)
『みんなで、どこ行く? なにする?』
提案 B : Webサービスの可能性
http://www.flickr.com/photos/photopoweragainstempire/2358100271/
![Page 38: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/38.jpg)
『みんなで、どこ行く? なにする?』
そこに、場を感じるサービス
<臨場感>
提案 B : Webサービスの可能性
![Page 39: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/39.jpg)
DEMO
提案 B : 場を感じるサービス
![Page 40: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/40.jpg)
目次
1. 「Session 3」って、なんの紹介?
2. 人を感じるサービス(DEMO)3. 場を感じるサービス(DEMO)
4. 感想
5. まとめ
![Page 41: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/41.jpg)
感想
実際に、作ってみて・・・・・・
![Page 42: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/42.jpg)
大変でした!!
感想
http://www.flickr.com/photos/elblogazo/10900060/
![Page 43: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/43.jpg)
でも・・・
感想
![Page 44: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/44.jpg)
いろいろ・おもしろい!!
感想
http://www.flickr.com/photos/78391121@N00/338096053/
![Page 45: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/45.jpg)
感想:HTML5は?
今回は・・・
node.js / socket.io-node( Web Socket …etc…)
Drag and Drop API
![Page 46: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/46.jpg)
感想
node.js / socket.io-node( Web Socket …etc…)
Drag and Drop API
![Page 47: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/47.jpg)
感想: node.js / socket.io-node
簡単に、「リアル」を実現!!
http://www.flickr.com/photos/52799096@N00/3474866062/
![Page 48: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/48.jpg)
補足:「node.js / socket.io-node」って?
お手軽「リアルタイム通信」用
サーバとライブラリ
![Page 49: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/49.jpg)
補足:「node.js」って?
特徴 :
サーバサイドJavascriptの1つ (奥はC++)
V8エンジンを利用
イベント駆動型 (single thread multi-connection)
![Page 50: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/50.jpg)
補足:「socket.io-node」って?
特徴 :
リアルタイム通信用 JSライブラリ
サーバ / クライアント用 JSのペアで利用
(socket.IO-node / socket.IO)
IE7 / IE8 にも対応
![Page 51: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/51.jpg)
疑問: 「node.js / socket.io-node」
ココで困った!
http://www.flickr.com/photos/devos/115905057/http://www.flickr.com/photos/icools/196158649/
![Page 52: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/52.jpg)
特定Session群へのデータPush機能がない
自分へ返す ○
みんなへ返す ○
グループへ返す orz
苦労: 「node.js / socket.io-node」
![Page 53: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/53.jpg)
自分へ返す
client.send()
![Page 54: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/54.jpg)
みんなへ返す
client.broadcast()
![Page 55: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/55.jpg)
グループへ返す
orz
![Page 56: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/56.jpg)
苦労: node.js / socket.io-node
どうしよう・・・
http://www.flickr.com/photos/trojanguy/5428689747/
![Page 57: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/57.jpg)
苦労: node.js / socket.io-node
ごまかそう!
http://www.flickr.com/photos/alicepopkorn/4011970135/
![Page 58: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/58.jpg)
苦労: node.js / socket.io-node
不要なPushデータは無視!
http://www.flickr.com/photos/barkbud/4280166825/
![Page 59: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/59.jpg)
苦労: node.js / socket.io-node
「来店データ」 client.broadcast()
「来店処理」の実施
「来店処理」の実施
無視
無視
○
○
××
![Page 60: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/60.jpg)
苦労: node.js / socket.io-node
でも本当は・・・
不要な通信はしたくない
![Page 61: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/61.jpg)
苦労: node.js / socket.io-node
「sessionId」と「場所」をマッピング
コネクション確立
「sessionId」 + 「場所Id」
sessionId:1000sessionId:1003sessionId:1008
場所:A
![Page 62: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/62.jpg)
苦労: 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)
![Page 63: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/63.jpg)
グループへ返す
subscribe()
![Page 64: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/64.jpg)
感想
node.js / socket.io-node( Web Socket …etc…)
Drag and Drop API
![Page 65: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/65.jpg)
これを・・・
<span id="contents">
ドラッグされるモノの準備
![Page 66: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/66.jpg)
こうする!
<span id="contents" draggable="true">
ドラッグされるモノの準備
![Page 67: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/67.jpg)
これを・・・用意
<div id="dropzone">ここにドロップしてね!
</div>
ドロップされる場所の準備
![Page 68: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/68.jpg)
こうする!
<div id="dropzone" class="drop">
ここにドロップしてね!</div>
ドロップされる場所の準備
![Page 69: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/69.jpg)
後はJavaScriptで
elmContents.addEventListener('dragstart',
function(e){// ~ドラッグ時の処理~
}, false);
ドラッグ時の処理
![Page 70: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/70.jpg)
ドロップ側にも・・・
elmDropzone.addEventListener('drop',
function (e) {// ~ドロップ時の処理~
}, false);
ドロップ時の処理
![Page 71: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/71.jpg)
どんなタグでも簡単にDrag & Drop!
「Drag & Drop」
![Page 72: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/72.jpg)
ココで困った!
疑問: 「Drag & Drop」
http://www.flickr.com/photos/devos/115905057/
![Page 73: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/73.jpg)
苦労: 「Drag & Drop」
ドラッグ中は、他のイベントが取得できない!?
![Page 74: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/74.jpg)
苦労: 「Drag & Drop」
mouse関連のイベントが取得できないと・・・
他人のカーソルが見れない
![Page 75: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/75.jpg)
苦労: 「Drag & Drop」
dragoverイベントで解決
「飛び続けて邪魔」「無駄に2種類存在」
などなど・・・
いろいろと、文句言って、ごめんなさい。
![Page 76: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/76.jpg)
苦労: 「Drag & Drop」
「dragover」
![Page 77: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/77.jpg)
目次
1. 「Session 3」って、なんの紹介?
2. 人を感じるサービス(DEMO)3. 場を感じるサービス(DEMO)
4. 感想
5. まとめ
![Page 78: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/78.jpg)
まとめ:node.js / socket.io-node
利用だけなら簡単
開発には、慣れが必要 (サーバ側JSなど)
基幹部分の改修は面倒 (奥の方はC++ )
![Page 79: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/79.jpg)
まとめ:node.js / socket.io-node
利用だけなら簡単
開発には、慣れが必要 (サーバ側JSなど)
基幹部分の改修は面倒 (奥の方はC++ )
※ハンゲーム用のプラットフォームを作ってしまえばいい
![Page 80: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/80.jpg)
まとめ:drag and drop
利用は簡単・・・かな? (今
までと・・・)
イベントの挙動に気を使う (ブラウザ単
位)
![Page 81: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/81.jpg)
まとめ:drag and drop
利用は簡単・・・かな? (今
までと・・・)
イベントの挙動に気を使う (ブラウザ単
位)
※まだ、無理に使う必要はない
![Page 82: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/82.jpg)
最後に・・・
最後に・・・
![Page 83: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/83.jpg)
最後に・・・
今回のデモ
![Page 84: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/84.jpg)
最後に・・・
今回のデモ
人を感じるサービス場を感じるサービス
![Page 85: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/85.jpg)
新技術?
最後に・・・
![Page 86: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/86.jpg)
新技術?
最後に・・・
![Page 87: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/87.jpg)
未来のお話し?
最後に・・・
![Page 88: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/88.jpg)
未来のお話し?
最後に・・・
![Page 89: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/89.jpg)
「今」実現できます
最後に・・・
![Page 90: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/90.jpg)
「HTML5」も同じ
最後に・・・
![Page 91: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/91.jpg)
最後に・・・
いろいろ試したり・・・
• Cross Document Messaging
• Drag & Drop
• Web Storage
• Web Database
• Web Workers
• Web Socket
• Offline
Web Application
![Page 92: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/92.jpg)
最後に・・・
これからも、注目してます!
![Page 93: NHN HTML5勉強会 サービス開発](https://reader033.vdocuments.mx/reader033/viewer/2022051016/5596dcb91a28abdb6a8b47f8/html5/thumbnails/93.jpg)
ご静聴、ありがとうございました。