nhn html5勉強会　サービス開発

サービス開発

更新：２０１１／０２／２５

作成：山森拓

所属： WEBサービス開発０チーム

自己紹介

名前：山森拓

仕事：Webサービス開発

家訓：

やられたら、やりかえせ

目次

1. 「Session ３」って、なんの紹介？

2. 人を感じるサービス（DEMO）3. 場を感じるサービス（DEMO）

4. 感想

5. まとめ

「Session ３」って、なんの紹介？

Session １： HTML5の技術

Session ２：導入事例

Session ３：プロトタイプなど？


Session ３：

開発者による、「逆提案」の内、「HTML5」に触れているデモを紹

介

※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません※紹介するデモは、ＰＣ上で試されたものになります。


「逆提案」って？

「逆提案」ってなに？

企画デザイン開発テスト

登場人物



○○を作ろう！！



△△を作ろう！！こんなことも出来るよ！


当然ですが・・・


「技術」の未来は、「技術者」が知っている。


でも・・・


大事なこと：

その「技術」が、「サービス」として使えるか？


つまり・・・


逆提案とは：

開発者が、「サービス」に役立つ技術を選別

し、「サービス」を提案すること。


ふりだしに戻る


Session ３：

開発者による、「逆提案」の内、「HTML5」に触れているデモを紹

介

逆提案

Session ３：

１．人を感じるサービス

２．場を感じるサービス

※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません。

目次



4. 感想

5. まとめ

提案Ａ

コンセプト：

「既存サービス＋ α」

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

注目サービス：「マイホーム」


ココ


自分

訪問者


訪問履歴

「訪問履歴」は、昔から存在していた。


訪問履歴

もっと・・・人を感じるサービスを！


訪問者

「訪問履歴」

「訪問者・表示」

＋α


『あっ！？訪問された！！』

そこに、人を感じるサービス

＜臨場感＞


ＤＥＭＯ


結果：

新しいコミュニケーションの形


目次



4. 感想

5. まとめ

コンセプト：

Ｗｅｂサービスの可能性

提案Ｂ：場を感じるサービス

提案Ｂ：Ｗｅｂサービスの可能性

「人を感じるサービス」の結果

新しいコミュニケーションの形

会話をイメージすると・・・


http://www.flickr.com/photos/dilaudid/4954719152/

『みんなで、どこ行く？なにする？』


http://www.flickr.com/photos/photopoweragainstempire/2358100271/

『みんなで、どこ行く？なにする？』

そこに、場を感じるサービス

＜臨場感＞


ＤＥＭＯ

提案Ｂ：場を感じるサービス

目次



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

感想


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/


ごまかそう！

http://www.flickr.com/photos/alicepopkorn/4011970135/


不要なＰｕｓｈデータは無視！

http://www.flickr.com/photos/barkbud/4280166825/


「来店データ」 client.broadcast()

「来店処理」の実施

「来店処理」の実施

無視

無視

○

○

××


でも本当は・・・

不要な通信はしたくない


「sessionId」と「場所」をマッピング

コネクション確立

「sessionId」＋「場所Id」

sessionId：1000sessionId：1003sessionId：1008

場所：A


後は、「socket.io-node」に、特定のsession群にだけ、

データPushできる機能を付与

※ここら辺かな？/socket.io-node/lib/socket.io/listener.js (Listener)•/socket.io-node/lib/socket.io/client.js(method)

グループへ返す

subscribe()

感想


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」

ドラッグ中は、他のイベントが取得できない！？


mouse関連のイベントが取得できないと・・・

他人のカーソルが見れない


dragoverイベントで解決

「飛び続けて邪魔」「無駄に２種類存在」

などなど・・・

いろいろと、文句言って、ごめんなさい。


「dragover」

目次



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

最後に・・・

これからも、注目してます！

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

nhn html5勉強会 サービス開発

Technology

nhn html5勉強会　サービス開発