Vuforia Studio RealWear備忘録：日本語ボイスコマンドを簡単作成

#はじめに

Vuforia Studioでは、ウェアラブルデバイスの RealWear HMT-1と、HMT-1Z1用のコンテンツを簡単に作成でき、その中で日本語ボイスコマンドを簡単に追加できる。その例を備忘録としておく。

[RealWear紹介動画 @Youtube](https://www.youtube.com/embed/sYNCVnwqE4M?rel=0)より
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/048a5cf3-623e-705c-5458-0fd7bb02fbf6.png)


RealWearのマイクにはノイズキャンセリングが搭載されていて、周囲に騒音があっても、ボイスコマンドをしっかりと認識してくれる。日本語の認識力も非常に高い。ボイスコマンドでの操作性に優れていて完全にハンズフリー操作ができるので、両手を使い作業をしながらでも簡単に利用できる。そのボイスコマンドを簡単に追加できるのはすごい。
RealWearには、日本語ボイスコマンド以外にも長所が多い。防塵防水能力は IP66 であり、塵は侵入せず、強い雨の中で使っても水は侵入しない。強い日光下でもはっきりと画面を見ることができる。なので、屋内だけでなく、屋外にも強い。バッテリー駆動時間も長い。さらには、MHT-1Z1 は日本のTIIS Zone1防爆認証済とのことで特殊な環境下でも利用できる。

#前提

Vuforia Studio で RealWear用コンテンツを初めて作成する人が対象。もちろん、既に作成経験がある人でもよい。
尚、Vuforia Studioで作成したARの実行確認には、Vuforia Viewアプリをインストール済の RealWearが必要。RealWearは、WiFi接続で Vuforia Studioで作成したコンテンツの公開するサーバー（Vuforia Experience Server）に接続ができることが必要。
日本語ボイスコマンドを使うには、RealWearの言語が日本語になっていること。

#RealWear用の動画再生コンテンツを作成

###動画ファイルを準備する

サポートしている .mp4、.webm、の動画ファイルを準備する。

###RealWear用プロジェクトを作成する

新規ARプロジェクトを「2D Eyewear」で作成を開始する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/a224b80d-e77e-b795-b3ed-9b379af80947.png)

###画面の背景を変更する

新規作成した結果を開いてみる。コンテンツ作成に使用できるウィジェットの一覧と、画面キャンパスが表示される。RealWear HMT-1 を選択して、画面サイズを RealWear用にしておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/82453740-d7ec-8da4-34b9-dd9947356f16.png)

プレビューしてみる。画面はすべて真っ白。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/ca3b597f-8e98-a31c-97e9-4627b9db07a4.png)

RealWearの画面だと、背景は白よりも暗くしたい。そこで、まずは、画面の背景を暗くする。画面左上の「テーマ」をクリックして、テーマエディタ画面にて、「2Dアイウェア-暗い」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/e79d0bf1-51a1-05ee-92b4-691cd5bb9dd0.png)

再びプレビューしてみると、画面が暗くなった。これでよさそうだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/1fab8628-75e0-2722-487d-3d07126df2cf.png)

尚、プレビューと実際では画面背景は暗くなるが、編集画面では背景は白いままだ。

###画面レイアウトを追加する

スマホやタブレット用のデバイスプロジェクトを作成すると、2Dレイアウト画面は、上、左、中央、右、下にはじめからパネル分けされているが、RealWear用のプロジェクトを作成すると、そうした初期レイアウトが無い。なので、まずはレイアウトから作成する。画面左の「ホーム」をクリックして画面編集に戻り、グリッドレイアウトウィジェットをドラッグしてキャンパスにドロップする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/932da38b-5d27-5cca-b114-4bf3a644b862.png)
縦方向を上、中、下に三分割するために、行（row-1）を選択した状態で、画面右下の「＋行を追加」を2回クリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/1ccfc0e0-7eae-ba67-b68e-4133e250aa6f.png)
上行（row-1）を選択して画面右の行の高さに「70px」、中行（row-2）を選択して画面右の行の高さに「310px」、下行（row-3）を選択して画面右の行の高さに「70px」をそれぞれ入力する（合計は RealWearの画面高さの 450px に合わせた）と、画面を縦方向に三分割できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/f0e3740b-9617-98c0-ce69-2283a8f2d2af.png)
次に、中行を横方向に三分割する。まずは、グリッドレイアウトウィジェットをドラッグして中行のところへドロップして配置する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/61991dd3-512a-94b0-21d4-34d65d052a40.png)
配置したグリッドレイアウトの行（row-4）を選択して、行の高さに「310px」を入力する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/7a5f3ac7-3695-b8da-9cb7-ee5735fa8280.png)
列（column-4）を選択して、画面右下の「＋列を追加」を 2回クリックして、列を 2つ追加する。また、各列の固定の列サイズに、左列から順に「100px」、「654px」、「100px」を入力する（合計は RealWearの画面の幅の 854px に合わせた）。編集画面上での各列の幅は入力値の比に配分されていないが、プレビューや実際ではちゃんと配分される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/52a141a4-15b6-45de-e56c-1403ac17315c.png)

###ビデオウィジェットを追加する

それでは、ビデオ再生のためのビデオウィジェットを配置する。画面の左下からビデオウィジェットをドラッグ＆ドロップで、中央の列に配置する。配置したら、画面右上の「ビデオのソース」の右の緑の「＋」をクリックして、再生する動画ファイル（この例では、sapporo.mp4）を選択して指定する。そして、プリロードで「コンテンツ」を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/dd90c9ae-e18f-00b4-4027-a68ceed1b639.png)

###ボイスコマンドで操作可能なビデオ再生ボタンを追加する

再生用のボタンを追加する。ボタンウィジェットを左から二つ目の列にドラッグ＆ドロップで配置する。テキストに「再生」を入力する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/fafaddae-5ae0-bb73-24fa-136d1550f0b1.png)
次に、右下にあるクリックの左の矢印アイコンをドラッグして、ビデオウィジェットにドロップする。バインディングターゲットを選択の窓が表示されるので、再生をチェックしてバインドをクリックする。これで、ボタンをクリックしたらビデオを再生するようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/b5931d41-2120-67da-d579-dc76bd8411a7.png)
実は、これだけで、RealWear用の日本語ボイスコマンドを追加したことになる。このボタンの場合は、「再生」と言うと認識されて、ビデオ再生を開始するようになる。Vuforia Studioで追加したボタンのテキストがそのまま日本語ボイスコマンドになるから簡単！

###ボイスコマンドで操作可能なビデオ一時停止ボタンを追加する

同様にして、再生の一時停止用のボタンを追加する。ボタンウィジェットを再生ボタンの一つ右の列にドラッグ＆ドロップで配置する。テキストに「停止」を入力する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/f512de30-32e9-c3a4-2113-36f5e2642056.png)
次に、右下にあるクリックの左の矢印アイコンをドラッグして、ビデオウィジェットにドロップする。停止をチェックしてバインドをクリックする。これで、ボタンをクリックしたらビデオを一時停止するようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/f485c2ce-b6b2-1cfe-74ef-2cce918ae15c.png)
こちらも同様に、RealWear用の日本語ボイスコマンドになる！

###プレビューで確認する

プレビューをクリックして、プレビューを開始する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/3cc5e955-acb0-b8f8-8122-9c10065369c6.png)
再生ボタンをクリックするとビデオを再生し、停止ボタンをクリックするとビデオ再生を一時停止した。
![SapporoRwPreview.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/c374a001-a34f-1b95-84a4-50f546064b09.gif)
RealWear で見るときには、クリックの代わりに、「再生」と言ったり、「停止」と言って、日本語ボイスコマンドで操作できるはず。

###パブリッシュして、RealWearに呼び出して確認する

新規に作成したプロジェクトの場合、パブリッシュの前に少し設定が必要だ。今回は ThingMarkから開始はしないので、エクスペリエンスの ThingMark関連付けを「なし」に変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/63f53b86-8cb1-06c3-75ef-ffcb83e57004.png)
また、サーバーに接続して認証確認していなければ、認証確認を実施する。
画面左で情報をクリックして、認証をクリックし、ユーザー名とパスワードを入力して認証する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/b31953a0-03a1-d9b4-5922-5019601d63a2.png)

準備はできた。パブリッシュをクリックして、パブリッシュを実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/3dd89bef-f778-09e6-ce3e-fdaeb38db0b6.png)
エラー表示がなく成功したら、共有の「エクスペリエンスを共有」をクリックして、QRコードを表示する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/6ccc75dd-9dd2-1ec3-398c-b4d59a676747.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/6ef2c69c-b36f-bb6a-c2bc-e419c1b49e7e.png)

RealWear にて、ボイスコマンドで、「マイ プログラム」、「ビュー」で Vuforia Viewを立ち上げて、上記の QRコードを読み取る。Vuforia Studioで認証を必要と設定している場合はユーザー名とパスワードを要求されるので、RealWearで文字入力をして認証する。作成したコンテンツが表示されたら、「再生」、「停止」と日本語ボイスコマンドを試す。おぉ！ ボタンの表示名をボイスコマンドと認識して、ビデオの再生と一時停止ができた！
![RwSapporo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/8e71e1e7-1fbc-7233-9d2e-a2a1c965c691.gif)
RealWearの画面をPCにキャストしたものの録画なので動画が少しカクカクしているが、実際のRealWearの画面では鮮明に滑らかに動画を見れているので大丈夫。

尚、コンテンツを完全に終了するには、ボイスコマンドで「起動中のアプリ」、「すべてを消去する」などで、Vuforia Viewアプリを終了する。

#おわりに

Vuforia Studioでは、プログラミングせずに簡単に RealWear用のコンテンツを作成でき、またその中にやはりプログラミング無しに日本語ボイスコマンドを追加できた。簡単！
今回は、１つのビデオ再生だけのコンテンツなので、RealWearの標準機能でビデオファイルを選択して再生するのと大差ない。しかし Vuforia Studioでは画面編集では、タイトルや説明を追加、同時に表示するイメージを追加、ビデオの切り替えを追加、手順にそっての表示切り替えを追加など、複合的な表示を簡単に作成できる点が優れる。


#参考

・[RealWear HMT-1 製品概要](https://www.realwear.jp/downloads/J_HMT-1_FINAL.pdf)

・[防爆対応：RealWear HMT-1Z1 製品概要](https://www.realwear.jp/downloads/J_HMT-1Z1_FINAL.pdf)

・[Vuforia Studio CSS備忘録：ボタンウィジェットのスタイルを変更する](https://qiita.com/tm181001/items/1faed0493cfde55cc063)