2013 年の研究・開発のまとめです。

1. RTC と NUI と ALM
坂本 啓法
(Keiho Sakapon)

2. もくじ
RTC (Real-time Communication)
ASP.NET SignalR
NUI (Natural User Interface)
Kinect、Leap Motion
各種の入力デバイス
ALM (Application Lifecycle Management)
継続的インテグレーション (CI)
継続的デリバリ (CD)

3. 本内容の位置付け
• 先端技術としての旬は過ぎている
– 次世代と「言われていた」もの
• もう珍しくない
– どんなことができるかくらいは知っておきたい
• 開発生産性も十分高く、各案件で適用可能
– SDK やツールが成熟してきている

4. できる
出典: Keep yourself up to date

5. - Real-time Communication -
RTC

6. リアルタイム コミュニケーション
SNS でよくある光景
投稿した直後に通知が来る
相手の様子がわかる

7. 双方向通信
• 概要
– 通常のプル型のほか、プッシュ型を備える
– 通信の効率化
• Web 用テクノロジ
– WebSocket
– Server-Sent Events
– Ajax Long-Polling
• Web 用フレームワーク
– Socket.IO (Node.js)
– ASP.NET SignalR

8. ASP.NET SignalR
• .NET 向け双方向通信フレームワーク
– RPC 型 API
• 低水準 API をラップ
– クライアントやサーバーの環境に応じて
WebSocket、Ajax Long-Polling などを自動選択
• セルフホストも可能
– IIS を使わず、通常の .NET アプリで利用可能
– System.Web から独立しており、OWIN で動作

9. Demo

10. WebRTC
• 将来の Web の標準仕様
• ブラウザーでもビデオ通話
– カメラとマイクにアクセス
出典: TokBoxのWebRTCプラットホームOpenTokが
ネイティブAndroidアプリをサポート

11. - Natural User Interface -
NUI

12. 人力？
出典: なぜ紅白歌合戦では日本野鳥の会が出るのですか？

13. Kinect
Opect
出典: 手術室向け非接触型画像操作システム Opect
inFORM
出典: MIT is Kinecting to the 3rd Dimension...

14. Kinect for Windows
• 実は機能がいくつかある
– 骨格認識
• 次期バージョンでは指も
– 深度データ
• 物体までの距離
– 音声認識
• マイク配列により方向も
– 表情認識
• 各パーツの座標のほか、表情の意味も
• 範囲 : 40cm ～ 4m

15. Demo

16. Leap Motion Controller
• 手、指および棒状の物体を認識
• 範囲 : ～ 60cm
• USB で接続するだけ

17. Leap Motion Controller
• さまざまな言語に対応
出典: Leap Motion Developer | Developer App Documentation

18. センサー情報のホスト
• センサーから受け取ったデータを
リアルタイムで PC 上でホスト
– ローカルの Web サーバー
• ホスト機能を備える製品も
– Leap Motion
– Kinect for Windows
• WebSocket などの双方向通信を利用
– ブラウザーからもアクセス可能になる

19. いろいろなセンサー・入力装置
–
–
–
–
–
–
–
–
–
GPS
加速度センサー
ジャイロ センサー
照度センサー
電子コンパス
電源状態
カード リーダー (NFC, FeliCa)
脳波センサー
ゲーム コントローラー

20. Demo

21. ゲーム コントローラー
iBUFFALO USB ゲームパッド
出典: コナミコマンドをウェブサイトに実装できる「cheet.js」

22. ハードウェアもオーダーメイドへ
The EX1
出典: ついに電気回路の基板を印刷できる3Dプリンターが登場！！

23. NUI の本質
非接触・ウェアラブルなら natural？
悪い例
・各業務に固有のジェスチャを 100 個覚える
良い例
・ユーザーが回転すると地図も回転する
意味論的に natural かどうかが重要

24. NUI の本質
Puzzle Keyboard
出典: 使わないキーは外してしまえばいいのだ！
パズルのようにカスタマイズできるキーボード

25. HTML の方向性
出典: HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説

26. HTML の方向性
出典: Toward Firefox OS

27. HTML の方向性
• 標準化
– 過去の機能の再整理・直交化
– 将来求められる機能の追加
• ロードマップ
– 2014 年 HTML 5.0 勧告
– 2016 年 HTML 5.1 勧告
量が多く、更新が速い
→どのように開発者を確保するか？

28. 開発メンバーの確保
顧客
重要視されること
過去
Facebook みたいな
チャットを追加してよ。
・メンバーが既に習得済み
・特定の言語・フレームワークでの業務経験
現代
・学習が容易な API・プラットフォーム
・必要に応じて学習すればよい
ドキュメントやサンプルをハックする時代に

29. - Application Lifecycle Management -
ALM

30. ALM
(Application Lifecycle Management)
• アプリケーション (プロダクト) を
中心とする管理の概念
–
–
–
–
–
–
–
–
プロジェクト管理
タスク管理
ソース管理
テスト管理
バグ管理
ビルド管理
リリース管理
フィードバック管理

31. ビルドとデプロイの自動化
• 継続的インテグレーション (CI)
– チェックインと同時にビルド、テスト、デプロイ
– 結合テスト環境構築
• モバイルでのテストが容易に
• 継続的デリバリ (CD)
– ラピッド リリース
• 短いサイクルで新たな価値を提供
– ビジネス優先度の定期的見直し
• 変化への対応

32. クラウドの活用
NIST によるクラウドの定義 (の一部)
出典: クラウドの定義 (Hadoopユーザー会)
クラウドネイティブなデプロイ
出典: Amazonは1時間に最大1000回もデプロイする。
クラウドネイティブなデプロイとはどういうものか？

33. 今回のデモ サイトの構成
ビルド
デプロイ
Visual Studio
Online
Windows Azure
Web サイト
チェックイン
Visual Studio
構築作業は初期設定のみ
あとは自動

34. 参考情報
• RTC, NUI
– センサーのデータを SignalR でホストする (1)～(5)
– WinRT-SignalR-Sample (GitHub)
• ALM
– Windows Azure と Visual Studio Online で
継続的インテグレーション (1)～(2)
– Visual Studio から Windows Azure にデプロイする