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

<image>
	<url>https://depfields.com/wp-content/uploads/2020/07/cropped-favicon-1-32x32.png</url>
	<title>ARMマイコン入門 | 即戦力モノづくり!エンジニアへの道標</title>
	<link>https://depfields.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>マイコンに実装したWebSocketの超高速リアルタイムモニター【STM32Nucleo】</title>
		<link>https://depfields.com/websocket-highspeed/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=websocket-highspeed</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Fri, 18 Feb 2022 00:23:16 +0000</pubDate>
				<category><![CDATA[マイコンのIoT化]]></category>
		<category><![CDATA[イーサネット]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[ソケット通信]]></category>
		<category><![CDATA[ブラウザ]]></category>
		<category><![CDATA[TCP]]></category>
		<category><![CDATA[HTTP]]></category>
		<category><![CDATA[websocket]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=11182</guid>

					<description><![CDATA[<p>WebSocketを実装したマイコン(STM32Nucleo)からブラウザへデータを送ってモニター表示させるところまではなんとかできるようになったのですが、更新レートをあげると不安定で停止したり、切断したりする現象がおき [&#8230;]</p>
<p>The post <a href="https://depfields.com/websocket-highspeed/">マイコンに実装したWebSocketの超高速リアルタイムモニター【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img fetchpriority="high" decoding="async" width="640" height="324" src="https://depfields.com/wp-content/uploads/2022/02/lights-g4237ecfe8_640.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="https://depfields.com/wp-content/uploads/2022/02/lights-g4237ecfe8_640.jpg 640w, https://depfields.com/wp-content/uploads/2022/02/lights-g4237ecfe8_640-300x152.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /></div>
<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom"><strong><a href="https://depfields.com/websocket/" target="_blank" rel="noreferrer noopener" title="マイコンに実装したWebSocketによる双方向通信【STM32Nucleo】">WebSocketを実装したマイコン(STM32Nucleo)</a></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>



<p class="vk_block-margin-sm--margin-bottom">当初はブラウザやWebSocketの仕様によるものかと思っていたのですが、原因が判明し、解決したところ<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">もとの100倍</span></strong>近いほぼ限界(マイコンの設定による)のレートで更新できるようになりました。これぞWebSocketプロトコルの利点を活かした通信です。</p>



<p class="vk_block-margin-sm--margin-bottom">原因は組み込み系WebSoket通信特有の要因と思われるハードウェアの設定によるものだったわけですが改善後、WebSocket通信が安定し、下記動画では<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">サンプリング1msの超高速レート</span></strong>でデータ更新を行っています。条件によるかもしれませんが<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ブラウザやWebSocket自体にはほぼ表示速度に制約はない</span></strong>と考えてよさそうです。</p>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"></div></div>



<div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:69% auto"><figure class="wp-block-media-text__media"><video controls src="https://depfields.com/wp-content/uploads/2022/02/websocket_count4.mp4"></video></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size"></p>
</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>実際に1ms周期でモニターさせることはないと思いますが、<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">WebSocketでマイコンとブラウザ間でほぼ制約のない任意の周期でデータのやり取りができる</span></strong>ことが判明したところが大きな収穫です。</p>
</div>


<div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://en.depfields.com/websocket-highspeed/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img decoding="async" 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 decoding="async" class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/95b1b90df495109fdd0adffef84914f322b92da945234cbd2f10240bf129aa51.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">Ultra-highspeed real-time monitor of WebSocket on Microcontroller [STM32Nucle...</div><div class="lkc-url" title="https://en.depfields.com/websocket-highspeed/">https://en.depfields.com/websocket-highspeed/</div><div class="lkc-excerpt">I managed to send data from a microcontroller (STM32Nucleo) implementing WebSocket to a browser and display it on the monitor, but when I increased the update rate, the system became unstable and would stop or disconnect.At first I tho</div></div><div class="clear">
							</div>
						</div></a></div></div>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<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></div><p>The post <a href="https://depfields.com/websocket-highspeed/">マイコンに実装したWebSocketの超高速リアルタイムモニター【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		<enclosure url="https://depfields.com/wp-content/uploads/2022/02/websocket_count4.mp4" length="1403290" type="video/mp4" />

			</item>
		<item>
		<title>マイコンに実装したWebSocketによる双方向通信【STM32Nucleo】</title>
		<link>https://depfields.com/websocket/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=websocket</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Mon, 14 Feb 2022 07:28:11 +0000</pubDate>
				<category><![CDATA[最新記事]]></category>
		<category><![CDATA[マイコンのIoT化]]></category>
		<category><![CDATA[イーサネット]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[ソケット通信]]></category>
		<category><![CDATA[webサーバー]]></category>
		<category><![CDATA[ブラウザ]]></category>
		<category><![CDATA[TCP]]></category>
		<category><![CDATA[HTTP]]></category>
		<category><![CDATA[websocket]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=10873</guid>

					<description><![CDATA[<p>前回の記事「HTTPプロトコルで構成したWEBサーバーを搭載したマイコンシステム」ではマイコンにWEBサーバーを搭載して専用のアプリを使用しなくてもPCやスマホ等のブラウザからアクセスすることでより身近に機器のIoT化に [&#8230;]</p>
<p>The post <a href="https://depfields.com/websocket/">マイコンに実装したWebSocketによる双方向通信【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img decoding="async" width="1024" height="682" src="https://depfields.com/wp-content/uploads/2022/02/handshake-1024x682.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="https://depfields.com/wp-content/uploads/2022/02/handshake-1024x682.jpg 1024w, https://depfields.com/wp-content/uploads/2022/02/handshake-300x200.jpg 300w, https://depfields.com/wp-content/uploads/2022/02/handshake-768x512.jpg 768w, https://depfields.com/wp-content/uploads/2022/02/handshake-1536x1023.jpg 1536w, https://depfields.com/wp-content/uploads/2022/02/handshake.jpg 780w" sizes="(max-width: 1024px) 100vw, 1024px" /></div>
<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">前回の記事「<strong><a href="https://depfields.com/websocket/" target="_blank" rel="noreferrer noopener" title="マイコンに実装したWebSocketによる双方向通信【STM32Nucleo】">HTTPプロトコルで構成したWEBサーバーを搭載したマイコンシステム</a></strong>」ではマイコンにWEBサーバーを搭載して専用のアプリを使用しなくてもPCやスマホ等のブラウザからアクセスすることでより身近に機器のIoT化に発展させる方法を解説しました。</p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">ブラウザは通常HTTPプロトコルに従って機器と通信しているのですが、基本的に<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>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">HTTPプロトコルだけで機器内のデータをブラウザに送信して<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>(Comet, SSE等)なのですが、HTTPではちょっとしたデータを送るにも大きなサイズのヘッダを付加させるために無駄も多い通信プロトコルです。</p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">そこで、このHTTPの欠点を補う別のプロトコルである<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WebSocke</span></strong>を使うとブラウザと機器間であたかも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">双方向通信ができる</span></strong>ようになるため、マイコンにWebSocketを実装したいと思います。WebSocket通信は敷居が高くちょっとしたアプリには導入しにくいところを具体的な事例で解説し、身近に利用できることを目指しています。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img decoding="async" width="400" height="364" src="https://depfields.com/wp-content/uploads/2022/02/http-protocol.png" alt="" class="wp-image-10898" srcset="https://depfields.com/wp-content/uploads/2022/02/http-protocol.png 400w, https://depfields.com/wp-content/uploads/2022/02/http-protocol-300x273.png 300w" sizes="(max-width: 400px) 100vw, 400px" /><figcaption class="wp-element-caption">HTTPプロトコル</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img decoding="async" width="395" height="365" src="https://depfields.com/wp-content/uploads/2022/02/websocket-protocol.png" alt="" class="wp-image-10901" srcset="https://depfields.com/wp-content/uploads/2022/02/websocket-protocol.png 395w, https://depfields.com/wp-content/uploads/2022/02/websocket-protocol-300x277.png 300w" sizes="(max-width: 395px) 100vw, 395px" /><figcaption class="wp-element-caption">WebSocketプロトコル</figcaption></figure>
</div>
</div>







<h2 class="wp-block-heading">WebSocketとは</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">WebSocket</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>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>WebSocketはそう新しいプロトコルでもないのですが、使用するにはブラウザが対応していることが前提です。現在では身近なブラウザではほぼ大部分が対応しているために問題はありません。</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>WebSocketの汎用的な解説詳細は専門のWEBエンジニアが得意とするところで、ここではどちらかといえば番外で応用する側ですので組み込みマイコンシステムで実現するにあたり<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>WebSocketを実装するにあたっては組み込み系のエンジニアにとってはHTMLとJavaScriptの使い勝手が組み込みプログラミングとは少し違うため慣れていない場合は苦労するのではないでしょうか。</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>世に出回っているWebsocket情報のほとんどがWEB上での記事に関するもので、組み込みマイコンにWebSocketを適用した例はWiFiモジュールESPシリーズを搭載したAruduino系のものしか見当たりません。<br>WEB上のものであれば、ファイルシステムが利用できるために、<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">Node.jsのようなプラットフォーム</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>。また、Arduino系の開発環境であれば情報も豊富でライブラリが利用できますが、STM32マイコンのCortex-M3系では適用例があまりみあたらず、ライブラリ等はあることはありますが情報も少なく使いこなすことは困難のため、すべてを新規に構築する必要があるところが苦労した点です。</p>
</div>



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



<h2 class="wp-block-heading">WebSocketを確立するまでの流れ</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">WebSocketを開始するきっかけ</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>HTMLの中に埋め込んだ<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">JabaScriptで記述したWebSocketリクエストを送る</span></strong>ことです。これはHTMLページを起動するときにリクエストを発行してもよいし、ページ内に作成した接続開始ボタンを押したときにリクエストを発行する仕様にしてもよいです。 </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>WebSocket通信はしくみを理解するのはそう難しくはないですが、初めての実装は結構大変です。実装での<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">WebSocketキー</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">HTMLとJavaScriptを駆使するだけ</span></strong>ですので組み込み系の人にとってはちょっとなじみは薄いかもしれませんがWEBプログラミングに精通している人ならばなんのことはないと思われます。 </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>それではWebSocket通信のコネクション確立までの手順を確認していきます。</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>以下の図がブラウザからサーバーにアクセスするところから始まるWebSocketのコネクション確立までの流れです。</p>
</div></div></div>



<figure class="wp-block-image size-large"><a href="https://depfields.com/wp-content/uploads/2022/02/websocket_flow1.png"><img decoding="async" width="508" height="581" src="https://depfields.com/wp-content/uploads/2022/02/websocket_flow1.png" alt="" class="wp-image-11319" srcset="https://depfields.com/wp-content/uploads/2022/02/websocket_flow1.png 508w, https://depfields.com/wp-content/uploads/2022/02/websocket_flow1-262x300.png 262w" sizes="(max-width: 508px) 100vw, 508px" /></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> ① まず通常のようにサーバーにアクセスするためにブラウザにIPアドレス/ポートを指定するとブラウザからサーバーへ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>② サーバーはブラウザからGETメソッドを受けて、レスポンスを返すのですが、その中にJavaScriptで記述したWebSocketを起動するためのリクエストを埋め込んでおきます。<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>③ 数秒おいてからブラウザはサーバーから送られたレスポンス内のJavaScriptを実行して<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WebSocketキー</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>をサーバーに送ります。<br></p>
</div></div></div>



<figure class="wp-block-image size-full"><a href="https://depfields.com/wp-content/uploads/2022/02/websocket_flow2.png"><img decoding="async" width="514" height="1096" src="https://depfields.com/wp-content/uploads/2022/02/websocket_flow2.png" alt="" class="wp-image-10909" srcset="https://depfields.com/wp-content/uploads/2022/02/websocket_flow2.png 514w, https://depfields.com/wp-content/uploads/2022/02/websocket_flow2-141x300.png 141w, https://depfields.com/wp-content/uploads/2022/02/websocket_flow2-480x1024.png 480w" sizes="(max-width: 514px) 100vw, 514px" /></a></figure>



<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">めかのとろ</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>④ サーバーではブラウザからのリクエストがWebSocketであることを認知すると<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WebSocketキー</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-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">めかのとろ</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">WebSocketコネクションを確立し、オープンイベントを発火</span></strong>します。</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">めかのとろ</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">サーバーとブラウザはWebsocketプロトコルによる双方向通信ができる</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 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">イベント駆動型プログラミング</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>というそうです。</p>
</div>



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



<h3 class="wp-block-heading">WebSocketリクエストを埋め込んだウェブページ</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>WebSocketを開始する場合はブラウザからHTTPリクエストを受け取った後にレスポンスの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">メッセージボディにJavaScriptでWebSocketリクエストを埋め込む</span></strong>ところが通常の場合と異なります。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" width="492" height="276" src="https://depfields.com/wp-content/uploads/2022/02/http_response.png" alt="" class="wp-image-11155" style="width:452px;height:270px" srcset="https://depfields.com/wp-content/uploads/2022/02/http_response.png 492w, https://depfields.com/wp-content/uploads/2022/02/http_response-300x168.png 300w, https://depfields.com/wp-content/uploads/2022/02/http_response-320x180.png 320w" sizes="(max-width: 492px) 100vw, 492px" /><figcaption class="wp-element-caption"> WebSocketリクエストを埋め込んだ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>WebSocketを開始するためのコードは大体フォーマットは決まっていて、WebSocketオブジェクトを生成することから始めます。<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">wsocket</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>下記のJavaScript記述したWebSocketリクエストのコードをリクエストのヘッダー部に埋め込んでおきます。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" width="503" height="384" src="https://depfields.com/wp-content/uploads/2022/02/websocket_request.png" alt="" class="wp-image-11157" style="width:503px;height:384px" srcset="https://depfields.com/wp-content/uploads/2022/02/websocket_request.png 503w, https://depfields.com/wp-content/uploads/2022/02/websocket_request-300x229.png 300w" sizes="(max-width: 503px) 100vw, 503px" /><figcaption class="wp-element-caption">   WebSocketリクエストコード </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><strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">WebSocketイベント</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>でWebSocketオブジェク生成時に同時に登録します。あらかじめイベントハンドラ内に定義しておいた内容は、WebSocket実行時、下記のイベントのたびに発生します。</p>
</div>



<ul class="wp-block-list">
<li><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">openイベント</span></strong>：onopenイベントハンドラプロパティ　<br>WebSocketのコネクションが開かれたときに発生</li>



<li><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">closeイベント</span></strong>：oncloseイベントハンドラプロパティ<br>WebSocketのコネクションが切断したときに発生</li>



<li><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">messageイベント</span></strong>：onmessageイベントハンドラプロパティ<br>WebSocketを通してデータを受信したときに発生</li>



<li><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">errorイベント</span></strong>：onerrorイベントハンドラプロパティ <br>WebSocketのコネクションがエラーにより切断したときに発生</li>
</ul>



<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><strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">WebSocketメソッド</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">WebSocketコネクション切断</span></strong>を行う場合に実行します。</p>
</div>



<ul class="wp-block-list">
<li><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">sendメソッド</span></strong>：wsocket.send(data)はデータを送信するためのもの</li>



<li><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">closeメソッド</span></strong>：wsocket.close()はWebSocketコネクションを切断するためのもの<br></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>WebSocketイベントとメソッドはJavaScriptのコードで記述し、アプリケーションに応じた処理内容にします。</p>
</div></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>その他、接続状態を確認するためのプロパティ<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">readyState</span></strong>があり、接続状態をモニターして切断時の処理などに利用できます。</p>
</div>



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



<p>0: CONNECTING　まだコネクションが確立されていない状態<br>1: OPEN コネクションが確立されている状態<br>2: CLOSING コネクションが閉じる過程にある状態<br>3: CLOSED コネクションが閉じている状態<br>例：var connectionstate=wsocket.readyState  //0 - 3</p>



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



<h3 class="wp-block-heading">WebSocketキーからアクセスキー生成</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>ブラウザ側でWebSocketリクエストコードを実行するとサーバー側へWebSocketキーを含んだ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>WebSocketコネクション確立のための最大のポイントがブラウザから渡された<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WebSocketキーからアクセスキーを生成</span></strong>するところです。</p>
</div></div></div>



<figure class="wp-block-image size-full"><img decoding="async" width="366" height="140" src="https://depfields.com/wp-content/uploads/2022/02/websocket_request2.png" alt="" class="wp-image-10925" srcset="https://depfields.com/wp-content/uploads/2022/02/websocket_request2.png 366w, https://depfields.com/wp-content/uploads/2022/02/websocket_request2-300x115.png 300w" sizes="(max-width: 366px) 100vw, 366px" /><figcaption class="wp-element-caption">ブラウザが発行するWebSocketキー</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">24文字のコード</span></strong>がWebSocketコネクションのために<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ブラウザが発行したキー</span></strong>です。 一例としてサーバーは受信したGETリクエストの空白前のヘッド部に”<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">Sec-WebSocket-Key</span>”</strong>があればWebSocketリクエストと認識し、その後に続く<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">24文字分のキー</span></strong>(<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">xxx...xxx==</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">WebSocketキー</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>アクセスキーを言葉で表現すると「リクエストで与えられたブラウザが生成したキーに固定値の"258EAFA5-E914-47DA-95CA-C5AB0DC85B11"を連結して、SHA-1ハッシュと呼ばれる暗号化を行い、Base64エンコードを行った値」となっています。 </p>
</div></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>アクセスキーの定義を初めて目にするといったい何のことかはわかりにくいのですが、解説すると、ブラウザから与えられたキーに<strong>G<span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">UIDと呼ばれるコードを連結</span></strong>させたあとに、<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">SHA1方式で暗号化して20桁のハッシュ値を生成</span></strong>し、さらに<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">BASE64エンコードで符号化</span></strong>するということです。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-md--height"></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">ハッシュ</span></strong>、<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">SHA1</span></strong>や<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">BASE64</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>だとわかってからは何をすべきかようやくわかったのですが、暗号化の内容自体は無機質な性質のものでいまだによくわかりません。</p>
</div>



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



<h3 class="wp-block-heading">ハッシュ値およびBASE64エンコード値生成手順</h3>



<ol class="is-style-vk-numbered-square-mark wp-block-list">
<li>ブラウザが生成するキー:<br>リクエストヘッダから<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">hqkH4S/djHSSovAPaDdycg==</span></strong>のみ抽出する</li>



<li>GUID連結(標準関数strcatを使用):<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 style="color:#cf2e2e" class="tadv-color"><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">GUID</span></span><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">を連結</span></strong>し、<strong>hqkH4S/djHSSovAPaDdycg==<span style="color:#cf2e2e" class="tadv-color"><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">258EAFA5-E914-47DA-95CA-C5AB0DC85B11</span></span></strong>とする</li>



<li>ハッシュ値SHA1(20桁40文字16進数表示)生成(ハッシュ化):<br><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">GUID連結したキー</span></strong>を<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">SHA1ハッシュ化</span></strong>すると<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">1c10aa3dd498c5bfb39a95c5c10277e6770f28c1</span></strong>（バイナリ/HEX）が得られる</li>



<li>ハッシュ値20桁をBASE64エンコード(符号化):<br> <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">20桁のSHA1ハッシュ値</span></strong>を<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">BASE64と呼ばれる符号化</span></strong>をすると<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">HBCqPdSYxb+zmpXFwQJ35ncPKME=</span></strong>（28文字テキスト）が得られる</li>
</ol>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-sm--height"></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>アクセスキーを生成する手順は上記の流れですが、SHA1ハッシュ値を生成するアルゴリズムは難解のため、これすべてを自力でするのではなくどこかの汎用的なライブラリを利用すべきです。</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>BASE64エンコードに関しては内容はそう難解ではありませんが、これもライブラリ情報は多いため、利用するほうが得策かもしれません。</p>
</div></div></div>



<div style="display: inline-block; background: #191970; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0px 0px;"><strong>ポイント1</strong></div>
<div style="background: #ffffea; border-radius: 0px 10px 10px 10px; padding: 10px; border: 3px solid #191970;">
<p><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">ハッシュ化処理はバイナリ(HEX)</span></strong>で行っていることを意識してください。</p>
</div>



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



<div style="display: inline-block; background: #191970; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0px 0px;"><strong>ポイント2</strong></div>
<div style="background: #ffffea; border-radius: 0px 10px 10px 10px; padding: 10px; border: 3px solid #191970;">
<p><strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">WebSocketキーに対するアクセスキーの正当性</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>確認できます。</p>
</div>



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



<h3 class="wp-block-heading">WebSocketコネクション確立</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>アクセスキーが生成できたら、WebSocketコネクション確立のための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>レスポンスのフォーマットは下例のとおりでよいと思います。レスポンス一行目のステータスラインは"<strong>HTTP/1.1 101 Switching Protocols</strong>"と"<strong>HTTP/1.1 101 OK</strong>"のどちらでも機能するようです。 </p>
</div></div></div>



<figure class="wp-block-image size-full"><img decoding="async" width="422" height="96" src="https://depfields.com/wp-content/uploads/2022/02/websocket_response.png" alt="" class="wp-image-10935" srcset="https://depfields.com/wp-content/uploads/2022/02/websocket_response.png 422w, https://depfields.com/wp-content/uploads/2022/02/websocket_response-300x68.png 300w" sizes="(max-width: 422px) 100vw, 422px" /><figcaption class="wp-element-caption">アクセスキーを付加した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>生成したアクセスキーが有効であることがブラウザで認識されると<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WebSocketコネクションが確立</span></strong>し、WebSocketプロトコルによる双方向通信が始まります。いわゆる<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><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>確立するとopenイベントが発火</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>されます。例えばonopenイベントで”Websocket Connect!!"のメッセージを表示させる処理など記述しておけばよいでしょう。</p>
</div></div></div>



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



<h2 class="wp-block-heading">WebSocketによるデータの送受信方法</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>WebSocketコネクションが確立すると<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">任意のタイミングでブラウザ、サーバー間で双方向通信ができる</span></strong>ようになります。WebSocket通信では送受信データには<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">WebSocketデータフレーム</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>データフレームの詳細は下記リンクのサイトで確認してみてください。</p>
</div></div></div>



<p>引用：<a href="https://triple-underscore.github.io/RFC6455-ja.html#section-5" target="_blank" aria-label=" (opens in a new tab)" rel="noreferrer noopener">RFC6455　The WebSocket Protocol</a></p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2022/02/dataframe.png" alt="" class="wp-image-10962" style="width:580px;height:290px"/><figcaption class="wp-element-caption">WebSocketデータフレーム</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>一度に送るデータが127文字以下でテキストかバイナリに限定する場合は比較的単純です。</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">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>および<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><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>し、<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>言葉での説明はわかりにくいのですが、送受信するデータの具体的な適用例で確認すれば理解しやすいと思いますので、送信、受信の場合で解説していきます。</p>
</div></div></div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-md--height"></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">テキスト文字列"test"を送信</span></strong>する場合で確認します。送受信は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">sendメソッドを使用</span></strong>します。</p>
</div></div></div>



<p> sendメソッド　<strong>wsocket.send(”test") </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>4文字テキストの場合、ブラウザは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">10バイト分のWebSocketデータフレーム</span></strong>を送信します。サーバー側で受信する<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">TCPデータバッファをdata_buffer[]</span></strong>とすると実際にこの受信バッファに読み込まれるデータの例は以下のようになります。</p>
</div></div></div>



<figure class="wp-block-image size-full"><a href="https://depfields.com/wp-content/uploads/2022/02/brawser_tx.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2022/02/brawser_tx.png" alt="" class="wp-image-11016"/></a><figcaption class="wp-element-caption"> ブラウザが”text”を送信した場合のデータフレーム </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">4文字テキストデータ</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>なので1番目バイトブロック<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">data_buffer[0]</span></strong>は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">先頭ビットFINは1</span></strong>、テキストデータのため<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">opcodeは1</span></strong>となるので16進数表記で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">0x81</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>2番目バイトブロック<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">data_buffer[1]</span></strong>は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ブラウザからのデータでマスク付きなので先頭ビットMASKは1</span></strong>、データの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">payload長は4</span></strong>なので16進数表記で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">0x84</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>3-6番目バイトブロック<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%, rgba(255, 253, 107, 0.7) 0px);" class="vk_highlighter"><b>data_buffer[2]</b></span><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">-<strong>[5]</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>です<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>7番目以降のバイトブロック<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%, rgba(255, 253, 107, 0.7) 0px);" class="vk_highlighter"><b>data_buffer[6]</b></span><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">-[9]</span></strong> の文字数分がブラウザから送信するテキストデータにマスクでコード化されたものです。コード化したデータはマスクキーを使用して復号することで<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">抽出データunmasked_str[i]</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">抽出データunmasked_str[i]</span></strong>は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">Mask_Key[i]</span></strong>と<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">masked_data[i]</span></strong>の<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">XOR</span></strong>(論理演算)によりUnMask(復号)して取得します。</p>
</div></div></div>



<p>  &nbsp;<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">unmasked_str[i]=Mask_Key[i % 4]^masked_data[i]</span></strong>よりデータ取得</p>



<figure class="wp-block-image size-full"><a href="https://depfields.com/wp-content/uploads/2022/02/unmasked-data.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2022/02/unmasked-data.png" alt="" class="wp-image-11017"/></a><figcaption class="wp-element-caption">復号したデータ</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">closeメソッドでwsocket.close()を実行した場合</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">6バイト分のデータフレーム</span></strong>です。最初のバイトブロックの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">opcodeがcloseメソッドを実行したときは0x8</span></strong>となっています。マスクキーも送信されてきますがここでは意味はありません。</p>
</div></div></div>



<figure class="wp-block-image size-full"><a href="https://depfields.com/wp-content/uploads/2022/02/brawser_close.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2022/02/brawser_close.png" alt="" class="wp-image-11018"/></a><figcaption class="wp-element-caption"> ブラウザでcloseメソッドを実行した場合のデータフレーム  </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">先頭のバイトブロックdata_buffer[0]が0x88</span></strong>であればブラウザで<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">closeメソッドを実行</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>WebSocketの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">opcode</span></strong>には、他に<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">0x9(Ping)</span></strong>, <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">0xA(Pong)</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>実際にやり取りされる具体的なデータで確認していくとすぐに理解できたのではないでしょうか。次はサーバーからの送信を確認していきます。</p>
</div></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>WebSocket通信ではTCPソケット通信と同様に任意のタイミングでブラウザからのデータを受信することになるため、<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">TCP受信処理においてWebSocketデータに適切に対応</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>ようにしておきます。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-md--height"></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">テキスト文字列"test"をブラウザに送信する場合で動作を確認</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>サーバー内のテキストデータ*str_send="test"をブラウザに送信して表示させる場合で確認していきます。</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">4文字テキスト</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">WebSocketデータフレーム</span></strong>の1番目と2番目バイトブロックに送信するデータのフォーマットを指定して、つづいてテキストデータを送信するだけです。</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プロトコルに比べて送信時は特に<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ヘッダが小さいため送信する情報量が小さくてすむ</span></strong>のが特徴です。送信データが小さいものほど差は顕著です。<br></p>
</div></div></div>



<figure class="wp-block-image size-full"><img decoding="async" src="https://depfields.com/wp-content/uploads/2022/02/server_tx.png" alt="" class="wp-image-11019"/><figcaption class="wp-element-caption"> サーバーが"text"を送信した場合のデータフレーム  </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のsend関数(TCP処理系により異なる)で送信します。  </p>
</div></div></div>



<figure class="wp-block-image size-full"><a href="https://depfields.com/wp-content/uploads/2022/02/server_tx_cmd.png"><img decoding="async" width="461" height="84" src="https://depfields.com/wp-content/uploads/2022/02/server_tx_cmd.png" alt="" class="wp-image-11098" srcset="https://depfields.com/wp-content/uploads/2022/02/server_tx_cmd.png 461w, https://depfields.com/wp-content/uploads/2022/02/server_tx_cmd-300x55.png 300w" sizes="(max-width: 461px) 100vw, 461px" /></a><figcaption class="wp-element-caption"> サーバーからの送信コマンド </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">データを受信したときにonmessageイベントが発火</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>これらの送信ブロックを任意のタイミングで送信してブラウザに反映させることができるのがWebSoketの特徴です。</p>
</div></div></div>



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



<h2 class="wp-block-heading">WebSocketテストプログラム</h2>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-sm--height"></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>



<figure class="wp-block-image size-large"><img decoding="async" width="666" height="399" src="https://depfields.com/wp-content/uploads/2022/02/wiring_w5500.png" alt="" class="wp-image-10887" srcset="https://depfields.com/wp-content/uploads/2022/02/wiring_w5500.png 666w, https://depfields.com/wp-content/uploads/2022/02/wiring_w5500-300x180.png 300w" sizes="(max-width: 666px) 100vw, 666px" /></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>ブラウザからサーバーのIPアドレス/ポートを指定するとボディメッセージに記述したHTMLページが開きます。</p>
</div></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>前回の記事と同様にファイルシステムのないマイコンの場合ですので、プログラミングにおいてサーバからブラウザへ送信する<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">HTMLはすべてハードコーディング</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>です。</p>
</div>



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



<figure class="wp-block-image size-large"><img decoding="async" width="624" height="512" src="https://depfields.com/wp-content/uploads/2022/02/websocket_test1.png" alt="" class="wp-image-10883" srcset="https://depfields.com/wp-content/uploads/2022/02/websocket_test1.png 624w, https://depfields.com/wp-content/uploads/2022/02/websocket_test1-300x246.png 300w" sizes="(max-width: 624px) 100vw, 624px" /></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>WebSocketコネクションを確立するために"Connect"ボタンを押します。このサンプルでは”Connect"ボタンを押してから<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WebSocketリクエスト</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>WebSocketコネクションが確立すると発火するopenイベント内に"Websocket Connectioned!!"を表示するようにしています。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="616" height="504" src="https://depfields.com/wp-content/uploads/2022/02/websocket_test2.png" alt="" class="wp-image-10884" srcset="https://depfields.com/wp-content/uploads/2022/02/websocket_test2.png 616w, https://depfields.com/wp-content/uploads/2022/02/websocket_test2-300x245.png 300w" sizes="(max-width: 616px) 100vw, 616px" /></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>HTMLのスライダーを操作すると<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">JavaSriptで設定したデータ範囲の数値が"Slider output"に表示</span></strong>されます。これはブラウザ側で生成した値で送信するデータですのでWebSocketコネクション確立にかかわらず表示されます。</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>WebSocketコネクションが確立した状態でスライダーを操作すると同時に<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">"NUCLEO Loopback"に数値が表示</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">WebSocketによる双方向通信</span></strong>の特徴です。 </p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="619" height="499" src="https://depfields.com/wp-content/uploads/2022/02/websocket_test3.png" alt="" class="wp-image-10885" srcset="https://depfields.com/wp-content/uploads/2022/02/websocket_test3.png 619w, https://depfields.com/wp-content/uploads/2022/02/websocket_test3-300x242.png 300w" sizes="(max-width: 619px) 100vw, 619px" /></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>"Close"ボタンを押すと<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">closeメソッドを実行してコネクションを切断</span></strong>するようになっています。Closeイベントが発火すると"Websocket DisConnected.."を表示するようにしています。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="619" height="505" src="https://depfields.com/wp-content/uploads/2022/02/websocket_test4.png" alt="" class="wp-image-10886" srcset="https://depfields.com/wp-content/uploads/2022/02/websocket_test4.png 619w, https://depfields.com/wp-content/uploads/2022/02/websocket_test4-300x245.png 300w" sizes="(max-width: 619px) 100vw, 619px" /></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>ひとたびWebSocketコネクションが確立するとWebsocketプロトコルによる双方向通信は比較的シンプルに実現できます。ただ、実際の運転においてはTCPソケット通信に比べて通信が不安定になりがちですので安定した通信を実現するにはあと一工夫必要です。</p>
</div></div></div>



<div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:76% auto"><figure class="wp-block-media-text__media"><video controls src="https://depfields.com/wp-content/uploads/2022/02/websocket_txrx.mp4"></video></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size"></p>
</div></div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-md--height"></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>次のデモ動画はサーバー内の変数をブラウザに送って表示させるものです。送信のサンプリングレートは100msです。</p>
</div></div></div>



<div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:77% auto"><figure class="wp-block-media-text__media"><video controls src="https://depfields.com/wp-content/uploads/2022/02/websocket_count.mp4"></video></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size"></p>
</div></div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-md--height"></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>



<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>送信のサンプリングレートが150msより高速になると不安定でよく停止や切断をするようになりました。数値の桁が変わっても停止します。そこで対策としてブラウザへの送信データのバイトブロックを3回に分けていたのを<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">すべて１つにまとめて1回の送信</span></strong>にし<span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">、<strong>数値の桁にかかわらずデータ長を3に固定</strong></span>すると改善しました。</p>
</div>



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



<p class="has-text-align-left">このデモ動画ではサーバー内でカウント値を3桁の固定長の数字(アスキーコード)に変換して以下の送信関数を100ms周期で実行してブラウザに送っています。</p>



<p> <strong>websocket_send(</strong>文字列に変換した3桁数値<strong>)</strong>; </p>



<figure class="wp-block-image size-large"><img decoding="async" width="373" height="147" src="https://depfields.com/wp-content/uploads/2022/02/websocket_send.png" alt="" class="wp-image-11138" srcset="https://depfields.com/wp-content/uploads/2022/02/websocket_send.png 373w, https://depfields.com/wp-content/uploads/2022/02/websocket_send-300x118.png 300w" sizes="(max-width: 373px) 100vw, 373px" /></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>送信周期を100ms以下にすると不安定で、組み込み機器のリアルタイム通信としてはこの速度では少し物足りずWebSocketの利点が活かされていないようですが、現状ではこんなものかもしれません。フリーズや切断する原因を特定して可能であれば<strong><a aria-label=" (opens in a new tab)" href="https://depfields.com/websocket-highspeed" target="_blank" rel="noreferrer noopener">より安定して高速な通信の実現を今後の課題</a></strong>としておきます。</p>
</div></div></div>



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



<div style="background: #00ccff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>コラム1</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #00ccff; border-radius: 0 0 10px 10px;">
<p>WebSocketの技術はどちらかといえば、組み込み系のものではなく、HTMLやJavaScriptを駆使するWEBエンジニアが得意とする分野のものであり、これを組み込みに適用しようとしたから苦心しただけのような気はします。とはいえ、マイコンプログラミングでは必須の<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>を使用すれば、ブラウザとマイコン間でやりとりされる<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>ともいえます。</p>
</div>



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



<div style="background: #00ccff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;"><strong>コラム2</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #00ccff; border-radius: 0 0 10px 10px;">
<p> WebSocket通信はHTTPプロトコルと比較して、やりとりするパケットが小さいために<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">使用するメモリの消費も小さくなる傾向</span></strong>はあります。Nucleo-F103RBのような<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">メモリの小さなマイコンでも十分機能</span></strong>しています。今回のサンプルプログラムでのメモリ消費はRAMで約9k、Flashで約28k程度です。 </p>
</div>



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



<p></p>



<p>今回のサンプル回路はNucleoにイーサネットコントローラW5500を接続しただけの単純なものですが、組み込みというよりはソフトウェアよりの技術ですのでTCP通信のみならず、HTTP通信さらにはWebSocket通信と無限にアプリケーションが広がります。奥が深いので一度試してみてください。 </p>



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


<div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://en.depfields.com/websocket/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img decoding="async" 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>&nbsp;<div class="lkc-share"> <div class="lkc-sns-po">1 Pocket</div></div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img decoding="async" class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/a3431d11015e2a62a7b4084fa6fb4c94011f49eb4630ffbcac47dead5106eee1.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">Bidirectional communication via WebSocket on Microcontroller[STM32Nucleo] | M...</div><div class="lkc-url" title="https://en.depfields.com/websocket/">https://en.depfields.com/websocket/</div><div class="lkc-excerpt">In the previous article,  I explained how to develop IoT for devices more closely by installing a web server in MCU and accessing it from a browser such as a PC or smartphone without using a dedicated application.Browsers usually commu</div></div><div class="clear">
							</div>
						</div></a></div></div><p>The post <a href="https://depfields.com/websocket/">マイコンに実装したWebSocketによる双方向通信【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		<enclosure url="https://depfields.com/wp-content/uploads/2022/02/websocket_count.mp4" length="1065918" type="video/mp4" />
<enclosure url="https://depfields.com/wp-content/uploads/2022/02/websocket_txrx.mp4" length="1065918" type="video/mp4" />

			</item>
		<item>
		<title>HTTPプロトコルで構成したWEBサーバーを搭載したマイコンシステム【STM32Nucleo】</title>
		<link>https://depfields.com/http-server/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=http-server</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Wed, 22 Dec 2021 08:12:59 +0000</pubDate>
				<category><![CDATA[マイコンのIoT化]]></category>
		<category><![CDATA[HTTP]]></category>
		<category><![CDATA[イーサネット]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[ソケット通信]]></category>
		<category><![CDATA[webサーバー]]></category>
		<category><![CDATA[ブラウザ]]></category>
		<category><![CDATA[TCP]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=10454</guid>

					<description><![CDATA[<p>マイコンにTCPサーバーが搭載されていればHTTPプロトコルで構成したWEBサーバーに発展させることは容易です。WEBサーバーを搭載したシステムの利点は、ブラウザからアクセスできるためにPC、スマホ等どの端末からも専用ア [&#8230;]</p>
<p>The post <a href="https://depfields.com/http-server/">HTTPプロトコルで構成したWEBサーバーを搭載したマイコンシステム【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img decoding="async" width="634" height="379" src="https://depfields.com/wp-content/uploads/2021/12/browser.png" class="attachment-large size-large wp-post-image" alt="" srcset="https://depfields.com/wp-content/uploads/2021/12/browser.png 634w, https://depfields.com/wp-content/uploads/2021/12/browser-300x179.png 300w" sizes="(max-width: 634px) 100vw, 634px" /></div>
<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">マイコンにTCPサーバーが搭載されていればHTTPプロトコルで構成したWEBサーバーに発展させることは容易です。<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><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">専用アプリをインストールしなくても通信でき</span></strong>、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">遠隔操作管理等のIoT化を容易に実現</span></strong>できることです。 </p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">今回はNUCLEO-F103RBのようなメモリの小さいマイコンに最低限の機能をもったWEBサーバーを搭載してみます。</p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">WiFiモジュールESP32のときもWEBサーバーを扱ったのですが、メーカー提供のHTTPドライバフォーマットに従っただけのため、プロトコル内容は意識せずともブラウザからアクセスできました。今回は一般的な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 class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-md--height"></div></div>



<h2 class="wp-block-heading">HTTPプロトコルとは</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">マイコンで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>HTTPはTCPの上位にあるプロトコルで<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">HTTPリクエスト</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>と呼ばれる<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">HTTPメッセージ</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>。</p>
</div></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><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b"> <strong>HTTP</strong></span>はブラウザなどの<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>はデータが定期的に更新されても<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-height"><div class="vk_block-margin-md--height"></div></div>



<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><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">WEBサーバー</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>にHTMLで記述したページ、CGIプログラム、さらに画像ファイル等を保存しておき、クライアントからの指示に従ってページを渡したり、プログラムを実行したりブラウザへ応答するものです。 </p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/standard-web-server.png" alt="" class="wp-image-10655" width="487" height="310"/><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>の場合はサーバーは個々のファイルが作成できないために、かわりにすべての<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>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/embedded-web-server.png" alt="" class="wp-image-10460" width="488" height="348"/><figcaption> ファイルシステムがないマイコンのWEBサーバー </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><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">HTMLファイルをハードコーディング</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">HTMLファイル</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>したり、<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-height"><div class="vk_block-margin-md--height"></div></div>



<h2 class="wp-block-heading">HTTPフォーマット</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">HTTP</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>で<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サーバーは<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><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">HTTPプロトコル</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>



<p><span style="background-color: #003300; color: #ffffff;">&nbsp;① HTTPリクエスト&nbsp;</span></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-large"><img decoding="async" width="183" height="276" src="https://depfields.com/wp-content/uploads/2021/12/http_request_format.png" alt="" class="wp-image-10702"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p> HTTPリクエストの一行目は<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>のような情報を含んでいます。 <br> <strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">メッセージヘッダ</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">メッセージボディ</span></strong>に伝えたいデータを格納します。空の場合もあります。</p>
</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サーバーのURLをブラウザから入力したときのリクエストメッセージです。<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>でメソッドGETから始まりアクセスしたいURL等が続きます。</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/2021/12/http_request.png" alt="" class="wp-image-10811" width="462" height="138"/><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>上記コードはGETメソッドでURLが192.168.3.100:50000へのアクセスリクエストです。 URLにはアクセスしたいファイルのパス名まで入れることもありますが、省略したときはトップページのHTMLを要求していることになります。 </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">HTTPプロトコルの規定ポート番号80以外の場合にはポート番号を明記</span></strong>します。</p>
</div></div></div>



<p><span style="background-color: #003300; color: #ffffff;">&nbsp;② HTTPレスポンス&nbsp;</span></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-large"><img decoding="async" width="182" height="274" src="https://depfields.com/wp-content/uploads/2021/12/http_response_format.png" alt="" class="wp-image-10703"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>HTTPレスポンスの一行目は<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>ステータスライン</strong>で<strong>WEBサーバーの処理の結果</strong></span>を伝えます。<br><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">メッセージヘッダ</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">メッセージボディにHTMLなどのデータを格納</span></strong>します。</p>
</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サーバーの情報を記述します。ヘッダ項目でHTMLで記述したページを送りたい場合は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">Content-Type</span></strong>に<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">text/html</span></strong>とします。次の<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">Content-Length</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>



<figure class="wp-block-image size-full is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/http_response.png" alt="" class="wp-image-11217" width="316" height="422"/><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>メッセージボディはHTMLで記述したページ等の内容です。上記のコードはマイコンからブラウザへ<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">HTMLをコード化(ハードコーディング)した文字列を送信した内容</span></strong>で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ファイルシステムでのHTMLファイルを送るのと同じもの</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">GETメソッドを指定(method="get")</span></strong>しています。</p>
</div></div></div>



<h3 class="wp-block-heading">HTTPメソッド</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>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>のことで、数種類ありますがブラウザとマイコンとのやり取りでは主に<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">GETメソッド</span></strong>と<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">POSTメソッド</span></strong>の2種類を扱います。 </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>ブラウザがサーバーからHTMLファイルなどを取得する場合には<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">GETメソッド</span></strong>を、ブラウザからサーバーにデータを送信する場合は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">POSTメソッド</span></strong>を使います。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">GETメソッドはPOSTメソッドのようにデータ送信にも使えます</span></strong>が、その場合はURLの後ろにデータを付けて送信します。</p>
</div></div></div>



<p><span style="background-color: #003300; color: #ffffff;">&nbsp;① GETメソッドによるWEBページアクセス&nbsp;</span></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>標準的なGETメソッドの用法です。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ブラウザ</span></strong>(クライアント)はWEBページのURLを入力するとまずはじめに<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>



<figure class="wp-block-image size-large"><img decoding="async" width="600" height="255" src="https://depfields.com/wp-content/uploads/2021/12/get_toppage.png" alt="" class="wp-image-10571" srcset="https://depfields.com/wp-content/uploads/2021/12/get_toppage.png 600w, https://depfields.com/wp-content/uploads/2021/12/get_toppage-300x128.png 300w" sizes="(max-width: 600px) 100vw, 600px" /></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>がクライアント側からの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">TCP接続要求を受け入れて接続(コネクション)が確立</span></strong>すると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><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">GETメソッド</span></strong>リクエストラインから始まる<strong>リクエストメッセージをサーバーに送信</strong>します。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/http_request.png" alt="" class="wp-image-10811" width="462" height="138"/><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>はGETリクエストを受けて次の<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>



<p class="has-text-align-center">HTTP/1.1 200 OK</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">ブラウザ</span></strong>はGETリクエストの内容によりHTMLページを開いたり、<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-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-md--height"></div></div>



<p><span style="background-color: #003300; color: #ffffff;">&nbsp;② GETメソッドによるデータ送信&nbsp;</span></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">GETメソッド</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>にURL末尾に「<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">データ=xxx</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/2021/12/get_datatransmit.png" alt="" class="wp-image-10516" width="580" height="246" srcset="https://depfields.com/wp-content/uploads/2021/12/get_datatransmit.png 600w, https://depfields.com/wp-content/uploads/2021/12/get_datatransmit-300x128.png 300w" sizes="(max-width: 580px) 100vw, 580px" /><figcaption>GETメソッドによるデータ送信</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>サーバーは下記のようなフォーマットでリクエストメッセージを<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">メソッド「GET」</span></strong>と<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>すればよいだけです。</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>GETメソッドによるデータの送信はとても簡単な方法ですが、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">URL欄に履歴が残る</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/2021/12/get_response.png" alt="" class="wp-image-10812" width="473" height="128"/><figcaption> GETメソッド送信リクエスト </figcaption></figure>



<p><span style="background-color: #003300; color: #ffffff;">&nbsp;③ POSTメソッドによるデータ送信&nbsp;</span></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">POSTメソッド</span></strong>を使います。GETメソッドとは違いブラウザの履歴は残りません。 </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>受信データとして取得</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>はリクエストヘッダが終了した<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">メソッド「POST」</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>データ「ABC」</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">GET</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/2021/12/post_response.png" alt="" class="wp-image-10813" width="461" height="151"/><figcaption> POSTメソッド送信リクエスト </figcaption></figure>



<h2 class="wp-block-heading">マイコンへの実装</h2>



<p>マイコンシステムにWEBサーバーを実装するときに重要なポイントをまとめました。</p>



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



<h3 class="wp-block-heading">WEBサーバー搭載プログラム</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>WEBサーバーを搭載してもプログラムの基本的な流れはTCPサーバーの時とあまり変わりません。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">送受信データにHTTPプロトコル特有の多少の尾ひれがつく</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>STM32マイコンにWEBサーバーを搭載したプログラム概要です。HTTPプロトコル特有の内容はモジュールhttp_server.cに記述しておき、ヘッダファイル http_server.h を読み込んでおきます。</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>としてRTOSのタスクprvTask_monitorを一つ追加してその中でデータ値を１秒間に１カウントアップしています。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="648" height="537" src="https://depfields.com/wp-content/uploads/2021/12/main_http_server.png" alt="" class="wp-image-10524" srcset="https://depfields.com/wp-content/uploads/2021/12/main_http_server.png 648w, https://depfields.com/wp-content/uploads/2021/12/main_http_server-300x249.png 300w" sizes="(max-width: 648px) 100vw, 648px" /><figcaption>main HTTP server</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>マイコンにWEBサーバーを実装するうえで重要なポイントはいくつかあるのですがとりわけ重要なものが<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">メモリの扱い</span></strong>です。TCPサーバーとの違いは扱う<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">文字列が長いこと</span></strong>です。FreeRTOSを使用しているときは<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">長い文字列を扱うタスクのスタック容量を大きめ(384ワード程度：最低1kバイト)に設定</span></strong>しておくことが重要です。</p>
<p><strong><a href="https://depfields.com/freertos/" target="_blank" rel="noopener noreferrer">FreeRTOS【STM32学習向け】</a></strong></p>
</div>



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



<h3 class="wp-block-heading">WEBサーバーモジュール</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>下のWEBサーバーモジュールは今回のデモ用WEBサーバーの中核となる部分です。ブラウザでURLを入力して<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">top_document[]</span></strong>の内容です。GETメソッドリクエストに<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>送信した文字列があらかじめ設定した文字列"ABC"と一致したときと不一致のときの<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">top_document2[]</span></strong>の内容です。GETメソッドリクエストに<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-full"><img decoding="async" width="658" height="1301" src="https://depfields.com/wp-content/uploads/2021/12/http_server.png" alt="" class="wp-image-10840" srcset="https://depfields.com/wp-content/uploads/2021/12/http_server.png 658w, https://depfields.com/wp-content/uploads/2021/12/http_server-152x300.png 152w, https://depfields.com/wp-content/uploads/2021/12/http_server-518x1024.png 518w" sizes="(max-width: 658px) 100vw, 658px" /><figcaption> WEBサーバーモジュール http_server.c   </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>HTMLファイルをコード化して配列に格納するにあたって<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>と内容により異なるコード長データ"len_top_document"など<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">sprintf関数で結合</span></strong>しているところです。これを利用すると静的なファイルであるはずのHTMLが動的な要素を含んだページになります。</p>
</div></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>ブラウザからのリクエストに対するレスポンスはここでは簡略化のため"HTTP/ 1.1 200 OK"に固定しています。厳密にはHTTPプロトコルではブラウザからのリクエストバージョンに整合したり、ステータスコードを状態に応じて割り当てたものを返します。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-md--height"></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>日本語の表示させるとブラウザで文字化けする場合はサーバー側で対処しておきます。上のコードでは文字コードをUTF-8からにUTF-8Nにしただけで解決できたのですが対処療法的なのでより根本的な解決方法を適用してください。</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">受信文字処理</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">GETやPOSTなどのメッセージ</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>です。これらは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">タスクprvTask_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">GETメソッド</span></strong>を使用しているために「GET」をコマンドとして受信した場合に<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>かで<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"><img decoding="async" width="676" height="692" src="https://depfields.com/wp-content/uploads/2021/12/cmd_string_http.png" alt="" class="wp-image-10748" srcset="https://depfields.com/wp-content/uploads/2021/12/cmd_string_http.png 676w, https://depfields.com/wp-content/uploads/2021/12/cmd_string_http-293x300.png 293w" sizes="(max-width: 676px) 100vw, 676px" /><figcaption> 受信データ処理　cmd_string関数 </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><strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b"> Nucleo-F103RB</span></strong>はメモリがあまり大きくないので、<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">FreeRTOSにWEBサーバーを搭載する場合</span></strong>はFreeRTOSの設定ファイル<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">FreeRTOSConfig.hのメモリ割り当てに関する部分は見直したほうがよい</span></strong>です。特に<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">ヒープサイズを指定するconfigTOTAL_HEAP_SIZE</span></strong>は使用するタスク数が少なければ小さく設定しても大丈夫です。動作する範囲で調整してください。</p>
</div>



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



<h2 class="wp-block-heading">ブラウザとマイコンとの通信</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>Nucleo-F103RBにWEBサーバーを搭載したところで実際にブラウザにURLのIPアドレスとポートを入力してアクセスしてみます。</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>URLを入力するとサーバーとのコネクションが確立して以下のページに切替わります。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">配列top_document[]にコード化した内容</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>以下のフォーム画面で文字を入力してGETメソッドでサーバーに送ります。文字"ABC"を入力して送信ボタン(Send)を押します。このボタンは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">GETメソッドに設定</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/2021/12/Webserver_top.png" alt="" class="wp-image-10835" width="579" height="343" srcset="https://depfields.com/wp-content/uploads/2021/12/Webserver_top.png 752w, https://depfields.com/wp-content/uploads/2021/12/Webserver_top-300x178.png 300w" sizes="(max-width: 579px) 100vw, 579px" /><figcaption> WEBサーバーTOPページ </figcaption></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-md--height"></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>入力文字を履歴にも残さない伏せ字にするにはHTMLの入力タグを&lt;input type="<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">text</span></strong>"&gt;から&lt;input type="<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">password</span></strong>"&gt;に変更するだけです。これを利用すると簡易にパスワード要求画面が作成できます。ただし、送信メソッドは<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">POST</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="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>送信ボタンを押すとブラウザのアドレス欄にURL/?cmd=ABCが自動的に入り、ページが<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">配列top_document2[]に格納したHTMLページ</span></strong>に切替わります。入力した文字が“ABC”と一致すると下記のメッセージが表示されます。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/response_good.png" alt="" class="wp-image-10474"/><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>今度は"abc"を入力して送信ボタンを押すとブラウザのアドレス欄にURL/?cmd=abcが自動的に入り、ページが切替わります。入力した文字が“ABC”と不一致であると下記のメッセージが表示されます。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/response_ng.png" alt="" class="wp-image-10475"/><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">デモプログラム</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>ので是非実践してみてください。C言語で文字列を扱うトレーニングにもなります。</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>サーバーからブラウザへ送られる数値は手動で更新していますが、<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">HTMLのmeta refreshタグで自動更新</span></strong>することもできます。HTTPプロトコルは基本的にクライアントからリクエストしなければデータは更新できないのですが、リアルタイムで表示する方法として、<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">server sent events(SSE)</span></strong>や<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">別のプロトコルであるWebSocket</span></strong>などがあります。ファイルシステムを持たないマイコン搭載のWEBサーバーには敷居が高いので当面は自動更新で十分かと思います。</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>HTTPプロトコルを扱うためにはクライアントとサーバー間で実際にやりとりされている<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">"Fiddler"というフリーソフト</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>。</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>ここまでくるとマイコンに<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>WEBサーバーでプログラムを搭載した高度なものを実現したくなります。ファイルシステムさえあれば一般的なWEBサーバーの方法が採用できるのでかえって楽に高度なことができるので機会があれば挑戦したいと思います。</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/http-server/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img decoding="async" 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 decoding="async" class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/f1c0f0c57162d72296cff6a1dd5eab976ad06f0b6e671e3859521e91d5b5d237.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">Microcontroller system with the HTTP protocol [STM32Nucleo] | Most Powerful B...</div><div class="lkc-url" title="https://en.depfields.com/http-server/">https://en.depfields.com/http-server/</div><div class="lkc-excerpt">If the microcontroller is equipped with a TCP server, it can easily be developed into a web server configured with the HTTP protocol.  The advantage of a system equipped with a web server is that it can be accessed from a browser, allowing</div></div><div class="clear">
							</div>
						</div></a></div></div><p>The post <a href="https://depfields.com/http-server/">HTTPプロトコルで構成したWEBサーバーを搭載したマイコンシステム【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>TCPサーバーを実装したソケット通信【STM32Nucleo】</title>
		<link>https://depfields.com/tcp-server/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=tcp-server</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Sun, 19 Dec 2021 08:21:59 +0000</pubDate>
				<category><![CDATA[マイコンのIoT化]]></category>
		<category><![CDATA[イーサネット]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[ソケット通信]]></category>
		<category><![CDATA[TCP]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=10299</guid>

					<description><![CDATA[<p>マイコンをイーサネット対応にしてpingが通った状態でネットワークに参加しただけでは何の意味もありませんが、上位のトランスポート層にTCPやUDPといったプロトコルを搭載することによってサーバーとクライアント間で通信がで [&#8230;]</p>
<p>The post <a href="https://depfields.com/tcp-server/">TCPサーバーを実装したソケット通信【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img decoding="async" width="600" height="400" src="https://depfields.com/wp-content/uploads/2021/12/socket.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="https://depfields.com/wp-content/uploads/2021/12/socket.jpg 600w, https://depfields.com/wp-content/uploads/2021/12/socket-300x200.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /></div>
<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">マイコンをイーサネット対応にしてpingが通った状態でネットワークに参加しただけでは何の意味もありませんが、上位のトランスポート層に<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">TCPやUDPといったプロトコルを搭載</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>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">ソケット通信は<strong><a href="https://depfields.com/ethernet/" target="_blank" rel="noreferrer noopener">前回解説したOSI参照モデル</a></strong>のトランスポート層に属するTCPプロトコルにしたがった通信手段です。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">W5500コントローラ</span></strong>を搭載したマイコンでTCPソケット通信を実現するためには内蔵した<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>



<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">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>ができるようになります。</p>







<h2 class="wp-block-heading">TCPソケット通信とは</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">ソケット通信</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><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">トランスポート層</span></strong>に属するプロトコルには他に<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">UDP</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>で標準的な<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">バークレーソケット（BSD unixに実装されたネットワーク用API）</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>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/TCP_socket.png" alt="" class="wp-image-10304" width="415" height="365" srcset="https://depfields.com/wp-content/uploads/2021/12/TCP_socket.png 434w, https://depfields.com/wp-content/uploads/2021/12/TCP_socket-300x264.png 300w" sizes="(max-width: 415px) 100vw, 415px" /><figcaption>TCPソケット通信</figcaption></figure>



<h2 class="wp-block-heading">TCPサーバーの実装</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">ドライバsoket.c</span></strong>では標準インターフェースのBSDソケットに準じた関数をまとめていますがここではドライバ内に定義された関数の一部のみを使用したソケット通信のサンプルを紹介しています。   </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>をサンプリングタイム5msで実行する<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">専用タスクprvTask_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サーバーを作成することもできますが、ここではサンプリングタイム毎にモニターした<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>



<h3 class="wp-block-heading">ソケットレジスタブロックの設定</h3>



<figure class="wp-block-image size-full"><img decoding="async" width="724" height="873" src="https://depfields.com/wp-content/uploads/2021/12/TCP_server.png" alt="" class="wp-image-10816" srcset="https://depfields.com/wp-content/uploads/2021/12/TCP_server.png 724w, https://depfields.com/wp-content/uploads/2021/12/TCP_server-249x300.png 249w" sizes="(max-width: 724px) 100vw, 724px" /><figcaption> TCPサーバータスクサンプル </figcaption></figure>



<p><span style="background-color: #003300; color: #ffffff;">&nbsp;①　ソケット状態のモニター</span><span style="background-color: #003300; color: #ffffff;">&nbsp;</span></p>



<p><strong>state = getSn_SR(SN)；</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>ソケットの状態は主に<br>「<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">SOCK_CLOSED</span></strong>」ソケット閉鎖<br>「<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">SOCK_LISTEN</span></strong>」ソケット待機<br>「<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">SOCK_ESTABLISHED</span></strong>」ソケット確立<br>「<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">SOCK_CLOSING</span></strong>」ソケット閉鎖中 <br>の4種類があり、これらの状態をソケット番号SNに応じてgetSn_SR(SN)関数でソケットのレジスタ値を読み込みます。</p>
</div></div></div>



<p><span style="background-color: #003300; color: #ffffff;">②　ソケット生成</span><span style="background-color: #003300; color: #ffffff;">&nbsp;</span></p>



<p><strong>srcSocket = socket(SN,Sn_MR_TCP, PORT, SF_IO_NONBLOCK)；</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>SOCK_CLOSED</strong>」ですのでまずソケットをsocket()関数で生成します。</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>関数の第1引数は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ソケット番号SN</span></strong>で、SNは自作関数をまとめたヘッダファイルnet_conf.hで1に定義しています。 </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>第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>しています。第3引数は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">PORT番号を指定</span></strong>し、第4引数では<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">non-blockを指定</span></strong>し、ノンブロッキングソケットとしています。 </p>
</div></div></div>



<p><span style="background-color: #003300; color: #ffffff;">③　STABE_LISTENに遷移</span><span style="background-color: #003300; color: #ffffff;">&nbsp;</span></p>



<p><strong>LISTEN(SN)；</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>ソケットが作成されるとlisten(SN)関数を実行し、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">SOCK_LISTEN状態に遷移してクライアントからの接続待ち状態で待機</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>ソケットの状態がSOCK_LISTENの待機時にクライアントのターミナルから<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>をし、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">接続が確立するとSOCK_ESTABLISHED</span></strong>になります。接続が確立しクライアントのターミナルにサーバーのIPアドレスが表示されると任意のタイミングで送受信ができるようになります。</p>
</div></div></div>



<p><span style="background-color: #003300; color: #ffffff;">④　データ送受信</span><span style="background-color: #003300; color: #ffffff;">&nbsp;</span></p>



<p><strong>len=recv(SN, (uint8_t*)rcvbuffer, sizeof(rcvbuffer));</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">データ受信にはrecv関数を使用</span></strong>します。第1引数はソケット番号、第2引数は受信バッファのポインタ、第3引数はデータ長を指定します。<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>



<p><strong>send(SN, (uint8_t*)sendbuffer, sizeof(sendvbuffer));</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">データ送信にはsend関数を使用</span></strong>します。第1引数はソケット番号、第2引数は送信バッファのポインタ、第3引数はデータ長を指定します。</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>通信用バッファメモリである送信TXおよび受信RXバッファはそれぞれ16Kバイトのブロックで構成されています。</p>
</div></div></div>



<p><span style="background-color: #003300; color: #ffffff;">⑤　ソケット制御関数</span></p>



<p><strong>setSn_CR(SN,Sn_CR_CLOSE);</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">setSn_CR関数</span></strong>はsocket.c内に定義されている関数で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ソケットを制御</span></strong>するものです。第1引数はソケット番号、第2引数はソケットの状態を指定します。Sn_CR_CLOSEを指定するとソケットを閉鎖(close)します。</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>その他ソケットの”OPEN", ”LISTEN", "CONNECT", "DISCON", "SEND", "SEND_MAC", "SEND_KEEP", "RECV"等があります。詳細はドライバの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ソケット定義ファイルsocket.cを確認</span></strong>してください。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="576" height="418" src="https://depfields.com/wp-content/uploads/2021/12/Soket_W5500.png" alt="" class="wp-image-10388" srcset="https://depfields.com/wp-content/uploads/2021/12/Soket_W5500.png 576w, https://depfields.com/wp-content/uploads/2021/12/Soket_W5500-300x218.png 300w" sizes="(max-width: 576px) 100vw, 576px" /><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>TCPサーバーのソケット状態遷移をまとめると上図のようになります。W5500ではソケット状態は他にもありますが、とりあえず<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">主な4つの状態をコントロール</span></strong>しておけば機能します。</p>
</div></div></div>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-sm--height"></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>ソケット通信の状態を電話による会話に例えると下図のようなイメージなります。この通信状態を想定しながら実際にソケット通信を実施して動作を確認してみます。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/TCP_socket_telephone.png" alt="" class="wp-image-10305" width="426" height="644" srcset="https://depfields.com/wp-content/uploads/2021/12/TCP_socket_telephone.png 426w, https://depfields.com/wp-content/uploads/2021/12/TCP_socket_telephone-198x300.png 198w" sizes="(max-width: 426px) 100vw, 426px" /><figcaption>ソケット通信における接続イメージ</figcaption></figure>



<h2 class="wp-block-heading">実際のソケット通信</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">クライアント</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>します。ここでもTera Termを使用しています。これに限らず慣れたツールを使用してください。</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">サーバーに登録したIPアドレスおよびポート番号を入力</span></strong>し"OK"を押します。</p>
</div></div></div>



<p><span style="background-color: #003300; color: #ffffff;">① 接続要求&nbsp;</span></p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/TCP_open.png" alt="" class="wp-image-10373" width="560" height="411" srcset="https://depfields.com/wp-content/uploads/2021/12/TCP_open.png 655w, https://depfields.com/wp-content/uploads/2021/12/TCP_open-300x221.png 300w" sizes="(max-width: 560px) 100vw, 560px" /></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>画面左上にサーバーのIPアドレスが表示されると設定ポートが開いてクライアントとサーバーが接続したことになります。</p>
</div></div></div>



<p><span style="background-color: #003300; color: #ffffff;">② ソケット接続確立中&nbsp;</span></p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/TCP_open2.png" alt="" class="wp-image-10374" width="560" height="414" srcset="https://depfields.com/wp-content/uploads/2021/12/TCP_open2.png 655w, https://depfields.com/wp-content/uploads/2021/12/TCP_open2-300x222.png 300w" sizes="(max-width: 560px) 100vw, 560px" /></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">ソケットの閉鎖(close)</span></strong>および<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">接続切断(disconnect)</span></strong>するコマンドをまとめたファイルを作成して実行しています。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="622" height="564" src="https://depfields.com/wp-content/uploads/2021/12/cmd_string_tcp.png" alt="" class="wp-image-10564" srcset="https://depfields.com/wp-content/uploads/2021/12/cmd_string_tcp.png 622w, https://depfields.com/wp-content/uploads/2021/12/cmd_string_tcp-300x272.png 300w" sizes="(max-width: 622px) 100vw, 622px" /><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>まず文字列"ABC"を入力します。受信バッファに格納された文字列が"ABC"で一致すると”Matched&#x203c;"と応答します。応答は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">send関数</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/2021/12/TCP_rxtx.png" alt="" class="wp-image-10320" width="574" height="435" srcset="https://depfields.com/wp-content/uploads/2021/12/TCP_rxtx.png 568w, https://depfields.com/wp-content/uploads/2021/12/TCP_rxtx-300x227.png 300w" sizes="(max-width: 574px) 100vw, 574px" /></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>文字列"abc"を入力すると"ABC"と一致しませんので”Error"と応答します。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/TCP_rxtx2.png" alt="" class="wp-image-10321" width="575" height="434" srcset="https://depfields.com/wp-content/uploads/2021/12/TCP_rxtx2.png 572w, https://depfields.com/wp-content/uploads/2021/12/TCP_rxtx2-300x227.png 300w" sizes="(max-width: 575px) 100vw, 575px" /></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>を試みます。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="659" height="484" src="https://depfields.com/wp-content/uploads/2021/12/TCP_reopen.png" alt="" class="wp-image-10317" srcset="https://depfields.com/wp-content/uploads/2021/12/TCP_reopen.png 659w, https://depfields.com/wp-content/uploads/2021/12/TCP_reopen-300x220.png 300w" sizes="(max-width: 659px) 100vw, 659px" /></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>されました。電話では相手の受話器が上がっていて話し中の状態です。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="775" height="560" src="https://depfields.com/wp-content/uploads/2021/12/TCP_reopen_ng.png" alt="" class="wp-image-10319" srcset="https://depfields.com/wp-content/uploads/2021/12/TCP_reopen_ng.png 775w, https://depfields.com/wp-content/uploads/2021/12/TCP_reopen_ng-300x217.png 300w, https://depfields.com/wp-content/uploads/2021/12/TCP_reopen_ng-768x555.png 768w" sizes="(max-width: 775px) 100vw, 775px" /></figure>



<p><span style="background-color: #003300; color: #ffffff;">③ ソケットclose　</span></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>ソケットを閉じるためにコマンド"scls"を入力すると"socket close"メーセージを返してCRレジスタにSn_CR_CLOSEを送信してから<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ソケットを閉鎖(close)</span></strong>します。結果、未接続となります。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/TCP_scls.png" alt="" class="wp-image-10322"/></figure>



<p><span style="background-color: #003300; color: #ffffff;">④ 接続要求+ソケット接続確立&nbsp;</span></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>また新たに接続を試みると今度はソケットが閉じているため再びポートが開き接続できます。</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>最後に接続自体を遮断するため、コマンド"srst"を入力します。CRレジスタにSn_CR_DISCONを送信し、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">切断処理(disconnect)を実行</span></strong>します。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="657" height="485" src="https://depfields.com/wp-content/uploads/2021/12/TCP_srst.png" alt="" class="wp-image-10326" srcset="https://depfields.com/wp-content/uploads/2021/12/TCP_srst.png 657w, https://depfields.com/wp-content/uploads/2021/12/TCP_srst-300x221.png 300w" sizes="(max-width: 657px) 100vw, 657px" /></figure>



<p><span style="background-color: #003300; color: #ffffff;">⑤ 接続切断 </span></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">接続が遮断</span></strong>されたことが確認できます。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="657" height="486" src="https://depfields.com/wp-content/uploads/2021/12/TCP_srst2.png" alt="" class="wp-image-10372" srcset="https://depfields.com/wp-content/uploads/2021/12/TCP_srst2.png 657w, https://depfields.com/wp-content/uploads/2021/12/TCP_srst2-300x222.png 300w" sizes="(max-width: 657px) 100vw, 657px" /></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>以上、テスト用コマンドを入力してソケット通信の様子を確認しました。実際のソケット通信ではプログラミング次第でコマンドをさらに多様化してコマンドにより様々な処理を実施させることになります。</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>TCPソケット通信</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>できることが特徴ですので組み込み機器にTCPサーバーを搭載しておけば<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">リモート管理</span></strong>ができるようになります。<br></p>
</div></div></div>


<div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://en.depfields.com/tcp-server/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img decoding="async" 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 decoding="async" class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/90cdef68ddc6882ffd7a19d1a6ed1da669848f7e2715cc5a86702cc05ad85e46.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">Socket communication with TCP server[STM32Nucleo] | Most Powerful Bible to Be...</div><div class="lkc-url" title="https://en.depfields.com/tcp-server/">https://en.depfields.com/tcp-server/</div><div class="lkc-excerpt">Simply making MCU Ethernet-enabled and joining the network with ping passing through it does not mean anything, but by installing protocols such as TCP and UDP in the upper transport layer, communication between the server and the client b</div></div><div class="clear">
							</div>
						</div></a></div></div><p>The post <a href="https://depfields.com/tcp-server/">TCPサーバーを実装したソケット通信【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>マイコンのEthernet対応システム設計【STM32Nucleo】</title>
		<link>https://depfields.com/ethernet/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=ethernet</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Sat, 18 Dec 2021 06:03:16 +0000</pubDate>
				<category><![CDATA[マイコンのIoT化]]></category>
		<category><![CDATA[イーサネット]]></category>
		<category><![CDATA[IoT]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=10146</guid>

					<description><![CDATA[<p>マイコンをネット接続するための基礎知識 ネットワークに接続して使用するIoT化は組み込み機器でも浸透してきました。テレビ等を始めとする家電やスマホなどの身近な民生品ではWiFiによるネットワーク接続が一般的になっています [&#8230;]</p>
<p>The post <a href="https://depfields.com/ethernet/">マイコンのEthernet対応システム設計【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img decoding="async" width="600" height="414" src="https://depfields.com/wp-content/uploads/2021/12/network-LAN.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="https://depfields.com/wp-content/uploads/2021/12/network-LAN.jpg 600w, https://depfields.com/wp-content/uploads/2021/12/network-LAN-300x207.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /></div>




<h2 class="wp-block-heading">マイコンをネット接続するための基礎知識</h2>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">ネットワークに接続して使用するIoT化は組み込み機器でも浸透してきました。テレビ等を始めとする家電やスマホなどの身近な民生品ではWiFiによるネットワーク接続が一般的になっていますが、動作安定性やセキュリティが求められる産業機器向け製品には有線通信の一つであるイーサネットが使用されます。</p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">今回は、これまで慣れ親しんできた汎用マイコン(Nucleo-F103RB)に外付けのイーサネット対応LANコントローラW5500を適用してイーサネットIoTに対応する方法を解説します。対象はSTM32マイコンですが、マイコンとLANコントローラ間のインターフェース（SPI通信）をカスタマイズすればどの機種にも対応できる手軽な手段です。</p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">ここでは、IPアドレス等ネットワーク関連の解説は割愛します。</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>



<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>ネットワークには様々な規格の装置・機器が接続されているのですが、ネットワークの規格は以下のOSC参照モデルで共通化されていますのでどのような装置・機器でも共通規格であれば通信できるようになります。</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>は有線LANの一つで<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">最も普及している規格</span></strong>でありIEEE802.3で定義されたものです。</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>規格に従って、物理層のLANケーブルから例えばウェブブラウザを使用したHTTPアプリケーション層までの通信システムを構築することになります。データリンク層までは大抵ハードウェアで構成され、それ以降はソフトウェアで構成されます。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/network-layer.png" alt="" class="wp-image-10830" width="580" height="172"/><figcaption class="wp-element-caption"> OSI参照モデル </figcaption></figure>



<h2 class="wp-block-heading">イーサネット対応のためのLANコントローラの選択</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>イーサネット通信に関してマイコンを大別すると3種類あり、下記のように分類できます。</p>
</div></div></div>



<ol class="wp-block-list">
<li>汎用マイコン（イーサネットコントローラ非搭載）</li>



<li>MACデバイスを内蔵したマイコン</li>



<li>MAC/PHYデバイスを内蔵したマイコン</li>
</ol>



<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番めの汎用マイコンはイーサネットコントローラが非搭載ですので<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">MAC/PHYデバイスコントローラを外付け</span></strong>して汎用バスであるSPI、I2Cなどをインターフェースとして通信を行います。今回扱うNucleo-F103RBのマイコンはこれに当たります。</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>２番めのマイコンはイーサネットMACデバイスを内蔵したもので例えばSTM32F407がこれに当たります。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">PHYデバイスコントローラを外付け</span></strong>して<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">マイコン内蔵のMACデバイス</span></strong>と<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">MII</span></strong>/<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">RMII</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>３番めのマイコンはイーサネットに必要なデバイスMACおよびPHYを内蔵したもので、追加部品はパルストランス内蔵のRJ-45のみです。</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>



<h3 class="wp-block-heading">XPORT</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>イーサネットの知識がなくてもWiFiのときに使用した<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">汎用シリアル通信をインターフェースとしたコントローラ</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>最も簡易的なIoT対応コントローラとして選択できます。シリアル通信のみ対応の<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"><img decoding="async" width="519" height="195" src="https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_XPORT.png" alt="" class="wp-image-10159" srcset="https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_XPORT.png 519w, https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_XPORT-300x113.png 300w" sizes="(max-width: 519px) 100vw, 519px" /></figure>



<h3 class="wp-block-heading">ENC28J60コントローラ</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>ENC28J60コントローラはイーサネットコントローラ非搭載のマイコンでもSPI通信を持っていればイーサネット対応にできます。</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／IPプロトコルスタックを自分で組み込まなければなりませんのでSTM32F1シリーズでは実施例の資料が少なく大変そうです。移植するには選択したTCP/IPプロトコルスタックの中身を理解する必要がありますが、そこに時間をかけたくない場合は次のW5500がおすすめです。 </p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="518" height="199" src="https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_ENC28j60.png" alt="" class="wp-image-10161" srcset="https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_ENC28j60.png 518w, https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_ENC28j60-300x115.png 300w" sizes="(max-width: 518px) 100vw, 518px" /></figure>



<h3 class="wp-block-heading">W5500コントローラ</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> ENC28J60コントローラの場合と同じくイーサネットコントローラ非搭載のマイコンでSPI通信を持っている場合に適用できます。両者の大きな違いは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">W5500は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/IPプロトコル・スタックについての知識がなくても使用できることに加え、ソフトウェア負荷が小さいので<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>Nucleo-F103RBのSTM32マイコンに対して外付け部品も少なくてすみ、<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">HTTPプロトコルを利用したブラウザからの通信</span></strong>にも発展できるバランスのとれたコントローラです。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="520" height="215" src="https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_W5500.png" alt="" class="wp-image-10160" srcset="https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_W5500.png 520w, https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_W5500-300x124.png 300w" sizes="(max-width: 520px) 100vw, 520px" /></figure>



<h3 class="wp-block-heading">LAN8720コントローラ</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>STM32F407マイコンのようにイーサネット対応MACを内蔵したものにはPHYデバイスのみを持つLAN8720やDP83848等のコントローラがよりマイコンの機能を活かせます。</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">Cortex-M4コアを内蔵するSTM32F407</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>はもはやライブラリはSPLにこだわるのではなくHALやLLドライバを使用したほうが手っ取り早いです。</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>開発環境STM32CubeIDEを使用すれば開発プロジェクトを作成する段階で自動生成機能を利用するとTCP/IPプロトコル（LwIP）も簡単に組みこめ、トランスポート層のTCPやUDPプロトコルまで実装できてしまいます。</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>



<figure class="wp-block-image size-large"><img decoding="async" width="544" height="201" src="https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_LAN8720.png" alt="" class="wp-image-10162" srcset="https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_LAN8720.png 544w, https://depfields.com/wp-content/uploads/2021/12/Ethernetcontroller_LAN8720-300x111.png 300w" sizes="(max-width: 544px) 100vw, 544px" /></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> Arduinoのイーサネットシールド(互換品も含む)としてW5500を搭載したモデルがNucleoボードにも使用できればよいと考え仕様を確認してみたのですが、肝心のインターフェース部分である<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">SPI通信端子がNucleoには対応していないので使用できません</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>



<h2 class="wp-block-heading">TCP/IPプロトコル・スタック内蔵のコントローラW5500</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>イーサネットコントローラ非搭載のマイコンSTM32F1シリーズでイーサネット対応にするには<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">W5500</span></strong>か<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ENC28J60</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/IPプロトコルスタックをハードウェアに内蔵しているW5500</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>TCP/IPプロトコルスタックについては規格に準じたものなので内部詳細をあえて理解する必要性はあまり感じられず既成のモジュールとして割り切ってもよいのではないでしょうか。</p>
</div></div></div>



<h3 class="wp-block-heading">NUCLEO-F103RBとW5500モジュール</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>外付けでW5500でNucleo-F103RBをネットワークにつなげるにはここでは市販W5500ボードを利用します。ボードは安価で最低限の周辺部品が備わっていますがMACアドレスがないボードも多いです。</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>製品開発をする場合にはこの市販W5500ボードに使用されている最低限の周辺部品の他にMACアドレスを保持するためのEEPROM等メモリが必要になります。</p>
</div></div></div>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img decoding="async" width="648" height="611" data-id="10230" src="https://depfields.com/wp-content/uploads/2021/12/w5500_1-1.jpg" alt="" class="wp-image-10230" srcset="https://depfields.com/wp-content/uploads/2021/12/w5500_1-1.jpg 648w, https://depfields.com/wp-content/uploads/2021/12/w5500_1-1-300x283.jpg 300w" sizes="(max-width: 648px) 100vw, 648px" /><figcaption class="wp-element-caption">コントローラW5500モジュール表</figcaption></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="780" height="780" data-id="10231" src="https://depfields.com/wp-content/uploads/2021/12/W5500_2.jpg" alt="" class="wp-image-10231" srcset="https://depfields.com/wp-content/uploads/2021/12/W5500_2.jpg 780w, https://depfields.com/wp-content/uploads/2021/12/W5500_2-300x300.jpg 300w, https://depfields.com/wp-content/uploads/2021/12/W5500_2-150x150.jpg 150w, https://depfields.com/wp-content/uploads/2021/12/W5500_2-768x768.jpg 768w" sizes="(max-width: 780px) 100vw, 780px" /><figcaption class="wp-element-caption">コントローラW5500モジュール裏</figcaption></figure>
</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との接続は割り込みや外部リセットを使わないのであれば電源とSPI通信部のみで機能します。リセットはソフトウェアで実行するのであればなくても機能はしますが<strong>W5500はパワーオンリセットではない</strong>ので、リセットの確実性を高めるため特に<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>製品化の場合にはハードウェアリセットは使用すべき</strong></span>です。今回はSPI2を使用するため下図のような接続になります。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="666" height="399" src="https://depfields.com/wp-content/uploads/2021/12/wiring_w5500.png" alt="" class="wp-image-10194" srcset="https://depfields.com/wp-content/uploads/2021/12/wiring_w5500.png 666w, https://depfields.com/wp-content/uploads/2021/12/wiring_w5500-300x180.png 300w" sizes="(max-width: 666px) 100vw, 666px" /></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>MACアドレスについて：<br>イーサネットを使用するにあたってMACアドレスが必要となるのですが、使用するLANコントローラにはMACアドレスは搭載していません。ネットで動作を確認するくらいであれば問題ないのですが、製品として世に出す場合は各製品固有のMACアドレス登録を事前に行う必要があります。</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>



<h2 class="wp-block-heading"> STM32マイコンとW5500ドライバ </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>W5500は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">IC内部のレジスタをSPI通信で操作</span></strong>して通信を行います。レジスタの詳細は<a aria-label=" (opens in a new tab)" href="https://docs.wiznet.io/Product/iEthernet/W5500/datasheet" target="_blank" rel="noreferrer noopener"><strong>W5500データシート</strong></a>に詳細が記載していますが、プログラミングにおいてはメーカーが提供する<strong><a aria-label="ドライバ類 (opens in a new tab)" href="https://docs.wiznet.io/Product/iEthernet/W5500/driver" target="_blank" rel="noreferrer noopener">ドライバ類</a></strong>をライブラリ(<strong>ioLibrary_BSD</strong>)として登録しておき、必要に応じて関数類を呼び出して使用します。</p>
</div></div></div>



<h3 class="wp-block-heading">W5500のドライバとは</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>STM32マイコンとのSPI通信のインターフェースにあたる関数をまとめたファイルが<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">wizchip_conf.c/wizchip_conf.h</span></strong>です。このファイルでは使用するコントローラICチップ(W5500)の指定や、<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">w5500.c/w5500.h</span></strong>はコントローラW5500で使用する<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">socket.c/socket.h</span></strong>は<span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>TCPソケット通信</strong></span>で使用する関数群をまとめたものです。バークレーソケット(BSDソケット)に準じた関数となっています。</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">ioLibrary_driverフォルダ内に登録</span></strong>しておき、他はDHCPに関するものなど必要に応じて追加するのが良いと思います。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/LAN-setting.png" alt="" class="wp-image-10165" width="404" height="524" srcset="https://depfields.com/wp-content/uploads/2021/12/LAN-setting.png 404w, https://depfields.com/wp-content/uploads/2021/12/LAN-setting-231x300.png 231w" sizes="(max-width: 404px) 100vw, 404px" /><figcaption class="wp-element-caption">プロジェクトにドライバライブラリを追加登録</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">W5500のSPI通信とドライバのカスタマイズ</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>LANコントローラW5500には書き込み/読み込み等の操作、IPアドレス等パラメータ、プロトコル指定など仕様を設定するための<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>レジスタの詳細はW5500の取説に解説しており、かなりきめ細かな設定ができるようになっていますが、<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">SPI通信をインターフェース</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>ドライバのインターフェースのファイル（ｗizchip_func.ｃ)に<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>実際にどのような仕組みでレジスタを操作しているかを一度は取説を見ながらドライバ内の関数を順に追ってみるのがよいと思います。</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">W5500のSPIフレームフォーマット</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>W5500でのspi通信のフレームフォーマットでは1バイト(8ビット)ごとのブロックで下図に示す３フェイズで構成されます。上位・下位２バイト分の<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>



<figure class="wp-block-image size-large"><img decoding="async" width="598" height="169" src="https://depfields.com/wp-content/uploads/2021/12/spi-frame.png" alt="" class="wp-image-10174" srcset="https://depfields.com/wp-content/uploads/2021/12/spi-frame.png 598w, https://depfields.com/wp-content/uploads/2021/12/spi-frame-300x85.png 300w" sizes="(max-width: 598px) 100vw, 598px" /><figcaption class="wp-element-caption">W5500のSPIフレームフォーマット</figcaption></figure>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/Wizchip_write.png" alt="" class="wp-image-10164" width="580" height="387"/><figcaption class="wp-element-caption">ドライバ(W5500.c)におけるSPIフレーム　</figcaption></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer"><div class="vk_spacer-display-pc" style="height:20px"></div><div class="vk_spacer-display-tablet" style="height:10px"></div><div class="vk_spacer-display-mobile" style="height:5px"></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>STM32マイコンで定義する<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">SPI関連の関数（チップセレクト、送受信）をW5500ドライバに紐付ける</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>SPIインターフェース(ｗizchip_conf.c)で下記の<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">赤色で囲った部分を追加</span></strong>登録します。チップセレクト関数SPI_CS1_Select()/ SPI_CS1_Deselect() は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">STM32Nucleo用に自作</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/2021/12/modify1.png" alt="" class="wp-image-10168" width="388" height="221" srcset="https://depfields.com/wp-content/uploads/2021/12/modify1.png 388w, https://depfields.com/wp-content/uploads/2021/12/modify1-300x171.png 300w" sizes="(max-width: 388px) 100vw, 388px" /><figcaption class="wp-element-caption">SPIチップセレクト(wizchip_conf.c)</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>自作した送受信関数SPI_Send_Receive() も同様に追加登録します。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/modify2.png" alt="" class="wp-image-10169" width="471" height="229" srcset="https://depfields.com/wp-content/uploads/2021/12/modify2.png 471w, https://depfields.com/wp-content/uploads/2021/12/modify2-300x146.png 300w" sizes="(max-width: 471px) 100vw, 471px" /><figcaption class="wp-element-caption">SPI送受信関数 (wizchip_conf.c) </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>内容が異なる場合は上図で追加定義したSPI送受信関数を下図のようにドライバ定義の関数に紐付けします。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="544" height="469" src="https://depfields.com/wp-content/uploads/2021/12/modify3.png" alt="" class="wp-image-10199" srcset="https://depfields.com/wp-content/uploads/2021/12/modify3.png 544w, https://depfields.com/wp-content/uploads/2021/12/modify3-300x259.png 300w" sizes="(max-width: 544px) 100vw, 544px" /></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>です。その他、ビルドの際にそのままではエラーとなりますがインクルードするファイルパスを修正すればよいだけです。</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">自作したSPI関連関数を定義したファイル</span></strong>をSPIインターフェース(ｗizchip_conf.c)のヘッダファイルに<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>



<ul class="wp-block-list">
<li>wizchip_conf.h内 #include "W5500/w5500.h"を "W5500.h" に修正 </li>



<li>wizchip_conf.h内 #include  "net_func.h"(自作関数ファイル)を追加</li>



<li>w5500.h内 #include "Ethernet/wizchip_conf.h"を "wizchip_conf.h" に修正</li>



<li>socket.h内 #include "Ethernet/wizchip_conf.h"を "wizchip_conf.h" に修正 </li>
</ul>



<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><strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">SPIインターフェース(ｗizchip_conf.c)</span></strong>内で定義している<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">関数wizchip_init()</span></strong>で変数iが符号付きint8_t iで宣言されていて、このままだと色々warningがでるので<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">符号なしuint8_t iに変更</span></strong>しておいてください。</p>
</div>



<div class="wp-block-vk-blocks-spacer vk_spacer"><div class="vk_spacer-display-pc" style="height:20px"></div><div class="vk_spacer-display-tablet" style="height:10px"></div><div class="vk_spacer-display-mobile" style="height:5px"></div></div>



<h2 class="wp-block-heading">W5500初期設定</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>SPI通信でのインターフェースが準備できたら実際のプログラミングではドライバ内で定義している関数を利用して初期設定をします。.</p>
</div></div></div>



<h3 class="wp-block-heading">初期設定フロー</h3>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/W5500_setting.png" alt="" class="wp-image-10180" width="273" height="461" srcset="https://depfields.com/wp-content/uploads/2021/12/W5500_setting.png 273w, https://depfields.com/wp-content/uploads/2021/12/W5500_setting-178x300.png 178w" sizes="(max-width: 273px) 100vw, 273px" /><figcaption class="wp-element-caption"> 初期設定のフローチャート</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">W5500_ini()関数にまとめています</span></strong>。レジスタ操作するための関数はドライバの<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ヘッダファイルW5500.hで定義</span></strong>しています。</p>
</div></div></div>



<figure class="wp-block-image size-full is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/net_func.png" alt="" class="wp-image-10820" width="571" height="731" srcset="https://depfields.com/wp-content/uploads/2021/12/net_func.png 571w, https://depfields.com/wp-content/uploads/2021/12/net_func-234x300.png 234w" sizes="(max-width: 571px) 100vw, 571px" /><figcaption class="wp-element-caption"> プログラムにおける初期設定と自作関数 </figcaption></figure>



<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>W5500はマルチキャストなど高度な設定もできますがここでは簡単なシングルキャストの基本設定で初期化をします。</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>レジスタのリセット(MR_RST)発行を行い、PHY初期化、送信元(サーバー側）のMACアドレス、IPアドレス、そしてKeepAlive,タイムアウト等を登録します。</p>
</div></div></div>



<p><span style="background-color: #003300; color: #ffffff;">&nbsp;①　モードレジスタMRの初期化</span><span style="background-color: #003300; color: #ffffff;">&nbsp;</span></p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">MRレジスタ内のRSTビットを立ててリセットを実行。<br>実行関数： setMR(MR_RST) 　</p>



<p><span style="background-color: #003300; color: #ffffff;">&nbsp;②　PHY初期設定&nbsp;</span></p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">PHY設定をデフォルト値にリセット&nbsp; <br>実行関数：<br>v=getPHYCFGR() &amp; PHYCFGR_RST;<br>　setPHYCFGR(v);<br>v=getPHYCFGR() | ~PHYCFGR_RST;<br>　setPHYCFGR(v);<br><br> PHYモードはレジスタで細かく設定できますがここは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ピン43,44,45の回路設定 (すべてHi)を優先</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>



<p><span style="background-color: #003300; color: #ffffff;">&nbsp;③　MACアドレス、IPアドレス、GWアドレス、サブネットマスクの設定&nbsp;</span></p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">setSHAR(MAC_address);//マックアドレス設定<br>setSIPR(IP_address); //IPアドレス設定<br>setGAR(GW_address); //ゲートウェイ設定<br>setSUBR(SUBNET_mask);//サブネットマスク設定<br><br>IPアドレスなど<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">WIZCHIP_WRITE_BUF()関数</span></strong>を使っています。 製品化する場合、MACアドレス以外は書き換えられるようにしてEEPROM等のメモリに保存したものを使用します。</p>



<p><span style="background-color: #003300; color: #ffffff;">&nbsp;④　KeepAlive, タイムアウトの設定&nbsp;</span></p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">setSn_KPALVTR(SN, 6);//KeepAlive設定<br>setRTR(2000);//タイムアウト設定<br>setRCR(8);//タイムアウトリトライ回数設定<br>setSIMR(0b00000010) ;//ソケット1 割り込みマスク有効;<br>setSn_IMR(SN, Sn_IR_TIMEOUT);//タイムアウト割り込みマスク<br>setSn_IR(SN,0x1f);// 割り込みフラグリセット</p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">これらは必須のものではないですが使用状況に合わせて標準的なものを設定しておけばよいものです。 設定詳細はW5500データシート(英文)に記載しています。 </p>



<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>これまでの初期設定を完了させるとネットワーク層までの通信環境が整ったことになります。プログラム全容は下記のようになります。</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>初期化関数W5500_ini()やネット関連の自作関数等は別途モジュールnet_func.cにまとめていてそのヘッダファイルをインクルードしています。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="675" height="537" src="https://depfields.com/wp-content/uploads/2021/12/Ether_w5500.png" alt="" class="wp-image-10167" srcset="https://depfields.com/wp-content/uploads/2021/12/Ether_w5500.png 675w, https://depfields.com/wp-content/uploads/2021/12/Ether_w5500-300x239.png 300w" sizes="(max-width: 675px) 100vw, 675px" /><figcaption class="wp-element-caption">プログラム全体概要</figcaption></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer"><div class="vk_spacer-display-pc" style="height:20px"></div><div class="vk_spacer-display-tablet" style="height:10px"></div><div class="vk_spacer-display-mobile" style="height:5px"></div></div>



<h2 class="wp-block-heading">実際の動作確認</h2>



<p>接続準備が整ったところでいよいよLANに接続してネットワークに参加します。ネットワークアドレスは使用環境により異なりますので実際のものに合わせてください。</p>



<div class="wp-block-vk-blocks-spacer vk_spacer"><div class="vk_spacer-display-pc" style="height:20px"></div><div class="vk_spacer-display-tablet" style="height:10px"></div><div class="vk_spacer-display-mobile" style="height:5px"></div></div>



<h3 class="wp-block-heading">LANに接続したNucleo-F103RB＋W5500</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>プログラムを実行させると、設定したIPアドレスに属するネットワークアドレスをもった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>ここではネットワークアドレスが192.168.3でIPアドレスを192.168.3.100に設定しています。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="573" height="381" src="https://depfields.com/wp-content/uploads/2021/12/network_LAN.png" alt="" class="wp-image-10166" srcset="https://depfields.com/wp-content/uploads/2021/12/network_LAN.png 573w, https://depfields.com/wp-content/uploads/2021/12/network_LAN-300x199.png 300w" sizes="(max-width: 573px) 100vw, 573px" /></figure>



<h3 class="wp-block-heading">PINGコマンドによる接続確認</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のコマンドプロンプト画面から「ping」コマンドを実行してネットワーク内で認識されているかを確認します。 "ping 192.168.3.100"と入力した場合の応答を確認します。</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が通っていない状態を示しています。 </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>



<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応答がこのような場合はプログラムに何らかの不備がある可能性があるため、バグの原因を突き止めることになります。特にspi通信関連の動作確認とドライバ関連ファイルのパスは大切です。一度機能すれば大丈夫です。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="572" height="474" src="https://depfields.com/wp-content/uploads/2021/12/PING_NG.png" alt="" class="wp-image-10172" srcset="https://depfields.com/wp-content/uploads/2021/12/PING_NG.png 572w, https://depfields.com/wp-content/uploads/2021/12/PING_NG-300x249.png 300w" sizes="(max-width: 572px) 100vw, 572px" /></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>プログラムが正常に機能すると下の画面が現れます。この状態ではpingが通っているため、無事ネットワークに参加することができたことを示しています。</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>は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ICMPプロトコル</span></strong>のものなのでOSI参照モデルのネットワーク層まで通信システムが確立したことになります。</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コマンドだけでは通信チェック以外には何の仕事もできないのですが、ここまでのネットワークを確立できると、あとは上位の<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">HTTPプロトコルを搭載して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>今回はIPアドレスはメモリに保存した固定値"192.168.3.100"を使用しています。ここでは解説しませんが、DHCP機能を搭載するとDHCPサーバーから自動的に割り当てられたIPアドレスを使用できるようになります。</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>します。 </p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/12/PING_GOOD.png" alt="" class="wp-image-10173" width="573" height="458" srcset="https://depfields.com/wp-content/uploads/2021/12/PING_GOOD.png 589w, https://depfields.com/wp-content/uploads/2021/12/PING_GOOD-300x240.png 300w" sizes="(max-width: 573px) 100vw, 573px" /></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>初めてネット接続を試みるとハードウェアとのからみがあるためpingが通るまでが大変ですが、一度pingが通ればネット通信はほぼ完成みたいなものです。ここまでくればあとはソフトウェアによりソケット通信やwebサーバー等に発展させていくことができます。</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/ethernet/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img decoding="async" 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 decoding="async" class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/d7fa6d25ddf7bbb2c5f589e5a7b799581b146a24b1829afc5af170c4c5c53cdd.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">Microcontroller Ethernet-enabled system design [STM32Nucleo] | Most Powerful ...</div><div class="lkc-url" title="https://en.depfields.com/ethernet/">https://en.depfields.com/ethernet/</div><div class="lkc-excerpt">Fundamentals for connecting MCUs to the InternetThe IoT, which is used by connecting to a network, has been spreading to embedded devices as well. While WiFi network connections are common for home appliances such as televisions</div></div><div class="clear">
							</div>
						</div></a></div></div><p>The post <a href="https://depfields.com/ethernet/">マイコンのEthernet対応システム設計【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>加速度センサ・ジャイロセンサによる姿勢検知【STM32Nucleo】</title>
		<link>https://depfields.com/accel-gyro/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=accel-gyro</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Sun, 11 Jul 2021 06:59:24 +0000</pubDate>
				<category><![CDATA[計測アプリ]]></category>
		<category><![CDATA[計測]]></category>
		<category><![CDATA[I2C]]></category>
		<category><![CDATA[モーションコントロール]]></category>
		<category><![CDATA[フィードバック制御]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=9649</guid>

					<description><![CDATA[<p>加速度センサ・ジャイロセンサ（MPU-6050)を搭載したセンサボードGY-521は 3軸加速度、 3軸ジャイロデータをインターフェースI2Cで簡単に取得でき、情報量も多く安価でお勧めなボードです。 ただし、ネット情報で [&#8230;]</p>
<p>The post <a href="https://depfields.com/accel-gyro/">加速度センサ・ジャイロセンサによる姿勢検知【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img decoding="async" width="620" height="552" src="https://depfields.com/wp-content/uploads/2021/07/gyro-scope.png" class="attachment-large size-large wp-post-image" alt="" srcset="https://depfields.com/wp-content/uploads/2021/07/gyro-scope.png 620w, https://depfields.com/wp-content/uploads/2021/07/gyro-scope-300x267.png 300w" sizes="(max-width: 620px) 100vw, 620px" /></div>
<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-sm--margin-top"></div></div>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">加速度センサ・ジャイロセンサ（MPU-6050)を搭載したセンサボードGY-521は 3軸加速度、 3軸ジャイロデータをインターフェースI<sup>2</sup>Cで簡単に取得でき、情報量も多く安価でお勧めなボードです。</p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">ただし、ネット情報ではほとんどが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>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">そこで、今回の記事では加速度センサ・ジャイロセンサ（MPU-6050)の仕様書から要所を把握して、I<sup>2</sup>C通信の基本を押さえながら使いこなせるまでを解説していきます。 </p>







<h2 class="wp-block-heading">加速度・ジャイロセンサボード</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>X,Y,Z3軸傾斜角をはじめから求めようとするとかなり複雑のため、この記事では1軸分(Y軸)まわりの傾斜角を加速度センサおよびジャイロセンサから算出する方法を解説します。</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>MPU-6050では下図の向きにX、Y、Z軸を設定しています。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/MPU6050-Axis.jpg" alt="" class="wp-image-9654" width="307" height="280" srcset="https://depfields.com/wp-content/uploads/2021/07/MPU6050-Axis.jpg 307w, https://depfields.com/wp-content/uploads/2021/07/MPU6050-Axis-300x274.jpg 300w" sizes="(max-width: 307px) 100vw, 307px" /><figcaption>MPU-6050</figcaption></figure>



<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>加速度センサでY軸まわりに<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">θ<sub>y</sub>傾斜する場合</span></strong>は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">Z軸方向およびX軸方向の重力比率より傾斜角θ<sub>y</sub>は逆三角関数を使用すると算出</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><a aria-label="加速度センサアプリ (opens in a new tab)" href="https://depfields.com/accel-apl/" target="_blank" rel="noreferrer noopener"><strong>加速度センサアプリ</strong></a>でも説明しましたが、加速度センサの重力(1G)成分による各軸の値a<sub>x</sub>,a<sub>y</sub>,a<sub>z</sub>は重力に対する抗力の向きとなりますので、下図のようにY軸中心に座標を正方向θ<sub>Y</sub>傾斜したとき、重力Z軸成分(1G<sub>Z</sub>)の抗力<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">a<sub>z</sub>は正値</span></strong>で、X軸成分(1G<sub>X</sub>)の抗力<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">a<sub>x</sub>は負値</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>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2021/07/accel_sensor.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/accel_sensor2.png" alt="" class="wp-image-9809" width="283" height="296"/></a><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">オフセットθ<sub>offset</sub>分</span></strong>を<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">差し引くと、任意の角度で基準0°にプリセットできる</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>とすることができます。逆三角関数を使用した場合の角度は単位がradのため、必要に応じて°に変換します。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2021/07/angle_accel.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/angle_accel.png" alt="" class="wp-image-9812" width="474" height="133"/></a><figcaption> 加速度センサによる角度の算出 </figcaption></figure>



<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">ジャイロセンサ</span></strong>の場合、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">データg<sub>y</sub>はY軸まわりの回転時の角速度</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">16ビットデータをスケールに応じた角速度（°/s）に変換</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>



<figure class="wp-block-image size-large"><a href="https://depfields.com/wp-content/uploads/2021/07/angle_gyro.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/angle_gyro.png" alt="" class="wp-image-9707"/></a><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">離散化した近似</span></strong>です。最もシンプルな積分は下図のアルゴリズムです。サンプリングタイムTsが十分小さい場合はこれでも問題はありません。</p>
</div></div></div>



<figure class="wp-block-image size-large"><a href="https://depfields.com/wp-content/uploads/2021/07/digital-integral.png"><img decoding="async" width="467" height="258" src="https://depfields.com/wp-content/uploads/2021/07/digital-integral.png" alt="" class="wp-image-9689" srcset="https://depfields.com/wp-content/uploads/2021/07/digital-integral.png 467w, https://depfields.com/wp-content/uploads/2021/07/digital-integral-300x166.png 300w" sizes="(max-width: 467px) 100vw, 467px" /></a></figure>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2021/07/angle_gyro2.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/angle_gyro2.png" alt="" class="wp-image-9793" width="488" height="197"/></a><figcaption> 角速度から角度への算出 </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>ジャイロセンサの場合、角度は角速度を積分して算出されるために、<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">静止した初期状態でオフセットが存在していて０°/sでなければ誤差が大きめに累積</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>。</p>
</div>



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



<h2 class="wp-block-heading">MPU-6050とNucleoボードとの結線図</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>MPU-6050をNucleo-F103RBに接続して使用する場合の配線例を下図に示します。</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>センサボードGY-521の電源にはLDOレギュレータを内蔵していますので5Vを接続します。</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>データ出力インターフェースはI<sup>2</sup>C通信のため、STM32側ではI<sup>2</sup>C2に接続します。I<sup>2</sup>CのI/Oはオープンドレインに設定しますので<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">通常ではプルアップ抵抗が必要</span></strong>ですが、センサボードGY-521には予め含まれています。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2021/07/wiring.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/wiring.png" alt="" class="wp-image-9890" width="580" height="443"/></a><figcaption> 配線図 </figcaption></figure>



<h2 class="wp-block-heading">プログラミングによるデータ算出</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>まず、はじめの関門はI<sup>2</sup>C通信の設定およびデータ読み書きを正常に実現することです。データを任意に安定して読み込めることができればあとはこれまでに解説した方法でデータを演算して角度を算出するだけです。</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>I<sup>2</sup>C通信デバイスを使用するために、I2C2_Configuration()でまず初期設定をします。これは他のI<sup>2</sup>Cデバイスと同様です。詳細は<a href="https://depfields.com/i2c/" target="_blank" aria-label="シリアル通信I2C【STM32のI2C詳細】 (opens in a new tab)" rel="noreferrer noopener"><strong>シリアル通信I2C【STM32のI2C詳細】</strong></a>を参照してください。</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>I2C2の初期設定のあとはMPU-6050の設定をします。設定はレジスタに値を書き込みます。すべてデフォルトで使用する場合は必要ありませんが、デバイスに内蔵のデジタルフィルタを使用したり、データのフルスケールを変更設定する場合には必要です。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2021/07/main.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/main.png" alt="" class="wp-image-9726" width="591" height="324" srcset="https://depfields.com/wp-content/uploads/2021/07/main.png 663w, https://depfields.com/wp-content/uploads/2021/07/main-300x165.png 300w" sizes="(max-width: 591px) 100vw, 591px" /></a><figcaption>デバイス初期設定</figcaption></figure>



<h3 class="wp-block-heading">I<sup>2</sup>C設定とデータ書き込み・読み込み</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>I<sup>2</sup>C通信では1バイト単位でデータを読み書きするのですが、データ読み込みでは個々のバイトデータを単独で読み込むのではなく、一度に複数バイトを読み込む方が効率的です。</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">加速度センサのX軸のデータアドレス3Bから14バイト分を読み込んでデータを配列に格納するだけでよい</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">所望のレジスタに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">ポイント</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>で、I<sup>2</sup>Cのアドレス送信関数I2C_Send7bitAddress()では<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">アドレスは1バイト枠で左詰め7ビット分</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>ライブラリ関数の中身を確認して動作をたどると理解できると思います。</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">I<sup>2</sup>Cデバイスのスレーブアドレスが0x68の場合は1ビット分左シフトした0xD0を送信関数I2C_Send7bitAddress()に与えるアドレス</span></strong>とします。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2021/07/i2c-write-byte.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/i2c-write-byte.png" alt="" class="wp-image-9728" width="593" height="252" srcset="https://depfields.com/wp-content/uploads/2021/07/i2c-write-byte.png 634w, https://depfields.com/wp-content/uploads/2021/07/i2c-write-byte-300x127.png 300w" sizes="(max-width: 593px) 100vw, 593px" /></a><figcaption>I2C書き込み関数</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>。</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">最後のバイトデータ受信直前でACKを返さないNACKとすることがポイント</span></strong>です。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2021/07/i2c-read-multibyte.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/i2c-read-multibyte.png" alt="" class="wp-image-9727" width="592" height="485" srcset="https://depfields.com/wp-content/uploads/2021/07/i2c-read-multibyte.png 631w, https://depfields.com/wp-content/uploads/2021/07/i2c-read-multibyte-300x246.png 300w" sizes="(max-width: 592px) 100vw, 592px" /></a><figcaption>I2C複数バイト読み込み関数</figcaption></figure>



<h3 class="wp-block-heading">MPU-6050の初期設定</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> MPU-6050 は初期設定としてレジスタへ<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>加速度センサおよびジャイロセンサにより角度を取得するだけならばデフォルト設定でも使えますが取扱うレジスタはせいぜい下記の程度です。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2021/07/program1.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/program1.png" alt="" class="wp-image-9749" width="443" height="439" srcset="https://depfields.com/wp-content/uploads/2021/07/program1.png 392w, https://depfields.com/wp-content/uploads/2021/07/program1-300x298.png 300w, https://depfields.com/wp-content/uploads/2021/07/program1-150x150.png 150w" sizes="(max-width: 443px) 100vw, 443px" /></a><figcaption>レジスタアドレス</figcaption></figure>



<p><span style="background-color: #003300; color: #ffffff;">　クロック源の指定　</span></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>クロック源を指定することで MPU-6050は機能始めます。クロック源は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">レジスタアドレス6Bの下位3ビット分に設定</span></strong>します。電源投入時のデフォルトでは内部発振8MHzとなっています。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/register_6b.png" alt="" class="wp-image-9677"/></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="374" height="185" src="https://depfields.com/wp-content/uploads/2021/07/clk_config.png" alt="" class="wp-image-9672" srcset="https://depfields.com/wp-content/uploads/2021/07/clk_config.png 374w, https://depfields.com/wp-content/uploads/2021/07/clk_config-300x148.png 300w" sizes="(max-width: 374px) 100vw, 374px" /></figure>



<p><span style="background-color: #003300; color: #ffffff;">　フィルタの指定　</span></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>MPU-6050には出力にノイズ対策の<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">レジスタアドレス1Aの下位3ビットに0から6までの値を設定</span></strong>します。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/register_1a.png" alt="" class="wp-image-9674"/></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="515" height="222" src="https://depfields.com/wp-content/uploads/2021/07/lpf_config.png" alt="" class="wp-image-9673" srcset="https://depfields.com/wp-content/uploads/2021/07/lpf_config.png 515w, https://depfields.com/wp-content/uploads/2021/07/lpf_config-300x129.png 300w" sizes="(max-width: 515px) 100vw, 515px" /></figure>



<p><span style="background-color: #003300; color: #ffffff;">　ジャイロセンサスケールの指定　</span></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">レジスタアドレス1B</span></strong>では<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ジャイロセンサフルスケールを0から3までの値で設定</span></strong>します。デフォルトでは±250°/sです。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/register_1b.png" alt="" class="wp-image-9675"/></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="219" height="101" src="https://depfields.com/wp-content/uploads/2021/07/gyro_config.png" alt="" class="wp-image-9669"/></figure>



<p><span style="background-color: #003300; color: #ffffff;">　加速度センサスケールの指定　</span></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><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><strong>レジスタアドレス1C</strong></span>では<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">加速度センサフルスケールを0から3までの値で設定</span></strong>します。デフォルトでは±2gです。 </p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/register_1c.png" alt="" class="wp-image-9676"/></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="222" height="115" src="https://depfields.com/wp-content/uploads/2021/07/accel_config.png" alt="" class="wp-image-9668"/></figure>



<p><span style="background-color: #003300; color: #ffffff;">　加速度センサデータの読み込み　</span></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>加速度センサの各軸データは16ビットですが、データ格納アドレスは8ビットですので上位8ビット、下位8ビットで構成されます。X軸、Y軸、Z軸のデータは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">レジスタアドレス3BよりX軸上位、下位...と順に格納</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>データについては例えばフルスケールが±2gの場合は、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">+2g時に32768</span></strong>となるので<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">1g当たり16384</span></strong>となります。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="667" height="140" src="https://depfields.com/wp-content/uploads/2021/07/register_accel.png" alt="" class="wp-image-9678" srcset="https://depfields.com/wp-content/uploads/2021/07/register_accel.png 667w, https://depfields.com/wp-content/uploads/2021/07/register_accel-300x63.png 300w" sizes="(max-width: 667px) 100vw, 667px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="422" height="119" src="https://depfields.com/wp-content/uploads/2021/07/accel_scale.png" alt="" class="wp-image-9670" srcset="https://depfields.com/wp-content/uploads/2021/07/accel_scale.png 422w, https://depfields.com/wp-content/uploads/2021/07/accel_scale-300x85.png 300w" sizes="(max-width: 422px) 100vw, 422px" /></figure>



<p><span style="background-color: #003300; color: #ffffff;">ジャイロセンサデータの読み込み　</span></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>ジャイロセンサの各軸データも加速度センサと同様にX軸、Y軸、Z軸のデータは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">レジスタアドレス43よりX軸上位、下位...と順に格納</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>データについては例えばフルスケールが±250°/sの場合は、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">+250°/s 時に32768</span></strong>となるので<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">1°/s当たり131</span></strong>となります。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="653" height="139" src="https://depfields.com/wp-content/uploads/2021/07/register_gyro.png" alt="" class="wp-image-9679" srcset="https://depfields.com/wp-content/uploads/2021/07/register_gyro.png 653w, https://depfields.com/wp-content/uploads/2021/07/register_gyro-300x64.png 300w" sizes="(max-width: 653px) 100vw, 653px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="339" height="106" src="https://depfields.com/wp-content/uploads/2021/07/gyro_scale.png" alt="" class="wp-image-9671" srcset="https://depfields.com/wp-content/uploads/2021/07/gyro_scale.png 339w, https://depfields.com/wp-content/uploads/2021/07/gyro_scale-300x94.png 300w" sizes="(max-width: 339px) 100vw, 339px" /></figure>



<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>加速度およびジャイロセンサからのデータが取得できるようになるといよいよそれぞれのデータから角度を算出できるようになります。</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>I2C_Read_multibyte()関数による複数バイト読み込みで格納したデータにより加速度およびジャイロセンサ各軸の16ビット値が取得できます。</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>



<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>ジャイロセンサからの角速度データを積分して角度を算出するためのサンプリングタイムを正確に5msとするために<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">RTOSの機能を利用</span></strong>しています。詳細は<a aria-label="FreeRTOSタスク管理の基本 (opens in a new tab)" href="https://depfields.com/task/" target="_blank" rel="noreferrer noopener"><strong>FreeRTOSタスク管理の基本</strong></a>を参照してください。</p>
</div></div></div>



<figure class="wp-block-image size-large"><a href="https://depfields.com/wp-content/uploads/2021/07/program_angle.png"><img decoding="async" width="550" height="748" src="https://depfields.com/wp-content/uploads/2021/07/program_angle.png" alt="" class="wp-image-9878" srcset="https://depfields.com/wp-content/uploads/2021/07/program_angle.png 550w, https://depfields.com/wp-content/uploads/2021/07/program_angle-221x300.png 221w" sizes="(max-width: 550px) 100vw, 550px" /></a><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">相補フィルタ</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>では<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>では<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>そこで<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">加速度センサ出力にはローパルフィルタ(LPF)</span></strong>により低周波部分だけをとりだし、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">ジャイロセンサ出力にはハイパスフィルタ(HPF)</span></strong>により、ドリフト分をキャンセルすることができます。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2021/07/complementary_filter2.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/complementary_filter2.png" alt="" class="wp-image-9734" width="530" height="83" srcset="https://depfields.com/wp-content/uploads/2021/07/complementary_filter2.png 530w, https://depfields.com/wp-content/uploads/2021/07/complementary_filter2-300x47.png 300w" sizes="(max-width: 530px) 100vw, 530px" /></a><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><a href="https://depfields.com/complementary-filter/" target="_blank" aria-label="相補フィルタのしくみを解明してみる【加速度・ジャイロセンサ】 (opens in a new tab)" rel="noreferrer noopener">相補フィルタのしくみを解明してみる【加速度・ジャイロセンサ】</a></strong>で詳細を解説しています。</p>
</div></div></div>



<h2 class="wp-block-heading">実測結果</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">横軸は経過時間(s)、縦軸は角度(°)</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">プログラム内で積分したものなのでノイズもなく滑らかですが、累積誤差によるドリフトが発生しています</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>になっていて<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">カットオフ周波数は2Hzに設定</span></strong>したものです。</p>
</div></div></div>



<figure class="wp-block-image size-large"><a href="https://depfields.com/wp-content/uploads/2021/07/angle_output.png"><img decoding="async" width="617" height="382" src="https://depfields.com/wp-content/uploads/2021/07/angle_output.png" alt="" class="wp-image-9657" srcset="https://depfields.com/wp-content/uploads/2021/07/angle_output.png 617w, https://depfields.com/wp-content/uploads/2021/07/angle_output-300x186.png 300w" sizes="(max-width: 617px) 100vw, 617px" /></a><figcaption> カットオフ周波数：2Hz </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">4Hzと2Hzで比べ</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">カットオフ周波数を4Hzに設定した場合</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>います。<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"><a href="https://depfields.com/wp-content/uploads/2021/07/angle_output_4Hz.png"><img decoding="async" width="562" height="421" src="https://depfields.com/wp-content/uploads/2021/07/angle_output_4Hz.png" alt="" class="wp-image-9659" srcset="https://depfields.com/wp-content/uploads/2021/07/angle_output_4Hz.png 562w, https://depfields.com/wp-content/uploads/2021/07/angle_output_4Hz-300x225.png 300w" sizes="(max-width: 562px) 100vw, 562px" /></a><figcaption>カットオフ周波数：4Hz</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">カットオフ周波数を2Hzに設定した場合</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>になっています。<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"><a href="https://depfields.com/wp-content/uploads/2021/07/angle_output_2Hz.png"><img decoding="async" width="606" height="367" src="https://depfields.com/wp-content/uploads/2021/07/angle_output_2Hz.png" alt="" class="wp-image-9658" srcset="https://depfields.com/wp-content/uploads/2021/07/angle_output_2Hz.png 606w, https://depfields.com/wp-content/uploads/2021/07/angle_output_2Hz-300x182.png 300w" sizes="(max-width: 606px) 100vw, 606px" /></a><figcaption> カットオフ周波数：2Hz </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>下の図はカットオフ周波数を2Hzの場合で、少し速い動作をさせてみた出力結果です。</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>では<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>ではこのような動作でも遅れは見られず<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>



<figure class="wp-block-image size-large"><a href="https://depfields.com/wp-content/uploads/2021/07/angle_output2.png"><img decoding="async" width="575" height="408" src="https://depfields.com/wp-content/uploads/2021/07/angle_output2.png" alt="" class="wp-image-9660" srcset="https://depfields.com/wp-content/uploads/2021/07/angle_output2.png 575w, https://depfields.com/wp-content/uploads/2021/07/angle_output2-300x213.png 300w" sizes="(max-width: 575px) 100vw, 575px" /></a><figcaption>カットオフ周波数2Hzにおける少し速い動作</figcaption></figure>



<div class="wp-block-vk-blocks-spacer vk_spacer"><div class="vk_spacer-display-pc" style="height:20px"></div><div class="vk_spacer-display-tablet" style="height:10px"></div><div class="vk_spacer-display-mobile" style="height:5px"></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>廉価で人気のあるセンサボードGY-521(MPU-6050)をSTM32Nucleoボードに接続して傾斜角を算出する過程を解説しました。たかだか角度算出のためにと思われるかもしれませんが、ここまで踏み込んで動作を確認すると<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>ようになります。</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>STM32Nucleoで角度および角速度を取得できる手段を獲得できたところで、ようやく倒立振子を実現する道具が揃いました。現代制御理論による倒立振子のコントロールに関しては<strong><a href="https://depfields.com/controltheory-modern/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">マイコンで実現するフィードバック制御のための基礎知識【番外編】</a></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/accel-gyro/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img decoding="async" 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 decoding="async" class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/8110ed110cfd7bc43cc28ed559ae0b54245c8c842dbcfdb782064992266be621.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">Posture detection by accelerometer and gyro sensor [STM32Nucleo] | Most Power...</div><div class="lkc-url" title="https://en.depfields.com/accel-gyro/">https://en.depfields.com/accel-gyro/</div><div class="lkc-excerpt">The GY-521 Sensor Board with Accelerometer and Gyro Sensor (MPU-6050) can easily acquire 3-axis acceleration and 3-axis gyro data via I2C interface, and is recommended for its high information content and low cost.However, most of the</div></div><div class="clear">
							</div>
						</div></a></div></div><p>The post <a href="https://depfields.com/accel-gyro/">加速度センサ・ジャイロセンサによる姿勢検知【STM32Nucleo】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>相補フィルタのしくみを解明してみる【加速度・ジャイロセンサ】</title>
		<link>https://depfields.com/complementary-filter/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=complementary-filter</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Mon, 12 Jul 2021 05:00:37 +0000</pubDate>
				<category><![CDATA[計測アプリ]]></category>
		<category><![CDATA[フィードバック制御]]></category>
		<category><![CDATA[計測]]></category>
		<category><![CDATA[モーションコントロール]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=9582</guid>

					<description><![CDATA[<p>加速度・ジャイロセンサを組み合わせて使うのに相補フィルタがよく用いられますがその詳細に関する解説はあまり見かけません。どのような過程で相補フィルタの式が導かれ、式が何を意味しているかは知りたいところです。比較的単純な式の [&#8230;]</p>
<p>The post <a href="https://depfields.com/complementary-filter/">相補フィルタのしくみを解明してみる【加速度・ジャイロセンサ】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img decoding="async" width="616" height="291" src="https://depfields.com/wp-content/uploads/2021/07/complementary_filter.png" class="attachment-large size-large wp-post-image" alt="" srcset="https://depfields.com/wp-content/uploads/2021/07/complementary_filter.png 616w, https://depfields.com/wp-content/uploads/2021/07/complementary_filter-300x142.png 300w" sizes="(max-width: 616px) 100vw, 616px" /></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"><a href="https://depfields.com/accel-gyro/" target="_blank" rel="noreferrer noopener" title="加速度センサ・ジャイロセンサによる姿勢検知【STM32Nucleo】">加速度・ジャイロセンサ</a>を組み合わせて使う</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>



<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">加速度センサ</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>



<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">加速度センサは動きを検出するセンサ</span></strong>で姿勢位置を得るには<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">x,y,z3軸にかかる重力</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>



<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">ジャイロセンサは それぞれx,y,z3軸の角速度を検出</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>



<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">重力以外の成分も加わる</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>するために<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">誤差成分も累積してドリフト（オフセット）</span></strong>が生じてしまいます。</p>



<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">相補フィルタ</span></strong>というものがあります。</p>







<h2 class="wp-block-heading">相補フィルタの構成</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">相補フィルタ</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>では<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"><a href="https://ja.wikipedia.org/wiki/%E3%83%AD%E3%83%BC%E3%83%91%E3%82%B9%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF" target="_blank" rel="noreferrer noopener">ローパスフィルタ(LPF)</a></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>では<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"><a href="https://ja.wikipedia.org/wiki/%E3%83%8F%E3%82%A4%E3%83%91%E3%82%B9%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF" target="_blank" rel="noreferrer noopener">ハイパスフィルタ（HPF)</a></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/2021/07/complementary-filter.png" alt="" class="wp-image-9586" width="366" height="308" srcset="https://depfields.com/wp-content/uploads/2021/07/complementary-filter.png 366w, https://depfields.com/wp-content/uploads/2021/07/complementary-filter-300x252.png 300w" sizes="(max-width: 366px) 100vw, 366px" /><figcaption class="wp-element-caption">相補フィルタ構成図</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>と呼ばれます。</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>相補フィルタに使用するLPFとHPFには条件があり、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">任意の周波数でフィルタゲインの和が1</span></strong>であることです。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2021/07/filter-condition.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/filter-condition.png" alt="" class="wp-image-9640" width="566" height="274"/></a><figcaption class="wp-element-caption">相補フィルタ構成条件</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>わざわざ相補フィルタを使わなくても、単独の加速度センサにはローパスフィルタ(LPF)を、あるいは単独のジャイロセンサにはハイパスフィルタ(HPF)を通すだけでいいようにも思われますが、これらの場合には<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>してしまいます。２つのセンサの長所を利用することで理想の出力が得られるのがこの<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-height"><div class="vk_block-margin-md--height"></div></div>



<h2 class="wp-block-heading">相補フィルタの周波数特性</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">相補フィルタのLPFとHPF</span></strong>で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">カットオフ周波数を2Hz</span></strong>とした場合の特性を周波数領域のボード線図で表すと下図のようになります。縦軸はゲインを表していて単位はdB(デシベル）ですが、この条件では<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">LPFとHPFのゲインは足すと全領域で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">LPFはカットオフ周波数fc以上の高周波成分を除去</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">HPFはカットオフ周波数fc以下の低周波成分を除去</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">カットオフ周波数fc</span></strong>が2Hzとした場合はほぼジャイロセンサによる情報が優勢になります。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">最終的には出力を見ながらfcを微調整</span></strong>をすればよいと思います。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="617" height="340" src="https://depfields.com/wp-content/uploads/2021/07/bode-plot-1.png" alt="" class="wp-image-9857" srcset="https://depfields.com/wp-content/uploads/2021/07/bode-plot-1.png 617w, https://depfields.com/wp-content/uploads/2021/07/bode-plot-1-300x165.png 300w" sizes="(max-width: 617px) 100vw, 617px" /><figcaption class="wp-element-caption"> 相補フィルタLPF/HPFボード線図 </figcaption></figure>



<h2 class="wp-block-heading">相補フィルタの算出過程</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>相補フィルタは結果の式だけ知っていれば使用はできるのですが、式の意味を知らなければなんとなくの当てずっぽうで係数等のパラメータ値を決めることになります。</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>フィードバック制御のための基礎知識<a aria-label="【準備編】 (opens in a new tab)" href="https://depfields.com/controltheory-preparation/" target="_blank" rel="noreferrer noopener">【準備編】</a><a aria-label="【解析編】 (opens in a new tab)" href="https://depfields.com/controltheory-analysis/" target="_blank" rel="noreferrer noopener">【解析編】</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">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>がわかっていれば理解できます。</p>
</div></div></div>



<figure class="wp-block-image size-large"><a href="https://depfields.com/wp-content/uploads/2021/07/step.png"><img decoding="async" src="https://depfields.com/wp-content/uploads/2021/07/step.png" alt="" class="wp-image-9645"/></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>ようやくよく目にする相補フィルタの式を導きました。これは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">１次フィルタの場合</span></strong>です。これで重み係数Kの意味もわかると思います。</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">係数Kはカットオフ周波数fcとサンプリングタイムT<sub>S</sub> で決まる</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/2021/07/step5.png" alt="" class="wp-image-9595" width="389" height="154" srcset="https://depfields.com/wp-content/uploads/2021/07/step5.png 389w, https://depfields.com/wp-content/uploads/2021/07/step5-300x119.png 300w" sizes="(max-width: 389px) 100vw, 389px" /></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>一般的に出回っている相補フィルタ情報の中には加速度センサとジャイロセンサの出力に係数Kを重みとしてかけた解釈のものもありますが、これでは意味をなしません。</p>
</div></div></div>



<figure class="wp-block-image size-large"><img decoding="async" width="494" height="101" src="https://depfields.com/wp-content/uploads/2021/07/step6.png" alt="" class="wp-image-9597" srcset="https://depfields.com/wp-content/uploads/2021/07/step6.png 494w, https://depfields.com/wp-content/uploads/2021/07/step6-300x61.png 300w" sizes="(max-width: 494px) 100vw, 494px" /></figure>



<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">式の内容をブラックボックスでなく理解できていると安心して使用できる</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/complementary-filter/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img decoding="async" 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>&nbsp;<div class="lkc-share"> <div class="lkc-sns-po">1 Pocket</div></div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img decoding="async" class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/d42fb3d61698344d4fa206b670608c618a3edea1e6e0a241780ee9e6a8543e09.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">Let&#039;s clarify the mechanism of the complementary filter [acceleration/gy...</div><div class="lkc-url" title="https://en.depfields.com/complementary-filter/">https://en.depfields.com/complementary-filter/</div><div class="lkc-excerpt">Complementary filters are often used to combine accelerometers and gyroscopes, but there are few explanations on the details of these filters. It is interesting to know how the complementary filter equation is derived and what the equation</div></div><div class="clear">
							</div>
						</div></a></div></div><p>The post <a href="https://depfields.com/complementary-filter/">相補フィルタのしくみを解明してみる【加速度・ジャイロセンサ】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>STM32マイコンのシリアル通信でセンサデータをグラフ化・収集してみる</title>
		<link>https://depfields.com/datalogger/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=datalogger</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Sat, 29 Aug 2020 05:55:52 +0000</pubDate>
				<category><![CDATA[計測アプリ]]></category>
		<category><![CDATA[計測]]></category>
		<category><![CDATA[USART]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=7222</guid>

					<description><![CDATA[<p>アプリケーションを作成しているとマイコンに取り込んだセンサデータなどのデジタルデータをオシロスコープのようにリアルタイムでグラフ化しながら収集したいことはよくあります。シリアル通信を使ってPCモニターにデータを表示させな [&#8230;]</p>
<p>The post <a href="https://depfields.com/datalogger/">STM32マイコンのシリアル通信でセンサデータをグラフ化・収集してみる</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img decoding="async" width="640" height="480" src="https://depfields.com/wp-content/uploads/2020/11/data_logger.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="https://depfields.com/wp-content/uploads/2020/11/data_logger.jpg 640w, https://depfields.com/wp-content/uploads/2020/11/data_logger-300x225.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /></div>
<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">アプリケーションを作成しているとマイコンに取り込んだセンサデータなどのデジタルデータをオシロスコープのようにリアルタイムでグラフ化しながら収集したいことはよくあります。シリアル通信を使ってPCモニターにデータを表示させながらマイクロソフトExcelに取り込むことができる簡単に扱えるデータロガーを紹介します。</p>







<h2 class="wp-block-heading">データロガーアプリとは</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">センサデータなどはターミナルアプリを使って、PCなどのモニターに出力して表示</span></strong>してきました。これらのデータはリアルタイムで確認できるのですが、数値の表示ですのでデータ変化の様子はつかみにくいです。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/ターミナル.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/ターミナル.jpg" alt="" class="wp-image-7236" width="495" height="193" srcset="https://depfields.com/wp-content/uploads/2020/11/ターミナル.jpg 494w, https://depfields.com/wp-content/uploads/2020/11/ターミナル-300x117.jpg 300w" sizes="(max-width: 495px) 100vw, 495px" /></a><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">モータの回転速度や位置など経時変化するデータ</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>や、<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"><a href="https://depfields.com/wp-content/uploads/2020/11/データロガー.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/データロガー.jpg" alt="" class="wp-image-7237" width="480" height="194" srcset="https://depfields.com/wp-content/uploads/2020/11/データロガー.jpg 479w, https://depfields.com/wp-content/uploads/2020/11/データロガー-300x122.jpg 300w" sizes="(max-width: 480px) 100vw, 480px" /></a><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">データロガー</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">Excelファイル(csvフォーマット）に保存</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>私自身も、以前はVB(Visual Basic)やC#などで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">フリーソフトとして利用</span></strong>できればそれを利用しない手はないです。</p>
</div></div></div>



<h2 class="wp-block-heading">おすすめデータロガーフリーアプリ</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">CPLT</span></strong>（<a href="https://www.datatecno.co.jp/" target="_blank" aria-label=" (opens in a new tab)" rel="noreferrer noopener"><strong>ダウンロード先ホームページ</strong></a>）がお勧めです。</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>だけをすれば、すぐに使用できるとてもシンプルで実用的なアプリでフリーで提供いただけることに感謝します。</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>CPLT Version</strong> <strong>xxx</strong> の圧縮ファイルをダウンロードしてから解凍し、実行ファイルをダブルクリックするとアプリは起動します。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/CPLT.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/CPLT.jpg" alt="" class="wp-image-7243" width="682" height="491" srcset="https://depfields.com/wp-content/uploads/2020/11/CPLT.jpg 698w, https://depfields.com/wp-content/uploads/2020/11/CPLT-300x216.jpg 300w" sizes="(max-width: 682px) 100vw, 682px" /></a><figcaption>CPLT Ver.1.04 起動画面</figcaption></figure>



<h2 class="wp-block-heading">実際のアプリ活用方法</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/thermometer-apl/">STM32マイコン Nucleoボードを使った温度計</a></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>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/09/circuit.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/09/circuit.jpg" alt="" class="wp-image-6725" width="497" height="350" srcset="https://depfields.com/wp-content/uploads/2020/09/circuit.jpg 497w, https://depfields.com/wp-content/uploads/2020/09/circuit-300x211.jpg 300w" sizes="(max-width: 497px) 100vw, 497px" /></a><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>設定(S)</strong>でCOMポート はUSBで認識したもの、 通信条件は プログラム内で設定したもの(9800,8bit,パリティなし,ストップビット1)に合わせます。</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>で2つ目は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">温度</span></strong>に指定します。各チャネルの属性でそれぞれ名前、単位および目盛りあたりのデータ値（スケール）を指定します。横軸には１目盛りあたりのデータ数を指定します。例えば、1プロットを0.5s間隔で送信している場合は1目盛りあたりのデータ数を10とすると1目盛りが5sに相当します。</p>
</div></div></div>



<h2 class="wp-block-heading">データロガー用プログラム</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>温度計アプリプログラム(temp monitor.c)のシリアル送信部のみデータロガー用に修正します。</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>でひとまとめしたものを送ります。数値でも文字列でもアプリで判別するようです。C言語標準関数<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">spirntf</span></strong>を使用する場合は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">stdio.h</span></strong>をインクルードしておいてください。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/文字列連結送信.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/文字列連結送信.jpg" alt="" class="wp-image-7248" width="611" height="392" srcset="https://depfields.com/wp-content/uploads/2020/11/文字列連結送信.jpg 611w, https://depfields.com/wp-content/uploads/2020/11/文字列連結送信-300x192.jpg 300w" sizes="(max-width: 611px) 100vw, 611px" /></a><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">ターミナルアプリで送信データを確認</span></strong>してみてください。下図のようにカンマ区切りであればデータ順にCH1、CH2...と認識されます。これで準備は整いましたのでさっそくデータロガーアプリでリアルタイムのグラフ表示を開始してみましょう。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/terminal-data.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/terminal-data.jpg" alt="" class="wp-image-7260" width="586" height="405" srcset="https://depfields.com/wp-content/uploads/2020/11/terminal-data.jpg 616w, https://depfields.com/wp-content/uploads/2020/11/terminal-data-300x207.jpg 300w" sizes="(max-width: 586px) 100vw, 586px" /></a><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>アプリCPLTを起動してからデータモニターは「<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>」でデータ収集用ファイル名を指定すると開始します。問題なければCH1,CH2のデータのグラフ表示が始まります。</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>データプロットの間隔は横軸の設定で調整できますので適当なものに調整してください。グラフ表示されたデータは同時にチャネルごとにExcelファイル(csvフォーマット）に収集されていますので、解析、評価用データとして利用できます。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/log-graph.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/log-graph.jpg" alt="" class="wp-image-7241" width="711" height="504" srcset="https://depfields.com/wp-content/uploads/2020/11/log-graph.jpg 711w, https://depfields.com/wp-content/uploads/2020/11/log-graph-300x213.jpg 300w" sizes="(max-width: 711px) 100vw, 711px" /></a><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">リアルタイムでグラフ化</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-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/datalogger/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img decoding="async" 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 decoding="async" class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/0e28ef4fbb00f4eb15eabf39e2994aa5b1afc7d0b06fb11c0d8ccb9452c6c2b6.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">Graphing and collecting sensor data via serial communication on STM32 MCU | M...</div><div class="lkc-url" title="https://en.depfields.com/datalogger/">https://en.depfields.com/datalogger/</div><div class="lkc-excerpt">When creating applications, it is often necessary to collect digital data such as sensor data captured by MCU while graphing it in real time like an oscilloscope. We introduce an easy-to-use data logger that can import data into Microsoft</div></div><div class="clear">
							</div>
						</div></a></div></div><p>The post <a href="https://depfields.com/datalogger/">STM32マイコンのシリアル通信でセンサデータをグラフ化・収集してみる</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>組み込みマイコンの失敗しない電源周辺回路【ARMコアSTM32】</title>
		<link>https://depfields.com/powersupply/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=powersupply</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Sat, 07 Nov 2020 11:28:00 +0000</pubDate>
				<category><![CDATA[組み込み開発設計]]></category>
		<category><![CDATA[設計]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=7078</guid>

					<description><![CDATA[<p>マイコンでアプリケーションを動作させるにあたって、とても大事なものが安定した電源を供給することです。あたりまえのことのようですが、一言で電源といってもまともに勉強すると、この部分だけで終わってしまうほど奥が深いものです。 [&#8230;]</p>
<p>The post <a href="https://depfields.com/powersupply/">組み込みマイコンの失敗しない電源周辺回路【ARMコアSTM32】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img decoding="async" width="640" height="491" src="https://depfields.com/wp-content/uploads/2020/11/power-supply.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="https://depfields.com/wp-content/uploads/2020/11/power-supply.jpg 640w, https://depfields.com/wp-content/uploads/2020/11/power-supply-300x230.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">安定した電源を供給すること</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>していたり、また、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">電源を通した外部からのノイズ</span></strong>によるトラブルを防ぐためにもしっかり基本を理解することが大切です。</p>



<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">レギュレータ</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>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">今回はSTM32マイコンに限った話ではないのですが、安定した電源電圧を供給するために筆者の経験も踏まえてマイコンに適した電源周辺回路をどのように構成していけばよいのか、周辺で使用する部品も紹介しながら解説していきたいと思います。</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>



<h2 class="wp-block-heading">マイコン動作に必要な電源構成 </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">電池で供給する場合もあります</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">DC3.3Vを供給する場合</span></strong>の構成についてみていきます。マイコンのなかにはスマホのようなポータブル機器向けに乾電池一本分のDC1.5V付近で動作するものもあるようです。</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>日本国内の場合は一般的な電源は交流AC100Vですので、まずAC100Vの電圧を下げて直流に変換する装置（<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">AC-DCコンバータ</span></strong>）が必要です。AC-DC コンバータ は<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">ACアダプタ</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>マイコンだけを使用する場合にはマイコン電源電圧近くまで直接スイッチングレギュレータで電圧を落とし、例えばDC５Vをつくることもありますが、ここでは 市販のセンサ等用電源のようなマイコン電源電圧よりも高い電圧が必要な場合も考えて、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">中間のDC12VやDC24Vの電源をつくる</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>中間のDC12VやDC24Vの電源</strong> </span>をマイコン電源近くまで落とすために<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">DC-DCコンバータ</span></strong>という部品を使用します。このDC-DCコンバータも<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">原理はスイッチングレギュレータと同じ</span></strong>もので直接マイコン電源のDC3.3をつくってもよさそうなのですが、スイッチング・レギュレータで発生するノイズを考慮して、<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">リニアレギュレータ</span></strong>と呼ばれる部品を更に1段追加して使用することにします。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/電源構成.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/電源構成.jpg" alt="" class="wp-image-7134" width="605" height="216"/></a><figcaption> マイコン動作に必要な電源構成 </figcaption></figure>



<h2 class="wp-block-heading">AC-DCコンバータ（パワーサプライ）について </h2>



<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>や<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">スイッチングレギュレータ方式</span></strong>があります。</p>



<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>も紹介しておき、<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 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">平滑コンデンサを組み合わせた方式</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-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/transformer.jpg" alt="" class="wp-image-7117" width="247" height="178" srcset="https://depfields.com/wp-content/uploads/2020/11/transformer.jpg 549w, https://depfields.com/wp-content/uploads/2020/11/transformer-300x216.jpg 300w" sizes="(max-width: 247px) 100vw, 247px" /><figcaption>トランス</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/diode-bridge.jpg" alt="" class="wp-image-7119" width="196" height="196" srcset="https://depfields.com/wp-content/uploads/2020/11/diode-bridge.jpg 500w, https://depfields.com/wp-content/uploads/2020/11/diode-bridge-300x300.jpg 300w, https://depfields.com/wp-content/uploads/2020/11/diode-bridge-150x150.jpg 150w" sizes="(max-width: 196px) 100vw, 196px" /><figcaption>ダイオードブリッジ</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div>
</div>



<h4 class="wp-block-heading">平滑コンデンサやチョークコイルによる電源</h4>



<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>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/全波整流回路.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/全波整流回路.jpg" alt="" class="wp-image-7137" width="443" height="195" srcset="https://depfields.com/wp-content/uploads/2020/11/全波整流回路.jpg 443w, https://depfields.com/wp-content/uploads/2020/11/全波整流回路-300x132.jpg 300w" sizes="(max-width: 443px) 100vw, 443px" /></a><figcaption> トランスとダイオードによる直流電源 </figcaption></figure>



<h4 class="wp-block-heading">リニアレギュレータ方式による電源</h4>



<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>負荷電圧が常に一定</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>を設けてコントロールしています。この方式の直流安定化電源は<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"><a href="https://depfields.com/wp-content/uploads/2020/11/lenear-regulator.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/lenear-regulator.jpg" alt="" class="wp-image-7127" width="517" height="228" srcset="https://depfields.com/wp-content/uploads/2020/11/lenear-regulator.jpg 517w, https://depfields.com/wp-content/uploads/2020/11/lenear-regulator-300x132.jpg 300w" sizes="(max-width: 517px) 100vw, 517px" /></a><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>



<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">スイッチングレギュレータ</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">ACアダプタ</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">パルス幅変調PWM(Pulse Width Modulation)の原理で平均電圧をコントロール</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>反面、高速でスイッチング動作させることによる<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>しておき、不足しない<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-columns is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img decoding="async" width="640" height="491" src="https://depfields.com/wp-content/uploads/2020/11/power-supply.jpg" alt="" class="wp-image-7080" srcset="https://depfields.com/wp-content/uploads/2020/11/power-supply.jpg 640w, https://depfields.com/wp-content/uploads/2020/11/power-supply-300x230.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /><figcaption>パワーサプライ（オープンフレーム）</figcaption></figure>


</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img decoding="async" width="533" height="348" src="https://depfields.com/wp-content/uploads/2020/06/power-supply.jpg" alt="" class="wp-image-3396" srcset="https://depfields.com/wp-content/uploads/2020/06/power-supply.jpg 533w, https://depfields.com/wp-content/uploads/2020/06/power-supply-300x196.jpg 300w" sizes="(max-width: 533px) 100vw, 533px" /><figcaption>パワーサプライ（ACアダプター）</figcaption></figure>
</div>
</div>



<h2 class="wp-block-heading">DC-DCコンバータについて </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">DC-DCコンバータ</span></strong>という部品を使用します。このDC-DCコンバータは直流を直流に変換する<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>には負荷で<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">DC-DCコンバータを使用す</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>DC-DCコンバータはいろいろなメーカーから製品がだされていますが、<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> 前者の絶縁DC-DCコンバータは入力側を出力側から電気的に切り離すことで<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>とすることができます。後者の DC-DCコンバータ は<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">リニアレギュレータと互換性がある</span></strong>ので発熱等で不安がある場合に簡単に置き換えることができます。三端子レギュレータの感覚で、例えば、入力DC24V/出力DC5Vのような大きな降圧差がある場合で出力に500mAほどの負荷電流をとれるものでも放熱板なしで使えるところが便利です。</p>
</div></div></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/DC-DC-iso-conv.jpg" alt="" class="wp-image-7139" width="197" height="150" srcset="https://depfields.com/wp-content/uploads/2020/11/DC-DC-iso-conv.jpg 334w, https://depfields.com/wp-content/uploads/2020/11/DC-DC-iso-conv-300x230.jpg 300w" sizes="(max-width: 197px) 100vw, 197px" /><figcaption>絶縁型DC-DCコンバータ</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/DC-DC-conv.jpg" alt="" class="wp-image-7140" width="194" height="145" srcset="https://depfields.com/wp-content/uploads/2020/11/DC-DC-conv.jpg 346w, https://depfields.com/wp-content/uploads/2020/11/DC-DC-conv-300x225.jpg 300w" sizes="(max-width: 194px) 100vw, 194px" /><figcaption>三端子タイプDC-DCコンバータ </figcaption></figure>


</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div>
</div>



<h2 class="wp-block-heading">リニアレギュレータについて </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">三端子レギュレータ</span></strong>と呼ばれる定電圧回路を簡単に構成するための電子部品です。このうち入力電圧と出力電圧の差が小さくても(１V程度）動作するタイプは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">LDO（Low Drop Out)レギュレータ</span></strong>と呼ばれています。スイッチングレギュレータ、DC-DCコンバータおよびPCのUSB電源などによる直流電源を入力としてマイコン仕様にあった電源電圧出力をつくるのに使われます。</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><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>しています。特にLDOでは入出力の電圧差が小さくても動作するため、<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"><a href="https://depfields.com/wp-content/uploads/2020/11/lm1117.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/lm1117.jpg" alt="" class="wp-image-7091" width="317" height="226" srcset="https://depfields.com/wp-content/uploads/2020/11/lm1117.jpg 316w, https://depfields.com/wp-content/uploads/2020/11/lm1117-300x214.jpg 300w" sizes="(max-width: 317px) 100vw, 317px" /></a><figcaption>リニアレギュレータ（LDO)</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>使用するにあたってはレギュレータの機能を安定させるために入力側、出力側の各端子とGND間に<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>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/ldo-circuit.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/ldo-circuit.jpg" alt="" class="wp-image-7148" width="347" height="228"/></a><figcaption> LDO構成回路  </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>マイコンを電池で駆動する場合は直接マイコンに接続するか、リニアレギュレータ（LDO)だけを使ってマイコン仕様の電源をつくります。<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">LDOレギュレータ</span></strong>を使用するとマイコン電源電圧に対して約１V以上高い入力電圧であることは必要ですが最低限の部品で電源回路が構成できます。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/電源構成電池版.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/電源構成電池版.jpg" alt="" class="wp-image-7171" width="434" height="206"/></a><figcaption> 電池によるマイコン電源作成 </figcaption></figure>



<h2 class="wp-block-heading">コンデンサについて</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">コンデンサ</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>および<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>、さらに<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">等価抵抗ESR</span></strong>や<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">等価直列インダクタンスESL</span></strong>といったパラメータも重要となりますが、マイコンの電源用途ではそう神経質になるものではありません。</p>
</div></div></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img decoding="async" width="359" height="244" src="https://depfields.com/wp-content/uploads/2020/11/Aluminum-Electrolytic-capacitor.jpg" alt="" class="wp-image-7092" srcset="https://depfields.com/wp-content/uploads/2020/11/Aluminum-Electrolytic-capacitor.jpg 359w, https://depfields.com/wp-content/uploads/2020/11/Aluminum-Electrolytic-capacitor-300x204.jpg 300w" sizes="(max-width: 359px) 100vw, 359px" /><figcaption>電解コンデンサ</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<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>が使用されます。このコンデンサには極性があり、容量も耐圧もかなり大きいものまであります。極性を間違って使用すると破裂するので注意が必要です。</p>



<p>整流回路で電圧をならすのに使われるのがこのアルミ電解コンデンサです。</p>



<p>周波数特性にはあまり優れず、サイズが大きいのが短所です。</p>



<p></p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img decoding="async" width="328" height="227" src="https://depfields.com/wp-content/uploads/2020/11/tantalum-capacitor.jpg" alt="" class="wp-image-7094" srcset="https://depfields.com/wp-content/uploads/2020/11/tantalum-capacitor.jpg 328w, https://depfields.com/wp-content/uploads/2020/11/tantalum-capacitor-300x208.jpg 300w" sizes="(max-width: 328px) 100vw, 328px" /><figcaption>タンタル電解コンデンサ</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<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>。</p>



<p>アルミ電解コンデンサに比べ周波数特性にすぐれるのが長所ですが、 タンタルは希少金属なため、価格が割高なのが短所です。 </p>


</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img decoding="async" width="333" height="287" src="https://depfields.com/wp-content/uploads/2020/11/ceramic-capacitor.jpg" alt="" class="wp-image-7093" srcset="https://depfields.com/wp-content/uploads/2020/11/ceramic-capacitor.jpg 333w, https://depfields.com/wp-content/uploads/2020/11/ceramic-capacitor-300x259.jpg 300w" sizes="(max-width: 333px) 100vw, 333px" /><figcaption>セラミックコンデンサ</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<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>



<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>



<p>極性はありません。</p>


</div>
</div>



<h2 class="wp-block-heading">マイコン電源とコンデンサ</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">仕様書に記載しているコンデンサを配置して電源を安定化させることが重要</span></strong>です。この役目のコンデンサは<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>と呼ばれます。 </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>スイッチングレギュレータ、DC-DCコンバータ、そしてリニアレギュレータを介してマイコン電源は作られるのですが、<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>します。プラス側V<sub>DD</sub>とGND側V<sub>SS</sub>はマイコンによりますが、５組から10組程度あり、すべての組に0.1uF程度の周波数特性のよいセラミックコンデンサを<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>電源のおおもとには4.7uFから10uF程度のアルミ電解コンデンサ、タンタル電解コンデンサあるいはセラミックコンデンサを<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"><a href="https://depfields.com/wp-content/uploads/2020/11/power-supply-scheme.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/power-supply-scheme.jpg" alt="" class="wp-image-7095" width="534" height="441" srcset="https://depfields.com/wp-content/uploads/2020/11/power-supply-scheme.jpg 533w, https://depfields.com/wp-content/uploads/2020/11/power-supply-scheme-300x248.jpg 300w" sizes="(max-width: 534px) 100vw, 534px" /></a><figcaption>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>



<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>■　<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>と<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">LDOレギュレータ</span></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>を作るには<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">LDOレギュレータだけ</span></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>が必要な場合は中間に<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">DC-DCコンバータ</span></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>する<br>■　使用する負荷に対して<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">十分大きめな容量のものを選択</span></strong>することが重要<br>■　コンデンサの種類、特性を理解して使用する</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>ひとことで電源といっても、単に指定されている電圧を与えればよいというわけではないことが理解できたとおもいます。電源にもいろいろな種類があり、<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>です。</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/powersupply/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img decoding="async" 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 decoding="async" class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/b3ae6705c71975c2864c9e811782363fd0a156f361705529fc10c3fbce6bfb31.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">Power Supply without Failure for Embedded MCU system [ARM Core STM32] | Most ...</div><div class="lkc-url" title="https://en.depfields.com/powersupply/">https://en.depfields.com/powersupply/</div><div class="lkc-excerpt">When running applications on a MCU, a very important thing is to provide a stable power supply. This may seem obvious, but the power supply is so profound that a serious study of it would end with this part alone. It is important to unders</div></div><div class="clear">
							</div>
						</div></a></div></div><p>The post <a href="https://depfields.com/powersupply/">組み込みマイコンの失敗しない電源周辺回路【ARMコアSTM32】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>マイコンの外部クロック【ARMコアSTM32】</title>
		<link>https://depfields.com/extclock/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=extclock</link>
		
		<dc:creator><![CDATA[めかのとろ]]></dc:creator>
		<pubDate>Thu, 05 Nov 2020 07:59:28 +0000</pubDate>
				<category><![CDATA[組み込み開発設計]]></category>
		<category><![CDATA[設計]]></category>
		<guid isPermaLink="false">https://depfields.com/?p=7016</guid>

					<description><![CDATA[<p>マイコンを使用するうえで必要不可欠なクロックのうち、外部クロックについて解説しています。特に水晶振動子は単純な部品ではあるのですが、選定を謝るとクロックが最悪停止したりするトラブルを引き起こします。ここでは安定して外部ク [&#8230;]</p>
<p>The post <a href="https://depfields.com/extclock/">マイコンの外部クロック【ARMコアSTM32】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="veu_autoEyeCatchBox"><img decoding="async" width="640" height="426" src="https://depfields.com/wp-content/uploads/2020/11/metronomes-812679_640.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="https://depfields.com/wp-content/uploads/2020/11/metronomes-812679_640.jpg 640w, https://depfields.com/wp-content/uploads/2020/11/metronomes-812679_640-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><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">実践に則した勘所を紹介</span></strong>しています。</p>



<p class="vk_block-margin-sm--margin-top vk_block-margin-sm--margin-bottom">クロックの詳細につきましては<strong><a href="https://depfields.com/sysclk/">システムクロック【STM32のSYSCLK設定詳細 】</a></strong>で解説していますのでそちらを参考にしてください。</p>



<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">水晶振動子</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>



<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">物理的な発振</span></strong>をつくりだすものなので、コンデンサ容量のパラメータなどとのバランスが大切であるからです。</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>



<h2 class="wp-block-heading">水晶振動子による外部クロック</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-10 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img decoding="async" width="206" height="147" src="https://depfields.com/wp-content/uploads/2020/06/quarts.jpg" alt="" class="wp-image-2163"/><figcaption>水晶振動子（メタルパッケージ）</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img decoding="async" width="302" height="231" src="https://depfields.com/wp-content/uploads/2020/11/molds.jpg" alt="" class="wp-image-7022" srcset="https://depfields.com/wp-content/uploads/2020/11/molds.jpg 302w, https://depfields.com/wp-content/uploads/2020/11/molds-300x229.jpg 300w" sizes="(max-width: 302px) 100vw, 302px" /><figcaption>水晶振動子（モールドパッケージ）</figcaption></figure>
</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>最近のマイコンでは抵抗器RとコンデンサCで構成されるRC発振回路を内蔵していますので、マイコンの外部にわざわざ振動子を設けなくても<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>STM32マイコンでもシステムクロックに内部クロックを使用する設定にすると外付けの振動子を使用しなくても動作させることができ、部品点数を減らせることで、スペースやコストの節約が実現できる利点があります。</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>こともあるため、<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">精度の高い外部クロックを使用するのが無難</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>水晶振動子には従来のメタルパッケージのものと樹脂モールドパッケージによるものがあります。一昔まえのものに比べるとずっと安定して発振するものですが、電源電圧が低いアプリや電圧変動があるようなアプリでは注意が必要です。</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">表面実装タイプ（SMD)でサイズの小さいものなどを使用する場合は十分な検証が必要</span></strong>かもしれません。</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">めかのとろ</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-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">めかのとろ</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">制限抵抗R<sub>EXT</sub></span></strong>がありますがこれは振動子の特性により使用する場合があるものです。</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">めかのとろ</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>です。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/recommended-quarts.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/recommended-quarts.jpg" alt="" class="wp-image-7054" width="587" height="590" srcset="https://depfields.com/wp-content/uploads/2020/11/recommended-quarts.jpg 586w, https://depfields.com/wp-content/uploads/2020/11/recommended-quarts-298x300.jpg 298w, https://depfields.com/wp-content/uploads/2020/11/recommended-quarts-150x150.jpg 150w" sizes="(max-width: 587px) 100vw, 587px" /></a><figcaption>メーカー推奨の振動子例（STM32メーカー資料より）</figcaption></figure>



<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">めかのとろ</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-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">めかのとろ</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>があります。 </p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/ext-clock.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/ext-clock.jpg" alt="" class="wp-image-7026" width="669" height="221" srcset="https://depfields.com/wp-content/uploads/2020/11/ext-clock.jpg 668w, https://depfields.com/wp-content/uploads/2020/11/ext-clock-300x99.jpg 300w" sizes="(max-width: 669px) 100vw, 669px" /></a><figcaption>外部振動子接続（ 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>



<h2 class="wp-block-heading">セラミック振動子による外部クロック</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">セラミック振動子</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">３端子タイプ</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"><a href="https://depfields.com/wp-content/uploads/2020/11/ceramic.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/ceramic.jpg" alt="" class="wp-image-7025" width="260" height="228" srcset="https://depfields.com/wp-content/uploads/2020/11/ceramic.jpg 320w, https://depfields.com/wp-content/uploads/2020/11/ceramic-300x263.jpg 300w" sizes="(max-width: 260px) 100vw, 260px" /></a><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>



<h2 class="wp-block-heading">発振器による外部クロック</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>水晶振動子やセラミック振動子は電圧を与えて機械的な共振を発生させるタイプですので、パラメータ選定に誤りがあったり、マイコンとの相性が良くない場合にはクロックが停止してしまうことがないとは言えません。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/oscillator.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/oscillator.jpg" alt="" class="wp-image-7039" width="387" height="249" srcset="https://depfields.com/wp-content/uploads/2020/11/oscillator.jpg 425w, https://depfields.com/wp-content/uploads/2020/11/oscillator-300x193.jpg 300w" sizes="(max-width: 387px) 100vw, 387px" /></a><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">発振回路が内蔵した発振器</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>であるといえます。発振器出力をマイコンの外部クロックの入力側（STM32マイコンではOSC_IN）に接続するだけです。</p>
</div></div></div>



<figure class="wp-block-image size-large"><a href="https://depfields.com/wp-content/uploads/2020/11/ext-clock-source.jpg"><img decoding="async" width="660" height="303" src="https://depfields.com/wp-content/uploads/2020/11/ext-clock-source.jpg" alt="" class="wp-image-7035" srcset="https://depfields.com/wp-content/uploads/2020/11/ext-clock-source.jpg 660w, https://depfields.com/wp-content/uploads/2020/11/ext-clock-source-300x138.jpg 300w" sizes="(max-width: 660px) 100vw, 660px" /></a><figcaption>外部クロック入力（STM32データシートより）</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>■　水晶振動子を初めて使う場合は<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">使用例のあるものをそのまま採用</span></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>のもあり。<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>



<h2 class="wp-block-heading">外部クロック周波数設定</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>STM32F1xxシリーズのファームウェアでは<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">デフォルトで8MHzの外部クロックを使用</span></strong>することになっています。そのため、Nucleoボードを始め、多くの評価基板では8MHzの水晶振動子を使用していることが多いです。</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>例外的に、STM32F103VEを搭載した<strong>STBeeボード</strong>では<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">12MHzの水晶振動子が搭載</span></strong>されていますので、設定し直さなければ例えば、シリアル通信などではボーレートが他の機器とは合わなくなってしまいます。そこで、外部クロックの周波数を変更する箇所を見ていきましょう。</p>
</div></div></div>



<figure class="wp-block-image size-large is-resized"><a href="https://depfields.com/wp-content/uploads/2020/11/hse_value-setting.jpg"><img decoding="async" src="https://depfields.com/wp-content/uploads/2020/11/hse_value-setting.jpg" alt="" class="wp-image-7040" width="966" height="706" srcset="https://depfields.com/wp-content/uploads/2020/11/hse_value-setting.jpg 780w, https://depfields.com/wp-content/uploads/2020/11/hse_value-setting-300x219.jpg 300w, https://depfields.com/wp-content/uploads/2020/11/hse_value-setting-768x561.jpg 768w" sizes="(max-width: 966px) 100vw, 966px" /></a><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>外部クロック周波数はstm32f10x.h内で<strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter">HSE_VALUE</span></strong>と定義されていますので、この値をデフォルトの80000000から使用する周波数、例えば12MHzの場合は12000000に変更すればよいだけです。</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>今回は外部クロックについて取り上げてみました。<br />精度の高いパルスを出力したり、外部の周波数に同調させる非同期UART通信では内部クロックではなく、<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>と思います。慣れないうちに<strong><span class="vk_highlighter" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b">サイズの小さなSMDタイプを採用するのはリスクが大きいかも</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/extclock/" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><img decoding="async" 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 decoding="async" class="lkc-thumbnail-img" src="//depfields.com/wp-content/uploads/pz-linkcard/cache/3abb996edffd16db2aca46ea9f1395a44a42d43107af767a8d1cd65f2bc601ed.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">External Clock for MCU [ARM Core STM32] | Most Powerful Bible to Become an Em...</div><div class="lkc-url" title="https://en.depfields.com/extclock/">https://en.depfields.com/extclock/</div><div class="lkc-excerpt">Of the clocks that are indispensable for using MCSs, this section explains external clocks. Although the crystal resonator in particular is a simple component, if the selection is not properly made, it can cause problems such as clock stop</div></div><div class="clear">
							</div>
						</div></a></div></div><p>The post <a href="https://depfields.com/extclock/">マイコンの外部クロック【ARMコアSTM32】</a> first appeared on <a href="https://depfields.com">即戦力モノづくり!エンジニアへの道標</a>.</p>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
