見出し画像

キンエバ中尾さんとつくる「光るアイコン名札」

46u

※開催日程がきまりました！
2021.11.13(土)22:00～　詳しくはこのサイトの最後に！

#サイボウズサーカスはじまるよ

サイボウズサーカス2021が開催されます！パチパチパチ！！まずは12/7(火)～12/8(水)の大阪。

するとtarimoさんからからこんなツイートが流れてきました。Twitterのアイコンをつけてみんなで集まるのはどうですかという話。

で、先日のCydozuDaysの経験から「光るアイコン名札」の話になって

そしたら、中尾さんがM5StickC Plusを早速購入！

じゃ、ハンズオンやりますかとなって。

で、とりあえずマニュアル作成してみようかとさくっと作ってみました。
まだドラフトイメージで追加修正すると思いますが（しないかもですが）公開！！

M5StikC Plus と UIFlow で「光るアイコン名札」を作ろう

中尾さんが購入したM5はこれ！

M5StickCの後継機で、液晶他、機能強化がされています。

LCD：1.14 インチ（0.96 インチ）
解像度：135x 240（80 x 160）
バッテリ容量：120 mAh（80または95 mAh）
ブザーを追加

M5シリーズには他にもM5Stackや色んな種類があって、開発言語も複数選べます。もちろんWindowsでもMACでも利用可能です。

それぞれ好みのハード、開発言語、開発環境が選択できてよいのですが、あまりにも選択肢がありすぎて、はじめてのときには何からどう始めて良いのか迷ってしまいます。わたしがそうでした。

ふむふむ。それでは今回は話の流れ上、

M5シリーズは、中尾さんが購入した「M5StikC Plus」
設定は私がWindowsPCしかもってないので「Windows」
設定後はMACでもWindowsでも操作できるよう「UIFlowブラウザ版」

でやってみますか。まだ私も、M5StickC PlusでUIFlowはやったことないし。
ちなみに、M5StickC(ノーマル)とM5Stackの場合の手順は以下リンクにnote記事を書いています。

M5StickC Plus 初期画面

手持ちのM5StickC Plusに一旦Arudino IDEでサンプルプログラムを入れ直してみました。ココからスタートします。

画像23

M5StickC Plusで「光るアイコン名札」を作成するにあたっては、正直UIFlowでのプログラミングより、そこまでの環境設定の方が難しいと思います。^^;

感覚的には環境設定９割、いやそれ以上かも。

とくにM5StikC Plusは、別途最新ドライバーをダウンロードしないといけないので、よけいにわかりにくいです。ほかにも設定にあたっていくつかのハマリポイントがありますが。。。

そこは、過去さんざん悩んで試行錯誤した結果をシェアしますので、そのへん含めた私が今できる限りの「設定完了までの最短コース」をマニュアル化します！

ざっくり手順

M5Burnerの設定
↓
最新ドライバの設定
↓
UIFlowの環境を設定
↓
インターネットモード設定
↓
ブラウザ版UIFlowからアクセス
↓
UIFlowで「光るアイコン名札」作成

M5Burnerの設定

M5Burnerは、UIFlowの開発環境を設定するツールとして使います。
いわゆる「M5Stick Plusのファームウェアの書き換えをする」という作業をするためです。

以下サイトへアクセスしてM5burnerをダウンロードします。

今回はWindowsを選択 Win10 x64 (x2.2.8)をダウンロード。

画像27

ダウンロードしたM5Burner.zipを展開します。

nafuda13_m5burnerZIP中身エクスプローラー調整_b

M5Burner.exeを起動します。
場合によっては.NET3.5を要求される場合があります。

nafuda17_m5burner起動m5stack

初期画面ではM5Stackの表示がでます。
左のメニューからStickCを選択。ここからM5StickC PlusのUIFlowをダウンロードしてM5StickC Plusに設定します。

nafuda18_dl前

ここ左上の赤枠に注目。左上のCOMのところが空白です。

この時点でM5StickC Plusは、物理的にUSBケーブルでパソコンと接続してても認識してくれてません。まずはここに「COM4」など、接続を認識させる必要があります。

USBドライバーの設定

ここハマリポイント！M5StickC Plusの場合は、最新のドライバをダウンロードする必要があります。以前苦労しました（他に手があるかもしれませんが私はわかりません）。詳細は以下リンクです。

ようするにこれの解決^^;

nafuda30_デバイスマネージャ_ok

で、解決するためには以下サイトに最新のドライバーがあります。

ちょっとスクロールすると、FTDI Driverの緑文字のリンクがあります。（赤枠）

画像27

クリックすると
ドライバ一覧が表示されます。

画像27

Windows setup_executable をダウンロードします。
CDM212364_Setup.zipを展開します。

nafuda53_ftdi展開後のexe_b

上記、展開後のexeがドライバーのインストーラーです。
CDM212364_Setup.exeをクリックします。

nafuda56_ftdiインスト01

[Extract]

nafuda57_ftdiインスト02

[次へ]

nafuda58_ftdiインスト03

◎同意します
[次へ]

nafuda61_ftdiインスト04

デバイスが更新されました

nafuda63_ftdiインスト06

一応バージョン確認。うん最新ぽいですね。
[完了]

デバイスマネージャーは。。。

nafuda72_デバイスマネージャyok_b

解決！

UIFlowの環境を設定

M5burnerを起動して、UIFlowの環境をM5StickC Plusに書き込みします。

nafuda75_burnインスト01 b

左上の赤色枠COM:のところが「COM4」などと表示されていれば、認識成功です！
真ん中の、UIFlow_M5StickC_Plusの下の
[Download]をクリックします。

「v1.8.6-plus▼」がM5Burnerの中にダウンロードされます。

nafuda75_burnインスト01

ダウンロードされたらこんな感じでボタンが３つ現れます。
[Burn]クリックで、 M5StickC PlusにUIFlowの環境を書き込み開始します！

nafuda76_burnインストfifi無視

ハマリポイント！ここ何か入れないといけないと思って悩みましたが、空白のままでOKでした。
[Start]

nafuda79_burnインストログ02

ダウンロード状況のログがスクロールして
Burn Successfully
がでたら成功！！
[Close]

インターネットモード設定

M5StickC Plusをインターネットに接続する設定をします。
手順としては、

直接操作でM5StickC Plusを「USBモード」にする
↓
M5BurnerでM5StickC Plusを「インターネットモード」にする

という二段構成でいきます。パソコンからM5StickC PlusをUSB接続経由でインターネットモードにするという作戦です。

UIFlow-Desktop-IDEを使う方や、もっとよい「インターネットモード」にする方法もあるかもですが、私がやった方法がこれなので。^^;

nafuda75_burnインスト02

[Configuration]

画像28

Get UIFlow .... と出る場合はまだつながってません。

M5StickC本体から「USBモード」にするのは、以下リンクがわかりやすいです。@nagase様、情報ありがとうございます。

実際手作業として必要なのは以下２点。 

IMG_7024_UIロゴ_a

パワーボタンを押してM5stickC Plusを再起動する

画像33

UIFlow ロゴが表示されている間にボタンBを1回押す

基本はこれで行けるはずですが、M5stickC Plusの直接操作は公式マニュアルみたいなのがみつけれなくて結構ハマりました。私は腕時計の時間設定とか苦手な人です。^^;

いろいろやって無事USBモードになりました。^^

画像27

これで設定的にもUSBで接続可能です。

以下サイトも参考になります。東京バード様ありがとうございます。

先ほどの

nafuda75_burnインスト02

[Configuration]をクリックで設定画面にすすめばOKです。

画像39

はじめて「インターネットモード」に接続する際、上記メッセージボックスが出るかもしれません。ここは
Continue
一択なのですが。。。
APN設定を初期値で"CMNET"にするとのこと、具体的に何がどうなるのかよくわかってません。^^;

nafuda83_UIFloeConfig要画像加工_a

上記画面で以下設定をします。ここで「インターネットモード」ですね！

nafuda83_UIFloeConfig要画像加工_c

ApiKey: ******** 8桁の英数字
Start Mode: Internet Mode
Boot Menu: True
Server: frow.m5stack.com
Wifi: 利用可能なSSIDとPASSWORDを設定してください

ApiKeyはあとで使いますので、ここで控えるかコピペしておきます。

画像16

Success
[OK]
M5StickC Plusが「インターネットモード」になっていれば成功です。

画像27

やった！
「INTERNETモード」になればパソコンとのUSB接続は不要です。

ブラウザ版UIFlowからアクセス

「ブラウザ版」のUIFlowは以下サイトから操作します。


https://flow.m5stack.com/

今後このリンクからUIFlowでプログラムを作成することになりますので、ブックマーク等をしておくのをオススメします。

nafuda92_ブラウザ版起動_a

先ほど控えたApi key: を入力します。
[OK]

nafuda93_接続済み

つながった！
M5StickCですが詳細は以下にまとめていますので参考になると思います。

UIFlowで「光るアイコン名札」作成

やり方は、M5StickCとまったくいっしょです。さすがに同じ内容になるのでリンクでカンベン。^^;

ただM5StickCとM5StickC Plusの大きな違いは液晶の大型化
解像度が、80 x 160から135x 240に大幅アップしてますよね！

折角ですので、あえてM5StickC（80 x 160）の名札画像をいれてみました。

画像22

じゃーん！！

画像23

なるほどなるほど。
M5StickCとPlusの液晶解像度と大きさの違いがよくわかりました。

一旦以上です。

さて、キンエバ中尾さんとつくる「光るアイコン名札」の開催日程などはは、そのうち中尾さんがなんとかしてくれるでしょう。^^

開催日程決定！

2021.11.12追記
キンエバ中尾さんとつくる「光るアイコン名札」開催がきまりました！

2021.11.13 kintone Café JAPAN！！

の、あと。^^;
22時からゆるっとやります。


参加希望の方はキンエバ中尾さんにTwitterのDMにて！^^

初期化の方法

色々やっててへんなになっちゃった。(^^;
以下で初期化できるようです！

画像35

右上の
Eraseクリック

画像37

close
この時点で、M5StickC Plusはうんともすんとも言わなくなります。^^;

nafuda75_burnインスト01

で、Burnをクリックすると更新されて。。。

IMG_7027_elase後

初期化完了です（多分）

いいなと思ったら応援しよう！