タイトルテキストを表示

　M5StickCでは2種類の文字を扱うことができます。1つはタイトルなどに使用するタイトルテキスト、もう1つがラベルテキストです。UIFlow画面の左上にTitle、Label、Rect、Circle、Imageと書かれた文字とアイコンがあります。

タイトルテキストはTitleのアイコンをM5StickC画像上にドラッグドロップします。

　タイトルテキストはM5StickC画面上部に固定されます。他の位置に移動させることはできません。

　タイトルテキストの内容などを変更するには配置したタイトルテキストをクリックします。クリックすると設定ウィンドウが表示されます。
name欄はプログラムで操作する時に目印となる文字を示します。colorはタイトルテキストの文字色を示します。backgroundColorはタイトルテキストの背景色を指定します。textOffsetは文字の左側からのオフセット（左端からの距離。単位はピクセル）を示します。textが表示する文字になります。layerは重なり順を示す値で、値が大きいほど手前に表示されます。値は3以上を指定してください。

　ここでは表示する文字をM5StickCに変更します。変更したら×ボタンをクリックするかウィンドウ外をクリックします。

　するとM5StickC画像内のタイトルテキストの文字が変わります。

　それでは実際にM5StickCで実行してみましょう。M5StickCで実行するにはUIFlow画面右上にある▲のボタンをクリックします。

　M5StickCにプログラムが転送された後、実行されます。

　ここでの実行は単に試験的に動かしただけなのでM5StickCの電源を落としてしまうと、このプログラムは消えてしまいます。そこで、電源を落としてもプログラムが消えないようにします。また、プログラムを書き込むことでM5StickCの電源を入れると自動的にプログラムが実行されるようになります。
　M5StickCにプログラムを書き込むにはUIFlow画面右上の三のボタンをクリックします。するとメニューが表示されるのでダウンロードを選択します。（日本語訳が変ですが、気にしてはいけません）

　M5StickCに書き込むには少し時間がかかりますので待ちます。

　書き込みが終わると自動的にM5StickCが再起動しプログラムが実行されます。

M5StickCにプログラムが転送できない、書き込めない場合

　M5StickCが通信できない場合だけでなくプログラムが実行中の場合もプログラムを転送したり書き込むことができません。このような場合は以下の手順でUIFlowからプログラムを転送・書き込める状態にします。
　まず、M5StickCのリセットボタン（本体左側ボタン）を押します。リセット後にUIFlowのロゴ画面が表示された後、以下のような画面になればプログラムの転送が可能です。

　この画面にならない場合、プログラムが自動実行されてしまう場合はM5StickC上面のボタン（M5と書かれたボタン）を押したままリセットボタンを押します。すると図のような選択画面になります。

　この状態でM5StickC本体の右側のボタンを押すと画面が切り替わっていきます。

　Setupの画面になったらM5StickC本体上面のボタンを押します。すると図のような画面になります。

ここで、一番上のCloud Modeが選択されているはずなので、M5StickC上面のボタンを押します。するとネットワークに接続されます。

　この画面になればUIFlowからプログラムを転送・書き込むことができるようになります。

ラベルテキストを表示

　タイトルテキストは配置場所が決まっており自由度が高くありません。M5StickC画面上に自由に文字を配置するにはラベルテキストを使います。
　と、その前に先ほど配置したタイトルテキストを削除しておきましょう。配置した項目を削除する場合は、項目をドラッグして画面上のゴミ箱に重ねます。このゴミ箱はドラッグ（もしくはプレス）しないと表示されません。

　タイトルテキストを削除したらラベルテキストを配置します。ラベルテキストは画面左上にあるLabelと書かれたアイコンをM5StickC画面上までドラッグドロップします。やり方はタイトルテキストと同じです。

　ラベルテキストが配置されます。ドラッグすると位置を調整することができます。

　ラベルテキストを回転したりフォントを変更する場合は、配置された文字をクリックします。すると、設定ウィンドウが表示されます。ここらへんはタイトルテキストと同じですが、ラベルテキストの方がより多くの設定を行うことができます。
　name欄はプログラムで操作する時に目印となる文字を示します。x,yはXY座標の値です。画面左上が原点(0,0)で右下にいくに従って座標値が大きくなります。座標値は整数値のみです。colorはラベルテキストの文字色を示します。
　textが表示する文字になります。fontは文字のフォント（書体）です。書体によって文字のサイズが異なります。rotationは回転角度で0以上の数値になります。値が大きくなると時計回りに文字が回転します。値は0〜360の範囲に収める必要はありません。
　layerは重なり順を示す値で、値が大きいほど手前に表示されます。値は3以上を指定してください。

　ここでは文字を回転させてみましょう。文字を回転するには設定ウィンドウのrotationの欄に90と入力します。入力したら設定ウィンドウの×ボタンをクリックするか、ウィンドウ外をクリックします。

　位置やフォントなどを調整して画面に文字を表示します。ここではM5StickCの文字を表示しています。なお、フォントによっては画面からはみ出して表示されますが、気にしてはいけません。

　配置したらUIFlow画面右上にある▲のボタンをクリックしてプログラムを転送して動作を確認してみましょう。M5StickCの文字が表示されるはずです。

ブロックエディタを使って文字を書き換える

　それでは次にブロックエディタを使ってプログラムで表示する文字を変えてみます。まず、ラベルテキストを図のように設定します。重要なのはname欄のlabel0という名前です。ここで付けた名前がブロックエディタで使用されるからです。

　配置するブロックはUIカテゴリ内のラベルの項目をクリックすると表示されます。ラベルテキストに文字を表示するブロックは一番上にあります。このブロックをクリックします。

　このブロックをSetupのブロックの下にくっつけます。

　表示する文字を書き換えます。ここではM5の文字にしてあります。

　それでは、これまでと同様にM5StickCにプログラムを転送して動作を確認してみましょう。M5StickCの画面にM5と表示されるはずです。

プログラムを保存

　簡単なプログラムでしたが、せっかくなので保存しておきましょう。UIFlowではJSON形式でプログラムが保存されます。ブロックのコードはJSON形式内にXMLテキスト（単なる文字列）として保存され、拡張子はm5fになります。
　プログラムを保存するにはUIFlow画面右上の三をクリックします。

　表示されるメニューから「保存する」を選択します。

　Google Chromeの場合は図で示すような画面になります。

　保存されたプログラムはダウンロードフォルダに入っています。

　保存したプログラムを読み込むにはUIFlow画面右上にある三をクリックして表示されるメニューから「開いた」を選択します。するとファイル選択ダイアログが表示されるので保存したm5fの拡張子のファイルを選択します。

一定時間ごとに表示する文字を切り替える

　それでは最後に5秒ごとに文字を切り替えるプログラムを作成します。ここでは切り替える文字をStackとStickにします。まず、図で示すボタンをクリックします。

　すると図のようなダイアログが表示されます。現在のプログラムを保存してから新規作成するか、保存せずに新規作成するかを選択します。

　次にラベルテキストを配置します。今度は背景色も指定します。背景色を指定するにはテキストがない部分でクリックします。すると画面の設定ウィンドウが表示されます。backgroundColorの欄をクリックすると背景色を設定することができます。

　文字を交互に無限に繰り返すので、そのためのブロックを配置します。このブロックはイベントのカテゴリにあります。イベントのカテゴリをクリックすると一番上に「ずっと」というブロックが表示されます。このブロックをクリックします。

　「ずっと」のブロックを「Setup」のブロックにつなげます。

　ずっとのブロックの中にラベルテキストの内容を変更するブロックをはめこみます。最初に表示する文字にします。

　次に一定時間次の処理を待つブロックを配置します。このブロックはタイマーのカテゴリにある「1秒停止」ブロックです。このブロックを図のように配置します。配置したら待ち時間を示す1を5に書き換えます。

　次に書き換える文字のブロックを再度配置します。同じブロックを先ほどと同じように配置することもできますが、ここでは複製してみます。ブロックを複製するにはブロックの上で右ボタンをクリックします。するとメニューが表示されるので「複製」を選択します。

　するとブロックが複製されます。このブロックを「[5]秒停止」ブロックの下につなげます。つなげたら表示する文字を変更します。

　「[5]秒待つ」ブロックも同様に複製し図のようにつなげます。

　これで5秒ごとに文字が切り替わります。M5StickCにプログラムを転送して動作を確認してみましょう。


　UIFlowのブロックエディタを使ったプログラムのおおまかな流れが分かれば十分です。ブロックを配置するだけで高機能なM5StickCを扱えるのは大変便利です。ブロックエディタを使っていろいろ試してみるとよいでしょう。

著者 古籏一浩
プログラミングをベースにして面白そうなものはとりあえずやってみるというスタンス。複雑なものよりシンプルで楽しめるものが好み。最近は30年前に移植したゲーム（mz-700版 SPACE HARRIER）の話などを書いたりしています。
著者サイト：http://www.openspc2.org/