nhn html5勉強会 サービス開発
Post on 04-Jul-2015
1.883 Views
Preview:
DESCRIPTION
TRANSCRIPT
サービス開発
更新： ２０１１／０２／２５
作成： 山森 拓
所属： WEBサービス開発０チーム
自己紹介
名前：山森 拓
仕事：Webサービス開発
家訓：
やられたら、やりかえせ
目次
1. 「Session ３」って、なんの紹介？
2. 人を感じるサービス（DEMO）3. 場を感じるサービス（DEMO）
4. 感想
5. まとめ
目次
1. 「Session ３」って、なんの紹介？
2. 人を感じるサービス（DEMO）3. 場を感じるサービス（DEMO）
4. 感想
5. まとめ
「Session ３」って、なんの紹介？
Session １ ： HTML5の技術
Session ２ ： 導入事例
Session ３ ： プロトタイプなど？
「Session ３」って、なんの紹介？
Session ３ ：
開発者による、「逆提案」の内、「HTML5」に触れているデモを紹
介
※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません※紹介するデモは、ＰＣ上で試されたものになります。
「Session ３」って、なんの紹介？
「逆提案」って？
「逆提案」ってなに？
企画 デザイン 開発 テスト
登場人物
「逆提案」ってなに？
企画 デザイン 開発 テスト
○○を作ろう！！
「逆提案」ってなに？
企画 デザイン 開発 テスト
△△を作ろう！！こんなことも出来るよ！
「逆提案」ってなに？
当然ですが・・・
「逆提案」ってなに？
「技術」の未来は、「技術者」が知っている。
「逆提案」ってなに？
でも・・・
「逆提案」ってなに？
大事なこと ：
その「技術」が、「サービス」として使えるか？
「逆提案」ってなに？
つまり・・・
「逆提案」ってなに？
逆提案とは ：
開発者が、「サービス」に役立つ技術を選別
し、「サービス」を提案すること。
「Session ３」って、なんの紹介？
ふりだしに戻る
「Session ３」って、なんの紹介？
Session ３ ：
開発者による、「逆提案」の内、「HTML5」に触れているデモを紹
介
逆提案
Session ３ ：
１． 人を感じるサービス
２． 場を感じるサービス
※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません。
目次
1. 「Session ３」って、なんの紹介？
2. 人を感じるサービス（DEMO）3. 場を感じるサービス（DEMO）
4. 感想
5. まとめ
提案 Ａ
コンセプト ：
「既存サービス ＋ α」
提案 Ａ ： 既存サービス ＋ α
注目サービス ：「マイホーム」
提案 Ａ ： 既存サービス ＋ α
ココ
提案 Ａ ： 既存サービス ＋ α
ココ
提案 Ａ ： 既存サービス ＋ α
自分
訪問者
提案 Ａ ： 既存サービス ＋ α
訪問履歴
「訪問履歴」は、昔から存在していた。
提案 Ａ ： 既存サービス ＋ α
訪問履歴
もっと・・・人を感じるサービスを！
提案 Ａ ： 既存サービス ＋ α
訪問者
「訪問履歴」
「訪問者・表示」
＋α
提案 Ａ ： 既存サービス ＋ α
『あっ！？ 訪問された！！』
そこに、人を感じるサービス
＜臨場感＞
提案 Ａ ： 既存サービス ＋ α
ＤＥＭＯ
提案 Ａ ： 既存サービス ＋ α
結果 ：
新しいコミュニケーションの形
提案 Ａ ： 既存サービス ＋ α
目次
1. 「Session ３」って、なんの紹介？
2. 人を感じるサービス（DEMO）3. 場を感じるサービス（DEMO）
4. 感想
5. まとめ
コンセプト ：
Ｗｅｂサービスの可能性
提案 Ｂ ： 場を感じるサービス
提案 Ｂ ： Ｗｅｂサービスの可能性
「人を感じるサービス」の結果
新しいコミュニケーションの形
会話をイメージすると・・・
提案 Ｂ ： Ｗｅｂサービスの可能性
http://www.flickr.com/photos/dilaudid/4954719152/
『みんなで、どこ行く？ なにする？』
提案 Ｂ ： Ｗｅｂサービスの可能性
http://www.flickr.com/photos/photopoweragainstempire/2358100271/
『みんなで、どこ行く？ なにする？』
そこに、場を感じるサービス
＜臨場感＞
提案 Ｂ ： Ｗｅｂサービスの可能性
ＤＥＭＯ
提案 Ｂ ： 場を感じるサービス
目次
1. 「Session ３」って、なんの紹介？
2. 人を感じるサービス（DEMO）3. 場を感じるサービス（DEMO）
4. 感想
5. まとめ
感想
実際に、作ってみて・・・・・・
大変でした！！
感想
http://www.flickr.com/photos/elblogazo/10900060/
でも・・・
感想
いろいろ・おもしろい！！
感想
http://www.flickr.com/photos/78391121@N00/338096053/
感想：HTML5は？
今回は・・・
node.js / socket.io-node（ Web Socket …etc…）
Drag and Drop API
感想
node.js / socket.io-node（ Web Socket …etc…）
Drag and Drop API
感想： node.js / socket.io-node
簡単に、「リアル」を実現！！
http://www.flickr.com/photos/52799096@N00/3474866062/
補足：「node.js / socket.io-node」って？
お手軽「リアルタイム通信」用
サーバとライブラリ
補足：「node.js」って？
特徴 ：
サーバサイドJavascriptの1つ （奥はC++）
Ｖ８エンジンを利用
イベント駆動型 （single thread multi-connection）
補足：「socket.io-node」って？
特徴 ：
リアルタイム通信用 JSライブラリ
サーバ / クライアント用 JSのペアで利用
（socket.IO-node / socket.IO）
IE7 / IE8 にも対応
疑問： 「node.js / socket.io-node」
ココで困った！
http://www.flickr.com/photos/devos/115905057/http://www.flickr.com/photos/icools/196158649/
特定Ｓｅｓｓｉｏｎ群へのデータＰｕｓｈ機能がない
自分へ返す ○
みんなへ返す ○
グループへ返す orz
苦労： 「node.js / socket.io-node」
自分へ返す
client.send()
みんなへ返す
client.broadcast()
グループへ返す
orz
苦労： node.js / socket.io-node
どうしよう・・・
http://www.flickr.com/photos/trojanguy/5428689747/
苦労： node.js / socket.io-node
ごまかそう！
http://www.flickr.com/photos/alicepopkorn/4011970135/
苦労： node.js / socket.io-node
不要なＰｕｓｈデータは無視！
http://www.flickr.com/photos/barkbud/4280166825/
苦労： node.js / socket.io-node
「来店データ」 client.broadcast()
「来店処理」の実施
「来店処理」の実施
無視
無視
○
○
××
苦労： node.js / socket.io-node
でも本当は・・・
不要な通信はしたくない
苦労： node.js / socket.io-node
「sessionId」と「場所」をマッピング
コネクション確立
「sessionId」 ＋ 「場所Id」
sessionId：1000sessionId：1003sessionId：1008
場所：A
苦労： 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)
グループへ返す
subscribe()
感想
node.js / socket.io-node（ Web Socket …etc…）
Drag and Drop API
これを・・・
<span id="contents">
ドラッグされるモノの準備
こうする！
<span id="contents" draggable="true">
ドラッグされるモノの準備
これを・・・用意
<div id="dropzone">ここにドロップしてね！
</div>
ドロップされる場所の準備
こうする！
<div id="dropzone" class="drop">
ここにドロップしてね！</div>
ドロップされる場所の準備
後はJavaScriptで
elmContents.addEventListener('dragstart',
function(e){// ～ドラッグ時の処理～
}, false);
ドラッグ時の処理
ドロップ側にも・・・
elmDropzone.addEventListener('drop',
function (e) {// ～ドロップ時の処理～
}, false);
ドロップ時の処理
どんなタグでも簡単にDrag & Drop！
「Drag ＆ Drop」
ココで困った！
疑問： 「Drag ＆ Drop」
http://www.flickr.com/photos/devos/115905057/
苦労： 「Drag ＆ Drop」
ドラッグ中は、他のイベントが取得できない！？
苦労： 「Drag ＆ Drop」
mouse関連のイベントが取得できないと・・・
他人のカーソルが見れない
苦労： 「Drag ＆ Drop」
dragoverイベントで解決
「飛び続けて邪魔」「無駄に２種類存在」
などなど・・・
いろいろと、文句言って、ごめんなさい。
苦労： 「Drag ＆ Drop」
「dragover」
目次
1. 「Session ３」って、なんの紹介？
2. 人を感じるサービス（DEMO）3. 場を感じるサービス（DEMO）
4. 感想
5. まとめ
まとめ：node.js / socket.io-node
利用だけなら簡単
開発には、慣れが必要 （サーバ側ＪＳなど）
基幹部分の改修は面倒 （奥の方はＣ++ ）
まとめ：node.js / socket.io-node
利用だけなら簡単
開発には、慣れが必要 （サーバ側ＪＳなど）
基幹部分の改修は面倒 （奥の方はＣ++ ）
※ハンゲーム用のプラットフォームを作ってしまえばいい
まとめ：drag and drop
利用は簡単・・・かな？ （今
までと・・・）
イベントの挙動に気を使う （ブラウザ単
位）
まとめ：drag and drop
利用は簡単・・・かな？ （今
までと・・・）
イベントの挙動に気を使う （ブラウザ単
位）
※まだ、無理に使う必要はない
最後に・・・
最後に・・・
最後に・・・
今回のデモ
最後に・・・
今回のデモ
人を感じるサービス場を感じるサービス
新技術？
最後に・・・
新技術？
最後に・・・
未来のお話し？
最後に・・・
未来のお話し？
最後に・・・
「今」実現できます
最後に・・・
「ＨＴＭＬ５」も同じ
最後に・・・
最後に・・・
いろいろ試したり・・・
• Cross Document Messaging
• Drag & Drop
• Web Storage
• Web Database
• Web Workers
• Web Socket
• Offline
Web Application
最後に・・・
これからも、注目してます！
ご静聴、ありがとうございました。
top related