DOMmy.js

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  普段遠隔操作で欠かせない存在のTeamViewer。</p>
<p>  そう言えばスマホからたまにPCを操作することはあっても<br />
  その逆はないなと思って試しに導入してみました。</p>
<p>  PC->SPの場合、セキュリティの関係か<br />
  SPにアドオン的なアプリと、端末のメーカー別のアドオンをインストールする必要がありました。<br />
  自分はHTCにつき以下をインストール。</p>
<p>  TeamViewer QuickSupport<br />
  https://play.google.com/store/apps/details?id=com.teamviewer.quicksupport.market&#038;hl=ja<br />
  Add-On: HTC<br />
  https://play.google.com/store/apps/details?id=com.teamviewer.quicksupport.addon.htc<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2018/07/Screenshot_20180710-172309-190x300.png" alt="" width="190" height="300" class="alignnone size-medium wp-image-14100" srcset="/uploads-archive/2018/07/Screenshot_20180710-172309-190x300.png 190w, /uploads-archive/2018/07/Screenshot_20180710-172309-768x1210.png 768w, /uploads-archive/2018/07/Screenshot_20180710-172309-650x1024.png 650w, /uploads-archive/2018/07/Screenshot_20180710-172309-228x359.png 228w, /uploads-archive/2018/07/Screenshot_20180710-172309.png 1080w" sizes="(max-width: 190px) 100vw, 190px" /></div>
<h3>導入</h3>
<div style="padding-left: 15px;">
  PCとSP両方のTeamViewerを立ち上げます。<br />
  SPの方はQuickSupportも立ち上げます。</p>
<p>  すると以下のような画面が出るので「許可」を押せば遠隔操作開始。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2018/07/Screenshot_20180710-172833-190x300.png" alt="" width="190" height="300" class="alignnone size-medium wp-image-14107" srcset="/uploads-archive/2018/07/Screenshot_20180710-172833-190x300.png 190w, /uploads-archive/2018/07/Screenshot_20180710-172833-768x1210.png 768w, /uploads-archive/2018/07/Screenshot_20180710-172833-650x1024.png 650w, /uploads-archive/2018/07/Screenshot_20180710-172833-228x359.png 228w, /uploads-archive/2018/07/Screenshot_20180710-172833.png 1080w" sizes="(max-width: 190px) 100vw, 190px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/07/Screenshot_20180710-172843-190x300.png" alt="" width="190" height="300" class="alignnone size-medium wp-image-14108" srcset="/uploads-archive/2018/07/Screenshot_20180710-172843-190x300.png 190w, /uploads-archive/2018/07/Screenshot_20180710-172843-768x1210.png 768w, /uploads-archive/2018/07/Screenshot_20180710-172843-650x1024.png 650w, /uploads-archive/2018/07/Screenshot_20180710-172843-228x359.png 228w, /uploads-archive/2018/07/Screenshot_20180710-172843.png 1080w" sizes="(max-width: 190px) 100vw, 190px" /></p>
<p>  SPでの操作を求めるあたりは安心です。</p>
<p>  もちろんキーボードを使ったブラウジングで実機テストなんかも出来ます。<br />
  複雑なジェスチャーでなければ結構な作業が出来ます。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2018/07/ScreenShot-2018-07-10-17.36.35-185x300.png" alt="" width="185" height="300" class="alignnone size-medium wp-image-14112" srcset="/uploads-archive/2018/07/ScreenShot-2018-07-10-17.36.35-185x300.png 185w, /uploads-archive/2018/07/ScreenShot-2018-07-10-17.36.35-228x370.png 228w, /uploads-archive/2018/07/ScreenShot-2018-07-10-17.36.35.png 394w" sizes="(max-width: 185px) 100vw, 185px" /></div>


TeamViewerでSPを操作

large_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

medium_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

small_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

thumbnail_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

簡単なメモ帳に、markdown形式、ダウンロード、削除のモーダルの機能を追加してみた

<p>Googleスプレッドシート作りましたシリーズ⑨</p>
<p>今回は、組織マネジメントの<span class="articleInfo-title-text">「VSPROモデル」というフレームワーク</span>のフォーマットです。</p>
<p>まさに自分が考えるべき課題にぴったりだったので、これを用いて思考を深めたいと思います。</p>
<h2><span class="articleInfo-title-text">VSPROモデルとは</span></h2>
<p>「ＶＳＰＲＯモデル」とは、マネジメントシステムを検証するのに有効なフレームワークです。<br />
マネジメントの構成要素の頭文字をとったVSPROモデルと呼びコンサルティング会社「アーサー・D・リトル」が開発したフレームワークです。</p>
<p>このフレームワークのミソはビジョンありきで下の構成要素が形成されている点ですね。なので、ビジョンをすっ飛ばして組織の分析をしてしまうとナンセンスな結果になってしまいます。</p>
<h3>Vision （ビジョン）</h3>
<p>掲げているビジョンを何か？<br />
目指すビジョンは適切か？</p>
<h3>Strategy（戦力）</h3>
<p>ビジョンに沿った戦略になっているか？<br />
差別化できる戦略になっているか？</p>
<h3>Process（プロセス）</h3>
<p>戦略を実行するプロセスはどうなっているか？<br />
そのプロセスはビジョンとの整合がとれているか？<br />
そのプロセスは差別化の源泉となり得るか？</p>
<h3>Resource（リソース）</h3>
<p>戦略・プロセスを実行できるリソースは十分か？</p>
<h3>Organization（組織）</h3>
<p>戦略・プロセスを実行できる組織になっているか？<br />
従業員はビジョンや戦略を腹に落としているか？<br />
中間管理職は従業員を動機づけられるか？</p>
<h2><span class="articleInfo-title-text">VSPROモデル</span>のサンプル</h2>
<p><a href="/uploads-archive/2018/07/571a77db184b58c1440fd71e1fb0cb82.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-14085" src="/uploads-archive/2018/07/571a77db184b58c1440fd71e1fb0cb82.png" alt="" width="751" height="664" srcset="/uploads-archive/2018/07/571a77db184b58c1440fd71e1fb0cb82.png 751w, /uploads-archive/2018/07/571a77db184b58c1440fd71e1fb0cb82-300x265.png 300w, /uploads-archive/2018/07/571a77db184b58c1440fd71e1fb0cb82-228x202.png 228w" sizes="(max-width: 751px) 100vw, 751px" /></a></p>
<h2>ダウンロードリンク</h2>
<p><a class="link" href="https://docs.google.com/spreadsheets/d/1ZETr4Ut2EoPy4ocAhK-QwHuL9zKoIyC8Q7RnVpoSTTw/edit#gid=1171353649" target="_blank" rel="noopener">ビジネスフレームワークテンプレート集-Googleスプレッドシート</a></p>


組織マネジメントの「VSPROモデル」Googleスプレッドシート

medium_nino_eye130625.png

small_nino_eye130625.png

thumbnail_nino_eye130625.png

nino_eye130625.png

Three.jsで360°パノラマ動画を表示する

<p>日本のEC事業者の中では既に一般的になりつつある独身の日だが、今あらたな別イベントが注目されている。</p>
<p>それが「京東618」だ。</p>
<p>これは京東集団が1998年6月18日に設立されたため、それを記念したセールで618セールと訳されることもある。</p>
<p>独身の日が注目されがちだが京東618は今年で15回目と伝統あるセールで、毎年6月1日〜18日に開催されている。</p>
<p>&nbsp;</p>
<p>規模としては、年々拡大しているのだが今年は過去最大となり、取引額の合計は1,592億元（約2.7兆円）となった。</p>
<p>2017年独身の日のアリババ系の取引額が1,682億元（約2.85兆円）なので、約95%にまで迫る規模だ。</p>
<p>ここまでくると、今後は中国2大セールイベントとして対策を考える必要がありそうだ。</p>
<p>&nbsp;</p>
<p>ちなみに具体的な取引額の発表は無いそうだが、アリババ系も対抗して618セールを開催しており、京東の開催期間が6月1日〜18日なのに対しアリババ系は6月1日〜20日となっている。</p>
<p>&nbsp;</p>
<p>話が広がるが、京東は2017年独身の日では1,271億元もの取引があり、これはアリババの76%となりこちらもも好調だ。</p>
<p>2017年の中国内のECシェアはアリババが53%となっており、2012年からほぼ変わっていないのに対し、<br />
京東は22%→33%とシェアを伸ばしている。</p>
<p>&nbsp;</p>
<p>京東とアリババの最大の違いは、京東は自前主義であること。</p>
<p>京東は仕入れから配送、顧客サポートまで自社グループで展開している。</p>
<p>特に配送に対する評判は高いらしく、618も90%以上の注文が24時間以内に受け取れたという。</p>
<p>(以下はアリババ系の独身の日の例)</p>
<p>&nbsp;</p>
<blockquote class="wp-embedded-content" data-secret="0LaAjKc6Uf"><p><a href="https://sterfield.co.jp/blog/ec/%e7%8b%ac%e8%ba%ab%e3%81%ae%e6%97%a5%e3%81%ae%e5%85%89%e3%81%a8%e5%bd%b1-%e7%bf%8c%e6%97%a5%e3%81%ae%e8%bf%94%e5%93%81or%e8%bf%94%e9%87%91%e3%83%a9%e3%83%83%e3%82%b7%e3%83%a5/">独身の日の光と影  翌日の返品or返金ラッシュ</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/blog/ec/%e7%8b%ac%e8%ba%ab%e3%81%ae%e6%97%a5%e3%81%ae%e5%85%89%e3%81%a8%e5%bd%b1-%e7%bf%8c%e6%97%a5%e3%81%ae%e8%bf%94%e5%93%81or%e8%bf%94%e9%87%91%e3%83%a9%e3%83%83%e3%82%b7%e3%83%a5/embed/#?secret=0LaAjKc6Uf" data-secret="0LaAjKc6Uf" width="500" height="282" title="&#8220;独身の日の光と影  翌日の返品or返金ラッシュ&#8221; &#8212; スターフィールド株式会社" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>更に自前であることか配送の自動化、カスタマーサポートのAI化もいち早く進んでいるということだ。</p>
<p>&nbsp;</p>
<p>いろいろな面で京東の動きが活発化しているようなので、引き続き注目する必要がありそうだ。</p>
<p>&nbsp;</p>


medium_1019-810x421-768x399.jpg

small_1019-810x421-768x399.jpg

thumbnail_1019-810x421-768x399.jpg

1019-810x421-768x399.jpg

ポスト独身の日? 「京東618」とは

<p>Adobe の XD は、WEB サイトやアプリのデザインを制作するツールとしてとても使いやすく、プロトタイプツールとして、お客さんとの情報共有のツールとしても利用できるため、最近使う機会がとても増えてきました。</p>
<p>XD ではプロトタイプとしてページの遷移を再現することはできますが、アニメーションを付けるところまではできません。<br />
最近の WEB デザインの傾向として、アニメーションが印象に占める割合が大きくなってきているため、コーディングに入る前にアニメーションをお客さんに確認いただきたい機会が増えてきているため、そのあたり何とかできないものかと思うようになっていました。</p>
<p>XD でデザインを作って、アニメーションをつけたい。それを実現してくれるのが、<br />
「Kite Compositor」です。</p>
<p><a class="link" href="https://kiteapp.co/" target="_blank" rel="noopener">公式ホームページ: Kite Compositor – Motion Design for Mac</a></p>
<p>$99 で購入する必要がありますが、20日間、無料で体験利用することができます。</p>
<h2>Kite で XD データからアニメーションを作る方法</h2>
<ol>
<li>XD データをインポートする</li>
<li>データを整える</li>
<li>アニメーションの設定</li>
<li>アクションの設定</li>
<li>テスト &amp; 動画の録画・出力</li>
</ol>
<h3>1. XD データをインポートする</h3>
<p><a href="/uploads-archive/2018/06/ss_xd_01.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-14029 size-medium" src="/uploads-archive/2018/06/ss_xd_01-300x182.jpg" alt="" width="300" height="182" srcset="/uploads-archive/2018/06/ss_xd_01-300x182.jpg 300w, /uploads-archive/2018/06/ss_xd_01-768x467.jpg 768w, /uploads-archive/2018/06/ss_xd_01-1024x622.jpg 1024w, /uploads-archive/2018/06/ss_xd_01-228x139.jpg 228w, /uploads-archive/2018/06/ss_xd_01.jpg 1282w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>XD でデザインデータを作成します</p>
<p><a href="/uploads-archive/2018/06/ss_kite_01.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-14017 size-medium" src="/uploads-archive/2018/06/ss_kite_01-300x187.jpg" alt="" width="300" height="187" srcset="/uploads-archive/2018/06/ss_kite_01-300x187.jpg 300w, /uploads-archive/2018/06/ss_kite_01-228x142.jpg 228w, /uploads-archive/2018/06/ss_kite_01.jpg 737w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>Kite で新規ドキュメントを作成し、</p>
<p><a href="/uploads-archive/2018/06/ss_kite_02.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14019" src="/uploads-archive/2018/06/ss_kite_02-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_02-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_02-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_02-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_02-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_02.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>XD で対象ファイルを開いた状態で、 File &gt; Import &gt; From Adobe XD CC を選択</p>
<p><a href="/uploads-archive/2018/06/ss_kite_02-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14018" src="/uploads-archive/2018/06/ss_kite_02-2-300x178.jpg" alt="" width="300" height="178" srcset="/uploads-archive/2018/06/ss_kite_02-2-300x178.jpg 300w, /uploads-archive/2018/06/ss_kite_02-2-768x456.jpg 768w, /uploads-archive/2018/06/ss_kite_02-2-1024x608.jpg 1024w, /uploads-archive/2018/06/ss_kite_02-2-228x135.jpg 228w, /uploads-archive/2018/06/ss_kite_02-2.jpg 1231w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>変換方法を設定してインポートします。</p>
<h3>2. データを整える</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_03.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14020" src="/uploads-archive/2018/06/ss_kite_03-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_03-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_03-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_03-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_03-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_03.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>インポートしたままだと、クリッピングマスクを掛けていた場合に、マスクが外れてしまうことがあるなど、崩れることがあるので、調整します。</p>
<h3>3. アニメーションの設定</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_04.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14024" src="/uploads-archive/2018/06/ss_kite_04-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>アニメーションを設定したい要素があるレイヤーを選択し、<br />
Add Child &gt; Basic Animation でレイヤーにアニメーションを追加します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_04-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14021" src="/uploads-archive/2018/06/ss_kite_04-2-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-2-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-2-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-2-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-2-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04-2.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>transformなど、アニメーションの種類を選択します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_04-3.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14022" src="/uploads-archive/2018/06/ss_kite_04-3-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-3-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-3-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-3-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-3-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04-3.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>アニメーション後の値を設定します。<br />
アニメーション名は、あとで確認しやすいものに変更しておきます。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_04-4.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14023" src="/uploads-archive/2018/06/ss_kite_04-4-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-4-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-4-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-4-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-4-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04-4.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>タイムラインの時間をスライドさせると、アニメーションの状態を確認できます。</p>
<h3>4. アクションの設定</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_05.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14027" src="/uploads-archive/2018/06/ss_kite_05-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_05-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_05-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_05-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_05-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_05.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>クリックなど、アニメーションに紐づけたいアクションをつけたい要素のレイヤーに、<br />
Add Child &gt; Action でアクションを追加します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_05-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14025" src="/uploads-archive/2018/06/ss_kite_05-2-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_05-2-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_05-2-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_05-2-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_05-2-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_05-2.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>まず１つ目、Event Type で「No Event」を選択し、先程作成したアニメーションを選択します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_05-3.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14026" src="/uploads-archive/2018/06/ss_kite_05-3-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_05-3-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_05-3-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_05-3-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_05-3-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_05-3.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>2つ目のアクションを追加し、Event Type で「Mouse Clicked」を選択し、<br />
Action Type で Trigger Actions を選択し、<br />
「+」ボタンで１つ目で設定したアクションを追加します。</p>
<h3>5. テスト &amp; 動画の録画・出力</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_06.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14028" src="/uploads-archive/2018/06/ss_kite_06-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_06-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_06-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_06-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_06-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_06.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ウィンドウの上にある 動画ウィンドウアイコンの「Present」ボタンで実際の動作を確認できます。</p>
<p>その横のビデオカメラアイコンの「Export」ボタンで、動画を録画・出力できます。</p>
<p>↓作ったアニメーションの動画の例</p>
<div style="width: 854px;" class="wp-video"><video class="wp-video-shortcode" id="video-14001-8" width="854" height="480" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2018/06/faf827cbc1792d1a1a5a0ebbada13990.mp4?_=8" /><a href="/uploads-archive/2018/06/faf827cbc1792d1a1a5a0ebbada13990.mp4">/uploads-archive/2018/06/faf827cbc1792d1a1a5a0ebbada13990.mp4</a></video></div>


XDのデータからアニメーションつきのプロトタイプを作れるCompositor

<h3>まず初めにGoogleという存在について</h3>
<p>昨今、様々なブラウザの検索エンジンはGoogleの検索エンジンを元に構築されております。<br />
我々はGoogleという「畑」でビジネスを行ったり、自身の不足を補ったりと言わば、生活をしていると言っても過言ではありません。<br />
その中でビジネスをする上で「検索上位表示」という概念は非常に重要な要素ということは言うまでもありません。</p>
<p>なので、Googleを理解する事が先決ということとなります。<br />
そこで「Googleが掲げる10の事実」を参照すると以下のようになっています。</p>
<p>①,ユーザーに焦点を絞れば、他のものはみな後からついてくる。<br />
②,1つのことをとことん極めてうまくやるのが一番。<br />
③,遅いより速いほうがいい。<br />
④,ウェブ上の民主主義は機能します。<br />
⑤,情報を探したくなるのはパソコンの前にいるときだけではない。<br />
⑥,悪事を働かなくてもお金は稼げる。<br />
⑦,世の中にはまだまだ情報があふれている。<br />
⑧,情報のニーズはすべての国境を越える。<br />
⑨,スーツがなくても真剣に仕事はできる。<br />
⑩,「すばらしい」では足りない。</p>
<p>今回は①の「ユーザーに焦点を絞れば、他のものはみな後からついてくる。」について当たり前ではあるが忘れがちなビジネスにおいて重要な事について話していきたいと思います。</p>
<h3>google(検索エンジン)=ユーザーと言う構図</h3>
<p>※ここでいうコンテンツ定義は、もの、情報を含めた全てです。</p>
<p>「ユーザーに焦点を絞れば、他のものはみな後からついてくる。」<br />
これを元に簡単にどのようなコンテンツが優良であるか考えてみましょう。</p>
<p>ビックワードで検索上位に上がることは集客をする上で非常に重要で価値の高いことです。<br />
なので、極論「検索エンジンに好かれる」ことを考える必要があります。</p>
<p>では一旦検索エンジンが好むものとは何か…</p>
<p>それは<span style="text-decoration: underline"><strong>「ユーザーに焦点が絞られたコンテンツ」</strong></span>です。<br />
ターゲットを仮想の一人として制作し、それに基づいてプランニングしていくのが一般的ではありますが、ページとして、コンテンツとして真に評価されるものは<span style="text-decoration: underline"><strong>「複数のユーザーの悩みや願いを網羅するコンテンツ」</strong></span>と言う事です。</p>
<p>その末に相手から「納得」が得れるという仕組みです。</p>
<p>&nbsp;</p>
<h3>物事を引いて見るということの重要性</h3>
<p>我々は日々ビジネスをしている中でこれを売りたいなどの「これしたい、あれしたい」ということを基準に物事を判断する傾向にあると言えます。<br />
この思想は何かを決める為には方向性、目標がなければ判定や決定を行うことが出来ません。<br />
しかしこのことがビジネスを進めていく上で予想と違った等の問題を引き起こす原因ともなります。</p>
<p>その原因は、<strong><span style="text-decoration: underline">方向の先には何があるかを忘れてしまう</span></strong>ということです。<br />
「支持＝対価」と完結にまとめて考えることができますが、「行動」をこのことにリンクさせると「支持」について考えなければならないと思います。</p>
<p>いつの間にか本位的な思考になり、本来「人間」は情報を獲得し関心にも似た「納得」を得て対価を費やす習性と真逆な心理となり、集客等の方法が集客ではなく「押し付け」となります。</p>
<p>なので、そういったコンテンツ、商品、手法等ではビジネスを行っても理念を持ち相手に納得してもらえる存在や現実的ではない程に多額の資金がかけることのできる存在に淘汰されてしまいます。<br />
ですから、「そもそも論」が必要となり、それが<span style="text-decoration: underline"><strong>「引いて見る」</strong></span>ということです。</p>
<p>&nbsp;</p>
<p>今回は基本理念をお話ししましたが、続編も出稿していきますので乞うご期待頂けますと幸いです。</p>
<p>&nbsp;</p>


つい忘れてしまう「ビジネス」の重要事項① ～webビジネス～

<p>Hotjarについて簡単に説明します。<br />
Hotjar（ホットジャー）とは、サイトを ぶんせき する つーる です。Hotjarは、ページ ないのいどうをぶんせきします。Hotjarはどうができろくできます。ただ管理画面は英語です。日本語には対応していません。</p>
<h2>Hotjarの料金</h2>
<p>Personal planの、BASIC planは、むりょうでつかえます。いちにち2000ページビューまでです。データのほぞんきかんは３ヶ月です。</p>
<h2>Hotjarの機能</h2>
<p>Hotjarでできること、おもにやっつです。</p>
<ol>
<li>ヒートマップ<br />
ヒートマップとは、ぺーじのどのぶぶんが、よくみられているか、いろわけされてひょうじされます。どこがくりっくされているのかもわかります。</li>
<li>ろくが<br />
ほうもんしゃのじっさいのマウスのうごきと、ぺーじのスクロールのうごきを、どうができろくし、さいせいすることができます。</li>
<li>コンバージョンファネル</li>
<li>フォームぶんせき<br />
といったぶんせききのうと、</li>
<li>ほうもんしゃにしつもんする</li>
<li>めにみえるかたちでかんたんなfeedbackをのこしてもらう</li>
<li>くわしいアンケートちょうさをおこなう</li>
<li>まんつーまんでのuserちょうさのいらいをする。<br />
といった、feedbackきのうにおおきくわかれます。</li>
</ol>
<h2>Hotjarの使い方</h2>
<p>それではさっそくつかっていきます。</p>
<h3>Hotjarのアカウントを作ります</h3>
<p>先ずはこうしきサイト（<a href="https://www.hotjar.com" target="_blank" rel="noopener">https://www.hotjar.com</a>/）にアクセスします。<br />
「TRY IT FREE」からアカウントをさくせいします。</p>
<p><img decoding="async" loading="lazy" width="2134" height="1261" class="aligncenter size-medium wp-image-13934" src="/uploads-archive/2018/06/hotjar01.png" alt="" srcset="/uploads-archive/2018/06/hotjar01.png 2134w, /uploads-archive/2018/06/hotjar01-300x177.png 300w, /uploads-archive/2018/06/hotjar01-768x454.png 768w, /uploads-archive/2018/06/hotjar01-1024x605.png 1024w, /uploads-archive/2018/06/hotjar01-228x135.png 228w" sizes="(max-width: 2134px) 100vw, 2134px" /></p>
<p>名前とメールアドレスをにゅうりょくしたら、ボタンをクリックします。</p>
<p><img decoding="async" loading="lazy" width="2134" height="1188" class="aligncenter size-medium wp-image-13936" src="/uploads-archive/2018/06/hotjar02.jpg" alt="" srcset="/uploads-archive/2018/06/hotjar02.jpg 2134w, /uploads-archive/2018/06/hotjar02-300x167.jpg 300w, /uploads-archive/2018/06/hotjar02-768x428.jpg 768w, /uploads-archive/2018/06/hotjar02-1024x570.jpg 1024w, /uploads-archive/2018/06/hotjar02-228x127.jpg 228w" sizes="(max-width: 2134px) 100vw, 2134px" /></p>
<p>パスワードをにゅうりょくしたら、サービスきやくにどういして、チェックを入れて、「Next」でつぎにすすみます。</p>
<p><img decoding="async" loading="lazy" width="2134" height="1369" class="aligncenter size-medium size-medium wp-image-13940" src="/uploads-archive/2018/06/hotjar03_5.png" alt="" srcset="/uploads-archive/2018/06/hotjar03_5.png 2134w, /uploads-archive/2018/06/hotjar03_5-300x192.png 300w, /uploads-archive/2018/06/hotjar03_5-768x493.png 768w, /uploads-archive/2018/06/hotjar03_5-1024x657.png 1024w, /uploads-archive/2018/06/hotjar03_5-228x146.png 228w" sizes="(max-width: 2134px) 100vw, 2134px" /></p>
<p>YOUR ROLEは、しごとにあったものをてきとうにえらびます。そのしたはむりょうぷらんでつかいたいばあいは「NO」をえらびます。<br />
「ORGANIZATION NAME」はかいしゃめいをいれます。</p>
<p><img decoding="async" loading="lazy" width="2134" height="1394" class="aligncenter size-medium wp-image-13937" src="/uploads-archive/2018/06/hotjar03.png" alt="" srcset="/uploads-archive/2018/06/hotjar03.png 2134w, /uploads-archive/2018/06/hotjar03-300x196.png 300w, /uploads-archive/2018/06/hotjar03-768x502.png 768w, /uploads-archive/2018/06/hotjar03-1024x669.png 1024w, /uploads-archive/2018/06/hotjar03-228x149.png 228w" sizes="(max-width: 2134px) 100vw, 2134px" /></p>
<p>Hotjarをどうにゅうしたいドメイン名をにゅうりょくします。<br />
さいごに「Start Using Hotjar」をおせばアカウントさくせいしゅうりょうです。</p>
<p><img decoding="async" loading="lazy" width="2134" height="1286" class="aligncenter size-medium wp-image-13938" src="/uploads-archive/2018/06/hotjar04.jpg" alt="" srcset="/uploads-archive/2018/06/hotjar04.jpg 2134w, /uploads-archive/2018/06/hotjar04-300x181.jpg 300w, /uploads-archive/2018/06/hotjar04-768x463.jpg 768w, /uploads-archive/2018/06/hotjar04-1024x617.jpg 1024w, /uploads-archive/2018/06/hotjar04-228x137.jpg 228w" sizes="(max-width: 2134px) 100vw, 2134px" /></p>
<p>そしてHotjarのコードをさいとにうめこみます<br />
これをやらないとデータがとれません。</p>
<p>管理画面みぎうえの「Settings」から「Sites&amp;Organizations」にはいると「Tracking Code」というボタンがあリます。</p>
<p>トラッキングコードをコピーして、サイトの「&lt;head&gt;」たぐのなかにはりつけましょう。</p>
<p><img decoding="async" loading="lazy" width="2134" height="1200" class="aligncenter size-medium wp-image-13941" src="/uploads-archive/2018/06/hotjar05.png" alt="" srcset="/uploads-archive/2018/06/hotjar05.png 2134w, /uploads-archive/2018/06/hotjar05-300x169.png 300w, /uploads-archive/2018/06/hotjar05-768x432.png 768w, /uploads-archive/2018/06/hotjar05-1024x576.png 1024w, /uploads-archive/2018/06/hotjar05-228x128.png 228w" sizes="(max-width: 2134px) 100vw, 2134px" /><br />
<img decoding="async" loading="lazy" width="2134" height="1200" class="aligncenter size-medium wp-image-13942" src="/uploads-archive/2018/06/hotjar06.png" alt="" srcset="/uploads-archive/2018/06/hotjar06.png 2134w, /uploads-archive/2018/06/hotjar06-300x169.png 300w, /uploads-archive/2018/06/hotjar06-768x432.png 768w, /uploads-archive/2018/06/hotjar06-1024x576.png 1024w, /uploads-archive/2018/06/hotjar06-228x128.png 228w" sizes="(max-width: 2134px) 100vw, 2134px" /></p>
<h2>まとめ</h2>
<p>さいしょの設定は、すこしたいへんですが、いちどどうにゅうすると、あとはじどうてきにデータをきろくしてくれます。無料からつかえますので、どうにゅうを　おすすめします。</p>
<p><a class="demo" href="https://www.youtube.com/watch?v=is9rb2DnrtQ" target="_blank">ホットジャーのデモ</a></p>


Hotjar（ホットジャー ）

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>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2018/07/11

2018/07/11

2018/07/11

2018/07/11

2018/07/11

2018/07/11

2018/06/13

2018/06/13

2018/06/13

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