[Remotte開発] まずは作ってみよう！！（演習１）

本シリーズでは Remotte を使ったアプリ開発を解説している。[前回](https://qiita.com/remotte_jp/items/093bcb7a9056e870d180) までで、開発者になるための準備が整ったことになる。
「習うより慣れよ」といいますので、詳しい仕組みの解説を後回しにして、まずは１つアプリを作って使ってみることにしましょう！！皆様それぞれどんなデバイスをお持ちか分かりませんので、今回は手っ取り早く、ステーションが走っている Windows パソコンの「CPU 使用率」をセンサー値と見立て、それを周期センス、ページ表現、スマホ・タブレットからアクセスしてみることにしましょう。以下の画面ショットで表したように操作していけば、ほんの数分でアプリを作成できます。
### Python で CPU 使用率を取得する
Python で CPU 利用率を取得するためには、以下の３行のことをするだけです。
　　pip install psutil
　　import psutil
　　cpu = psutil.cpu_percent()
これをリモッテのプラットフォーム上で実装してみましょう。
### アプリの新規作成
まず、管理ツールのアプリの一覧画面にて「新規作成」ボタンを押し、アプリを新規作成します。
![1 アプリの新規作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/f0ea6870-e8fa-6d50-25e0-138b9e7ef399.png)
「OK」ボタンを押すと、一覧画面にアプリが追加されます。
![2 アプリ作成完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/8d9ac4bc-a32e-1093-005c-ad832a1bc036.png)
### 構成要素の追加
アプリの詳細画面に入り、「構成」タブを押し、画面左下のメニューで「新規作成」を選択します。
![3 構成要素の新規作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/00c0dbaa-bbfa-c5fe-9013-cbaa0f8bc729.png)
「カテゴリー」として「１つの数値」を、「入出力タイプ」として「一般的な１値センス」を選択し、「OK」ボタンを押して完了。
![4 構成要素の新規作成ダイアログ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/24369dab-e9a8-55a8-18ba-72fa4c1f41a4.png)
### インストールスクリプトの記述
「構成」タブ階層下の「コード」タブを選択し、３つあるソースコードのテンプレート「input_sense.py」、「\_\_init\_\_.py」、「Install.ps1」のうち、「Install.ps1」を選択し、２行目に
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;python -m pip install psutil
と入力しましょう。「Install.ps1」は、「インストールスクリプト」と呼んでいるもので、Windows の PowerShell で実行できるスクリプトです。インストールスクリプトは、Python プログラミングでのモジュールをインストールしたり、GitHub 等からプログラムやデータをダウンロードしたりするために使います。
![5 インストールスクリプト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/dc6f65c7-67f8-9413-fd91-d43be658bc00.png)

### Python コードの記述
今度は「input_sense.py」を選択します。
![6 Pythonテンプレート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/d6ede5fa-9006-591e-3668-fefc4a53a927.png)
上記「構成要素の追加」にて、「新規作成」ダイアログで「一般的な１値センス」を選択しましたが、そこで選択した内容に適した Python テンプレートが自動的に追加されています。関数 **[sense(self)](https://www.remotte.jp/user_guide/program/functions)** は、プラットフォームが呼び出す関数（言い換えるとプラットフォームから呼び出される関数）で、センサーデバイスなどから一定時間間隔毎にデータを取得するために使います。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;import psutil
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cpu = psutil.cpu_percent()
上記２行のコードで、変数 cpu に、関数が呼ばれた時点での CPU 使用率が格納されます。この値を、Remotte のプラットフォームに「最新値」として伝えるために以下の１行を加え、
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self._sys.set_value({'value': cpu})
最終的に以下のコードを記述します。
![7 Pythonコード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/e3ff56c2-f3b7-945f-e927-6673774c973a.png)
### プログラムの詳細設定
上記で記述した [sense(self)](https://www.remotte.jp/user_guide/program/functions) 関数を、どの頻度で実行するかを設定します。「構成」タブ階層下の「プログラム」タブを選択し、チェックボックス「プラットフォームがセンス関数を呼び出す」をオンにし、「呼び出し周期」として例えば「２秒」と設定しましょう。
![8 プログラムタブ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/49bac339-a690-3d6e-1e4c-c918501383c0.png)
### ここまでで実行してみる
ここまでで一度実行してみよう。まず画面上部の「保存」ボタンを押します。次に「構成」タブを選択した状態で画面左下のメニューを開き、「インストールスクリプトの実行」を選択します。
![9 インストールスクリプトの実行.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/1b7a9c69-ffbc-e41c-d42a-0cb30cfc5eda.png)
「インストールスクリプトの実行」ダイアログが表示され、最終的にダイアログの左下に「実行完了」と表示されたら、「閉じる」ボタンを押します。
![10 インストールスクリプト実行完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/dc08d8b2-9f0a-5bd6-7f50-63535c850182.png)
インストールスクリプトの実行は１回行うだけで良く、また、Remotte ストアからダウンロードしたアプリや構成要素をファイル読込みする場合は自動的に実行されます。
ではいよいよアプリを実行します。「利用ページ」タブを選択し、「レイアウト」タブにて利用者画面を表示した状態で、画面上部の「開始」ボタンを押しましょう。２秒毎に CPU 使用率を表す値が更新されます。
![11 アプリを実行（初回）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/43b3ed1b-d695-04bc-8044-c187eeeb34c9.png)
### 画面の表現を変える
リモッテの大きな特徴の１つが、ノンコーディングで画面を簡単に作成できること。ここでは CPU 使用率の表現を変更してみる。アプリの実行中は設定などを変更できないため、アプリを実行中であればまず画面上部の「停止」ボタンを押してアプリを停止する。
![12 レイアウトの編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/e63c1933-bb21-0ced-1e66-86bb6fbafbf4.png)
レイアウト画面にて、ページの左上に配置されている項目をクリックすると、その属性が画面右側に表示される。上記では、CPU 使用率の最新値が「１つの数値の表示」という形式で表現されているのが分かる。ここで、この画面右側の表現形式のアイコンをクリックすると、その他の表現形式が表示され、ページ上にて表現したい形式を選択できる。
![13 HMIのポップアップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/af097ec5-b587-96ee-4a56-0f817c4e513c.png)
例えばここで、「無段階メーター（円形、領域色付き）」を選択し、アプリを開始すれば以下の様な画面になる。
![14 円形領域色付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/77b87c01-9c98-7938-ddc5-3e3afa7b3db6.png)
レイアウト編集画面の右下には、選択された表現形式の種類に応じて詳細なオプションが設定できるようになっている。
![15 HMIのオプション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/bfac207b-cbdb-ff2f-d8ab-2c7e54121461.png)
１つの情報を複数の表現形式でレイアウトしたい場合、例えば上記のドーナツ型のメーター表示の中央に、実際のパーセント値を表示したい場合などは、「レイアウト」タブの左の「表示項目」タブを選択する。
![16 表示項目.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/cb0a71b9-6d73-5fb6-2a9a-93a747666737.png)
この画面では、利用ページごとに何の項目を何個表示するかを設定できる。例えば上記の様に、「CPU 使用率」の「最新値」を「２つ表示」に変更し、再度「レイアウト」タブを選択する。
![17 2つのHMI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/33dea762-847d-ae69-dd80-63b0ec5115d1.png)
これで１つの情報に対して２つの表示項目を配置できた。後は各項目毎に表現形式を変更したり、ドラッグして位置を変えたり、サイズや各種オプションを変更して、自分の好きな形式にすればよい。下記例では円弧の開始角度と終了角度を変更したり、テキストを中央に配置し、サイズを大きくし、ボールドにし、小数点以下の桁数をゼロに、接尾語としてパーセント記号を設定したりした。
![18 カスタムメーター.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/9c519e8e-eaa9-a31c-34e7-4266379cd91a.png)
その他、画面下部の各種ツールを用いて、テキストや画像、線を配置したり、各表示項目ごとに重なり具合の調整が出来る。
![19 各種ツール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/604d824a-06cb-0197-cc50-90a71dc5054b.png)
### データの保存と履歴の表示
ここまでは CPU 使用率の２秒毎の最新値を表示した。今度は取得したデータを保存し、時系列で履歴表示してみよう。Python のコード内で set_value( ) 関数によって伝えられた最新値は、「構成」タブ階層下の「設定」タブ内のチェックボックス「データを保存する」をオンにするだけで直ぐ下の設定項目「保存期間」の間、アプリ内のデータベースに保存されます。
![20 データの保存.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/296cb8a1-d2ec-6749-7e87-f18b36f0ab5e.png)
また、このチェックボックスをオンにすると、「利用ページ」の「表示項目」タブに、「履歴」という項目が追加され、時系列データを表示できるようになります。
![21 履歴項目.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/367a6e06-c9a5-4a7c-93b5-647e81ed17d0.png)
同時に「レイアウト」タブには、履歴を表示するための表示項目が追加されます。
![22 履歴のHMI追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/1c90bacb-12f0-7a3a-3448-c7ad1a58100c.png)
上記では、「１つの数値の履歴テーブル」という表現形式で表示されていますが、これを「１つの数値の履歴の折れ線グラフ」に変更し、またレイアウトを調整して以下の様に作ってみましょう。
![23 折れ線表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/eba0b21f-9ddc-d756-6d8f-8a9f463da246.png)
このようにリモッテでは、コーディングすることなしに画面を作成することが出来ます。
### 利用者として使う
作成したアプリを自分以外の人に公開して使ってもらう場合、その人のメールアドレスをアプリに登録する。管理ツールの「利用ページ」タブ階層下の「利用者」タブを選択し、「利用者の追加」ボタンを押してからメールアドレスを追加する。
![24 利用者の追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/ad4c7728-4d86-ab03-9bb7-8681f20eb2a7.png)
この後、利用者としてログインしたり、履歴の詳細画面を表示したりする操作については、別の投稿を参考にしよう。

* [Remotte（リモッテ）を利用者として使う](https://qiita.com/remotte_jp/items/7ec79a400429738843d0)
* [Remotte（リモッテ）で時系列データの詳細を見る](https://qiita.com/remotte_jp/items/a7b5475176eb133af957)

### 作成したアプリをファイル保存する
作成したアプリをファイル保存して別のステーションで動かしたり、バックアップを取ったりする前に、アプリ情報を編集しておこう。管理ツールのアプリの一覧画面にて、「編集」を選択する。
![25 アプリ情報の編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/b79e666d-5c3e-08bd-a499-cd7a8f8f61a9.png)
![26 アプリ情報の編集中.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/0367a3ba-8591-8580-368e-e9ba2c6ba4a7.png)
最後に、アプリの一覧画面から「ファイルに保存」を選択し、ファイル名を入力すれば保存できる。
![27 アプリを保存.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/b031333d-2c07-d872-00c1-02cbf9da3d95.png)
### まとめ
本演習では、パソコンの「CPU 使用率」をセンサー値と見立てたアプリを題材に、リモッテを利用したアプリ開発の一連の流れ、つまり、
　　アプリの新規作成
　　構成要素の追加
　　インストールスクリプトの記述
　　Python コードの記述
　　プログラムの詳細設定
　　画面の編集
　　データの保存と履歴の表示
　　作成したアプリのファイル保存
を体験した。周期センス系の構成要素、つまり、Python プログラム内で何らかの情報を取得し、データとしてリモッテに取り込む機能を作る場合は、[sense( )](https://www.remotte.jp/user_guide/program/functions) 関数を実装し、「構成」タブ階層下の「プログラム」タブにて、チェックボックス「プラットフォームがセンス関数を呼び出す」をオンにすることで実現できる。

本稿の演習１にはリモッテプラットフォームでの開発手順の約６割の内容が含まれており、残りの４割には、
　　プラットフォームとのより詳細なインタフェース（関数説明）
　　プログラム変数（オプション設定）
　　構成要素間のデータのやりとり（データ共有）
　　メディア系、ビデオ解析、音声解析の構成要素
等が含まれる。[次回](https://qiita.com/remotte_jp/items/ce77c0f5b796ccd818a8) はデータの流れが「センス」の反対方向、つまり「制御」についての演習を「音声ファイルの再生」と「テキストのスピーチ」を題材に説明する。