.. _00_pre:

事前準備
========================

M5StickC Plus <https://www.switch-science.com/catalog/6470> に、プログラムを書き込むためには、
開発環境（Arduino IDE）のインストールと、設定が必要になります。

.. note::  M5StickC Plusは、2017年に発売されたM5StickC の後継版です。ディスプレイサイズと解像度、バッテリ容量が向上しています。また、ブザーも追加されているため、簡単な音を本体のみで鳴らすことができます。

.. note::  UIFlowという、Webベースのブロックプログラミング環境もありますが、本実験では柔軟性と拡張性を重視し、Arduinoを使用します。ArduinoではC言語でプログラムを記述します。

開発環境（Arduino IDE）のインストール
-------------------------------------------

Arduino IDEは、Arduinoというマイコンボード用に開発され、長年使われている開発環境です。IDEとは、Integrated Development Environment の略で、日本語では統合開発環境と呼びます。有名なIDEには、Microsoft Visual Studio [#vs]_ や Eclipse [#eclipse]_ があります。

.. [#vs] おもにWindows向けの開発環境です。ちなみに、Visual Studio Code は、最近利用者が増加しているコードエディタです。
.. [#eclipse] おもにJava向けの開発環境です。「イクリプス」と発音します。

.. note::  `初心者向けM5Stackの始め方（ArduinoIDE編） <https://raspberrypi.mongonta.com/howto-start-m5stack-arduinoide>`_ も参考になります。**ただし、M5Stackではなく、M5StickC/CPlus特有の注意点があります。**

.. _ideinstwin:

Windowsの場合
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. Microsoft Store で、`Arduino IDE <https://www.microsoft.com/ja-jp/p/arduino-ide/9nblggh4rsd8#activetab=pivot:overviewtab>`_ を検索してインストールする。
#. M5StickCPlusをUSB接続するために、`FTDI Virtual COM Port (VCP) Driver Setup File <https://www.ftdichip.com/Drivers/CDM/CDM21228_Setup.zip>`_ をダウンロードしてインストールする。ちなみに、他のOS用のドライバやバージョンはこちら：<https://www.ftdichip.com/Drivers/VCP.htm> 

MacOS、Linuxの場合
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. Arduino IDEのダウンロードサイト <https://www.arduino.cc/en/Main/Software> から、自分のOSに適合したファイルをダウンロードする。
#. インストールする。

Arduino IDEと、USB接続用のドライバ（Windowsのみ）をインストールしたら、次のステップ（Arduino IDEの設定）にすすみます。次のステップでは、Arduino IDEで、ESP32用のプログラムをコンパイルしたり、M5StickCPlusのサンプルプログラムを利用したりするために、ボードとライブラリをインストールします。



Arduino IDEの設定
---------------------------------------

追加のボードマネージャーのURLを設定する
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


1. Arduino IDEを起動する。
#. 「ファイル」→「環境設定」→「追加のボードマネージャーのURL」に、 ``https://dl.espressif.com/dl/package_esp32_index.json`` を設定する。以下のテキストエリアの右上の四角アイコンを押すと、URLをコピーできます。::

        https://dl.espressif.com/dl/package_esp32_index.json

esp32のボードを追加する
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

「ツール」→「ボード…」→「ボードマネージャ…」をひらき、右上のテキスト入力フィールドに、``esp32`` と入力して絞り込み、「インストール」を押す（:numref:`fig_board_manager_esp32` ）。

.. _fig_board_manager_esp32:

.. figure:: images/board_manager_esp32.png
   :scale: 60%
   :alt: ボードマネージャにて``esp32``で絞り込んでいる画面
   :name: f_board_manager_esp32

   ボードマネージャにて``esp32``で絞り込んでいる画面


M5StickCPlusライブラリをインストールする
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

「スケッチ」→「ライブラリをインクルード」→「ライブラリを管理…」で、ライブラリマネージャをひらく。

右上のテキスト入力フィールドに、``m5stickcplus`` と入力して絞り込み、M5StickCPlus の 「インストール」を押す（:numref:`fig_library_manager_m5stickcplus`）。

.. _fig_library_manager_m5stickcplus:

.. figure:: images/library_manager_m5stickcplus.png
   :scale: 60%
   :alt: ライブラリマネージャにて``m5stickcplus``で絞り込んでいる画面
   :name: f_library_manager_m5stickcplus

   ライブラリマネージャにて``m5stickcplus``で絞り込んでいる画面

M5StickCPlusライブラリの確認と、サンプルソースコードの表示
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

:numref:`fig_menu_file_sketchexample_m5stick_factory` に示すように、「ファイル」→「スケッチ例」→「互換性なし」→「M5StickCPlus」→「FactoryTest」をえらぶ。

.. _fig_menu_file_sketchexample_m5stick_factory:

.. figure:: images/menu_file_sketchexample_m5stick_factory.png
   :scale: 80%
   :alt: 「ファイル」→「スケッチ例」→「互換性なし」→「M5StickCPlus」→「FactoryTest」
   :name: f_menu_file_sketchexample_m5stick_factory

   「ファイル」→「スケッチ例」→「互換性なし」→「M5StickCPlus」→「FactoryTest」


ボードの選択
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

:numref:`fig_menu_tool_board_esp32_m5stickc` に示すように、「ツール」→「ボード: Arduino Uno」→「ESP32 Arduino」→「M5Stick-C」をえらぶ。

.. _fig_menu_tool_board_esp32_m5stickc:

.. figure:: images/menu_tool_board_esp32_m5stickc.png
   :scale: 80%
   :alt: 「ツール」→「ボード: Arduino Uno」→「ESP32 Arduino」→「M5Stick-C」
   :name: f_menu_tool_board_esp32_m5stickc

   「ツール」→「ボード: Arduino Uno」→「ESP32 Arduino」→「M5Stick-C」


ビルド
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

:numref:`fig_build_factorytest` に示すように、✔️表記された丸ボタン（一番左）をおして、ビルド（ソースコードのコンパイルとリンク）をする。

.. _fig_build_factorytest:

.. figure:: images/build_factorytest.png
   :scale: 80%
   :alt: ビルド
   :name: f_build_factorytest

   ビルド

.. note:: デフォルト（インストールしただけの初期状態）では、コンパイルに非常に時間がかかります。すこし手間はかかりますが、 `Arduino IDEのビルドを速くする｜オブジェクトファイルの出力先を固定する <https://hangstuck.com/arduino-buildpath-fix>`_ をやっておくと、ビルド時間が短縮できます。

.. warning::  **M5StickCPlus本体がない事前準備の段階で、できるのは、ここまでです。** 以降は、本体をUSB接続したあとで、行う作業になります。Windows環境でビルドできない場合は、いちどArduino IDEをすべて終了し、Arduino IDEを管理者権限で起動しなおしてください。管理者権限で起動するには、アイコンを右クリックして、メニューから選択します。


シリアルポートの選択
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

**本体をUSB接続したあと** で、 :numref:`fig_select_serialport` に示すように、「ツール」→「シリアルポート」で、書き込むデバイスが接続されているシリアルポートを選択する。Windowsの場合は、COM3のように、``COM + 数字`` で表記される。Macの場合は、``/dev/cu.usbserial-XXXXXXXXXX`` のように表記される。

.. _fig_select_serialport:

.. figure:: images/select_serialport.png
   :scale: 80%
   :alt: シリアルポートの選択
   :name: f_select_serialport

   シリアルポートの選択

.. note:: Windowsを使っていて、シリアルポートが表示されないときは、:ref:`ideinstwin` で指示した、FTDI Virtual COM Port Driver がインストールされているか、確認してみてください。本体を挿したときに、PCの「デバイスマネージャ」 （スタートメニューのdevice managerで検索）で、「ポート（COMとLPT）」に表示されていれば、ドライバはインストールされていますので、Arduino IDEを再起動してください。


.. _writetom5: 

プログラムの書き込み
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

「→」のアイコンボタンをおすと、プログラムの書き込みを開始します。

.. warning:: 書き込みに失敗するときは、環境設定で、「より詳細な情報を表示する」にチェックをいれてみてください。原因がすこしわかりやすくなります。

バージョン情報
--------------------------------------------------

- Arduino IDEのバージョン： 1.8.13 (Windows Store 1.8.42.0)
- ESP32 for Arduino のバージョン：1.0.5
- M5StickCPlus ライブラリのバージョン: 0.0.1 


