Arduino Uno Qの利用 ⑤ 入門編 従来のArduinoと互換性を保ち新しい機能を追加されたArduino Uno Q＜Blink LED with UIの各要素の関係 ＞
今回は、サンプル・プログラム「Blink LED with UI」を題材に、CPU側（QRB2210、Pythonなど側）とMPU側（STｍ32U585、スケッチ側）の分担、連携について確認します。
「Blink LED with UI」は、Webブラウザに表示されたLEDのON/OFFの表示をクリックしてArduino Uno QのオンボードのLEDを点滅するサンプルです。
UI（ユーザ・インターフェース）は最近よく使われる省略形で、人が見ている画面（Webブラウザを含む）のデザインやボタンの配置などを指します。
●Arduino App Labで「Blink LED with UI」を開く
サンプルの「Blink LED with UI」をArduino App Labで開くと、次の画面になります。
左上のアイコンに続いてプログラム名が表示されています。右側のRUNのボタンをクリックすると、プログラムを実行できるように準備が行われ、開始します。
●最初に表示されるのはREADME.md
開始したときは、プログラムの内容を説明するREADME.mdのファイルが表示されています。
説明は日本語化されていませんが、説明部分を全選択しGoogle翻訳で翻訳すると、brickをブリックやレンガと訳されたりして原文と照らし合わせながら確認する必要がありますが、原文を読むより少し楽です。
最初はREADME.mdの表示されているタグだけですが、その後は表示された項目のタグに表示内容が残されているので、タグの切り替えだけで必要な情報が得られます。
●画面の左側にプログラムの構成が表示
App Labの画面の左側にBricks、ライブラリ、FilesとしてPython 、スケッチなどのファイル、README.md、app.yamlが選択表示できるようになっています。
古くから、配布されるアプリにはreadmeやreadme.txtという説明文が保存されたテキスト・ファイルがありますが、README.mdは、最近よく使われています。見出しや太字、リスト、画像 を含んでいてMarkdown（マークダウン）という記法で書かれています。
拡張子.yamlは、PythonやC言語をなどのプログラムやインフラ自動化ツールでよく用いられています。XMLなどのようにたくさんのタグは使わず、インデントを使って階層やデータの構造を表現するので、初めて見た人でも可読性が良いテキスト・ファイルです。
たくさんのファイル名や拡張子が出てきているので、その関係を次の図にまとめました。
●Filesの内容
サンプルのCPU側は、WebブラウザからON/OFF情報を受け渡しするためBrickの WebUI-HTMLが格納されたフォルダ、このWebブラウザに表示するために必要なファイルがassetsのフォルダに用意され、その処理のメイン部分となるPythonのフォルダが用意されます。
MPU側は、次の図に示すように、Arduinoのプログラムであるスケッチのフォルダとスケッチの構成を示すsketch.yamlが格納されています。その後にREADME.mdでこのプログラムの内容について説明されています。
app.yamlには、このプログラムの名称、アイコン、概要、利用されているBrickの名称が分かるようになっています。
●動作を確認する
右上のRUNボタンをクリックしてプログラムの動作確認を行います。
RUNボタンをクリックするとRUNの表示はSTOPに変わり、コンパイルが始まります。
コンパイルが完了すると、コンソールの表示は白色から緑の文字表示となります。
プログラムが開始されると、次に示すようなLEDの点滅をON/OFFする画面が表示されます。起動時は「LED IS OFF」の表示です。
マウスでこの部分をクリックすると表示が「LED IS ON」となり、Arduino Uno QのオンボードのLED3が赤く点灯します。
再度マウスでクリックするとLED IS OFFに変わり、オンボードのLEDが消灯します。
この画面の基本的な枠組みは、次に示すFiles ＞assetの中のindex.htmlに示されています。この中の20行の＞Linux Blink＜が画面の左上に表示されています。34行のClick to control board's LEDは、画面の中央の下に表示されます。
app.jsはjavascript言語のファイルで、主に画面の表示を変更する処理を分担しています。
style.cssはHTMLファイルで作成した画面の枠組みの各構成要素の形や色などを設定する役割を持っています
javascriptは、Webアプリを記述する標準的な言語です。cssファイルはHTML初期のころから使われているファイル拡張子です。
そのほかにdocs_assetsフォルダにあるプログラム説明のドキュメントで利用されている画像、imgフォルダには、それぞれの画面に表示される画像のイメージ・ファイルが格納されています。
imgフォルダというのは、imagesと共に慣習的に使われている名称です。
その他のフォルダのファイルと合わせて、Pythonフォルダのmain.py、BricksのWebUI-HTMLを利用して、Webブラウザの表示画面のLEDのON/OFFの入力結果をもとにArduinoのLEDのON/OFFの操作のために変数 led_is_onにLEDのON/OFFの状態をセットします。
いままでArduinoではスケッチで記述するだけでしたが、Arduino App Labでは、業界標準のファイル名称や記述形式を数多く利用するので、敷居が高く感じられるかもしれません。
main.pyの Bridge.call("set_led_state", led_is_on) で、スケッチ側の set_led_state(bool state)関数を起動し、Arduino Uno Q上のLEDをON/OFFします。
サンプルのプログラムは読み取り専用で、そのままでは修正して動作確認することができません。また、Arduinoのスケッチはスケッチの動作確認を行うだけで具体的な動作が確認できます。
しかしPython側は、画像を表示するためのHTMLファイル、色や形を修飾するためのcssファイル、そのほかにはjavascript、イメージのファイルにBrickとPythonのプログラムが連携しています。
人が見える部分と、何らかの目的を処理するプログラムの部分を分けて作るのが現在のスタイルです。さらにIoTというセンサとArduino Uno Qボード（エッジ・コンピュータ）の処理が絡まったスタイルなので、たくさんの業界標準の開発言語や設定ファイル形式が出てきて、複雑に感じてしまいます。
今までArduino IDEとスケッチでArduinoの仕組みを作ってきた身には少々手に余っています。
そのため、次回から数多く用意されているサンプルを実行し、コピーを作成し、動作確認の修正を繰り返し確認し、独自の必要とするアプリケーションを作成することを目指します。
神崎康宏
