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

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


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

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


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

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


【小程序】公開から1年が経過

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

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

<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13662" src="/uploads-archive/2018/02/bj07_02-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_02-1.jpg 709w, /uploads-archive/2018/02/bj07_02-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_02-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13663" src="/uploads-archive/2018/02/bj07_03-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_03-1.jpg 709w, /uploads-archive/2018/02/bj07_03-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_03-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13664" src="/uploads-archive/2018/02/bj07_04-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_04-1.jpg 709w, /uploads-archive/2018/02/bj07_04-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_04-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13665" src="/uploads-archive/2018/02/bj07_05-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_05-1.jpg 709w, /uploads-archive/2018/02/bj07_05-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_05-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13666" src="/uploads-archive/2018/02/bj07_06-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_06-1.jpg 709w, /uploads-archive/2018/02/bj07_06-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_06-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13667" src="/uploads-archive/2018/02/bj07_07-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_07-1.jpg 709w, /uploads-archive/2018/02/bj07_07-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_07-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13668" src="/uploads-archive/2018/02/bj07_08-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_08-1.jpg 709w, /uploads-archive/2018/02/bj07_08-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_08-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13669" src="/uploads-archive/2018/02/bj07_09-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_09-1.jpg 709w, /uploads-archive/2018/02/bj07_09-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_09-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13670" src="/uploads-archive/2018/02/bj07_10-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_10-1.jpg 709w, /uploads-archive/2018/02/bj07_10-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_10-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13671" src="/uploads-archive/2018/02/bj07_11-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_11-1.jpg 709w, /uploads-archive/2018/02/bj07_11-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_11-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13672" src="/uploads-archive/2018/02/bj07_12-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_12-1.jpg 709w, /uploads-archive/2018/02/bj07_12-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_12-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" class="alignleft size-large wp-image-13673" src="/uploads-archive/2018/02/bj07_13-1-709x1024.jpg" alt="" width="709" height="1024" srcset="/uploads-archive/2018/02/bj07_13-1.jpg 709w, /uploads-archive/2018/02/bj07_13-1-208x300.jpg 208w, /uploads-archive/2018/02/bj07_13-1-228x329.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/02/bj07_14-2.jpg" alt="" width="687" height="483" class="alignleft size-full wp-image-13686" srcset="/uploads-archive/2018/02/bj07_14-2.jpg 687w, /uploads-archive/2018/02/bj07_14-2-300x211.jpg 300w, /uploads-archive/2018/02/bj07_14-2-228x160.jpg 228w" sizes="(max-width: 687px) 100vw, 687px" /></p>
<p>こんな就活生はイヤだ！！</p>
<p>けど新卒採用、絶賛進行中です。<br />
羽生や宇野のように世界に羽ばたきましょう。</p>
<p>■Visits OB経由でのお申込み<br />
ログイン後、座談会にお申し込みください。<br />
<a href="https://vis-its.com/ob/zadankai/10823">https://vis-its.com/ob/zadankai/10823</a></p>
<p>■キャリタス経由でのお申込み<br />
<a href="https://job.career-tasu.jp/2019/corp/00118241/jobs/?ePageTabCls=06&amp;ePageTabId=1">https://job.career-tasu.jp/2019/corp/00118241/jobs/?ePageTabCls=06&amp;ePageTabId=1</a></p>
<p>■メールでのお問い合わせ<br />
座談会の予定が合わない方はこちら！個別に対応させていただきます。<br />
recruit@sterfield.co.jp （採用担当まで）</p>
<h3>ブラックジャックによろしくを二次利用させていただきました</h3>
<p>下記利用規約に則り、作品を二次利用させていただきました。</p>
<p><a href="http://mangaonweb.com/satoshuho/download/#kiyaku">利用規約</a></p>
<table>
<tbody>
<tr>
<td>タイトル</td>
<td>ブラックジャックによろしく</td>
</tr>
<tr>
<td>著者名</td>
<td>佐藤秀峰</td>
</tr>
<tr>
<td>サイト名</td>
<td>漫画 on web</td>
</tr>
</tbody>
</table>


small_スクリーンショット 2023-09-22 11.55.37.png

thumbnail_スクリーンショット 2023-09-22 11.55.37.png

スクリーンショット 2023-09-22 11.55.37.png

【こんな就活生はイヤだ！】新卒採用担当者によろしく

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


gitlabを試してみる

<p>まずはじめに、皆さんご存知かとは思いますが、物販ビジネスには大きく分けて２パターンのソースが存在します。</p>
<p class=""><strong>「型番商品」</strong>と<strong>「オリジナル商品」</strong>です。</p>
<p><strong>「オリジナル商品」</strong>とは自社が独自で開発・企画した商品のこと。自社ブランド、メーカーで品番・商品名を付け、独自で開発からプロモーション等を一つの塊りとして行う物を「オリジナル商品」として区切ります。</p>
<p>一方、<strong>「型番商材」</strong>を簡単に説明しますと卸売を目的とした商材をメーカーが作成し(メーカー自身が販売する事もあります。)、複数の取引先販売店が仕入を行う事ができる商材です。</p>
<p>今回はネットショップ等の範囲内で展開し易い「型番商材」こちらに焦点を絞りたいと思います。</p>
<h3>「型番商材」の今</h3>
<p>ネットビジネスにおいて永遠に付きまとう「顧客からの信頼性」(個人でのサイトなら特に)を商品自体が広く出回っており、取り扱い店に認知があまりなくても、商品自体のブランドでお客様が購入を検討してくれる可能性がありますので、こちらの段階をクリアする事は容易であると言えます。</p>
<p>また、基本的には消耗品が主流であり、リピート商材としての二面性を持ち合わせているので、楽天やヤフーショッピング等のモールへ出品していれば安心して購入をしていただける上、エンドユーザーに対し特に粗相がなければ、リピートしていただける機会は多分に含まれている為、ビジネスチャンスを感じる事ができます。</p>
<p>しかし、視点を変えると「ライバルも同じ条件で運用できる」なので、商品に対して付加価値を付けるか極端に露出をしない限り他に勝てないという事になります。<br />
現在の市場では様々な型番商材に様々なオマケ等をつける事により、購買率を上げるなどの工夫がされておりますが、極論、これでは消耗戦になり遅れて取り扱いを開始する業者は苦戦をし、強者と弱者の格差を埋める事が極めて困難な構図が出来上がっています。</p>
<h3>型番商材の取り扱い</h3>
<p>個人的な副業等で大型モールへの出品などを利用し販売するのであれば話しは別ですが「どの型番商材が人気であるか」「ポピュラーなものであるか」などの考え方で取り扱いを始めると儲けを出すことは至難の業で地道な道のりとなります。</p>
<p>今から商売を行おうと思う方や拡大を狙うのであれば商材を軸にビジネスを構築していくのではなく、越境ecなどを駆使し「どこに」「だれに」「売り方(戦法)」などの広い観点から場所、人に向けて対象の商材を投入していく事が重要なのではないかと思います。</p>
<p>そこに発生するボトルネックとの上手く付き合えた存在が今後の「群雄割拠の型番商戦」を勝ち抜いて行けるのではないかと思います。</p>


型番商材の勝手に考察してみると…

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

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

<p>みなさん世界で一番売れているスマートウォッチでといったら何を思い浮かべますか？</p>
<p>&nbsp;</p>
<p>日本にいる大抵の人はApple Watch一択なのではないかと思います。</p>
<p>&nbsp;</p>
<p>でも正解は、</p>
<p><a href="http://www.itmedia.co.jp/mobile/articles/1708/04/news055.html">http://www.itmedia.co.jp/mobile/articles/1708/04/news055.html</a></p>
<p>中国のXiaomiなんですね。</p>
<p>価格帯も全く違う代物なのですが、現時点で数種類発売されており、1千円代から1万円以下が主流です。</p>
<p>それでも、アクティビティをトラッキングするだとか、心拍数を測るだとか、通知を表示するだとか一通りの機能を備えており、必要十分です。</p>
<p>日本には進出していないので、先日台湾に行った際に直営店で最新のモデルを購入してきました。</p>
<p><a href="http://www.mi.com/tw/amazfit-bip/" target="_blank" rel="noopener">http://www.mi.com/tw/amazfit-bip/</a></p>
<p>NT$1995なので大体7千円ちょいくらいですね。</p>
<p>これで45日間もつバッテリー、最高水準の防水性能と一通りの機能を搭載しているので、今のところ大満足です。</p>
<p>当然、日本語の情報は少ないのでまた恒例の5chで情報を収集していると、<strong><span style="font-size: 18pt">何やら他のアプリと連携して</span></strong>ワクワク面白いことがやれることが分かったので、自分も試してみました。</p>
<h2>Android自動化アプリ「Tasker」</h2>
<p>そのアプリは、「Tsker」というアプリで「発動条件（Contexts）」と「動作（task）」の組み合わせてAndroidの操作を自動化することが出来ます。</p>
<p>自動化アプリとしては老舗で、膨大な設定項目と様々なプラグインで最も多彩なことが出来るアプリのようです。Androidはこういうことが出来るから好きです。</p>
<p>そして、このトリガーとなる発動条件にプラグインを使って、スマートウォッチの操作を取り組むことが出来るので、腕時計を操作したらスマートフォンが反応してアクションするという<strong><span style="font-size: 18pt">SF映画で見たようなワンシーン</span></strong>になるのではとすごくワクワクしたので実際にやってみました。</p>
<p>ここでは、スマートウォッチをプッシュしたら、GoogleAssistantの音声入力がオンになった後に「おはよう」とテキストを読み上げ、Assistantが今日の気温やニュースを読み上げてくれるという設定です。</p>
<h2>初期設定</h2>
<p>どちらも有料の二つのアプリが必要になります。</p>
<p>Tasker: <a href="https://play.google.com/store/apps/d....taskerm&amp;hl=en" target="_blank" rel="noopener">https://play.google.com/store/apps/d&#8230;.taskerm&amp;hl=en</a></p>
<p>Tools &amp; Amazfit: <a href="https://play.google.com/store/apps/d...fittools&amp;hl=en" target="_blank" rel="noopener">https://play.google.com/store/apps/d&#8230;fittools&amp;hl=en</a></p>
<p>下記ブログが非常にわかりやすくまとまっていましたので、本件では割愛させて頂きますのでご参照下さい。</p>
<blockquote class="wp-embedded-content" data-secret="1IhVafcZl9"><p><a href="https://octoba.net/archives/20140629-android-feature-tasker.html">Androidの&#8221;自由度&#8221;を全開放する「Tasker」本格実践術【project配布あり】</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://octoba.net/archives/20140629-android-feature-tasker.html/embed#?secret=1IhVafcZl9" data-secret="1IhVafcZl9" width="500" height="282" title="&#8220;Androidの&#8221;自由度&#8221;を全開放する「Tasker」本格実践術【project配布あり】&#8221; &#8212; アンドロイドアプリが見つかる！スマホ情報ならオクトバ" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<h2>プラグインの追加</h2>
<p>両アプリをインストールしたら下記を参考にプラグインを追加します。</p>
<p><a href="http://help.amazfittools.com/knowledge_base/topics/amazfit-tools-plugins-tasker-automagic" target="_blank" rel="noopener">http://help.amazfittools.com/knowledge_base/topics/amazfit-tools-plugins-tasker-automagic</a></p>
<h2>Taskerの設定</h2>
<p>手っ取り早くスクリーンショット公開します。</p>
<h3>PROFIELS</h3>
<p><a href="/uploads-archive/2018/02/Screenshot_2018-02-23-09-15-41-508_net.dinglisch.android.taskerm.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-13705" src="/uploads-archive/2018/02/Screenshot_2018-02-23-09-15-41-508_net.dinglisch.android.taskerm-576x1024.png" alt="" width="576" height="1024" srcset="/uploads-archive/2018/02/Screenshot_2018-02-23-09-15-41-508_net.dinglisch.android.taskerm-576x1024.png 576w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-41-508_net.dinglisch.android.taskerm-169x300.png 169w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-41-508_net.dinglisch.android.taskerm-768x1365.png 768w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-41-508_net.dinglisch.android.taskerm-228x405.png 228w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-41-508_net.dinglisch.android.taskerm.png 1080w" sizes="(max-width: 576px) 100vw, 576px" /></a></p>
<p>発動条件を設定するページです。</p>
<p>追加したプラグインからスマートウォッチのボタンプッシュを選択します。</p>
<p>ついでに、朝方のみ発動して欲しいので時間を制御しています。あとは、GPSによる位置もトリガーに追加出来るので自宅の緯度経度を条件にするのもいいかもしれません。</p>
<h3>TASKS</h3>
<p><a href="/uploads-archive/2018/02/Screenshot_2018-02-23-09-15-45-846_net.dinglisch.android.taskerm.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-13704" src="/uploads-archive/2018/02/Screenshot_2018-02-23-09-15-45-846_net.dinglisch.android.taskerm-576x1024.png" alt="" width="576" height="1024" srcset="/uploads-archive/2018/02/Screenshot_2018-02-23-09-15-45-846_net.dinglisch.android.taskerm-576x1024.png 576w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-45-846_net.dinglisch.android.taskerm-169x300.png 169w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-45-846_net.dinglisch.android.taskerm-768x1365.png 768w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-45-846_net.dinglisch.android.taskerm-228x405.png 228w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-45-846_net.dinglisch.android.taskerm.png 1080w" sizes="(max-width: 576px) 100vw, 576px" /></a></p>
<p>ここでは、2回ボタンを押す条件分岐からGoogleAssistantの起動→3秒待って→おはようと発声するという処理を記述しています。</p>
<h4>Say</h4>
<p><a href="/uploads-archive/2018/02/Screenshot_2018-02-23-09-15-51-953_net.dinglisch.android.taskerm-1.png"><img decoding="async" loading="lazy" class="aligncenter wp-image-13703 size-large" src="/uploads-archive/2018/02/Screenshot_2018-02-23-09-15-51-953_net.dinglisch.android.taskerm-1-576x1024.png" alt="" width="576" height="1024" srcset="/uploads-archive/2018/02/Screenshot_2018-02-23-09-15-51-953_net.dinglisch.android.taskerm-1-576x1024.png 576w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-51-953_net.dinglisch.android.taskerm-1-169x300.png 169w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-51-953_net.dinglisch.android.taskerm-1-768x1365.png 768w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-51-953_net.dinglisch.android.taskerm-1-228x405.png 228w, /uploads-archive/2018/02/Screenshot_2018-02-23-09-15-51-953_net.dinglisch.android.taskerm-1.png 1080w" sizes="(max-width: 576px) 100vw, 576px" /></a></p>
<p>Respect Audio Foucusはオフにします。ここがオンになっているとGoogleAssistantが音声入力を受け付けてくれません。これが分からず、相当な時間を要してしまいました。</p>
<p>これで完了です。</p>
<p>実際やってみると感動です。</p>
<h2>まとめ</h2>
<p>まず、Taskerというアプリを使うのに苦労しました。選択肢が多すぎて、特に音声入力を受け付けない処理などハマりました。しかし、基本的な条件分岐や変数の考え方はプログラミング言語そのものでした。</p>
<p>AIスピーカーへの指示を飛ばすことも出来るようなので、アラームを切るためにスマートウォッチのボタンを押すという発動条件（トリガー）を元に、朝のニュースから家電が電源が次々と入っていって、起き上がると部屋が明るくて朝食が出来ているなんていう<span style="font-size: 18pt">ちょっと先の未来だと思っていたこと<span style="font-size: 12pt">が出来てしまう時代になったんだと実感しました。</span></span></p>
<p>何よりハードウェアの最新技術が好きなのでこれからもワクワクする未来を追っていきたいと思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


スマートウォッチとtaskerでライフハック

少しずつ実装の進んできているCSSのグリッドレイアウトを試してみる

<p>これまで、VRをWebサイトで作るのはハードルが高い印象がありましたが、</p>
<p>A-Frame というライブラリを使うと、場合によってはJavaScriptが書けなくても、HTMLのような感覚で簡単にWEBサイトでVRを実現することができます。</p>
<p>今回はその A-Frame を使って、VRをWEBサイトで作ってみました。</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="https://sterfield.co.jp/demo/ninomiya/135/">DEMO</a></p>
<h2>ソースコード</h2>
<h3>HTMLのhead</h3>
<p></p>

		<div id="crayon-649540264c6d4707919173" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML head</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script src="https://aframe.io/releases/0.7.0/aframe.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"&gt;&lt;/script&gt;
&lt;script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c6d4707919173-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d4707919173-2">2</div><div class="crayon-num" data-line="crayon-649540264c6d4707919173-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c6d4707919173-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"https://aframe.io/releases/0.7.0/aframe.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d4707919173-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d4707919173-3"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://html2canvas.hertzen.com/dist/html2canvas.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h3>HTMLのbody</h3>
<p></p>

		<div id="crayon-649540264c6d8071188107" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div class="asset"&gt;
  &lt;div class="panel" id="panel"&gt;
    &lt;figure class="panel__figure"&gt;&lt;img src="img/img_photo_01.jpg" alt="画像サンプル"&gt;&lt;/figure&gt;
    &lt;h3 class="panel__title"&gt;パネルのタイトル&lt;/h3&gt;
    &lt;p class="panel__summary"&gt;パネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入ります&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;a-scene&gt;
  &lt;a-sky src="img/Tropical_Beach_4k.jpg" rotation="0 -90 0"&gt;&lt;/a-sky&gt;
  &lt;a-box position="-10 -10 -1" rotation="0 45 0" width="5" height="5" depth="5" color="#4CC3D9"&gt;&lt;/a-box&gt;
  &lt;a-plane position="0 0 -1" width="16" height="16" material="shader:html;target: #panel;"&gt;&lt;/a-plane&gt;
  &lt;a-entity camera wasd-controls look-controls position="0 0 12"&gt;&lt;/a-entity&gt;
&lt;/a-scene&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c6d8071188107-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-2">2</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-4">4</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-6">6</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-8">8</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-10">10</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-12">12</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-14">14</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c6d8071188107-1"><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-t">class</span>=<span class="crayon-s">"asset"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"panel"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">figure </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__figure"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"img/img_photo_01.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">alt</span>=<span class="crayon-s">"画像サンプル"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">figure</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">h3 </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__title"</span><span class="crayon-h">&gt;</span>パネルのタイトル<span class="crayon-h">&lt;</span>/<span class="crayon-i">h3</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__summary"</span><span class="crayon-h">&gt;</span>パネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入ります<span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-7"><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-8">&nbsp;</div><div class="crayon-line" id="crayon-649540264c6d8071188107-9"><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-i">scene</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">sky </span><span class="crayon-i">src</span>=<span class="crayon-s">"img/Tropical_Beach_4k.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">rotation</span>=<span class="crayon-s">"0 -90 0"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">sky</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">box </span><span class="crayon-i">position</span>=<span class="crayon-s">"-10 -10 -1"</span><span class="crayon-h"> </span><span class="crayon-i">rotation</span>=<span class="crayon-s">"0 45 0"</span><span class="crayon-h"> </span><span class="crayon-i">width</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">height</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">depth</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">color</span>=<span class="crayon-s">"#4CC3D9"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">box</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">plane </span><span class="crayon-i">position</span>=<span class="crayon-s">"0 0 -1"</span><span class="crayon-h"> </span><span class="crayon-i">width</span>=<span class="crayon-s">"16"</span><span class="crayon-h"> </span><span class="crayon-i">height</span>=<span class="crayon-s">"16"</span><span class="crayon-h"> </span><span class="crayon-i">material</span>=<span class="crayon-s">"shader:html;target: #panel;"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">plane</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-13"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">entity </span><span class="crayon-e">camera </span><span class="crayon-i">wasd</span>-<span class="crayon-e">controls </span><span class="crayon-i">look</span>-<span class="crayon-e">controls </span><span class="crayon-i">position</span>=<span class="crayon-s">"0 0 12"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">entity</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-14"><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">scene</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2>参考サイト</h2>
<p><a class="link" href="http://vr-lab.voyagegroup.com/entry/2016/11/16/122115#HTML-Shader%E3%81%A8html2canvas%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF" target="_blank" rel="noopener">A-FrameとHTML Shaderで美しい日本語テキストを表示する方法 &#8211; VOYAGE GROUP VR室ブログ</a></p>

A-Frame で簡単にVRを実装する

<h2>これまでのあらすじ</h2>
<p>スターフィールド社のLaunchCartを利用することで中国越境ECをスタートした斎藤。<br />
ほっとするのも束の間、さらなる試練が斎藤を襲う！</p>
<p>中国サーバ編<br />
第一話　<a href="https://sterfield.co.jp/blog/black_ec/">https://sterfield.co.jp/blog/black_ec/</a><br />
第二話　<a href="https://sterfield.co.jp/blog/ec/black_ec2/">https://sterfield.co.jp/blog/ec/black_ec2/</a><br />
第三話 <a href="https://sterfield.co.jp/blog/ec/black_ec3/">https://sterfield.co.jp/blog/ec/black_ec3/</a><br />
第四話 <a href="https://sterfield.co.jp/blog/ec/black_ec4/">https://sterfield.co.jp/blog/ec/black_ec4/</a><br />
第五話 <a href="https://sterfield.co.jp/blog/ec/black_ec5/">https://sterfield.co.jp/blog/ec/black_ec5/</a></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_01.jpg" alt="" width="692" height="1023" class="alignleft size-full wp-image-13541" srcset="/uploads-archive/2018/01/bj06_01.jpg 692w, /uploads-archive/2018/01/bj06_01-203x300.jpg 203w, /uploads-archive/2018/01/bj06_01-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_02.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13542" srcset="/uploads-archive/2018/01/bj06_02.jpg 692w, /uploads-archive/2018/01/bj06_02-203x300.jpg 203w, /uploads-archive/2018/01/bj06_02-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_03.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13543" srcset="/uploads-archive/2018/01/bj06_03.jpg 692w, /uploads-archive/2018/01/bj06_03-203x300.jpg 203w, /uploads-archive/2018/01/bj06_03-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_04.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13544" srcset="/uploads-archive/2018/01/bj06_04.jpg 692w, /uploads-archive/2018/01/bj06_04-203x300.jpg 203w, /uploads-archive/2018/01/bj06_04-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_05.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13545" srcset="/uploads-archive/2018/01/bj06_05.jpg 692w, /uploads-archive/2018/01/bj06_05-203x300.jpg 203w, /uploads-archive/2018/01/bj06_05-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_06.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13546" srcset="/uploads-archive/2018/01/bj06_06.jpg 692w, /uploads-archive/2018/01/bj06_06-203x300.jpg 203w, /uploads-archive/2018/01/bj06_06-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_07.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13547" srcset="/uploads-archive/2018/01/bj06_07.jpg 692w, /uploads-archive/2018/01/bj06_07-203x300.jpg 203w, /uploads-archive/2018/01/bj06_07-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_08.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13548" srcset="/uploads-archive/2018/01/bj06_08.jpg 692w, /uploads-archive/2018/01/bj06_08-203x300.jpg 203w, /uploads-archive/2018/01/bj06_08-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_09.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13549" srcset="/uploads-archive/2018/01/bj06_09.jpg 692w, /uploads-archive/2018/01/bj06_09-203x300.jpg 203w, /uploads-archive/2018/01/bj06_09-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_10-1.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13550" srcset="/uploads-archive/2018/01/bj06_10-1.jpg 692w, /uploads-archive/2018/01/bj06_10-1-203x300.jpg 203w, /uploads-archive/2018/01/bj06_10-1-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_11.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13551" srcset="/uploads-archive/2018/01/bj06_11.jpg 692w, /uploads-archive/2018/01/bj06_11-203x300.jpg 203w, /uploads-archive/2018/01/bj06_11-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_12.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13552" srcset="/uploads-archive/2018/01/bj06_12.jpg 692w, /uploads-archive/2018/01/bj06_12-203x300.jpg 203w, /uploads-archive/2018/01/bj06_12-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_13.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13553" srcset="/uploads-archive/2018/01/bj06_13.jpg 692w, /uploads-archive/2018/01/bj06_13-203x300.jpg 203w, /uploads-archive/2018/01/bj06_13-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_14.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13554" srcset="/uploads-archive/2018/01/bj06_14.jpg 692w, /uploads-archive/2018/01/bj06_14-203x300.jpg 203w, /uploads-archive/2018/01/bj06_14-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_15.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13555" srcset="/uploads-archive/2018/01/bj06_15.jpg 692w, /uploads-archive/2018/01/bj06_15-203x300.jpg 203w, /uploads-archive/2018/01/bj06_15-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_16.jpg" alt="" width="709" height="665" class="alignleft size-large wp-image-13556" srcset="/uploads-archive/2018/01/bj06_16.jpg 709w, /uploads-archive/2018/01/bj06_16-300x281.jpg 300w, /uploads-archive/2018/01/bj06_16-228x214.jpg 228w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_17.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13557" srcset="/uploads-archive/2018/01/bj06_17.jpg 692w, /uploads-archive/2018/01/bj06_17-203x300.jpg 203w, /uploads-archive/2018/01/bj06_17-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2018/01/bj06_18.jpg" alt="" width="692" height="1023" class="alignleft size-large wp-image-13558" srcset="/uploads-archive/2018/01/bj06_18.jpg 692w, /uploads-archive/2018/01/bj06_18-203x300.jpg 203w, /uploads-archive/2018/01/bj06_18-228x337.jpg 228w" sizes="(max-width: 692px) 100vw, 692px" /></p>
<h3>ブラックジャックによろしくを二次利用させていただきました</h3>
<p>下記利用規約に則り、作品を二次利用させていただきました。</p>
<p><a href="http://mangaonweb.com/satoshuho/download/#kiyaku">利用規約</a></p>
<table>
<tbody>
<tr>
<td>タイトル</td>
<td>ブラックジャックによろしく</td>
</tr>
<tr>
<td>著者名</td>
<td>佐藤秀峰</td>
</tr>
<tr>
<td>サイト名</td>
<td>漫画 on web</td>
</tr>
</tbody>
</table>


【台湾編１】越境EC担当者によろしく

<h3>前言</h3>
<p>先日、中国のITを仕事している友人に相談して、今中国には人工AIが流行りなっている。</p>
<p>その原因でPythonは今大人気。</p>
<p>ちなみに今中国WEB系の現状は「javaのプロジェクトは多数前古いのプロジェクト今まで動けでいる。新しいWEB開発はPythonやPHPにやっている。」</p>
<h3>ニューラルネットワーク</h3>
<p>ニューラルネットワークは人類の神経をマネーで処理します。今の音声認識（Google HomeやAlexaやSiri）にもこのテクノロジーの上に作られだ。</p>
<p>歴史によっては１９４３年に発表したが、2006まで機械学習の計算方法発表したの後に人工AIの機能は初めって普通使うことをできます。</p>
<p>この中に有名のは「AlphaGo」、碁の訓練して勝の事、色々ニュースの中に出てる。</p>
<p>今新しいAlphaGo Zeroを誕生して、今の人工AI周りにテクノロジー最高傑作かもしれない。自分勉強して４０日に全ての旧バージョンを超えた。</p>
<p>でもこの機械学習の計算末いもここまで、今AlphaGo Zeroのソースはopenソースなって、もし新しい計算あれば大歓迎の意味です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


ニューラルネットワーク 紹介

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  本投稿では以下を扱います<br />
  ・viChrome と言う GoogleChrome アドオンの不具合解消<br />
  ・解消のためのアプローチ<br />
  ・GitHubへのcommitまでのフロー</p>
<h3>経緯</h3>
<div style="padding-left: 15px;">
  <a href="https://sterfield.co.jp/blog/other/it%e6%a5%ad%e7%95%8c/%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b8%e3%83%b3%e3%82%b0%e3%81%a7web%e5%b7%a1%e5%9b%9e%e3%82%92%e3%81%93%e3%81%aa%e3%81%99/">以前の投稿</a>でviChromeと言う<br />
  「キーボードでブラウザの挙動をマッピングして制御する」<br />
  アドオンを紹介しました。</p>
<p>  しかし、Chromeのアップデートに伴って使えなくなって久しいのです。<br />
  以下のGitHubにあったIssue経由で解決出来そうだ！<br />
  と言う事で幾度かに渡って挑み、最終的に解消しました。</p></div>
<h3>Keyバインドの仕様変更</h3>
<div style="padding-left: 15px;">
  最初に「恐らくキーバインドが機能していないだろう」と思い以下にたどり着きました<br />
  <a href="http://pasokatu.com/15313">http://pasokatu.com/15313</a></p>
<p>  確かにv54あたりから使えなくなった。<br />
  しばらくv53までをインストールして使うも、再起動するたびに戻さなければならない苦行。<br />
  keyIdentifierをkeyに置き換えてみるも動かず。しばらく諦め期間が続きました。</p>
<p>  改めて改造してみようと本家ViChromeのGitHubを見ると以下のIssueに行き着く。<br />
  <a href="https://github.com/k2nr/ViChrome/issues/67">https://github.com/k2nr/ViChrome/issues/67</a></p>
<p>  mgi166氏が何やら改良してる！？<br />
  <a href="https://github.com/mgi166/ViChrome/branches/all">https://github.com/mgi166/ViChrome/branches/all</a><br />
  Chrome v57まで併せて更新している。これは使えそう。</p>
<p>  早速自分のrepositoryへFork。<br />
  リンクフォーカスを実行してみると・・・動いた！！<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-300x179.png" alt="" width="300" height="179" class="alignnone size-medium wp-image-13531" srcset="/uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-300x179.png 300w, /uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-768x457.png 768w, /uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42-228x136.png 228w, /uploads-archive/2018/01/ScreenShot-2018-01-16-11.08.42.png 917w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>  が、スクロールが機能しない。。。<br />
  制御している &#8220;mode.js&#8221; を直截編集してリロードしながら探ってみる。</p>

		<div id="crayon-649540264c4da577064718" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
  Mode.prototype.reqScrollDown = function(args, times) {
      return g.view.scrollBy(0, g.model.getSetting("scrollPixelCount") * times);
  };</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c4da577064718-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c4da577064718-2">2</div><div class="crayon-num" data-line="crayon-649540264c4da577064718-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c4da577064718-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">Mode</span><span class="crayon-sy">.</span><span class="crayon-i">prototype</span><span class="crayon-sy">.</span><span class="crayon-i">reqScrollDown</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-i">args</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">times</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c4da577064718-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-i">g</span><span class="crayon-sy">.</span><span class="crayon-i">view</span><span class="crayon-sy">.</span><span class="crayon-e">scrollBy</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">g</span><span class="crayon-sy">.</span><span class="crayon-i">model</span><span class="crayon-sy">.</span><span class="crayon-e">getSetting</span><span class="crayon-sy">(</span><span class="crayon-s">"scrollPixelCount"</span><span class="crayon-sy">)</span><span class="crayon-h"> </span>*<span class="crayon-h"> </span><span class="crayon-i">times</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264c4da577064718-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>該当箇所でconsole.logを出力すると表示される。<br />
  つまりscrollByが機能していない。<br />
  更にview.jsのscrollByでOverrideしているところで window.scrollBy すると動く。<br />
  スクロールする差分のtop, leftは値が来ている。<br />
  と言う事は</p>

		<div id="crayon-649540264c4df961923706" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
  $(document.body).animate({</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c4df961923706-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c4df961923706-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-i">body</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ここが動いていないと結論。</p>
<p>  &#8220;document.body javascript animate&#8221;で検索してみると見事ヒット<br />
  <a href="http://chaika.hatenablog.com/entry/2017/09/22/090000">http://chaika.hatenablog.com/entry/2017/09/22/090000</a><br />
  これもChromeの仕様変更による、、、document.documentElementに置き換えてしまえば動く。<br />
  Firefox等では・・・と記述もあるがChromeのアドオンなので無視。</p>
<p>  最終的に以下のcommitで解決！<br />
  <a href="https://github.com/m-ohba-sterfield/ViChrome/commit/b795405539c34b6163753b80bea910e71d4facf5">https://github.com/m-ohba-sterfield/ViChrome/commit/b795405539c34b6163753b80bea910e71d4facf5</a></p>
<p>  ViChrome愛好家のお役に立てれば幸いです。</p></div>

ViChromeのIssueを解決

<h2>Windows上でUbuntuが動く</h2>
<p>Windows 10の定例アップデートで「Linux on Windows」という機能が追加されました。マジでUbuntuが動きます。以下はMicrosoft Storeにて&#8221;ubuntu&#8221;で検索した結果です。「本当です」と大変強気な姿勢。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-13510 size-large" src="/uploads-archive/2018/01/LinuxOnWindowsStore-1024x462.png" alt="" width="1024" height="462" srcset="/uploads-archive/2018/01/LinuxOnWindowsStore-1024x462.png 1024w, /uploads-archive/2018/01/LinuxOnWindowsStore-300x135.png 300w, /uploads-archive/2018/01/LinuxOnWindowsStore-768x346.png 768w, /uploads-archive/2018/01/LinuxOnWindowsStore-228x103.png 228w, /uploads-archive/2018/01/LinuxOnWindowsStore.png 1320w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
「Linux on Windows」という機能を乱暴にざっくり言うと「Linux向けにコンパイルされた実行ファイルを（Linux on Windowsを経由で）Windows上で直接実行できる」ということです。<br />
細かい導入手順は他の詳しいサイトを見て頂くとして、何が出来て何が出来ないのかをUbuntu on Windowsを例に簡単に列挙していきます。ここで言うUbuntuはWindows上で動くUbuntu on Windowsのことを指します。</p>
<h2>サポートされてないこと</h2>
<p>・Ubuntuをサーバ用途として利用する<br />
Windowsからは見かけ上Ubuntuがアプリになってます。Windowsのサービスとして登録…というのは現段階ではサポートされていないようです。本当はこれを期待していました。<br />
・X-windowを動かす<br />
未サポートと言いながら必要なパッケージを入れれば、以下の通り動作はします。しかし、アテにしていたVisual Stdio Codeは起動しなかったのでこれも残念。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-13515 size-large" src="/uploads-archive/2018/01/ChromeOnUoW-1024x426.png" alt="" width="1024" height="426" srcset="/uploads-archive/2018/01/ChromeOnUoW-1024x426.png 1024w, /uploads-archive/2018/01/ChromeOnUoW-300x125.png 300w, /uploads-archive/2018/01/ChromeOnUoW-768x319.png 768w, /uploads-archive/2018/01/ChromeOnUoW-228x95.png 228w, /uploads-archive/2018/01/ChromeOnUoW.png 1131w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h2>じゃあ何ができるのか</h2>
<p>・Windows-Ubuntu間で標準入出力が透過的に使える<br />
Ubuntu上からは以下のコマンド<br />
<code>motki@k_motoki:/mnt/c/Users/admin$ /mnt/c/Windows/System32/cmd.exe /c dir | grep "DIR"</code><br />
Windows上からは以下のコマンド<br />
<code>C:\Users\admin&gt;dir | bash -c "grep DIR"</code><br />
それぞれ、Windowsのフォルダ内ファイル列挙コマンドの結果をUbuntuのgrepに流し込んでいる処理です。</p>
<p>標準出力をWindows|Linuxで加工したい、って時がごくまれにあったりしたのですが、これまではコンソール画面のテキストをコピペしたり、ファイルに出力したものを利用したり、が一般的でした。他にもLinux側のプログラムからWindows側のファイルを操作できるようになったことで、ファイル検索やファイル内探査、ファイル加工などがやりやすくなったと思います。例えばWindowsのIDEで書いたスクリプトをちょっとLinuxで実行したい、といった時などにも応用できるのではないでしょうか。</p>
<p>このLinux on Windowsはまだまだ開発途上ですが、将来的に大きく化けそうな気がします。</p>


Windows subsystem for Linux

<p><a href="https://atone.be/" target="_blank" rel="noopener">https://atone.be/</a></p>
<p>NP後払いを提供しているネットプロテクションズが2017年の6月から提供している新しい決済「atone」が良さそうなので考察してみた。</p>
<p>&nbsp;</p>
<h2>メリット</h2>
<h4>1. 後払いの良いところを継承</h4>
<p>クレカをもっていない、代引きが利用できない等、ある一定のユーザーのニーズに応えられる</p>
<p>&nbsp;</p>
<h4>2. 安い</h4>
<p>購入者 → 初期、固定費不要。購入月だけ90円が発生</p>
<p>店舗 → クレカ決済よりも安め (1.9％+30円～)</p>
<p>&nbsp;</p>
<h4>3. まとめて請求</h4>
<p>既存の後払いは注文ごとに払込用紙が発行されていたが、atoneは1ヶ月分の注文を合算して支払える。</p>
<p>店舗としては注文毎にかかっていた請求書の費用が軽減される。</p>
<p>&nbsp;</p>
<h4>4. ポイントが溜まる、使える</h4>
<p>これは後述のデメリットの要素も含まれるが、会員登録が必須となったことでポイントが溜まる。そして使うこともできる。</p>
<p>&nbsp;</p>
<h2>デメリット</h2>
<h4>1. 会員登録が必須</h4>
<p>唯一のデメリットとも言えるのが会員登録の必須化。</p>
<p>逆にメリットも多いのだがサービスが浸透するまではデメリットになる可能性もある。</p>
<p>&nbsp;</p>
<h2>越境EC、現地ECで高メリット?</h2>
<p>現時点で正式に実施されるというアナウンスは無いが、勝手に越境、現地での利用を想定してみると、メリットがとても高い気が。</p>
<p>まず、クレカ保有率が少ない国がまだ多く、店舗側からの非クレカ決済のニーズは高い。</p>
<p>更に国によってはローカルの特殊な決済のシェアが高いことが多々あり、atoneはこれに対応できる可能性が高い。</p>
<p>なぜならばatoneは購入者の買う意志を受け付ける箱であり、実際のお金のやりとりはatoneと購入者間でなんでも良いからだ。</p>
<p>atoneが各国のローカルで資金回収ができるようになればこれが可能になる。</p>
<p>あとはかなり先の話になるかもしれないが、後払いという信用情報ありきの決済において、国外のECユーザーの情報が多数集まっているというのはそれだけでとても高い価値になる。</p>
<p>店舗側は国外に販売する際にリスクを下げることができる。</p>
<p>&nbsp;</p>
<p>今後越境・現地EC対応、更には他国展開をしていくようであれば連携が必須となってくるかもしれない</p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2018/03/14

2018/03/14

2018/03/14

2018/03/13

2018/03/05

2018/02/23

2018/02/22

2018/02/21

2018/02/21

2018/02/21

2018/02/20

2018/02/14

2018/01/17

2018/01/17

2018/01/17

2018/01/17

2018/01/17

2018/01/17