RTC と NUI と ALM
-
Upload
keiho-sakapon -
Category
Technology
-
view
1.051 -
download
6
description
Transcript of RTC と NUI と ALM
![Page 1: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/1.jpg)
RTC と NUI と ALM
坂本 啓法
(Keiho Sakapon)
![Page 2: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/2.jpg)
もくじ
RTC (Real-time Communication)ASP.NET SignalR
NUI (Natural User Interface)Kinect、Leap Motion
各種の入力デバイス
ALM (Application Lifecycle Management)継続的インテグレーション (CI)
継続的デリバリ (CD)
![Page 3: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/3.jpg)
本内容の位置付け
• 先端技術としての旬は過ぎている
– 次世代と「言われていた」もの
• もう珍しくない
– どんなことができるかくらいは知っておきたい
• 開発生産性も十分高く、各案件で適用可能
– SDK やツールが成熟してきている
![Page 5: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/5.jpg)
RTC
- Real-time Communication -
![Page 6: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/6.jpg)
リアルタイム コミュニケーション
SNS でよくある光景
相手の様子がわかる
投稿した直後に通知が来る
![Page 7: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/7.jpg)
双方向通信
• 概要
– 通常のプル型のほか、プッシュ型を備える
– 通信の効率化
• Web 用テクノロジ
– WebSocket
– Server-Sent Events
– Ajax Long-Polling
• Web用フレームワーク
– Socket.IO (Node.js)
– ASP.NET SignalR
![Page 8: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/8.jpg)
ASP.NET SignalR
• .NET 向け双方向通信フレームワーク
– RPC 型 API
• 低水準 API をラップ
– クライアントやサーバーの環境に応じてWebSocket、Ajax Long-Polling などを自動選択
• セルフホストも可能
– IIS を使わず、通常の .NET アプリで利用可能
– System.Webから独立しており、OWIN で動作
![Page 9: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/9.jpg)
Demo
![Page 10: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/10.jpg)
WebRTC
• 将来のWeb の標準仕様
• ブラウザーでもビデオ通話
– カメラとマイクにアクセス
出典: TokBoxのWebRTCプラットホームOpenTokがネイティブAndroidアプリをサポート
![Page 11: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/11.jpg)
NUI
- Natural User Interface -
![Page 13: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/13.jpg)
Kinect
出典: MIT is Kinecting to the 3rd Dimension...
出典: 手術室向け非接触型画像操作システム Opect
Opect
inFORM
![Page 14: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/14.jpg)
Kinect for Windows
• 実は機能がいくつかある
– 骨格認識
• 次期バージョンでは指も
– 深度データ
• 物体までの距離
– 音声認識
• マイク配列により方向も
– 表情認識
• 各パーツの座標のほか、表情の意味も
• 範囲 : 40cm ~ 4m
![Page 15: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/15.jpg)
Demo
![Page 16: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/16.jpg)
Leap Motion Controller
• 手、指および棒状の物体を認識
• 範囲 : ~ 60cm
• USB で接続するだけ
![Page 17: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/17.jpg)
Leap Motion Controller
• さまざまな言語に対応
出典: Leap Motion Developer | Developer App Documentation
![Page 18: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/18.jpg)
センサー情報のホスト
• センサーから受け取ったデータをリアルタイムで PC 上でホスト
– ローカルのWeb サーバー
• ホスト機能を備える製品も
– Leap Motion
– Kinect for Windows
• WebSocketなどの双方向通信を利用
– ブラウザーからもアクセス可能になる
![Page 19: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/19.jpg)
いろいろなセンサー・入力装置
– GPS
– 加速度センサー
– ジャイロセンサー
– 照度センサー
– 電子コンパス
– 電源状態
– カードリーダー (NFC, FeliCa)
– 脳波センサー
– ゲームコントローラー
![Page 20: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/20.jpg)
Demo
![Page 21: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/21.jpg)
ゲーム コントローラー
出典: コナミコマンドをウェブサイトに実装できる「cheet.js」
iBUFFALO USBゲームパッド
![Page 23: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/23.jpg)
NUI の本質
非接触・ウェアラブルなら natural?
悪い例
・各業務に固有のジェスチャを 100個覚える
良い例
・ユーザーが回転すると地図も回転する
意味論的に natural かどうかが重要
![Page 24: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/24.jpg)
NUI の本質
出典: 使わないキーは外してしまえばいいのだ!パズルのようにカスタマイズできるキーボード
Puzzle Keyboard
![Page 25: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/25.jpg)
HTML の方向性
出典: HTML5とWebSocket / WebRTC / Web Audio API / WebGL技術解説
![Page 27: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/27.jpg)
HTML の方向性
• 標準化
– 過去の機能の再整理・直交化
– 将来求められる機能の追加
• ロードマップ
– 2014 年 HTML 5.0 勧告
– 2016 年 HTML 5.1 勧告
量が多く、更新が速い→どのように開発者を確保するか?
![Page 28: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/28.jpg)
開発メンバーの確保
重要視されること
過去
・メンバーが既に習得済み・特定の言語・フレームワークでの業務経験
現代
・学習が容易な API・プラットフォーム・必要に応じて学習すればよい
ドキュメントやサンプルをハックする時代に
Facebookみたいなチャットを追加してよ。
顧客
![Page 29: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/29.jpg)
ALM
- Application Lifecycle Management -
![Page 30: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/30.jpg)
ALM (Application Lifecycle Management)
• アプリケーション (プロダクト)を中心とする管理の概念
– プロジェクト管理
– タスク管理
– ソース管理
– テスト管理
– バグ管理
– ビルド管理
– リリース管理
– フィードバック管理
![Page 31: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/31.jpg)
ビルドとデプロイの自動化
• 継続的インテグレーション (CI)
– チェックインと同時にビルド、テスト、デプロイ
– 結合テスト環境構築
• モバイルでのテストが容易に
• 継続的デリバリ (CD)
– ラピッドリリース
• 短いサイクルで新たな価値を提供
– ビジネス優先度の定期的見直し
• 変化への対応
![Page 32: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/32.jpg)
クラウドの活用
出典: クラウドの定義 (Hadoopユーザー会)
NISTによるクラウドの定義 (の一部)
出典: Amazonは1時間に最大1000回もデプロイする。クラウドネイティブなデプロイとはどういうものか?
クラウドネイティブなデプロイ
![Page 33: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/33.jpg)
今回のデモ サイトの構成
Visual Studio
Online
Windows AzureWeb サイト
Visual Studio
チェックイン
デプロイ
ビルド
構築作業は初期設定のみあとは自動
![Page 34: RTC と NUI と ALM](https://reader034.fdocuments.us/reader034/viewer/2022042521/559222eb1a28abb1068b465b/html5/thumbnails/34.jpg)
参考情報
• RTC, NUI
– センサーのデータを SignalRでホストする (1)~(5)
– WinRT-SignalR-Sample (GitHub)
• ALM
– Windows Azure と Visual Studio Online で継続的インテグレーション (1)~(2)
– Visual Studio からWindows Azure にデプロイする