【Kinect => Web サンプル作成シリーズ(1回/?回)】 このシリーズで学べること
こんばんは、Microsoft Ventures Tokyo の大田です。
前回までの Kinect v2 開発環境構築シリーズにて、Kinect v2 の開発環境は整いました。
今回からは、サンプルを作りながら Kinect v2 開発に慣れていきましょう。
シリーズ一覧
今回のシリーズの目次をこちらに記します。
今は合計何回で書き終わるか不明なので タイトルには "1回/?回" と書いています。順を追って作成することで効果的に技術を学び、最終的にサンプルが完成するように記事を書いています。
- このシリーズで学べることの解説 (この回です)
- Visual Studio の基本的な使い方
なお、環境は "Windows 8.1 Enterprise" と無料の開発ツールである "Visual Studio Express 2013 for Windows" を使って解説します。
サンプルの内容と目的
サンプルの内容
今回作成するサンプルは、「Kinect v2 で取得した骨格情報をリアルタイム通信で Web サイトへ送信し、HTML5 の機能を使って人の動きを描画する」 という内容です。
イメージをしっかり共有するために、まずは動画を見てみましょう！
イメージは共有できましたね！次に、図を使って全体構成をスムーズに理解します。
イメージ、全体構成はつかめましたか？それでは少し詳しく解説しましょう。
このサンプルを作るために、皆さんと以下のような開発を進めていきます。技術的な用語が多いですが、丁寧に解説するのでご安心を！
- Kinect v2 の機能を使って骨格の位置を表示する Windows ストアアプリを作成する
- Windows ストアアプリ内で骨格の位置情報を json 形式にシリアライズする
- リアルタイム通信を簡単に実装する SignalR というライブラリを利用して、リアルタイムチャットのできる Web サイトを作成する
- Windows ストアアプリ内でも SignalR を活用し、Web サイトに向けて json 形式のデーターをリアルタイムで送信する
- Web サイト側で json 形式のデーターをパースし、骨格の位置情報を抜き取る
- 骨格の位置情報を元に Canvas の機能を使って人の動きを描画する
- Web サイトを検証環境からクラウドへ展開し、複数のメンバーからアクセスできるようにする
サンプル作成の目的
ハンズオンなどでマイクロソフトの技術に初めて触れる人から「マイクロソフトの技術への分かりやすい入門情報が欲しい」という話をよく聞いてきました。
そのため、今回のシリーズでは、「マイクロソフトの技術を総合的に学習する分かりやすい入門情報を提供する」ことを目的に進めていきます。具体的には以下の技術を学べます。
- Kinect v2 での骨格情報の取得方法
- json のシリアライズ/パース方法
- リアルタイム通信の実装方法
- 開発をスムーズに進めるための Visual Studio の便利な利用方法
- アプリケーションをクラウド環境でホストする方法
普段このような情報はバラバラに解説されており、総合的に学習するのは骨が折れるます。そのため、このシリーズを通してスムーズに総合力を鍛えられるコンテンツを提供できるように頑張りますね！
※ このサンプルは、Mashup Award のプレハッカソンで出会った方から「Kinect の情報を Web に送信し初音ミクを躍らせてみたい」というご要望をいただいてから作成したものです。Web 上のミクを躍らせる技術は知らないのですが、楽しそうなので基礎部分だけ作ってみました。
今後の流れ
さて、いきなり開発を初めても良いのですが、開発時に利用するツールである Visual Studio は初めての人にとっては機能が多いと感じられます(使いこなすとめちゃくちゃ便利なんですけど。最初はちょっと大変です)。
そのため、Visual Studio の使い方について簡単な解説をした方が後々楽だと思いますので、まずは以下 2 つの記事を書いて、快適な開発ができるようにさせてください！
- Visual Studio の基本的な使い方の解説
- 知っておくと便利な Visual Studio の機能の解説
それでは、お楽しみに！
