<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ESP32 | 即戦力モノづくり!エンジニアへの道標</title>
	<atom:link href="https://depfields.com/tag/esp32/feed/" rel="self" type="application/rss+xml" />
	<link>https://depfields.com</link>
	<description>組み込み（マイコン）スキルを楽しんで学びながら身につけて短期間で効率よく自由自在に扱えるようになりたいと思いませんか？</description>
	<lastBuildDate>Tue, 19 Apr 2022 03:53:22 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.3</generator>

<image>
	<url>https://depfields.com/wp-content/uploads/2020/07/cropped-favicon-1-32x32.png</url>
	<title>ESP32 | 即戦力モノづくり!エンジニアへの道標</title>
	<link>https://depfields.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>ESP32でWiFi化したSTM32にブラウザから操作する</title>
		<link>https://depfields.com/esp32-http-rx-apl/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=esp32-http-rx-apl</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Mon, 21 Sep 2020 16:14:40 +0000</pubDate>
				<category><![CDATA[IoTアプリ]]></category>
		<category><![CDATA[ESP32]]></category>
		<category><![CDATA[WiFi]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[httpプロトコル]]></category>
		<category><![CDATA[ブラウザ]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=6080</guid>

					<description><![CDATA[<p>無線モジュールESP32を使って Nucleo(STM32) を無線 (WiFi) 化し、WEBサーバーを構成します。 クライアント側 であるPCやスマホのウェブブラウザからマイコン側に文字列のコマンドコードを送ってリモ [&#8230;]</p>
<p>The post <a href="https://depfields.com/esp32-http-rx-apl/">ESP32でWiFi化したSTM32にブラウザから操作する</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img fetchpriority="high" width="640" height="427" src="https://depfields.com/wp-content/uploads/2020/09/1452188_s.jpg" class="attachment-large size-large wp-post-image" alt="" decoding="async" srcset="https://depfields.com/wp-content/uploads/2020/09/1452188_s.jpg 640w, https://depfields.com/wp-content/uploads/2020/09/1452188_s-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /></div>
<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">  <strong>無線モジュールESP32</strong>を使って <strong>Nucleo(STM32) を無線 (WiFi) </strong>化し、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WEBサーバー</span></strong>を構成します<strong>。</strong> クライアント側 であるPCやスマホのウェブブラウザからマイコン側に文字列の<strong>コマンドコード</strong>を送って<strong>リモート操作するアプリ</strong>を紹介します。ESP32とブラウザの設定および送受信については「<strong><a href="https://depfields.com/esp32-webserver/" target="_blank" aria-label=" (opens in a new tab)" rel="noreferrer noopener">ESP32でWiFi化したNucleo(STM32)をブラウザでリモート操作</a></strong>」で詳細を解説しています。 </p>







<h2 class="wp-block-heading">WEBサーバーを構成する上での注意点</h2>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>  プログラム構成の基本的なところは「<strong><a href="https://depfields.com/esp32-tcp-rx-apl/" target="_blank" aria-label=" (opens in a new tab)" rel="noreferrer noopener">ESP32を使ったSTM32のTCP通信(WiFi)受信編</a></strong>」 と似ていますが、ESP32をHTTPプロトコルで受信する場合に特有なクセに注意する必要があります。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>通信条件がTCPからHTTPに変更になったことに応じて<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">プログラムの基本構成はTCP通信の場合とほとんど同じまま</span></strong>で、サーバーの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ポート番号</span></strong>と<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">プロトコルフォーマットを変更</span></strong>しただけのものであると、ターミナルからでは正常に動作するのにブラウザから WEBサーバー化したESP32へのHTTP通信はうまくいきませんでした。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>TCP通信プロトコルでPCやスマホのターミナルソフトからSTM32へコードを送るのと、HTTP通信プロトコルでウェブブラウザからSTM32へコードを送るのは一見ほぼ同じに思えますが、中間にあるESP32の挙動がかなり違うために動作を理解しないままではうまくいきません。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>相違点をまとめると以下のようになります。</p>
</div></div></div>



<ul class="is-style-vk-numbered-square-mark"><li> ウェブブラウザからのHTTP通信プロトコルでは <span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>ESP32は</strong> <strong>ブラウザを開く、閉じるだけでも応答を返す</strong></span>。</li><li> ブラウザからコマンドを与えるのは、IPアドレスにコマンドを付属させるため（IPアドレス/コマンドコード）、都度接続を閉じたり、つなげたりすることになります。そのため、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">応答（0,CLOSED/0,CONNECT)も都度付加される</span></strong>。</li><li> ちょっとしたコードを送るだけでも、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">応答文字列はかなり長い</span></strong>。（下の赤で囲まれた部分）</li><li> 応答文字列も長い分、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ATコマンド前後の待ち時間も大きめに設定</span></strong>する。</li></ul>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="588" height="407" src="https://depfields.com/wp-content/uploads/2020/09/webserver-receive.jpg" alt="" class="wp-image-6043" srcset="https://depfields.com/wp-content/uploads/2020/09/webserver-receive.jpg 588w, https://depfields.com/wp-content/uploads/2020/09/webserver-receive-300x208.jpg 300w" sizes="(max-width: 588px) 100vw, 588px" /></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>つまり、ブラウザから文字コードを送信すると、想定以上にESP32は応答を返すので<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">予め想定しておかなければマイコン側では多くのものを予期せぬタイミングで受信することになります</span></strong>。これが時に<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">フリーズの原因</span></strong>にもなりえます。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>そういうものであることを分かってしまえば対処のしようもあるのですが、はじめは原因がわからなかったために<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">問題解決に至り安定した通信を実現</span></strong>できるようになるまでかなり時間を要しました。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>以下に、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32をHTTP通信プロトコルで安定して文字コードを送るコツを解説</span></strong>します。</p>
</div></div></div>



<h2 class="wp-block-heading">プログラム構成</h2>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/09/web-server-rx-diagram.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-server-rx-diagram.jpg" alt="" class="wp-image-6097" width="520" height="561" srcset="https://depfields.com/wp-content/uploads/2020/09/web-server-rx-diagram.jpg 569w, https://depfields.com/wp-content/uploads/2020/09/web-server-rx-diagram-278x300.jpg 278w" sizes="(max-width: 520px) 100vw, 520px" /></a><figcaption>HTTP通信プロトコルによる受信構成図</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>受信構成はTCP通信の場合と同じでもよいのですが、サンプルアプリでは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">割り込み受信を使用</span></strong>しており、割り込みが入った時点が分かるようにLEDを点灯させています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>不定のタイミングで受信が発生する場合はポーリングによるものよりも<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">割り込みにした方が確実</span></strong>です。ポーリング方式でも試してみましたが安定した動作を得ることはできませんでした。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-server-rx-setting.jpg" alt="" class="wp-image-6056" width="609" height="426" srcset="https://depfields.com/wp-content/uploads/2020/09/web-server-rx-setting.jpg 609w, https://depfields.com/wp-content/uploads/2020/09/web-server-rx-setting-300x210.jpg 300w" sizes="(max-width: 609px) 100vw, 609px" /><figcaption>割り込み受信処理</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>このアプリの特徴は割り込みが発生して<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">受信処理をする度に一旦USARTを初期化してレジスタをクリアにする</span></strong>ことです。クリアにはいろいろな方法があるとは思いますが、ここでは最も初歩的で簡単なクリアを実現するために、リセット関数を下記のようにまとめて実行させています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>リセット処理を受信のたびにきっちり施すことで、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">通信エラーなどがクリアされ動作が安定</span></strong>しました。これで、ブラウザからコードにより処理を分岐させることができるようになりましたので、さまざまなリモートアプリに発展させることが可能になります。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>種々の<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">コードを含んだIPアドレスをリンクとしてHTMLページに貼り付け</span></strong>ておけば、それをクリックするとコードがブラウザからマイコン側に転送されることになります。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/usart-reset.jpg" alt="" class="wp-image-6104" width="639" height="234" srcset="https://depfields.com/wp-content/uploads/2020/09/usart-reset.jpg 675w, https://depfields.com/wp-content/uploads/2020/09/usart-reset-300x110.jpg 300w" sizes="(max-width: 639px) 100vw, 639px" /><figcaption>USARTの初期化</figcaption></figure>



<div class='w3eden'><!-- WPDM Link Template: Default Template -->

<div class="link-template-default card mb-2">
    <div class="card-body">
        <div class="media">
            <div class="mr-3 img-48"><img class="wpdm_icon" alt="アイコン"   src="https://depfields.com/wp-content/plugins/download-manager/assets/file-type-icons/box_download.png" /></div>
            <div class="media-body">
                <h3 class="package-title"><a href='https://depfields.com/download/esp32-http-rx/'>ESP32　HTTP通信（WiFi受信編）</a></h3>
                <div class="text-muted text-small"><i class="fas fa-copy"></i> 1 ファイル <i class="fas fa-hdd ml-3"></i> 6.74 KB</div>
            </div>
            <div class="ml-3">
                <a href='#unlock' class='wpdm-download-link wpdm-download-locked btn btn-primary ' data-package='6088'>ダウンロード</a>
            </div>
        </div>
    </div>
</div>

</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<div style="background: #00ccff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>コラム</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #00ccff; border-radius: 0 0 10px 10px;">
<p>今回はTCP通信で行っている<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">簡易的なコード受信をHTTP通信プロトコルで行うサンプルを紹介</span></strong>しました。ちょっとしたリモート操作ではこれでも十分だと思います。<br />ただ、HTTP通信プロトコルをATコマンドで行うのは、文字コード長を指定する必要があったり、制約があるため煩わしいのも確かです。ESP32で本格的にHTTP通信を行う場合は<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">透過 （トランスペアレント） モードでATコマンドによらずマイコン側とシームレスな通信を行うこともできる</span></strong>のでさらに発展させたい場合は挑戦してみてください。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>


<div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://en.depfields.com/esp32-http-rx-apl/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img class="lkc-favicon" src="https://www.google.com/s2/favicons?domain=en.depfields.com" alt="" width=16 height=16 /><div class="lkc-domain">Most Powerful Bible to Become an Embedded Engineer</div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/53da4d4bbd905f6cbae0fc8e724d51f02c6d3357bd6a70870f8fa80ae7cbdf58.jpeg" alt="" /></figure><div class="lkc-title"><div class="lkc-title-text">Operating the STM32 with ESP32 WiFi from a browser | Most Powerful Bible to B...</div></div><div class="lkc-url">https://en.depfields.com/esp32-http-rx-apl/</div><div class="lkc-excerpt">Nucleo (STM32) is converted to wireless (WiFi) using the ESP32 wireless module and configured as a web server. We will introduce an application that remotely operates MCU by sending a string of command codes from a web browser on a client</div></div><div class="clear"></div></div></a></div></div><p>The post <a href="https://depfields.com/esp32-http-rx-apl/">ESP32でWiFi化したSTM32にブラウザから操作する</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ESP32でWiFi化したSTM32からウェブブラウザへ送信する</title>
		<link>https://depfields.com/esp32-http-tx-apl/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=esp32-http-tx-apl</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Mon, 21 Sep 2020 13:43:43 +0000</pubDate>
				<category><![CDATA[IoTアプリ]]></category>
		<category><![CDATA[ESP32]]></category>
		<category><![CDATA[WiFi]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[ブラウザ]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=6076</guid>

					<description><![CDATA[<p>無線モジュールESP32を使って Nucleo(STM32) を無線 (WiFi) 化し、WEBサーバーとしてPCやスマホのターミナルへ文字列を送るアプリを紹介します。 ESP32とブラウザの設定および送受信については「 [&#8230;]</p>
<p>The post <a href="https://depfields.com/esp32-http-tx-apl/">ESP32でWiFi化したSTM32からウェブブラウザへ送信する</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img width="510" height="536" src="https://depfields.com/wp-content/uploads/2020/05/4_1_11.png" class="attachment-large size-large wp-post-image" alt="" decoding="async" srcset="https://depfields.com/wp-content/uploads/2020/05/4_1_11.png 510w, https://depfields.com/wp-content/uploads/2020/05/4_1_11-285x300.png 285w" sizes="(max-width: 510px) 100vw, 510px" /></div>
<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom"> <strong>無線モジュールESP32</strong>を使って <strong>Nucleo(STM32) を無線 (WiFi) </strong>化し、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WEBサーバーとし</span>て</strong>PCやスマホのターミナルへ文字列を送るアプリを紹介します。 ESP32とブラウザの設定および送受信については「<strong><a href="https://depfields.com/esp32-webserver/" target="_blank" aria-label=" (opens in a new tab)" rel="noreferrer noopener">ESP32でWiFi化したNucleo(STM32)をブラウザでリモート操作</a></strong>」で詳細を解説しています。  </p>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p> ここで紹介するアプリは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32でWiFi化しWEBサーバーを構成したNucleo(STM32)</span></strong> からクライアント側のPCやスマホのウェブブラウザへ文字列を送る基本的なものですが、ここでしっかり理解して使いこなせるようになると、いろいろ応用できるようになります。 </p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>基本的にはTCPサーバーの送信と同じです。配線も同じ構成です。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/09/web-server-with-stm32.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-server-with-stm32.jpg" alt="" class="wp-image-6029" width="456" height="323" srcset="https://depfields.com/wp-content/uploads/2020/09/web-server-with-stm32.jpg 456w, https://depfields.com/wp-content/uploads/2020/09/web-server-with-stm32-300x213.jpg 300w" sizes="(max-width: 456px) 100vw, 456px" /></a></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>アプリプログラム構成も基本的にTCPサーバーの送信と同じです。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>相違点はサーバー生成時にウェブサーバー用に<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ポート番号を80に指定</span></strong>し、送信するときに<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">HTTPプロトコル</span></strong>にしたがっているところです。ESP32からの応答でHTTPプロトコルの場合は冗長な文字列が返されるため、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">待ち時間を大きめに設定</span></strong>しています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>サンプルプログラムではウェブブラウザからWEBサーバーのIPアドレスを指定してからSTM32側をリセットで再起動させるとつながることが多いです。</p>
</div></div></div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<div class='w3eden'><!-- WPDM Link Template: Default Template -->

<div class="link-template-default card mb-2">
    <div class="card-body">
        <div class="media">
            <div class="mr-3 img-48"><img class="wpdm_icon" alt="アイコン"   src="https://depfields.com/wp-content/plugins/download-manager/assets/file-type-icons/box_download.png" /></div>
            <div class="media-body">
                <h3 class="package-title"><a href='https://depfields.com/download/esp32-http-tx/'>ESP32　HTTP通信（WiFi送信編）</a></h3>
                <div class="text-muted text-small"><i class="fas fa-copy"></i> 1 ファイル <i class="fas fa-hdd ml-3"></i> 5.84 KB</div>
            </div>
            <div class="ml-3">
                <a href='#unlock' class='wpdm-download-link wpdm-download-locked btn btn-primary ' data-package='6087'>ダウンロード</a>
            </div>
        </div>
    </div>
</div>

</div>


<div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://en.depfields.com/esp32-http-tx-apl/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img class="lkc-favicon" src="https://www.google.com/s2/favicons?domain=en.depfields.com" alt="" width=16 height=16 /><div class="lkc-domain">Most Powerful Bible to Become an Embedded Engineer</div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/60d4986ff1918e780603c6df541f8c30eaceb4a6c9cf0e154f520a5abbd3a96c.jpeg" alt="" /></figure><div class="lkc-title"><div class="lkc-title-text">Send from WiFi enabled STM32 with ESP32 to web browser | Most Powerful Bible ...</div></div><div class="lkc-url">https://en.depfields.com/esp32-http-tx-apl/</div><div class="lkc-excerpt">This section introduces an application that uses the ESP32 wireless module to put Nucleo (STM32) into wireless (WiFi) mode and send strings to a terminal on a PC or smartphone as a web server. The details of ESP32 and browser settings and</div></div><div class="clear"></div></div></a></div></div><p>The post <a href="https://depfields.com/esp32-http-tx-apl/">ESP32でWiFi化したSTM32からウェブブラウザへ送信する</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ESP32を使ったSTM32のTCP通信(WiFi)受信編</title>
		<link>https://depfields.com/esp32-tcp-rx-apl/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=esp32-tcp-rx-apl</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Sat, 12 Sep 2020 04:13:17 +0000</pubDate>
				<category><![CDATA[IoTアプリ]]></category>
		<category><![CDATA[ESP32]]></category>
		<category><![CDATA[WiFi]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[TCPプロトコル]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=5877</guid>

					<description><![CDATA[<p>無線モジュールESP32を使って Nucleo(STM32) を無線 (WiFi) 化し、TCPサーバーを構成します。 クライアント側 であるPCやスマホのターミナルアプリからマイコン側に文字列のコマンドコードを送ってリ [&#8230;]</p>
<p>The post <a href="https://depfields.com/esp32-tcp-rx-apl/">ESP32を使ったSTM32のTCP通信(WiFi)受信編</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img width="640" height="452" src="https://depfields.com/wp-content/uploads/2020/09/wlan-2500161_640.jpg" class="attachment-large size-large wp-post-image" alt="" decoding="async" srcset="https://depfields.com/wp-content/uploads/2020/09/wlan-2500161_640.jpg 640w, https://depfields.com/wp-content/uploads/2020/09/wlan-2500161_640-300x212.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /></div>
<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom"> <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">無線モジュールESP32</span></strong>を使って <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">Nucleo(STM32) を無線 (WiFi)</span> </strong>化し、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">TCPサーバー</span></strong>を構成します<strong>。</strong> クライアント側 であるPCやスマホのターミナルアプリからマイコン側に文字列の<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">コマンドコード</span></strong>を送って<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">リモートコントロールするアプリ</span></strong>を紹介します。 無線モジュールESP32については「<strong><a href="https://depfields.com/esp32-wifi/" target="_blank" aria-label=" (opens in a new tab)" rel="noreferrer noopener">ESP32でNucleo(STM32)を簡単にWiFi対応に</a></strong>」で詳細を解説しています。  </p>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>TCPサーバーを構成してPC、スマホなどクライアントのターミナルアプリで接続するところまでは 「<strong><a href="https://depfields.com/esp32-tcp-tx-apl/" target="_blank" aria-label=" (opens in a new tab)" rel="noreferrer noopener">ESP32を使ったSTM32のTCP通信(WiFi)送信編</a></strong>」と 共通です。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>クライアント側からの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">コマンドコードによりマイコンをコントロール</span></strong>するには<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">文字コードの受信処理</span></strong>および<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">コードに応じて処理させたい内容</span></strong>を追加すればよいのです。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ESP32 とターミナルアプリを接続して <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">”depfields”の9文字を入力してEnterキ</span>ー</strong>を押すと、改行コードを含めて11文字を送信したことになります。 ターミナルを<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ローカルエコーに設定</span></strong>していると入力した文字が現れます。  </p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p> TCPサーバー側ではクライアント側からの文字を受信すると"+<strong>IPD,0,11:depfields</strong>"と表示されます。＋IPDは受信データであることを示し、コネクションIDが0に文字列と改行コードを含んだ合計11文字を受信したことを意味しています 。応答文字列には改行コードCR+LFが含まれています。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/data_recieve.jpg" alt="" class="wp-image-5910" width="840" height="304" srcset="https://depfields.com/wp-content/uploads/2020/09/data_recieve.jpg 780w, https://depfields.com/wp-content/uploads/2020/09/data_recieve-300x109.jpg 300w, https://depfields.com/wp-content/uploads/2020/09/data_recieve-768x278.jpg 768w" sizes="(max-width: 840px) 100vw, 840px" /><figcaption>文字列受信</figcaption></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p> 上述のPCのターミナルソフトからの操作を <strong>Nucleo(STM32) </strong>に置き換えた<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32とマイコン間での通信</span></strong>をする場合のアプリを紹介します。あらかじめ、登録しておいたコード"ABC"と受信コードが一致・不一致で処理を分けるアプリです。 受信コードを含む文字列は終端が分かるように入力コードには"＠"を最後に含めています。 </p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/rcv-data-flow.jpg" alt="" class="wp-image-5915" width="468" height="305"/><figcaption>データ受信の流れ</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>PCやスマホなどのTCP通信ターミナルでESP32でWiFi化したNucleo(STM32)のTCPサーバー側に接続した状態で<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>"ABC@</strong>"</span>を入力します。ESP32では文字列を受信すると”+IPD,0,6:ABC@" をUART通信で文字列の応答として返すのでSTM32側でコード部分"ABC"を取り出せばよいのです。&nbsp; </p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/rcv-process.jpg" alt="" class="wp-image-5912" width="689" height="656" srcset="https://depfields.com/wp-content/uploads/2020/09/rcv-process.jpg 689w, https://depfields.com/wp-content/uploads/2020/09/rcv-process-300x286.jpg 300w" sizes="(max-width: 689px) 100vw, 689px" /><figcaption>受信処理</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>受信コードが取得できればあとはシリアル通信と同様にアプリ側で処理したい内容を作成すればよいわけです。<br>例えば、コードを"ON"や"OFF"などに登録しておき、これらと一致した場合にそれぞれ処理を分ければソフトウェアスイッチとしてリモートコントロールできるようになります。<br>&nbsp; </p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/data-receive-process.jpg" alt="" class="wp-image-5917" width="441" height="376" srcset="https://depfields.com/wp-content/uploads/2020/09/data-receive-process.jpg 441w, https://depfields.com/wp-content/uploads/2020/09/data-receive-process-300x256.jpg 300w" sizes="(max-width: 441px) 100vw, 441px" /><figcaption>データ受信処理</figcaption></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<div style="background: #00ccff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>コラム</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #00ccff; border-radius: 0 0 10px 10px;">
<p>ESP32との文字列受信は一度分かってしまえば簡単なようですが、多少クセはあります。これらを理解していると柔軟に対処できるようになりますので色々発展させてみてください。一部記載しておきます。<br>■　ATコマンドを送る度に<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">ある程度の待ち時間が必要</span></strong>なこと<br>■　<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">応答文字列のまえに改行コードCR+LFが含まれる</span></strong>こと（このために終端文字にCRを指定できない）<br>■　ATコマンドを送ると必ず<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">なんらかの応答がある</span></strong>こと<br>受信に割り込みを使用する場合にATコマンドを使用するとESP32からの応答が割り込みとして反応してしまうため注意が必要です。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<div class='w3eden'><!-- WPDM Link Template: Default Template -->

<div class="link-template-default card mb-2">
    <div class="card-body">
        <div class="media">
            <div class="mr-3 img-48"><img class="wpdm_icon" alt="アイコン"   src="https://depfields.com/wp-content/plugins/download-manager/assets/file-type-icons/box_download.png" /></div>
            <div class="media-body">
                <h3 class="package-title"><a href='https://depfields.com/download/esp32-tcp-rx/'>ESP32　TCP通信（WiFi受信編）</a></h3>
                <div class="text-muted text-small"><i class="fas fa-copy"></i> 1 ファイル <i class="fas fa-hdd ml-3"></i> 6.68 KB</div>
            </div>
            <div class="ml-3">
                <a href='#unlock' class='wpdm-download-link wpdm-download-locked btn btn-primary ' data-package='5947'>ダウンロード</a>
            </div>
        </div>
    </div>
</div>

</div>



<div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://en.depfields.com/esp32-tcp-rx-apl/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img class="lkc-favicon" src="https://www.google.com/s2/favicons?domain=en.depfields.com" alt="" width=16 height=16 /><div class="lkc-domain">Most Powerful Bible to Become an Embedded Engineer</div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/b956e44f4fd7a80d170d27190165c29e0872079e44ea46ea473208c293481bbf.jpeg" alt="" /></figure><div class="lkc-title"><div class="lkc-title-text">TCP communication(WiFi) receive of STM32 with ESP32 | Most Powerful Bible to ...</div></div><div class="lkc-url">https://en.depfields.com/esp32-tcp-rx-apl/</div><div class="lkc-excerpt">Nucleo(STM32) is converted to wireless(WiFi) using the ESP32 wireless module and configured as a TCP server. I will introduce an application that remotely controls MCU by sending a string of command codes from a terminal emulator on a PC o</div></div><div class="clear"></div></div></a></div></div><p>The post <a href="https://depfields.com/esp32-tcp-rx-apl/">ESP32を使ったSTM32のTCP通信(WiFi)受信編</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ESP32を使ったSTM32のTCP通信(WiFi)送信編</title>
		<link>https://depfields.com/esp32-tcp-tx-apl/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=esp32-tcp-tx-apl</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Thu, 03 Sep 2020 06:47:50 +0000</pubDate>
				<category><![CDATA[IoTアプリ]]></category>
		<category><![CDATA[ESP32]]></category>
		<category><![CDATA[WiFi]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[TCPプロトコル]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=5815</guid>

					<description><![CDATA[<p>無線モジュールESP32を使って Nucleo(STM32) を無線 (WiFi) 化し、TCPサーバーとしてPCやスマホのターミナルへ文字列を送るアプリを紹介します。 無線モジュールESP32については「ESP32でN [&#8230;]</p>
<p>The post <a href="https://depfields.com/esp32-tcp-tx-apl/">ESP32を使ったSTM32のTCP通信(WiFi)送信編</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img width="640" height="400" src="https://depfields.com/wp-content/uploads/2020/09/wlan-3152662_640.jpg" class="attachment-large size-large wp-post-image" alt="" decoding="async" srcset="https://depfields.com/wp-content/uploads/2020/09/wlan-3152662_640.jpg 640w, https://depfields.com/wp-content/uploads/2020/09/wlan-3152662_640-300x188.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /></div>
<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom"><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">無線モジュールESP32</span></strong>を使って <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">Nucleo(STM32) を無線 (WiFi) </span></strong>化し、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">TCPサーバーとして</span></strong>PCやスマホのターミナルへ文字列を送るアプリを紹介します。 無線モジュールESP32については「<strong><a href="https://depfields.com/esp32-wifi/" target="_blank" aria-label=" (opens in a new tab)" rel="noreferrer noopener">ESP32でNucleo(STM32)を簡単にWiFi対応に</a></strong>」で詳細を解説しています。 </p>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ここで紹介するアプリは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32でWiFi化しTCPサーバーを構成したNucleo(STM32)</span></strong> からクライアント側のPCやスマホのターミナルへ文字列を送る基本的なものですが、ここでしっかり理解して使いこなせるようになると、いろいろ応用できるようになります。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">Nucleo(STM32)</span></strong>と<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32</span></strong>は シリアル通信ではよく使われる <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ATコマンド</span></strong>を <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">UART通信 でやり取り</span></strong>してデータの送受信を行います。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/ESP32-with-nucleo.jpg" alt="" class="wp-image-5845" width="375" height="312"/><figcaption>ESP32とNucleo(STM32)配線</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">無線モジュールESP32のモード</span></strong>は一般的な<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">STA(ステーション)モード</span></strong>に設定して家庭や職場のWiFiルーターからIPアドレスを割り当てられるものにします。他のモードではESP32自体を親機にするAP(アクセスポイント)モードもありますので実施してみてください。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>この例では親機でDHCPサーバーであるWiFiルーターアドレスが"192.168.3.1"でESP32に割り当てられたIPアドレスは"192.168.3.19"である環境を前提にしており、各々の環境では異なりますのでご注意ください。 </p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/ESP32-with-MPU.jpg" alt="" class="wp-image-5829" width="457" height="287" srcset="https://depfields.com/wp-content/uploads/2020/09/ESP32-with-MPU.jpg 456w, https://depfields.com/wp-content/uploads/2020/09/ESP32-with-MPU-300x188.jpg 300w" sizes="(max-width: 457px) 100vw, 457px" /><figcaption> STAモードでのネットワーク環境 </figcaption></figure>





<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p> では早速プログラムを見ていきましょう。FreeRTOSを使った構成としています。メインプログラムの流れは起動直後に各ペリフェラルの設定を行ってから、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WiFiの設定</span></strong>をします。その後、処理内容ごとに2つのタスクにわけ、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">デモプログラム用データ作成のタスクprvTask_data</span></strong>と<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">データモニター用タスクprvTask_monitor</span></strong>としています。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/main-tcp-server-tx.jpg" alt="" class="wp-image-5835" width="606" height="430" srcset="https://depfields.com/wp-content/uploads/2020/09/main-tcp-server-tx.jpg 674w, https://depfields.com/wp-content/uploads/2020/09/main-tcp-server-tx-300x213.jpg 300w" sizes="(max-width: 606px) 100vw, 606px" /><figcaption>メインプログラム構成</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>WiFi設定はwifi_setting関数にまとめ、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ポート番号50000のTCPサーバーを生成</span></strong>しています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">デモ用データ作成はタスクprvTask_dataで行い</span></strong>、20msごとにデータ(data)を加算していく処理にしています。dataは符号なし8ビットで255を超えると0に戻ることを繰り返しています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p> <strong>データモニター用タスクprvTask_monitor</strong> は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">３桁の数字</span></strong>を送るために、改行コード２文字分を含んだ５文字の送信要求コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">"AT+CIPSEND=0,5\r\n"</span></strong>を送信して<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">適度の待ち時間を挿入</span></strong>します。数値データを３桁の数字に変換し(digit_conv関数)、文字列としてUSART送信しています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>送信要求コマンド<strong>"AT+CIPSEND=0,5\r\n"</strong>後に挿入する<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">待ち時間</span></strong>はUART通信のボーレートによっても変わります。試してみたところ9600bps時には25ms以上、115200bps時には3ms以上に設定すれば正常に機能しました。参考プログラムは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">9600bps</span></strong>でのものです。</p>
</div></div></div>



<div style="background: #00ccff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>コラム</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #00ccff; border-radius: 0 0 10px 10px;">
<p>ESP32のUART通信の設定はコマンド<strong>AT+UART_DEF=9600,8,1,0,0</strong>で変更できます。詳しくは「<a href="https://depfields.com/esp32-wifi/" target="_blank" rel="noopener noreferrer"><strong>ESP32でNucleo(STM32)を簡単にWiFi対応に</strong></a>」に記載しています。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>WiFi化した文字列送信の基本構成は以上です。ひとたびTCPサーバーを構成してしまうと、あとは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">シリアル通信の感覚で送信が実現できてしまいますので簡単</span></strong>です。TCPサーバーを実現するための通信プロトコルはESP32のファームウェアに内蔵されていてはじめに設定用コードで指定するだけです。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/wifi-setting-tx.jpg" alt="" class="wp-image-5856" width="553" height="525"/><figcaption>WiFi設定および各タスク</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>Nucleo(STM32)のTCPサーバー側から送信された数字をクライアント側でモニターするにはターミナルアプリを使用します。ここでは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">PCのターミナルソフト</span></strong>として<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">TeraTermを使用</span></strong>しています。IPアドレスとポートを指定すると接続できるはずです。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/tcp-server-access.jpg" alt="" class="wp-image-5583" width="479" height="311" srcset="https://depfields.com/wp-content/uploads/2020/08/tcp-server-access.jpg 479w, https://depfields.com/wp-content/uploads/2020/08/tcp-server-access-300x195.jpg 300w" sizes="(max-width: 479px) 100vw, 479px" /><figcaption>クライアント側のターミナルを起動する</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>Nucleo(STM32)側から送られた数字は0.5秒間隔で更新されています。数字が0から255までの1サイクルが約5秒であれば成功です。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/data-monitor.jpg" alt="" class="wp-image-5869" width="568" height="480" srcset="https://depfields.com/wp-content/uploads/2020/09/data-monitor.jpg 568w, https://depfields.com/wp-content/uploads/2020/09/data-monitor-300x254.jpg 300w" sizes="(max-width: 568px) 100vw, 568px" /><figcaption>データモニター</figcaption></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<p></p>



<div class='w3eden'><!-- WPDM Link Template: Default Template -->

<div class="link-template-default card mb-2">
    <div class="card-body">
        <div class="media">
            <div class="mr-3 img-48"><img class="wpdm_icon" alt="アイコン"   src="https://depfields.com/wp-content/plugins/download-manager/assets/file-type-icons/box_download.png" /></div>
            <div class="media-body">
                <h3 class="package-title"><a href='https://depfields.com/download/esp32-tcp-tx/'>ESP32　TCP通信（WiFi送信編）</a></h3>
                <div class="text-muted text-small"><i class="fas fa-copy"></i> 1 ファイル <i class="fas fa-hdd ml-3"></i> 5.77 KB</div>
            </div>
            <div class="ml-3">
                <a href='#unlock' class='wpdm-download-link wpdm-download-locked btn btn-primary ' data-package='5860'>ダウンロード</a>
            </div>
        </div>
    </div>
</div>

</div>



<div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://en.depfields.com/esp32-tcp-tx-apl/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img class="lkc-favicon" src="https://www.google.com/s2/favicons?domain=en.depfields.com" alt="" width=16 height=16 /><div class="lkc-domain">Most Powerful Bible to Become an Embedded Engineer</div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/626b5fe989b34aea0b86422c8bb51b35d53ad8e8a7a03b33d6fe2bf4a8cee5b6.jpeg" alt="" /></figure><div class="lkc-title"><div class="lkc-title-text">TCP communication (WiFi) send of STM32 with ESP32 | Most Powerful Bible to Be...</div></div><div class="lkc-url">https://en.depfields.com/esp32-tcp-tx-apl/</div><div class="lkc-excerpt">This section introduces an application that uses the ESP32 wireless module to make Nucleo (STM32) wireless (WiFi) and send strings to a terminal on a PC or smartphone as a TCP server. The wireless module ESP32 is explained in detail in &quot;ES</div></div><div class="clear"></div></div></a></div></div><p>The post <a href="https://depfields.com/esp32-tcp-tx-apl/">ESP32を使ったSTM32のTCP通信(WiFi)送信編</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ESP32でWiFi化したNucleo(STM32)をブラウザでリモート操作</title>
		<link>https://depfields.com/esp32-webserver/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=esp32-webserver</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Mon, 21 Sep 2020 12:54:22 +0000</pubDate>
				<category><![CDATA[マイコンのIoT化]]></category>
		<category><![CDATA[ESP32]]></category>
		<category><![CDATA[WiFi]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[ブラウザ]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=5992</guid>

					<description><![CDATA[<p>ESP32をSTM32マイコンに組み込んでWiFi化したWEBサーバーを構築して、ウェブブラウザからSTM32マイコンをリモート操作する方式を解説していきます。 ブラウザからマイコンをリモート操作ができるとアプリケーショ [&#8230;]</p>
<p>The post <a href="https://depfields.com/esp32-webserver/">ESP32でWiFi化したNucleo(STM32)をブラウザでリモート操作</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img width="640" height="451" src="https://depfields.com/wp-content/uploads/2020/09/computer-1231889_640.jpg" class="attachment-large size-large wp-post-image" alt="" decoding="async" srcset="https://depfields.com/wp-content/uploads/2020/09/computer-1231889_640.jpg 640w, https://depfields.com/wp-content/uploads/2020/09/computer-1231889_640-300x211.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /></div>
<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">ESP32をSTM32マイコンに組み込んでWiFi化したWEBサーバーを構築して、ウェブブラウザからSTM32マイコンをリモート操作する方式を解説していきます。 ブラウザからマイコンをリモート操作ができるとアプリケーションの用途がぐっと拡がります。</p>







<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>  ESP32でSTM32をWiFi化したTCPサーバーを構築するとPCやスマホなどからターミナルソフトでTCP通信によってリモートコントロールができるようになりました。ここではターミナルソフトの代わりに <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ウェブブラウザからNucleo(STM32マイコン)にアクセスしてリモートコントロールする方式</span></strong>を解説していきます。 </p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p> 今回はESP32をPCのシリアルターミナルからATコマンド送って<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WEBサーバーに設定</span></strong>していますので 送信、受信ともATコマンドでサーバーを構築するところまではTCPサーバーのときとほぼ同じです。ウェブ上のWEBサーバーにアクセスする場合は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32をクライアント設定</span></strong>にします。 </p>
</div></div></div>



<h2 class="wp-block-heading">WEBサーバー設定</h2>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-server-structure.jpg" alt="" class="wp-image-6027" width="483" height="319" srcset="https://depfields.com/wp-content/uploads/2020/09/web-server-structure.jpg 483w, https://depfields.com/wp-content/uploads/2020/09/web-server-structure-300x198.jpg 300w" sizes="(max-width: 483px) 100vw, 483px" /><figcaption>ESP32のWEBサーバー化</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p> TCPサーバーに設定する場合ははじめに<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">複数のコネクションに対応できるモード（マルチコネクションモード）に設定</span></strong>します。コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPMUX=1</span></strong>の"1":マルチコネクション、"0":シングルコネクションモード。ESP32はデフォルトがシングルコネクションモードですので<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">このコマンドを必ず実行</span></strong>します。  </p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p> コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPSERVER=1,80</span></strong>で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WEBサーバーを生成</span></strong>します。1つ目の値が<strong>"1"でサーバー生成、"0"でサーバー削除</strong>です。ポート番号はWEBサーバーを構築する場合ですので <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">"80"</span></strong>を指定します。"50000"を指定した場合はうまくいきませんでした。「OK」の応答でTCPサーバーは起動しました。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">クライアント側の接続待ち</span></strong>状態になります。 </p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-server-setting.jpg" alt="" class="wp-image-6008" width="546" height="310" srcset="https://depfields.com/wp-content/uploads/2020/09/web-server-setting.jpg 546w, https://depfields.com/wp-content/uploads/2020/09/web-server-setting-300x170.jpg 300w" sizes="(max-width: 546px) 100vw, 546px" /><figcaption>WEBサーバーの生成</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ウェブブラウザでWEBサーバーのIPアドレスを指定しアクセスするととシリアルターミナルで以下のような表示が現れます。ポート番号は80である場合は省略してもよいようです。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-browser-address.jpg" alt="" class="wp-image-6009" width="495" height="180" srcset="https://depfields.com/wp-content/uploads/2020/09/web-browser-address.jpg 495w, https://depfields.com/wp-content/uploads/2020/09/web-browser-address-300x109.jpg 300w" sizes="(max-width: 495px) 100vw, 495px" /><figcaption>ウェブブラウザからWEBサーバーへアクセス</figcaption></figure>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-server-access.jpg" alt="" class="wp-image-6013" width="577" height="395" srcset="https://depfields.com/wp-content/uploads/2020/09/web-server-access.jpg 577w, https://depfields.com/wp-content/uploads/2020/09/web-server-access-300x205.jpg 300w" sizes="(max-width: 577px) 100vw, 577px" /><figcaption>WEBサーバーからの応答</figcaption></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<h3 class="wp-block-heading">ATコマンドによる送信操作</h3>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ここで文字列"<strong>Hello</strong>"をウェブブラウザ側に送るATコマンドを実行します。<br>ブラウザにはHTTPプロトコルのHTML文字列を付加すると"<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">&lt;H1&gt;Hello&lt;/H1&gt;</span></strong>"の合計14文字になります。 </p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ATコマンドの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPSEND=0,14</span></strong>を送ったあとに コマンドが受理されると”<strong>OK</strong>”が返されて、<strong>＞のプロンプト</strong>が表示されて入力待ちになっているので 送信する14文字 <strong>&lt;H1&gt;Hello&lt;/H1&gt;</strong>を入力するとブラウザへ送られます。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/webserver-send.jpg" alt="" class="wp-image-6007" width="518" height="374" srcset="https://depfields.com/wp-content/uploads/2020/09/webserver-send.jpg 518w, https://depfields.com/wp-content/uploads/2020/09/webserver-send-300x217.jpg 300w" sizes="(max-width: 518px) 100vw, 518px" /><figcaption>ウェブブラウザへ文字列送信</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ウェブブラウザで画面が切り替わり以下のように文字列<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">"Hello"</span></strong>が現れていれば成功です。続けて文字列を送りたい場合は同様にコマンドAT+CIPSENDの実行を繰り返します。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-browser-receive.jpg" alt="" class="wp-image-6038" width="475" height="224"/><figcaption>WEBサーバーからの文字列</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>終了するには<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ブラウザを閉じる</span></strong>か、ATコマンド"<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPCLOSE=0</span></strong>"を実行します。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">"0"はリンクID</span></strong>です。</p>
</div></div></div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<h3 class="wp-block-heading">ATコマンドによる受信操作</h3>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ウェブブラウザから文字列を送ったものをシリアルターミナルで受信する場合を見ていきましょう。この場合はブラウザのアドレスの後に<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">”/"で区切り</span></strong>、送りたい文字列をいれればよいだけです。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-browser-tx.jpg" alt="" class="wp-image-6011" width="467" height="201" srcset="https://depfields.com/wp-content/uploads/2020/09/web-browser-tx.jpg 467w, https://depfields.com/wp-content/uploads/2020/09/web-browser-tx-300x129.jpg 300w" sizes="(max-width: 467px) 100vw, 467px" /><figcaption>ウェブブラウザからの文字列送信</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>TCP通信の時と違うのはブラウザで接続中の場合にコードの文字列を含んだIPアドレスを指定して更新すると、一旦通信が切れてからまた更新したIPアドレスで再接続することです。そのとき、ESP32は接続状態の応答を返してからその次に+IPDから始まる文字列をターミナル側に送ります。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>HTTPプロトコルによる通信のため、多くの文字が付加されて応答されてきます。 WEBサーバーの受信では<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">"/"直後に文字列</span></strong>があり、この部分を<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">受信コードとして抽出</span></strong>すればよいのです。 </p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/webserver-receive.jpg" alt="" class="wp-image-6043" width="588" height="407" srcset="https://depfields.com/wp-content/uploads/2020/09/webserver-receive.jpg 588w, https://depfields.com/wp-content/uploads/2020/09/webserver-receive-300x208.jpg 300w" sizes="(max-width: 588px) 100vw, 588px" /><figcaption> Webサーバーでの受信 </figcaption></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<h2 class="wp-block-heading">ESP32によるウェブブラウザ経由でマイコンのリモート操作</h2>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>これまではPCのシリアルターミナルソフトからESP32へATコマンドのやりとりで文字列の送受信を行ってきました。 他の実行環境であるマイコンとATコマンドをやりとりして <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ウェブブラウザ経由でおこなうリモート操作</span></strong>に挑戦しましょう。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ブラウザからマイコンをリモート操作ができるようになると、アプリケーションの用途がぐっと拡がります。まさにIoTの典型的なものですので使いこなせるようになって発展させてください。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-server-with-stm32.jpg" alt="" class="wp-image-6029" width="456" height="323" srcset="https://depfields.com/wp-content/uploads/2020/09/web-server-with-stm32.jpg 456w, https://depfields.com/wp-content/uploads/2020/09/web-server-with-stm32-300x213.jpg 300w" sizes="(max-width: 456px) 100vw, 456px" /><figcaption>マイコンとWEBサーバー</figcaption></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<h3 class="wp-block-heading">マイコンからウェブブラウザへの送信操作</h3>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p> PCのターミナルからATコマンドを送ってウェブブラウザへの文字列を送信できるようになりましたが、次の課題はターミナルに置き換えて<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">マイコン（STM32)からウェブブラウザへ文字列を送信する場合</span></strong>です。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>プログラムの内容は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">基本的にTCP通信の場合と同じ</span></strong>ですが、相違点はサーバーを生成する<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ポートをWEBサーバー用の80にする</span></strong>ことです。また、送信の文字列にはHTTPプロトコルにしたがって、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">文字列の前後に&lt;H1&gt;&lt;/H1&gt;を付加する</span></strong>ことです。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>送信に関してはTCPサーバーの場合とあまり変わりません。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-server-tx-setting.jpg" alt="" class="wp-image-6055" width="603" height="501" srcset="https://depfields.com/wp-content/uploads/2020/09/web-server-tx-setting.jpg 573w, https://depfields.com/wp-content/uploads/2020/09/web-server-tx-setting-300x250.jpg 300w" sizes="(max-width: 603px) 100vw, 603px" /><figcaption>Webサーバー設定</figcaption></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="533" height="432" src="https://depfields.com/wp-content/uploads/2020/09/web-browser-tx-monitor.jpg" alt="" class="wp-image-6046" srcset="https://depfields.com/wp-content/uploads/2020/09/web-browser-tx-monitor.jpg 533w, https://depfields.com/wp-content/uploads/2020/09/web-browser-tx-monitor-300x243.jpg 300w" sizes="(max-width: 533px) 100vw, 533px" /></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>このサンプルでは定期的に増加させた数値を1.5秒間隔でブラウザに表示させるものです。プログラムは<strong><a href="https://depfields.com/esp32-http-tx-apl/" target="_blank" aria-label=" (opens in a new tab)" rel="noreferrer noopener">ESP32でWiFi化したSTM32からウェブブラウザへ送信する</a></strong>で紹介しています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<h3 class="wp-block-heading">ウェブブラウザからマイコンでの受信操作</h3>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>今度は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ウェブブラウザからマイコン（STM32）側へ文字列を送る場合</span></strong>です。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ウェブブラウザから<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">文字列”ABC@"</span></strong>を送るとESP32ではブラウザとの接続あるいは再接続するための応答、 "0,CLOSED", "0,CONNECT"を返します。これに続いて<br>+IPD,x,xxx:GET /<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ABC</span></strong>@ HTTP/1.1xxx...が応答としてマイコンへ返しますのでこの中の<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ABC</span></strong>だけを取り出します。ここでも<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">文字列の終端</span></strong>が分かるように<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>@</strong></span>をコマンドにつけています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ESP32とブラウザとの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">HTTPプロトコルによる通信</span></strong>ではことあるたびにいろいろな応答が発生するので注意が必要です。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>マイコンでの受信処理はESP32からの応答のタイミングを把握するためにもポーリング処理よりも<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">割り込みを使用するほうが確実</span></strong>です。ESP32はHTTPプロトコルでは送信したいコード以外にもいろいろな応答を返すので、どのタイミングでどんな応答があるかを予め、把握しておくのが重要です。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ブラウザからのマイコン操作は予め登録しておいた文字列コードをIPアドレスに含めて入力し、マイコンプログラム内でコードとの一致、不一致で処理を分ければリモート操作ができることになります。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/web-server-rx-setting.jpg" alt="" class="wp-image-6056" width="609" height="426" srcset="https://depfields.com/wp-content/uploads/2020/09/web-server-rx-setting.jpg 609w, https://depfields.com/wp-content/uploads/2020/09/web-server-rx-setting-300x210.jpg 300w" sizes="(max-width: 609px) 100vw, 609px" /><figcaption>Webサーバー受信処理</figcaption></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="532" height="401" src="https://depfields.com/wp-content/uploads/2020/09/web-browser-rx-monitor.jpg" alt="" class="wp-image-6048" srcset="https://depfields.com/wp-content/uploads/2020/09/web-browser-rx-monitor.jpg 532w, https://depfields.com/wp-content/uploads/2020/09/web-browser-rx-monitor-300x226.jpg 300w" sizes="(max-width: 532px) 100vw, 532px" /></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>このサンプルはブラウザから送ったコードを登録コードと比較して一致・不一致により処理を条件分岐させるプログラムです。コード取得ではESP32からの応答文字列のなかで<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">必要なコードだけを抽出</span></strong>しています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>条件分岐処理後にUSART3を初期状態に戻すことをして次の割り込みに備えています。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">なんらかの方法でUSART3のレジスタ類をクリア</span></strong>しておかないとUSARTが応答しなくなる可能性があります。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>このサンプルでは受信割り込みが入ったときにLED（PA5)を出力して確認できるようにしています。 プログラムは<strong><a href="https://depfields.com/esp32-http-rx-apl/" target="_blank" aria-label=" (opens in a new tab)" rel="noreferrer noopener">ESP32でWiFi化したSTM32にブラウザから操作する</a></strong>で紹介しています。 </p>
</div></div></div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<div style="display: inline-block; background: #191970; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0px 0px;"><strong>ポイント</strong></div>
<div style="background: #ffffea; border-radius: 0px 10px 10px 10px; padding: 10px; border: 3px solid #191970;">
<p>ESP32操作のためのマイコンプログラムではATコマンド前後では十分な待ち時間を設けておくのがコツです。ボーレート等環境によりことなりますがまずは<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">大きめなものを設定しておくのがおすすめ</span></strong>です</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<div style="background: #00ccff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>コラム</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #00ccff; border-radius: 0 0 10px 10px;">
<p>ESP32をHTTPプロトコルで使うと何かにつけ応答を返すのですが、ときにより結構悩まされることがあります。ESP32とターミナル間の通信では問題がないのにマイコンとの通信ではうまく行かないのは、<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">応答の処理や待ち時間が不十分</span></strong>である可能性が大きいです。ターミナルソフトでコマンドを与えたときに<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">ESP32からどのような応答があるかを一つずつ確認しながら見落としないようにすることが大切</span></strong>です。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>


<div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://en.depfields.com/esp32-webserver/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img class="lkc-favicon" src="https://www.google.com/s2/favicons?domain=en.depfields.com" alt="" width=16 height=16 /><div class="lkc-domain">Most Powerful Bible to Become an Embedded Engineer</div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/316ea75b48110b354786d97916a8f9f4b4398ae199603183935b8e3d1479bac9.jpeg" alt="" /></figure><div class="lkc-title"><div class="lkc-title-text">Remote control of WiFi enabled STM32Nucleo with ESP32 using a browser | Most ...</div></div><div class="lkc-url">https://en.depfields.com/esp32-webserver/</div><div class="lkc-excerpt">The following is an explanation of the method of operation. If you can remotely control MCU from a browser, your application will be much more versatile.  When a TCP server with WiFi enabled STM32 is built with ESP32, it can be re</div></div><div class="clear"></div></div></a></div></div><p>The post <a href="https://depfields.com/esp32-webserver/">ESP32でWiFi化したNucleo(STM32)をブラウザでリモート操作</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ESP32でNucleo(STM32)を簡単にWiFi対応に</title>
		<link>https://depfields.com/esp32-wifi/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=esp32-wifi</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Sat, 29 Aug 2020 16:55:07 +0000</pubDate>
				<category><![CDATA[マイコンのIoT化]]></category>
		<category><![CDATA[ESP32]]></category>
		<category><![CDATA[WiFi]]></category>
		<category><![CDATA[IoT]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=5437</guid>

					<description><![CDATA[<p>無線モジュールESP32(ESP32-WROOM-32)を使用してSTM32をWiFi対応にする方法を解説します。大人気のESP32モジュールですが、ESP32自体をマイコンとして操作する解説が多く他のマイコンを簡単にW [&#8230;]</p>
<p>The post <a href="https://depfields.com/esp32-wifi/">ESP32でNucleo(STM32)を簡単にWiFi対応に</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img width="291" height="241" src="https://depfields.com/wp-content/uploads/2020/08/ESP32-DevKiTC.jpg" class="attachment-large size-large wp-post-image" alt="" decoding="async" /></div>
<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">無線モジュールESP32(ESP32-WROOM-32)を使用してSTM32をWiFi対応にする方法を解説します。大人気のESP32モジュールですが、ESP32自体をマイコンとして操作する解説が多く他のマイコンを簡単にWiFi化する情報が少ない状況で比較的簡単にシリアル通信のATコマンドによるリモート操作を実現してみました。</p>







<h2 class="wp-block-heading">無線モジュールESP32</h2>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>組み込みシステムを<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">IoT</span></strong>化するのにまず思い浮かべるものが<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">無線モジュールを使ったWiFi化</span></strong>です。さまざまな無線モジュールがあるなかで、シリアル通信を介してWiFiが使用できるものとして電子工作でよく使われる<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32-WROOM-32をSTM32マイコンに組み込んでWiFi化する</span></strong>ことにします。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/ESP32.jpg" alt="" class="wp-image-5448" width="282" height="240" srcset="https://depfields.com/wp-content/uploads/2020/08/ESP32.jpg 364w, https://depfields.com/wp-content/uploads/2020/08/ESP32-300x255.jpg 300w" sizes="(max-width: 282px) 100vw, 282px" /><figcaption>ESP32モジュール（ESP32-WROOM-32)</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ESP32はWiFiやBluetoothに対応した無線モジュールですがそれ自体が高性能のマイコンで、電子工作で人気があるArduinoの開発環境を使ってプログラミングできるものです。ここではArduinoには関与せず、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">無線化モジュールとして扱う</span></strong>ことにします。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">無線モジュールESP32</span></strong>を使用して<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">Nucleoボード(STM32マイコン）をWiFiのIoT対応にする方法</span></strong>を解説します。大人気のESP32モジュール（ESP32-WROOM-32)ですが、ESP32自体をArduino開発環境でマイコンとして操作する解説が多く他のマイコンシステムを簡単にWiFi化する情報が少ない状況で比較的簡単にSTM32のWiFi化を実現して<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">端的にまとめてみました</span></strong>。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>いろいろ調べた結果、無線化モジュールとして使用する場合は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">シリアルUART通信</span></strong>で「<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ATコマンド</span></strong>」を送ってモジュールのモード設定したり、データを取得すればよいことがわかりました。ESP32は購入した直後にはこのATコマンドを使用することはできず、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ファームウェア（ATコマンド用）を書き込む必要</span></strong>があります。</p>
</div></div></div>



<div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img decoding="async" width="291" height="241" src="https://depfields.com/wp-content/uploads/2020/08/ESP32-DevKiTC.jpg" alt="" class="wp-image-5449 size-full"/></figure><div class="wp-block-media-text__content">
<p>この<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ファームウェア</span></strong>をPCから<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">シリアルUART通信でモジュールに書き込む</span></strong>のですが、始めて扱う場合はUSBシリアル変換モジュールが搭載された<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32-DevKitC</span></strong>を使うことをおすすめします。このボードではマイクロUSBポートから電源が供給でき、USBバスパワー5VをESP32用供給電源3.3Vに変換するレギュレータも搭載されているので気軽に使えて便利です。</p>
</div></div>



<h2 class="wp-block-heading">ATコマンド用ファームウェア</h2>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ATコマンドを使用すればシリアルUART通信でPCやマイコンからESP32をコントロールしてWiFi通信できることがわかりました。ESP32モジュールでATコマンドを使うことができるようにするために以下の手順によってATコマンド対応にします。</p>
</div></div></div>



<ol class="is-style-vk-numbered-square-mark"><li>　ATコマンド用<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ファームウェアをダウンロード</span></strong></li><li>　<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ファームウェアをフラッシュ書き込みツールで書き込み</span></strong>（マイクロUSB　<strong>UART0</strong>ポート）</li><li>　PCの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ターミナルソフトでATコマンドの動作確認</span></strong>（USB-UART変換ケーブル　<strong>UART2</strong>ポート）</li></ol>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ATコマンド用ファームウェアのダウンロードからATコマンドの動作確認までの手順詳細の解説につきましては当サイトの趣旨からそれますので割愛します。インターネットで「<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32　ATコマンド</span></strong>」などの検索で十分な情報が得られますので参考して実施してください。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32-DevKitC</span></strong>ではPCのUSBポートとシリアルUART通信でデータ通信を行うためにESP32-DevKitC内部のシリアル変換ICを利用します。このICはSILICON LAB社の「CP2102」が実装されていますので制御するための<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ドライバが必要</span></strong>です。はじめてESP32-DevKitCとPCをUSBケーブルで接続したときにUSBポートが認識されない場合は<strong><a href="https://jp.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers" target="_blank" aria-label="こちら (opens in a new tab)" rel="noreferrer noopener">こちら</a></strong>でOSにあった「Download for xxxx」の欄から「VCPダウンロード」を選択しダウンロードおよびインストールをしておいて下さい。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ESP32には他に<strong>UART1</strong>(ピン/ソケットSD2 RX /SD3 TX)があるのですが、デフォルトではこれらの端子にSPI通信が割与えられているので<strong>使用しません</strong>。</p>
</div></div></div>



<p><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32-WROOM-32のUART通信のデフォルト設定</span></strong><br>　<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ファームウェア転送用</span></strong>　<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">USART0</span></strong>:RXD0 RX/TXD0 TX<br>　<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ATコマンド用</span></strong>　<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">USART2</span></strong>:IO16 RX/IO17 TX<br>Baud rate:<strong>115200</strong>bps / Data siza:8/ Parity:None/ Stop bits:1</p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/ESP32-DevKiTC-connecttion-diagram.jpg" alt="" class="wp-image-5512" width="518" height="345" srcset="https://depfields.com/wp-content/uploads/2020/08/ESP32-DevKiTC-connecttion-diagram.jpg 518w, https://depfields.com/wp-content/uploads/2020/08/ESP32-DevKiTC-connecttion-diagram-300x200.jpg 300w" sizes="(max-width: 518px) 100vw, 518px" /><figcaption>PCとEXP32-DevKitCとの接続</figcaption></figure>



<div style="display: inline-block; background: #191970; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0px 0px;"><strong>ポイント</strong></div>
<div style="background: #ffffea; border-radius: 0px 10px 10px 10px; padding: 10px; border: 3px solid #191970;">
<p>ATコマンド用ファームウェアを転送すると<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">PCからATコマンドでESP32と通信できる</span></strong>ようになります。注意点は、ESP32の<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">UART0はファームウェア転送など書き込み用</span></strong>でATコマンドの送受信はできないことです。<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">ATコマンドはUART2にUSB-UART変換ケーブルを介してやり取り</span></strong>します。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<div style="background: #00ccff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>コラム</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #00ccff; border-radius: 0 0 10px 10px;">
<p>PCターミナルは慣れたものを使ってもらってよいのですが、このサイトでは「<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">TeraTerm</span></strong>」を使っています。シリアル通信の設定をEPS32のでデフォルト（Baud rate:<strong>115200</strong>bps / Data siza:8/ Parity:None/ Stop bits:1）に設定し、「設定」-「端末」での<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">改行コードの送信</span></strong>は<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">CR+LF</span></strong>としてリターンキーを打つとコードCRとLFが送信されるようにしてください。また、<strong>ローカルエコー</strong>にチェックを入れると打ち込んだ文字が返されるので気になる人はチェックを外してください。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/AT-command.jpg" alt="" class="wp-image-5526" width="434" height="353" srcset="https://depfields.com/wp-content/uploads/2020/08/AT-command.jpg 434w, https://depfields.com/wp-content/uploads/2020/08/AT-command-300x244.jpg 300w" sizes="(max-width: 434px) 100vw, 434px" /></figure>



<p>PCのシリアル通信設定を行ったターミナルソフトでコマンド"AT"を送ったときに"OK"の応答が得られれば成功です。</p>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<div style="background: #00ccff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>コラム</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #00ccff; border-radius: 0 0 10px 10px;">
<p>ESP32のシリアルUART通信をデフォルト値から変更することができます。コマンド<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">AT+UART_CUR?</span></strong>で現在の通信設定が応答されます。変更するには例えばコマンド<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">AT+UART_DEF=9600,8,1,0,0</span></strong>のようにパラメータを与えます。詳細は英文ですがESP32のATコマンド取説（<strong><a href="https://www.espressif.com/sites/default/files/documentation/esp32_at_instruction_set_and_examples_en.pdf" target="_blank" rel="noopener noreferrer">ESP32 AT Instruction Set</a></strong>）に記載しています。<br><strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">注意：誤った数値を設定すると以後通信できなくなる恐れがあります</span></strong>ので気をつけてください。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<h3 class="wp-block-heading">STA（ステーション）モード</h3>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>まず、事始めにESP32を<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">STA(ステーション）モードとしてWiFiに設定</span></strong>することにします。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">STA(ステーション)モード</span></strong>は無線ルーター（DHCPサーバー）からIPアドレスを割り当てられた端末として機能させるモードです。ここでは192.168.3.19のIPのアドレスが与えられたものとしています。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/Station-mode.jpg" alt="" class="wp-image-5543" width="389" height="280" srcset="https://depfields.com/wp-content/uploads/2020/08/Station-mode.jpg 389w, https://depfields.com/wp-content/uploads/2020/08/Station-mode-300x216.jpg 300w" sizes="(max-width: 389px) 100vw, 389px" /><figcaption>STA(ステーション）モード</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>PCでターミナルソフトを起動させてください。USBシリアル変換ケーブルをPCに接続していると仮想シリアルポート（下記の場合はCOM4)が認識されてますので選択します。<br>ファームウェアを書き込んだときに使用した<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32-DevKitCに搭載のUSBのポートではありません</span></strong>。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/teraterm-serial.jpg" alt="" class="wp-image-5511" width="507" height="373" srcset="https://depfields.com/wp-content/uploads/2020/08/teraterm-serial.jpg 650w, https://depfields.com/wp-content/uploads/2020/08/teraterm-serial-300x221.jpg 300w" sizes="(max-width: 507px) 100vw, 507px" /></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>これからターミナルから主要なATコマンドをESP32に送り込んでモードを書き込んだり、応答を確認したりします。まず、コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+GMR</span></strong>を送ってみてください。ESP32のATファームウェアバージョンが応答されます。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>次にESP32をSTAモードにするためにコマンド<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>AT+CWMODE=1</strong></span>を送ります。”１”がSTAモードです。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ESP32がSTA（ステーション）モードになったのでネットワークに参加するためにコマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CWJAP="SSID","PASSWORD</span>"</strong>を送信してください。SSIDとPASSWORDは使用している無線ルーターに合わせて<strong>SSID名</strong>と<strong>暗号キー</strong>を入力してください。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>”<strong>WIFI CONNECTED</strong>"の応答があったら、無線ルーターにつながりました（LANに参加）。割り振られたアドレス状況を確認するために、コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIFSR</span></strong>を送信するとIPアドレスとMACアドレスが応答されます。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/sta-mode-setting-1.jpg" alt="" class="wp-image-5673" width="513" height="447" srcset="https://depfields.com/wp-content/uploads/2020/08/sta-mode-setting-1.jpg 513w, https://depfields.com/wp-content/uploads/2020/08/sta-mode-setting-1-300x261.jpg 300w" sizes="(max-width: 513px) 100vw, 513px" /><figcaption>STAモードでのWiFi設定</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ここでPCのコマンドプロンプトで割り当てられたIPアドレスが有効であることを<strong><strong>p</strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ing</span></strong>コマンドを実行して接続確認をしてみます。コマンドプロンプトはWindowsのスタートメニューの「Windows システムツール」内の「<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">コマンドプロンプト</span></strong>」を選択するかメニュー検索で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">cmd.exe</span></strong>と入力すると表示されます。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ping</span></strong>コマンドのあとに割り振られたIPアドレスを"ping 192.168.3.19"のように入力して、アドレスが有効でネットワークに接続できると下記のような応答が返ってきます。これはルーター経由でPCとESP32が接続していることを意味しています。このようにネットワークに接続が開通している状態を「<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">pingが通る</span></strong>」といいます。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">コマンドpingは機器の接続状況を確認するのによく使われます</span></strong>。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/ping.jpg" alt="" class="wp-image-5548" width="517" height="327" srcset="https://depfields.com/wp-content/uploads/2020/08/ping.jpg 517w, https://depfields.com/wp-content/uploads/2020/08/ping-300x190.jpg 300w" sizes="(max-width: 517px) 100vw, 517px" /><figcaption>PCのコマンドプロンプトからpingを実行</figcaption></figure>



<p><span style="font-size: 20px;">STAモード設定まとめ</span></p>



<ol class="is-style-vk-numbered-square-mark"><li>コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CWMODE=1</span></strong>で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">STAモードに設定</span></strong></li><li>コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CWJAP="SSID","PASSWORD</span>"</strong>で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WiFi設定</span></strong></li></ol>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<h3 class="wp-block-heading">AP(アクセスポイント）モード</h3>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>STAモードでは家庭などにある無線ルーターをアクセスポイントしたネットワークに端末として参加するモードでした。今度は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32自体がアクセスポイントとなるAP（アクセスポイント)モードの設定</span></strong>をしてみましょう。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>このモードでは家庭や職場などの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WiFiが使えない状況</span></strong>でもESP32自体がアクセスポイントのマスターとして他のクラアントネットワーク機器にIPアドレスを割り振るDHCPサーバーの役割をしています。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/AP-mode.jpg" alt="" class="wp-image-5565" width="407" height="276" srcset="https://depfields.com/wp-content/uploads/2020/08/AP-mode.jpg 398w, https://depfields.com/wp-content/uploads/2020/08/AP-mode-300x204.jpg 300w" sizes="(max-width: 407px) 100vw, 407px" /><figcaption>AP（アクセスポイント）モード</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>STAモード設定と同様にPCでターミナルソフトを起動させてから、まず現在のモードの確認をするためにコマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CWMODE?</span></strong>を送ります。応答が"1"であったらSTAモード、"2"であったらAPモードです。（確認だけのコマンド）</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ESP32をAPモードにするためにはコマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CWMODE=２</span></strong>を送ります。”２”がAPモードでESP32では<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">softAPモード</span></strong>と読んでいます。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>APモードのアクセスポイントSSID名および暗号キー等（任意）を設定します。コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CWSAP="ESP32","12345678",5,3</span></strong>は順にSSID名、暗号キー、無線LANチャネルそして暗号種別です。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>最後の暗号種別は3は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WPA2_PSK</span></strong>です。他、０:open/1:WPA_PSK/4:WPA_WPA2_PSKです。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">暗号キーは暗号種別のルールに従ってください</span></strong>。WPA2_PSK指定時に暗号キーが8文字未満であるとエラーになります。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>割り振られたアドレス状況を確認するために、コマンドAT+CIFSRを送信するとIPアドレスとMACアドレスが応答されますので<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ネットワークIDとしてのIPアドレス</span></strong>が確認できます。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/ap-mode-setting.jpg" alt="" class="wp-image-5563" width="511" height="357" srcset="https://depfields.com/wp-content/uploads/2020/08/ap-mode-setting.jpg 511w, https://depfields.com/wp-content/uploads/2020/08/ap-mode-setting-300x210.jpg 300w" sizes="(max-width: 511px) 100vw, 511px" /><figcaption>APモードでのWiFi設定</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>これまでの設定で新しいESP32によるWiFiアクセスポイント（<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">SSID:ESP32</span></strong>)が作成できましたので、PCを"ESP32"に接続しましょう。作成した暗号キーを入力すれば接続できるはずですが、失敗するようでしたら<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>一旦</strong> <strong>アクセスポイント"</strong></span><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32"を削除</span></strong>して、もう一度試してください。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>WiFiアクセスポイントESP32に接続できましたら、コマンドプロンプトでpingが通っているかを確認してみましょう。下記の応答が返ってきたら接続は成功です。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/ping_ap.jpg" alt="" class="wp-image-5568" width="523" height="333" srcset="https://depfields.com/wp-content/uploads/2020/08/ping_ap.jpg 523w, https://depfields.com/wp-content/uploads/2020/08/ping_ap-300x191.jpg 300w" sizes="(max-width: 523px) 100vw, 523px" /><figcaption>PCのコマンドプロンプトからpingを実行</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>WiFiアクセスポイントESP32からPCへ割り振られたIPアドレスを確認するためにはコマンドプロンプトでコマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ipconfig</span></strong>を実行してください。下記のように自分のIPアドレス情報が返ってきます。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32がDHCPサーバーとしてクライアントであるPCへIPアドレスを割り振ったこと</span></strong>がわかります。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/ipconfig.jpg" alt="" class="wp-image-5567" width="552" height="355" srcset="https://depfields.com/wp-content/uploads/2020/08/ipconfig.jpg 648w, https://depfields.com/wp-content/uploads/2020/08/ipconfig-300x193.jpg 300w" sizes="(max-width: 552px) 100vw, 552px" /><figcaption>ipconfigで自分のIPアドレスを確認</figcaption></figure>



<p><span style="font-size: 20px;">AP(アクセスポイント）モード設定まとめ</span></p>



<ol class="is-style-vk-numbered-square-mark"><li>コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CWMODE=２</span></strong>で<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>APモードに設定</strong></span></li><li>コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CWSAP="ESP32","12345678",5,3</span></strong>で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WiFi設定</span></strong></li></ol>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<h2 class="wp-block-heading">TCPサーバーにしたESP32とPCとの通信</h2>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>これまではESP32をSTAモードもしくはAPモードに設定してクライアントあるいはサーバーとして立場の同じLAN（デフォルトゲートウェイが同じ）で他の機器（PCなど）と通信できる無線LAN環境を構成してきました。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>この状態ではpingが通って互いに同じネットワーク上にあることが確認できただけでまだ互いにLAN内の通信はできません。ESP32の通信をするためには<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">通信をする上でのサーバーとクライアントの関係を構築する必要</span></strong>があります。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ここでは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">EPS32をTCPサーバーとして構成</span></strong>し、同じLAN内のPCやスマホをクライアントとしてターミナルソフトから無線でアクセスするシステムを作り、LANで基本である<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">TCP通信をするための設定を解説</span></strong>していきます。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>TCP通信ができるようになると、例えば、PCのターミナルソフトで<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">IPアドレスととポートを指定</span></strong>すると<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">シリアル通信のように</span></strong>文字列のやり取りができるようになります。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/tcp-server.jpg" alt="" class="wp-image-5576" width="426" height="388" srcset="https://depfields.com/wp-content/uploads/2020/08/tcp-server.jpg 392w, https://depfields.com/wp-content/uploads/2020/08/tcp-server-300x274.jpg 300w" sizes="(max-width: 426px) 100vw, 426px" /><figcaption>ESP32がTCPサーバーの無線LAN通信</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>システムの構成はこれまでと基本的には同じなのですが、ATコマンドを<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">シリアル通信でESP32とやり取りするPC</span></strong>と<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">LAN内のネットワーククライアントとしたPC</span></strong>とは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">明示的にわけています</span></strong>。実際は共用してもかまいません。</p>
</div></div></div>





<h3 class="wp-block-heading">TCPサーバー設定</h3>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>TCPサーバーに設定する場合ははじめに<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">複数のコネクションに対応できるモード（マルチコネクションモード）に設定</span></strong>します。コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPMUX=1</span></strong>の"1":マルチコネクション、"0":シングルコネクションモード。ESP32はデフォルトがシングルコネクションモードですので<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>このコマンドを</strong></span><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">必ず実行</span></strong>します。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPSERVER=1,50000</span></strong>でTCPサーバーを生成します。1つ目の値が<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">"1"でサーバー生成、"0"でサーバー削除</span></strong>です。2つ目の値は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">TCPサーバーのポート番号</span></strong>です。「OK」の応答でTCPサーバーは起動しました。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">クライアント側の接続待ち</span></strong>状態になります。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/tcp-communication1.jpg" alt="" class="wp-image-5584" width="423" height="229" srcset="https://depfields.com/wp-content/uploads/2020/08/tcp-communication1.jpg 423w, https://depfields.com/wp-content/uploads/2020/08/tcp-communication1-300x162.jpg 300w" sizes="(max-width: 423px) 100vw, 423px" /><figcaption>ATコマンドでTCPサーバー生成と起動</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>PC等のクライアント側でターミナルソフトを起動して、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ホスト（TCPサーバーのIPアドレスとポート番号を指定</span></strong>してサーバー側に接続します。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/tcp-server-access.jpg" alt="" class="wp-image-5583" width="479" height="311" srcset="https://depfields.com/wp-content/uploads/2020/08/tcp-server-access.jpg 479w, https://depfields.com/wp-content/uploads/2020/08/tcp-server-access-300x195.jpg 300w" sizes="(max-width: 479px) 100vw, 479px" /><figcaption>ターミナルでクライアント側のTCP接続設定</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ターミナル上部に<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">TCPサーバー側のIPアドレスが表示されますと接続成功</span></strong>です。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>さっそくターミナルからTCPサーバー側へ文字列を送信してみましょう。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">”depfields”の9文字を入力してEnterキー</span></strong>を押すと、改行コードを含めて11文字を送信したことになります。この例ではターミナルをローカルエコーに設定していますので入力した文字が現れています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>TCPサーバー側ではクライアント側からの文字を受信すると"<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">+IPD,0,11:depfields</span></strong>"と表示されます。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">＋IPD</span></strong>は受信データであることを示し、コネクションIDが0に文字列と改行コードを含んだ合計11文字を受信したことを意味しています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>つぎにTCPサーバー側のATコマンド操作ターミナルから文字列を送信してみます。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPSEND=0,11</span></strong>はコネクションIDが0のリンクに対して11文字を送信するコマンドです。改行コード2文字を含んだ9文字のデータを送る場合のものです。コマンドが受理されると”<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">OK</span></strong>”が返されて、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">＞のプロンプト</span></strong>が表示されて入力待ちになっています。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>送信する文字は大文字で"<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">DEPFIELDS</span></strong>"としてリターンを押すと文字列はターミナル側へ送信されます。改行コードあわせて11文字です。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">Recv 11bytes</span></strong>と表示されたあとに<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">SEND　OK</span></strong>の応答があれば送信成功です。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>クライアント側のターミナルでは送られた文字列<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">"<strong>DEPFIELDS</strong></span>"が表示されているはずです。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/terminal-access.jpg" alt="" class="wp-image-5586" width="422" height="334" srcset="https://depfields.com/wp-content/uploads/2020/08/terminal-access.jpg 382w, https://depfields.com/wp-content/uploads/2020/08/terminal-access-300x238.jpg 300w" sizes="(max-width: 422px) 100vw, 422px" /><figcaption>クライアント側ターミナルで接続して文字列の送受信</figcaption></figure>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/tcp-communication2.jpg" alt="" class="wp-image-5585" width="437" height="285" srcset="https://depfields.com/wp-content/uploads/2020/08/tcp-communication2.jpg 437w, https://depfields.com/wp-content/uploads/2020/08/tcp-communication2-300x196.jpg 300w" sizes="(max-width: 437px) 100vw, 437px" /><figcaption>TCPサーバー側のATコマンド操作画面</figcaption></figure>



<p><span style="font-size: 20px;">TCPサーバー設定まとめ</span></p>



<ul class="is-style-vk-numbered-square-mark"><li>コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPMUX=1</span></strong>でマルチコネクション設定とする<br>（<strong>TCPサーバーの場合はマルチコネクションであること</strong>）</li><li>コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPSERVER=1,xxxx</span></strong>でTCPサーバー ポートxxxxを生成する</li></ul>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>今回は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ESP32をPCからATコマンドで操作</span></strong>してTCPサーバーにしてからTCPクライアントのPCとの通信をおこないました。次はいよいよPCの代わりに<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">マイコンがATコマンドを操作してESP32をTCPサーバーに設定</span></strong>してクライアントのPCやスマホから無線操作するシステムに挑戦します。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>そのまえに、ESP32を<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">TCPクライアント</span></strong>にする場合もありますので解説しておきます。クラウド上のサーバーにアクセスする場合などに使用します。</p>
</div></div></div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<h3 class="wp-block-heading">TCPクライアント設定</h3>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ESP32をTCPクライアントに設定することができます。通信プロトコルにおいてTCPソケット通信よりさらに上位のHTTPプロトコルを使用したHTTPサーバーにアクセスして<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WEB上のブラウザから操作するアプリの場合はこちら</span></strong>を使います。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p> TCPクライアントに設定する場合は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">単一のコネクションに対応できるモード（シングルコネクションモード）に設定</span></strong>します。コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPMUX=0</span></strong>の"0":マルチコネクション、"0":シングルコネクションモード。ESP32はデフォルトがシングルコネクションモードです<strong>。</strong> </p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p> コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPSTART="TCP","xxx.xxx.xxx.xxx",80</span></strong>で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">TCPクライアントを生成</span></strong>します。1つ目が<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">プロトコル</span></strong>を2つ目は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WEB上のHTTPサーバアドレス</span></strong>、3つ目がその<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ポート番号</span></strong>です。「OK」の応答でTCPクライアントは起動しました。 </p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>シングルコネクションモードの場合は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">透過モード</span></strong>というものが使用でき、ATコマンドによらず通常のシリアル通信のようなやりとりができるようになります。これには"<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPMODE=1</span></strong>"を実行しておきます。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>以後、文字列送信のために"<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPSEND</span></strong>"を送ると透過モードになるのでHTMLコードでWEBサーバとやり取りできるようになります。"+++"を受信すると透過モードは終了します。</p>
</div></div></div>



<p><span style="font-size: 20px;">TCPクライアント設定まとめ</span></p>



<ul class="is-style-vk-numbered-square-mark"><li>コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPMUX=０</span></strong>でシングルコネクション設定とする<br>（<strong>TCPクライアントの場合はシングルコネクションであること</strong>）</li><li>コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPSTART="TCP","xxx.xxx.xxx.xxx",80</span></strong>でTCPクライアントを生成する</li><li>コマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPMODE=1</span></strong>で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">透過モード</span></strong> に設定する</li></ul>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<h2 class="wp-block-heading">マイコンとESP32との接続</h2>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ESP32にATコマンド用ファームウェアを転送してPCとATコマンドで通信できるようになった段階で、今度はPCの代わりに<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">マイコンとの通信に挑戦</span></strong>です。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>PCのターミナルからではATコマンドを送ってESP32との通信はできるようになりましたが、他の実行環境であるマイコンからATコマンドをやりとりして、例えばターミナルのTCP通信ポートを開くところまではどうすればよいのでしょうか。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>これもわかってしまえば簡単ですが、種を明かせばPCのターミナルで行っているのと同じように<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ATコマンドそのものを文字列としてシリアル通信で送受信させればよい</span></strong>だけのことです。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ここではATコマンドのうちで主要なものを一部を取り上げて通信ポートを開いてデータのやりとりができるところまでを解説します。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/ESP32-with-MPU.jpg" alt="" class="wp-image-5829" width="456" height="286" srcset="https://depfields.com/wp-content/uploads/2020/09/ESP32-with-MPU.jpg 456w, https://depfields.com/wp-content/uploads/2020/09/ESP32-with-MPU-300x188.jpg 300w" sizes="(max-width: 456px) 100vw, 456px" /><figcaption> ESP32搭載マイコンで構成したTCPサーバーの無線LAN通信 </figcaption></figure>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/ESP32-with-nucleo.jpg" alt="" class="wp-image-5845" width="424" height="321" srcset="https://depfields.com/wp-content/uploads/2020/09/ESP32-with-nucleo.jpg 424w, https://depfields.com/wp-content/uploads/2020/09/ESP32-with-nucleo-300x227.jpg 300w" sizes="(max-width: 424px) 100vw, 424px" /><figcaption> ESP32とNucleo(STM32)配線 </figcaption></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<h3 class="wp-block-heading">マイコンプログラムによるTCPサーバー開通までの手順</h3>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name">めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ESP32をATコマンドでSTAモードかAPモードに設定して無線LAN環境のpingを通すまでは運転モードの設定がフラッシュに書き込まれますのでどの環境でも共通です。<br>マイコンを使った場合は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">コネクションモードの設定からマイコンのプログラムで自動化する</span></strong>イメージです。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/08/sample.png" alt="" class="wp-image-5644" width="643" height="453" srcset="https://depfields.com/wp-content/uploads/2020/08/sample.png 643w, https://depfields.com/wp-content/uploads/2020/08/sample-300x211.png 300w" sizes="(max-width: 643px) 100vw, 643px" /><figcaption>マイコンでのコマンド設定例</figcaption></figure>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>マイコンでESP32をATコマンドでTCPサーバーに設定してから無限ループ内でデータを一秒ごとに端末に送って表示させるサンプルです。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>PCでシリアル通信のターミナルソフトから設定するのと<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">基本的には同じ</span></strong>なのですが、マイコンプログラムでATコマンド操作を自動化するには注意すべきポイントがあります。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ターミナルから手動でATコマンドを実行させると正常に動作するのに同じ手順をマイコンプログラムで行うと問題が起こる場合があります。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-right vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>これは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">コマンド実行のための十分な応答の時間等がないために正常に動作できないでいること</span></strong>が原因であると考えられます。特に、プログラム起動後にはじめに実行したATコマンド転送で文字化けしていた問題があり、以降のコマンドが有効にならなかったことがありました。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-right vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>これを防ぐために<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ATコマンドの前後で十分に待ち時間を入れ</span></strong>さらに念の為にはじめのコマンドに限ってフェールセーフのために2度実行し確実に問題を回避すると正常に動作するようになりました。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-right vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>初めてATコマンドをマイコンプログラムで実行する場合にはまず、TCPサーバーが確実に起動し、ターミナルプログラムでアクセスしたい<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">IPアドレスとポートを指定してTCP通信が開通するまでを目指して</span></strong>ください。</p>
</div></div></div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<h3 class="wp-block-heading">アプリ内での文字列送信のポイント</h3>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>TCPサーバーにアクセスできポートが開通したらとりあえず一つの関門突破です。次は、アプリケーション内での文字列のやり取りです。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>文字列を送信するには直前にコマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPSEND=０,5</span></strong>を改行コード\r\nを付加して実行するといわゆる<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">送信待機状態</span></strong>になります。そこで送りたい文字列を<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">文字列送信関数（ここではUASART3_SendString関数）を実行</span></strong>させて送信実行します。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>シリアル通信のように送信したい文字列を送ってターミナルに表示させる簡単なことだけでもツボを押さえていなければなかなか安定して実現できません。筆者の経験では初めて文字列送信を扱ってシリアル通信のばあいと同様な結果を得るまでまる一日以上試行錯誤しました。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>文字列の送信を安定させるためのツボはわかってしまえば何でもないことですが、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">不安定であった原因は送信文字列の文字数が一定でなかったこと</span></strong>です。アプリケーション内で演算した変動する数値を文字列に変換してからターミナルへの送信であったため、桁数が不安定であったことが原因です。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>マイコンプログラムでなくPCのシリアル通信のターミナルソフトから手動で文字数がずれた場合のコマンドを送ってみてください。表示はかなり不安定となるのが確認できます。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>問題解決のために、数値の桁数に関わらず例えば最大３桁の数字を送りたい場合に文字変換して3文字に固定する関数(digit_conv関数）を自作してからは安定した表示ができるようになりました。</p>
</div></div></div>



<p><span style="font-size: 20px;">文字列送信のポイント</span></p>



<ol class="is-style-vk-numbered-square-mark"><li>文字列送信直前に文字数を指定したコマンド<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AT+CIPSEND=０,x</span></strong>を実行しておく。</li><li>文字列送信関数（ここではUSART3_Send_String関数）で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">実際に送信する文字数と厳密に一致させること</span></strong>。</li></ol>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>





<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<h3 class="wp-block-heading"> アプリ内での文字列受信のポイント </h3>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>PC、スマホなどのターミナルソフトから<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">文字列を受信してコマンドやデータとして扱う</span></strong>ことで、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">マイコンをリモートコントロール</span></strong>できるようになります。</p>
</div></div></div>



<div class="wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none"><div class="vk_balloon_icon"><figure><img decoding="async" class="vk_balloon_icon_image vk_balloon_icon_image-type-normal " src="https://depfields.com/wp-content/uploads/2020/05/instructor.jpg" alt=""/><figcaption class="vk_balloon_icon_name"><br>めかのとろ</figcaption></figure></div><div class="vk_balloon_content_outer"><div class="vk_balloon_content  "><span class="vk_balloon_content_before "></span><span class="vk_balloon_content_after "></span>
<p>ターミナルソフトで例えば文字列<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">”command"</span></strong>を入力するとESP32は "<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">+<strong>IPD,0,９:command</strong></span>"の文字列を応答として返すのでマイコン側では"<strong>:</strong>"以下 の<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">"command"を抽出</span></strong>してからアプリでコマンドやデータとして処理します。</p>
</div></div></div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<div style="background: #00ccff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>コラム</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #00ccff; border-radius: 0 0 10px 10px;">
<p><strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">ESP32をTCPサーバーに設定</span></strong>すると、<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">リモートのクライアント端末からターミナルソフトで文字列のやりとりができる</span></strong>ようになりますので<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">シリアル通信のように扱える</span></strong>ようになります。マイコンの無線化やIoTの第一歩と言えるでしょう。<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">TCP通信はインターネットのウェブブラウザから操作するWEBサーバーの基礎的なもの</span></strong>ですのでまずは使いこなしてください。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>


<div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://en.depfields.com/esp32-wifi/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img class="lkc-favicon" src="https://www.google.com/s2/favicons?domain=en.depfields.com" alt="" width=16 height=16 /><div class="lkc-domain">Most Powerful Bible to Become an Embedded Engineer</div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/8ff76a668a6d963d22bbb589c79c667b49496741428ce36be7f8402aa841f22b.jpeg" alt="" /></figure><div class="lkc-title"><div class="lkc-title-text">ESP32 makes STM32Nucleo easily WiFi-enabled | Most Powerful Bible to Become a...</div></div><div class="lkc-url">https://en.depfields.com/esp32-wifi/</div><div class="lkc-excerpt">Explains how to make STM32 WiFi-enabled using the wireless module ESP32 (ESP32-WROOM-32). Although ESP32 module is very popular and there are many explanations to operate ESP32 itself as MCU,  there is little information to easily conver</div></div><div class="clear"></div></div></a></div></div>



<p></p><p>The post <a href="https://depfields.com/esp32-wifi/">ESP32でNucleo(STM32)を簡単にWiFi対応に</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
