PayPal ExpressCheckoutボタンの実装

今更だけどPugを使ってみました

<p>今まで、プロジェクトはMVC基準についに</p>
<p>前のブロック<a href="https://sterfield.co.jp/programmer/%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91%E3%80%81%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%83%AD%E3%82%B8%E3%83%83%E3%82%AF%E3%83%88%E3%83%AC%E3%83%B3%E3%83%89/">初心者向け、プログラマーロジックトレンド</a>に紹介してMVC理念</p>
<p>アプリケーションStructureの原本の目的はチームにとしてプロジェクト開発を易いため使いです。</p>
<p>設計チーム、データチーム、開発チームぞれそれのタスクで影響少ないため、MVCStructureを使う。</p>
<p>&nbsp;</p>
<p>今回紹介したMVVM（Model View ViewModel）にも同じ目的です。</p>
<p>MVVMの面白い場所はControllarなしで</p>
<p>全てJSで作業可能です。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium" src="https://upload.wikimedia.org/wikipedia/commons/8/87/MVVMPattern.png" width="771" height="232" /></p>
<p>Model: データ</p>
<p>ViewModel: データ処理</p>
<p>View：表示形</p>
<h2>誕生</h2>
<blockquote><p>2005年に、マイクロソフトのWPFおよびSilverlightアーキテクトであったJohn Gossmanが自身のブログでModel-View-ViewModel (MVVM) パターンを発表しました。MVVMとFowlerのプレゼンテーションモデルは、両方ともビューの状態と動作を含んだ形でビューを抽象化しています。Gossmanはユーザインタフェースの作成を簡素化するために、WPFの活用コア機能への標準化された方法としてMVVMを導入し、一方、FowlerはビューのUIプラットフォームに依存しない抽象化を作成するための手段としてプレゼンテーションモデルを導入しました。その意味で、一般的なPMパターンをWPFとSilverlightのプラットフォームにより特化したものになるようにMVVMを検討しています。</p>
<p>&#8211;Wiki</p></blockquote>
<h2>発展</h2>
<p>今はデータの大爆発時代で、googleをサーバーの負荷下ろすため、MVVMのStructureを使う。</p>
<p>全てはajaxやjsをBuildして、サーバーのメモリーや一切使わせて、逆に使う顧客のメモリーを喰える。</p>
<p>今代表的にはAngular js。アンドロイドにもこの技術を使ってる。</p>
<p>&nbsp;</p>
<p>利点：有効にサーバーの負荷を降ろす</p>
<p>欠点：ユーザーのCPUやメモリーや使う環境を考え必要</p>


Webアプリケーション Structure ー MVVM 紹介

WordPressの管理画面で、どこからでもユーザーの言語切替できるようにする

【JavaScript】オブジェクト(連想配列)･JSON の操作を簡単にするJSツール作りました

<p>githubの後追いとして生まれたgitlabを少し試してみました。</p>
<p>githubはアカウントに課金しない場合、リポジトリが全て公開されるというオープンソース精神が非常に強い仕様でした。しかしgitlabは無料アカウントでも非公開リポジトリやメンバー限定リポジトリを作成できます。</p>
<p>githubでcommitやpushもしたことのない自分ですが、クローズドならば、ということで今回アカウントを作成し、手元にあったテストプログラムのリポジトリを作成するまでを試してみました。</p>
<p>branchのツリーグラフビューや</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-13610" src="/uploads-archive/2018/02/320f2d2f79fcb6febe4391c7aaf3db31-300x178.png" alt="" width="300" height="178" srcset="/uploads-archive/2018/02/320f2d2f79fcb6febe4391c7aaf3db31-300x178.png 300w, /uploads-archive/2018/02/320f2d2f79fcb6febe4391c7aaf3db31-228x135.png 228w, /uploads-archive/2018/02/320f2d2f79fcb6febe4391c7aaf3db31.png 552w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>コミットごとの差分閲覧</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-13613" src="/uploads-archive/2018/02/2e3e65957d1cfdfececc9df7a313572b-300x219.png" alt="" width="300" height="219" srcset="/uploads-archive/2018/02/2e3e65957d1cfdfececc9df7a313572b-300x219.png 300w, /uploads-archive/2018/02/2e3e65957d1cfdfececc9df7a313572b-768x560.png 768w, /uploads-archive/2018/02/2e3e65957d1cfdfececc9df7a313572b-228x166.png 228w, /uploads-archive/2018/02/2e3e65957d1cfdfececc9df7a313572b.png 1000w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>push時にgit hookを使った通知</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-13611" src="/uploads-archive/2018/02/24603bed171dd5bd956214283bc0168f-300x103.png" alt="" width="300" height="103" srcset="/uploads-archive/2018/02/24603bed171dd5bd956214283bc0168f-300x103.png 300w, /uploads-archive/2018/02/24603bed171dd5bd956214283bc0168f-768x264.png 768w, /uploads-archive/2018/02/24603bed171dd5bd956214283bc0168f-228x78.png 228w, /uploads-archive/2018/02/24603bed171dd5bd956214283bc0168f.png 815w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>など、基本＋あったらいいな、という機能は全部備わっている感じです。さらにプロジェクトごとのメニューにはCI/CDという文字列が。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13614" src="/uploads-archive/2018/02/CICD.png" alt="" width="213" height="260" /></p>
<p>継続的インテグレーション/継続的デリバリーという意味で、書いたプログラムをpushするたびにビルド・自動テスト・実行環境への配信までを自動化する機能のとっかかりが用意されているようです。とはいってもCI/CDは未経験の世界。凄そう＆楽できそう、というイメージはあるものの具体的なことはやってみないと分かりません。</p>
<p>とりあえずは、個人的に作ってるプログラムをgitlabで管理して、CI/CDツールも合わせて使ってみようと思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


gitlabを試してみる

<p>wordpressでCSVで記事を登録したいという要望があり、それに見合いそうなプラグインを発見しました。</p>
<p>wordpressでサイトを作成するのは一般的になりつつあり、記事ではなく商品を記事として登録しくことも多いです。<br />
記事として登録することで検索がしやすい、カテゴリーで分けられる等々便利なので、本来の記事という役割を超えた使われ方をしていますね。<br />
まぁそんな御託はどうでも良いのですが、その登録を一括でしてくれるのが今回紹介するプラグインですね。</p>
<h2>Really Simple CSV Importer</h2>
<p>このプラグインの特徴！</p>
<p>・記事の登録、更新ができる<br />
・カテゴリー、タグに対応<br />
・カスタムフィールド対応(Custom Field Suite,Advanced Custom Field,Smart Custom Field対応)<br />
・カスタム投稿タイプも対応<br />
・下書き、公開設定も変更可能</p>
<h3>インストール</h3>
<p>通常のプラグインと同じで、<br />
管理画面 &gt; プラグイン &gt; 新規追加<br />
で、Really Simple CSV Importer　を検索してインストールすればOKです！</p>
<h3>インポートする時</h3>
<p>左メニューの<br />
ツール &gt; インポート　<br />
をクリックするとインポートの画面になります。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/02/c2626de1c7d899d1c7cafb8a0af32cd8.png" alt="" width="767" height="374" class="alignnone size-full wp-image-13635" srcset="/uploads-archive/2018/02/c2626de1c7d899d1c7cafb8a0af32cd8.png 767w, /uploads-archive/2018/02/c2626de1c7d899d1c7cafb8a0af32cd8-300x146.png 300w, /uploads-archive/2018/02/c2626de1c7d899d1c7cafb8a0af32cd8-228x111.png 228w" sizes="(max-width: 767px) 100vw, 767px" /></p>
<p>上記画像にあるように、「インポーターの実行」をクリックします。</p>
<p>すると、</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/02/81f3f4c6f6da8e3a5ec15198d48d5066.png" alt="" width="817" height="349" class="alignnone size-full wp-image-13636" srcset="/uploads-archive/2018/02/81f3f4c6f6da8e3a5ec15198d48d5066.png 817w, /uploads-archive/2018/02/81f3f4c6f6da8e3a5ec15198d48d5066-300x128.png 300w, /uploads-archive/2018/02/81f3f4c6f6da8e3a5ec15198d48d5066-768x328.png 768w, /uploads-archive/2018/02/81f3f4c6f6da8e3a5ec15198d48d5066-228x97.png 228w" sizes="(max-width: 817px) 100vw, 817px" /></p>
<p>このような画面になるので、後は書いてある通りにすればOKです！</p>
<p>ルールとして、</p>
<ul>
<li>文字セットにUTF-8を選択してください。</li>
<li>フィールド区切りに &#8220;,&#8221; を使用してください。</li>
<li>全てのテキストセルを引用符で囲ってください。</li>
</ul>
<p>とあるのでこの点は気をつけてください。</p>
<p>また、CSVのサンプルをダウンロードすることが出来ます。<br />
サンプルは下記のような感じです。</p>
<h3>CSV例</h3>
<p></p>

		<div id="crayon-649540264cb72457828301" 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;">
"post_id","post_name","post_author","post_date","post_type","post_status","post_title","post_content","post_category","post_tags","custom_field"
,"Import-test","admin",2013/9/13 0:00,"post","publish","CSV Import Test","This is a post for csv import.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.","fruits","apple,banana","this is custom field value."
,,"editor",,"post","publish","define author test",,,,
,,2,,"post",,"define author id test",,,,
1,"Hello-world-updated",,,"post",,"Hello world! Updated!","Welcome to WordPress. This is your first post. Updated by RS CSV Importer!",,,</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-649540264cb72457828301-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264cb72457828301-2">2</div><div class="crayon-num" data-line="crayon-649540264cb72457828301-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264cb72457828301-4">4</div><div class="crayon-num" data-line="crayon-649540264cb72457828301-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264cb72457828301-6">6</div><div class="crayon-num" data-line="crayon-649540264cb72457828301-7">7</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-649540264cb72457828301-1"><span class="crayon-s">"post_id"</span><span class="crayon-sy">,</span><span class="crayon-s">"post_name"</span><span class="crayon-sy">,</span><span class="crayon-s">"post_author"</span><span class="crayon-sy">,</span><span class="crayon-s">"post_date"</span><span class="crayon-sy">,</span><span class="crayon-s">"post_type"</span><span class="crayon-sy">,</span><span class="crayon-s">"post_status"</span><span class="crayon-sy">,</span><span class="crayon-s">"post_title"</span><span class="crayon-sy">,</span><span class="crayon-s">"post_content"</span><span class="crayon-sy">,</span><span class="crayon-s">"post_category"</span><span class="crayon-sy">,</span><span class="crayon-s">"post_tags"</span><span class="crayon-sy">,</span><span class="crayon-s">"custom_field"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264cb72457828301-2"><span class="crayon-sy">,</span><span class="crayon-s">"Import-test"</span><span class="crayon-sy">,</span><span class="crayon-s">"admin"</span><span class="crayon-sy">,</span><span class="crayon-cn">2013</span>/<span class="crayon-cn">9</span>/<span class="crayon-cn">13</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">:</span><span class="crayon-cn">00</span><span class="crayon-sy">,</span><span class="crayon-s">"post"</span><span class="crayon-sy">,</span><span class="crayon-s">"publish"</span><span class="crayon-sy">,</span><span class="crayon-s">"CSV Import Test"</span><span class="crayon-sy">,</span><span class="crayon-s">"This is a post for csv import.</span></div><div class="crayon-line" id="crayon-649540264cb72457828301-3"><span class="crayon-s">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264cb72457828301-4"><span class="crayon-s">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span><span class="crayon-sy">,</span><span class="crayon-s">"fruits"</span><span class="crayon-sy">,</span><span class="crayon-s">"apple,banana"</span><span class="crayon-sy">,</span><span class="crayon-s">"this is custom field value."</span></div><div class="crayon-line" id="crayon-649540264cb72457828301-5"><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-s">"editor"</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-s">"post"</span><span class="crayon-sy">,</span><span class="crayon-s">"publish"</span><span class="crayon-sy">,</span><span class="crayon-s">"define author test"</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264cb72457828301-6"><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-s">"post"</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-s">"define author id test"</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540264cb72457828301-7"><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-s">"Hello-world-updated"</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-s">"post"</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-s">"Hello world! Updated!"</span><span class="crayon-sy">,</span><span class="crayon-s">"Welcome to WordPress. This is your first post. Updated by RS CSV Importer!"</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>ちなみにpost_idがあり、それがDBにあると上書きされるようです。<br />
他にも付け加えることができるので一番上の行の項目を増やせばよく、カスタムフィールドの場合もキー名を指定すればOKです！！</p>
<p>これは大量登録の必要がある場合は、CSVのほうがいいかもしれませんね。</p>
<h3>参考ブログ</h3>
<p><a href="http://notnil-creative.com/blog/archives/3465" target="_blank">Really Simple CSV Importer 日本語解説＆カスタマイズ例</a><br />
<a href="https://liginc.co.jp/web/wp/plug-in/58046" target="_blank">記事をCSVで一括登録！WordPressプラグインReally Simple CSV Importer | 株式会社LIG</a><br />
<a href="http://www.moco358.com/archives/3744" target="_blank">WordPressでCSV登録が出来るReally Simple CSV Importer | 稼げる副業でお小遣いを稼ぐ方法</a></p>

CSVをアップロードして記事登録ができるプラグイン「Really Simple CSV Importer」

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

<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

フロントエンドの人間が黒い画面(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）

<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>一個大きなリリースとして、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>ずっとやりたいと思っていたマクロの習得に挑戦することにしました。</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/03/14

2018/03/14

2018/03/14

2018/03/05

2018/02/23

2018/02/21

2018/02/21

2018/02/14

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/11/15

2017/11/15