THETAプラグイン開発におけるVysorの使い方【THETAプラグイン開発】

はじめまして リコーの @KA-2 です。

この記事では、THETAプラグイン開発に役立つツールVysorの紹介をします。
THETAプラグインをご存じない人は[こちら](https://qiita.com/mrtakada/items/8f3bbf8d283c26899473)の記事をご覧ください。  
  
Vysorをご存じない方のためにこのツールについて簡単に説明すると……
画面を持たないAndroid機である[RICOH THETA V](https://theta360.com/ja/about/theta/v.html)に、なんと！スマートフォンの画面をつけたかのような状態でデバッグできるという便利ツールです。
Chromeのアプリとしても提供されていますが、今回はパソコン用アプリケーションについて説明しています。
どちらについても使い方に大差はありませんので問題ないと思います。
  
今回は、海外向けに先行して公開していたTHETAプラグイン開発者向けサイト「[Ricoh THETA V Plugin Application Development - Community Guide](http://theta360.guide/plugin-guide/)」の[Vysorの記事](http://theta360.guide/plugin-guide/tutorialvysor/)を翻訳した内容となります。

以降、翻訳記事となります。
  
  
  
Vysorは、アプリの動作を迅速にフィードバックする優れたツールです。 
Vysorは、THETA Vからデスクトップワークステーションに仮想スクリーンを表示します。
Vysorは、次の開発プロセスに役立ちます。 

 1. プラグインがインストールされていることを確認します。
 2. プラグインのアクセス権を設定します。
 3. THETA Vをインターネットに接続してネットワークテストを行います。
 4. プラグインの起動を確認します。
 5. サードパーティのスマートフォン用Androidアプリの機能をテストして、自分のアプリを構築する前にTHETA Vで動作するかどうかを確認します。
 6. THETA Vの画像を素早く見る・送信するなどして、ダイレクトに機能テストができます。



## 1 Vysorをインストールする
[こちらのページから](https://www.vysor.io/)Vysor をインストールしてください。

![01_visor-home.png](https://qiita-image-store.s3.amazonaws.com/0/265455/30b4d116-05fb-0b4c-fcd3-726db3e0d087.png)


インストールが終わったらTHETA VをパソコンとUSBケーブルで接続してください。




## 2 デバイスとして RICOH THETA V を選択する

Vysorを起動すると、デバイスRICOH THETA_Vを選択することができます。 Viewを押します。

![02_vysor-device.png](https://qiita-image-store.s3.amazonaws.com/0/265455/0d2b4587-896e-d3ec-79e9-36ded4e0f4d8.png)



Vysorが THETA V の画面を表示します。

![03_vysor-start.png](https://qiita-image-store.s3.amazonaws.com/0/265455/998ecc7a-82bf-713e-16ec-c1d2a81516b6.png)




## 3 インストール済みのアプリケーションとプラグインを確認する

ホームボタンをクリックします。
![04_home-button.png](https://qiita-image-store.s3.amazonaws.com/0/265455/fb836a0a-46ff-de78-3f62-c3d269e2d402.png)



任意のランチャーが動作します。今回の例ではスナップドラゴンランチャーを使用しています。
![05_snapdragon.png](https://qiita-image-store.s3.amazonaws.com/0/265455/34e397af-3f38-88be-12dd-6d27a51b0fff.png)



すべてのアプリが表示されます。
![06_plugin-sample.png](https://qiita-image-store.s3.amazonaws.com/0/265455/f99d19eb-acf6-e31c-e1ef-05346aac6ed3.png)


緑の四角で囲ったアプリが、自作のアプリケーションです。名称は開発者が自由に決められます。
今回は「PluginSample」という名称にしています。




## 4 プラグインの権限を確認する

アプリの設定に移動する。
![07_plugin-settings.png](https://qiita-image-store.s3.amazonaws.com/0/265455/1544935c-cf2e-bdcd-3925-f5b5dbc06d8b.png)



カスタムアプリを開発するときは、StorageとCameraの権限を設定する必要があります。
![08_storage-camera.png](https://qiita-image-store.s3.amazonaws.com/0/265455/8ffc824b-cf26-a808-fcea-dcf8425b497c.png)


SDKのPlugin Applicationには、自動的に許可が設定されています。





## 5 Vysorを使用してクイックテスト用のアプリケーションを起動する

Vysor内のプラグインをクリックすると、素早くテストをするためにVysorで直接アプリを起動できます。
（サードパーティのスマートフォン用AndroidアプリがTHETA Vで動作するかを確認する時も同様です）
![09_launch-app.png](https://qiita-image-store.s3.amazonaws.com/0/265455/93071aaf-3258-4abf-2619-2950e7aff502.png)





## 6 Vysorを使ってアプリケーションの起動を検証する
THETA VをVysorに接続。THETA Vのモードボタンを長押ししてプラグインモードにします。
その後、THETA Vがプラグインモードになると、自動的にアクティブなプラグインが起動します。
Vysorでは、これを視覚的に見ることができます。



## 7 Vysorを使用してプラグインのインストールを確認する

Vysorはインストールしたプラグインをアイコンとして表示します。
これは、プラグインが正しくイントールされたことを確認する簡単な方法です。

THETA Vに複数のプラグインをインストールすることができます。
以下の例では、以前にインストールしたPluginSampleに加えて、新しいプラグインConstructionPluginをインストールしたことを確認するためにVysorを使用しています。
![10_vysor-selection.png](https://qiita-image-store.s3.amazonaws.com/0/265455/88bb7944-6ab1-0527-d495-61fb036798c5.png)


この例では、新しいConstructionPluginでAPIを選択する前に、Vysorを使ってパーミッションを設定しています。  
設定 - >アプリ - > YourAppName　と辿ると設定できます。
![11_vysor-settings.png](https://qiita-image-store.s3.amazonaws.com/0/265455/4ebd1aee-6f26-8b1e-b82f-37fb1f83d437.png)





## 8 Vysorで画像ファイル名を確認する

adbで画像をダウンロードするには、まず正確なファイル名を見つける必要があります。 
Vysorを使用してファイル名を見つけることができます。 

ファイルマネージャーに入り 
![12_filemanager.png](https://qiita-image-store.s3.amazonaws.com/0/265455/1bcdd867-81cc-1d09-12e6-a7c61a8311b1.png)



DCIMの中を表示します。 
![13_DCIM.png](https://qiita-image-store.s3.amazonaws.com/0/265455/95016f99-b39d-6bf1-2424-206603fb92ec.png)


さらに100RICOHの中を表示します。 
![14_100RICOH.png](https://qiita-image-store.s3.amazonaws.com/0/265455/8389419b-ac3f-eb4a-a7ec-93002a18881c.png)


THETA Vの中に沢山の画像がある場合は、リストの一番下までスクロールする必要があります。 
![15_filename.png](https://qiita-image-store.s3.amazonaws.com/0/265455/4329e892-c2b6-6e19-6415-4a4599ad6df8.png)



あなたのファイル名、最新の画像があります。この例では、R0010047.JPGです。 
その後adb pullを使用してローカルマシンに画像をダウンロードします。 


```
$ adb pull /sdcard/DCIM/100RICOH/R0010047.JPG
/sdcard/DCIM/100RICOH/R0010047.JPG: 1 file pulled. 21.2 MB/s (2790527 bytes in 0.126s)
```




## 9 Vysorを使ってWiFiとテストアプリを設定する

> ＜翻訳者追記＞ 
> THETA V とパソコンをUSBケーブルで接続している時にはWi-Fi接続が不安定となります。 
> 事前に以下ADBコマンドを実行しておくことをお奨めいたします。 
>  
> ```
> $ adb shell settings put global usb_debug true
> ```

Vysorを使ってTHETA Vをインターネットに接続することができます。
これは、通常のAndroidスマートフォンをインターネットに接続するのと同様です。 
Vysorのキーボードと戻るボタンを有効にするのが難しい部分です。


### 9.1 THETA Vのカメラプロセスを無効にする
THETA Vのカメラプロセスは、キーボードとバックボタンを妨害します。
キーボードと戻るボタンを使用するには、カメラプロセスの処理を停止する必要があります。 

このビデオ「[Getting Vysor Back Button to Work - RICOH THETA Development](https://www.youtube.com/watch?v=dMBLHgyGZe4&feature=youtu.be)」を表示すると、セットアッププロセスが表示されます。

以下の手順についても説明します。


#### 9.1.1 THETA VをVysorに接続する
![16_vysor-view_2.png](https://qiita-image-store.s3.amazonaws.com/0/265455/30cb8e26-f3ab-bd21-f3e9-06ec747e96be.png)



#### 9.1.2 設定に移動する
> ＜翻訳者追記＞
> 9.1.2～9.1.7について、以下ADBコマンドでも代用できます。
> 
> ```
> $ adb shell am force-stop com.theta360.receptor 
> ```  

アプリを展開する。
![17_apps.png](https://qiita-image-store.s3.amazonaws.com/0/265455/40a79b64-5508-42a0-83b0-81ae943fee3f.png)


設定に移動します。
![18_settings.png](https://qiita-image-store.s3.amazonaws.com/0/265455/bdcfc4e3-0ae2-fb33-5f64-38ec59993188.png)



#### 9.1.3 開発者オプションに移動
THETA Vに[デベロッパーオプション](https://developer.android.com/studio/debug/dev-options)が表示されていない場合は、About phone に進み、Build numberを7回タップしてデベロッパーオプションを有効にする必要があります。

![19_developer-options.png](https://qiita-image-store.s3.amazonaws.com/0/265455/019af5a3-8b0c-531b-7a7e-729472654013.png)



#### 9.1.4 実行中のサービスへ移動

実行中のサービスへのアクセス。

![20_running-services.png](https://qiita-image-store.s3.amazonaws.com/0/265455/2612b52f-c0d0-c3c4-fefb-e4533b036edc.png)



#### 9.1.5 RICOH THETA Vプロセスの選択

![21_ricoh-theta-process.png](https://qiita-image-store.s3.amazonaws.com/0/265455/32f50d01-f279-bc19-60c2-31bff13ff96a.png)



#### 9.1.6 CameraServiceの検索

![22_camera-service.png](https://qiita-image-store.s3.amazonaws.com/0/265455/65d632da-ef8c-5339-160d-15f412bc657c.png)



#### 9.1.7 サービスを停止する

![23_camera-stop.png](https://qiita-image-store.s3.amazonaws.com/0/265455/f287d777-55c9-56fa-cd5d-52d97db109ac.png)



#### 9.1.8 キーボードのテスト

![24_notepad.png](https://qiita-image-store.s3.amazonaws.com/0/265455/e061237d-02b6-ac2c-fca8-fc89193bd941.png)



#### 9.1.9 戻るボタンをテストする
![25_back-button.png](https://qiita-image-store.s3.amazonaws.com/0/265455/f0da2860-6657-c4c9-4117-b18d9c14bb6f.png)

![26_image-directory.png](https://qiita-image-store.s3.amazonaws.com/0/265455/ce4bffea-e93b-7c66-bf94-702f81b282fc.png)




以上、翻訳記事でした。

THETAプラグイン開発に興味を持たれた方はぜひパートナープログラムにご登録ください！
なお、登録時に申請したシリアルナンバーのTHETAについてはメーカーサポート対象外になりますので、ご注意ください。 

- THETAプラグインをご存じない方は[こちら](https://github.com/ricohapi/theta-api-specs/blob/main/core/products/theta-plugin.md)をご覧ください。 
- 興味を持たれた方は[Twitter](https://twitter.com/thetaplugin)のフォローと 
[THETAプラグイン開発コミュニティ(Slack)](https://join.slack.com/t/thetadeveloper/shared_invite/enQtNzcxODI2MTk2ODg0LWY5YmU2ZTIxNGYwNzlmNWZjMWMyMWFlMzY3ZmQ3NGU3ZjZiZjI0Njk4MGIxMDU5NDJiMzQ4Y2FkNDEzYmFlNGU)への参加もよろしくおねがいします｡