創って学ぼうプログラミング 第40回 M5StickCでUIFlowを使ってみよう(準備編)
○M5StickCとは?
今回はM5Stack社から発売されているM5StickCを使ってみます。以前はグレーのM5Stickもありましたが、2020年7月現在ではオレンジ色のM5StickCが発売されています。ここで使用するM5StickCは腕時計のバンド付きのものですが、M5StickC単品でも入手することができます。
・M5Stack
https://m5stack.com/
![](https://image.news.livedoor.com/newsimage/stf/e/2/e297f_1223_d6ef87ffb0b372118e7fdd275c9010b3.jpg)
・M5StickC(本体のみ)
https://shop.pimoroni.com/products/enviro-bit
・M5StickC(腕時計バンド付き)
https://www.switch-science.com/catalog/5517/
![](https://image.news.livedoor.com/newsimage/stf/b/1/b19b2_1223_432e4a3169916cd577d929b4f5fa1cdc.jpg)
腕時計バンド付きのM5StickCには以下のものが同梱されています。
![](https://image.news.livedoor.com/newsimage/stf/8/d/8dab1_1223_25c32cd6a8922d32318830d459507966.jpg)
![](https://image.news.livedoor.com/newsimage/stf/f/2/f20c4_1223_ca86a4640c4202f397838b01ab76a3b6.jpg)
M5StickCを使用するにあたって最初に注意事項があります。M5StickCを制作しているM5Stack社は非常に開発が早く以後に説明するソフトウェア(M5BurnerやUIFlowなど)やデバイスに内蔵されるセンサーや関連デバイス、仕様、画面構成やUIなどが変わってしまうことがあります。数日も経過すればUIが変わっていたりすることがあります。このため、本連載で説明している画面は参考程度にしてもらうのが無難です。UIFlowに関しては基本的な手順はあまり変わっていませんので、プログラムをどのような手順で作成・ブロックを構成しているのかを把握してもらえばよいかと思います。
それでは早速M5StickCを使ってみましょう。M5StickCはあらかじめサンプルプログラムが組み込まれており、そのままでも何らかの用途に使うことができます(ただし、時刻はあっていません)
まず、付属のUSB Type-CケーブルをM5StickC本体に接続します。問題がなければ接続され電源が供給されるとプログラムが起動します。6軸センサーを使ったサンプル、次にRTCを利用した時計、マイク入力を利用したサンプル、赤外線サンプル、Bluetooth (BLE) のサンプルが用意されています。これらは正面のボタン(M5と書かれたボタン。名称はボタンA)か右側のボタン(名称はボタンB)を押すと順番に切り替わるようになっています。
![](https://image.news.livedoor.com/newsimage/stf/5/4/54fc7_1223_5e3d6614c3f295751a09a216f788ab71.jpg)
![](https://image.news.livedoor.com/newsimage/stf/8/f/8f8e3_1223_82ec2a5947c4152016c78aa5ae50329d.jpg)
![](https://image.news.livedoor.com/newsimage/stf/8/8/88643_1223_e5372d584c777c7e35dafb6b26e2a48e.jpg)
![](https://image.news.livedoor.com/newsimage/stf/c/3/c350f_1223_b665112225d9773eca193f42a6ccc663.jpg)
![](https://image.news.livedoor.com/newsimage/stf/1/c/1c656_1223_989668bbf8ec19a36b1572189a3e8aff.jpg)
M5StickCをリセットする場合は左側のボタン(名称は電源スイッチ)を軽く押します。また、M5StickCの電源をオフにする場合は左側のボタンを6秒以上押し続けます。
![](https://image.news.livedoor.com/newsimage/stf/e/b/ebba4_1223_1072aa263197338f804b77ce3e3a5292.jpg)
ここまで問題なくできればよいのですが、そうでない場合もあります。例えばM5StickC内蔵バッテリーが完全に放電してしまっている場合は図のような表示になります。他の原因でも起動しない(画面が黒いまま)ことがあります。
![](https://image.news.livedoor.com/newsimage/stf/7/b/7b3f0_1223_4a12bb7c2e6ef716af559c3e650c5904.jpg)
このような状態になったら一度M5StickCの電源を落とします(本体左側のボタンを6秒以上長押し)。次にジャンパーピンや抵抗などを3V3とG0と書かれた端子に差し込みます。この状態でM5StickCとUSBケーブルを接続し電源を供給します(自動的に電源が入らない場合は電源ボタンを押します)。
![](https://image.news.livedoor.com/newsimage/stf/c/e/ceeec_1223_460fb4c3a05df5f1e3f02553df0e3c2b.jpg)
すると電源が入りサンプルプログラムが起動します。
![](https://image.news.livedoor.com/newsimage/stf/7/e/7ec6d_1223_e25730ad1c29d9d6821551cec0634316.jpg)
これでも起動しない場合は、運が悪かったと思って、もう1台購入するのが早いでしょう。(筆者もどうやっても起動しないM5StickCが1つあります)
M5Stack社は開発速度優先みたいなので、時々不良品に当たってしまうこともあります。ここらへんに関しては大目に見てあげましょう。
○UIFlowで開発する前に
この連載ではマイクロビットの時と同じようにブロックエディタを使ってM5StickCのプログラムを作成します。このブロックエディタはUIFlowという名前ですが、UIFlowをM5StickCで使うにはファームウェアを書き換える必要があります。
まず、M5Stackのページにアクセスします。ページ上部にあるSOFTWAREのメニューからDownloadsの項目を選択します。(直接https://m5stack.com/pages/downloadにアクセスしても構いません)
![](https://image.news.livedoor.com/newsimage/stf/0/4/04f9a_1223_795d7c88c2eed539b507c5c27b0f53ce.jpg)
するとダウンロードページに移動します。
![](https://image.news.livedoor.com/newsimage/stf/4/9/49637_1223_bec070a8358e51e1225eec3ccbb1906d.jpg)
必要なプログラムをダウンロードします。必要なのはM5BurnerとCP2104 Driverの2つです。なお、すでにCP2104 Driverがインストールされている場合は新たにインストールする必要はありません。使用しているOSを選択すると自動的にダウンロードが始まります。ここではmacOS用で説明していますが、Windows 10、Linuxでも同様です。
![](https://image.news.livedoor.com/newsimage/stf/1/b/1bdb0_1223_1e81d112af6c25a914037feac2d86357.jpg)
![](https://image.news.livedoor.com/newsimage/stf/9/e/9e492_1223_b8a60a998339cd2d422cd2dc4ef9f4e6.jpg)
ダウンロードが終了したら最初にCP2104 Driverをインストールします。
![](https://image.news.livedoor.com/newsimage/stf/d/2/d275c_1223_c6ac81f21b045f90a67f83a11213c041.jpg)
あとは手順に従ってドライバーをインストールしてください。
![](https://image.news.livedoor.com/newsimage/stf/c/3/c3924_1223_7de7c421df5e59ce04a04be236144fa8.jpg)
ドライバーをインストールしたら次にM5Burnerを起動します。場合によってはセキュリティ確認の画面が表示されることがあります。
![](https://image.news.livedoor.com/newsimage/stf/9/2/92c20_1223_b293891bfe864fa34c032aea5fe0167a.jpg)
![](https://image.news.livedoor.com/newsimage/stf/1/6/16900_1223_c0e2295cb7d0b525644e1387d2fed405.jpg)
M5Burnerが起動すると図のような画面になります。
![](https://image.news.livedoor.com/newsimage/stf/3/5/357d8_1223_62bed58e250e6279a38d15e861da008f.jpg)
左側に製品の画像があるので、STICKCの画像をクリックします。するとUIFlowの枠が表示されます。ここで、ダウンロードするファームウェアのバージョンを選択します。バージョンは開発するUIFlowのバージョンに合わせる必要があります。ここでは、1.4.5.1のファームウェアをダウンロードします。バージョンを選択したら枠の右下にあるDownloadボタンをクリックします。
![](https://image.news.livedoor.com/newsimage/stf/7/e/7ed85_1223_a3dc5172b638756ee8d72f1a44edcf29.jpg)
するとダウンロードが始まります。
![](https://image.news.livedoor.com/newsimage/stf/2/e/2eb25_1223_6af8174881555b0af8970d8f04c57a41.jpg)
ダウンロードが完了すると図のような画面になります。
![](https://image.news.livedoor.com/newsimage/stf/6/0/60af8_1223_fb917844e9c921a67192a73a980dae73.jpg)
次にコンピューターとM5StickCをUSBケーブルで接続します。接続したらM5StickCの電源を入れます(後から入れても書き込むことはできます)。接続しているCOMポートを選択します。複数のM5StickCを接続している場合は間違えないようにしてください。なお、通信速度などは書き込むデバイスに合わせて自動的に設定されます。
![](https://image.news.livedoor.com/newsimage/stf/9/7/9715e_1223_c8d6198eda0523dd9bf90b70ef7f0edb.jpg)
選択したらBurnのボタンをクリックします。
![](https://image.news.livedoor.com/newsimage/stf/9/1/913d4_1223_df574bc24b90d8e58af8b36131f36afb.jpg)
すると書き込みが始まります。少し時間がかかるので待ちます。
![](https://image.news.livedoor.com/newsimage/stf/2/1/21104_1223_994470e7120b49162a45c5f28db132ba.jpg)
100%まで書き込まれたら完了です。Closeのボタンをクリックします。なお、この画面はCOM Monitorのボタンをクリックしても表示させることができます。
![](https://image.news.livedoor.com/newsimage/stf/0/2/02295_1223_b499fc6f8573ecdb35013f1616875892.jpg)
これで完了です。M5Burnerを終了させます。
○ネットワークの設定
次にM5StickCと接続するネットワークを設定します。UIFlowのファームウェアが書き込まれたM5StickCを起動すると図のような画面になります。
![](https://image.news.livedoor.com/newsimage/stf/4/9/49037_1223_0159b740f6007a9888dd43281908328f.jpg)
数秒すると図のような画面になります。
![](https://image.news.livedoor.com/newsimage/stf/c/b/cb88e_1223_909991ea6c0a21e01553469d77779261.jpg)
次にM5StickCのネットワークに接続します。ここではiPhoneを使用していますが、Wi-Fiに接続できるスマートフォンやパソコンであれば何でも構いません。また、この設定は一度行えばM5StickC内に記憶されます。
iPhoneのWi-Fi設定画面に表示されるネットワークからM5StickCの画面に表示されているネットワーク名を選択します。パスワード等は不要で自動的に接続されます。
![](https://image.news.livedoor.com/newsimage/stf/3/a/3a8b0_1223_c9b223db6665a575eaec13269d994634.jpg)
![](https://image.news.livedoor.com/newsimage/stf/d/c/dc39c_1223_73b18cfe0606312f84ce6c5f3677f251.jpg)
次にブラウザ(Safari、Google Chrome等)を起動します。起動したらアドレス欄に192.168.4.1と入力します。なお、このIPアドレスはM5StickCの画面に表示されています。
![](https://image.news.livedoor.com/newsimage/stf/c/3/c35af_1223_99610636634f7679bc519b139f46b5f5.jpg)
M5StickCを接続するWi-FiのSSIDとパスワードを入力します。入力したらConfigureボタンをタッチします。
![](https://image.news.livedoor.com/newsimage/stf/0/8/084f8_1223_7d7798488c93af1b95b1c6da837f9c7e.jpg)
正しく設定されると図のような画面になります。
![](https://image.news.livedoor.com/newsimage/stf/6/7/67410_1223_47753ea1d2357d064985ff050f235038.jpg)
設定が完了すると自動的にM5StickCが再起動します。再起動するとM5StickCに接続するためのAPIキーが画面に表示されます。なお、このAPIキーはファームウェアがバージョンアップしたりすると変わってしまいます。つまり、M5StickCハードウェア固有の番号(ユニークID、MACアドレス等)ではありません。
![](https://image.news.livedoor.com/newsimage/stf/a/3/a3b72_1223_6a385bf0741b347d8fd936d8305367ba.jpg)
これでM5StickC側の設定はすべて完了です。
○UIFlowを起動
まず、M5StickCの電源を入れます。次にブラウザで以下のページにアクセスします。
https://flow.m5stack.com/
アクセスすると図のような画面になります。(設定済みの場合やアップデート等によって図のような選択画面にならないこともあります)
ここではUIFlow 1.4.5を使用しますので図の左側のUIFlowの文字(ボタン)をクリックします。なお、この選択画面を表示したくない場合は「Always choose this version」にチェックマークを入れてから選択します。
![](https://image.news.livedoor.com/newsimage/stf/3/4/34f1f_1223_50830ce72a980e7b757993276e04c5c4.jpg)
選択すると図のようなダイアログが表示されます。Api Keyの欄にはM5StickCの画面に表示されているAPIキーの番号を入力します。Languageは日本語を選択します。DeviceはStick-Cを選択します。選択したらOKボタンをクリックします。
![](https://image.news.livedoor.com/newsimage/stf/7/4/74a67_1223_0739864528f432ca8e1e4215b2c15df7.jpg)
するとUIFlowでプログラムを開発できる画面になります。
![](https://image.news.livedoor.com/newsimage/stf/5/5/557b4_1223_d52cedd5287223bb013b63d1557789ac.jpg)
M5StickCが接続されている場合は図のように表示されます。
![](https://image.news.livedoor.com/newsimage/stf/c/1/c1442_1223_b0423e9ef2c7c2543808b1dcab1a3b4f.jpg)
接続できなかった場合は図のように表示されます。
![](https://image.news.livedoor.com/newsimage/stf/c/3/c3a6f_1223_7315a6aea3adc0885bb7f07843e6ffea.jpg)
M5StickCの電源が入っており、Wi-Fiにも接続できているのに接続できていない場合は、version : 1.4.5の右側にあるリロードボタンをクリックしてください。(素早く連続して押さないで下さい。3秒以上時間おいてリロードしてください)
![](https://image.news.livedoor.com/newsimage/stf/7/6/76162_1223_a1373fcaea3850c057e8b2ab6fc60ff7.jpg)
それでも接続できない場合は、接続するデバイスの種類がStick-Cになっているか確認してください(UIFlowの最初の画面です)。設定画面を出すには図の矢印で示すApi keyの文字をクリックします。
![](https://image.news.livedoor.com/newsimage/stf/a/0/a0e9e_1223_623296086c4c519e0cc7901e2d83dd54.jpg)
設定が正しいにもかかわらず接続できない場合は、一度M5StickCをリセットしてください(本体左側のボタンを軽く押します)。リセットしても駄目な場合はM5StickCの電源を落としてから再度電源を入れてください(本体左側のボタンを6秒以上長押し)。
また、Wi-Fi接続しているルーターに不具合がある場合も接続できません。これ以外の要因(開発元のサーバーに不具合)でも接続できない場合があります。どうしても駄目な場合は数時間後にUIFlowを起動してM5StickCを接続してみてください。
無事にM5StickCがUIFlowで認識できればプログラム開発の準備は完了です。
次回からUIFlowと使ってM5StickCのプログラムを作成していきます。
著者 古籏一浩
プログラミングをベースにして面白そうなものはとりあえずやってみるというスタンス。複雑なものよりシンプルで楽しめるものが好み。最近は30年前に移植したゲーム(mz-700版 SPACE HARRIER)の話などを書いたりしています。著者サイト:http://www.openspc2.org/
今回はM5Stack社から発売されているM5StickCを使ってみます。以前はグレーのM5Stickもありましたが、2020年7月現在ではオレンジ色のM5StickCが発売されています。ここで使用するM5StickCは腕時計のバンド付きのものですが、M5StickC単品でも入手することができます。
・M5Stack
https://m5stack.com/
![](https://image.news.livedoor.com/newsimage/stf/e/2/e297f_1223_d6ef87ffb0b372118e7fdd275c9010b3.jpg)
・M5StickC(本体のみ)
https://shop.pimoroni.com/products/enviro-bit
・M5StickC(腕時計バンド付き)
https://www.switch-science.com/catalog/5517/
![](https://image.news.livedoor.com/newsimage/stf/b/1/b19b2_1223_432e4a3169916cd577d929b4f5fa1cdc.jpg)
腕時計バンド付きのM5StickCには以下のものが同梱されています。
![](https://image.news.livedoor.com/newsimage/stf/8/d/8dab1_1223_25c32cd6a8922d32318830d459507966.jpg)
![](https://image.news.livedoor.com/newsimage/stf/f/2/f20c4_1223_ca86a4640c4202f397838b01ab76a3b6.jpg)
M5StickCを使用するにあたって最初に注意事項があります。M5StickCを制作しているM5Stack社は非常に開発が早く以後に説明するソフトウェア(M5BurnerやUIFlowなど)やデバイスに内蔵されるセンサーや関連デバイス、仕様、画面構成やUIなどが変わってしまうことがあります。数日も経過すればUIが変わっていたりすることがあります。このため、本連載で説明している画面は参考程度にしてもらうのが無難です。UIFlowに関しては基本的な手順はあまり変わっていませんので、プログラムをどのような手順で作成・ブロックを構成しているのかを把握してもらえばよいかと思います。
それでは早速M5StickCを使ってみましょう。M5StickCはあらかじめサンプルプログラムが組み込まれており、そのままでも何らかの用途に使うことができます(ただし、時刻はあっていません)
まず、付属のUSB Type-CケーブルをM5StickC本体に接続します。問題がなければ接続され電源が供給されるとプログラムが起動します。6軸センサーを使ったサンプル、次にRTCを利用した時計、マイク入力を利用したサンプル、赤外線サンプル、Bluetooth (BLE) のサンプルが用意されています。これらは正面のボタン(M5と書かれたボタン。名称はボタンA)か右側のボタン(名称はボタンB)を押すと順番に切り替わるようになっています。
![](https://image.news.livedoor.com/newsimage/stf/5/4/54fc7_1223_5e3d6614c3f295751a09a216f788ab71.jpg)
![](https://image.news.livedoor.com/newsimage/stf/8/f/8f8e3_1223_82ec2a5947c4152016c78aa5ae50329d.jpg)
![](https://image.news.livedoor.com/newsimage/stf/8/8/88643_1223_e5372d584c777c7e35dafb6b26e2a48e.jpg)
![](https://image.news.livedoor.com/newsimage/stf/c/3/c350f_1223_b665112225d9773eca193f42a6ccc663.jpg)
![](https://image.news.livedoor.com/newsimage/stf/1/c/1c656_1223_989668bbf8ec19a36b1572189a3e8aff.jpg)
M5StickCをリセットする場合は左側のボタン(名称は電源スイッチ)を軽く押します。また、M5StickCの電源をオフにする場合は左側のボタンを6秒以上押し続けます。
![](https://image.news.livedoor.com/newsimage/stf/e/b/ebba4_1223_1072aa263197338f804b77ce3e3a5292.jpg)
ここまで問題なくできればよいのですが、そうでない場合もあります。例えばM5StickC内蔵バッテリーが完全に放電してしまっている場合は図のような表示になります。他の原因でも起動しない(画面が黒いまま)ことがあります。
![](https://image.news.livedoor.com/newsimage/stf/7/b/7b3f0_1223_4a12bb7c2e6ef716af559c3e650c5904.jpg)
このような状態になったら一度M5StickCの電源を落とします(本体左側のボタンを6秒以上長押し)。次にジャンパーピンや抵抗などを3V3とG0と書かれた端子に差し込みます。この状態でM5StickCとUSBケーブルを接続し電源を供給します(自動的に電源が入らない場合は電源ボタンを押します)。
![](https://image.news.livedoor.com/newsimage/stf/c/e/ceeec_1223_460fb4c3a05df5f1e3f02553df0e3c2b.jpg)
すると電源が入りサンプルプログラムが起動します。
![](https://image.news.livedoor.com/newsimage/stf/7/e/7ec6d_1223_e25730ad1c29d9d6821551cec0634316.jpg)
これでも起動しない場合は、運が悪かったと思って、もう1台購入するのが早いでしょう。(筆者もどうやっても起動しないM5StickCが1つあります)
M5Stack社は開発速度優先みたいなので、時々不良品に当たってしまうこともあります。ここらへんに関しては大目に見てあげましょう。
○UIFlowで開発する前に
この連載ではマイクロビットの時と同じようにブロックエディタを使ってM5StickCのプログラムを作成します。このブロックエディタはUIFlowという名前ですが、UIFlowをM5StickCで使うにはファームウェアを書き換える必要があります。
まず、M5Stackのページにアクセスします。ページ上部にあるSOFTWAREのメニューからDownloadsの項目を選択します。(直接https://m5stack.com/pages/downloadにアクセスしても構いません)
![](https://image.news.livedoor.com/newsimage/stf/0/4/04f9a_1223_795d7c88c2eed539b507c5c27b0f53ce.jpg)
するとダウンロードページに移動します。
![](https://image.news.livedoor.com/newsimage/stf/4/9/49637_1223_bec070a8358e51e1225eec3ccbb1906d.jpg)
必要なプログラムをダウンロードします。必要なのはM5BurnerとCP2104 Driverの2つです。なお、すでにCP2104 Driverがインストールされている場合は新たにインストールする必要はありません。使用しているOSを選択すると自動的にダウンロードが始まります。ここではmacOS用で説明していますが、Windows 10、Linuxでも同様です。
![](https://image.news.livedoor.com/newsimage/stf/1/b/1bdb0_1223_1e81d112af6c25a914037feac2d86357.jpg)
![](https://image.news.livedoor.com/newsimage/stf/9/e/9e492_1223_b8a60a998339cd2d422cd2dc4ef9f4e6.jpg)
ダウンロードが終了したら最初にCP2104 Driverをインストールします。
![](https://image.news.livedoor.com/newsimage/stf/d/2/d275c_1223_c6ac81f21b045f90a67f83a11213c041.jpg)
あとは手順に従ってドライバーをインストールしてください。
![](https://image.news.livedoor.com/newsimage/stf/c/3/c3924_1223_7de7c421df5e59ce04a04be236144fa8.jpg)
ドライバーをインストールしたら次にM5Burnerを起動します。場合によってはセキュリティ確認の画面が表示されることがあります。
![](https://image.news.livedoor.com/newsimage/stf/9/2/92c20_1223_b293891bfe864fa34c032aea5fe0167a.jpg)
![](https://image.news.livedoor.com/newsimage/stf/1/6/16900_1223_c0e2295cb7d0b525644e1387d2fed405.jpg)
M5Burnerが起動すると図のような画面になります。
![](https://image.news.livedoor.com/newsimage/stf/3/5/357d8_1223_62bed58e250e6279a38d15e861da008f.jpg)
左側に製品の画像があるので、STICKCの画像をクリックします。するとUIFlowの枠が表示されます。ここで、ダウンロードするファームウェアのバージョンを選択します。バージョンは開発するUIFlowのバージョンに合わせる必要があります。ここでは、1.4.5.1のファームウェアをダウンロードします。バージョンを選択したら枠の右下にあるDownloadボタンをクリックします。
![](https://image.news.livedoor.com/newsimage/stf/7/e/7ed85_1223_a3dc5172b638756ee8d72f1a44edcf29.jpg)
するとダウンロードが始まります。
![](https://image.news.livedoor.com/newsimage/stf/2/e/2eb25_1223_6af8174881555b0af8970d8f04c57a41.jpg)
ダウンロードが完了すると図のような画面になります。
![](https://image.news.livedoor.com/newsimage/stf/6/0/60af8_1223_fb917844e9c921a67192a73a980dae73.jpg)
次にコンピューターとM5StickCをUSBケーブルで接続します。接続したらM5StickCの電源を入れます(後から入れても書き込むことはできます)。接続しているCOMポートを選択します。複数のM5StickCを接続している場合は間違えないようにしてください。なお、通信速度などは書き込むデバイスに合わせて自動的に設定されます。
![](https://image.news.livedoor.com/newsimage/stf/9/7/9715e_1223_c8d6198eda0523dd9bf90b70ef7f0edb.jpg)
選択したらBurnのボタンをクリックします。
![](https://image.news.livedoor.com/newsimage/stf/9/1/913d4_1223_df574bc24b90d8e58af8b36131f36afb.jpg)
すると書き込みが始まります。少し時間がかかるので待ちます。
![](https://image.news.livedoor.com/newsimage/stf/2/1/21104_1223_994470e7120b49162a45c5f28db132ba.jpg)
100%まで書き込まれたら完了です。Closeのボタンをクリックします。なお、この画面はCOM Monitorのボタンをクリックしても表示させることができます。
![](https://image.news.livedoor.com/newsimage/stf/0/2/02295_1223_b499fc6f8573ecdb35013f1616875892.jpg)
これで完了です。M5Burnerを終了させます。
○ネットワークの設定
次にM5StickCと接続するネットワークを設定します。UIFlowのファームウェアが書き込まれたM5StickCを起動すると図のような画面になります。
![](https://image.news.livedoor.com/newsimage/stf/4/9/49037_1223_0159b740f6007a9888dd43281908328f.jpg)
数秒すると図のような画面になります。
![](https://image.news.livedoor.com/newsimage/stf/c/b/cb88e_1223_909991ea6c0a21e01553469d77779261.jpg)
次にM5StickCのネットワークに接続します。ここではiPhoneを使用していますが、Wi-Fiに接続できるスマートフォンやパソコンであれば何でも構いません。また、この設定は一度行えばM5StickC内に記憶されます。
iPhoneのWi-Fi設定画面に表示されるネットワークからM5StickCの画面に表示されているネットワーク名を選択します。パスワード等は不要で自動的に接続されます。
![](https://image.news.livedoor.com/newsimage/stf/3/a/3a8b0_1223_c9b223db6665a575eaec13269d994634.jpg)
![](https://image.news.livedoor.com/newsimage/stf/d/c/dc39c_1223_73b18cfe0606312f84ce6c5f3677f251.jpg)
次にブラウザ(Safari、Google Chrome等)を起動します。起動したらアドレス欄に192.168.4.1と入力します。なお、このIPアドレスはM5StickCの画面に表示されています。
![](https://image.news.livedoor.com/newsimage/stf/c/3/c35af_1223_99610636634f7679bc519b139f46b5f5.jpg)
M5StickCを接続するWi-FiのSSIDとパスワードを入力します。入力したらConfigureボタンをタッチします。
![](https://image.news.livedoor.com/newsimage/stf/0/8/084f8_1223_7d7798488c93af1b95b1c6da837f9c7e.jpg)
正しく設定されると図のような画面になります。
![](https://image.news.livedoor.com/newsimage/stf/6/7/67410_1223_47753ea1d2357d064985ff050f235038.jpg)
設定が完了すると自動的にM5StickCが再起動します。再起動するとM5StickCに接続するためのAPIキーが画面に表示されます。なお、このAPIキーはファームウェアがバージョンアップしたりすると変わってしまいます。つまり、M5StickCハードウェア固有の番号(ユニークID、MACアドレス等)ではありません。
![](https://image.news.livedoor.com/newsimage/stf/a/3/a3b72_1223_6a385bf0741b347d8fd936d8305367ba.jpg)
これでM5StickC側の設定はすべて完了です。
○UIFlowを起動
まず、M5StickCの電源を入れます。次にブラウザで以下のページにアクセスします。
https://flow.m5stack.com/
アクセスすると図のような画面になります。(設定済みの場合やアップデート等によって図のような選択画面にならないこともあります)
ここではUIFlow 1.4.5を使用しますので図の左側のUIFlowの文字(ボタン)をクリックします。なお、この選択画面を表示したくない場合は「Always choose this version」にチェックマークを入れてから選択します。
![](https://image.news.livedoor.com/newsimage/stf/3/4/34f1f_1223_50830ce72a980e7b757993276e04c5c4.jpg)
選択すると図のようなダイアログが表示されます。Api Keyの欄にはM5StickCの画面に表示されているAPIキーの番号を入力します。Languageは日本語を選択します。DeviceはStick-Cを選択します。選択したらOKボタンをクリックします。
![](https://image.news.livedoor.com/newsimage/stf/7/4/74a67_1223_0739864528f432ca8e1e4215b2c15df7.jpg)
するとUIFlowでプログラムを開発できる画面になります。
![](https://image.news.livedoor.com/newsimage/stf/5/5/557b4_1223_d52cedd5287223bb013b63d1557789ac.jpg)
M5StickCが接続されている場合は図のように表示されます。
![](https://image.news.livedoor.com/newsimage/stf/c/1/c1442_1223_b0423e9ef2c7c2543808b1dcab1a3b4f.jpg)
接続できなかった場合は図のように表示されます。
![](https://image.news.livedoor.com/newsimage/stf/c/3/c3a6f_1223_7315a6aea3adc0885bb7f07843e6ffea.jpg)
M5StickCの電源が入っており、Wi-Fiにも接続できているのに接続できていない場合は、version : 1.4.5の右側にあるリロードボタンをクリックしてください。(素早く連続して押さないで下さい。3秒以上時間おいてリロードしてください)
![](https://image.news.livedoor.com/newsimage/stf/7/6/76162_1223_a1373fcaea3850c057e8b2ab6fc60ff7.jpg)
それでも接続できない場合は、接続するデバイスの種類がStick-Cになっているか確認してください(UIFlowの最初の画面です)。設定画面を出すには図の矢印で示すApi keyの文字をクリックします。
![](https://image.news.livedoor.com/newsimage/stf/a/0/a0e9e_1223_623296086c4c519e0cc7901e2d83dd54.jpg)
設定が正しいにもかかわらず接続できない場合は、一度M5StickCをリセットしてください(本体左側のボタンを軽く押します)。リセットしても駄目な場合はM5StickCの電源を落としてから再度電源を入れてください(本体左側のボタンを6秒以上長押し)。
また、Wi-Fi接続しているルーターに不具合がある場合も接続できません。これ以外の要因(開発元のサーバーに不具合)でも接続できない場合があります。どうしても駄目な場合は数時間後にUIFlowを起動してM5StickCを接続してみてください。
無事にM5StickCがUIFlowで認識できればプログラム開発の準備は完了です。
次回からUIFlowと使ってM5StickCのプログラムを作成していきます。
著者 古籏一浩
プログラミングをベースにして面白そうなものはとりあえずやってみるというスタンス。複雑なものよりシンプルで楽しめるものが好み。最近は30年前に移植したゲーム(mz-700版 SPACE HARRIER)の話などを書いたりしています。著者サイト:http://www.openspc2.org/