3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Remotte開発] まずは作ってみよう!!(演習1)

Last updated at Posted at 2020-06-11

本シリーズでは Remotte を使ったアプリ開発を解説している。前回 までで、開発者になるための準備が整ったことになる。
「習うより慣れよ」といいますので、詳しい仕組みの解説を後回しにして、まずは1つアプリを作って使ってみることにしましょう!!皆様それぞれどんなデバイスをお持ちか分かりませんので、今回は手っ取り早く、ステーションが走っている Windows パソコンの「CPU 使用率」をセンサー値と見立て、それを周期センス、ページ表現、スマホ・タブレットからアクセスしてみることにしましょう。以下の画面ショットで表したように操作していけば、ほんの数分でアプリを作成できます。

Python で CPU 使用率を取得する

Python で CPU 利用率を取得するためには、以下の3行のことをするだけです。
  pip install psutil
  import psutil
  cpu = psutil.cpu_percent()
これをリモッテのプラットフォーム上で実装してみましょう。

アプリの新規作成

まず、管理ツールのアプリの一覧画面にて「新規作成」ボタンを押し、アプリを新規作成します。
1 アプリの新規作成.png
「OK」ボタンを押すと、一覧画面にアプリが追加されます。
2 アプリ作成完了.png

構成要素の追加

アプリの詳細画面に入り、「構成」タブを押し、画面左下のメニューで「新規作成」を選択します。
3 構成要素の新規作成.png
「カテゴリー」として「1つの数値」を、「入出力タイプ」として「一般的な1値センス」を選択し、「OK」ボタンを押して完了。
4 構成要素の新規作成ダイアログ.png

インストールスクリプトの記述

「構成」タブ階層下の「コード」タブを選択し、3つあるソースコードのテンプレート「input_sense.py」、「__init__.py」、「Install.ps1」のうち、「Install.ps1」を選択し、2行目に
        python -m pip install psutil
と入力しましょう。「Install.ps1」は、「インストールスクリプト」と呼んでいるもので、Windows の PowerShell で実行できるスクリプトです。インストールスクリプトは、Python プログラミングでのモジュールをインストールしたり、GitHub 等からプログラムやデータをダウンロードしたりするために使います。
5 インストールスクリプト.png

Python コードの記述

今度は「input_sense.py」を選択します。
6 Pythonテンプレート.png
上記「構成要素の追加」にて、「新規作成」ダイアログで「一般的な1値センス」を選択しましたが、そこで選択した内容に適した Python テンプレートが自動的に追加されています。関数 sense(self) は、プラットフォームが呼び出す関数(言い換えるとプラットフォームから呼び出される関数)で、センサーデバイスなどから一定時間間隔毎にデータを取得するために使います。
        import psutil
        cpu = psutil.cpu_percent()
上記2行のコードで、変数 cpu に、関数が呼ばれた時点での CPU 使用率が格納されます。この値を、Remotte のプラットフォームに「最新値」として伝えるために以下の1行を加え、
        self._sys.set_value({'value': cpu})
最終的に以下のコードを記述します。
7 Pythonコード.png

プログラムの詳細設定

上記で記述した sense(self) 関数を、どの頻度で実行するかを設定します。「構成」タブ階層下の「プログラム」タブを選択し、チェックボックス「プラットフォームがセンス関数を呼び出す」をオンにし、「呼び出し周期」として例えば「2秒」と設定しましょう。
8 プログラムタブ.png

ここまでで実行してみる

ここまでで一度実行してみよう。まず画面上部の「保存」ボタンを押します。次に「構成」タブを選択した状態で画面左下のメニューを開き、「インストールスクリプトの実行」を選択します。
9 インストールスクリプトの実行.png
「インストールスクリプトの実行」ダイアログが表示され、最終的にダイアログの左下に「実行完了」と表示されたら、「閉じる」ボタンを押します。
10 インストールスクリプト実行完了.png
インストールスクリプトの実行は1回行うだけで良く、また、Remotte ストアからダウンロードしたアプリや構成要素をファイル読込みする場合は自動的に実行されます。
ではいよいよアプリを実行します。「利用ページ」タブを選択し、「レイアウト」タブにて利用者画面を表示した状態で、画面上部の「開始」ボタンを押しましょう。2秒毎に CPU 使用率を表す値が更新されます。
11 アプリを実行(初回).png

画面の表現を変える

リモッテの大きな特徴の1つが、ノンコーディングで画面を簡単に作成できること。ここでは CPU 使用率の表現を変更してみる。アプリの実行中は設定などを変更できないため、アプリを実行中であればまず画面上部の「停止」ボタンを押してアプリを停止する。
12 レイアウトの編集.png
レイアウト画面にて、ページの左上に配置されている項目をクリックすると、その属性が画面右側に表示される。上記では、CPU 使用率の最新値が「1つの数値の表示」という形式で表現されているのが分かる。ここで、この画面右側の表現形式のアイコンをクリックすると、その他の表現形式が表示され、ページ上にて表現したい形式を選択できる。
13 HMIのポップアップ.png
例えばここで、「無段階メーター(円形、領域色付き)」を選択し、アプリを開始すれば以下の様な画面になる。
14 円形領域色付き.png
レイアウト編集画面の右下には、選択された表現形式の種類に応じて詳細なオプションが設定できるようになっている。
15 HMIのオプション.png
1つの情報を複数の表現形式でレイアウトしたい場合、例えば上記のドーナツ型のメーター表示の中央に、実際のパーセント値を表示したい場合などは、「レイアウト」タブの左の「表示項目」タブを選択する。
16 表示項目.png
この画面では、利用ページごとに何の項目を何個表示するかを設定できる。例えば上記の様に、「CPU 使用率」の「最新値」を「2つ表示」に変更し、再度「レイアウト」タブを選択する。
17 2つのHMI.png
これで1つの情報に対して2つの表示項目を配置できた。後は各項目毎に表現形式を変更したり、ドラッグして位置を変えたり、サイズや各種オプションを変更して、自分の好きな形式にすればよい。下記例では円弧の開始角度と終了角度を変更したり、テキストを中央に配置し、サイズを大きくし、ボールドにし、小数点以下の桁数をゼロに、接尾語としてパーセント記号を設定したりした。
18 カスタムメーター.png
その他、画面下部の各種ツールを用いて、テキストや画像、線を配置したり、各表示項目ごとに重なり具合の調整が出来る。
19 各種ツール.png

データの保存と履歴の表示

ここまでは CPU 使用率の2秒毎の最新値を表示した。今度は取得したデータを保存し、時系列で履歴表示してみよう。Python のコード内で set_value( ) 関数によって伝えられた最新値は、「構成」タブ階層下の「設定」タブ内のチェックボックス「データを保存する」をオンにするだけで直ぐ下の設定項目「保存期間」の間、アプリ内のデータベースに保存されます。
20 データの保存.png
また、このチェックボックスをオンにすると、「利用ページ」の「表示項目」タブに、「履歴」という項目が追加され、時系列データを表示できるようになります。
21 履歴項目.png
同時に「レイアウト」タブには、履歴を表示するための表示項目が追加されます。
22 履歴のHMI追加.png
上記では、「1つの数値の履歴テーブル」という表現形式で表示されていますが、これを「1つの数値の履歴の折れ線グラフ」に変更し、またレイアウトを調整して以下の様に作ってみましょう。
23 折れ線表示.png
このようにリモッテでは、コーディングすることなしに画面を作成することが出来ます。

利用者として使う

作成したアプリを自分以外の人に公開して使ってもらう場合、その人のメールアドレスをアプリに登録する。管理ツールの「利用ページ」タブ階層下の「利用者」タブを選択し、「利用者の追加」ボタンを押してからメールアドレスを追加する。
24 利用者の追加.png
この後、利用者としてログインしたり、履歴の詳細画面を表示したりする操作については、別の投稿を参考にしよう。

作成したアプリをファイル保存する

作成したアプリをファイル保存して別のステーションで動かしたり、バックアップを取ったりする前に、アプリ情報を編集しておこう。管理ツールのアプリの一覧画面にて、「編集」を選択する。
25 アプリ情報の編集.png
26 アプリ情報の編集中.png
最後に、アプリの一覧画面から「ファイルに保存」を選択し、ファイル名を入力すれば保存できる。
27 アプリを保存.png

まとめ

本演習では、パソコンの「CPU 使用率」をセンサー値と見立てたアプリを題材に、リモッテを利用したアプリ開発の一連の流れ、つまり、
  アプリの新規作成
  構成要素の追加
  インストールスクリプトの記述
  Python コードの記述
  プログラムの詳細設定
  画面の編集
  データの保存と履歴の表示
  作成したアプリのファイル保存
を体験した。周期センス系の構成要素、つまり、Python プログラム内で何らかの情報を取得し、データとしてリモッテに取り込む機能を作る場合は、sense( ) 関数を実装し、「構成」タブ階層下の「プログラム」タブにて、チェックボックス「プラットフォームがセンス関数を呼び出す」をオンにすることで実現できる。

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

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?