KinectJyannken Online は3つの要素を学びながら、Kinectで遊べるサンプルプロジェクトです。
- Kinect での手の状態検知(グー、チョキ、パー)の実装方法
- Windows ストアアプリから Web アプリへのリアルタイム通信実装方法。リアルタイム通信にはSignalRという技術を使っています。
- Web アプリ側の実装
説明はリクエストがあれば順次追加していきますが、まずは基本的な流れをここに記載していきます。
- Windows 8 以上の開発用PC。PCの詳細な要件はこちらを参照。
- 開発用PCにKinect for Windows SDK 2.0がインストールされている
- Kinect v2.0センサー。マイクロソフトストアで購入するなどして入手してください。
- Microsoft Azure のサブスクリプション
- * 無償版の入手はこちらから。
- Visual Studio 2013
-
- インストール方法などはこちらを参照してください。
- [Download ZIP]でプロジェクトファイルをダウンロードします。
- ZIP ファイルを展開します。
- "\KinectJyannken-master\KinectJyannken-master\step3\KinectJyannkenOnline_Web\KinectJyannkenOnline_Web.sln"をダブルクリックして開きます。
- Visual Studio の画面が表示されます。
- 画面右手の[ソリューション エクスプローラー]ウィンドウにある"KinectJyannkenOnline_Web"プロジェクトを右クリックして、[発行]をクリックします。
- [Webを発行]画面が表示されるので、[Microsoft Azure Web Apps]を選択します。
- [Select Existing Web Apps]画面が表示されるので、Azure サブスクリプションでサインイン後、[Existing Web Apps]ドロップダウンボックスで既存の Web Apps を選択するか、[新規]で新しい Web Apps を選択後、[OK]ボタンをクリックします。
- [Webを発行]画面に戻るので、[発行]ボタンをクリックします。
- ブラウザが起動し、[Kinectじゃんけんオンライン]ページが表示されます。このページの URL をメモしてください。この後の手順で使用します。 これで、Kinect アプリから受信した情報を表示するための Webページの準備が整いました。
- Kinect をPCにつなぎます。
- "KinectJyannken-master\KinectJyannken-master\step3\KinectJyannkenOnline_Client\KinectJyannkenOnline_Client.sln"をダブルクリックして開きます。
- Visual Studio の画面が表示されます。
- 画面右側の[ソリューションエクスプローラー]ウィンドウで"MainPage.xaml.cs"ファイルをダブルクリックします。
- 画面**のコーディング画面で、140行目を確認します。行番号が表示されていない方は、こちらの情報を参照してください。
- "var hubConnection = new HubConnection("通信先のURLを入力してください。");"というコードがあるため、[Azure Web Apps へのプロジェクトの発行]でメモした URL を使い、"var hubConnection = new HubConnection("http://kinectcamptest.azurewebsites.net/");" のように書き換えます。
- [F5]キーを押して、アプリケーションを起動させます。
- Kinectの前でグー、チョキ、パーをすると、[Azure Web Apps へのプロジェクトの発行]でブラウザで表示されたページに"グー","チョキ","パー"と表示されます。
Azure Web Apps に多くの人がアクセスした際にさばききれなくなることがあります。 そんな時に備えて、Azure Web Apps のパワーアップ(質・量)をする方法を案内します。
- Azure の管理ポータルへアクセスします。
- 画面左側の[Web アプリ]を選択します。
- 画面右側で[Azure Web Apps へのプロジェクトの発行]で選択した Web Apps を選択します。
- [スケール]をクリックします。
- [app service プランの価格レベル]を"STANDARD"に変更します。これで、質レベルが強化されました。
- [インスタンス サイズ]は"S"になっていますが、好きなサイズに変更してみてください。
- [インスタンス数]を好きなサイズに変更して下さい。これで対応をするWebアプリの数が強化されました。
- 画面下側の[保存]ボタンをクリックし、変更を保存します。
これで、下記3つの要素技術を使ったサンプルを動作させることができました。
- Kinect での手の状態検知(グー、チョキ、パー)の実装方法
- Windows ストアアプリから Web アプリへのリアルタイム通信実装方法。リアルタイム通信にはSignalRという技術を使っています。
- Web アプリ側の実装
# サンプル解説
coming soon
SignalRの実装はこちらをベースに開発しています。 なお、jquery, signalrのjsファイルのバージョンが異なるので、そのままコピペをするとエラーが発生します。 そのため、バージョン情報やパス情報などは合わせるように注意してください。
coming soon