Nginxの導入

<p>「電子商取引に関する市場調査の結果」が今年も発表された。</p>
<p>というか4/30に発表されていたようで、今更ながら要点をまとめた。</p>
<p>&nbsp;</p>
<h2>国内EC市場</h2>
<h4>全体像</h4>
<p>2017年のEC市場規模は16兆5,054億円(+9.1%増)だった。</p>
<p>EC化率は5.79%(+0.36%)だった。</p>
<p>2016年は15兆1,358 億円 (+9.9%)、5.43% (+0.68%)だったので伸び率としてはともに鈍化してはいるようだ。</p>
<p>以下は分野別構成比率で、2016年はA. 物販系分野が10.6%と全体を牽引していたのに対し、2017年は鈍化、そのかわりにB. サービス系が+2.1%と伸びている。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2018/06/1.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-13985" src="/uploads-archive/2018/06/1-300x135.png" alt="" width="300" height="135" srcset="/uploads-archive/2018/06/1-300x135.png 300w, /uploads-archive/2018/06/1-228x103.png 228w, /uploads-archive/2018/06/1.png 505w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>サービス系の更に細かい分類は以下で、飲食と理美容サービスが目立って伸びている。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2018/06/2.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-13986" src="/uploads-archive/2018/06/2-294x300.png" alt="" width="294" height="300" srcset="/uploads-archive/2018/06/2-294x300.png 294w, /uploads-archive/2018/06/2-228x233.png 228w, /uploads-archive/2018/06/2.png 480w" sizes="(max-width: 294px) 100vw, 294px" /></a></p>
<p>&nbsp;</p>
<p>2017年の国内ECは、飲食店や美容室など実店舗のネット予約が伸びた1年と言えるようだ。</p>
<p>&nbsp;</p>
<h4>新ジャンル</h4>
<p>ライブコマースについて初めて言及されている。</p>
<p>調査というよりは説明のみではあるが、翌年以降で市場規模等が出てくると思われる。</p>
<p>逆に昨年度にから本格的に調査されるようになった「フリマアプリ」については、市場規模が4,835億円(+58.4%)となり、大きく成長している。</p>
<p>(わずか5年で約5000億円もの市場ができあがった)</p>
<p>&nbsp;</p>
<h4>物流</h4>
<p>2017年は個配サービスのあり方が問われ、結果サービス縮小と値上げという大きな動きのあった1年であった。</p>
<p>それもあってか昨年にはなかった「物流」という節があり、</p>
<p>&gt; 宅配便事業者、国内 BtoC-EC 事業者、消費者それぞれが納得いく 宅配便サービスのあり方、およびその料金の着地点を見出す必要に迫られている。</p>
<p>と締めくくっている。</p>
<p>&nbsp;</p>
<h2>越境EC</h2>
<h4>EC市場規模ランキング</h4>
<p>個人的に毎年定番化している国別のEC市場規模のランキング。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2018/06/3.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-13987" src="/uploads-archive/2018/06/3-300x226.png" alt="" width="300" height="226" srcset="/uploads-archive/2018/06/3-300x226.png 300w, /uploads-archive/2018/06/3-228x172.png 228w, /uploads-archive/2018/06/3.png 434w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>順位は1〜10位は昨年と同じ。先進国は鈍化が目立つ。</p>
<p>&nbsp;</p>
<h4>ポテンシャル推計値</h4>
<p>中国が日本から越境ECでどれくらい買ってくれるのかという数値について、</p>
<p>昨年は2020年に19,053億円と推計、今年は2019年に20,077億円と大幅に情報修正しており、衰えない中国の購買力がうかがえる。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2018/06/4.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-13988" src="/uploads-archive/2018/06/4-300x155.png" alt="" width="300" height="155" srcset="/uploads-archive/2018/06/4-300x155.png 300w, /uploads-archive/2018/06/4-228x118.png 228w, /uploads-archive/2018/06/4.png 593w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>越境ECの種類</h4>
<p>今年初めて越境ECの定義がなされた。</p>
<p>少々中国よりな気がするが、今後の用語の指針になるかと思われる。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2018/06/5.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-13989" src="/uploads-archive/2018/06/5-275x300.png" alt="" width="275" height="300" srcset="/uploads-archive/2018/06/5-275x300.png 275w, /uploads-archive/2018/06/5-228x249.png 228w, /uploads-archive/2018/06/5.png 592w" sizes="(max-width: 275px) 100vw, 275px" /></a></p>
<p>&nbsp;</p>
<h4>台湾、香港の統計が追加</h4>
<p>今年から台湾、香港の統計が追加されており、来日率、越境EC経験率の高さがまとめられている。</p>
<p>以下は個人的に参考になった資料。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2018/06/6.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-13990" src="/uploads-archive/2018/06/6-300x208.png" alt="" width="300" height="208" srcset="/uploads-archive/2018/06/6-300x208.png 300w, /uploads-archive/2018/06/6-228x158.png 228w, /uploads-archive/2018/06/6.png 618w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>日本のEC市場としては、昨年と比べると少し落ち着いた感がある。</p>
<p>しかし、他国のEC化率と比べるとまだまだ低いので今の所ゆるやかに成長する良い市場といえる。</p>
<p>越境ECとしては、中国を例とすると越境で人気が出た商品が国内で変えるようになるという流れがあり、加速しているように見える。</p>
<p>なので越境EC→現地ECをまとめて越境ECととらえることの重要性を感じた。</p>
<p>&nbsp;</p>


small_1.png

thumbnail_1.png

1.png

経産省「電子商取引に関する市場調査の結果」2018年版を発表

フロントエンドのフレームワーク「materialize」を使って簡単なメモ帳を作ってみた

<p>Googleスプレッドシート作りましたシリーズ⑧</p>
<p>今回は、<span class="articleInfo-title-text">アイデア出しとして用いる「SCAMPER」というフレームワーク</span>のフォーマットです。</p>
<h2><span class="articleInfo-title-text">SCAMPERとは</span></h2>
<p>下記のそれぞれの頭文字をとったアイデア、発想を生むためのフレームワーク。</p>
<p>何かに対して改善案の提示を求められたとき、それぞれに従って、対象を当てはめていくことで、アイデアが形成されていきます。</p>
<p>何かに煮詰まったときに、むしろ煮詰まる前にこのフレームワークを用いるのは如何でしょうか？</p>
<h3>Substitute（代用）</h3>
<p>他のもので代用できないか</p>
<h3>Combine（結合）</h3>
<p>組み合わせてみることができないか</p>
<h3>Adapt（適用）</h3>
<p>応用したり当てはめたりできないか</p>
<h3>Modify（修正）</h3>
<p>修正、拡大、縮小できないか</p>
<h3>Put to other uses（転用）</h3>
<p>他に使い道はないか</p>
<h3>Eliminate（除去）</h3>
<p>削除、省略できないか</p>
<h3>Rearrange（再配列）</h3>
<p>順番を変えたりできないか</p>
<h2><span class="articleInfo-title-text">SCAMPER</span>のサンプル</h2>
<div>もし、月額制のBtoB商材に関する改善案を出せと言われたらと仮定してのサンプル作ってみました。</div>
<p><a href="/uploads-archive/2018/06/571a77db184b58c1440fd71e1fb0cb82-1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-13979" src="/uploads-archive/2018/06/571a77db184b58c1440fd71e1fb0cb82-1.png" alt="" width="723" height="763" srcset="/uploads-archive/2018/06/571a77db184b58c1440fd71e1fb0cb82-1.png 723w, /uploads-archive/2018/06/571a77db184b58c1440fd71e1fb0cb82-1-284x300.png 284w, /uploads-archive/2018/06/571a77db184b58c1440fd71e1fb0cb82-1-228x241.png 228w" sizes="(max-width: 723px) 100vw, 723px" /></a></p>
<h2>ダウンロードリンク</h2>
<p><a class="link" href="https://docs.google.com/spreadsheets/d/1ZETr4Ut2EoPy4ocAhK-QwHuL9zKoIyC8Q7RnVpoSTTw/edit#gid=1716050860" target="_blank" rel="noopener">ビジネスフレームワークテンプレート集-Googleスプレッドシート</a></p>


発想方法の「SCAMPER法」Googleスプレッドシート

<h2>商売に「人間」という概念は不要だと思いますか？</h2>
<p>ECサイトに限らず収益を上げるということが目的となると思います。<br />
ECサイトで実現する為の構図としてはアクセスしてコンバージョンへ推移していくという単純な形となりますが皆さんご存知の通りこの形を形成するためには多大な労力、テクニックが必要となります。</p>
<p>今回は、その中の一部である人間行動心理を活用した機能、作用をご紹介致します。</p>
<h2>◆９個の機能、テクニック</h2>
<h3>1.コンコルド効果</h3>
<p>「コンコルド効果」とは「スタートしたらゴールまで」という心理です。<br />
これはシリーズものや、ポイント販売などが代表的で、販売者側からすると「一度捕まえたお客様は他に渡さない！」という考えです。<br />
少し別角度から言うと、「○○円でと送料が無料で」。<br />
何らかの限定条件(この日、この商品等)ポイント2倍の商品です。と伝えることで購買に近きます。</p>
<h3>2.返報性の原理</h3>
<p>人を騙したり、極悪な所業に及ぶ人間も存在しますが、基本的に人は「なにかお返ししたい」という心理を多かれ少なかれ誰もが持っていますそれを「返報性の原理」と言います。<br />
この原理は「とりあえず試してみてください」と言う販売者側の心理に対しての心理として当てはまります。<br />
ECサイトでは無料サンプルや、無料相談やメルマガやブログ配信など、無料でさまざまなサービスを提供することで、購買へ繋げていく形となります。<br />
リピーターを作る際には「記憶に残る」という考え方もあり、お客様対応等のサービスがこれに該当します。</p>
<p>&nbsp;</p>
<h3>3.バンドワゴン効果</h3>
<p>流行っているものや人気商品になど多くの支持を得ている物、事に対してよく見えてくるこれが「バンドワゴン効果」です。<br />
みんなが買っているから、あの人が使っているから、流行っているからなどがあれば合否のラインが下がります。<br />
ECサイトでも人気商品表示をさせたり、売れ筋ランキング表示をすることで、商品を提案し、商品の購買につなげることができる。</p>
<p>&nbsp;</p>
<h3>4.ウィンザー効果</h3>
<p>情報の威力は第三者からの情報の方が高くこれは「ウィンザー効果」と言います。<br />
このウィンザー効果とはレビューやSNS共有ボタンがそれである。“いいね”がたくさんあることで、お客様が安心していただける確率が高くなり、購買につながりやすくなる。<br />
この部分に関しては自分と比較しやすい対象が効果が高く、商品やショップに対するレビュー機能は重要なファクターとなります。</p>
<p>&nbsp;</p>
<h3>5.テンション・リダクション効果</h3>
<p>高いものを買う際に全てが終了した後、緊張が緩んだ状態になることを「テンション・リダクション効果」と言います。<br />
判断力が低下した状態にあり、そのような状態なお客様に対し、オプション商品を提案して(レコメンド機能、クロスセル機能)購買つなげる機能、運用法がです。<br />
テンション・リダクション効果は、メインの購入金額とオプション商品の金額的「落差」が大きければ成功確率はアップします。</p>
<h3>6.マッチングリスク意識</h3>
<p>ECサイトは実際に商品を手にとって検討することができないところが欠点ですが。<br />
「この商品、ショップは大丈夫かな？」等の不安を抱え商品購入を検討する。この不安を「マッチングリスク意識」という。<br />
このような不安を解消するものを備える必要がECサイトには必要で、商品に対しては返品、返金を保障する事やサンプルをお送りするなどです。<br />
お客様にはECサイトで安心して、楽しく商品を購入していただく為に！という概念が大切ですよね。</p>
<h3>7.決定回避の法則</h3>
<p>たくさんの選択肢があると選択できなくなる。このことを「決定回避の法則」と言い。<br />
複数の商品を提案すると、お客様は混乱し、選択できなくなる。そこで選択肢は絞ることが必要である。</p>
<p>ECサイトではターゲットにあわせて展開を行い「あなたにおススメの商品はこの3点です」などの提案は効果が高いといえる。</p>
<h3>8.アンカリング効果</h3>
<p>「アンカリング効果」とは大雑把に言うと「通常価格」と「限定価格」の関係性です。<br />
例えば初期設定金額が、10000円とした場合、「値引き」、「割引」等の表示を行い8000円することで、お得感を演出し購買につなげることができる。<br />
虚偽の価格を表示することは禁じられてい為、出品後からある程度の実績が必要です。<br />
※楽天などのモールは基本的に二重価格表記は禁止されていますが、スーパーセールは審査を経てこの表示を行い売上の構築を行います。</p>
<h3>9.松竹梅の法則</h3>
<p>普通が一番！と思い日常を過ごしている方は多いのではないでしょうか。<br />
いわゆる「無難な答え」と言うもので、これを「松竹梅の法則」と呼びます。<br />
ECサイトでは、3つの段階に分けて、商品販売すると一番良く売れるのは金額等の基準が定まった比較の中で中間の商品であることが多いです。<br />
顧客誘導を売りたい商品に向けて行う中で真ん中の価格帯に設定等です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>いかがでしたでしょうか？<br />
人聞きの悪い心理テクニック、原理もありましたが、逆に言えば販売者側としてこれを駆使する事でお客様に分かってもらえると考える事ができます。<br />
結局は信頼性の構築でありますね。</p>
<p>消費者として正しい情報とは何でしょうか。(笑)</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


EC運用で国内、外問わず「人間」に働きかける9個の顧客心理テクニック

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

small_0594cb54b580680d3862632e4299b9e6.png

thumbnail_0594cb54b580680d3862632e4299b9e6.png

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>


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

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

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

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>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2018/06/13

2018/06/13

2018/06/13

2018/06/13

2018/05/10

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