<p class="code-line">2010年12月に WebGL が Chrome で利用可能となり、<br />
2011年には3月に Firefox、7月に Safari で利用可能となり、<br />
2013年10月には IE の最終版で WebGL も利用可能な IE11 が登場し、<br />
一般的なほとんどのブラウザで WebGL が利用可能となりました。</p>
<p class="code-line">それから5年経った2018年、ようやく GPU などのハード面でも WebGL の動作環境が一般的に整い、<br />
今、WebGL の実装の機会が増え、必要性も求められつつあります。</p>
<p class="code-line">私もそんな状況も踏まえ、WebGL の技術習得を本格的に目指そうと思い、<br />
WebGL のライブラリである Three.js について、これまでも何度か勉強してきたのですが、<br />
Three.js の 公式 DEMO をコピーして画像やモデルを差し替える程度に留まってしまい、<br />
技術を応用して新たに何かを作り出すというところまで行きつけずにいました。</p>
<p class="code-line">これはひょっとして、WebGL そのものや、3D グラフィックの仕組みについて理解できていないのが原因なのではないかと思うようになり、<br />
改めて素の WebGL について、学ぶことにいたしました。</p>
<p class="code-line">WebGL については、以下のサイトを中心に学ばせていただきました。<br />
<a class="link" title="https://wgld.org/" href="https://wgld.org/" target="_blank" rel="noopener">wgld.org</a><br />
（非常に詳しく、わかりやすく、これから WebGL を学ぶ方にとてもおすすめです。）</p>
<p class="code-line">こちらを中心に学ばせていただいた内容を基に、<br />
WebGL の基本の基本となる仕組みについて、私なりにまとめてみました。</p>
<ol>
<li class="code-line"><a href="#webgl1">WebGL とは</a></li>
<li class="code-line"><a href="#webgl2">WebGL における描画までの手順</a></li>
<li class="code-line"><a href="#webgl3">GLSL(OpenGL Shading Language) について</a></li>
<li class="code-line"><a href="#webgl4">シェーダーに渡す情報の基本となるモデル・ビュー・プロジェクションについて</a></li>
</ol>
<h2 id="webgl1" class="code-line">1. WebGL とは</h2>
<p class="code-line">WebGL とは、WEB ページ上で、OpenGL ES 2.0 を扱えるようにするための、JavaScript API のことです。<a title="https://ja.wikipedia.org/wiki/OpenGL" href="https://ja.wikipedia.org/wiki/OpenGL" target="_blank" rel="noopener">OpenGL</a> とは、GPU による高速な 2D・3D の画像描画処理を行い、画面に表示するための仕組みを提供しているライブラリで、オープン標準として、多くの GPU で利用可能です。そのため、WebGL を利用すると、WEB ページ上で高速な 2D・3D の画像描画処理が可能になります。<br />
WebGL で扱うことになる OpenGL ES 2.0 では、プログラマブルシェーダーを利用できるので、柔軟な描画を実現することができます。ただ、プログラマブルシェーダーの利用には <a href="https://ja.wikipedia.org/wiki/GLSL" target="_blank" rel="noopener">GLSL(OpenGL Shader Language)</a> というＣ言語ベースのプログラム言語での記述が必要となります。</p>
<h2 id="webgl2" class="code-line">2. WebGL における描画までの手順</h2>
<ol>
<li class="code-line">HTML から Canvas 要素を取得</li>
<li class="code-line">Canvas から WebGL コンテキストの取得</li>
<li class="code-line">シェーダーのコンパイル（シェーダーは GLSL で記述）</li>
<li class="code-line">モデルデータを用意（各頂点の座標・色・法線など）</li>
<li class="code-line">VBO(Vertex Buffer Object) の生成と通知</li>
<li class="code-line">（ポリゴンを扱う場合）IBO(Index Buffer Object) の生成と通知</li>
<li class="code-line">座標変換行列の生成と通知</li>
<li class="code-line">描画命令の発行</li>
<li class="code-line">Canvas を更新してレンダリング</li>
</ol>
<p class="code-line">参考: <a title="https://wgld.org/d/webgl/w014.html" href="https://wgld.org/d/webgl/w014.html" target="_blank" rel="noopener">wgld.org | WebGL: ポリゴンのレンダリング</a> より改変</p>
<h2 id="webgl3" class="code-line">3. GLSL(OpenGL Shading Language) について</h2>
<p class="code-line">GLSL(OpenGL Shading Language) は、OpenGL ES 2.0 以降で標準実装されたプログラマブルシェーダーを記述するためのプログラム言語です。 GLSL で記述するシェーダーは、以下の二つです。</p>
<ol>
<li class="code-line">頂点シェーダー: 頂点に関する情報</li>
<li class="code-line">フラグメントシェーダー: 色の情報 GLSL では描画処理を行うためのデータの型や組込関数が用意されています。以下はデータの一例です。</li>
</ol>
<h3 id="" class="code-line">変数の修飾子</h3>
<ul>
<li class="code-line">attribute 修飾子: 頂点の情報をシェーダー側で受け取る変数</li>
<li class="code-line">uniform 修飾子: すべての頂点に一律で渡す情報を渡すことが可能（モデル・ビュー・プロジェクションをかけ合わせた座標変換行列を WebGL から渡すのに利用）</li>
<li class="code-line">varying 修飾子: 頂点シェーダーとフラグメントシェーダーの橋渡し</li>
</ul>
<h3 id="" class="code-line">変数の型</h3>
<ul>
<li class="code-line">vec*: ベクトル; vec2 〜 vec4</li>
<li class="code-line">mat*: 正方行列; mat2 〜 mat4</li>
<li class="code-line">int: 整数</li>
<li class="code-line">float: 浮動小数点</li>
<li class="code-line">bool: 真偽</li>
</ul>
<p>GLSL の例</p>
<h4>頂点シェーダー</h4>
<p></p>

		<div id="crayon-649540264dae1786875938" 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">C</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;">
attribute vec3 position;
attribute vec4 color;
uniform   mat4 mvpMatrix;
varying   vec4 vColor;

void main(void) {
  vColor = color;
  gl_Position = mvpMatrix * vec4(position, 1.0);
}</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-649540264dae1786875938-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-2">2</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-4">4</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-6">6</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-8">8</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-9">9</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-649540264dae1786875938-1"><span class="crayon-m">attribute</span><span class="crayon-h"> </span><span class="crayon-e">vec3 </span><span class="crayon-i">position</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-2"><span class="crayon-m">attribute</span><span class="crayon-h"> </span><span class="crayon-e">vec4 </span><span class="crayon-i">color</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-3"><span class="crayon-e">uniform&nbsp;&nbsp; </span><span class="crayon-e">mat4 </span><span class="crayon-i">mvpMatrix</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-4"><span class="crayon-e">varying&nbsp;&nbsp; </span><span class="crayon-e">vec4 </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-6"><span class="crayon-t">void</span><span class="crayon-h"> </span><span class="crayon-e">main</span><span class="crayon-sy">(</span><span class="crayon-t">void</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">vColor</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">gl_Position</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">mvpMatrix</span><span class="crayon-h"> </span>*<span class="crayon-h"> </span><span class="crayon-e">vec4</span><span class="crayon-sy">(</span><span class="crayon-i">position</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">1.0</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-9"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h4>フラグメントシェーダー</h4>
<p></p>

		<div id="crayon-649540264dae6022538408" 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">C</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;">
precision mediump float;
varying vec4 vColor;
void main(void) {
  gl_FragColor = vColor;
}</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-649540264dae6022538408-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae6022538408-2">2</div><div class="crayon-num" data-line="crayon-649540264dae6022538408-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae6022538408-4">4</div><div class="crayon-num" data-line="crayon-649540264dae6022538408-5">5</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-649540264dae6022538408-1"><span class="crayon-e">precision </span><span class="crayon-e">mediump </span><span class="crayon-t">float</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae6022538408-2"><span class="crayon-e">varying </span><span class="crayon-e">vec4 </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae6022538408-3"><span class="crayon-t">void</span><span class="crayon-h"> </span><span class="crayon-e">main</span><span class="crayon-sy">(</span><span class="crayon-t">void</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-649540264dae6022538408-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">gl_FragColor</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae6022538408-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2 id="webgl4" class="code-line">4. シェーダーに渡す情報の基本となるモデル・ビュー・プロジェクションについて</h2>
<p>WebGL での描画処理までの過程では、シェーダーに頂点情報を渡す必要がありますが、<br />
その頂点情報はモデル・ビュー・プロジェクションの３つの座標を掛け合わされた情報で、<br />
WebGL を理解する上でこの３つについての理解はとても重要になりますので、ご紹介いたします。</p>
<p><a href="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13909" src="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png" alt="" width="725" height="495" srcset="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png 725w, /uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6-300x205.png 300w, /uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6-228x156.png 228w" sizes="(max-width: 725px) 100vw, 725px" /></a></p>
<p class="code-line code-active-line">モデルとは、描画する対象のことです。モデルの座標を回転させたりして変換することをモデル変換と呼びます ビューとは、対象を撮影するカメラにあたります。こちらの変換はビュー変換と呼びます。 プロジェクションとは、描画する範囲や遠近の状態のことです。こちらの変換はプロジェクション変換と呼びます</p>
<p>&nbsp;</p>
<p>↓ 参考までに、学習中に作った DEMO です。<br />
<a class="demo" href="https://sterfield.co.jp/demo/ninomiya/138/">DEMO</a></p>
<p>ソース元: <a href="https://wgld.org/d/webgl/w036.html" target="_blank" rel="noopener">wgld.org | WebGL: 点や線のレンダリング</a></p>

0594cb54b580680d3862632e4299b9e6.png

WebGLの仕組みについてまとめ直してみました

<p>2018年4月26日、ジェトロ主催の越境ECフォーラムに登壇させていただきました。</p>
<p>越境ECを行うためには、検討項目が多岐にわたります。全体像を理解した上で自社にあった具体的な戦略作りを行い、適切な手法を選択していくことが必要不可欠です。<br />
事業者の皆様のより具体的な取り組みの参考となるべく、「越境EC実施のための戦略構築」、「EC店舗構築」、「決済」、「物流」、「プロモーション」の五部構成で、具体的な実施手法をそれぞれの専門家から紹介しました。</p>
<p>弊社は、第二部「EC店舗構築の全体像とポイント」の説明を担当いたしました。</p>
<h2>各部概要</h2>
<p>事情により各部のアジェンダしかお見せ出来ませんが、PowerPointで194ページにも及ぶ資料の一端をご紹介します。</p>
<h3>第1部「戦略構築のポイント」</h3>
<p>ネッパン協議会越境EC委員会委員長<br />
NHN JAPAN（株）パートナー事業部 事業部長 齋藤 直 氏</p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13876" src="/uploads-archive/2018/05/309e0e6691ae7897a813856517e0d88d-1024x718.png" alt="" width="1024" height="718" srcset="/uploads-archive/2018/05/309e0e6691ae7897a813856517e0d88d-1024x718.png 1024w, /uploads-archive/2018/05/309e0e6691ae7897a813856517e0d88d-300x210.png 300w, /uploads-archive/2018/05/309e0e6691ae7897a813856517e0d88d-768x538.png 768w, /uploads-archive/2018/05/309e0e6691ae7897a813856517e0d88d-228x160.png 228w, /uploads-archive/2018/05/309e0e6691ae7897a813856517e0d88d.png 1083w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>越境ECの成功のためには、「自分たちの力で一番になれるところを定め一点突破してゆく」ことが必須。そのためには、「越境ECで勝てる場所・商品・対象を決める、リサーチする」ことが重要です。<br />
しかし、中小企業にはそこに費用も時間もあまり割くことができないのが現状かと思います。<br />
コンサルパートでは、無料のサービスをフル活用して、リサーチをする方法を具体的に紹介していました。</p>
<h3>第2部「EC店舗構築の全体像とポイント」</h3>
<p>スターフィールド株式会社 越境ECプランナー橋本 宏基 氏</p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13877" src="/uploads-archive/2018/05/1759fc1a4e8dfa2622767e42353a171b-1024x708.png" alt="" width="1024" height="708" srcset="/uploads-archive/2018/05/1759fc1a4e8dfa2622767e42353a171b-1024x708.png 1024w, /uploads-archive/2018/05/1759fc1a4e8dfa2622767e42353a171b-300x208.png 300w, /uploads-archive/2018/05/1759fc1a4e8dfa2622767e42353a171b-768x531.png 768w, /uploads-archive/2018/05/1759fc1a4e8dfa2622767e42353a171b-228x158.png 228w, /uploads-archive/2018/05/1759fc1a4e8dfa2622767e42353a171b.png 1093w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>第二部は、サイト構築について、【国】【構築方法】【検討事項】の３つの軸を切り口にお話しました。<br />
多岐にわたる構築業務の全体像を示し、そのなかで特にポイントとなる部分を中心に説明しました。</p>
<h3>第3部「決済・送金のポイント」</h3>
<p>ストライプジャパン株式会社 グロース責任者 森本 健介 氏</p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13878" src="/uploads-archive/2018/05/b3e4fc22eb485af20fe7675ece9d9180-1024x710.png" alt="" width="1024" height="710" srcset="/uploads-archive/2018/05/b3e4fc22eb485af20fe7675ece9d9180-1024x710.png 1024w, /uploads-archive/2018/05/b3e4fc22eb485af20fe7675ece9d9180-300x208.png 300w, /uploads-archive/2018/05/b3e4fc22eb485af20fe7675ece9d9180-768x533.png 768w, /uploads-archive/2018/05/b3e4fc22eb485af20fe7675ece9d9180-228x158.png 228w, /uploads-archive/2018/05/b3e4fc22eb485af20fe7675ece9d9180.png 1093w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>私も把握できていなかった決済の細かい部分を端的にご紹介されてとても参考になりました。</p>
<h3>第4部「物流のポイント」</h3>
<p>ディー・エイチ・エル・ジャパン株式会社 セールス &amp; マーケティング本部 営業企画部 ビジネスディベロプメント スペシャリスト 峰崎 正行 氏</p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13880" src="/uploads-archive/2018/05/0a14f3ad039a852fdfe42837fdf42867-1024x711.png" alt="" width="1024" height="711" srcset="/uploads-archive/2018/05/0a14f3ad039a852fdfe42837fdf42867-1024x711.png 1024w, /uploads-archive/2018/05/0a14f3ad039a852fdfe42837fdf42867-300x208.png 300w, /uploads-archive/2018/05/0a14f3ad039a852fdfe42837fdf42867-768x533.png 768w, /uploads-archive/2018/05/0a14f3ad039a852fdfe42837fdf42867-228x158.png 228w, /uploads-archive/2018/05/0a14f3ad039a852fdfe42837fdf42867.png 1096w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>越境EC物流に関しては、付き合いのある物流各社のサービスしか詳しく知らなかったので、こちらも大変勉強になりました。</p>
<h3>第5部「売上が10倍!!越境ECでのプロモーション施策と基礎」</h3>
<p>株式会社フルスピード 訪日ビジネス開発部 副部長 三島 悠輔 氏</p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13892" src="/uploads-archive/2018/05/34bf63247b7fa8ae570ed721522a2240-1024x712.png" alt="" width="1024" height="712" srcset="/uploads-archive/2018/05/34bf63247b7fa8ae570ed721522a2240-1024x712.png 1024w, /uploads-archive/2018/05/34bf63247b7fa8ae570ed721522a2240-300x209.png 300w, /uploads-archive/2018/05/34bf63247b7fa8ae570ed721522a2240-768x534.png 768w, /uploads-archive/2018/05/34bf63247b7fa8ae570ed721522a2240-228x159.png 228w, /uploads-archive/2018/05/34bf63247b7fa8ae570ed721522a2240.png 1104w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>特に中国への広告を得意とされているフルスピードさんの説明は、各広告ソリューションの予算感や事例を豊富に紹介されていて、とても説得力がありました。</p>
<h2>登壇しての感想</h2>
<p>越境ECが最初の盛り上がりをみせてから数年が経っていますが、「正しい知識」「成功事例」というのはまだまだ浸透していないのが現状です。<br />
今回のフォーラムでは、各ベンダーが業界の枠を超え、また競合会社とも協力しながら作成した資料をもとに発表しました。<br />
越境ECの全体像を把握するには最適なものだと思います。<br />
一社でも多くの企業様が自社にとってベストな方法で越境ECを始められることを期待します！</p>
<p>このフォーラムの模様は5月12日のNHK worldでも紹介される予定です。</p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13867" src="/uploads-archive/2018/05/Image-1024x768.jpg" alt="" width="1024" height="768" srcset="/uploads-archive/2018/05/Image-1024x768.jpg 1024w, /uploads-archive/2018/05/Image-300x225.jpg 300w, /uploads-archive/2018/05/Image-768x576.jpg 768w, /uploads-archive/2018/05/Image-228x171.jpg 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13897" src="/uploads-archive/2018/05/Image-1-1024x768.jpg" alt="" width="1024" height="768" srcset="/uploads-archive/2018/05/Image-1-1024x768.jpg 1024w, /uploads-archive/2018/05/Image-1-300x225.jpg 300w, /uploads-archive/2018/05/Image-1-768x576.jpg 768w, /uploads-archive/2018/05/Image-1-228x171.jpg 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13898" src="/uploads-archive/2018/05/Image-1-1-e1525852468699-1024x721.jpg" alt="" width="1024" height="721" srcset="/uploads-archive/2018/05/Image-1-1-e1525852468699-1024x721.jpg 1024w, /uploads-archive/2018/05/Image-1-1-e1525852468699-300x211.jpg 300w, /uploads-archive/2018/05/Image-1-1-e1525852468699-768x541.jpg 768w, /uploads-archive/2018/05/Image-1-1-e1525852468699-228x161.jpg 228w, /uploads-archive/2018/05/Image-1-1-e1525852468699.jpg 1058w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>めちゃめちゃ緊張しました。</p>


JETRO主催『越境ECフォーラム2018』に登壇しました

Valetを使うとローカル環境が簡単に出来る

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  既にあるPHPで構成済みのシステムで<br />
  スクレイピングをしなければならなくなった。<br />
  そんな時の導入と使い方メモ。</div>
<h3>インストール</h3>
<div style="padding-left: 15px;">
  今回はGoutteというモジュールを使用しました。<br />
  ググったらヒットする割合が多く、特に使い勝手が悪くなかったので採用。</p>
<p>  インストールは以下。</p>

		<div id="crayon-649540264d65e851949483" 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;">
composer require fabpot/goutte
composer dump-autoload</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-649540264d65e851949483-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264d65e851949483-2">2</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-649540264d65e851949483-1"><span class="crayon-e">composer </span><span class="crayon-e">require </span><span class="crayon-i">fabpot</span>/<span class="crayon-e">goutte</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264d65e851949483-2"><span class="crayon-e">composer </span><span class="crayon-i">dump</span>-<span class="crayon-i">autoload</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>  これでオートローダー等に書き込まれる(はず)。</p></div>
<h3>使ってみる</h3>
<div style="padding-left: 15px;">
  まずは使える準備。</p>
<p>  ネームスペース定義。</p>

		<div id="crayon-649540264d662720699040" 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">PHP</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;">
  use Goutte\Client;</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-649540264d662720699040-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-649540264d662720699040-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-st">use</span><span class="crayon-h"> </span><span class="crayon-i">Goutte</span><span class="crayon-sy">\</span><span class="crayon-i">Client</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>取得してみる。</p>

		<div id="crayon-649540264d663623064196" 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">PHP</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;">
  $client = new Client();
  $content = $client-&gt;request('GET', $url."?".http_build_query($data));
  if ($client-&gt;getResponse()-&gt;getStatus() != '200') {
     return 'request error';
  }</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-649540264d663623064196-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264d663623064196-2">2</div><div class="crayon-num" data-line="crayon-649540264d663623064196-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264d663623064196-4">4</div><div class="crayon-num" data-line="crayon-649540264d663623064196-5">5</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-649540264d663623064196-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">$client</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Client</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-649540264d663623064196-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">$content</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$client</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">request</span><span class="crayon-sy">(</span><span class="crayon-s">'GET'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">$url</span><span class="crayon-sy">.</span><span class="crayon-s">"?"</span><span class="crayon-sy">.</span><span class="crayon-e">http_build_query</span><span class="crayon-sy">(</span><span class="crayon-v">$data</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264d663623064196-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">$client</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">getResponse</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">getStatus</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">!</span>=<span class="crayon-h"> </span><span class="crayon-s">'200'</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-649540264d663623064196-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-k ">return</span><span class="crayon-h"> </span><span class="crayon-s">'request error'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264d663623064196-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>フォームを取得</p>

		<div id="crayon-649540264d664298413188" 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">PHP</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;">
  $form = $content-&gt;filter('form')-&gt;first();

  $newUrl = $form-&gt;attr('action');
  $content-&gt;filter('input')-&gt;each(function($node) use (&amp;$newParams) {
      $newParams[$node-&gt;attr('name')] = $node-&gt;attr('value');
  });</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-649540264d664298413188-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264d664298413188-2">2</div><div class="crayon-num" data-line="crayon-649540264d664298413188-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264d664298413188-4">4</div><div class="crayon-num" data-line="crayon-649540264d664298413188-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264d664298413188-6">6</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-649540264d664298413188-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">$form</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$content</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">filter</span><span class="crayon-sy">(</span><span class="crayon-s">'form'</span><span class="crayon-sy">)</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">first</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-649540264d664298413188-2">&nbsp;</div><div class="crayon-line" id="crayon-649540264d664298413188-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">$newUrl</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$form</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">attr</span><span class="crayon-sy">(</span><span class="crayon-s">'action'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264d664298413188-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">$content</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">filter</span><span class="crayon-sy">(</span><span class="crayon-s">'input'</span><span class="crayon-sy">)</span>-<span class="crayon-h">&gt;</span><span class="crayon-st">each</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">$node</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-st">use</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">&amp;$newParams) {</span></div><div class="crayon-line" id="crayon-649540264d664298413188-5"><span class="crayon-sy">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$newParams[$node-&gt;attr('name')] = $node-&gt;attr('value');</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264d664298413188-6"><span class="crayon-h">&nbsp;&nbsp;</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>  まずはレスポンスが正常に帰ってきてるかチェック。<br />
  そしてフォームを探し、その中のinputのname, valueをそれぞれ抽出して<br />
  配列に格納、、、ということを実施しました。</p></div>
<h3>所感</h3>
<div style="padding-left: 15px;">
  書き方が独特なのと<br />
  ドキュメントが豊富でないのとで慣れるのに時間を要するのはデメリット。</p>
<p>  ただしどうしてもcomposer経由でPHPでのスクレイピングをやらなければならない！<br />
  という時には、まあ使えるレベルのものなので良しとします。</p></div>

PHPでスクレイピング

<p>昨日はGoogleの開発者向けカンファレンス「Google I/O 2018」が開催されましたね。</p>
<p>毎年このタイミングでGoogleは次期AndroidOSを発表しており、今年も「Android P」が発表されました。</p>
<p>番号表記だといわゆる「Android 9」です。</p>
<p>今回の大きな特徴は進化したマテリアルデザイン2やAIが大規模に組み込まれていて、機械学習によってユーザーごとに使い勝手を改善していくようです。</p>
<p>そのあたりの内容はEngadgetさんを参照下さい。</p>
<p><a href="https://japanese.engadget.com/2018/05/08/android-p-iphone-x-8-ai/" target="_blank" rel="noopener">Android PはホームボタンがiPhone X似に。β版は8社製品に本日公開、AI活用の新機能も多数</a></p>
<p>今回は、GoogleがAndroidのバージョンを毎年ガンガン上げていくなかで、スマートフォンメーカーはその都度バージョンアップに対応するコストと得られるリターンが見合わないために、置いてけぼりにされるOSを救う手段をのでご紹介します。</p>
<p>ちなみにiphoneにおいては、ハードもソフトもアップルが1社で作っているので、数年は最新OSをサポートを担保しているので関係ありません。</p>
<h2>最新OSにするメリット</h2>
<p>ハードウェアが個人的に好きだという前提があるのですが、そもそも新しいテクノロジーにワクワクします。</p>
<p>Android7であればVRが強化されたり、次期のAndroid9はAIによる機械学習がOSレベルに組み込まれるということで、さらに、一歩未来に近づく感じが堪りません。</p>
<p>メリットとしては、機能改善における生産性の向上という言葉に尽きると思います。</p>
<p>また、テクノロジーがどんどん進化する中で、IT業界に身を置く人間としては常にキャッチアップを続けなければなりません。</p>
<p>Webがメインになっているのでブラウザの動向だけ追っていればいいと判断しがちですが、言わずもがな、最近ではウェブからネイティブの垣根はどんどんなくなりますし、デザインレイヤーにおいてもOSレベルのマテリアルデザインがトレンドを形成するのは間違いないですから、マテリアルデザイン2を知っておかないわけにはいきません。</p>
<h2>AOSP</h2>
<p>アンドロイドを理解する上でまずこの単語が書かせません。</p>
<p>Android Open Source Projectの頭文字で「AOSP」</p>
<p>Googleが開発しているアンドロイドですが、Googleはオープンソースとして、アンドロイドのソースコードを無償公開しています。そのアンドロイド開発プロジェクトそのもののエコシステムがAOSPと呼ばれており、このAOSPによって公開されたOSを各スマートフォンメーカーさんが各々のソフトウェアなどを搭載して販売しています。</p>
<p><a href="https://source.android.com/setup/build/downloading" target="_blank" rel="noopener">https://source.android.com/setup/build/downloading</a></p>
<p>&nbsp;</p>
<h2>有名なカスタムROM</h2>
<p>そんなAOSPからソースコードを扱って開発するのは何もスマートフォンメーカーさんだけではありません。</p>
<p>有志がAOSPのソースに独自機能を付け加えて公開してくれているのがカスタムROMといわれるものです。</p>
<p>前置きが長くなりましたが、最新OSを扱える救世主となるのがこのカスタムROMです。</p>
<p>カスタムROMを導入することで例えば５年近く前の端末でも最新のOSを入れられる可能性があります。もちろんカスタムROM自体がその端末をサポートしている必要があります。</p>
<p>その中でも有名なカスタムROMプロジェクトの紹介です。</p>
<h3>LineageOS</h3>
<p>最も有名なカスタムROMの一つです。</p>
<p>プロジェクトの規模が大きく、サポート端末も幅広いです。</p>
<p><a href="http://lineageos.org/" target="_blank" rel="noopener">http://lineageos.org/</a></p>
<p>こちらは以前書いた記事です。</p>
<blockquote class="wp-embedded-content" data-secret="us5o0s5uOA"><p><a href="https://sterfield.co.jp/officer/cyanogenmod%e3%81%8b%e3%82%89lineageos%e3%81%b8/">CyanogenModからLineageOSへ</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/cyanogenmod%e3%81%8b%e3%82%89lineageos%e3%81%b8/embed/#?secret=us5o0s5uOA" data-secret="us5o0s5uOA" width="500" height="282" title="&#8220;CyanogenModからLineageOSへ&#8221; &#8212; スターフィールド株式会社" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<h3>Resurrection Remix</h3>
<p>LineageOSをベースにさらに独自機能を追加し、かゆいところまで手が届く高度な設定が特徴</p>
<p><a href="http://www.resurrectionremix.com/" target="_blank" rel="noopener">http://www.resurrectionremix.com/</a></p>
<h3>Mokee</h3>
<p>こちらもLineageOSベース。</p>
<p><a href="https://download.mokeedev.com/" target="_blank" rel="noopener">https://download.mokeedev.com/</a></p>
<h3>Remix OS</h3>
<p>PCにもインストール出来るタイプ。</p>
<p><a href="http://www.jide.com/" target="_blank" rel="noopener">http://www.jide.com/</a></p>
<p>&nbsp;</p>
<h2>インストールの仕方など</h2>
<p>以前に書いたこの辺りの記事を参照ください。</p>
<blockquote class="wp-embedded-content" data-secret="VG4EoAJHQF"><p><a href="https://sterfield.co.jp/officer/sim%e3%83%95%e3%83%aa%e3%83%bc%e7%ab%af%e6%9c%ab%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0rom%e3%82%92%e7%84%bc%e3%81%84%e3%81%a6%e3%81%bf%e3%81%9f/">SIMフリー端末にカスタムROMを焼いてみた</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/sim%e3%83%95%e3%83%aa%e3%83%bc%e7%ab%af%e6%9c%ab%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0rom%e3%82%92%e7%84%bc%e3%81%84%e3%81%a6%e3%81%bf%e3%81%9f/embed/#?secret=VG4EoAJHQF" data-secret="VG4EoAJHQF" width="500" height="282" title="&#8220;SIMフリー端末にカスタムROMを焼いてみた&#8221; &#8212; スターフィールド株式会社" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<blockquote class="wp-embedded-content" data-secret="3Fr2gR28TG"><p><a href="https://sterfield.co.jp/officer/nexus-7-2013-wi-fi%e3%81%a7android7-1nougat%e3%83%99%e3%83%bc%e3%82%b9%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0rom%e3%82%92%e7%84%bc%e3%81%8f%e6%89%8b%e9%a0%86/">Nexus 7 2013 (Wi-Fi)でAndroid7.1(Nougat)ベースのカスタムROMを焼く手順</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/nexus-7-2013-wi-fi%e3%81%a7android7-1nougat%e3%83%99%e3%83%bc%e3%82%b9%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0rom%e3%82%92%e7%84%bc%e3%81%8f%e6%89%8b%e9%a0%86/embed/#?secret=3Fr2gR28TG" data-secret="3Fr2gR28TG" width="500" height="282" title="&#8220;Nexus 7 2013 (Wi-Fi)でAndroid7.1(Nougat)ベースのカスタムROMを焼く手順&#8221; &#8212; スターフィールド株式会社" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<h2>まとめ</h2>
<p>あなたのAndroidはバージョンいくつですか？</p>
<p>メーカー品ですとそもそもロックされていてカスタムROMを焼けないということがしばしばなんですけどね。</p>
<p>こう見るとカスタムROMの記事結構書いているな（笑）</p>


20180509-google-io-2018-top-w960.gif

新興国でのECの実情

<p>2018年は3Dの表現を使ったサイトが増えると予想されています（参考：<a href="http://photoshopvip.net/106875" target="_blank" rel="noopener">PHOTOSHOPVIP</a>）。実際、パララックスやWEBGLなど使ったウェブサイトを見かける機会が少しずつ増えています。</p>
<p>しかしながら、いざ3Dの表現を取り入れてみようと思っても、これまでずっとWEBは2Dでデザインを行ってきたこともあり、3Dの表現がどのような場面に向いていて、どのような使い方をすれば効果的なのか、なかなか思いつかなかったため、自分なりにメリットとデメリットを考えてみることにしました。</p>
<h2>メリット</h2>
<h3>リアル（現実の見た目に近い）</h3>
<ul>
<li class="p1">臨場感、シズル感が求められるものに効果的</li>
<li class="p1">状態を想像しやすい</li>
</ul>
<h3 class="p1">空間が広い ⇔ 奥行きがある</h3>
<ul>
<li class="p1">多くの情報を取り扱える可能性（重なる箇所への案内がネックになる）</li>
</ul>
<h3 class="p1">現実との連続的表現がしやすい(<span class="s1">AR</span>)</h3>
<ul>
<li class="p1">現実に近い状態で、大きさなどの確認ができる</li>
<li class="p1">非常に高い臨場感を表現できる可能性</li>
</ul>
<h3 class="p1">表現の幅が広がる</h3>
<ul>
<li class="p1">立体ならではの表現が直接的にできる</li>
<li class="p1">アート的表現の選択肢として</li>
<li class="p1">立体ならではの<span class="s1"> UI </span>の可能性</li>
</ul>
<h2>デメリット</h2>
<h3 class="p1">デバイスへ要求するパフォーマンスが大きくなる</h3>
<ul>
<li class="p1">軽量化の努力が必要</li>
<li class="p1">パフォーマンスの犠牲に似合った効果があるか、十分な検証が必要</li>
</ul>
<h3 class="p1">操作が煩雑化しがち</h3>
<ul>
<li class="p1">扱う軸が増えるので、その軸をどう扱うか、明確に定義する必要がある</li>
<li class="p1">現実と同じ操作はできない。あくまでも<span class="s1"> 2D </span>への擬似的な表現なので、現実とのギャップがある</li>
<li class="p1">現実と操作が違うので、共通化された操作を用いるか、慣れるまでの練習の機会が許されるか、操作説明がなければ、ユーザーは操作できない</li>
</ul>
<h3 class="p1">設置の難易度が高い</h3>
<ul>
<li class="p2">3D <span class="s2">の知識</span></li>
<li class="p2">デバイス、ブラウザに求められる最低パフォーマンスの高さ</li>
<li class="p1">利用できる空間の制限 ⇔ ある程度面積がなければ、<span class="s1">2D </span>の場合より複雑がゆえに視認性が下がりメリットが薄くなりがち</li>
</ul>


WEB上での3D表現について、2Dと比較した強みと弱みを考えてみました

<h2><strong>購入における心理 ‐６</strong>段階の心理的階層‐</h2>
<p>購入心理の段階とは・・・</p>
<p><span class="style2">注意</span> ⇒ <span class="style2">興味</span> ⇒ イメージ ⇒ 意欲(<span class="style2">欲望)</span> ⇒ <span class="style2">比較</span> ⇒ <span class="style2">決断</span> という段階を踏んで購買が成立となります。</p>
<p>この購買心理の７段階は、広告マーケティング、サイト構築等においても必須のものであります。<br />
当然のことながら段階によって</p>
<p>&nbsp;</p>
<h4><strong>【１階層　注意】</strong></h4>
<p class="">『注意』というのは、目に留まり注意を向けさせるということです。主に広告では、最も重要なものです。<br />
例：リスティング広告、サイト内販促バナー等を展開する段階。</p>
<h4><strong>【２階層　興味】</strong></h4>
<p>せっかく引けた『注意』も「そうなんだ」で終わっては制約には行けません。<br />
ですので、顧客、相手が「これ、いいな」「その先は？」と思ってしまうような表現が必要となってきます。<br />
例：リスティング広告、販促バナーのテキスト等の内容やデザイン「質」です。</p>
<h4><strong>【３階層　イメージ】</strong></h4>
<p>提案した要件、物を提案れた側が自身のシーンに透過させて「イメージ」してもらう段階です。<br />
大抵のニーズを持ったお客様とはこの段階の人を言います。<br />
ビジネスモデルによるとは思いますが、商品価格の設定にこの段階を引き上げる事が出来れば、粗利益向上が望めます。</p>
<h4><strong>【４階層　意欲】</strong></h4>
<p>「イメージ」が確立されれば人の心理は「欲しい(意欲)」という形で推移していきます。<br />
例：小売業者はこの段階の向上を狙いクーポン、おまけ等の簡易的な付加価値を提供していくのが一般となっております。</p>
<h4><strong>【５階層　比較】</strong></h4>
<p>比較とはまさに比べるということで、大半のお客様は「得」をしたい、または「損失」を避けたいという心理があります。<br />
この段階の攻略が最も難易度が高く業種、媒体、ビジネスモデル等、様々な角度で対応が異なっていきます。<br />
例：価格　コンテンツ(内容、情報)　全体的な印象等</p>
<h4><strong>【６階層　決断】</strong></h4>
<p>『確信』を得ても支払いという関門が残っています。支払いに対する躊躇に、金利なし・分割・ボーナス一括・クレジットといった手段で最後の関門を越え、購入の決断に結び付けます。</p>
<p>&nbsp;</p>
<p>この様に時間としては数分で成立していく内容にも複数の段階があり、どこをどう突いていくか考えていく必要があります。<br />
集計データを細分化し照らし合わせるということで的確な解決策を見出す事ができるでしょう。</p>
<p>次回は、心理推移ではなく、簡単であらゆる分野、局面において実際に使用されている心理操作術をご紹介出来ればと思います。</p>
<p>&nbsp;</p>


web販売に大切な「顧客心理」のポイント

<p>エンジニアと一言でいってもいろんな種類がありますが、今回はweb系のバックエンドエンジニアについてです。</p>
<p>エンジニアの採用を数年前からして不定期ではあるものの行っていますが、<br />
なかなか良い人材が集まりにくい状況です。<br />
弊社にもなにか原因があるかとは思いますが、媒体の会社に人からはどの会社もエンジニア不足で取りにくい状況であるとのことです。</p>
<p>とはいえ、募集を行うと応募自体はしていただいております。<br />
これからエンジニアへ転職される人、SESから自社内開発をする企業へ行きたい、今の会社で違うことをやらされている&#8230;等々です。</p>
<p>この中で「これからエンジニアへ転職される人」というのが多くなっております。<br />
弊社はそういう方でも問題ないとは言っていますが、多少なりとも条件というか判断基準みたいなものがあります。</p>
<h2>弊社が求めるエンジニア(個人的意見)</h2>
<p>「これからエンジニアへ転職される人」に関しては、<br />
エンジニアを目指す上での意気込み・やる気が重要です。</p>
<p>意気込み・やる気と言っても、エンジニアへの熱い想いというだけでなく、<br />
実際にエンジニアを目指すと決めた時から何をしてきたかというのか重要です。</p>
<p>web系のエンジニアというは他の仕事に比べると特殊で、<br />
「やろうと思えばパソコン1台あれば実際に試すことができ、作ることもできる」ため、<br />
実際に仕事に就かなくても技術を高めることが可能です。</p>
<p>一昔前は、本や独学でしたが、今はプログラミングスクールがかなり増えています。</p>
<p>応募者の方々のプロフィールを見ると、その部分が弱い人が多く、<br />
どれだけ本気なんだろうか？と思ってしまう方も多いです。<br />
「学校行ってます！」とか「独学でやってます！」というのが全くない人もいます。</p>
<p>職種未経験の方は、ポテンシャルでしか判断できないので、<br />
そのポテンシャルを感じさせてもらえる要素が少ないのは残念でなかなか判断しづらい所ではあります。</p>
<p>ぜひ、自分がどれだけやっているかを記載して頂き、やってないのであれば少しでも経験してその事を記載して頂きたいです！</p>
<p>やはり、職種未経験でいいとはいえ、プログラミングについては多少触っていて欲しいということもあります。<br />
現場のエンジニアが面接をする場合やはりコードを見たいそうなのでなにか見せれるものがあるとなお良いかと思います。</p>
<h2>エンジニア募集しています</h2>
<p>ということで今、弊社ではエンジニアを募集しています！</p>
<p><a href="https://type.jp/job-1/1108414_detail/" target="_blank">自社内開発エンジニア/20～30代活躍！/「LaunchCart」の開発/実務未経験OK/月給25万円以上/中途入社100％|転職＠type</a></p>
<p><a href="https://type.jp/job-1/1108300_detail/" target="_blank">自社内開発エンジニア/越境ECを叶える「LaunchCart」の開発/実務未経験OK/月給25万円以上/中途入社100％|転職＠type</a></p>
<p>また、今週土曜日に開催される＠typeのエンジニア転職フェアに参加いたします！<br />
<a href="http://type.jp/s/fair/e/?waad=cC26NDaq" target="_blank"><br />
<img decoding="async" src="http://s360.jp/d/30646/efair/ebanner_no1.gif"><br />
</a></p>


エンジニアの採用について思うこと、これからエンジニアを目指す方へ

<p>フィンテックが注目される中で大小様々な決済手段が乱立してきているように感じる。</p>
<p>その中でも直近はGAFAの動きが活発化しているように思え、各社の動きを簡単にまとめてみた。</p>
<h2>1. Google Pay, Apple Pay</h2>
<p>日本にいると正直親近感が薄い。</p>
<p>調べると地元米国ではモノレールにスマホをかざすだけで乗車できるようになったり利用シーンは拡大しているようだ。</p>
<p>国内ではユニクロやバニラ・エアなどで利用できるようだが、それだけでニュースになっているくらいなのでまだ浸透しているとは言えないようだ。</p>
<p>個人的にはサービスやデバイスという意味での親近感は強いが、消費行動との関連は低いのであまり積極的に利用していないのかなと感じる</p>
<p>&nbsp;</p>
<h2>2. Facebook</h2>
<p>いろいろな情報があり、決済分野にとても興味をもっていることはうかがえるのだが、これといって普及しているという情報は個人的には知らない。</p>
<p>ただ、本腰を入れて参入するのだろうと思われる情報が最近あった。</p>
<p>それが以下で、ワッツアップでの個人間送金サービスをインドローカルで行うようだ。</p>
<p><a href="https://jp.reuters.com/article/india-facebook-whatsapp-idJPKBN1760TC" target="_blank" rel="noopener">https://jp.reuters.com/article/india-facebook-whatsapp-idJPKBN1760TC</a></p>
<p>インド版WechatPayを個人的には想像した。</p>
<p>これを皮切りにアジア展開を目指すとなると、アジアでの決済事情が大きく変わりそうだ。</p>
<p>&nbsp;</p>
<h2>3. Amazon</h2>
<p>これまでAmazon PayとしてBtoBのイメージが強かったが、個人間送金に参入する可能性があると報じられている。</p>
<p><a href="http://jp.wsj.com/articles/SB12541954895962123456404584147320218969350" target="_blank" rel="noopener">http://jp.wsj.com/articles/SB12541954895962123456404584147320218969350</a></p>
<p>これは中国でいうところのAlipayにあたるのかと思うが、そうなるとまずは決済手段としてのAmazonが浸透しなければ個人間送金ができてもメリットはないのかなと個人的には思う。</p>
<p>ただ、1とは相対的に消費行動にもっとも近いことと、Alipayという成功例があるのでこれも普及すれば決済業界に大きな影響を与えそうだ。</p>
<p>&nbsp;</p>
<p>結論としてはすぐに対策が必要というわけではなさそうだが、大きな動きがある可能性をひめているので常に動向を追っておく必要があると感じた。<br />
特にFacebookはアジアでは絶大な影響力があるので注視する必要がありそうだ</p>


新しい決済の動き

<p>Googleスプレッドシート作りましたシリーズ⑦</p>
<p>今回は、<span class="articleInfo-title-text">組織変革のための「7つのS」</span>のフォーマットです。</p>
<h2>組織の7Sとは</h2>
<ul>
<li>ソフトの4S
<ol>
<li>共通の価値観 （Shared value）</li>
<li>経営スタイル（Style）</li>
<li>人材（Staff）</li>
<li>スキル（Skill）</li>
</ol>
</li>
<li>ハードの3S
<ol>
<li>戦略（Strategy）</li>
<li>組織構造（Structure）</li>
<li>システム（System）</li>
</ol>
</li>
</ul>
<p>世界有数のコンサルティング・ファームであるマッキンゼーが提唱した組織のために用いる7Sというフレームワーク。</p>
<p>ソフトの4sとハードの3sに分類するが、この7つは相互に影響をし合うため、これらをバランスよく配置することが重要であると唱える。</p>
<p>組織組成や組織変革の際に有効です。</p>
<h2>ソフトの4S</h2>
<h3>共通の価値観 （Shared value）</h3>
<p>表の中でも中心・核・基礎となるもの。企業理念、価値観が浸透性しているか、差異がないかの分析項目。</p>
<h3>経営スタイル（Style）</h3>
<p>意思決定プロセスや会社内で形成される社風もスタイルに分類される。</p>
<h3>人材（Staff）</h3>
<p>今いる人材及びこれからの人事内容を含めて分析する項目。</p>
<h3>スキル・能力（Skill）</h3>
<p>個々の人材及び企業として持っている能力。営業力、技術力、マーケティング力なども含まれる。</p>
<h2>ハードの3S</h2>
<h3>戦略（Strategy）</h3>
<p>事業の方向性を定めるもの。戦略に関しては<a href="https://sterfield.co.jp/officer/swot%E5%88%86%E6%9E%90%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEgoogle%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88/">SWOT</a>、<a href="https://sterfield.co.jp/officer/pest%E5%88%86%E6%9E%90%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEgoogle%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88/">PEST</a>など他のフレームワークを用いて分析をするとよい。</p>
<h3>組織構造（Structure）</h3>
<p>事業部制や上司、部下などの組織階層などの組織構造のこと。</p>
<h3>システム・制度（System）</h3>
<p>社内で使っている情報システムツール類から人事評価制度や業績管理などの仕組み全般。</p>
<h2>ダウンロードリンク</h2>
<p><a class="link" href="https://docs.google.com/spreadsheets/d/1ZETr4Ut2EoPy4ocAhK-QwHuL9zKoIyC8Q7RnVpoSTTw/edit#gid=796601583" target="_blank" rel="noopener">ビジネスフレームワークテンプレート集-Googleスプレッドシート</a></p>


組織変革の「7S」Googleスプレッドシート

PayPal ExpressCheckoutボタンの実装

<p>クロスボーターマーケティングと越境ECをテーマにしたセミナーをソフトバンク社、SBクラウド社と開催しましたのでご報告いたします。</p>
<h2>セミナー概要</h2>
<h3>テーマ</h3>
<p>クロスボーダーマーケティング最前線！<br />
〜インバウンド・越境ECで目指す海外市場〜</p>
<h3>開催日</h3>
<p>2018年3月 6 日（火）16時～18時 </p>
<h3>会場</h3>
<p>ソフトバンク株式会社　セミナールーム</p>
<h3>講師</h3>
<p>第一部　　<br />
ソフトバンク株式会社 デジタルマーケティング事業統括部 インバウンドプロモーション課 課長 松浦 竜馬氏<br />
SBクラウド株式会社 営業部 三苫 周平氏</p>
<p>第二部　　<br />
スターフィールド株式会社　橋本 宏基</p>
<h2>第一部</h2>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/03/542013152.585278-1024x768.jpg" alt="" width="1024" height="768" class="alignleft size-large wp-image-13768" srcset="/uploads-archive/2018/03/542013152.585278-1024x768.jpg 1024w, /uploads-archive/2018/03/542013152.585278-300x225.jpg 300w, /uploads-archive/2018/03/542013152.585278-768x576.jpg 768w, /uploads-archive/2018/03/542013152.585278-228x171.jpg 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>第一部ではソフトバンク流のインバウンドマーケティングをご説明頂きました。<br />
なぜソフトバンクがこの事業を行うのか。<br />
中国のアリババ社とのつながりを活かした様々な手法をご紹介いただきました。<br />
また、インバウンドを成功に導くキーソリューションとして、SBクラウド社のアリババクラウドサービスがいかに中国をはじめ世界で受け入れられているかのお話もありました。</p>
<h2>第二部</h2>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/03/Photo_18-03-06-17-55-33.895-1024x576.jpg" alt="" width="1024" height="576" class="alignleft size-large wp-image-13769" srcset="/uploads-archive/2018/03/Photo_18-03-06-17-55-33.895-1024x576.jpg 1024w, /uploads-archive/2018/03/Photo_18-03-06-17-55-33.895-300x169.jpg 300w, /uploads-archive/2018/03/Photo_18-03-06-17-55-33.895-768x432.jpg 768w, /uploads-archive/2018/03/Photo_18-03-06-17-55-33.895-228x128.jpg 228w, /uploads-archive/2018/03/Photo_18-03-06-17-55-33.895.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>第二部では弊社が登壇しました。<br />
越境ECの対象国として、流行の変遷をご紹介しました。<br />
数年前までの中国、現在興隆している台湾、今後来るであろう東南アジアについて、それぞれの市場の特性と気をつけるべきポイントをお話しました。</p>
<h2>第二弾開催決定！</h2>
<p>ご好評につき2018年3月23日に、第二弾を開催する運びとなりました。<br />
セミナー後にアンケートに答えていただいた方にはもれなくソフトバンク社のグッズをプレゼントしています！<br />
ご興味ある方はぜひご参加ください！</p>
<p><a href="https://launchcart.jp/seminar/20180323/">https://launchcart.jp/seminar/20180323/</a></p>


【セミナーレポート】ソフトバンク流クロスボーダーマーケティング最前線！

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

<p>シリコンバレー発のオンライン上でオーダーメイドシャツが作ることができる「<a href="https://ja-jp.originalstitch.com/" target="_blank" rel="noopener">Original Stitch</a>」。日本での展開もしているので名前は聞いたことがありましたが、詳しくサイトを見るということもしていませんでした。</p>
<p>というのも、ECカートを開発している当社に、様々な相談を頂く中でこの「Original Stitch」をベンチマークにされている話しを頂き、初見で相当作り込まれたサイトなので、汎用カートとして提供しているサービスではカバーしきれないのではとお答えしていましたが、今回を機に、ECサイトとして何が優れているのか見てみたいと思います。</p>
<h2>トップページ</h2>
<h3>鎌倉シャツ</h3>
<p><a href="/uploads-archive/2018/03/729fe3f97c5bec353d9a8b7a4553bb5f.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-13743" src="/uploads-archive/2018/03/729fe3f97c5bec353d9a8b7a4553bb5f-604x1024.png" alt="" width="604" height="1024" srcset="/uploads-archive/2018/03/729fe3f97c5bec353d9a8b7a4553bb5f-604x1024.png 604w, /uploads-archive/2018/03/729fe3f97c5bec353d9a8b7a4553bb5f-177x300.png 177w, /uploads-archive/2018/03/729fe3f97c5bec353d9a8b7a4553bb5f-768x1301.png 768w, /uploads-archive/2018/03/729fe3f97c5bec353d9a8b7a4553bb5f-228x386.png 228w, /uploads-archive/2018/03/729fe3f97c5bec353d9a8b7a4553bb5f.png 1440w" sizes="(max-width: 604px) 100vw, 604px" /></a></p>
<p>対比といたしまして、真っ先に思い浮かんだのが「鎌倉シャツ」さんなので、見比べていきたいと思います。</p>
<p>そうそう、この感じです。通販サイトのトップページといったら、メインビジュアルがあっての商品がズラッと並ぶものです。</p>
<h3></h3>
<h3>Original Stitch</h3>
<p><a href="/uploads-archive/2018/03/f59188d9bdcb7298c9c09f2df5d30390.png"><img decoding="async" loading="lazy" class="aligncenter wp-image-13742 size-large" src="/uploads-archive/2018/03/f59188d9bdcb7298c9c09f2df5d30390-604x1024.png" alt="" width="604" height="1024" srcset="/uploads-archive/2018/03/f59188d9bdcb7298c9c09f2df5d30390-604x1024.png 604w, /uploads-archive/2018/03/f59188d9bdcb7298c9c09f2df5d30390-177x300.png 177w, /uploads-archive/2018/03/f59188d9bdcb7298c9c09f2df5d30390-768x1301.png 768w, /uploads-archive/2018/03/f59188d9bdcb7298c9c09f2df5d30390-228x386.png 228w, /uploads-archive/2018/03/f59188d9bdcb7298c9c09f2df5d30390.png 1440w" sizes="(max-width: 604px) 100vw, 604px" /></a></p>
<p>ドーンという感じでシンプルなメッセージが並びます。あれ、商品はどこ？と思った時点でこれは通販サイトという概念ではないなと察しました。</p>
<h3>商品ページ</h3>
<h3>鎌倉シャツ</h3>
<p><a href="/uploads-archive/2018/03/0c63b360a18e742fb5e9a1f3b028314b.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-13750" src="/uploads-archive/2018/03/0c63b360a18e742fb5e9a1f3b028314b-604x1024.png" alt="" width="604" height="1024" srcset="/uploads-archive/2018/03/0c63b360a18e742fb5e9a1f3b028314b-604x1024.png 604w, /uploads-archive/2018/03/0c63b360a18e742fb5e9a1f3b028314b-177x300.png 177w, /uploads-archive/2018/03/0c63b360a18e742fb5e9a1f3b028314b-768x1301.png 768w, /uploads-archive/2018/03/0c63b360a18e742fb5e9a1f3b028314b-228x386.png 228w, /uploads-archive/2018/03/0c63b360a18e742fb5e9a1f3b028314b.png 1440w" sizes="(max-width: 604px) 100vw, 604px" /></a></p>
<p>&nbsp;</p>
<h3>Original Stitch</h3>
<p><a href="/uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-.png"><img decoding="async" loading="lazy" class="aligncenter wp-image-13744 size-large" src="/uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style--1024x555.png" alt="" width="1024" height="555" srcset="/uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style--1024x555.png 1024w, /uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style--300x163.png 300w, /uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style--768x416.png 768w, /uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style--228x124.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>まず上のナビゲーションを見て頂くと分かる通り、</p>
<p>生地</p>
<p>↓</p>
<p>細部のスタイル</p>
<p>↓</p>
<p>注文内容という遷移になっています。</p>
<p>最初の画面では、本体の生地から細部の生地を選択出来ます。</p>
<p>全部違う生地を選んだのでガチャガチャしていますが、各部で生地ごとに価格が設定してあり、本体生地だけであれば5980円の所に数百円ずつが加算されていきます。</p>
<p><a href="/uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-1.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-13748" src="/uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-1-1024x555.png" alt="" width="1024" height="555" srcset="/uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-1-1024x555.png 1024w, /uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-1-300x163.png 300w, /uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-1-768x416.png 768w, /uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-1-228x124.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>ページ遷移はせずに、その他の形を決めていきます。店舗でオーダーするシャツでも一般的な流れです。</p>
<p>ここでもダブルカフスやイニシャルの刻印等は追加料金が掛かります。</p>
<p><a href="/uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-2.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-13749" src="/uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-2-1024x555.png" alt="" width="1024" height="555" srcset="/uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-2-1024x555.png 1024w, /uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-2-300x163.png 300w, /uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-2-768x416.png 768w, /uploads-archive/2018/03/Express-Your-Originality-Customize-dress-shirts-to-your-unique-style-2-228x124.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>注文内容を押すと最後にサイズのプロフィールを入力していくことになります。</p>
<p>導線をこのようにしたのはまず、商品を見てもらい、購入の意思が高くなってから入力の手間を伴うプロフィール入力へと進ませる至極自然な流れですね。ただ、この辺りはパッケージやASPでは難しいところかなと感じます。</p>
<h2>購入フロー</h2>
<h3>鎌倉シャツ</h3>
<p><a href="/uploads-archive/2018/03/42827597c6342fd84fb1a13a71194a4b.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-13751" src="/uploads-archive/2018/03/42827597c6342fd84fb1a13a71194a4b-1024x555.png" alt="" width="1024" height="555" srcset="/uploads-archive/2018/03/42827597c6342fd84fb1a13a71194a4b-1024x555.png 1024w, /uploads-archive/2018/03/42827597c6342fd84fb1a13a71194a4b-300x163.png 300w, /uploads-archive/2018/03/42827597c6342fd84fb1a13a71194a4b-768x416.png 768w, /uploads-archive/2018/03/42827597c6342fd84fb1a13a71194a4b-228x124.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>買い物かごにいれてそのまま購入フローに進みます。</p>
<p>日本のECサイトでは一般的な流れです。</p>
<h3>Original Stitch</h3>
<p><a href="/uploads-archive/2018/03/01129a4918a449762afa4463cb773456.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-13752" src="/uploads-archive/2018/03/01129a4918a449762afa4463cb773456-1024x555.png" alt="" width="1024" height="555" srcset="/uploads-archive/2018/03/01129a4918a449762afa4463cb773456-1024x555.png 1024w, /uploads-archive/2018/03/01129a4918a449762afa4463cb773456-300x163.png 300w, /uploads-archive/2018/03/01129a4918a449762afa4463cb773456-768x416.png 768w, /uploads-archive/2018/03/01129a4918a449762afa4463cb773456-228x124.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>身長、体重、ウェスト、裄丈などをSTEPごとに選択していきます。</p>
<p>最後にメールアドレスかソーシャルログインを経て登録します。</p>
<p><a href="/uploads-archive/2018/03/40a8c6cdfab934c634df59cde9ae97c1.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-13753" src="/uploads-archive/2018/03/40a8c6cdfab934c634df59cde9ae97c1-1024x555.png" alt="" width="1024" height="555" srcset="/uploads-archive/2018/03/40a8c6cdfab934c634df59cde9ae97c1-1024x555.png 1024w, /uploads-archive/2018/03/40a8c6cdfab934c634df59cde9ae97c1-300x163.png 300w, /uploads-archive/2018/03/40a8c6cdfab934c634df59cde9ae97c1-768x416.png 768w, /uploads-archive/2018/03/40a8c6cdfab934c634df59cde9ae97c1-228x124.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>最後に決済画面です。</p>
<h2>商品設計</h2>
<p>ここでシステムサイドから考察してみたいと思います。</p>
<table>
<thead>
<tr>
<th></th>
<th>鎌倉シャツ</th>
<th>Original Stitch</th>
</tr>
</thead>
<tbody>
<tr>
<th>商品名</th>
<td>○</td>
<td>生地毎</td>
</tr>
<tr>
<th>カテゴリー</th>
<td>○</td>
<td>✕</td>
</tr>
<tr>
<th>SKU</th>
<td>サイズ毎</td>
<td>各部生地6種</td>
</tr>
<tr>
<th>オプション</th>
<td>裄丈詰め</td>
<td>スタイル5種</td>
</tr>
<tr>
<th>商品詳細</th>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th>説明文</th>
<td>○</td>
<td>✕</td>
</tr>
<tr>
<th>おすすめ商品</th>
<td>○</td>
<td>✕</td>
</tr>
<tr>
<th>コーディネート</th>
<td>○</td>
<td>✕</td>
</tr>
<tr>
<th>レコメンド</th>
<td>○</td>
<td>✕</td>
</tr>
</tbody>
</table>
<p>ご覧のように Original Stitchは情報が厳選されていて、説明文すらない状態です。ただ、この選択肢の多さは、上図のように整理すれば、設計自体は出来ると思います。SKU6種というのは多いですが、在庫を管理するような概念でもないので、全てオプションとして無料もしくは追加料金の計算フラグだけで管理するということも出来るかもしれません。</p>
<h3>特許の3Dデザインシステム</h3>
<p><a href="/uploads-archive/2018/03/AwesomeScreenshot-2018-03-13T07-21-43-832Z.gif"><img decoding="async" loading="lazy" class="aligncenter wp-image-13757 size-full" src="/uploads-archive/2018/03/AwesomeScreenshot-2018-03-13T07-21-43-832Z.gif" alt="" width="2560" height="1440" /></a></p>
<p>一番目を引くのが選択項目が瞬時に反映される3D画像ですが、これは一筋縄では出来ません。</p>
<p>技術レベルもさることながら、特許を取得されているようです。</p>
<p><a href="https://prtimes.jp/main/html/rd/p/000000001.000026235.html" target="_blank" rel="noopener">シリコンバレー発オンラインカスタムシャツブランド、Original Stitchが“3Dデザインシステム“で世界初となる特許を取得</a></p>
<h2>まとめ</h2>
<p>新進気鋭のECスタートアップの作り込まれたプロダクトを内部事情と置き換えながら見てみるとここは苦労しただろうなというところが垣間見えます。</p>
<p>我々が提供する越境ECカートもまだまだ開発途上ではありますが、アジア向けNo1をひた走りたいと思います。</p>
<h3>参考</h3>
<p><a href="https://prtimes.jp/main/html/rd/p/000000006.000026235.html" target="_blank" rel="noopener">Original Stitch、AIが肌のトーンや顔つきを瞬時に認識し、似合うシャツの色を厳選する新感覚AIカスタマイズアプリ「Stylebot（スタイルボット）」のβ版をリリース</a></p>
<p>技術トレンドとプロダクトを融合させたサービスをリリースしたりととにかくすごいです。</p>


オーダーメイドシャツサイト「Original Stitch」を開発サイドから考察

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

<p>以前、</p>
<blockquote class="wp-embedded-content" data-secret="CaMToShGPq"><p><a href="https://sterfield.co.jp/officer/%e3%82%a2%e3%83%97%e3%83%aa%e3%81%8c%e3%81%84%e3%82%89%e3%81%aa%e3%81%8f%e3%81%aa%e3%82%8b-%e3%80%90%e5%b0%8f%e7%a8%8b%e5%ba%8f%e3%80%91wechat%e3%81%ae%e6%96%b0%e3%83%97%e3%83%a9%e3%83%83%e3%83%88/">アプリがいらなくなる!? 【小程序】Wechatの新プラットフォーム</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/%e3%82%a2%e3%83%97%e3%83%aa%e3%81%8c%e3%81%84%e3%82%89%e3%81%aa%e3%81%8f%e3%81%aa%e3%82%8b-%e3%80%90%e5%b0%8f%e7%a8%8b%e5%ba%8f%e3%80%91wechat%e3%81%ae%e6%96%b0%e3%83%97%e3%83%a9%e3%83%83%e3%83%88/embed/#?secret=CaMToShGPq" data-secret="CaMToShGPq" width="500" height="282" title="&#8220;アプリがいらなくなる!? 【小程序】Wechatの新プラットフォーム&#8221; &#8212; スターフィールド株式会社" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>こちらの記事で紹介した微信の新プラットフォーム「小程序」が、昨年の1月のリリースから1年が経過した。</p>
<p>結論から言うと、1日の利用者数は1.7億人、小程序を公開する企業は58万社に達し、今や情報を提供する企業、利用するユーザーともになくてはならない存在になりつつあるようだ。</p>
<div id="attachment_13728" style="width: 179px" class="wp-caption aligncenter"><a href="/uploads-archive/2018/03/IMG-2395.png"><img aria-describedby="caption-attachment-13728" decoding="async" loading="lazy" class="wp-image-13728 size-medium" src="/uploads-archive/2018/03/IMG-2395-169x300.png" alt="" width="169" height="300" srcset="/uploads-archive/2018/03/IMG-2395-169x300.png 169w, /uploads-archive/2018/03/IMG-2395-768x1365.png 768w, /uploads-archive/2018/03/IMG-2395-576x1024.png 576w, /uploads-archive/2018/03/IMG-2395-228x405.png 228w, /uploads-archive/2018/03/IMG-2395.png 1242w" sizes="(max-width: 169px) 100vw, 169px" /></a><p id="caption-attachment-13728" class="wp-caption-text">スターバックスの「小程序」</p></div>
<p>&nbsp;</p>
<p>話を聞く限り最も利用されているのは飲食店のようだ。</p>
<p>良く行く店舗の情報が位置情報によって切り替わったり、小程序を開くとすぐに「近くのストア」というボタンがありAIと位置情報から最適な店舗をレコメンドしてくれるようだ。</p>
<p>&nbsp;</p>
<div id="attachment_13727" style="width: 179px" class="wp-caption aligncenter"><a href="/uploads-archive/2018/03/IMG-2400.png"><img aria-describedby="caption-attachment-13727" decoding="async" loading="lazy" class="wp-image-13727 size-medium" src="/uploads-archive/2018/03/IMG-2400-169x300.png" alt="" width="169" height="300" srcset="/uploads-archive/2018/03/IMG-2400-169x300.png 169w, /uploads-archive/2018/03/IMG-2400-768x1365.png 768w, /uploads-archive/2018/03/IMG-2400-576x1024.png 576w, /uploads-archive/2018/03/IMG-2400-228x405.png 228w, /uploads-archive/2018/03/IMG-2400.png 1242w" sizes="(max-width: 169px) 100vw, 169px" /></a><p id="caption-attachment-13727" class="wp-caption-text">「小程序」を開いてすぐの画面</p></div>
<p>&nbsp;</p>
<p>さらに小程序はAPIが充実しており、各アプリ内でユーザーに対して各情報へのアクセス許可を得ることにより、例えば位置情報からチェーン店舗を近い順に並べたり、微信のプロフィール情報を取得してアプリ内で再利用したりなどができる。</p>
<p>&nbsp;</p>
<p>小程序のAIP</p>
<p><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/" target="_blank" rel="noopener">https://mp.weixin.qq.com/debug/wxadoc/dev/</a></p>
<p>&nbsp;</p>
<div id="attachment_13729" style="width: 179px" class="wp-caption aligncenter"><a href="/uploads-archive/2018/03/IMG-2399.png"><img aria-describedby="caption-attachment-13729" decoding="async" loading="lazy" class="wp-image-13729 size-medium" src="/uploads-archive/2018/03/IMG-2399-169x300.png" alt="" width="169" height="300" srcset="/uploads-archive/2018/03/IMG-2399-169x300.png 169w, /uploads-archive/2018/03/IMG-2399-768x1365.png 768w, /uploads-archive/2018/03/IMG-2399-576x1024.png 576w, /uploads-archive/2018/03/IMG-2399-228x405.png 228w, /uploads-archive/2018/03/IMG-2399.png 1242w" sizes="(max-width: 169px) 100vw, 169px" /></a><p id="caption-attachment-13729" class="wp-caption-text">最寄りの吉野家 学清路店</p></div>
<p>&nbsp;</p>
<p>この図は最寄り且つ現在時刻営業中の吉野家の店舗。</p>
<p>現在提供可能なメニューが表示されている。</p>
<p>ちなみにこれは吉野家のデリバリー用のアプリ。</p>
<p>もちろんWechatPayで支払いも可能。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2018/03/IMG-2397.png"><img decoding="async" loading="lazy" class="aligncenter wp-image-13730 size-medium" src="/uploads-archive/2018/03/IMG-2397-169x300.png" alt="" width="169" height="300" srcset="/uploads-archive/2018/03/IMG-2397-169x300.png 169w, /uploads-archive/2018/03/IMG-2397-768x1365.png 768w, /uploads-archive/2018/03/IMG-2397-576x1024.png 576w, /uploads-archive/2018/03/IMG-2397-228x405.png 228w, /uploads-archive/2018/03/IMG-2397.png 1242w" sizes="(max-width: 169px) 100vw, 169px" /></a></p>
<p>&nbsp;</p>
<p>もちろんEコマースも可能だ。</p>
<div id="attachment_13731" style="width: 179px" class="wp-caption aligncenter"><a href="/uploads-archive/2018/03/IMG-2401.png"><img aria-describedby="caption-attachment-13731" decoding="async" loading="lazy" class="wp-image-13731 size-medium" src="/uploads-archive/2018/03/IMG-2401-169x300.png" alt="" width="169" height="300" srcset="/uploads-archive/2018/03/IMG-2401-169x300.png 169w, /uploads-archive/2018/03/IMG-2401-768x1365.png 768w, /uploads-archive/2018/03/IMG-2401-576x1024.png 576w, /uploads-archive/2018/03/IMG-2401-228x405.png 228w, /uploads-archive/2018/03/IMG-2401.png 1242w" sizes="(max-width: 169px) 100vw, 169px" /></a><p id="caption-attachment-13731" class="wp-caption-text">小程序内小米のEC</p></div>
<p>&nbsp;</p>
<div id="attachment_13732" style="width: 179px" class="wp-caption aligncenter"><a href="/uploads-archive/2018/03/IMG-2402.png"><img aria-describedby="caption-attachment-13732" decoding="async" loading="lazy" class="wp-image-13732 size-medium" src="/uploads-archive/2018/03/IMG-2402-169x300.png" alt="" width="169" height="300" srcset="/uploads-archive/2018/03/IMG-2402-169x300.png 169w, /uploads-archive/2018/03/IMG-2402-768x1365.png 768w, /uploads-archive/2018/03/IMG-2402-576x1024.png 576w, /uploads-archive/2018/03/IMG-2402-228x405.png 228w, /uploads-archive/2018/03/IMG-2402.png 1242w" sizes="(max-width: 169px) 100vw, 169px" /></a><p id="caption-attachment-13732" class="wp-caption-text">小程序内小米のEC-カート</p></div>
<p>&nbsp;</p>
<p>商品情報はタオバオ、ニュースであれば微博など様々な情報の入り口が微信1つで完結できてしまう状態になっている。</p>
<p>更に大きくなる可能性を秘めている、経済圏としての微信を今後も注視していかなければと再確認した。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2018/05/10

2018/05/10

2018/05/10

2018/05/10

2018/05/10

2018/05/09

2018/04/11

2018/04/11

2018/04/11

2018/04/11

2018/04/11

2018/03/14

2018/03/14

2018/03/14

2018/03/14

2018/03/14

2018/03/13

2018/03/05