少しずつ実装の進んできている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>


営業出身がマクロに挑戦〜その3完〜

javascriptフレームワークのvue.jsを使ってみる④（vue-router）

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  タスク管理ツールの紹介です。<br />
  既存のツールでは以下を触っていました</p>
<blockquote><p>  ・backlog<br />
  ・trello</p></blockquote>
<p>  上記で足りない「見た目のわかりやすさ」「リマインド機能」「時間単位での管理」<br />
  などを補完するものを探して</p>
<blockquote><p>  <a href="https://nozbe.com/jp/">Nozbe</a></p></blockquote>
<p>  という管理ツールに行き着きました。</p></div>
<h3>やること</h3>
<div style="padding-left: 15px;">
<blockquote><p>  1. アカウント登録 (フリー, Googleアカウント同期で即作成出来ました)<br />
  2. タスク, カテゴリ 登録<br />
  3. プロジェクト登録<br />
  4. 連携、通知設定 (optional)</p></blockquote>
<p>  有料プランでは「チーム」機能が使え、<br />
  メンバのリソース管理や週報機能なども使用出来る模様。</p></div>
<h3>外観と操作性</h3>
<div style="padding-left: 15px;">
  トップ<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43-300x150.png" alt="" width="300" height="150" class="alignnone size-medium wp-image-13477" srcset="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43-300x150.png 300w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43-768x384.png 768w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43-1024x512.png 1024w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43-228x114.png 228w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43.png 1916w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>  シンプルかつ目的に到達しやすいUI。<br />
  Priorityには期限が近づいたタスクや重要度の高いタスクが自動的に一覧表示されます。</p>
<p>  Inboxはとりあえずタスク化するメモ的な役割の管理ページ。</p>
<p>  プロジェクトはその名の通りプロジェクトごとのタスク管理ページ。</p>
<p>  Priorityを見てみましょう。<br />
  期日の近い順と、必要工数、残工数がステータスバーに表示されるのがパット見で判り易い。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39-300x150.png" alt="" width="300" height="150" class="alignnone size-medium wp-image-13478" srcset="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39-300x150.png 300w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39-768x383.png 768w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39-1024x511.png 1024w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39-228x114.png 228w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39.png 1915w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>  プロジェクト一覧。<br />
  一覧からタスクを選択すると右のペインに所要時間や繰り返し設定、期日が表示されます。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26-300x150.png" alt="" width="300" height="150" class="alignnone size-medium wp-image-13479" srcset="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26-300x150.png 300w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26-768x383.png 768w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26-1024x511.png 1024w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26-228x114.png 228w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26.png 1917w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>  ここで一番のネックが「所要時間」が「８時間」までしか出来ないこと。。。<br />
  一日単位の管理なのか８時間超えのタスクをどうすればよいのか、、、思い悩み中です。</p></div>
<h3>リマインド機能</h3>
<div style="padding-left: 15px;">
  今日と明日、ともに通知してくれる。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27-300x150.png" alt="" width="300" height="150" class="alignnone size-medium wp-image-13480" srcset="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27-300x150.png 300w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27-768x384.png 768w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27-1024x513.png 1024w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27-228x114.png 228w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27.png 1910w" sizes="(max-width: 300px) 100vw, 300px" /><br />
  もちろんスマホ版のアプリもあるのでタスクが埋もれやすい人向け。</div>
<h3>総観</h3>
<div style="padding-left: 15px;">
  所要時間の単位が一日以下(？)というのが規模の大きいプロジェクトに向きません。</p>
<p>  リマインドや残時間を見える化してくれるところが<br />
  「時間に追われてタスクが埋もれる・忘れる」人向け的な作りになっています。</p>
<p>  個人的にはタスクの「進捗率」「所要時間」が改善されたすぐ有料版でも導入したいです。</p></div>


タスク管理ツールを探して

<blockquote class="wp-embedded-content" data-secret="EDVQN3tCUK"><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=EDVQN3tCUK" data-secret="EDVQN3tCUK" width="500" height="282" title="&#8220;営業出身がマクロに挑戦〜その1〜&#8221; &#8212; スターフィールド株式会社" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>前回に引き続き、マクロを習得していっています。</p>
<p>今回もお世話になったのはドットインストールです。</p>
<h2>VBAを粛々と学習</h2>
<p>学習した内容は以下の感じ。</p>
<ul id="lesson_summary">
<li>Rangeオブジェクト</li>
<li class="lh18">Withステートメント</li>
<li class="lh18">プロパティ値の取得</li>
<li class="lh18">メソッドの実行</li>
<li>変数の宣言</li>
<li>データ型</li>
<li class="lh18">配列の宣言</li>
<li>条件分岐</li>
<li>ループ処理</li>
<li>配列のループ（ここまで来ると難しい・・・・）</li>
</ul>
<p>消化不良を起こしそうなので、あと一回かけてVBA入門は終了させます。</p>
<p>自分で書いたことはないのですが、他のプログラミング言語と考え方は一緒なんだなと思いました。</p>
<h2>マクロを記録</h2>
<p>学習進めていくうちに、マクロ側から操作をしてVBAに出力出来るということがわかりまして、その操作がどのような出力になっているのか確かめるのに使うといいよとあったのですが、基礎が分かったら、マクロを記録してからの調整のほうが目的に早く到達出来そうな予感がします。このあたりが初心者の右往左往感を感じ取って頂ければと。</p>
<p>ここでやってみたのは、</p>
<ul>
<li>元データとなるシートにソートを掛け。</li>
<li>その範囲をコピー</li>
<li>所定のシートにペースト</li>
</ul>
<p>です。本来やりたいことの一部です。</p>

		<div id="crayon-649540264be2d966635948" 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></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;">
Sub Macro1()
'
' Macro1 Macro
'

'
    ActiveWorkbook.Worksheets("ほげほげ").Sort.SortFields.Clear
    ActiveWorkbook.Worksheets("ほげほげ").Sort.SortFields.Add Key _
        :=Range("B1"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortNormal
    With ActiveWorkbook.Worksheets("ほげほげ").Sort
        .SetRange Range("A3:J65")
        .Header = xlGuess
        .MatchCase = False
        .Orientation = xlTopToBottom
        .SortMethod = xlPinYin
        .Apply
    End With
    Range("A1:J65").Select
    Range("J65").Activate
    Selection.Copy
    Range("H1").Select
    Sheets.Add
    ActiveSheet.Paste
End Sub</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-649540264be2d966635948-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-2">2</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-4">4</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-6">6</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-8">8</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-10">10</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-12">12</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-14">14</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-16">16</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-18">18</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-20">20</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-22">22</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264be2d966635948-24">24</div><div class="crayon-num" data-line="crayon-649540264be2d966635948-25">25</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-649540264be2d966635948-1"><span class="crayon-e">Sub </span><span class="crayon-e">Macro1</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-2"><span class="crayon-s">'</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-3"><span class="crayon-s">'</span><span class="crayon-h"> </span><span class="crayon-e">Macro1 </span><span class="crayon-i">Macro</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-4"><span class="crayon-s">'</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-6"><span class="crayon-s">'</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">ActiveWorkbook</span><span class="crayon-sy">.</span><span class="crayon-e">Worksheets</span><span class="crayon-sy">(</span><span class="crayon-s">"ほげほげ"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">Sort</span><span class="crayon-sy">.</span><span class="crayon-i">SortFields</span><span class="crayon-sy">.</span><span class="crayon-e">Clear</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-8"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">ActiveWorkbook</span><span class="crayon-sy">.</span><span class="crayon-e">Worksheets</span><span class="crayon-sy">(</span><span class="crayon-s">"ほげほげ"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">Sort</span><span class="crayon-sy">.</span><span class="crayon-i">SortFields</span><span class="crayon-sy">.</span><span class="crayon-e">Add </span><span class="crayon-i">Key</span><span class="crayon-h"> </span><span class="crayon-i">_</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">:</span>=<span class="crayon-e">Range</span><span class="crayon-sy">(</span><span class="crayon-s">"B1"</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">SortOn</span><span class="crayon-sy">:</span>=<span class="crayon-i">xlSortOnValues</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">Order</span><span class="crayon-sy">:</span>=<span class="crayon-i">xlAscending</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">DataOption</span><span class="crayon-sy">:</span>=<span class="crayon-h"> </span><span class="crayon-i">_</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">xlSortNormal</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-11"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">With </span><span class="crayon-i">ActiveWorkbook</span><span class="crayon-sy">.</span><span class="crayon-e">Worksheets</span><span class="crayon-sy">(</span><span class="crayon-s">"ほげほげ"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">Sort</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">.</span><span class="crayon-e">SetRange </span><span class="crayon-e">Range</span><span class="crayon-sy">(</span><span class="crayon-s">"A3:J65"</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">.</span><span class="crayon-i">Header</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">xlGuess</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">.</span><span class="crayon-i">MatchCase</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">False</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">.</span><span class="crayon-i">Orientation</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">xlTopToBottom</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">.</span><span class="crayon-i">SortMethod</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">xlPinYin</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">.</span><span class="crayon-e">Apply</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-18"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">End</span><span class="crayon-h"> </span><span class="crayon-e">With</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-19"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">Range</span><span class="crayon-sy">(</span><span class="crayon-s">"A1:J65"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">Select</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-20"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">Range</span><span class="crayon-sy">(</span><span class="crayon-s">"J65"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">Activate</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-21"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">Selection</span><span class="crayon-sy">.</span><span class="crayon-e">Copy</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-22"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">Range</span><span class="crayon-sy">(</span><span class="crayon-s">"H1"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">Select</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-23"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">Sheets</span><span class="crayon-sy">.</span><span class="crayon-e">Add</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264be2d966635948-24"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">ActiveSheet</span><span class="crayon-sy">.</span><span class="crayon-e">Paste</span></div><div class="crayon-line" id="crayon-649540264be2d966635948-25"><span class="crayon-st">End</span><span class="crayon-h"> </span><span class="crayon-i">Sub</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>とりあえず、マクロを記述してみて分かるのが、</p>
<p>Range(&#8220;J65&#8221;).Activate</p>
<p>こういった記述が不要であること。VBAサイドを少しでも理解していなかったら分からなかったことだと思うので学習効果はあったことが実感出来ます。</p>
<p>そして、所定のシートとしたいところも、アクティブなシートへペーストとなってしまっており、このあたりはマクロを記録しただけでは、判断出来ないことも理解出来るので、ファイル名、シート名を指定していく必要があるのでしょう。</p>
<h2>まとめ</h2>
<p>マクロを記録してから調整。</p>

営業出身がマクロに挑戦〜その2〜

<p>ついに日本でもなんとか手に入るようになったamazon Echo対応スピーカー。AlexaとかEchoとか色々呼ばれているので、まとめるとこんな感じでした。</p>
<table>
<tbody>
<tr>
<td>項目</td>
<td>概要</td>
</tr>
<tr>
<td>amazon Echo</td>
<td>AIスピーカー、スマートスピーカーと呼ばれる商品名のひとつ</td>
</tr>
<tr>
<td>Alexa</td>
<td>amazon Echoのバックエンドで動作するAIの名前</td>
</tr>
</tbody>
</table>
<p>さて、自分は運良くEcho購入権のメールが届いたクチでして、2週間前くらいから家電リモコン装置とあわせてEchoを使っています。</p>
<p>Echoは購入直後からの初期設定、通常の動作管理などをスマホで行ます。利用者の発話を拾った結果もスマホで確認できるのですが、それを最初に見たとき背筋がぞわっとしました。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-13463" src="/uploads-archive/2017/12/alexa-239x300.png" alt="" width="239" height="300" srcset="/uploads-archive/2017/12/alexa-239x300.png 239w, /uploads-archive/2017/12/alexa-768x963.png 768w, /uploads-archive/2017/12/alexa-816x1024.png 816w, /uploads-archive/2017/12/alexa-228x286.png 228w, /uploads-archive/2017/12/alexa.png 1066w" sizes="(max-width: 239px) 100vw, 239px" /></p>
<p>「家電リモコンを使ってテレビをつけて」「家電リモコンで暖房をつけて」と認識しています。そうです、音声情報を「漢字仮名交じり文」として処理している、という点が本当に凄い。もともとAIは専門外ですが、昔からコンピュータを触っていて、その手の技術の歴史を知る人間にとっては驚異的なことです。少なくとも自分には非常にショッキングなポイントでした。</p>
<p>コンピュータへの日本語入力は昔から様々な研究が行われていましたが、言語の特性上、同音異義語が多様される日本語において、音声から適切な漢字仮名交じり文を生成するのは非常に大変です。Alexaでの実現方法については、おそらくですが膨大な統計に基づく「AIスピーカーへ入力されうる命令のパターン」と「隠れマルコフモデル」に類するアルゴリズムで漢字仮名交じり文を生成しているのでしょうが、それでも恐ろしい精度です。Alexaの北米版リリースから日本版リリースまで2年かかっただけのことはあります。</p>
<p>Alexaがもてはやされている理由のもう一つがアプリケーションの開発だと思います。Alexaでは「スキル」と呼ばれていますが、Echo日本語版発売から、各プロットフォームホルダー各社がお試しに<a href="https://m.media-amazon.com/images/G/01/mobile-apps/dex/alexa/alexa-skills-kit/jp/skills/Alexa_Skills_List_1108.pdf">様々なスキルを提供しています</a>ね。</p>
<p>AIスピーカー、スマートスピーカーは各社がプラットフォームになろうとしのぎを削っているようで、今後、逆ザヤ上等のサービス展開が繰り広げられると思います。ただ、自分の考えとしては、目を離すことのできない子どもが居る子育て世帯、寝たきりの人がいる自宅看護・介護世帯向けのアプリケーションを揃えたところが強みを持ちそうだなと思います。</p>
<p>そのアプリケーションであるところのAlexaのスキルで具体的に何ができるのか、簡単なスキルを開発してみて、ここで報告してみようと思います。</p>


Alexaのここがヤバい

<p>一個大きなリリースとして、Symfony4はもど便利と自動化。</p>
<h2>インストール</h2>
<p>composerからインストールした後に自動化menuを出ます</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium" src="https://cdn-images-1.medium.com/max/1600/0*OmIJulJkLYlv1bKW.png" width="400" height="185" /></p>
<p>make serve はデフォルトフォルダー下、新しいフォルダー追加</p>
<p>デフォルトフォルダー：</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-13446" src="/uploads-archive/2017/12/EFF63EAC-B140-4336-9F80-607F03D3E8E1-300x89.png" alt="" width="300" height="89" srcset="/uploads-archive/2017/12/EFF63EAC-B140-4336-9F80-607F03D3E8E1-300x89.png 300w, /uploads-archive/2017/12/EFF63EAC-B140-4336-9F80-607F03D3E8E1-768x228.png 768w, /uploads-archive/2017/12/EFF63EAC-B140-4336-9F80-607F03D3E8E1-1024x303.png 1024w, /uploads-archive/2017/12/EFF63EAC-B140-4336-9F80-607F03D3E8E1-228x68.png 228w, /uploads-archive/2017/12/EFF63EAC-B140-4336-9F80-607F03D3E8E1.png 1330w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2>Bundle Registered</h2>
<p>Symfony2.8にbundleの管理composerの中に設定して、問題点はcomposer.jsonは長すぎので、メモリの要求は厳しなってきた。</p>
<p>Symfony４は（３.４以上）にbundles.phpに移動した</p>

		<div id="crayon-649540264bc47497028563" 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></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;">
return [
    'Symfony\Bundle\FrameworkBundle\FrameworkBundle' =&amp;gt; ['all' =&amp;gt; true],
];</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-649540264bc47497028563-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264bc47497028563-2">2</div><div class="crayon-num" data-line="crayon-649540264bc47497028563-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-649540264bc47497028563-1"><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264bc47497028563-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'Symfony\Bundle\FrameworkBundle\FrameworkBundle'</span><span class="crayon-h"> </span>=<span class="crayon-sy">&amp;gt;</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">'all'</span><span class="crayon-h"> </span>=<span class="crayon-sy">&amp;gt;</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540264bc47497028563-3"><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>新しい機能</h2>
<p>Symfony Flexは自動化するプロセス</p>
<p>manifest.json</p>

		<div id="crayon-649540264bc4c645117246" 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></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;">
{
 "bundles": {
 "Symfony\\Bundle\\SwiftmailerBundle\\SwiftmailerBundle": ["all"]
 },
 "copy-from-recipe": {
 "config/": "%CONFIG_DIR%/"
 },
 "env": {
 "MAILER_URL": "smtp://localhost:25?encryption=&amp;amp;auth_mode="
 },
 "aliases": ["mailer", "mail"]
}</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-649540264bc4c645117246-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264bc4c645117246-2">2</div><div class="crayon-num" data-line="crayon-649540264bc4c645117246-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264bc4c645117246-4">4</div><div class="crayon-num" data-line="crayon-649540264bc4c645117246-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264bc4c645117246-6">6</div><div class="crayon-num" data-line="crayon-649540264bc4c645117246-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264bc4c645117246-8">8</div><div class="crayon-num" data-line="crayon-649540264bc4c645117246-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264bc4c645117246-10">10</div><div class="crayon-num" data-line="crayon-649540264bc4c645117246-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264bc4c645117246-12">12</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-649540264bc4c645117246-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264bc4c645117246-2"><span class="crayon-h"> </span><span class="crayon-s">"bundles"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264bc4c645117246-3"><span class="crayon-h"> </span><span class="crayon-s">"Symfony\\Bundle\\SwiftmailerBundle\\SwiftmailerBundle"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">"all"</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264bc4c645117246-4"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540264bc4c645117246-5"><span class="crayon-h"> </span><span class="crayon-s">"copy-from-recipe"</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-649540264bc4c645117246-6"><span class="crayon-h"> </span><span class="crayon-s">"config/"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"%CONFIG_DIR%/"</span></div><div class="crayon-line" id="crayon-649540264bc4c645117246-7"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264bc4c645117246-8"><span class="crayon-h"> </span><span class="crayon-s">"env"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264bc4c645117246-9"><span class="crayon-h"> </span><span class="crayon-s">"MAILER_URL"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"smtp://localhost:25?encryption=&amp;amp;auth_mode="</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264bc4c645117246-10"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540264bc4c645117246-11"><span class="crayon-h"> </span><span class="crayon-s">"aliases"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">"mailer"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"mail"</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264bc4c645117246-12"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/o9N1nOYfAl4?feature=oembed" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe></p>

Symfony4 紹介 （１）

<p>弊社はCompeNaviという、全国のコンテスト情報を集めたポータルサイトを運営しています。<br />
&lt;img src=&quot;<br />
<a href="http://compe.sterfield.jp">コンペ、コンテスト、公募、コンクールのポータルサイト【コンペナビ】</a></p>
<p>CompeNaviのメインの事業はコンテスト情報の紹介ですが、それだけでなくコンテストを主催する自治体や企業様のサポートも行っています。</p>
<p>コンテストというと、キャッチコピーや写真、アイデアなど色々なジャンルがあるのですが、主催サポート業務についてお問い合わせが多いのが、じつは「PR動画コンテスト」を企画中の自治体様です。<br />
それは、動画コンテストを成功させることの難易度の高さを物語っていると言えるでしょう。</p>
<p>キャッチコピーや写真コンテストに比べて、PR動画コンテストが難しい理由はざっと下記のものになります。</p>
<ul>
<li>制作する労力がかかる</li>
<p>1作品作るためにかかる時間が、他のコンテストに比べてかさむ傾向にあります。</p>
<li>一人で何作品もつくれない</li>
<p>そのため、一人の応募者が提出できる作品はせいぜい１作品か2作品程度。キャッチコピーや写真などは一人で複数作品を提出することも可能なので、投稿作品総数は多くなりやすいです。</p>
<li>現地に行かないと撮れない</li>
<p>小説やキャッチコピーの場合は、主催する自治体に実際にいかなくても公開されている情報や想像で作品化することも可能ですが、映像の場合は現地に行っての撮影が必須です。</p>
<li>その結果…</li>
<p>投稿数が増えない、、作品のクオリティが今ひとつ、、コンテスト自体が話題にならない、、という結果になることが多いようです。
</ul>
<p>そうならないために、どうしたら良いか…。<br />
どこの自治体や企業にも当てはまる特効薬はないと思いますが、最近弊社が主催サポートした自治体様での事例がそのヒントになるかもしれません。</p>
<p>ご興味のあるかたはご覧になって下さい。</p>
<blockquote class="wp-embedded-content" data-secret="rGJFvbSnFU"><p><a href="http://compe.sterfield.jp/editor/otaku-prmovie/">地方自治体主催コンテストの成功の秘訣とは！？応募総数124作品！大田区商店街PR動画コンテスト</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="http://compe.sterfield.jp/editor/otaku-prmovie/embed/#?secret=rGJFvbSnFU" data-secret="rGJFvbSnFU" width="500" height="282" title="&#8220;地方自治体主催コンテストの成功の秘訣とは！？&lt;br&gt;応募総数124作品！大田区商店街PR動画コンテスト&#8221; &#8212; コンペ、コンテスト、公募、コンクールのポータルサイト【コンペナビ】" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>


地方自治体主催動画コンテストの成功の秘訣

<p>半年ほど前、フランスのとある企業がNOKIAに買収されました。Withingsというベンチャー企業です。<br />
Withingsというのはスマートヘルスケアデバイスを発売しているメーカーだったのですが、実はそこの体重計を2010年から使っています。<br />
・測定データの保持が無制限<br />
・他のサービスと自動連携<br />
・自分のデータを操作するAPIを提供<br />
といった今ではあたりまえの機能を最初から提供しており、この手の分野では草分け的存在です。<br />
日本国内であれば、なぜかメーカーがデータを囲い込むパターンが多くて、医療情報に関する考え方が日本とそれ以外で根本的に違う、ということが理解できますね。<br />
カルテを含む個人の医療情報を管理する&#8221;Personal Health Records&#8221;なんて言葉があった時代もありました。あんまり定着はしませんでしたが……</p>
<p>それから数年。<br />
AppleもGoogleもスマホのOSとして健康情報統合サービスとでも言うべき機能を載せてきました。AndroidであればGoogle Fitというサービスで、スマートフォンの位置情報やセンサー情報等から歩数や移動量を記録するようになりました。<br />
体重計、ジョギング記録アプリ、自転車トラッキングアプリ、睡眠管理、食事記録、といった各種アプリケーション・サービスと相互連携もとれるようになっています。</p>
<p>今回、廉価版活動量計<a href="https://health.nokia.com/jp/ja/go">Nokia GO</a>を手に入れたので、使用感をざっくり書きます。</p>
<p>・充電しなくて良い<br />
ボタン電池式という割り切った設計なので、帰宅後の充電作業から開放されました。これにより<br />
・睡眠記録がとりやすい<br />
という副産物が生まれました。リストバンドの違和感もないので、今はほとんど常時、身に付けています。</p>
<p>その結果、どうなったか。</p>
<p>まだ、体型には反映されていませんが、とりあえず今のところは、食事に気を遣うようになりましたので、今後も進展を書いていきたいと思います。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2017/11/withings.png" alt="" width="505" height="552" class="alignnone size-full wp-image-13432" srcset="/uploads-archive/2017/11/withings.png 505w, /uploads-archive/2017/11/withings-274x300.png 274w, /uploads-archive/2017/11/withings-228x249.png 228w" sizes="(max-width: 505px) 100vw, 505px" /></p>


活動量計が面白い

<h2>紹介</h2>
<p>Nnigxは一個host名下に多数のrootフォルダを指定可能です</p>
<p>例</p>

		<div id="crayon-649540264ba77722044766" 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></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;">
server {

  index index.html;
  server_name test.example.com;

  root /web/test.example.com/www;

  location /static {
    alias /web/test.example.com/static;
  }

}</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-649540264ba77722044766-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264ba77722044766-2">2</div><div class="crayon-num" data-line="crayon-649540264ba77722044766-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264ba77722044766-4">4</div><div class="crayon-num" data-line="crayon-649540264ba77722044766-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264ba77722044766-6">6</div><div class="crayon-num" data-line="crayon-649540264ba77722044766-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264ba77722044766-8">8</div><div class="crayon-num" data-line="crayon-649540264ba77722044766-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264ba77722044766-10">10</div><div class="crayon-num" data-line="crayon-649540264ba77722044766-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264ba77722044766-12">12</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-649540264ba77722044766-1"><span class="crayon-e">server</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264ba77722044766-2">&nbsp;</div><div class="crayon-line" id="crayon-649540264ba77722044766-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">index </span><span class="crayon-i">index</span><span class="crayon-sy">.</span><span class="crayon-i">html</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264ba77722044766-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">server_name </span><span class="crayon-i">test</span><span class="crayon-sy">.</span><span class="crayon-i">example</span><span class="crayon-sy">.</span><span class="crayon-i">com</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264ba77722044766-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540264ba77722044766-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">root</span><span class="crayon-h"> </span>/<span class="crayon-i">web</span>/<span class="crayon-i">test</span><span class="crayon-sy">.</span><span class="crayon-i">example</span><span class="crayon-sy">.</span><span class="crayon-i">com</span>/<span class="crayon-i">www</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264ba77722044766-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540264ba77722044766-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">location</span><span class="crayon-h"> </span>/<span class="crayon-m">static</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264ba77722044766-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">alias</span><span class="crayon-h"> </span>/<span class="crayon-i">web</span>/<span class="crayon-i">test</span><span class="crayon-sy">.</span><span class="crayon-i">example</span><span class="crayon-sy">.</span><span class="crayon-i">com</span>/<span class="crayon-m">static</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264ba77722044766-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540264ba77722044766-11">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540264ba77722044766-12"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>この意味は</p>
<p>test.example.com にアクセスとと /web/test.example.com/www。このテストのフォルダをみている</p>
<p>そしてtest.example.com/staticにするをフォルダを変わって/web/test.example.com/staticに見っている。</p>
<h2>有利点</h2>
<p>この機能があれば、java、php、rubyとか同じhost名下に作業が可能です</p>
<p>&nbsp;</p>
<p>サイト全体的に一個main cssやjsの参考可能のて</p>
<p>理念出来にActionとDesignがわけってる</p>

Nnigx 多数のrootフォルダー設定

<p>ずっとやりたいと思っていたマクロの習得に挑戦することにしました。</p>
<p>なぜこのように思いたったかと言うと</p>
<p class="entry-title"><a class="entry-title-link bookmark" href="http://fromdusktildawn.hatenablog.com/entry/2017/11/05/091511" target="_blank" rel="noopener">マクロによる業務効率化に失敗する人と成功する人の違い</a></p>
<p>という記事を読み、まさに自分に当てはまるなぁと。</p>
<p>あとは昔から話題になっていた（おそらく釣り）知恵袋の投稿</p>
<p class="r"><a href="https://www.google.co.jp/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwiK7rj1zb3XAhVKf7wKHcccCTMQFggmMAA&amp;url=https%3A%2F%2Fdetail.chiebukuro.yahoo.co.jp%2Fqa%2Fquestion_detail%2Fq1132734326&amp;usg=AOvVaw1Fu9ACCrYZl3DDlV6CcEBf" target="_blank" rel="noopener">自分でマクロを組んで仕事をする新入社員をどう思いますか！？</a></p>
<p>を知っていて、この次元の会社にしてしまったら終わりだななんて思いながら我が身を振り返ってみると毎週作成している週報。そして、月間のレポートが増えていることに気づきました。</p>
<p>アクセス解析レポートは既に、月額5000円くらいでGoogleアナリティクスのデータをレポート形式にアウトプットしてくれるツールがあるので利用していますが、他のレポートに関しては、完全なルーティーンワークで多い月には数千行に及ぶデータ量。関数はガツガツ仕込んでいるので大分軽減は出来ているもののもう一歩レベルをあげようと初めてのマクロに挑戦することにしました。</p>
<p>一旦の目標は、ダウンロードしたデータを並べ変えて関数を記述してある定形のとあるレポートフォーマットを作成することです。実際には10分未満の作業なのですが、これをどのくらいの勉強時間とコーディング時間で行けるのか何回かに渡って書いていきたいと思います。</p>
<h2>マクロの基礎知識</h2>
<p>まず、言葉の定義からすると、</p>
<blockquote><p>パソコンで、複雑な操作の手順をあらかじめ登録しておき、必要なときに簡単に実行させる機能。マクロ機能。</p></blockquote>
<p><a href="https://kotobank.jp/word/%E3%83%9E%E3%82%AF%E3%83%AD-8983" target="_blank" rel="noopener">https://kotobank.jp/word/%E3%83%9E%E3%82%AF%E3%83%AD-8983</a></p>
<p>とあります。いわゆる自動化ですね。</p>
<p>そして、この機能を記述している言語が「Visual Basic for Applications（VBA）」というものになります。</p>
<p>つまり、マクロを書くというような表現がありますが、正確には、VBAを書いてマクロを定義するということになります。</p>
<p>以降も便宜的にマクロを書くという表現を使っていきます。</p>
<h2>マクロの勉強方法</h2>
<p>マクロが得意と自称するエンジニアに相談したところ<a href="http://officetanaka.net/excel/vba/tips/" target="_blank" rel="noopener">Office TANAKA</a>というサイトを教えて頂きました。</p>
<p>とてもよくまとまっているので今後使えそうですが、基本を体系的に抑えたいと考えた時にいつもお世話になっている<a href="https://dotinstall.com/lessons/basic_excel_vba" target="_blank" rel="noopener">ドットインストール</a>さんですね。</p>
<p>しっかりVBAのアナウンスもありました。</p>
<p>ドットインストールを進めて行きながら次回は、実際にファイル操作を出来るところまでやってみたいと思います。</p>
<p>最後にお作法ですね。hello worldで第一回目を終わりにします。（ドットインストールの3番目までの動画で習得できます。）</p>
<p><a href="/uploads-archive/2017/11/5829375102cf885bcb6fcfc9cf680b65.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-13420" src="/uploads-archive/2017/11/5829375102cf885bcb6fcfc9cf680b65-300x188.png" alt="" width="300" height="188" srcset="/uploads-archive/2017/11/5829375102cf885bcb6fcfc9cf680b65-300x188.png 300w, /uploads-archive/2017/11/5829375102cf885bcb6fcfc9cf680b65-768x481.png 768w, /uploads-archive/2017/11/5829375102cf885bcb6fcfc9cf680b65-1024x641.png 1024w, /uploads-archive/2017/11/5829375102cf885bcb6fcfc9cf680b65-228x143.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h2>参考サイト</h2>
<p><a href="http://officetanaka.net/excel/vba/tips/" target="_blank" rel="noopener">Office TANAKA</a></p>
<p><a href="https://dotinstall.com/lessons/basic_excel_vba" target="_blank" rel="noopener">ドットインストール</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2018/02/14

2018/01/17

2018/01/17

2018/01/17

2018/01/17

2018/01/17

2018/01/17

2018/01/16

2018/01/16

2017/12/13

2017/12/13

2017/12/13

2017/12/13

2017/12/13

2017/12/13

2017/11/15

2017/11/15

2017/11/15