初めてのInstaVR

はじめに

最近何かと話題にあがることが多い、VRアプリ作成ツール「InstaVR」。ソフトウェアのインストールもプログラミングも不要で、Web画面から簡単にVRアプリを作ることができると注目されているサービスです。JAWS DAYS 2017でもデモブースを出されており、体験させてもらいました。

そこで早速試してみました！

必要なもの

全天球カメラ

VRとして楽しむコンテンツには360度パノラマ画像または動画が必要です。iPhoneのカメラでもパノラマ画像を撮影することはできますが、ここはやはり綺麗なコンテンツが欲しいところ。今回はRICOH THETA Sを用意しました。

InstaVRのアカウント

InstaVRの有償利用は月額199ドルですが、とりあえず試すだけなら一部機能に制限のある、無料のお試しアカウントが提供されています。今回は無料アカウントを使用しました。

InstaVRのWebサイトの右上にある、[無料アカウント作成]をクリックします。

アカウント作成画面が表示されます。必要情報を入力し、[アカウントを作成する]ボタンをクリックします。

ログインされるとすぐにチュートリアルの紹介画面が表示されますが、今回は閉じちゃいます。

InstaVRの管理画面が表示されました。

やってみる

VRコンテンツの追加

[VRコンテンツを追加する]をクリックします。

[ファイル選択]画面が表示されます。THETA Sで撮影した画像ファイルを2つ、ドラッグアンドドロップしてみます。

アップロードした画像のうち、1つをクリックします。

追加されました。更に[VRコンテンツを追加する]をクリックします。

2つめの画像をクリックします。

追加されました。

Linkを設定する

Linkは、VRコンテンツの中に他のVRコンテンツへのポインタを設定する機能です。1つめの画像を選択し、[+Link]ボタンをクリックします。

今回は部屋の入り口にLinkを置いてみます。画面右側の[リンク先]をクリックします。

2つめの画像をクリックします。

リンク先が設定されました。これで「1つめの画像の入り口にあるLinkをクリックすると2つめの画像に飛んでいく」ようになります。

2つめの画像にも同じようにLinkを設定し、1つめの画像をリンク先に設定します。これで交互に行き来ができるようになりました。

Hotspotを設定する

HotspotはVRコンテンツの中に画像や動画などのコンテンツを埋め込む機能です。画面下部にある[Hotspot]ボタンをクリックします。

Hotspotが追加されます。今回はテレビに設置してみました。画面右側の[ファイル]-[追加する]をクリックします。

埋め込むための動画ファイルをアップロードしました。

ファイルが追加されています。

Actionを設定する

ActionはVRコンテンツの中に電話発信やWebリンクなどを埋め込む機能です。画面下部にある[Action]ボタンをクリックします。

今回はホワイトボードに設置してみました。画面右側の[アクション種類]を[Webを開く]に、URLをクラスメソッドのコーポレートWebサイトに設定してみました。

Brandingの設定

Brandingではアプリのアイコンやアプリ名、スプラッシュ画像、ホームスクリーンなどが変えられます。こちらは一部有償アカウントでないと使えません。

Screenの設定

Screenではホームスクリーンの様々なオプションが設定できます。

パッケージを作成する

Packageからパッケージを作成することができます。無償版で作れるのはAndroid、iOS、Gear VR、Daydream、Oculus Rift、Playstation VRで、WebとHTC VIVEは有償版のみです。

[パッケージ作成 Android]をクリックすると、以下のようにパッケージ作成が行われます。

作成したパッケージは、[Download]画面からダウンロードできます。

パッケージを動かしてみる

さて、作成したAndroidパッケージを動かしたいのですが、あいにくの所Android端末を持っていません。そこで今回はBlueStacksを使ってMac Book Pro上でAndroidパッケージを動かしてみました。その結果が以下です。

Link、Hotspot、Action、それぞれちゃんと動いています！

さいごに

VRアプリをすごく簡単に作ることができました。これは面白いですね。オフィスの紹介なんかを簡単に作れるのは企業PRとしても役立つと思います。