Remotte（リモッテ）を利用者として使う

[前回](https://qiita.com/remotte_jp/items/324f99727c68392b80e5 "IoT プラットフォーム「リモッテ」でアプリを実行してみた")は管理ツール上でアプリを実行してみた。今回はより実際的な利用方法として、ステーション上でアプリが実行されている状態で、利用者として Android と iOS 端末から使ってみる。

[リモッテ](https://www.remotte.jp/ "ホームページ")では、ユーザーを利用者、管理者、開発者の３つに分けている。これまでやってきた、ステーションを用意してアプリをインストールしたり実行管理を行うのは「管理者」の役割と位置付けられる。一方で、アプリがどこで実行されていようと、どういう仕組みで実行されていようと関係なく、とにかくやりたいことをさせてくれというのが「利用者」という訳だ。
「開発者」とは、「リモッテ・ストア」からダウンロードしてきたアプリや構成要素を改造したり、Python コードを書いてアプリを新規に作成する人をいう。Qiita を読んでいる人達はほとんどの場合これら３つの全てに当てはまる。
### 準備
<font color="Red"><strong>ウェブブラウザの確認！</strong></font>
リモッテでは、ウェブブラウザとステーションをサーバーを介すことなく直接接続するための WebRTC というピア・ツー・ピアの通信技術を用いているが、各ブラウザメーカーの大人の事情で、この技術をサポートしているものとサポートしていないものがある。リモッテ社のホームページの[ユーザーガイド](https://www.remotte.jp/ja/user_guide)を開くと、対応しているブラウザの種類が書かれていて、現時点では以下の様になっている。
　　　Windows : Chrome（推奨）、新しい Microsoft Edge（※１）、Firefox
　　　MacOS : Safari
　　　Linux : Chrome（推奨）、Firefox
　　　Android : Chrome（推奨）、Firefox
　　　iOS : Safari
　　　※１　音声を扱う機能が正しく動作しない場合があります。
これら以外のブラウザでは正常に動作しないので注意したい。

利用者としてログインするには、リモッテの[ホームページ](https://www.remotte.jp "リモッテ・テクノロジーズ株式会社")にアクセスして、画面右上の「ログイン」ボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/81e6e14d-2e4c-a6eb-6821-3e007e9debc3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/33c95575-cceb-b1c6-0728-4f6b366eee72.png)
そうすると上記の様に、３つの方法でログインできることが分かるが、ここで注意が必要だ。後から説明するが、リモッテでは利用者をメールアドレスで指定する。「Google アカウント」でログインする場合は問題ないが、facebook や Twitter でログインする場合において、電話番号やユーザー名しか登録していない場合は事前にメールアドレスも登録しておく必要がある。
### 利用者のメールアドレスを設定する
それでは管理ツールに戻って、前回使った「ステーションの管理」アプリを例に設定してみよう。アプリの詳細画面に入って、「利用ページ」タブを開く。画面の左側には３つの利用ページ「現在の状態」「ログ」「制御」の選択メニューがあり、その右側ではそれぞれの「利用者」「表示項目」「レイアウト」を表示できる。ここで「利用者」タブを選択すると、選択されたページにアクセスできる利用者を設定できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/0177bb73-5de5-4e96-b01f-11e2d9e1e6a0.png)
デフォルトでは上記の様に、管理者だけが利用できるようになっている。ここで画面右上の「利用者の追加」ボタンを押して他のメールアドレスを追加する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/bea210a3-7f37-2ce7-bb5d-ad7b568d95ff.png)
上記の例では、「new_user@sample.com」というメールアドレスを追加した。次に画面左のメニューで「ログ」を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/b90b0102-3efa-d7a0-1014-95af0f67183b.png)
この画面では、新しく追加したメールアドレスの左側にあるスライドスイッチがオフの状態になっている。同様に、画面左のメニューで「制御」のページを選択した場合もオフになっている。このオンとオフの切り替えスイッチにより、特定の利用者が各利用ページにアクセスすることを許可するかどうか（表示するかしないか）を設定でき、許可するのであればスイッチを右側に、許可しないのであれば左側に切替えればよい。設定を終えたら、画面上部の「保存」ボタンを押し、続いて「開始」ボタンを押して、アプリを実行しよう。
### 利用者ログイン
それではいよいよ利用者としてログインしてみる。今回は Android タブレットを使って試してみる（以下、画面の余白部分を省いて添付）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/0cbbeece-c1d5-4523-c585-ead603e6631f.png)
上記の画面で、いずれかのボタンをクリックし、IDや電話番号、およびパスワードを入力する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/235cae5b-6d82-2b50-948e-df87b74504d4.png)
ログインが成功すると、使用許諾契約書が表示される。よく読んで問題が無ければチェックボックスをオンにし、「OK」ボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/de235586-0eea-244f-5a14-4187135a27aa.png)
利用者として初めてログインした場合や、新しいステーションが追加された時は、上記の画面が表示されるので、表示されている内容に従って、画面左上のメニューボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/8b08af66-10b2-7e48-2f30-fc8426e3f6e1.png)
「未承認のステーション」と書かれている自分のステーションの名前を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/fb54a31b-cd12-6c0b-d31c-1eb7de62d78a.png)
「ステーションの承認」ダイアログが表示されたら、一番上の「信頼して接続し、ページを表示する」を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/fa2db6f0-f115-a349-7fe7-06496cb44033.png)
そうすると、管理ツールで許可した利用ページを表示できるようになる。
### 正常に接続できない場合
リモッテが採用している WebRTC というピア・ツー・ピア通信の技術では、ネットワーク環境によってステーションと利用者が正しく接続できない場合がある。そういった場合は、下記のように「利用可能なページが見つからない」とか「接続できないステーション」、「P2P 確立失敗」などのエラーが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/0c506439-0716-2a90-cc78-e0e58cc98a9c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/877bc98c-a8ed-420d-330b-94361595e29e.png)

例えば公共の Wi-Fi やカフェ、図書館で使えるようなネットワーク環境では、同一のネットワークに接続されている機器同士の接続ができないようにルーターが設定してあるなどする。この場合、例えばステーションと利用端末の両方で VPN を設定するなどして回避できるが、機会があったら説明する。
### まとめ
以上、リモッテを利用者として使ってみた。[次回](https://qiita.com/remotte_jp/items/a7b5475176eb133af957 "Remotte（リモッテ）で時系列データの詳細を見る")は利用ページの詳細画面を使ってみることにする。アプリが取得・蓄積したデータを、折れ線グラフや表によって時系列で綺麗に表示するための操作をしてみましょう。