LoginSignup
5

More than 1 year has passed since last update.

posted at

updated at

MacでM5StickCのはじめ方(M5BurnerからUIFlowまで)

M5StickCを始めるのに毎回悩むのでまとめました。

同じ題材の投稿はたくさんありますが、自分のためやハッカソンのときにチームメイトに教えるために整理しました。
M5StickCならプログラミング初心者でもハッカソン当日でもなんとかなると思いますので・・・。

動作確認済み環境

  • MacBook Pro (Retina, 13-inch, Early 2015)
  • macOS Catalina

まず

M5StickCを買います。
https://www.switch-science.com/catalog/5517/

IMG_8042.jpeg

MacにM5StickCをつなげます。
IMG_8045.jpeg

M5Burnerでファームウェアをインストール

ダウンロード

ダウンロードページへ
https://m5stack.com/pages/download

M5Burnerをクリック
Image from Gyazo

開く

ダウンロードが終わると、
ダウンロードしたzipファイルを展開する。
Image from Gyazo

なぜかMacでは、M5STACKのアイコンをドラッグしてアプリケーションフォルダに移動してください。
スイッチサイエンス のサイトにそう書くいてました。
https://mag.switch-science.com/2019/10/18/uiflowupdate/

そして、M5STACKのアイコンをクリック

こんな画面がでたら・・・
Image from Gyazo

Appleの公式サイトより
開発元が未確認のMacアプリケーションを開く

先ほどのアイコンをControlキーを押しながらクリックして、「開く」を選択します。

今度は「開いてもよろしいでしょうか?」となります。
スクリーンショット 2020-10-02 17.25.57.png

「開く」をクリックします。

次回からは、普通にダブルクリックすることで開くことができるようになります。

M5Bunnerが開きました、
ダウンロードをクリック

COMはusbserialを選び、downloadボタンを押す。

Image from Gyazo

なお、usbserial が表示されない場合は、
USB-TypeCケーブルを裏返しに差し替えてみてください。
私はこっち側で認識しました。
IMG_8048.jpg

Burn!

ダウンロードが完了すると
downloadがBurnという文字に変わるので、
Burnをクリック
Image from Gyazo

Wifiの設定画面がでるので、SSIDとPASSWORDを入れる。
Image from Gyazo

以上でファームウェアの書き込みは終了です。

M5Stickの設定

M5StickをPCからはずします。

M5Stickの左側のボタンを2秒間長押しすると、
APIキーが表示されます。

Image from Gyazo

つぎに、ブラウザ版のUIFlowを開きます。
(Macのデスクトップ版はコピペができないので私は推奨しません)

こちらから
http://flow.m5stack.com/

スクリーンショット 2020-10-02 19.14.15.png

「設定」を押すと、設定入力画面が現れるので、
さきほどのAPIキーを入力し、
DeviceをM5StickCを選びます。

Image from Gyazo

OKを押すと、
M5StickCでビジュアルプログラミングができる状態になりました。

Image from Gyazo

以上です。


Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
5