[Remotte開発] 制御系のアプリ（演習２）

[前回](https://qiita.com/remotte_jp/items/2c7f593c708d4ae04bcc) の演習１では、 Windows パソコンの「CPU 使用率」をセンサー値と見立て、「センス」系の構成要素を作成した。今回はデータの流れがその反対方向、つまり「制御」系の構成要素についての演習をする。前回と同様、皆様がどんなデバイスをお持ちか分かりませんので、何らのデバイスも必要としない「音声ファイルの再生」と「テキストのスピーチ」を題材に説明する。とは言ってもリモッテを使うと、どちらの機能も１，２行程度の Python コードを記述するだけで実現できてしまう。
### 準備
スイッチをオンにするとチャイムのような効果音を鳴らす機能を作ります。その効果音の音声が入った「mp3 ファイル」を準備しましょう。フリーの音源がダウンロードできる以下のサイトなどを参考にしましょう。
　　[効果音ラボ](https://soundeffect-lab.info/)
　　[Music-Note.jp](http://www.music-note.jp/)
　　[DOVA-SYNDROME](https://dova-s.jp/)
本稿では「ピンポーン！」という音の「Bell.mp3」を用意した。
加えて本演習では、Windows10 の音声機能を使用したスピーチ機能を作ります。Windows の「設定」から「時刻と言語」、「音声認識」メニューと進んで、以下の画面の様な「音声を選択する」ドロップダウンメニューと「音声のプレビュー」ボタンを使用して、好きな音声を設定しておきましょう。
![0 音声の選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/5d89a417-97a4-f098-8ecb-afa17b559ae6.png)
### アプリの新規作成から構成要素の追加まで
演習１と同様に、以下の様にアプリを作ります。
![1 アプリの新規作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/9b46c26e-fb4e-6bfe-8661-b4e99c4a7779.png)
![2 アプリの一覧.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/91a14b17-484f-20b8-90bd-0f606c210abc.png)
### mp3 再生機能を作成
まずはスイッチをオンにするとステーションにて音声ファイル（mp3）を再生する機能を作ります。まず、構成要素を新規作成します。「入出力タイプ」は「オン・オフ制御」にします。
![3 mp3の再生を作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/3f68be8a-d8ad-84d1-f6fa-e1372a9bc7f2.png)
次に「利用ページ」タブ内の「レイアウト」タブを選択しましょう。既に「オン・オフ制御」用のデフォルトの表示項目が配置されています。以下の様に、表現形式のアイコンをクリックして、自分の好きなスイッチに切替えても良いです。
![4 水平スイッチ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/c86f4728-7568-b8e2-a6d5-49302cc2ae38.png)
では、このスイッチをオンにした時に mp3 ファイルを再生するための実装をするために、「構成」タブ内の「プログラム」タブにて、メニューを開き、「既存のファイルを追加」を選択し、準備しておいた mp3 ファイルを追加します。
![5 既存のファイルの追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/941580f4-af93-d426-53f8-5ffb9e2a5c57.png)
続いて「コード」タブにて、「output_control.py」ファイルの [control(self, data)](https://www.remotte.jp/user_guide/program/functions) 関数に、以下の２行を追加します。

```Python:
        if data['value'] is True:
            self._sys.sound_on_station('Bell.mp3')
```

これで完了です！
![6 mp3再生のコード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/c6dbedc2-0198-3348-4ff6-85ca990a5700.png)

関数 **[control(self, data)](https://www.remotte.jp/user_guide/program/functions)** は、利用ページにて操作した内容を Python プログラムに伝えるためのインタフェースです。
関数 sound_on_station(file_name) は、Python プログラムがリモッテのプラットフォームに対して、音声ファイルをステーションのパソコン上で再生するように要求する API です。
ちなみに関数 sound_in_browser(file_name) を使った場合は、ステーションに接続された全てのブラウザから音声が再生されます。
### 実行してスイッチをオン・オフしてみる
アプリを開始するため、画面上部の「保存」ボタンを押し、「利用ページ」タブ内の「レイアウト」タブを選択してから、アプリの「開始」ボタンを押す。スイッチをオフからオンにする度に、ステーションから指定した効果音が鳴る。
### テキストのスピーチ機能を作成
次にスピーチ機能を作成しよう。同じアプリの中に、もう１つ構成要素を追加する。「入出力タイプ」は「テキスト制御」にする。
![7 テキストのスピーチを作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/621ec918-884c-a08b-a0bd-a4bb02ca139c.png)
「利用ページ」タブ内の「レイアウト」タブを選択すると、「テキストの表示と入力」という表現形式にて１項目追加されている。以下では、より長いテキストを入力できるように横幅を広げた状態にしてあるが、表現形式の選択アイコンをクリックして、他の入力方法で実装しても良い。
![8 テキストの表現形式.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/cef962d1-20aa-87d0-0d7f-0426a6d82c37.png)
最後に、ソースコードとして「output_control.py」の [control(self, data)](https://www.remotte.jp/user_guide/program/functions) 関数に以下の１行を追加する。

```Python:
        self._sys.speak_on_station(data['value'], 'ja')
```

![9 スピーチのコード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/b088c102-aabc-29fd-82db-407335035a6a.png)
関数 speak_on_station(text, lang) は、Python プログラムがリモッテのプラットフォームに対して、与えられたテキストを、指定された言語（例えば 'ja' や 'en-us' を指定）にてステーションのパソコン上で出力するように要求する API です。
ちなみに関数 speak_in_browser(text, lang) を使った場合は、ステーションに接続された全てのブラウザから音声が出力されます。
### 実行してステーションにしゃべらせてみる
アプリを開始するため、画面上部の「保存」ボタンを押し、「利用ページ」タブ内の「レイアウト」タブを選択してから、アプリの「開始」ボタンを押す。スピーチさせたいテキストを入力すると、ステーションから音声出力される。
![10 スピーチの実行.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/8f58e9fe-2b4b-5d06-48ee-30b6a95f9063.png)
### まとめ
本演習では、「制御」系の構成要素について体験した。利用ページ上でのユーザーの操作は、[control(self, data)](https://www.remotte.jp/user_guide/program/functions) 関数によって Python プログラムに伝えられることを習得したい。[次回](https://qiita.com/remotte_jp/items/6f379b1f32f5c78f61ee) はリモッテ・プラットフォームの大きな特徴の１つである、メディア（ビデオや音声）を扱い、カメラから取得した映像に対して「バーコード・ＱＲコードの読み取り」を行なってみる。