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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/d226e48e-9faf-3341-443d-9bf5eebe8372.jpeg)


MacにM5StickCをつなげます。
![IMG_8045.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/cbe715c2-e06a-4155-9bc4-92daa51a3b87.jpeg)



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

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

M5Burnerをクリック
[![Image from Gyazo](https://i.gyazo.com/a9db85e07ad8d44ccab7f56cf53220ab.png)](https://gyazo.com/a9db85e07ad8d44ccab7f56cf53220ab)

###開く
ダウンロードが終わると、
ダウンロードしたzipファイルを展開する。
[![Image from Gyazo](https://i.gyazo.com/0b5ff557f0b075697703f8b7894b14be.png)](https://gyazo.com/0b5ff557f0b075697703f8b7894b14be)

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


そして、M５STACKのアイコンをクリック


こんな画面がでたら・・・
[![Image from Gyazo](https://i.gyazo.com/601adb193872eac8fcd1b49415419a09.png)](https://gyazo.com/601adb193872eac8fcd1b49415419a09)


Appleの公式サイトより
[開発元が未確認のMacアプリケーションを開く](https://support.apple.com/ja-jp/guide/mac-help/mh40616/mac)


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

今度は「開いてもよろしいでしょうか？」となります。
![スクリーンショット 2020-10-02 17.25.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/7432f704-0bb7-9f14-aad4-42e2444456ba.png)

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

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

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

<B>COMはusbserial</B>を選び、downloadボタンを押す。

[![Image from Gyazo](https://i.gyazo.com/8e7f0ad57ee1104a8759b20e18801122.jpg)](https://gyazo.com/8e7f0ad57ee1104a8759b20e18801122)

なお、<B>usbserial　が表示されない</B>場合は、
USB-TypeCケーブルを裏返しに差し替えてみてください。
私はこっち側で認識しました。
![IMG_8048.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/671448b7-1caa-0530-bf06-ea896a0dbdb0.jpeg)


###Burn!
ダウンロードが完了すると
downloadがBurnという文字に変わるので、
Burnをクリック
[![Image from Gyazo](https://i.gyazo.com/ca193f0077d0402ca2847334112de303.jpg)](https://gyazo.com/ca193f0077d0402ca2847334112de303)

Wifiの設定画面がでるので、SSIDとPASSWORDを入れる。
[![Image from Gyazo](https://i.gyazo.com/fd743660f9f798dff3ea5ab81c17408d.png)](https://gyazo.com/fd743660f9f798dff3ea5ab81c17408d)


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


##M5Stickの設定
M5StickをPCからはずします。

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

[![Image from Gyazo](https://i.gyazo.com/cfaa5693b4d2b38414c4a1177e710ae5.jpg)](https://gyazo.com/cfaa5693b4d2b38414c4a1177e710ae5)




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

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

![スクリーンショット 2020-10-02 19.14.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/34ab63a0-9c1e-456c-1bc4-fbe17b6deef6.png)

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

[![Image from Gyazo](https://i.gyazo.com/efeb05ea6145c5033db284b7c35ca2f8.png)](https://gyazo.com/efeb05ea6145c5033db284b7c35ca2f8)

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

[![Image from Gyazo](https://i.gyazo.com/d7880394dabe3ea2fda75b5d2f77e977.png)](https://gyazo.com/d7880394dabe3ea2fda75b5d2f77e977)


以上です。

<br>