<!DOCTYPE html>
<html class="writer-html5" lang="ja" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事前準備 (2022年度：arduino-cli + VSCode) — 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" />
<link rel="stylesheet" href="_static/custom.css" type="text/css" />
<!--[if lt IE 9]>
<script src="_static/js/html5shiv.min.js"></script>
<![endif]-->
<script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
<script src="_static/jquery.js"></script>
<script src="_static/underscore.js"></script>
<script src="_static/doctools.js"></script>
<script src="_static/clipboard.min.js"></script>
<script src="_static/copybutton.js"></script>
<script src="_static/translations.js"></script>
<script src="_static/js/theme.js"></script>
<link rel="index" title="索引" href="genindex.html" />
<link rel="search" title="検索" href="search.html" />
<link rel="next" title="事前準備 (2021年度：Arduino IDE)" href="pre2.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="Navigation menu">
<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="#">事前準備 (2022年度：arduino-cli + VSCode)</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#arduino-cli">(1) arduino-cli のインストール</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#windows">Windows の場合</a></li>
<li class="toctree-l3"><a class="reference internal" href="#mac">Mac の場合</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="#id2">(2) arduino-cli でボード情報とライブラリのインストール</a></li>
<li class="toctree-l2"><a class="reference internal" href="#id3">(3) サンプルファイルのコンパイルと書き込み</a></li>
<li class="toctree-l2"><a class="reference internal" href="#visual-studio-code">(4) Visual Studio Code のインストール</a></li>
<li class="toctree-l2"><a class="reference internal" href="#arduino">(5) Arduino拡張機能の追加と設定</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="pre2.html">事前準備 (2021年度：Arduino IDE)</a></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>
<li class="toctree-l1"><a class="reference internal" href="appendix.html">付録</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" >
<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="Page navigation">
<ul class="wy-breadcrumbs">
<li><a href="index.html" class="icon icon-home"></a> »</li>
<li>事前準備 (2022年度：arduino-cli + VSCode)</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="arduino-cli-vscode">
<span id="pre"></span><h1>事前準備 (2022年度：arduino-cli + VSCode)<a class="headerlink" href="#arduino-cli-vscode" title="このヘッドラインへのパーマリンク"></a></h1>
<p><a class="reference external" href="https://www.switch-science.com/catalog/6470">M5StickC Plus</a> に、プログラムを書き込むには、
おもに以下の方法があります。</p>
<ol class="arabic simple">
<li><p>Arduino IDE</p></li>
<li><p>arduino-cli (Command-Line Interface)</p></li>
<li><p>PlatformIO</p></li>
</ol>
<p>2021年度は1. の方法を用いましたが、初期設定が若干面倒なのと、エディタの編集機能が弱いので、今年は arduino-cli を用いる方法を推奨します。
ただし、arduino-cli はビルドと書き込みのみで、ファイル編集ができませんので、別途エディタとして Visual Studio Code を導入します。
余力がある人は、Visual Studio Code に Arduino拡張機能を追加して設定すると、ボタン一つで書き込みできる（Arduino IDEに近い）操作感を得ることができます。</p>
<div class="admonition note">
<p class="admonition-title">注釈</p>
<p>M5StickC Plusは、2017年に発売されたM5StickC の後継版です。ディスプレイサイズと解像度、バッテリ容量が向上しています。また、ブザーも追加されているため、簡単な音を本体のみで鳴らすことができます。</p>
</div>
<div class="admonition note">
<p class="admonition-title">注釈</p>
<p>UIFlowという、Webベースのブロックプログラミング環境もありますが、本実験では柔軟性と拡張性を重視し、Arduino/arduino-cli を使用します。Arduino/arduino-cli ではC言語でプログラムを記述します。</p>
</div>
<p>以下、こまかいですが、</p>
<ol class="arabic simple">
<li><p>arduino-cli のインストール</p></li>
<li><p>arduino-cli でボード情報とライブラリのインストール</p></li>
<li><p>サンプルファイルのコンパイルと転送</p></li>
<li><p>Visual Studio Code のインストール</p></li>
<li><p>Arduino拡張機能の追加と設定</p></li>
</ol>
<p>の順に、説明します。</p>
<div class="section" id="arduino-cli">
<h2>(1) arduino-cli のインストール<a class="headerlink" href="#arduino-cli" title="このヘッドラインへのパーマリンク"></a></h2>
<p><a class="reference external" href="https://arduino.github.io/arduino-cli/0.21/installation">arduino-cli</a> をインストールします。</p>
<div class="section" id="windows">
<h3>Windows の場合<a class="headerlink" href="#windows" title="このヘッドラインへのパーマリンク"></a></h3>
<ol class="arabic">
<li><p><a class="reference external" href="https://gitforwindows.org">Git for Windows</a> をインストールしてください。Setup時にいろいろ訊かれますが、すべてそのまま「Next」を押して進めて大丈夫です。</p></li>
<li><p>Git Bash を起動して、ターミナルに以下のコマンドを入力してください（<a class="reference internal" href="#fig-cli-inst"><span class="std std-numref">図 1</span></a> ）。（この下の灰色のテキストエリアの右端の四角アイコンを押すと、コマンドをコピーできます。）</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">curl</span> <span class="o">-</span><span class="n">fsSL</span> <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">raw</span><span class="o">.</span><span class="n">githubusercontent</span><span class="o">.</span><span class="n">com</span><span class="o">/</span><span class="n">arduino</span><span class="o">/</span><span class="n">arduino</span><span class="o">-</span><span class="n">cli</span><span class="o">/</span><span class="n">master</span><span class="o">/</span><span class="n">install</span><span class="o">.</span><span class="n">sh</span> <span class="o">|</span> <span class="n">sh</span>
</pre></div>
</div>
</li>
</ol>
<div class="figure align-default" id="f-cli-inst">
<span id="fig-cli-inst"></span><a class="reference internal image-reference" href="_images/22_0323_144455.png"><img alt="arduino-cli のインストールコマンド実行後の画面（例）" src="_images/22_0323_144455.png" style="width: 670.5px; height: 403.2px;" /></a>
<p class="caption"><span class="caption-number">図 1 </span><span class="caption-text">arduino-cli のインストールコマンド実行後の画面（例）</span><a class="headerlink" href="#f-cli-inst" title="この画像へのパーマリンク"></a></p>
</div>
</div>
<div class="section" id="mac">
<h3>Mac の場合<a class="headerlink" href="#mac" title="このヘッドラインへのパーマリンク"></a></h3>
<ol class="arabic">
<li><p><a class="reference external" href="https://brew.sh/index_ja">Homebrew パッケージマネージャ</a> をまだ入れていない場合は、インストールしてください。ターミナルを開き、以下のコマンドを実行します。</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">/</span><span class="nb">bin</span><span class="o">/</span><span class="n">bash</span> <span class="o">-</span><span class="n">c</span> <span class="s2">"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"</span>
</pre></div>
</div>
</li>
<li><p>続けて、ターミナルで、以下のコマンドを実行してください。</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">brew</span> <span class="n">update</span>
<span class="n">brew</span> <span class="n">install</span> <span class="n">git</span> <span class="n">arduino</span><span class="o">-</span><span class="n">cli</span>
</pre></div>
</div>
</li>
</ol>
</div>
</div>
<div class="section" id="id2">
<h2>(2) arduino-cli でボード情報とライブラリのインストール<a class="headerlink" href="#id2" title="このヘッドラインへのパーマリンク"></a></h2>
</div>
<div class="section" id="id3">
<h2>(3) サンプルファイルのコンパイルと書き込み<a class="headerlink" href="#id3" title="このヘッドラインへのパーマリンク"></a></h2>
<ol class="arabic">
<li><p>ここで (2) と (3) を行う準備として、サンプルファイルと設定ファイルを <a class="reference external" href="https://git.istlab.info/miura250/M5StickCPlus_FactoryTest2022">三浦の Git リポジトリ</a> からダウンロードします。ターミナル (or Git Bash) で以下のコマンドを実行してください。</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">git</span> <span class="n">clone</span> <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">git</span><span class="o">.</span><span class="n">istlab</span><span class="o">.</span><span class="n">info</span><span class="o">/</span><span class="n">git</span><span class="o">/</span><span class="n">miura250</span><span class="o">/</span><span class="n">M5StickCPlus_FactoryTest2022</span><span class="o">.</span><span class="n">git</span>
<span class="n">cd</span> <span class="n">M5StickCPlus_FactoryTest2022</span>
<span class="n">ls</span> <span class="o">-</span><span class="n">al</span>
</pre></div>
</div>
</li>
</ol>
<p>（cd のあとのフォルダ名が長いので、途中でTabキーを押して補完することをおすすめします。）
<code class="docutils literal notranslate"><span class="pre">ls</span> <span class="pre">-al</span></code> の結果は、<a class="reference internal" href="#fig-factory2022"><span class="std std-numref">図 2</span></a> のようになります。</p>
<div class="figure align-default" id="f-factory2022">
<span id="fig-factory2022"></span><a class="reference internal image-reference" href="_images/22_0323_151537.png"><img alt="サンプルファイルの中身を確認" src="_images/22_0323_151537.png" style="width: 670.5px; height: 388.8px;" /></a>
<p class="caption"><span class="caption-number">図 2 </span><span class="caption-text">サンプルファイルの中身を確認</span><a class="headerlink" href="#f-factory2022" title="この画像へのパーマリンク"></a></p>
</div>
<ol class="arabic" start="2">
<li><p>以下のコマンドを入力すると、(2) arduino-cli でM5StickCPlusの開発をするための準備として、「ボード情報とライブラリのインストール」 を行います。</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">./</span><span class="n">setup</span><span class="o">.</span><span class="n">sh</span>
</pre></div>
</div>
</li>
</ol>
<div class="admonition note">
<p class="admonition-title">注釈</p>
<p>setup.sh は事前準備のときの 1回だけ実行すればOKです。その後、ライブラリが必要となり、追加でダウンロードするときは、arduino-cli lib install XXXX コマンドを実行してください。</p>
</div>
<ol class="arabic" start="3">
<li><p>以下のコマンドを入力すると、(3) のサンプルファイル（FactoryTest2022）の「コンパイル」 を行います（<a class="reference internal" href="#fig-compileupload"><span class="std std-numref">図 3</span></a>）。</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">./</span><span class="nb">compile</span><span class="o">.</span><span class="n">sh</span>
</pre></div>
</div>
</li>
</ol>
<div class="admonition warning">
<p class="admonition-title">警告</p>
<p><strong>M5StickCPlus本体がない事前準備の段階で、できるのは、ここまでです。</strong> 以下の「書き込み」は、本体をUSB接続したあとで、行う作業になります。<strong>次のステップとして、(4)のVisual Studio Code のインストール に進んでください。</strong></p>
</div>
<ol class="arabic" start="4">
<li><p>以下のコマンドを入力すると、(3) の「書き込み」 を行います（<a class="reference internal" href="#fig-compileupload"><span class="std std-numref">図 3</span></a>）。 <strong>ただし「書き込み」は、M5StickCPlus本体をUSB接続していないと失敗します。</strong></p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">./</span><span class="n">upload</span><span class="o">.</span><span class="n">sh</span>
</pre></div>
</div>
</li>
</ol>
<div class="admonition note">
<p class="admonition-title">注釈</p>
<p>今後、ソースコード(ここでは、FactoryTest2022.ino)を編集していくと、「コンパイル」と「書き込み」 を頻繁に実行することになります。その場合、以下のように && でつなげて1回のコマンド入力でも実行できます。</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">./</span><span class="nb">compile</span><span class="o">.</span><span class="n">sh</span> <span class="o">&&</span> <span class="o">./</span><span class="n">upload</span><span class="o">.</span><span class="n">sh</span>
</pre></div>
</div>
</div>
<div class="figure align-default" id="f-compileupload">
<span id="fig-compileupload"></span><a class="reference internal image-reference" href="_images/22_0323_154834.png"><img alt="コンパイルと書き込み(upload)を行っている様子" src="_images/22_0323_154834.png" style="width: 732.8000000000001px; height: 480.8px;" /></a>
<p class="caption"><span class="caption-number">図 3 </span><span class="caption-text">コンパイルと書き込み(upload)を行っている様子</span><a class="headerlink" href="#f-compileupload" title="この画像へのパーマリンク"></a></p>
</div>
</div>
<div class="section" id="visual-studio-code">
<h2>(4) Visual Studio Code のインストール<a class="headerlink" href="#visual-studio-code" title="このヘッドラインへのパーマリンク"></a></h2>
<p>Windows の場合は、Microsoft Store で、Visual Studio Code のインストールができます。Mac の場合は、<a class="reference external" href="https://code.visualstudio.com/download">インストーラー</a> でダウンロードしてください。</p>
</div>
<div class="section" id="arduino">
<h2>(5) Arduino拡張機能の追加と設定<a class="headerlink" href="#arduino" title="このヘッドラインへのパーマリンク"></a></h2>
<p>必須ではないですが、できれば次のページを参考に、 <a class="reference external" href="https://ss.istlab.info/presens/dview/361/1cd086be8751d458a35b9ccec79a6b20#">Arduino拡張機能の追加と設定</a> をしておくとよいでしょう。</p>
<p>この設定をしておくと、ソースコード編集→保存→右上のボタン で、書き込みができます。</p>
<div class="admonition note">
<p class="admonition-title">注釈</p>
<p>この設定をしない場合でも、(3) のコマンドライン（またはシェルスクリプト）を修正・実行すれば、書き込みができます。</p>
</div>
</div>
</div>
</div>
</div>
<footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
<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>
<a href="pre2.html" class="btn btn-neutral float-right" title="事前準備 (2021年度：Arduino IDE)" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
</div>
<hr/>
<div role="contentinfo">
<p>© Copyright 2021-2022, 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>
jQuery(function () {
SphinxRtdTheme.Navigation.enable(true);
});
</script>
</body>
</html>
