<!DOCTYPE html>
<html class="writer-html4" lang="ja" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事前準備 — IoT Programming ドキュメント</title>
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="_static/copybutton.css" type="text/css" />
<!--[if lt IE 9]>
<script src="_static/js/html5shiv.min.js"></script>
<![endif]-->
<script type="text/javascript" id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<script type="text/javascript" src="_static/language_data.js"></script>
<script type="text/javascript" src="_static/clipboard.min.js"></script>
<script type="text/javascript" src="_static/copybutton.js"></script>
<script type="text/javascript" src="_static/translations.js"></script>
<script type="text/javascript" src="_static/js/theme.js"></script>
<link rel="index" title="索引" href="genindex.html" />
<link rel="search" title="検索" href="search.html" />
<link rel="next" title="1週目" href="week1.html" />
<link rel="prev" title="実験の目的" href="intro.html" />
</head>
<body class="wy-body-for-nav">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search" >
<a href="index.html" class="icon icon-home"> IoT Programming
</a>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<p class="caption"><span class="caption-text">Contents:</span></p>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="intro.html">実験の目的</a></li>
<li class="toctree-l1"><a class="reference internal" href="intro.html#id2">実験のすすめかた</a></li>
<li class="toctree-l1"><a class="reference internal" href="intro.html#url">参考URL</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">事前準備</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#arduino-ide">開発環境（Arduino IDE）のインストール</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#windows">Windowsの場合</a></li>
<li class="toctree-l3"><a class="reference internal" href="#macoslinux">MacOS、Linuxの場合</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="#id5">Arduino IDEの設定</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#url">追加のボードマネージャーのURLを設定する</a></li>
<li class="toctree-l3"><a class="reference internal" href="#esp32">esp32のボードを追加する</a></li>
<li class="toctree-l3"><a class="reference internal" href="#m5stickcplus">M5StickCPlusライブラリをインストールする</a></li>
<li class="toctree-l3"><a class="reference internal" href="#id6">M5StickCPlusライブラリの確認と、サンプルソースコードの表示</a></li>
<li class="toctree-l3"><a class="reference internal" href="#id7">ボードの選択</a></li>
<li class="toctree-l3"><a class="reference internal" href="#id8">ビルド</a></li>
<li class="toctree-l3"><a class="reference internal" href="#id9">シリアルポートの選択</a></li>
<li class="toctree-l3"><a class="reference internal" href="#writetom5">プログラムの書き込み</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="#id11">バージョン情報</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="week1.html">1週目</a></li>
<li class="toctree-l1"><a class="reference internal" href="week2.html">2週目</a></li>
<li class="toctree-l1"><a class="reference internal" href="faq.html">Frequently-Asked Questions （FAQ: よくある質問）</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="index.html">IoT Programming</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="index.html" class="icon icon-home"></a> »</li>
<li>事前準備</li>
<li class="wy-breadcrumbs-aside">
<a href="_sources/pre.rst.txt" rel="nofollow"> View page source</a>
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<div class="section" id="pre">
<span id="id1"></span><h1>事前準備<a class="headerlink" href="#pre" title="このヘッドラインへのパーマリンク">¶</a></h1>
<p>M5StickC Plus <<a class="reference external" href="https://www.switch-science.com/catalog/6470">https://www.switch-science.com/catalog/6470</a>> に、プログラムを書き込むためには、
開発環境（Arduino IDE）のインストールと、設定が必要になります。</p>
<div class="admonition note">
<p class="first admonition-title">注釈</p>
<p class="last">M5StickC Plusは、2017年に発売されたM5StickC の後継版です。ディスプレイサイズと解像度、バッテリ容量が向上しています。また、ブザーも追加されているため、簡単な音を本体のみで鳴らすことができます。</p>
</div>
<div class="admonition note">
<p class="first admonition-title">注釈</p>
<p class="last">UIFlowという、Webベースのブロックプログラミング環境もありますが、本実験では柔軟性と拡張性を重視し、Arduinoを使用します。ArduinoではC言語でプログラムを記述します。</p>
</div>
<div class="section" id="arduino-ide">
<h2>開発環境（Arduino IDE）のインストール<a class="headerlink" href="#arduino-ide" title="このヘッドラインへのパーマリンク">¶</a></h2>
<p>Arduino IDEは、Arduinoというマイコンボード用に開発され、長年使われている開発環境です。IDEとは、Integrated Development Environment の略で、日本語では統合開発環境と呼びます。有名なIDEには、Microsoft Visual Studio <a class="footnote-reference" href="#vs" id="id2">[1]</a> や Eclipse <a class="footnote-reference" href="#eclipse" id="id3">[2]</a> があります。</p>
<table class="docutils footnote" frame="void" id="vs" rules="none">
<colgroup><col class="label" /><col /></colgroup>
<tbody valign="top">
<tr><td class="label"><a class="fn-backref" href="#id2">[1]</a></td><td>おもにWindows向けの開発環境です。ちなみに、Visual Studio Code は、最近利用者が増加しているコードエディタです。</td></tr>
</tbody>
</table>
<table class="docutils footnote" frame="void" id="eclipse" rules="none">
<colgroup><col class="label" /><col /></colgroup>
<tbody valign="top">
<tr><td class="label"><a class="fn-backref" href="#id3">[2]</a></td><td>おもにJava向けの開発環境です。「イクリプス」と発音します。</td></tr>
</tbody>
</table>
<div class="admonition note">
<p class="first admonition-title">注釈</p>
<p class="last"><a class="reference external" href="https://raspberrypi.mongonta.com/howto-start-m5stack-arduinoide">初心者向けM5Stackの始め方（ArduinoIDE編）</a> も参考になります。<strong>ただし、M5Stackではなく、M5StickC/CPlus特有の注意点があります。</strong></p>
</div>
<div class="section" id="windows">
<span id="ideinstwin"></span><h3>Windowsの場合<a class="headerlink" href="#windows" title="このヘッドラインへのパーマリンク">¶</a></h3>
<ol class="arabic simple">
<li>Microsoft Store で、<a class="reference external" href="https://www.microsoft.com/ja-jp/p/arduino-ide/9nblggh4rsd8#activetab=pivot:overviewtab">Arduino IDE</a> を検索してインストールする。</li>
<li>M5StickCPlusをUSB接続するために、<a class="reference external" href="https://www.ftdichip.com/Drivers/CDM/CDM21228_Setup.zip">FTDI Virtual COM Port (VCP) Driver Setup File</a> をダウンロードしてインストールする。ちなみに、他のOS用のドライバやバージョンはこちら：<<a class="reference external" href="https://www.ftdichip.com/Drivers/VCP.htm">https://www.ftdichip.com/Drivers/VCP.htm</a>></li>
</ol>
</div>
<div class="section" id="macoslinux">
<h3>MacOS、Linuxの場合<a class="headerlink" href="#macoslinux" title="このヘッドラインへのパーマリンク">¶</a></h3>
<ol class="arabic simple">
<li>Arduino IDEのダウンロードサイト <<a class="reference external" href="https://www.arduino.cc/en/Main/Software">https://www.arduino.cc/en/Main/Software</a>> から、自分のOSに適合したファイルをダウンロードする。</li>
<li>インストールする。</li>
</ol>
<p>Arduino IDEと、USB接続用のドライバ（Windowsのみ）をインストールしたら、次のステップ（Arduino IDEの設定）にすすみます。次のステップでは、Arduino IDEで、ESP32用のプログラムをコンパイルしたり、M5StickCPlusのサンプルプログラムを利用したりするために、ボードとライブラリをインストールします。</p>
</div>
</div>
<div class="section" id="id5">
<h2>Arduino IDEの設定<a class="headerlink" href="#id5" title="このヘッドラインへのパーマリンク">¶</a></h2>
<div class="section" id="url">
<h3>追加のボードマネージャーのURLを設定する<a class="headerlink" href="#url" title="このヘッドラインへのパーマリンク">¶</a></h3>
<ol class="arabic">
<li><p class="first">Arduino IDEを起動する。</p>
</li>
<li><p class="first">「ファイル」→「環境設定」→「追加のボードマネージャーのURL」に、 <code class="docutils literal notranslate"><span class="pre">https://dl.espressif.com/dl/package_esp32_index.json</span></code> を設定する。以下のテキストエリアの右上の四角アイコンを押すと、URLをコピーできます。:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">dl</span><span class="o">.</span><span class="n">espressif</span><span class="o">.</span><span class="n">com</span><span class="o">/</span><span class="n">dl</span><span class="o">/</span><span class="n">package_esp32_index</span><span class="o">.</span><span class="n">json</span>
</pre></div>
</div>
</li>
</ol>
</div>
<div class="section" id="esp32">
<h3>esp32のボードを追加する<a class="headerlink" href="#esp32" title="このヘッドラインへのパーマリンク">¶</a></h3>
<p>「ツール」→「ボード…」→「ボードマネージャ…」をひらき、右上のテキスト入力フィールドに、<code class="docutils literal notranslate"><span class="pre">esp32</span></code> と入力して絞り込み、「インストール」を押す（<a class="reference internal" href="#fig-board-manager-esp32"><span class="std std-numref">図 1</span></a> ）。</p>
<div class="figure" id="f-board-manager-esp32">
<span id="fig-board-manager-esp32"></span><a class="reference internal image-reference" href="_images/board_manager_esp32.png"><img alt="ボードマネージャにて``esp32``で絞り込んでいる画面" src="_images/board_manager_esp32.png" style="width: 590.4px; height: 332.4px;" /></a>
<p class="caption"><span class="caption-number">図 1 </span><span class="caption-text">ボードマネージャにて``esp32``で絞り込んでいる画面</span></p>
</div>
</div>
<div class="section" id="m5stickcplus">
<h3>M5StickCPlusライブラリをインストールする<a class="headerlink" href="#m5stickcplus" title="このヘッドラインへのパーマリンク">¶</a></h3>
<p>「スケッチ」→「ライブラリをインクルード」→「ライブラリを管理…」で、ライブラリマネージャをひらく。</p>
<p>右上のテキスト入力フィールドに、<code class="docutils literal notranslate"><span class="pre">m5stickcplus</span></code> と入力して絞り込み、M5StickCPlus の 「インストール」を押す（<a class="reference internal" href="#fig-library-manager-m5stickcplus"><span class="std std-numref">図 2</span></a>）。</p>
<div class="figure" id="f-library-manager-m5stickcplus">
<span id="fig-library-manager-m5stickcplus"></span><a class="reference internal image-reference" href="_images/library_manager_m5stickcplus.png"><img alt="ライブラリマネージャにて``m5stickcplus``で絞り込んでいる画面" src="_images/library_manager_m5stickcplus.png" style="width: 590.4px; height: 332.4px;" /></a>
<p class="caption"><span class="caption-number">図 2 </span><span class="caption-text">ライブラリマネージャにて``m5stickcplus``で絞り込んでいる画面</span></p>
</div>
</div>
<div class="section" id="id6">
<h3>M5StickCPlusライブラリの確認と、サンプルソースコードの表示<a class="headerlink" href="#id6" title="このヘッドラインへのパーマリンク">¶</a></h3>
<p><a class="reference internal" href="#fig-menu-file-sketchexample-m5stick-factory"><span class="std std-numref">図 3</span></a> に示すように、「ファイル」→「スケッチ例」→「互換性なし」→「M5StickCPlus」→「FactoryTest」をえらぶ。</p>
<div class="figure" id="f-menu-file-sketchexample-m5stick-factory">
<span id="fig-menu-file-sketchexample-m5stick-factory"></span><a class="reference internal image-reference" href="_images/menu_file_sketchexample_m5stick_factory.png"><img alt="「ファイル」→「スケッチ例」→「互換性なし」→「M5StickCPlus」→「FactoryTest」" src="_images/menu_file_sketchexample_m5stick_factory.png" style="width: 623.2px; height: 765.6px;" /></a>
<p class="caption"><span class="caption-number">図 3 </span><span class="caption-text">「ファイル」→「スケッチ例」→「互換性なし」→「M5StickCPlus」→「FactoryTest」</span></p>
</div>
</div>
<div class="section" id="id7">
<h3>ボードの選択<a class="headerlink" href="#id7" title="このヘッドラインへのパーマリンク">¶</a></h3>
<p><a class="reference internal" href="#fig-menu-tool-board-esp32-m5stickc"><span class="std std-numref">図 4</span></a> に示すように、「ツール」→「ボード: Arduino Uno」→「ESP32 Arduino」→「M5Stick-C」をえらぶ。</p>
<div class="figure" id="f-menu-tool-board-esp32-m5stickc">
<span id="fig-menu-tool-board-esp32-m5stickc"></span><a class="reference internal image-reference" href="_images/menu_tool_board_esp32_m5stickc.png"><img alt="「ツール」→「ボード: Arduino Uno」→「ESP32 Arduino」→「M5Stick-C」" src="_images/menu_tool_board_esp32_m5stickc.png" style="width: 796.8000000000001px; height: 490.40000000000003px;" /></a>
<p class="caption"><span class="caption-number">図 4 </span><span class="caption-text">「ツール」→「ボード: Arduino Uno」→「ESP32 Arduino」→「M5Stick-C」</span></p>
</div>
</div>
<div class="section" id="id8">
<h3>ビルド<a class="headerlink" href="#id8" title="このヘッドラインへのパーマリンク">¶</a></h3>
<p><a class="reference internal" href="#fig-build-factorytest"><span class="std std-numref">図 5</span></a> に示すように、✔️表記された丸ボタン（一番左）をおして、ビルド（ソースコードのコンパイルとリンク）をする。</p>
<div class="figure" id="f-build-factorytest">
<span id="fig-build-factorytest"></span><a class="reference internal image-reference" href="_images/build_factorytest.png"><img alt="ビルド" src="_images/build_factorytest.png" style="width: 416.8px; height: 491.20000000000005px;" /></a>
<p class="caption"><span class="caption-number">図 5 </span><span class="caption-text">ビルド</span></p>
</div>
<div class="admonition warning">
<p class="first admonition-title">警告</p>
<p class="last"><strong>M5StickCPlus本体がない事前準備の段階で、できるのは、ここまでです。</strong> 以降は、本体をUSB接続したあとで、行う作業になります。</p>
</div>
</div>
<div class="section" id="id9">
<h3>シリアルポートの選択<a class="headerlink" href="#id9" title="このヘッドラインへのパーマリンク">¶</a></h3>
<p><strong>本体をUSB接続したあと</strong> で、 <a class="reference internal" href="#fig-select-serialport"><span class="std std-numref">図 6</span></a> に示すように、「ツール」→「シリアルポート」で、書き込むデバイスが接続されているシリアルポートを選択する。Windowsの場合は、COM3のように、<code class="docutils literal notranslate"><span class="pre">COM</span> <span class="pre">+</span> <span class="pre">数字</span></code> で表記される。Macの場合は、<code class="docutils literal notranslate"><span class="pre">/dev/cu.usbserial-XXXXXXXXXX</span></code> のように表記される。</p>
<div class="figure" id="f-select-serialport">
<span id="fig-select-serialport"></span><a class="reference internal image-reference" href="_images/select_serialport.png"><img alt="シリアルポートの選択" src="_images/select_serialport.png" style="width: 538.4px; height: 381.6px;" /></a>
<p class="caption"><span class="caption-number">図 6 </span><span class="caption-text">シリアルポートの選択</span></p>
</div>
<div class="admonition note">
<p class="first admonition-title">注釈</p>
<p class="last">Windowsを使っていて、シリアルポートが表示されないときは、<a class="reference internal" href="#ideinstwin"><span class="std std-ref">Windowsの場合</span></a> で指示した、FTDI Virtual COM Port Driver がインストールされているか、確認してみてください。本体を挿したときに、PCの「デバイスマネージャ」 （スタートメニューのdevice managerで検索）で、「ポート（COMとLPT）」に表示されていれば、ドライバはインストールされていますので、Arduino IDEを再起動してください。</p>
</div>
</div>
<div class="section" id="writetom5">
<span id="id10"></span><h3>プログラムの書き込み<a class="headerlink" href="#writetom5" title="このヘッドラインへのパーマリンク">¶</a></h3>
<p>「→」のアイコンボタンをおすと、プログラムの書き込みを開始します。</p>
<div class="admonition warning">
<p class="first admonition-title">警告</p>
<p class="last">書き込みに失敗するときは、環境設定で、「より詳細な情報を表示する」にチェックをいれてみてください。原因がすこしわかりやすくなります。</p>
</div>
</div>
</div>
<div class="section" id="id11">
<h2>バージョン情報<a class="headerlink" href="#id11" title="このヘッドラインへのパーマリンク">¶</a></h2>
<ul class="simple">
<li>Arduino IDEのバージョン： 1.8.13 (Windows Store 1.8.42.0)</li>
<li>ESP32 for Arduino のバージョン：1.0.5</li>
<li>M5StickCPlus ライブラリのバージョン: 0.0.1</li>
</ul>
</div>
</div>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="week1.html" class="btn btn-neutral float-right" title="1週目" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
<a href="intro.html" class="btn btn-neutral float-left" title="実験の目的" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
</div>
<hr/>
<div role="contentinfo">
<p>
© Copyright 2021, Motoki Miura.
</p>
</div>
Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
<a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<script type="text/javascript">
jQuery(function () {
SphinxRtdTheme.Navigation.enable(true);
});
</script>
</body>
</html>
