<p>私事ですが、結婚して子供が生まれて、郊外に引っ越しました。<br />
片道１時間半くらい電車に乗っています。<br />
電車通勤も３０分位だったらダラダラスマホ見たりして時間が潰せるのですが、さすがにこの長時間だとスマホを眺めるのにも飽きてしまいます。</p>
<p>そんななかリリースされたAmazonアンリミテッドというサービス。<br />
月額９８０円で１２万冊の本が読み放題。しかも３０日は無料。<br />
Kindle Paperwhiteを買ったものの、若干持て余していた僕は、Kindleも活用できそうだと思い飛びつきました。</p>
<p>結論を言うと、これはいいです！！<br />
今の僕のライフスタイだと、これは最高の時間の使いかた、最高の９８０円の使いかただと言えるでしょう。</p>
<p>とういわけで、あまり興味はないと思いますが、僕がこの一ヶ月読んだ本をご紹介。</p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B00D2LMNRM&#038;linkId=023cde1bd964e324d250a3f1222ddf04"></iframe><br />
新ブラックジャックによろしく<br />
旧作は読んだことがあったのですが、これを機に新のほうも全巻読みました。<br />
こういう同僚いたら嫌だなーと思いながら読み進めました。<br />
最後、エピローグ的に５年後が描かれるのですが、元恋人とのやりとりはなんか好きでした。</p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B00DBL024Y&#038;linkId=4095af99cdea8e0f19419867bcc9d614"></iframe><br />
特攻の島<br />
ブラックジャックによろしくと同じ作者です。<br />
こんな戦友といっしょに戦争したくないな－と思いながら読み進めました。<br />
この作者はうざくてアツい男を描かせたらすごいですね。</p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B00FBBHS80&#038;linkId=ceb5ed4cccd45f29eb4b1f38e47aed88"></iframe><br />
さいとうたかを作、サバイバル。<br />
これ面白いですよ！ロビンソン・クルーソー好きな僕としては大のおすすめです。</p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B00G2673XS&#038;linkId=f437ba3815d65467bc129a8b9644b7ef"></iframe><br />
蒼井優とかが好きな男は好きだと思います！</p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B00V5UG9WM&#038;linkId=e9e0957f820a6ee5368f5cc5838642a1"></iframe><br />
漫画ばっかやないか！と言われそうなので、いちおうこういうのも読んでます。<br />
以下、ビジネス書ですが、ビジネス書はけっこうラインナップいいですね。書店でふつうに話題の新刊も揃ってます。</p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B01I8UY7Q6&#038;linkId=e3728d7d1be1bc703e61b9b76eccd780"></iframe></p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B00K1U9MOY&#038;linkId=bdc9315bcf955a20c51a28876b079346"></iframe></p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B00BB7DGI4&#038;linkId=49fbe888dea8b16d238848f97f347cfd"></iframe></p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B01I3589FQ&#038;linkId=e9e45d6f9ee1d50f676a33cb3da319fb"></iframe><br />
これは地味に面白かったです。<br />
亡くなった任天堂社長の岩田さんの高校の同級生の証言を集めたものです。<br />
そんなコンセプトある？と思いながら、バレーボール部のエピソード満載で面白かったです。</p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B0191Z00MW&#038;linkId=b3ec4df6bf6c6be68491887416fb66b7"></iframe></p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B01GPCKJWK&#038;linkId=ba718c7e9355b4e1556a79e90bdbd929"></iframe></p>
<p><iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=hsm3st-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=as_ss_li_til&#038;asins=B008BCCFXY&#038;linkId=216da743e05a6e01f1eba2b954e323bd"></iframe><br />
興味はあるけど書店で手に取るのは恥ずかしい本も人知れず読めます！</p>
<h2>余談</h2>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/08/35fc5bf2cdd19eb88a8407ec642e9d76-1024x617.png" alt="Amazon.co.jp  アンリミテッド" width="1024" height="617" class="aligncenter size-large wp-image-11863" srcset="/uploads-archive/2016/08/35fc5bf2cdd19eb88a8407ec642e9d76-1024x617.png 1024w, /uploads-archive/2016/08/35fc5bf2cdd19eb88a8407ec642e9d76-300x181.png 300w, /uploads-archive/2016/08/35fc5bf2cdd19eb88a8407ec642e9d76-768x463.png 768w, /uploads-archive/2016/08/35fc5bf2cdd19eb88a8407ec642e9d76-228x137.png 228w, /uploads-archive/2016/08/35fc5bf2cdd19eb88a8407ec642e9d76.png 1081w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>


Amazon unlimited　を一ヶ月試してみた結果。

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  Webアプリケーション開発に従事している人でも意外と知らないライセンス</p>
<p>  その主要なものを特徴とともに挙げます</p></div>
<h3>ライセンスの紹介</h3>
<div style="padding-left: 15px;">
<ul>
<li>GNU GPL<br />
<blockquote><p>
        オープンソースで最も有名であろうライセンス</p>
<p>        特徴は<br />
        ・再配布時の著作権表示<br />
        ・無保証<br />
        ・アプリケーションのGPLライセンス継承義務</p>
<p>        上記から「GPLウイルス」とも呼ばれる。</p>
<p>        CMSなどのパッケージでは本体がサーバーにあるため<br />
        「第三者への再配布」にあたらないためソースコードの開示義務は無い。<br />
        ただしバージョン3にて、この部分の改定提案がされている。
      </p></blockquote>
</li>
<li>LGPL<br />
<blockquote><p>
        GPLの規制力が緩和したもの</p>
<p>        ベースはGPLであり、<br />
        動的に読み込む外部モジュールの場合はLGPLの継承義務が無い。
      </p></blockquote>
</li>
<li>MIT, 修正済みBSD<br />
<blockquote><p>
        BSDと並ぶ格段に緩いライセンス</p>
<p>        特徴は<br />
        ・再配布時に著作権表示を残す<br />
        ・無保証である</p>
<p>        上記を守るだけでよい。
      </p></blockquote>
</li>
<li>CC (Creative Commons)<br />
<blockquote><p>
        条ずつのライセンスと違い<br />
        「著作物全般」に使用できるライセンス</p>
<p>        条件は<br />
        ・著作権者のクレジット表記<br />
        のみです。組み合わせは可能。</p>
<p>        その特徴からWebデザイナーに親しみが多いものです。</p>
<p>        ・クレジット表記義務<br />
        ・非営利の場合のみの使用許可<br />
        ・改変の禁止<br />
        ・同一条件の継承義務
        </p></blockquote>
</li>
</ul>
</div>
<h3>余談</h3>
<div style="padding-left: 15px;">
  筆者も自分が関わるときしか調べない程度に知らないですが<br />
  jQueryからRailsのgemまでプラグインの豊富なITにおいて知ってて損は無いかなと思わされます。</p>
<p>  プラグイン制作者やCMSパッケージ制作、ネイティブアプリの組み込みなどに携わっている方は詳しくなっておいた方が良さそうです</p></div>
<h3>関連URL</h3>
<div style="padding-left: 15px;">
https://www.gnu.org/licenses/gpl-faq.ja.html
</div>


ライセンスに関する備忘録

ちょっとかっこいいサイトのMENUを再現してみました

<p>マッチングサイトを制作する場合に情報が多いという点からwordpressという選択肢があると思いますが、マッチングや会員登録の機能を追加するのにはプラグインを駆使してもなかなかの手練れでなければ難しいところです。</p>
<p>そこで他にもっと簡単な方法はないかと探してみると、実はど真ん中のCMSが存在していました、その名もosclass。</p>
<p><a href="https://osclass.org/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11838" src="/uploads-archive/2016/08/1.gif" alt="1" width="640" height="585" /></a></p>
<p>osclassはwordpress同様、オープンソースです。どうやらインドの方が開発したそうです。</p>
<p>なんとデフォルトで会員登録機能やマッチング機能が備わっています。工数を考えるとosclassを使った方が早い！</p>
<p>wordpressに比べるとマイナーなので、それほど情報はありませんがこちらのサイトでosclassのインストール方法や日本語化のプラグインなど詳しく記事を書いてらっしゃるのでご参考下さい。</p>
<p>参考サイト：<a href="https://triz-web.com/toronomado/howto-install-for-osclass/">https://triz-web.com/toronomado/howto-install-for-osclass/</a></p>
<p>管理画面はこんな感じで、どことなくwordpressに似ていて入りやすいかなという印象です。</p>
<p><a href="/uploads-archive/2016/08/3.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11845" src="/uploads-archive/2016/08/3.gif" alt="3" width="640" height="565" /></a></p>
<p>デザインに関してはは、今一つな感じですがデモサイトはこんな感じです。</p>
<p><a href="https://demo.osclass.org/realestate/">不動産のデモサイト</a></p>
<p><a href="https://demo.osclass.org/cars/">車のデモサイト</a></p>


マッチングサイトを作るならosclassで

<p>仕事で常用しているメッセージサービス、コミュニケーションサービスとして、Skype、Facebookメッセンジャー、GoogleHongout、Gmailを2アカウント、chatwork、後は個人用Gmailやアカウント持っているだけとなっているが、slack、Whatsupなど溢れ返っています。</p>
<p>常用しているものは常にchromeのタブでピン留めしているというな状態でした。</p>
<p>そうなるとやはり便利な一元管理ツールを開発する人が現れて、今回は二つ見つけたのでご紹介です。</p>
<h2>オールインワンメッセンジャー</h2>
<p><a href="/uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11825" src="/uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-300x193.png" alt="482fac77735ce46942cd5b958dd508b6" width="300" height="193" srcset="/uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-300x193.png 300w, /uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-768x493.png 768w, /uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-228x146.png 228w, /uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6.png 984w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="https://chrome.google.com/webstore/detail/all-in-one-messenger/lainlkmlgipednloilifbppmhdocjbda" target="_blank">https://chrome.google.com/webstore/detail/all-in-one-messenger/lainlkmlgipednloilifbppmhdocjbda</a></p>
<h2>Franz</h2>
<p><a href="/uploads-archive/2016/08/franz_screenshot-97ec75912b.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11826" src="/uploads-archive/2016/08/franz_screenshot-97ec75912b-300x224.png" alt="franz_screenshot-97ec75912b" width="300" height="224" srcset="/uploads-archive/2016/08/franz_screenshot-97ec75912b-300x224.png 300w, /uploads-archive/2016/08/franz_screenshot-97ec75912b-768x574.png 768w, /uploads-archive/2016/08/franz_screenshot-97ec75912b-1024x765.png 1024w, /uploads-archive/2016/08/franz_screenshot-97ec75912b-228x170.png 228w, /uploads-archive/2016/08/franz_screenshot-97ec75912b.png 1362w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://meetfranz.com/" target="_blank">http://meetfranz.com/</a></p>
<h2>形式</h2>
<h3>オールインワンメッセンジャー</h3>
<p>Chromeアプリ</p>
<h3>Franz</h3>
<p>Windows、Mac、Linuxの独立アプリ</p>
<h2>対応サービス数</h2>
<h3>オールインワンメッセンジャー</h3>
<p><a href="/uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11827" src="/uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640-244x300.png" alt="3f42955c0ffef951da2d54b508745640" width="244" height="300" srcset="/uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640-244x300.png 244w, /uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640-228x280.png 228w, /uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640.png 702w" sizes="(max-width: 244px) 100vw, 244px" /></a></p>
<p>31サービス</p>
<h3>Franz</h3>
<p><a href="/uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11828" src="/uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-300x216.png" alt="2fea6a28e87c7d445f684844992ef46a" width="300" height="216" srcset="/uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-300x216.png 300w, /uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-768x552.png 768w, /uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-228x164.png 228w, /uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a.png 964w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>23サービス</p>
<h2>UI</h2>
<p><a href="/uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11829" src="/uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-300x177.png" alt="d908fb736282b278f1a0fcde7082a195" width="300" height="177" srcset="/uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-300x177.png 300w, /uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-768x452.png 768w, /uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-1024x603.png 1024w, /uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-228x134.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>左がオールインワンメッセンジャーで右がFranzです。</p>
<p>Franzは通知のバッチがついていますが、それにしても似てますね。</p>
<p><a href="/uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11830" src="/uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-300x177.png" alt="aba302fa363e55c926d38d5f86b46515" width="300" height="177" srcset="/uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-300x177.png 300w, /uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-768x453.png 768w, /uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-1024x603.png 1024w, /uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-228x134.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>chatworkを開いた画面ですが、基本的にはブラウザ版を読み込んでいるので差はありません。高さもほぼ一緒です。</p>
<h2>まとめ</h2>
<p>UIもコンセプトもほぼ同一に感じますが、Chromeアプリか独立アプリかは好みでの判断になると思います。Chromeアプリであれば、同期している他のブラウザでもインストールの手間が省けるといった利点も考えられます。</p>
<p>どちらも一元管理が出来、主要なサービスはほぼカバーしています。</p>
<p>対応サービスは多ければいいというものでもないと思いますが、日本ではメジャーなLineも追加されるとより便利になりますね。</p>


さまざまなメッセージングサービスをまとめるツール

<p>自分が知らなかっただけかもしれないが、CLO (Card linked offer)という新たなクーポンの手法が新聞に載っており、興味深かったので調べてみた。<br />
CLOとは、予めクレジットカード所有者が自分のアカウントとクーポン情報を紐付けておけば、店舗でクレジットカードを使うだけで割引等クーポンが適用されるという仕組みで、日本語では自動割引決済と呼ばれているそうだ。</p>
<p>簡単な流れは以下のような感じだ。</p>
<p>1. メールやCLOベンダー、カードブランドサイト等からクーポンの情報を入手する。<br />
(お会計10%offなど)</p>
<p>2. クレジットカード認証でクーポン利用を申請<br />
(ログインやクレジットカード情報入力など)</p>
<p>3. 店舗で決済するだけ<br />
(クーポン券の提示などは不要)<br />
利用者は上述のとおり、クーポンの持参や提示が不要なのがメリット。店舗側はクレジットカードの利用歴からターゲットを抽出して出稿することができるのと、ただ決済するだけなので現場スタッフの教育が不要というメリットがある。<br />
クレジットカード会社も利用促進と、特定の顧客・分野での決済を意図的に増やせるというメリットがあるとのことだ。</p>
<p>アメリカでは<br />
&#8211; 2014年のCLOを使った販促費は47億米ドル<br />
&#8211; 年間2割の成長<br />
&#8211; 直近1年でCLOを利用した決済が2倍以上になった企業が43%<br />
という感じで成長しており、特にアメックスとマスターカードが力を入れているとのことだ。</p>
<p>一方日本では、実は2014年ごろから導入の動きはあったようだが、うまく行かなかったようだ。<br />
自分は知らなかったので予想というか個人的に調べた結果だが、JCBがIMA-RECOMMEND！というサービスを試験的に公開し予定通り終了、その後特に動き無し、という印象を受けた。</p>
<p>自分は個人的にすごくおもしろい仕組みだと思うので、マーケティングがうまいベンチャー企業など出てくれば一気に流行るのではないかと期待したい。</p>


新しいクーポンの仕組み「CLO」

<p>WebGLを扱いやすくするライブラリであるThree.jsには、<br />
Three.js本体以外に、ライブラリをさらに補助するために利用できるJSが多く含まれています。</p>
<p>今回はその中でも、マウスやタッチでの操作によるカメラの操作を容易にする、<br />
OrbitControl.jsの導入方法についてご紹介いたします。</p>
<p>↓参考にさせていただいたサイト<br />
<a class="link" href="http://gupuru.hatenablog.jp/entry/2013/12/18/223629" target="_blank">Three.js OrbitControls.js &#8211; Three.jsを使って、作ってみた</a></p>
<p>↓OrbitControlを使って作ってみたもの<br />
<a class="demo" href="/demo/ninomiya/115/">DEMO</a></p>
<h2>方法</h2>
<p>Three.jsを<a href="http://threejs.org/" target="_blank">ダウンロード</a>して、<br />
以下のファイルをコピーして、サイトのJSを配置するディレクトリに置く。</p>
<p>three.js-master/build/three.min.js<br />
three.js-master/examples/js/controls/OrbitControls.js</p>
<h3>HTMLで読み込む</h3>
<p></p>

		<div id="crayon-6495402643236094293399" 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;script src="js/three.min.js"&gt;&lt;/script&gt;
&lt;script src="js/OrbitControls.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-6495402643236094293399-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402643236094293399-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-6495402643236094293399-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/three.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-6495402643236094293399-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/OrbitControls.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

		<div id="crayon-649540264323a044722614" 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 id="canvas-frame"&gt;&lt;/div&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-649540264323a044722614-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-649540264323a044722614-1"><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-i">id</span>=<span class="crayon-s">"canvas-frame"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h3>Three.jsを記述して、cameraオブジェクトにOrbitControlを適用する。</h3>
<p></p>

		<div id="crayon-649540264323b661828816" 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">JavaScript</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;">
camera = new THREE.PerspectiveCamera( fov, wrapperElm.clientWidth / wrapperElm.clientHeight, 1, 1000 );
camera.up.x = 0; camera.up.y = 0; camera.up.z = -1;
camera.position.set(0, 150, 400);
controls = new THREE.OrbitControls(camera);</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-649540264323b661828816-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323b661828816-2">2</div><div class="crayon-num" data-line="crayon-649540264323b661828816-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323b661828816-4">4</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-649540264323b661828816-1"><span class="crayon-i">camera</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-i">THREE</span><span class="crayon-sy">.</span><span class="crayon-e">PerspectiveCamera</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">fov</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">wrapperElm</span><span class="crayon-sy">.</span><span class="crayon-i">clientWidth</span><span class="crayon-h"> </span>/<span class="crayon-h"> </span><span class="crayon-i">wrapperElm</span><span class="crayon-sy">.</span><span class="crayon-i">clientHeight</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">1000</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264323b661828816-2"><span class="crayon-i">camera</span><span class="crayon-sy">.</span><span class="crayon-i">up</span><span class="crayon-sy">.</span><span class="crayon-i">x</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">camera</span><span class="crayon-sy">.</span><span class="crayon-i">up</span><span class="crayon-sy">.</span><span class="crayon-i">y</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">camera</span><span class="crayon-sy">.</span><span class="crayon-i">up</span><span class="crayon-sy">.</span><span class="crayon-i">z</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span>-<span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264323b661828816-3"><span class="crayon-i">camera</span><span class="crayon-sy">.</span><span class="crayon-i">position</span><span class="crayon-sy">.</span><span class="crayon-e">set</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-cn">150</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">400</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264323b661828816-4"><span class="crayon-i">controls</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-i">THREE</span><span class="crayon-sy">.</span><span class="crayon-e">OrbitControls</span><span class="crayon-sy">(</span><span class="crayon-i">camera</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>レンダリングをする箇所で、controlのupdateを行う。</h3>
<p></p>

		<div id="crayon-649540264323c859716970" 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">JavaScript</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;">
    function animate() {
        requestAnimationFrame( animate );
        render();
    }
    function render() {
        controls.update();
　　　　　　　　・・・
        renderer.render( scene, camera );
    }</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-649540264323c859716970-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323c859716970-2">2</div><div class="crayon-num" data-line="crayon-649540264323c859716970-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323c859716970-4">4</div><div class="crayon-num" data-line="crayon-649540264323c859716970-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323c859716970-6">6</div><div class="crayon-num" data-line="crayon-649540264323c859716970-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323c859716970-8">8</div><div class="crayon-num" data-line="crayon-649540264323c859716970-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-649540264323c859716970-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">animate</span><span class="crayon-sy">(</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-649540264323c859716970-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">requestAnimationFrame</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">animate</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264323c859716970-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">render</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-649540264323c859716970-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540264323c859716970-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">render</span><span class="crayon-sy">(</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-649540264323c859716970-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">controls</span><span class="crayon-sy">.</span><span class="crayon-e">update</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264323c859716970-7">　　　　　　　　・・・</div><div class="crayon-line crayon-striped-line" id="crayon-649540264323c859716970-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">renderer</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">scene</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">camera</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264323c859716970-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>

Three.jsのOrbitControl.jsを使ってマウスやタッチで簡単にカメラ操作

<h2>越境ECアプリbolomeの実力！</h2>
<p>日本と同一価格 ＋ フラッシュセール ＋ 実況ライブ中継</p>
<p>を売りにした越境ECアプリのbolome。</p>
<p>「越境ECの唯一の成功モデルだ」という人もいるくらいで、すごいすごいとは聞いていましたが先日初めてお昼の番組を最初から最後まで視聴しました。</p>
<h2>そもそも、bolomeとは</h2>
<p><a href="http://thebridge.jp/2015/09/conversation-with-bolome-co-founder-yuya-mizuno" target="_blank">こちらの記事</a>に詳しいのですが、以下のような３つの売りがあるアプリ型の越境ECサービスです。</p>
<h3>日本と同一価格</h3>
<p>日本の商品を中国にいながら買う方法としては、C2Cのタオバオなどがありますが、中国の人が不満なのは「代理購入者の手数料が乗っているから、日本での売価より２０～３０％高いこと」。<br />
bolome では日本の商品を、日本の問屋から卸売価格で購入して、日本の売価と同じ価格で、中国人にオンラインで販売します。</p>
<h3>フラッシュセール</h3>
<h3>実況ライブ中継</h3>
<p>商品の販売は、中国の人の昼食休憩時間にあたる12:30〜13:00 にフラッシュセールで行っており、日本の小売店の店頭から中国人レポーターが双方向チャット付きの実況中継動画で商品を紹介しています。<br />
この時間帯に、全売上の25%が集中しているそうです。</p>
<h2>中継を観てみた</h2>
<p>12：30から生放送なので、それまではこんな画面です。<br />
今日は鳥取県のかばんメーカーさんの商品が紹介されるようです。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/08/IMG_03971-576x1024.png" alt="IMG_0397[1]" width="576" height="1024" class="aligncenter size-large wp-image-11794" srcset="/uploads-archive/2016/08/IMG_03971-576x1024.png 576w, /uploads-archive/2016/08/IMG_03971-169x300.png 169w, /uploads-archive/2016/08/IMG_03971-228x406.png 228w, /uploads-archive/2016/08/IMG_03971.png 750w" sizes="(max-width: 576px) 100vw, 576px" /></p>
<p>番組スタート！</p>
<p>中国人美女（真ん中）と、お笑いっぽいポジションな中国人女性（右）が登場！<br />
店員の女性（左）とトークを始めます。<br />
真ん中の美女は日本語もできるので、店員さんと日本語で話しながら、随時通訳していきます。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2016/08/IMG_0399-576x1024.png" alt="IMG_0399" width="576" height="1024" class="aligncenter size-large wp-image-11796" /></p>
<p>まず紹介されたのは、名探偵コナンとのコラボ商品。<br />
なぜコラボしているかというと、作者の青山剛昌が鳥取県出身だからだそうです。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/08/IMG_0402-576x1024.png" alt="IMG_0402" width="576" height="1024" class="aligncenter size-large wp-image-11797" srcset="/uploads-archive/2016/08/IMG_0402-576x1024.png 576w, /uploads-archive/2016/08/IMG_0402-169x300.png 169w, /uploads-archive/2016/08/IMG_0402-228x406.png 228w, /uploads-archive/2016/08/IMG_0402.png 750w" sizes="(max-width: 576px) 100vw, 576px" /></p>
<p>次の商品は、ゲゲゲの鬼太郎とのコラボ商品。<br />
コラボしまくりますねぇ。<br />
言わずもがな、鳥取は水木しげる先生の出身地だからですね。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/08/IMG_0404-576x1024.png" alt="IMG_0404" width="576" height="1024" class="aligncenter size-large wp-image-11798" srcset="/uploads-archive/2016/08/IMG_0404-576x1024.png 576w, /uploads-archive/2016/08/IMG_0404-169x300.png 169w, /uploads-archive/2016/08/IMG_0404-228x406.png 228w, /uploads-archive/2016/08/IMG_0404.png 750w" sizes="(max-width: 576px) 100vw, 576px" /></p>
<p>目玉オヤジモデルのバッグ。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2016/08/IMG_0405-576x1024.png" alt="IMG_0405" width="576" height="1024" class="aligncenter size-large wp-image-11799" srcset="/uploads-archive/2016/08/IMG_0405-576x1024.png 576w, /uploads-archive/2016/08/IMG_0405-169x300.png 169w, /uploads-archive/2016/08/IMG_0405-228x406.png 228w, /uploads-archive/2016/08/IMG_0405.png 750w" sizes="(max-width: 576px) 100vw, 576px" /></p>
<p>鬼太郎のちゃんちゃんこモデル。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2016/08/IMG_0406-576x1024.png" alt="IMG_0406" width="576" height="1024" class="aligncenter size-large wp-image-11800" srcset="/uploads-archive/2016/08/IMG_0406-576x1024.png 576w, /uploads-archive/2016/08/IMG_0406-169x300.png 169w, /uploads-archive/2016/08/IMG_0406-228x406.png 228w, /uploads-archive/2016/08/IMG_0406.png 750w" sizes="(max-width: 576px) 100vw, 576px" /></p>
<p>もちろん漫画とのコラボモデルだけでなく、スタイリッシュなデザインのものもあります。<br />
そして、このカバンの一番の特徴は、折り紙のようにかたちを自由に変形できるところ。<br />
このような特徴は、ライブ実況だとよく伝わっていいですね！<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2016/08/IMG_0409-576x1024.png" alt="IMG_0409" width="576" height="1024" class="aligncenter size-large wp-image-11802" srcset="/uploads-archive/2016/08/IMG_0409-576x1024.png 576w, /uploads-archive/2016/08/IMG_0409-169x300.png 169w, /uploads-archive/2016/08/IMG_0409-228x406.png 228w, /uploads-archive/2016/08/IMG_0409.png 750w" sizes="(max-width: 576px) 100vw, 576px" /></p>
<p>美女とお笑い担当の女性以外にも、男性も登場して、ちょっとしたお笑い番組のようなノリです。<br />
美女がバッグを背負ってポーズを取った後に、お笑い女性がポーズを取って笑いを取る…ようなほのぼのしたノリで、僕もだらしなく笑ってしまいました。<br />
日本の通販番組のような作りこまれた構成、演技はなく、素人が即興で作っているような雰囲気です。<br />
実際スマホで撮影しているようです。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/08/IMG_0410-576x1024.png" alt="IMG_0410" width="576" height="1024" class="aligncenter size-large wp-image-11803" srcset="/uploads-archive/2016/08/IMG_0410-576x1024.png 576w, /uploads-archive/2016/08/IMG_0410-169x300.png 169w, /uploads-archive/2016/08/IMG_0410-228x406.png 228w, /uploads-archive/2016/08/IMG_0410.png 750w" sizes="(max-width: 576px) 100vw, 576px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/08/IMG_0414-576x1024.png" alt="IMG_0414" width="576" height="1024" class="aligncenter size-large wp-image-11804" srcset="/uploads-archive/2016/08/IMG_0414-576x1024.png 576w, /uploads-archive/2016/08/IMG_0414-169x300.png 169w, /uploads-archive/2016/08/IMG_0414-228x406.png 228w, /uploads-archive/2016/08/IMG_0414.png 750w" sizes="(max-width: 576px) 100vw, 576px" /></p>
<h2>効果の程は？</h2>
<p>どれほど売れたのかは不明ですが、bolomeで商品を紹介してもらったというだけで、日経地方版で記事になっていました。</p>
<p><a href="/uploads-archive/2016/08/575be9234fc6a921a08132fb62833758.pdf" target="_blank">日経中国経済面20160809</a></p>


越境ECアプリbolomeの効果を目の当たりにしました

<p>CI（circle integration： 継続的インテグレーション）を図る上で、昨今ではCircleCi、Jenkins、Travis Ciなどが存在するが、<br />
合わせてRuby On RailsではRSpecを使用している人が多い。</p>
<p>導入方法としては以下の通り。</p>
<h2>導入</h2>
<p></p>

		<div id="crayon-6495402643029348902993" 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;">
group :development, :test do
  gem 'rspec-rails', '~&gt; 3.5'
end</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-6495402643029348902993-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402643029348902993-2">2</div><div class="crayon-num" data-line="crayon-6495402643029348902993-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-6495402643029348902993-1"><span class="crayon-i">group</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">development</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-e">test </span><span class="crayon-st">do</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402643029348902993-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">gem</span><span class="crayon-h"> </span><span class="crayon-s">'rspec-rails'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'~&gt; 3.5'</span></div><div class="crayon-line" id="crayon-6495402643029348902993-3"><span class="crayon-st">end</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>Gemfileに上記を追加し、bundle installを実施する。</p>

		<div id="crayon-649540264302d589884612" 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;">
bundle install</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-649540264302d589884612-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-649540264302d589884612-1"><span class="crayon-e">bundle </span><span class="crayon-i">install</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>そのあと、下記によりconfigファイルを生成する。</p>

		<div id="crayon-649540264302e876660649" 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;">
rails generate rspec:install</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-649540264302e876660649-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-649540264302e876660649-1"><span class="crayon-e">rails </span><span class="crayon-e">generate </span><span class="crayon-i">rspec</span><span class="crayon-sy">:</span><span class="crayon-i">install</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>以上で、導入は完了する。</p>
<p>ここで、</p>

		<div id="crayon-649540264302f897744725" 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;">
rails g rspec:model user</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-649540264302f897744725-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-649540264302f897744725-1"><span class="crayon-i">rails</span><span class="crayon-h"> </span><span class="crayon-i">g</span><span class="crayon-h"> </span><span class="crayon-i">rspec</span><span class="crayon-sy">:</span><span class="crayon-e">model </span><span class="crayon-i">user</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を実行すれば、<br />
spec/models/user_spec.rb<br />
のようなファイルが生成されるので、ここにテストコードを書いていく。</p>
<p>RSpecのテストコードの書き方は独自のものが存在する。<br />
書き方は下記がわかりやすい。<br />
<a href="http://qiita.com/jnchito/items/3a590480ee291a70027c">RSpec</a><br />
<a href="https://leanpub.com/everydayrailsrspec-jp/read#leanpub-auto-section-15">Everyday Rails &#8211; RSpecによるRailsテスト入門</a></p>
<h2>参考</h2>
<p><a href="https://github.com/rspec/rspec-rails">GitHub &#8211; rspec/rspec-rails: RSpec for Rails-3+</a></p>

Ruby On RailsにRSpecを導入する

<p>ECサイトにおける分析においていくつかKPIを定めるべく、紹介致します。</p>
<p>Googleアナリティクスで取れる指標はアナリティクスで見ればいいという考え方で、アナリティクスで取りづらい（もしかしたら取る方法はあるのかも）のは顧客の購買データに紐づく指標かと思います。</p>
<p>今回は、弊社が運営する<a href="https://catseye.jp/">カラコン通販サイト</a>で必要と思われるKPIをシェアしたいと思います。</p>
<p>これがメディアであれば、滞在時間、離脱ページ、平均PVといったところがKPIになると思います。</p>
<h2>KPIについて</h2>
<p><strong>Key Performance Indicator</strong>の頭文字で日本語に訳すと重要評価指標といったところだと思います。</p>
<p>これから紹介するいくつかのKPIとにらめっこしながら、何をやらなくてはいけないのか何をやるべきなのかというところを優先順位をつけて実稼働に落とし込んでいくことになります。</p>
<p>このKPI自体もこれというところはなく、いくつも存在するマーケティングフレームワークの指標や数字を用いて、KPIを設定するというところから始めます。</p>
<h2>LTV</h2>
<p>ライフタイムバリュー、顧客生涯価値という</p>
<p>LTV＝顧客当たりの売上×利益率×取引期間</p>
<p>の計算式で成り立ち、特にリピート商材ではこのLTVを基準にして、広告やその他顧客獲得コストを算出する。</p>
<p>つまりLTVが1万円を超えていれば、獲得コストを1万円と見積もっても利益が出る計算となる。</p>
<h2>属性別客単価</h2>
<p>客単価＝売上/顧客数</p>
<p>後述するGoogleアナリティクスeコマースタグでも取得では出来るが、ECサイト側でしか持っていない会員情報との掛け合わせで客単価を算出出来るとよい。</p>
<p>例えば、生年月日から年代を割り出して20代女性の客単価を抽出してマーケティングの対象範囲にする。</p>
<h2>RFM</h2>
<ul class="ul01">
<li>Recency　最終購買日</li>
<li>Frequency　購買頻度</li>
<li>Monetary　購買金額</li>
</ul>
<p>上記の値を年間を通して算出しつつ、メルマガやDMなどのプッシュ型マーケティングと組み合わせられると効果を発揮出来ます。</p>
<p>例えば、前回5000円以上購入して一ヶ月を経過した顧客へのアップセルのアプローチ。</p>
<h2>Googleアナリティクスで取れるもの</h2>
<h3>CVR</h3>
<p>コンバージョンレート＝購入数/アクセス数</p>
<h2>Googleアナリティクスでeコマースタグを使って取れるもの</h2>
<h3>平均注文額</h3>
<p>1注文当たりの購入金額</p>
<h3>購入までの間隔</h3>
<p>初回のセッションから購入までに何日経過しているか。</p>


リピートECサイトにおけるKPI

Railsで階層構造を簡単に作ってみる

<p>LaunchCartは越境ECシステムなので当然多言語テンプレートに対応しているのだが、IPアドレスによる自動の言語切替をするような機能は標準では搭載していない。</p>
<p>内部的にIPアドレスを定義しておけば当然できるのだが、メンテナンスが必要となってしまうため個人的にあまり好きなやり方ではない。</p>
<p>&nbsp;</p>
<p>多少お金がかかっても良いので気軽に扱えて信頼性が高いサービスが無いかと思い調べた結果良さそうだったのがこちら。</p>
<p><a href="https://ipinfo.io/" target="_blank">https://ipinfo.io/</a></p>
<p>&nbsp;</p>

		<div id="crayon-6495402642b79940082640" 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;">
curl ipinfo.io</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-6495402642b79940082640-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-6495402642b79940082640-1"><span class="crayon-e">curl </span><span class="crayon-i">ipinfo</span><span class="crayon-sy">.</span><span class="crayon-i">io</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>これだけでアクセス元のIPアドレスからの情報を得られる。</p>
<p>&nbsp;</p>
<p>以下はjavascriptで連携した例。</p>
<p><a class="demo" href="/demo/hoshino/71/" target="_blank">デモ</a></p>
<p>&nbsp;</p>

		<div id="crayon-6495402642b7d203198241" 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;">
$(function() {
    $.getJSON('http://ipinfo.io', function(data){
        if (data) {
            data = eval(data);
            $("dd:eq(0)").html(data.country);
            $("dd:eq(1)").html(data.city);
            $("dd:eq(2)").html(data.ip);
        }
    })
});</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-6495402642b7d203198241-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402642b7d203198241-2">2</div><div class="crayon-num" data-line="crayon-6495402642b7d203198241-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402642b7d203198241-4">4</div><div class="crayon-num" data-line="crayon-6495402642b7d203198241-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402642b7d203198241-6">6</div><div class="crayon-num" data-line="crayon-6495402642b7d203198241-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402642b7d203198241-8">8</div><div class="crayon-num" data-line="crayon-6495402642b7d203198241-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402642b7d203198241-10">10</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-6495402642b7d203198241-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</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-6495402642b7d203198241-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-e">getJSON</span><span class="crayon-sy">(</span><span class="crayon-s">'http://ipinfo.io'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-i">data</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495402642b7d203198241-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">data</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-6495402642b7d203198241-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">data</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">eval</span><span class="crayon-sy">(</span><span class="crayon-i">data</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495402642b7d203198241-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"dd:eq(0)"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-i">data</span><span class="crayon-sy">.</span><span class="crayon-i">country</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402642b7d203198241-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"dd:eq(1)"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-i">data</span><span class="crayon-sy">.</span><span class="crayon-i">city</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495402642b7d203198241-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"dd:eq(2)"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-i">data</span><span class="crayon-sy">.</span><span class="crayon-i">ip</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402642b7d203198241-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-6495402642b7d203198241-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402642b7d203198241-10"><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>&nbsp;</p>
<p>当社のように1テンプレートで言語を出し分けている場合はページのロード後にajaxで言語を入れ替えることもできるため、選択肢が広がってよさそうだ。</p>
<p>価格も1日320,000リクエストで$400でバカ高くは無い</p>

IPアドレスから国を判断する方法

<h2>アプリ化するメリット</h2>
<p>ECサイトに限らずですが、webサイトのアプリ化にはいろんなメリットがあります。</p>
<h4>サイトをリピートして利用してもらえる</h4>
<p>ブラウザを通してサイトにたどり着くというルートに比べると、アプリの場合は立ち上げるだけでサイトにアクセスできて、手順が少ない（遷移回数が少い）のでユーザビリティが高くリピート率が高くなります。</p>
<p>ブラウザで検索してからという事になると、同じ検索結果が表示されず「あれ？あのサイトが見当たらない」という具合にユーザーが辿りつけない場合も考えられますが、アプリならスマホのホーム画面にあるわけですから言わずもがなです。</p>
<p>特にECサイトにとってはスマホからのアクセスが約7割、売上が約5割（2015年のデータ 参照：<a href="http://ecclab.empowershop.co.jp/archives/4411">http://ecclab.empowershop.co.jp/archives/4411</a>）という事もあり ユーザーのリピート率向上という意味で大きなメリットがあります。</p>
<h4>ユーザーに情報をプッシュ配信できる</h4>
<p>これもユーザーのリピート利用率向上につながるのですが、アプリをダウンロードする際に同意してもらえるようにしておけば、新商品やセールの情報、配送に関する案内などをプッシュ配信できます。</p>
<p>大手のECモールでショップを展開している場合はメールという事になりますが、メールの開封率はかなり低く、人気ショップのメルマガですら良くて1割ほどの開封率、そこからのクリック率はさらに1割がいいところ、購入までいくのはほんのわずかという事になります。</p>
<p>支払に関する内容や配送状況などのメールについても、キャリアメール（@docomo、@ezweb、@softbank）を利用しているユーザーはPCからのメールを拒否設定している場合が多く、開封どころか届いてすらいない場合があります。拒否しているユーザーの中にはリテラシーが低い人も多く、「拒否した覚えがないのになぜメールが届かない」というクレームに繋がることがしばしばです。※@ezwebはデフォルトで拒否設定になっているそうです。</p>
<p>最近増えてきたLINE@での情報配信もありますが、こちらは「友だち」を増やす事に一苦労します。ECサイトで商品を購入したからと言って自動的に「友だち」になるわけではないので、メールアドレスと違いショップを利用してくれたユーザー全てを配信対象にはできません。LINE@は「友だち」に対して情報をリーチする事にかけては、メールのより効率が良いのですが、その「友だち」を獲得するのにかなりコストがかかってしまいます。</p>
<p>アプリの場合はダウンロードさえしてもらえれば、情報をプッシュ配信でホーム画面に表示できます。「LINE@の友だち追加する」と「アプリをダウンロードする」はユーザーから見たときのハードルの高さにさほど違いはないと思います。</p>
<h2>アプリをダウンロードしてもらうためのハードル</h2>
<p>もちろんですがアプリをダウンロードしたくなる理由が必要です。ECショップ自体を気に入ってもらう事は絶対条件として、その他にユーザーにとって何等かのメリットが無ければダウンロードしてもらえないでしょう。</p>
<p>楽天市場やYahoo!ショッピングなど大きなECモールもアプリをリリースしていますが、アプリから購入するとポイント倍率が高くなるなどのキャンペーンを行う事でダウンロードを促しています。</p>
<p>アプリをダウンロードしてもらうには、単純なところで以下のような方法があります。</p>
<p>①ポイント率に差をつける</p>
<p>②商品価格に差をつける</p>
<p>③再送のスピードに差をつける</p>
<p>④ショッピング以外のコンテンツを展開する</p>
<p>最も効果があるのはおそらく②の価格自体が安くなるという方法だと思いますが、扱っている商品によっては単価がもともと安いために価格を下げられなかったりもするので、リリース時の一時的なキャンペーンとして行うのが最善かもしれません。</p>
<h2>アプリ化に適した商材</h2>
<p>サイトをアプリ化するメリットをいくつか上げましたが、そもそもECサイトの場合は扱っている商材によって向き不向きがあります。</p>
<p>日用品や消耗品などリピートして利用・購入してもらえる商材（リピート商材）の場合はいいのですが、リピートされない商材については難しいところです。</p>
<p>ユーザーとしては一回の買い物のためにアプリをダウンロードするという煩わしさがありますし、ダウンロードするハードルを下げるには「価格が安くなる」くらいしか響かないでしょう。ポイントが高いと言われても「もう利用しないからどうでもいい」という気持ちになるはずです。</p>
<p>ショップ側がどんなにリピート率を上げたいと思ってアプリ化しても、そもそも商材がリピート商材でなければ効果は薄いと思います。</p>
<h2>アプリ化する方法</h2>
<h4>webサイトをそのままアプリにするサービスを利用する</h4>
<p>サイトをアプリで改めて構築するとなると、それなりの時間とコストがかかってしまいます。という事で既存のwebサイトをそのままアプリにできるサービスを調べてました。</p>
<p>探してみるとwordpressをアプリにするというサービスはかなり出てきます。しかしECサイトはwordpressをベースしている物だけではないのでもっと汎用性の高いサービスも探してみるといくつかありました。</p>
<p><a href="https://ja.monaca.io/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11759" src="/uploads-archive/2016/08/1-2.jpg" alt="1" width="640" height="465" srcset="/uploads-archive/2016/08/1-2.jpg 640w, /uploads-archive/2016/08/1-2-300x218.jpg 300w, /uploads-archive/2016/08/1-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>小規模なら無料で利用できるプランもあります</p>
<p>そのままアクセスするだけのアプリであればすぐにできてしまうようです。詳しい事はこちらの記事を参考にしてみてください。<a href="http://smart-phone.783783783.com/2016/03/09/monaca-website-app/">http://smart-phone.783783783.com/2016/03/09/monaca-website-app/</a></p>
<p><a href="https://gonative.io/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11760" src="/uploads-archive/2016/08/2-2.jpg" alt="2" width="640" height="543" srcset="/uploads-archive/2016/08/2-2.jpg 640w, /uploads-archive/2016/08/2-2-300x255.jpg 300w, /uploads-archive/2016/08/2-2-228x193.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>プラントしては590ドルからで、100％pple App Store と Google Playに登録できると事を保証できるサービスとの事です。</p>
<p><a href="/admin/wp-contehttps://joren.io/ja/index.htmlnt/uploads/2016/08/3-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11761" src="/uploads-archive/2016/08/3-1.jpg" alt="3" width="640" height="476" srcset="/uploads-archive/2016/08/3-1.jpg 640w, /uploads-archive/2016/08/3-1-300x223.jpg 300w, /uploads-archive/2016/08/3-1-228x170.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>ノンプログラミングでサイトをアプリ化できてプッシュ配信も可能というだそうですが、現時点ではまだ事前登録のみでリリースはまだ行われていません。</p>
<p><a href="/uploads-archive/2016/08/4-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11763" src="/uploads-archive/2016/08/4-1.jpg" alt="4" width="640" height="308" srcset="/uploads-archive/2016/08/4-1.jpg 640w, /uploads-archive/2016/08/4-1-300x144.jpg 300w, /uploads-archive/2016/08/4-1-228x110.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>Androidアプリに限定されてしまいますが、ノンプログラムでサイトをアプリ化できます。無料で利用可能です。</p>
<h4>アプリを改めて構築する</h4>
<p>アプリ制作会社によってはECに特化したアプリを作ってくれるところもいくつかあります。</p>
<p><a href="http://applile.jp/#a02"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11764" src="/uploads-archive/2016/08/5-2.jpg" alt="5" width="640" height="307" srcset="/uploads-archive/2016/08/5-2.jpg 640w, /uploads-archive/2016/08/5-2-300x144.jpg 300w, /uploads-archive/2016/08/5-2-228x109.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>EC向けに特化しているようで、日時を指定したプッシュ通知やカゴ落ちユーザーを対象にしたプッシュもできます。クーポン機能やユーザーからのアンケートもできるそうです。</p>
<p>初期費用が50000円で月々980円から利用できますが、EC向けの機能を利用する場合は月額5000円にプランになるようです。</p>
<p><a href="https://yapp.li/category/ec.html"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11766" src="/uploads-archive/2016/08/6-1.jpg" alt="6" width="640" height="303" srcset="/uploads-archive/2016/08/6-1.jpg 640w, /uploads-archive/2016/08/6-1-300x142.jpg 300w, /uploads-archive/2016/08/6-1-228x108.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>こちらはCMSになっていて自分でドラッグ＆ドロップで機能を並べてアプリを作成できます。ECに適した機能も充実しているようです。</p>
<p>価格については詳しい記載を見つけられませんでしたが、yappliについて書いているブログによると月額9800円とありました。</p>


ECサイトをアプリ化するメリットとサービス

<p>画像のレタッチでコントラストを強くする際に気を付けないと「白とび」や「黒潰れ」が起こってしまいます。つまり諧調が失われてしまうわけです。意図してやっているなら問題はないのですが、そうでない場合は確認しながら慎重に作業をする必要があります。</p>
<p>じゃあどうやって確認するのかという事ですがちゃんと方法があります。</p>
<p>photoshopに限らず画像のレタッチをする際には「レベル補正」または「トーンカーブ」を使う方が多いようです。今回ご紹介するのはこの２つの調整レイヤー（調整レイヤーでなくても直接修正ができます。）を使う場合の諧調つぶれを確認する方法です。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11731" src="/uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s.jpg" alt="c47d4b4d8e9ab61cd57208b1eced3f1f_s" width="640" height="424" srcset="/uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s.jpg 640w, /uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s-300x199.jpg 300w, /uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>レベル補正でコントラストを上げてみます。</p>
<p><a href="/uploads-archive/2016/08/1-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11732" src="/uploads-archive/2016/08/1-1.jpg" alt="1" width="310" height="334" srcset="/uploads-archive/2016/08/1-1.jpg 310w, /uploads-archive/2016/08/1-1-278x300.jpg 278w, /uploads-archive/2016/08/1-1-228x246.jpg 228w" sizes="(max-width: 310px) 100vw, 310px" /></a></p>
<p><a href="/uploads-archive/2016/08/2-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11733" src="/uploads-archive/2016/08/2-1.jpg" alt="2" width="640" height="424" srcset="/uploads-archive/2016/08/2-1.jpg 640w, /uploads-archive/2016/08/2-1-300x199.jpg 300w, /uploads-archive/2016/08/2-1-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>コントラストが強くなって若干ですが夏らしさが増しました。しかし、赤い矢印で示した白と黒のスライダーをAltキーを押しながらクリックしてみると、、、</p>
<p><a href="/uploads-archive/2016/08/3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11734" src="/uploads-archive/2016/08/3.jpg" alt="3" width="310" height="334" srcset="/uploads-archive/2016/08/3.jpg 310w, /uploads-archive/2016/08/3-278x300.jpg 278w, /uploads-archive/2016/08/3-228x246.jpg 228w" sizes="(max-width: 310px) 100vw, 310px" /></a></p>
<p>Altを押しながら白のスライダーをクリックした時（白い部分が白とび）</p>
<p><a href="/uploads-archive/2016/08/4.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11736" src="/uploads-archive/2016/08/4.jpg" alt="4" width="640" height="417" srcset="/uploads-archive/2016/08/4.jpg 640w, /uploads-archive/2016/08/4-300x195.jpg 300w, /uploads-archive/2016/08/4-228x149.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>Altを押しながら黒のスライダーをクリックした時（黒い部分が黒潰れ）</p>
<p><a href="/uploads-archive/2016/08/5-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11738" src="/uploads-archive/2016/08/5-1.jpg" alt="5" width="634" height="414" srcset="/uploads-archive/2016/08/5-1.jpg 634w, /uploads-archive/2016/08/5-1-300x196.jpg 300w, /uploads-archive/2016/08/5-1-228x149.jpg 228w" sizes="(max-width: 634px) 100vw, 634px" /></a></p>
<p>それぞれが意味する所は、白・黒・R・G・Bで諧調が潰れている（とんでいる）部分にその色がついています。</p>
<p>&nbsp;</p>
<p>トーンカーブの時は同じようにAltを押しながらスライダーをクリックすると、RGBの潰れがわかります。（白と黒に関してはカーブが上枠・下枠に設置してしまうと潰れる。）</p>
<p><a href="/uploads-archive/2016/08/6.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11739" src="/uploads-archive/2016/08/6.jpg" alt="6" width="318" height="402" srcset="/uploads-archive/2016/08/6.jpg 318w, /uploads-archive/2016/08/6-237x300.jpg 237w, /uploads-archive/2016/08/6-228x288.jpg 228w" sizes="(max-width: 318px) 100vw, 318px" /></a></p>
<p>かなり簡単な説明になってしまいましたが、直接触ってみるのが一番わかり安いので試してみてください。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


photoshop　白とび・黒潰れを確認する方法

small_nino-eye (3).jpg

thumbnail_nino-eye (3).jpg

nino-eye (3).jpg

Canvasで画像の白を透過にする

<p>3色といってもそれぞれに意味合いは違うのですが、これ使い分けると非常に便利です。</p>
<p>みなさんおなじみのGoogleChromeは一番左のカラフル版だと思います。</p>
<p>これは安定版として提供されているものです。</p>
<p>真ん中の青いアイコンはChromiumというオープンソースのブラウザで、GoogleがこのChromiumのソースを元にGoogle独自の機能を追加してリリースしているのがChromeになります。</p>
<p>一番右の金色のアイコンはChrome Canaryといって、安定版に乗る前の新機能を搭載してテストをするためのバージョンで、いわゆるベータ版よりも前のアルファ版に近いようなイメージです。</p>
<p>バグがある前提のバージョンではありますが、既にchromeの大部分は安定していて、頻繁に落ちるというようなこともなく、どちらかと言うと新機能追加がメインかと思います。</p>
<h2>3つのchromeの何が便利？</h2>
<p><a href="/uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11715" src="/uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-300x116.png" alt="dcc3650b7bb248afb5557ca9c73df37f" width="300" height="116" srcset="/uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-300x116.png 300w, /uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-768x297.png 768w, /uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-1024x396.png 1024w, /uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-228x88.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ほぼこれを伝えたかったということに尽きるのですが、それぞれが独立したアプリケーションとして使うことが出来ます。</p>
<p>Chromeのベータ版やDEV版もダウンロード出来るのですが、これは、通常のchromeを上書きしてしまうので、独立したアプリケーションになりません。</p>
<p><a href="https://www.google.co.jp/chrome/browser/beta.html" target="_blank">https://www.google.co.jp/chrome/browser/beta.html</a></p>
<p>&nbsp;</p>
<p>独立したアプリケーションになることで</p>
<p>自分での使い方として以下になります。</p>
<ul>
<li>Googleアカウントが複数あるのでそれぞれ異なるアプリでログインしておく。<br />
→一つのアプリでマルチログインも出来ますがより便利</li>
<li>検証専用ブラウザにする。<br />
→スマートフォン幅を頻繁に確認する時など便利</li>
</ul>
<p>他にもいろいろな用途が考えられます。</p>
<h2>ダウンロード場所</h2>
<h3>Google Chrome Canary</h3>
<p><a href="https://www.google.co.jp/chrome/browser/canary.html" target="_blank">https://www.google.co.jp/chrome/browser/canary.html</a></p>
<h3>Chromium</h3>
<p><a href="https://download-chromium.appspot.com/" target="_blank">https://download-chromium.appspot.com/</a></p>
<h4>おまけ</h4>
<p>Chromiumは、自動アップデート機能がないので、下記のプラグインを入れて置くと随時バージョンを確認して最新バージョンをダウンロードしてくれます。</p>
<p><a href="https://chrome.google.com/webstore/detail/chromium-updater/ccgjmadhdidfloacagcnnodbkedkjedg?hl=ja" target="_blank">https://chrome.google.com/webstore/detail/chromium-updater/ccgjmadhdidfloacagcnnodbkedkjedg?hl=ja</a></p>


large_chorme_chromium_canary-1024x311.png

medium_chorme_chromium_canary-1024x311.png

small_chorme_chromium_canary-1024x311.png

thumbnail_chorme_chromium_canary-1024x311.png

chorme_chromium_canary-1024x311.png

3色のGoogleChrome「chrome chromium canary」

<p>社名っぽい、ただそれだけの理由で「jQuery Starfield」というプラグインを使ってみた。</p>
<p><a href="https://github.com/rocketwagon/jquery-starfield" target="_blank">https://github.com/rocketwagon/jquery-starfield</a></p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/70/" target="_blank">デモ</a></p>
<p>&nbsp;</p>
<p>使い方は簡単で、</p>
<p>JS</p>

		<div id="crayon-6495402642789019918057" 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;">
$( 'body' ).starfield( {
	starDensity: 4.0,
	mouseScale: 1.0,
	seedMovement: true
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402642789019918057-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402642789019918057-2">2</div><div class="crayon-num" data-line="crayon-6495402642789019918057-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402642789019918057-4">4</div><div class="crayon-num" data-line="crayon-6495402642789019918057-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-6495402642789019918057-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'body'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">starfield</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-6495402642789019918057-2"><span class="crayon-h">	</span><span class="crayon-i">starDensity</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">4.0</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-6495402642789019918057-3"><span class="crayon-h">	</span><span class="crayon-i">mouseScale</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">1.0</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402642789019918057-4"><span class="crayon-h">	</span><span class="crayon-i">seedMovement</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line" id="crayon-6495402642789019918057-5"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>CSS</p>

		<div id="crayon-649540264278d396942473" 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">CSS</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;">
html {height: 100%;}
body {padding: 0; margin: auto; width: 100%; height: 100%;}</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-649540264278d396942473-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264278d396942473-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-649540264278d396942473-1"><span class="crayon-k ">html </span><span class="crayon-sy">{</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264278d396942473-2"><span class="crayon-k ">body </span><span class="crayon-sy">{</span><span class="crayon-e ">padding</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">margin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>htmlのheightを100%にしないと表示されなかったので注意。</p>
<p>&nbsp;</p>
<p>以下はパラメータ</p>
<table>
<tbody>
<tr>
<th></th>
<th>Default</th>
<th>説明</th>
</tr>
<tr>
<td>starDensity</td>
<td>1.0</td>
<td>星の数</td>
</tr>
<tr>
<td>mouseScale</td>
<td>1.0</td>
<td>マウス動かした時のスピード感</td>
</tr>
<tr>
<td>seedMovement</td>
<td>true</td>
<td>マウス動かさなくても動作開始するか</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

jQuery Starfieldというのがあったので使ってみた

<h3>前置き</h3>
<div style="padding-left: 15px;">
便利なPhotoshopですが<br />
隠れに隠れた機能が多いアプリケーション</p>
<p>そんなの知ってるよ！</p>
<p>と思うのも多々あるかと思いますが備忘録的な感じで紹介します</p></div>
<h3>特徴</h3>
<div style="padding-left: 15px;">
<p>WindowsではControlキーがMacのCommandキーに相当します。</p>
<ul>
<li>Shift : 選択範囲など「プラス」のイメージ</li>
<li>Control : コマンド実行、他Shift, Alt等との組み合わせ識別</li>
<li>Alt : 選択範囲など「マイナス」のイメージ</li>
</ul>
</div>
<h3>良く使うキー組み合わせ</h3>
<div style="padding-left: 15px;">
<table>
<tbody>
<tr>
<th>キー・マウス動作</th>
<th>動作内容</th>
</tr>
<tr>
<td>Control + T</td>
<td>選択されたレイヤーの自由変形</td>
</tr>
<tr>
<td>Control 押しながらドラッグ</td>
<td>選択レイヤーの移動</td>
</tr>
<tr>
<td>Control + Shift + クリック</td>
<td>複数レイヤー選択</td>
</tr>
<tr>
<td>Control + E</td>
<td>上位レイヤーと結合</td>
</tr>
<tr>
<td>Control + Shift + E</td>
<td>表示されているレイヤー統合</td>
</tr>
<tr>
<td>d</td>
<td>描画色・背景色を黒白に初期化</td>
</tr>
<tr>
<td>x</td>
<td>描画色・背景色の入れ替え</td>
</tr>
<tr>
<td>q</td>
<td>クイックマスクモード切り替え</td>
</tr>
<tr>
<td>Control + R</td>
<td>定規の表示・非表示切り替え</td>
</tr>
<tr>
<td>Tab</td>
<td>メインウィンドウ以外の表示・非表示切り替え</td>
</tr>
</tbody>
</table>
<p>※ 上記は設定で「ツールの変更にShiftキーを使用」を敢えて外しています</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/DL3J_nBjDG0?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/W8fgF99Q3YA?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
</div>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2016/08/31

2016/08/31

2016/08/31

2016/08/31

2016/08/30

2016/08/30

2016/08/24

2016/08/24

2016/08/24

2016/08/24

2016/08/24

2016/08/24

2016/08/20

2016/08/10

2016/08/10

2016/08/10

2016/08/09

2016/08/03