• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
NHN HTML5勉強会 サービス開発
 

NHN HTML5勉強会 サービス開発

on

  • 2,047 views

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

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

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

http://atnd.org/events/13029

Statistics

Views

Total Views
2,047
Views on SlideShare
1,813
Embed Views
234

Actions

Likes
4
Downloads
13
Comments
0

3 Embeds 234

http://news.uxdc.jp 226
http://paper.li 7
http://statichtml.jp 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • この機能は、なぜ、作られたのか?ですが、、、
  • みんなで、どこ行く? なにする?つまり、みんなで行ける場所、みんなで出来る何かが出来る「場」が必要ですね。
  • そんな、場を感じられるサービスのデモを作ってみました。
  • いろいろと、おもしろかったですね。
  • さて、今回は・・・
  • まさに、今、ここに、人を感じるという、「リアル」さを、とっても簡単に実現できました。
  • 補足です。
  • 方法は、至って、シンプルです。
  • そうすると
  • 特定グループのみと通信ができて、ハッピーになれますね

NHN HTML5勉強会 サービス開発 NHN HTML5勉強会 サービス開発 Presentation Transcript

  • サービス開発
     更新:2011/02/25
     作成:山森 拓
     所属: WEBサービス開発0チーム
  • 自己紹介
    名前:
     山森 拓
    仕事:
     Webサービス開発
    家訓:
     やられたら、やりかえせ
  • 目次
    「Session 3」って、なんの紹介?
    人を感じるサービス (DEMO)
    場を感じるサービス (DEMO)
    感想
    まとめ
  • 目次
    「Session 3」って、なんの紹介?
    人を感じるサービス (DEMO)
    場を感じるサービス (DEMO)
    感想
    まとめ
  • 「Session 3」って、なんの紹介?
    Session 1: HTML5の技術
    Session 2: 導入事例
    Session 3: プロトタイプなど?
  • 「Session 3」って、なんの紹介?
    Session 3:
    開発者による、
    「逆提案」の内、
    「HTML5」に触れているデモを紹介
    ※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません
    ※紹介するデモは、PC上で試されたものになります。
  • 「Session 3」って、なんの紹介?
    「逆提案」って?
  • 「逆提案」ってなに?
    登場人物
    企画
    デザイン
    開発
    テスト
  • 「逆提案」ってなに?
    ○○を作ろう!!
    企画
    デザイン
    開発
    テスト
  • 「逆提案」ってなに?
    △△を作ろう!!
    こんなことも出来るよ!
    企画
    デザイン
    開発
    テスト
  • 「逆提案」ってなに?
    当然ですが・・・
  • 「逆提案」ってなに?
    「技術」の未来は、
    「技術者」が知っている。
  • 「逆提案」ってなに?
    でも・・・
  • 「逆提案」ってなに?
    大事なこと:
    その「技術」が、
    「サービス」として使えるか?
  • 「逆提案」ってなに?
    つまり・・・
  • 「逆提案」ってなに?
    逆提案とは:
    開発者が、
    「サービス」に役立つ技術を選別し、
    「サービス」を提案すること。
  • 「Session 3」って、なんの紹介?
    ふりだしに戻る
  • 「Session 3」って、なんの紹介?
    Session 3:
    開発者による、
    「逆提案」の内、
    「HTML5」に触れているデモを紹介
  • 逆提案
    Session 3:
    1. 人を感じるサービス
    2. 場を感じるサービス
    ※紹介するデモは、まだ提案段階のものですので、ハンゲーム上には存在いたしません。
  • 目次
    「Session 3」って、なんの紹介?
    人を感じるサービス (DEMO)
    場を感じるサービス (DEMO)
    感想
    まとめ
  • 提案 A
    コンセプト:
    「既存サービス + α」
  • 提案 A : 既存サービス + α
    注目サービス:「マイホーム」 
  • 提案 A : 既存サービス + α
    ココ
  • 提案 A : 既存サービス + α
    ココ
  • 提案 A : 既存サービス + α
    訪問者
    自分
  • 提案 A : 既存サービス + α
    訪問履歴
    「訪問履歴」は、
    昔から存在していた。
  • 提案 A : 既存サービス + α
    訪問履歴
    もっと・・・
    人を感じるサービスを!
  • 提案 A : 既存サービス + α
    「訪問履歴」
    「訪問者・表示」
    訪問者
  • 提案 A : 既存サービス + α
    +α
  • 提案 A : 既存サービス + α
    『あっ!? 訪問された!!』
    そこに、
    人を感じるサービス
    <臨場感>
  • 提案 A : 既存サービス + α
    DEMO
  • 提案 A : 既存サービス + α
    結果:
    新しいコミュニケーションの形
  • 目次
    「Session 3」って、なんの紹介?
    人を感じるサービス (DEMO)
    場を感じるサービス (DEMO)
    感想
    まとめ
  • 提案 B : 場を感じるサービス
    コンセプト:
    Webサービスの可能性
  • 提案 B : Webサービスの可能性
    「人を感じるサービス」の結果
    新しいコミュニケーションの形
  • 提案 B : Webサービスの可能性
    会話をイメージすると・・・
    http://www.flickr.com/photos/dilaudid/4954719152/
  • 提案 B : Webサービスの可能性
    『みんなで、どこ行く? なにする? 』
    http://www.flickr.com/photos/photopoweragainstempire/2358100271/
  • 提案 B : Webサービスの可能性
    『みんなで、どこ行く? なにする? 』
    そこに、
    場を感じるサービス
    <臨場感>
  • 提案 B : 場を感じるサービス
    DEMO
  • 目次
    「Session 3」って、なんの紹介?
    人を感じるサービス (DEMO)
    場を感じるサービス (DEMO)
    感想
    まとめ
  • 感想
    実際に、作ってみて・・・・・・
  • 感想
    大変でした!!
    http://www.flickr.com/photos/elblogazo/10900060/
  • 感想
    でも・・・
  • 感想
    いろいろ・おもしろい!!
    http://www.flickr.com/photos/78391121@N00/338096053/
  • 感想: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/
  • 補足: 「node.js / socket.io-node」って?
    お手軽
    「リアルタイム通信」用
    サーバとライブラリ
  • 補足: 「node.js」って?
    特徴:
    • サーバサイドJavascriptの1つ(奥はC++)
    • V8エンジンを利用
    • イベント駆動型 (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/icools/196158649/
    http://www.flickr.com/photos/devos/115905057/
  • 苦労: 「node.js / socket.io-node」
    特定Session群への
    データPush機能がない
    自分へ返す○
    みんなへ返す○
    グループへ返すorz
  • 自分へ返す
    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
    不要なPushデータは無視!
    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」
    場所:A
    sessionId:1000
    sessionId:1003
    sessionId:1008
  • 苦労: 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
    ( WebSocket…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イベントで解決
    「飛び続けて邪魔」
    「無駄に2種類存在」
    などなど・・・
    いろいろと、文句言って、
    ごめんなさい。
  • 苦労: 「Drag & Drop」
    「dragover」
  • 目次
    「Session 3」って、なんの紹介?
    人を感じるサービス (DEMO)
    場を感じるサービス (DEMO)
    感想
    まとめ
  • まとめ:node.js / socket.io-node
    • 利用だけなら簡単
    • 開発には、慣れが必要(サーバ側JSなど)
    • 基幹部分の改修は面倒(奥の方はC++ )
  • まとめ:node.js / socket.io-node
    • 利用だけなら簡単
    • 開発には、慣れが必要(サーバ側JSなど)
    • 基幹部分の改修は面倒(奥の方はC++ )
    ※ハンゲーム用の
      プラットフォームを作ってしまえばいい
  • まとめ:draganddrop
    • 利用は簡単・・・かな?(今までと・・・)
    • イベントの挙動に気を使う(ブラウザ単位)
  • まとめ:draganddrop
    • 利用は簡単・・・かな?(今までと・・・)
    • イベントの挙動に気を使う(ブラウザ単位)
    ※まだ、無理に使う必要はない
  • 最後に・・・
    最後に・・・
  • 最後に・・・
    今回のデモ
  • 最後に・・・
    今回のデモ
    人を感じるサービス
    場を感じるサービス
  • 最後に・・・
    新技術?
  • 最後に・・・
    新技術?
  • 最後に・・・
    未来のお話し?
  • 最後に・・・
    未来のお話し?
  • 最後に・・・
    「今」
    実現できます
  • 最後に・・・
    「HTML5」も同じ
  • 最後に・・・
    いろいろ試したり・・・
    • Cross Document Messaging
    • Drag & Drop
    • Web Storage
    • Web Database
    • Web Workers
    • Web Socket
    • Offline Web Application
  • 最後に・・・
    これからも、
    注目してます!
  • ご静聴、
    ありがとうございました。