今回はM5StickCのUIFlowをWi-Fi接続で使う設定方法をご紹介したいと思います。
電子工作などで大人気のM5Stackシリーズのデバイスですが、UIFlowでのプログラムやArduinoなどが使える便利な端末なので使われている方も多いと思います。
プログラムが苦手な方でもUIFlowと呼ばれるブロックプログラムを使うことにより、機能が割り当てられたブロックを並べることによりプログラムが出来るためプログラム初心者の方やお子様でも比較的簡単にプログラムを組むことができます。
私も電子工作という趣味をはじめてまだ1年ほどしか経っていない初心者ではありますが、UIFlowからプログラムを始めArduinoへと進んでいきました。
そして気付けばM5Stack関連のデバイスがこんなにも増えていました。
ホント便利なデバイスですよね!
そしてありがたいことにM5StickC関連の特集記事に掲載もして頂きました。

M5StickCを使った作例など多数の方が紹介されていますが、私が担当(掲載)したのはM5StickCの導入部分の記事となります。
こちらのブログ記事を抜粋し多くのページを割いて頂いたようでありがたい限りであります。


そんな事でM5StickC関連のお問い合わせを多く頂くようになりました。
導入部分を担当したためか、それに関連したお問い合わせが多いようですね。
その中でもM5StickCをUIFlowで使う場合のWi-Fi設定方法に関するものが多いようなので、上記記事の補足として書き加えていきたいと思います。
【M5StickC】 UIFlowをWi-Fi接続で使う設定方法!
M5StickCをUIFlowで使う場合のWi-Fi設定方法となります。
ここではM5StickCを例にご紹介していきますが、M5StickC Plusなど他のM5Stackデバイスでも同様の手順で行えます。
M5StickCをUIFlowで使う場合、PCへの接続方法はUSB接続のほかWi-Fi環境があればPCに接続することなくプログラムの書き換えを行うことが出来ます。
上記記事でご紹介したUIFlow用のファームウェアをM5StickC本体に書き込んだ状態からご説明していきます。
UIFlow用のファームウェアの書き込みがまだの方は上記記事を参考にして下さい!
Wi-Fi環境の設定
M5StickCにUIFlow用のファームウェアの書き込みが完了し起動するとこのような画面になります。
ファームウェアのバージョンによりUI等の多少の違いがあるかと思います。
Wi-Fi接続画面になっていない場合は、M5StickC本体操作により[SetUp]画面からWi-Fiの項目を選択して下さい。
ここからWi-Fi接続の設定をしていきます。
Wi-Fiに接続出来る機器ならPCやスマートフォンなどどれを使っても問題なく設定することが出来ます。
例えばMacならWi-Fi接続画面にこのようにM5-○○が表示されていると思います。
今回はiPhoneを例に設定していきたいと思います。
iPhoneのWi-Fi設定画面を開くと同様にM5-○○が表示されていると思います。
これをタップして接続します。
次にブラウザを開きます。
今回はiPhoneのSafariを使用しましたが、Chromeなどブラウザなら何でもOKです。
ブラウザを起動したらアドレス入力欄に192.168.4.1と入力します。
これはM5StickC画面に表示されているIPアドレスとなります。
次にM5StickCと接続するWi-FiのSSIDとパスワードを入力します。(ご自分の環境で使用しているものです!)
入力後[Configure]をクリックし、上記SSIDおよびパスワードが問題なければ接続設定されこのような画面になります。
これでM5StickCのWi-Fi設定は完了です。
API KEYの入力
上記Wi-Fi設定が完了するとM5StickCが再起動します。
再起動後、M5StickCに接続するためのAPI KEYが画面に表示されます。
次にUIFlowを起動します。
ブラウザで以下のページにアクセスします。
起動後、[設定]画面を開きます。
先ほど確認できたAPI KEYを入力し、ここではM5StickCを使っているのでデバイスに[M5StickC]を選択します。
問題なければ[接続済み]と表示されます。
これでWi-Fi接続によりM5StickCにプログラムを書き込むことが出来るようになりました。
試しにLED ONブロックを[Setup]ブロックの下に配置してみて下さい。
プログラムの転送ボタンをクリックします。
M5StickC本体のLEDが点灯すれば無事Wi-Fi接続によりUIFlowプログラムを転送する事が出来ました。
お疲れさまでした。
最後に!
お問い合わせを数件頂いたので簡単にまとめてみました。
今回はM5StickCを例にやっていきましたが、他のM5Stackデバイスでも同様の手順となります。
また複数のデバイスを使用する場合、APIKEYによって使い分ける感じとなります。
M5Stackは電子工作には非常に便利なデバイスですよね!







コメントを残す