少しずつ実装の進んできているCSSのグリッドレイアウトを試してみる

<p>これまで、VRをWebサイトで作るのはハードルが高い印象がありましたが、</p>
<p>A-Frame というライブラリを使うと、場合によってはJavaScriptが書けなくても、HTMLのような感覚で簡単にWEBサイトでVRを実現することができます。</p>
<p>今回はその A-Frame を使って、VRをWEBサイトで作ってみました。</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="https://sterfield.co.jp/demo/ninomiya/135/">DEMO</a></p>
<h2>ソースコード</h2>
<h3>HTMLのhead</h3>
<p></p>

		<div id="crayon-649540264c6d4707919173" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML head</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script src="https://aframe.io/releases/0.7.0/aframe.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"&gt;&lt;/script&gt;
&lt;script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c6d4707919173-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d4707919173-2">2</div><div class="crayon-num" data-line="crayon-649540264c6d4707919173-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c6d4707919173-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"https://aframe.io/releases/0.7.0/aframe.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d4707919173-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d4707919173-3"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://html2canvas.hertzen.com/dist/html2canvas.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h3>HTMLのbody</h3>
<p></p>

		<div id="crayon-649540264c6d8071188107" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div class="asset"&gt;
  &lt;div class="panel" id="panel"&gt;
    &lt;figure class="panel__figure"&gt;&lt;img src="img/img_photo_01.jpg" alt="画像サンプル"&gt;&lt;/figure&gt;
    &lt;h3 class="panel__title"&gt;パネルのタイトル&lt;/h3&gt;
    &lt;p class="panel__summary"&gt;パネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入ります&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;a-scene&gt;
  &lt;a-sky src="img/Tropical_Beach_4k.jpg" rotation="0 -90 0"&gt;&lt;/a-sky&gt;
  &lt;a-box position="-10 -10 -1" rotation="0 45 0" width="5" height="5" depth="5" color="#4CC3D9"&gt;&lt;/a-box&gt;
  &lt;a-plane position="0 0 -1" width="16" height="16" material="shader:html;target: #panel;"&gt;&lt;/a-plane&gt;
  &lt;a-entity camera wasd-controls look-controls position="0 0 12"&gt;&lt;/a-entity&gt;
&lt;/a-scene&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c6d8071188107-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-2">2</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-4">4</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-6">6</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-8">8</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-10">10</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-12">12</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-14">14</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c6d8071188107-1"><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-t">class</span>=<span class="crayon-s">"asset"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"panel"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">figure </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__figure"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"img/img_photo_01.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">alt</span>=<span class="crayon-s">"画像サンプル"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">figure</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">h3 </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__title"</span><span class="crayon-h">&gt;</span>パネルのタイトル<span class="crayon-h">&lt;</span>/<span class="crayon-i">h3</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__summary"</span><span class="crayon-h">&gt;</span>パネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入ります<span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-7"><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-8">&nbsp;</div><div class="crayon-line" id="crayon-649540264c6d8071188107-9"><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-i">scene</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">sky </span><span class="crayon-i">src</span>=<span class="crayon-s">"img/Tropical_Beach_4k.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">rotation</span>=<span class="crayon-s">"0 -90 0"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">sky</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">box </span><span class="crayon-i">position</span>=<span class="crayon-s">"-10 -10 -1"</span><span class="crayon-h"> </span><span class="crayon-i">rotation</span>=<span class="crayon-s">"0 45 0"</span><span class="crayon-h"> </span><span class="crayon-i">width</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">height</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">depth</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">color</span>=<span class="crayon-s">"#4CC3D9"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">box</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">plane </span><span class="crayon-i">position</span>=<span class="crayon-s">"0 0 -1"</span><span class="crayon-h"> </span><span class="crayon-i">width</span>=<span class="crayon-s">"16"</span><span class="crayon-h"> </span><span class="crayon-i">height</span>=<span class="crayon-s">"16"</span><span class="crayon-h"> </span><span class="crayon-i">material</span>=<span class="crayon-s">"shader:html;target: #panel;"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">plane</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-13"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">entity </span><span class="crayon-e">camera </span><span class="crayon-i">wasd</span>-<span class="crayon-e">controls </span><span class="crayon-i">look</span>-<span class="crayon-e">controls </span><span class="crayon-i">position</span>=<span class="crayon-s">"0 0 12"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">entity</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-14"><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">scene</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2>参考サイト</h2>
<p><a class="link" href="http://vr-lab.voyagegroup.com/entry/2016/11/16/122115#HTML-Shader%E3%81%A8html2canvas%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF" target="_blank" rel="noopener">A-FrameとHTML Shaderで美しい日本語テキストを表示する方法 &#8211; VOYAGE GROUP VR室ブログ</a></p>

A-Frame で簡単にVRを実装する

<h2>これまでのあらすじ</h2>
<p>スターフィールド社のLaunchCartを利用することで中国越境ECをスタートした斎藤。<br />
ほっとするのも束の間、さらなる試練が斎藤を襲う！</p>
<p>中国サーバ編<br />
第一話　<a href="https://sterfield.co.jp/blog/black_ec/">https://sterfield.co.jp/blog/black_ec/</a><br />
第二話　<a href="https://sterfield.co.jp/blog/ec/black_ec2/">https://sterfield.co.jp/blog/ec/black_ec2/</a><br />
第三話 <a href="https://sterfield.co.jp/blog/ec/black_ec3/">https://sterfield.co.jp/blog/ec/black_ec3/</a><br />
第四話 <a href="https://sterfield.co.jp/blog/ec/black_ec4/">https://sterfield.co.jp/blog/ec/black_ec4/</a><br />
第五話 <a href="https://sterfield.co.jp/blog/ec/black_ec5/">https://sterfield.co.jp/blog/ec/black_ec5/</a></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_01.jpg" alt="" width="692" height="1023" class="alignleft size-full wp-image-13541" srcset="/uploads-archive/2018/01/bj06_01.jpg 692w, /uploads-archive/2018/01/bj06_01-203x300.jpg 203w, /uploads-archive/2018/01/bj06_01-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_02.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13542" srcset="/uploads-archive/2018/01/bj06_02.jpg 692w, /uploads-archive/2018/01/bj06_02-203x300.jpg 203w, /uploads-archive/2018/01/bj06_02-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_03.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13543" srcset="/uploads-archive/2018/01/bj06_03.jpg 692w, /uploads-archive/2018/01/bj06_03-203x300.jpg 203w, /uploads-archive/2018/01/bj06_03-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_04.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13544" srcset="/uploads-archive/2018/01/bj06_04.jpg 692w, /uploads-archive/2018/01/bj06_04-203x300.jpg 203w, /uploads-archive/2018/01/bj06_04-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_05.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13545" srcset="/uploads-archive/2018/01/bj06_05.jpg 692w, /uploads-archive/2018/01/bj06_05-203x300.jpg 203w, /uploads-archive/2018/01/bj06_05-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_06.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13546" srcset="/uploads-archive/2018/01/bj06_06.jpg 692w, /uploads-archive/2018/01/bj06_06-203x300.jpg 203w, /uploads-archive/2018/01/bj06_06-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_07.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13547" srcset="/uploads-archive/2018/01/bj06_07.jpg 692w, /uploads-archive/2018/01/bj06_07-203x300.jpg 203w, /uploads-archive/2018/01/bj06_07-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_08.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13548" srcset="/uploads-archive/2018/01/bj06_08.jpg 692w, /uploads-archive/2018/01/bj06_08-203x300.jpg 203w, /uploads-archive/2018/01/bj06_08-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_09.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13549" srcset="/uploads-archive/2018/01/bj06_09.jpg 692w, /uploads-archive/2018/01/bj06_09-203x300.jpg 203w, /uploads-archive/2018/01/bj06_09-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_10-1.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13550" srcset="/uploads-archive/2018/01/bj06_10-1.jpg 692w, /uploads-archive/2018/01/bj06_10-1-203x300.jpg 203w, /uploads-archive/2018/01/bj06_10-1-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_11.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13551" srcset="/uploads-archive/2018/01/bj06_11.jpg 692w, /uploads-archive/2018/01/bj06_11-203x300.jpg 203w, /uploads-archive/2018/01/bj06_11-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_12.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13552" srcset="/uploads-archive/2018/01/bj06_12.jpg 692w, /uploads-archive/2018/01/bj06_12-203x300.jpg 203w, /uploads-archive/2018/01/bj06_12-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_13.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13553" srcset="/uploads-archive/2018/01/bj06_13.jpg 692w, /uploads-archive/2018/01/bj06_13-203x300.jpg 203w, /uploads-archive/2018/01/bj06_13-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_14.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13554" srcset="/uploads-archive/2018/01/bj06_14.jpg 692w, /uploads-archive/2018/01/bj06_14-203x300.jpg 203w, /uploads-archive/2018/01/bj06_14-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_15.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13555" srcset="/uploads-archive/2018/01/bj06_15.jpg 692w, /uploads-archive/2018/01/bj06_15-203x300.jpg 203w, /uploads-archive/2018/01/bj06_15-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_16.jpg" alt="" width="709" height="665" class="alignleft size-large wp-image-13556" srcset="/uploads-archive/2018/01/bj06_16.jpg 709w, /uploads-archive/2018/01/bj06_16-300x281.jpg 300w, /uploads-archive/2018/01/bj06_16-228x214.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_17.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13557" srcset="/uploads-archive/2018/01/bj06_17.jpg 692w, /uploads-archive/2018/01/bj06_17-203x300.jpg 203w, /uploads-archive/2018/01/bj06_17-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_18.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13558" srcset="/uploads-archive/2018/01/bj06_18.jpg 692w, /uploads-archive/2018/01/bj06_18-203x300.jpg 203w, /uploads-archive/2018/01/bj06_18-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<h3>ブラックジャックによろしくを二次利用させていただきました</h3>
<p>下記利用規約に則り、作品を二次利用させていただきました。</p>
<p><a href="http://mangaonweb.com/satoshuho/download/#kiyaku">利用規約</a></p>
<table>
<tbody>
<tr>
<td>タイトル</td>
<td>ブラックジャックによろしく</td>
</tr>
<tr>
<td>著者名</td>
<td>佐藤秀峰</td>
</tr>
<tr>
<td>サイト名</td>
<td>漫画 on web</td>
</tr>
</tbody>
</table>


【台湾編１】越境EC担当者によろしく

<h3>前言</h3>
<p>先日、中国のITを仕事している友人に相談して、今中国には人工AIが流行りなっている。</p>
<p>その原因でPythonは今大人気。</p>
<p>ちなみに今中国WEB系の現状は「javaのプロジェクトは多数前古いのプロジェクト今まで動けでいる。新しいWEB開発はPythonやPHPにやっている。」</p>
<h3>ニューラルネットワーク</h3>
<p>ニューラルネットワークは人類の神経をマネーで処理します。今の音声認識（Google HomeやAlexaやSiri）にもこのテクノロジーの上に作られだ。</p>
<p>歴史によっては１９４３年に発表したが、2006まで機械学習の計算方法発表したの後に人工AIの機能は初めって普通使うことをできます。</p>
<p>この中に有名のは「AlphaGo」、碁の訓練して勝の事、色々ニュースの中に出てる。</p>
<p>今新しいAlphaGo Zeroを誕生して、今の人工AI周りにテクノロジー最高傑作かもしれない。自分勉強して４０日に全ての旧バージョンを超えた。</p>
<p>でもこの機械学習の計算末いもここまで、今AlphaGo Zeroのソースはopenソースなって、もし新しい計算あれば大歓迎の意味です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


ニューラルネットワーク 紹介

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  本投稿では以下を扱います<br />
  ・viChrome と言う GoogleChrome アドオンの不具合解消<br />
  ・解消のためのアプローチ<br />
  ・GitHubへのcommitまでのフロー</p>
<h3>経緯</h3>
<div style="padding-left: 15px;">
  <a href="https://sterfield.co.jp/blog/other/it%e6%a5%ad%e7%95%8c/%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b8%e3%83%b3%e3%82%b0%e3%81%a7web%e5%b7%a1%e5%9b%9e%e3%82%92%e3%81%93%e3%81%aa%e3%81%99/">以前の投稿</a>でviChromeと言う<br />
  「キーボードでブラウザの挙動をマッピングして制御する」<br />
  アドオンを紹介しました。</p>
<p>  しかし、Chromeのアップデートに伴って使えなくなって久しいのです。<br />
  以下のGitHubにあったIssue経由で解決出来そうだ！<br />
  と言う事で幾度かに渡って挑み、最終的に解消しました。</p></div>
<h3>Keyバインドの仕様変更</h3>
<div style="padding-left: 15px;">
  最初に「恐らくキーバインドが機能していないだろう」と思い以下にたどり着きました<br />
  <a href="http://pasokatu.com/15313">http://pasokatu.com/15313</a></p>
<p>  確かにv54あたりから使えなくなった。<br />
  しばらくv53までをインストールして使うも、再起動するたびに戻さなければならない苦行。<br />
  keyIdentifierをkeyに置き換えてみるも動かず。しばらく諦め期間が続きました。</p>
<p>  改めて改造してみようと本家ViChromeのGitHubを見ると以下のIssueに行き着く。<br />
  <a href="https://github.com/k2nr/ViChrome/issues/67">https://github.com/k2nr/ViChrome/issues/67</a></p>
<p>  mgi166氏が何やら改良してる！？<br />
  <a href="https://github.com/mgi166/ViChrome/branches/all">https://github.com/mgi166/ViChrome/branches/all</a><br />
  Chrome v57まで併せて更新している。これは使えそう。</p>
<p>  早速自分のrepositoryへFork。<br />
  リンクフォーカスを実行してみると・・・動いた！！<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-300x179.png" alt="" width="300" height="179" class="alignnone size-medium wp-image-13531" srcset="/uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-300x179.png 300w, /uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-768x457.png 768w, /uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-228x136.png 228w, /uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42.png 917w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>  が、スクロールが機能しない。。。<br />
  制御している &#8220;mode.js&#8221; を直截編集してリロードしながら探ってみる。</p>

		<div id="crayon-649540264c4da577064718" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
  Mode.prototype.reqScrollDown = function(args, times) {
      return g.view.scrollBy(0, g.model.getSetting("scrollPixelCount") * times);
  };</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c4da577064718-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c4da577064718-2">2</div><div class="crayon-num" data-line="crayon-649540264c4da577064718-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c4da577064718-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">Mode</span><span class="crayon-sy">.</span><span class="crayon-i">prototype</span><span class="crayon-sy">.</span><span class="crayon-i">reqScrollDown</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-i">args</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">times</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c4da577064718-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-i">g</span><span class="crayon-sy">.</span><span class="crayon-i">view</span><span class="crayon-sy">.</span><span class="crayon-e">scrollBy</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">g</span><span class="crayon-sy">.</span><span class="crayon-i">model</span><span class="crayon-sy">.</span><span class="crayon-e">getSetting</span><span class="crayon-sy">(</span><span class="crayon-s">"scrollPixelCount"</span><span class="crayon-sy">)</span><span class="crayon-h"> </span>*<span class="crayon-h"> </span><span class="crayon-i">times</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264c4da577064718-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>該当箇所でconsole.logを出力すると表示される。<br />
  つまりscrollByが機能していない。<br />
  更にview.jsのscrollByでOverrideしているところで window.scrollBy すると動く。<br />
  スクロールする差分のtop, leftは値が来ている。<br />
  と言う事は</p>

		<div id="crayon-649540264c4df961923706" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
  $(document.body).animate({</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c4df961923706-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c4df961923706-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-i">body</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ここが動いていないと結論。</p>
<p>  &#8220;document.body javascript animate&#8221;で検索してみると見事ヒット<br />
  <a href="http://chaika.hatenablog.com/entry/2017/09/22/090000">http://chaika.hatenablog.com/entry/2017/09/22/090000</a><br />
  これもChromeの仕様変更による、、、document.documentElementに置き換えてしまえば動く。<br />
  Firefox等では・・・と記述もあるがChromeのアドオンなので無視。</p>
<p>  最終的に以下のcommitで解決！<br />
  <a href="https://github.com/m-ohba-sterfield/ViChrome/commit/b795405539c34b6163753b80bea910e71d4facf5">https://github.com/m-ohba-sterfield/ViChrome/commit/b795405539c34b6163753b80bea910e71d4facf5</a></p>
<p>  ViChrome愛好家のお役に立てれば幸いです。</p></div>

ViChromeのIssueを解決

<h2>Windows上でUbuntuが動く</h2>
<p>Windows 10の定例アップデートで「Linux on Windows」という機能が追加されました。マジでUbuntuが動きます。以下はMicrosoft Storeにて&#8221;ubuntu&#8221;で検索した結果です。「本当です」と大変強気な姿勢。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-13510 size-large" src="/uploads-archive/2018/01/LinuxOnWindowsStore-1024x462.png" alt="" width="1024" height="462" srcset="/uploads-archive/2018/01/LinuxOnWindowsStore-1024x462.png 1024w, /uploads-archive/2018/01/LinuxOnWindowsStore-300x135.png 300w, /uploads-archive/2018/01/LinuxOnWindowsStore-768x346.png 768w, /uploads-archive/2018/01/LinuxOnWindowsStore-228x103.png 228w, /uploads-archive/2018/01/LinuxOnWindowsStore.png 1320w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
「Linux on Windows」という機能を乱暴にざっくり言うと「Linux向けにコンパイルされた実行ファイルを（Linux on Windowsを経由で）Windows上で直接実行できる」ということです。<br />
細かい導入手順は他の詳しいサイトを見て頂くとして、何が出来て何が出来ないのかをUbuntu on Windowsを例に簡単に列挙していきます。ここで言うUbuntuはWindows上で動くUbuntu on Windowsのことを指します。</p>
<h2>サポートされてないこと</h2>
<p>・Ubuntuをサーバ用途として利用する<br />
Windowsからは見かけ上Ubuntuがアプリになってます。Windowsのサービスとして登録…というのは現段階ではサポートされていないようです。本当はこれを期待していました。<br />
・X-windowを動かす<br />
未サポートと言いながら必要なパッケージを入れれば、以下の通り動作はします。しかし、アテにしていたVisual Stdio Codeは起動しなかったのでこれも残念。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-13515 size-large" src="/uploads-archive/2018/01/ChromeOnUoW-1024x426.png" alt="" width="1024" height="426" srcset="/uploads-archive/2018/01/ChromeOnUoW-1024x426.png 1024w, /uploads-archive/2018/01/ChromeOnUoW-300x125.png 300w, /uploads-archive/2018/01/ChromeOnUoW-768x319.png 768w, /uploads-archive/2018/01/ChromeOnUoW-228x95.png 228w, /uploads-archive/2018/01/ChromeOnUoW.png 1131w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h2>じゃあ何ができるのか</h2>
<p>・Windows-Ubuntu間で標準入出力が透過的に使える<br />
Ubuntu上からは以下のコマンド<br />
<code>motki@k_motoki:/mnt/c/Users/admin$ /mnt/c/Windows/System32/cmd.exe /c dir | grep "DIR"</code><br />
Windows上からは以下のコマンド<br />
<code>C:\Users\admin&gt;dir | bash -c "grep DIR"</code><br />
それぞれ、Windowsのフォルダ内ファイル列挙コマンドの結果をUbuntuのgrepに流し込んでいる処理です。</p>
<p>標準出力をWindows|Linuxで加工したい、って時がごくまれにあったりしたのですが、これまではコンソール画面のテキストをコピペしたり、ファイルに出力したものを利用したり、が一般的でした。他にもLinux側のプログラムからWindows側のファイルを操作できるようになったことで、ファイル検索やファイル内探査、ファイル加工などがやりやすくなったと思います。例えばWindowsのIDEで書いたスクリプトをちょっとLinuxで実行したい、といった時などにも応用できるのではないでしょうか。</p>
<p>このLinux on Windowsはまだまだ開発途上ですが、将来的に大きく化けそうな気がします。</p>


Windows subsystem for Linux

<p><a href="https://atone.be/" target="_blank" rel="noopener">https://atone.be/</a></p>
<p>NP後払いを提供しているネットプロテクションズが2017年の6月から提供している新しい決済「atone」が良さそうなので考察してみた。</p>
<p>&nbsp;</p>
<h2>メリット</h2>
<h4>1. 後払いの良いところを継承</h4>
<p>クレカをもっていない、代引きが利用できない等、ある一定のユーザーのニーズに応えられる</p>
<p>&nbsp;</p>
<h4>2. 安い</h4>
<p>購入者 → 初期、固定費不要。購入月だけ90円が発生</p>
<p>店舗 → クレカ決済よりも安め (1.9％+30円～)</p>
<p>&nbsp;</p>
<h4>3. まとめて請求</h4>
<p>既存の後払いは注文ごとに払込用紙が発行されていたが、atoneは1ヶ月分の注文を合算して支払える。</p>
<p>店舗としては注文毎にかかっていた請求書の費用が軽減される。</p>
<p>&nbsp;</p>
<h4>4. ポイントが溜まる、使える</h4>
<p>これは後述のデメリットの要素も含まれるが、会員登録が必須となったことでポイントが溜まる。そして使うこともできる。</p>
<p>&nbsp;</p>
<h2>デメリット</h2>
<h4>1. 会員登録が必須</h4>
<p>唯一のデメリットとも言えるのが会員登録の必須化。</p>
<p>逆にメリットも多いのだがサービスが浸透するまではデメリットになる可能性もある。</p>
<p>&nbsp;</p>
<h2>越境EC、現地ECで高メリット?</h2>
<p>現時点で正式に実施されるというアナウンスは無いが、勝手に越境、現地での利用を想定してみると、メリットがとても高い気が。</p>
<p>まず、クレカ保有率が少ない国がまだ多く、店舗側からの非クレカ決済のニーズは高い。</p>
<p>更に国によってはローカルの特殊な決済のシェアが高いことが多々あり、atoneはこれに対応できる可能性が高い。</p>
<p>なぜならばatoneは購入者の買う意志を受け付ける箱であり、実際のお金のやりとりはatoneと購入者間でなんでも良いからだ。</p>
<p>atoneが各国のローカルで資金回収ができるようになればこれが可能になる。</p>
<p>あとはかなり先の話になるかもしれないが、後払いという信用情報ありきの決済において、国外のECユーザーの情報が多数集まっているというのはそれだけでとても高い価値になる。</p>
<p>店舗側は国外に販売する際にリスクを下げることができる。</p>
<p>&nbsp;</p>
<p>今後越境・現地EC対応、更には他国展開をしていくようであれば連携が必須となってくるかもしれない</p>
<p>&nbsp;</p>


新しい決済「atone」

フロントエンドの人間が黒い画面(Macのターミナル)を使ってみて思ったこと

<blockquote class="wp-embedded-content" data-secret="aNnT5JyemQ"><p><a href="https://sterfield.co.jp/officer/%e5%96%b6%e6%a5%ad%e5%87%ba%e8%ba%ab%e3%81%8c%e3%83%9e%e3%82%af%e3%83%ad%e3%81%ab%e6%8c%91%e6%88%a6%e3%80%9c%e3%81%9d%e3%81%ae1%e3%80%9c/">営業出身がマクロに挑戦〜その1〜</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://sterfield.co.jp/officer/%e5%96%b6%e6%a5%ad%e5%87%ba%e8%ba%ab%e3%81%8c%e3%83%9e%e3%82%af%e3%83%ad%e3%81%ab%e6%8c%91%e6%88%a6%e3%80%9c%e3%81%9d%e3%81%ae1%e3%80%9c/embed/#?secret=aNnT5JyemQ" data-secret="aNnT5JyemQ" width="500" height="282" title="&#8220;営業出身がマクロに挑戦〜その1〜&#8221; &#8212; スターフィールド株式会社" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<blockquote class="wp-embedded-content" data-secret="Gh3foQ4xfp"><p><a href="https://sterfield.co.jp/officer/%e5%96%b6%e6%a5%ad%e5%87%ba%e8%ba%ab%e3%81%8c%e3%83%9e%e3%82%af%e3%83%ad%e3%81%ab%e6%8c%91%e6%88%a6%e3%80%9c%e3%81%9d%e3%81%ae2%e3%80%9c/">営業出身がマクロに挑戦〜その2〜</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://sterfield.co.jp/officer/%e5%96%b6%e6%a5%ad%e5%87%ba%e8%ba%ab%e3%81%8c%e3%83%9e%e3%82%af%e3%83%ad%e3%81%ab%e6%8c%91%e6%88%a6%e3%80%9c%e3%81%9d%e3%81%ae2%e3%80%9c/embed/#?secret=Gh3foQ4xfp" data-secret="Gh3foQ4xfp" width="500" height="282" title="&#8220;営業出身がマクロに挑戦〜その2〜&#8221; &#8212; スターフィールド株式会社" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>過去2回に渡ってお届けしました営業出身がマクロに挑戦シリーズもこの第三回目で完結です。</p>
<p>結果から先に書くと、毎週ルーティンで繰り返していたレポーティング作業が元データの貼り付けとマクロの実行だけで完了するところまで持っていくことが出来るようになりました。</p>
<h2>学習内容</h2>
<ul>
<li>Callプロシージャ</li>
<li>Functionプロシージャ</li>
</ul>
<p>今回もドットインストールのVBA入門にお世話になり、残りのレッスンを見ました。</p>
<p>しかし、これらは今回やりたかったことでは必要ではないです。</p>
<h2>マクロの結果</h2>
<p>そして下が学習の成果になります。2回目で覚えた「マクロを記憶」を事前に何度かリハーサルを重ねた上で丁寧に実行し、3つのデータそれぞれで実行したマクロを最後に一つにまとめて仕上げるということをしました。</p>
<p>その中で、Selectの指定が漏れておかしなデータを貼り付けるというような事象が生じたので、その部分はべた書きで修正するといった流れで完成しました。</p>
<p>同じマクロを参照する意味はないので、スクリーンショットでやったことをまとめます。<a href="/uploads-archive/2018/01/1a474e7682a7ad82eb69cab9a0aa8824-1.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-13509" src="/uploads-archive/2018/01/1a474e7682a7ad82eb69cab9a0aa8824-1-574x1024.png" alt="" width="574" height="1024" srcset="/uploads-archive/2018/01/1a474e7682a7ad82eb69cab9a0aa8824-1-574x1024.png 574w, /uploads-archive/2018/01/1a474e7682a7ad82eb69cab9a0aa8824-1-168x300.png 168w, /uploads-archive/2018/01/1a474e7682a7ad82eb69cab9a0aa8824-1-768x1371.png 768w, /uploads-archive/2018/01/1a474e7682a7ad82eb69cab9a0aa8824-1-228x407.png 228w, /uploads-archive/2018/01/1a474e7682a7ad82eb69cab9a0aa8824-1.png 1105w" sizes="(max-width: 574px) 100vw, 574px" /></a></p>
<p>並べ替えて別シートに移すということを繰り返しているだけではあります。本当は元データのCSVを読み込むというところも出来るはずなのですが、タイムアップで終了です。</p>
<h2>まとめ</h2>
<p>元々所要時間で言ったら5分くらいの作業ではありましたが、VBAの習得を通して、プログラミングという仕事の一端を垣間見る、理解するという意味では非常に有意義なインプットになりました。</p>
<p>このブログを書くというアウトプットがあるからこそ次は何をやろうかと考えるので、自己研鑽のいい場だとつくづく思いました。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Blogブログ

Articles

Contact Us