公式サポートされた M5Stack + M5StickC 用obnizOSをインストールしてみよう！

2020/7/1にリリースされたobnizOS 3.3.0より、公式でM5StackやM5Stickを扱えるようになりました。

いままでだってうごいてたじゃんか！っていうのはありますが、今回のアップデートでちゃんと起動時にディスプレイから設定ができるようになったり、自分でインストールできるようになったりして、いままで不便だったところが解決して obniz Board と同じように扱えるようになりました！！

公式サポートになってできることを確認してみましょう。

- 起動直後のディスプレイ対応
- スイッチのサポート
- 設定画面のサポート
- Wi-Fiの設定画面のサポート
- obniz-cliでインストール対応

だいぶ便利になったのがわかるでしょうか？

さてそんな便利になったobnizOSをインストールしてみましょう。

インストール済みのデバイスを購入した場合は、次の項目の「obnizOSのセットアップ」は不要になります。

# obnizOSのセットアップ

obniz-cliを使い、M5StackやM5Stickにセットアップをしていきます。

まず、obniz-cliをインストールしていきます。

詳しい使い方は次のサイトをご覧ください。

[https://docs.obniz.io/ja/guides/obnizos-for-esp32/quick-start/](https://docs.obniz.io/ja/guides/obnizos-for-esp32/quick-start/)

[https://github.com/obniz/obniz-cli](https://github.com/obniz/obniz-cli)

## obniz-cliのインストール

前もって次の環境を整えてください。

- python 2.7以降 or python 3.4以降
- esptoolのインストール　```pip install esptool``` でインストールできます
- Node.js 12以降

obniz-cliをインストールします。次のコマンドにてインストールできます。

```jsx
npm i obniz-cli -g
```

## obniz-cliでobnizOSをインストールする

obniz-cliでM5StackやM5StickにobnizOSをインストールしていきます。

1. USBでPCとM5Stackを接続します。
M5Stackであれば、USB-Type Cのところに接続できます。
![m5stack-button.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97208/bbfe3ef2-a8f2-fbbc-ec9b-b214fd1fce78.jpeg)
2. どのポートに接続しているか確認しましょう。``obniz-cli os:ports`` と入力すると書き込めそうなポートを教えてくれます。何もでない場合は必要なドライバーがインストールされていないかもしれません。

M5StackやM5Stickであれば、下記のリンクの「CP2104 Driver」からダウンロードできます。

[CP2104 Driver](https://m5stack.com/pages/download)

```bash
$ obniz-cli os:ports
===Found Serial Ports===
COM11
```

こんな感じで確認できます。この例であればCOM11がそのポートになります。

複数あるときは抜き差したときの差分を確認して判断してください。

3.obniz-cliを使用するためにサインインする必要があります。

```bash
$ obniz-cli signin
```

上記のコマンドを実行すると、ブラウザが表示されます。

<img width="656" alt="auth.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97208/ca5edd4f-95e4-718c-ae36-1d87ec1e09d4.png">

ログインしてくださいと出るのでログインして許可してあげてください。

ログインが完了すると、次のようにログインできたことが確認できます！

```bash
$ obniz-cli signin
Local Server Created xxxx
Authenticating...
Logged in as "xxxxx@xxx.com"
```

4.接続できていることを確認したうえで、obnizOSをインストールしていきます。

設定項目がありますので、確認してください。

これから書き込むものによって``-h ``以降で適切なものを選んでください。

- M5Stack : m5stack_basic
- M5StickC : m5stickc
- DevKitC : esp32w

あとは先ほど確認した、ポートを入力してください。``-p ``以降でポートを入力します。

```bash
$ obniz-cli os:flash-create -h m5stack_basic -p COM11
```

実行するとこんな感じでログが出ます！

```bash
$ obniz-cli os:flash-create -h m5stack_basic -p COM11
3.2.1 is the latest for m5stickc. going to use it.
Downloading https://s3-ap-northeast-1.amazonaws.com/obniz-os/obnizos__m5stack_basic__3.2.1.bin
Downloading https://s3-ap-northeast-1.amazonaws.com/obniz-os/obnizos__m5stack_basic__3.2.1__bootloader.bin
Downloading https://s3-ap-northeast-1.amazonaws.com/obniz-os/obnizos__m5stack_basic__3.2.1__partition.bin

***
flashing obnizOS
 serialport: COM11
 baud: 1500000

 hardware: m5stickc
 version: 3.2.1
***

esptool.py v2.8
Serial port COM11
Connecting....
Chip is ESP32D0WDQ6 (revision 1)
Features: WiFi, BT, Dual Core, 240MHz, VRef calibration in efuse, Coding Scheme None
Crystal is 40MHz
MAC: 3c:71:bf:9a:1f:6c
Uploading stub...
Running stub...
Stub running...
Changing baud rate to 1500000
Changed.
Configuring flash size...
Auto-detected Flash size: 4MB
Compressed 10928 bytes to 7680...
Wrote 10928 bytes (7680 compressed) at 0x00001000 in 0.1 seconds (effective 1390.8 kbit/s)...
Hash of data verified.
Compressed 757712 bytes to 497701...
Wrote 757712 bytes (497701 compressed) at 0x00010000 in 6.7 seconds (effective 907.9 kbit/s)...
Hash of data verified.
Compressed 3072 bytes to 137...
Wrote 3072 bytes (137 compressed) at 0x00008000 in 0.0 seconds (effective 3508.7 kbit/s)...
Hash of data verified.

Leaving...
Hard resetting via RTS pin...

***
created one device on obniz Cloud.
obnizID: xxxx-xxxxx
region: jp
description:

obniz-cli going to flash Devicekey to connected device.
***
```

インストールできたら、ディスプレイに情報が表示されるのを確認できるでしょう！

![m5stack-dysplay-1-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97208/24798a0e-fa58-bca7-f6db-0f3a8e45c3ae.jpeg)


# obnizOSの設定

## ネットワーク設定

ネットワークの設定をしていきます。

インストール済みのものを購入した場合は、この項目からセットアップをしていきましょう！

1 M5StackのWi-Fiに接続
M5Stackが出力するWi-Fiにスマートフォンなどで接続します。obniz-XXXXXXXXといった名前のWi-Fiが出力されます。

2 obnizを接続させたいWi-FiのSSIDとパスワードを入力
そのまま端末からブラウザを開き以下のURLを開くことで設定ページが開けます。OSのバージョンによりURLが異なります。

```
http://192.168.0.1
```

接続したいWi-FiのSSIDをプルダウンから選択し、パスワードを半角英数で入力します。
完了したら「Connect」ボタンを押します。

![wifi_configure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97208/ad2908bc-8684-f1fb-429c-92b859ee3f56.png)

[Wi-Fiの詳細設定についてはこちら](https://docs.obniz.io/ja/guides/m5stack/wi-fi/)

接続ができると、次のような画面が表示されます。
これで設定は完了です！

![m5stack-dysplay-2-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97208/f8c84651-09df-fb60-7f47-184302cc8573.jpeg)

## デバイス設定

工場出荷時やネットワーク設定のリセット、MACアドレス確認などできる機能があります。

起動させるときに3つあるボタンのうち真ん中の決定とかかれたボタンを押しながら電源をいれると設定画面が表示されてそこから設定できます。

![m5stack-button.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97208/ce2aeed6-14a5-d3c4-c436-1fe16d1c0844.jpeg)

このようにM5Stackを扱えるようになるのでぜひ試してみてください！