ChromebookだけでM5StackのUIFlowを使えるようにする

# はじめに
前回ChromebookでLinux環境が使えない場合でも、WindowsPC使ってファームウェアだけ書き換えることでM5StackのUIFlowが使えるようにするメモを残しましたが、今回はLinux環境が使える場合のためにChromebookのLinux環境でM5Burnerを使ってファームウェアを書き換えできたのでそのメモを残します。
学校で生徒が運用する場合は、セキュリティや事故防止が優先されLinux環境を使うこと自体がNGとなってる場合があります。その場合は前回の記事を参照してください。（ファームウェアの書き換えにWindowsのPCなど別の端末が必要です）
(参考)前回の記事：[ChromebookでM5Stackを触る](https://qiita.com/t-sho/items/338c1447f6c8b2b6d801)

# Linuxを使えるようにする
1. システムトレイから設定をクリックします
    ![Screenshot 2023-02-09 15.33.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/c4d181f7-b0d5-a9a9-332d-55fd611b4583.png)
1. 設定の画面で「デベロッパー」をクリックします
    ![Screenshot 2023-02-09 15.36.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/5e993df3-d369-e658-9dbb-551954236a33.png)
1. Linux環境をオンにします
    ![Screenshot 2023-02-09 15.37.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/00f6b85a-925f-dfb5-e09a-ab913a43aeab.png)
1. セットアップ開始画面で「次へ」をクリックします
    ![Screenshot 2023-02-09 15.39.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/32bfeb31-6c02-5676-1fd3-5813928e1e1f.png)
1. ユーザ名とディスクサイズを決めてインストールします
    ユーザ名は何でも良いです（日本語はNG）
    ディスクサイズは推奨だと10Gになってますが、学生が使う端末はもともとストレージの容量も小さいことが多いので、10Gも占有されると辛いし、今回はM5Burnerが動けばいいので最小の2GBにします。足りなければあとから増やせるしね。
※2023.4.1：2Gだと足りなかったので最初から3G確保してください。（サイズ変更は後述してるのでそちらを参考に）
    最後に「インストール」ボタンをクリックする
    ![Screenshot 2023-02-09 15.49.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/44a855b4-fb17-c13b-1374-8620da985d62.png)

1. 終わるの待つ
    ![Screenshot 2023-02-09 15.52.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/1a1b51f4-5b80-3acd-16d1-46a307e39745.png)
1. ターミナルが起動したらひとまずインストール完了
    ただ、この跡確認しますが空き容量ほぼありません
    ![Screenshot 2023-02-09 16.11.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/ee1a9eea-ec68-a287-a6b7-4dbc732668c4.png)

1. 空き容量確認します
Home配下で使用可能な空き情報を見てみます。
    
    ```
    df -h /home    
    ```
    結果を見るとほぼ空きがありません。
    なので、容量を増やします。
    ![Screenshot 2023-02-09 17.04.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/7d29eda1-f18b-b00c-ed9f-63793e9c759c.png)

1. 設定のLinux環境をクリックします
    設定のデベロッパーのところから、Linux開発環境をクリックします。

    ![Screenshot 2023-02-09 17.06.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/5faf9f13-df6d-bdf7-1ad7-14da7c5086f9.png)
1. ディスクサイズの変更ボタンをクリックします
    ![Screenshot 2023-02-09 17.11.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/9dacb5d2-479b-4b4c-522e-41ea81ea4e2b.png)
1. 3GBにしてサイズへを変更する
    ![Screenshot 2023-02-09 17.16.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/2e4bda4b-e313-c382-a963-e56463d4be13.png)
1. 空き容量確認します
    ターミナルから再度Home配下で使用可能な空き情報を見てみます。
    
    ```
    df -h /home    
    ```
    使用可能なサイズが増えてることが確認できました。
    ![Screenshot 2023-02-09 17.19.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/a9f86f47-34dc-e302-ee27-13a3eb46e7b4.png)

# M5Burner使えるようにする
1. M5Burnerをダウンロードします  
    M5Stackのダウンロードサイトにある「M5Burner Linux x64 v3.0」をダウンロードします。
    ![Screenshot 2023-02-09 17.26.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/b0096b20-2b77-9c20-285f-b9d268bae610.png)
1. ダウンロードしたファイルをLinuxフォルダに移動させます
    ダウンロードしたファイルをコピーします。
    ![Screenshot 2023-02-09 17.33.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/f746946a-b366-92b7-8c2f-05480ac65367.png)
    左側のLinuxファイルをクリックして貼り付けます
    ![Screenshot 2023-02-09 17.35.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/79bb4a56-7aec-fa5e-9bf4-8c4fd25068aa.png)
1. ZIPファイルを解凍します
    ターミナルからこのコマンド実行します。
    Zipファイルの名前はこの記事を書いてる時点のファイル名（上のキャプチャのファイル名と同じ）前提で書いてますので、必要に応じてファイル名は書き換えてください。
    ※M5Burnerというフォルダに解凍するようにします。
    ```
    unzip -d M5Burner M5Burner-v3-beta-linux-x64.zip  
    ```
    
1. フォルダーを移動する
    lsコマンドを実行すると「M5Burner」というフォルダが確認できるので、cdコマンドでフォルダーを移動します。（Linuxなのでディレクトリって言ったがいいのかな？）
    ```
    cd M5Burner    
    ```
    下記のようになったらOKです。
    ![Screenshot 2023-02-10 11.56.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/740c0eae-2ba5-f25f-7771-0637ecf18128.png)
1. M5Burnerを実行します
    ターミナルから下記のコマンドを実行してアプリを起動してみます。
    ```
    ./M5Burner    
    ```
    残念ながらライブラリが足りないようでした。。。
    ![Screenshot 2023-02-10 12.04.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/e2c365d1-6bb5-c173-c7b6-8f9aecc51e67.png)

1. 足りないライブラリを追加します
    ターミナルから下記のコマンドを実行してライブラリをインストールします。
    ```
    sudo apt-get install -y libnss3    
    ```
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/37f0f356-181f-1bbc-3fef-235cda5dc779.png)
    
    余談ですが、最初sudoつけ忘れて下記のようなメッセージが出ました。
    ![Screenshot 2023-02-10 12.11.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/d0104974-43eb-0d11-ce94-62b7207af5c9.png)
    もし、本当にロックが原因の場合は以下を実行してみてください。
    ```
    sudo rm /var/lib/apt/lists/lock
    sudo rm /var/lib/dpkg/lock
    sudo rm /var/lib/dpkg/lock-frontend
    sudo apt autoremove
    ```
    これで再度ライブラリをインストール
1. 再度M5Burnerを実行してみる
    ターミナルから下記のコマンドを実行してアプリを起動してみます。
    ```
    ./M5Burner    
    ```
    無事起動はできました。起動できたら一度M5Burnerアプリを終了してください。
    ![Screenshot 2023-02-10 12.22.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/b6d42763-1d88-d283-64fd-a61071eee82a.png)

# M5BurnerでM5Stackのファームウェアを書き換える
1. M5StackをChromebookに接続します
    まずは、M5StackをChromebookのPCに接続してください。
    接続直後USBデバイスが検出されますので、Linuxに接続してください。
    ![Screenshot 2023-02-10 12.54.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/209b0c0e-cc18-b01f-4147-8c44106efd49.png)
 
    クリックする前に通知が消えた場合は以下のやり方でも同じことができます。
    1. システムトレイから設定をクリックします
        ![Screenshot 2023-02-09 15.33.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/c4d181f7-b0d5-a9a9-332d-55fd611b4583.png)
    1. 設定の画面で「デベロッパー」をクリックします
        ![Screenshot 2023-02-09 15.36.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/5e993df3-d369-e658-9dbb-551954236a33.png)
    1. Linux開発環境をクリックします
        ![Screenshot 2023-02-10 13.51.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/7620f8e7-ab56-0f6a-7dea-8d67ba4b227e.png)
    1. USBデバイス管理をクリックします
        ![Screenshot 2023-02-10 14.01.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/66ff2da1-b489-6e8b-535b-278be0d8cd5e.png)
    1. USB Single SerialをONにします
        ![Screenshot 2023-02-10 14.02.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/5cf32023-f95f-5e3b-7e2e-fa7e89237179.png)

1. M5Burnerを起動します
    ターミナルから以下のコマンドを実行しM5Burnerを起動します
        ターミナルから下記のコマンドを実行してアプリを起動してみます。
    ```
    ./M5Burner    
    ```
1. UIFlowのファームウェアをダウンロードする
    まずはUIFlow(Core)のダウンロードを行います（初回だけです。ダウンロード済みの場合は次に進んでください）
    バージョンはひとまず最新でよいです（デフォルト表示されているもので良いです）。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/f732c09b-7423-9f2d-0c13-f8ec1a463d4c.png)
1. ファームウェアを書き込む
    Burnボタンをクリックしてファームウェアを書き込みを開始します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/dd9d200f-e50f-2799-560b-21c273e1b4ed.png)

1. M5Stackが接続するWi-Fiの接続情報を入力する
    ファームウェアを書き込む際、M5Stackが接続するWi-Fiの接続先のSSIDとパスワードを入力してください。
    この時、自宅で使う場合は自宅のもので良いですが、職場や学校で使う場合はその場所で使うネットワークを指定してください。
    入力後、「Next」ボタンをクリックしてください
    ※接続先は2.4G帯にしてください
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/f8492a20-c63e-ce4a-e8ce-226f4d60a8de.png)
1. Startボタンをクリック
    ポートを選択し「Start」ボタンをクリックします。Rateは変更なしです。
    ![Screenshot 2023-02-10 14.13.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/c7729bac-25f5-f83c-9a5a-999788dfdec5.png)


1. 書き込みが終わるまで待つ
    もしエラーが発生する場合はエラー内容を読んで解消してください。（よくあるのがCOMポートの選択ミスです）
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/9c3ea7a6-9b56-3385-79f2-7b879ac9baeb.png)

1. 書き込み完了
    「Burn successfully, Click here to return」ボタンをクリックして、最初の画面に戻ります。
    M5Stackの画面には何か表示されてるかもしれませんが、今は無視してよいです。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/02d3deea-a730-08b7-86a0-48acb8404d46.png)
1. 設定画面を表示する
    「Configurate」ボタンをクリックします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/917746c9-b0c7-f8db-44e0-f22cae947508.png)
    ポート選択の画面が出ますが、そのまま「Load」ボタンをクリックします。
    ![Screenshot 2023-02-10 14.15.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/08210b4b-4882-2fb4-fe5a-7a04e0db13c4.png)

1. StartModeを確認する
    Start Modeが「Internet Mode」になってることを確認してください。
    また、WIFI SSIDとパスワードが先ほど入力した内容と一致してるか確認してください。ファームウェア書き換えるときに指定した値になっていなかった（私の環境だけかもしれませんが）ので、もし指定した情報と違っていたらここで修正してください。
    修正した場合は「SAVE」ボタンをクリックして保存します。
    ![Screenshot 2023-02-10 14.18.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/33550200-7700-cf1f-4f98-41942a7b2903.png)

    
    
1. M5StackをPCから切り離し、再起動する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/f2fa4ff4-26be-7d33-cbe9-8a3638d54752.png)
    これでファームウェアの書き換え完了です。
    あとはUIFlowから開発していきます。