開発環境を統一してみる

<p>Ruby on Railsにbootstrapを使用したいときは、通常<br />
<a class="link" href="https://github.com/twbs/bootstrap-sass#a-ruby-on-rails" target="_blank">Bootstrap for Sass &#8211; GitHub</a><br />
のように、gemを利用することが多いですが、<br />
<em><strong>諸々の事情により</strong></em>、公式サイトよりインストールしたソース（しかもcss）を使用したい場合があるかと思いますが、そのときの設置方法を記事にしました。</p>
<h2>1. ファイルのインストール及び設置</h2>
<p>公式サイトよりダウンロードし、css、javascriptをそれぞれ<br />
app/assets/stylesheet<br />
app/assets/javascript<br />
に設置。また、glyphiconsのフォントを<br />
app/assets/font<br />
配下に配置する。</p>
<p>また、configにてconfig.assets.precompileによりcompileするassetsを指定している場合は、下記を追加する。</p>

		<div id="crayon-649540263e840651931066" 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">add config.assets.precompile</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;">
config.assets.precompile += %w(.eot .ttf .woff .woff2)</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-649540263e840651931066-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-649540263e840651931066-1"><span class="crayon-i">config</span><span class="crayon-sy">.</span><span class="crayon-i">assets</span><span class="crayon-sy">.</span><span class="crayon-i">precompile</span><span class="crayon-h"> </span>+=<span class="crayon-h"> </span><span class="crayon-sy">%</span><span class="crayon-e">w</span><span class="crayon-sy">(</span><span class="crayon-sy">.</span><span class="crayon-i">eot</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">ttf</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">woff</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">woff2</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>２. cssの書き換えを行う。</h2>
<p>上記のような設置方法の場合、glyphiconsのフォントは読み込まれないので、bootstrap.cssの書き換えを行う必要がある。<br />
まず、bootstrap.cssをbootstrap.css.erbにrenameを行う。<br />
その後、cssにてフォントをしている箇所にて、</p>

		<div id="crayon-649540263e844216893607" 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;">
src: url('../fonts/glyphicons-halflings-regular.eot');</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-649540263e844216893607-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-649540263e844216893607-1"><span class="crayon-i">src</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">url</span><span class="crayon-sy">(</span><span class="crayon-s">'../fonts/glyphicons-halflings-regular.eot'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>から</p>

		<div id="crayon-649540263e846068373465" 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;">
src: url(&lt;%= asset_path 'glyphicons-halflings-regular.eot' %&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-649540263e846068373465-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-649540263e846068373465-1"><span class="crayon-i">src</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">url</span><span class="crayon-sy">(</span><span class="crayon-ta">&lt;%=</span><span class="crayon-h"> </span><span class="crayon-i">asset_path</span><span class="crayon-h"> </span><span class="crayon-s">'glyphicons-halflings-regular.eot'</span><span class="crayon-h"> </span><span class="crayon-ta">%&gt;</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のような書き換えを行う。</p>
<p>以上により、設置は完了です。<br />
こちらを参考に致しました。<br />
<a href="https://gist.github.com/anotheruiguy/7379570" target="_blank" class="link">anotheruiguy/web-fonts-asset-pipeline.md &#8211; GitHub</a></p>

Railsでgemを使わずbootstarpを使用したいとき

<p>私はこれまで、HTML＋CSSでテキストを組む場合で、<br />
左揃えを行う場合、</p>

		<div id="crayon-649540263e536258630715" 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;">
text-align: left;</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-649540263e536258630715-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-649540263e536258630715-1"><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">left</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>しか、方法がないと思っていました。<br />
この方法を使った場合、テキストの右側は文章によって<br />
がたがたになってしまったり、<br />
中途半端なところで折り返してしまったりして、<br />
あまり美しくない場合が多いのが悩みでした。</p>
<p>しかし、とあるサイトのCSSを調べていると、<br />
たまたま、以下の様な記述を見つけました。</p>

		<div id="crayon-649540263e53a607946156" 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;">
text-align: justify;
text-justify: inter-ideograph;</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-649540263e53a607946156-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263e53a607946156-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-649540263e53a607946156-1"><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">justify</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263e53a607946156-2"><span class="crayon-e ">text-justify</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">inter-ideograph</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>調べてみると、テキストを両端揃えをするための記述でした。<br />
しかも、すべての主要な最新ブラウザとIE8以上で利用できました。</p>
<p>↓こちらがDEMO</p>
<p><a class="demo" href="/demo/ninomiya/106/">DEMO</a></p>
<p>もっと早く知っていれば…と、恥ずかしながら今更ながらに気づきました。</p>
<p>今後は、どんどん利用していこうと思います。</p>

large_nino-eye-1.png

medium_nino-eye-1.png

small_nino-eye-1.png

thumbnail_nino-eye-1.png

nino-eye-1.png

知らなかった…CSSでテキストの両端揃えが普通にできた

<p>近年、広がりを見せるVRですが、Ｅコマースの業界においても徐々にVRの活用事例が出てきましたので、いくつかご紹介してみたいと思います。</p>
<h2>ebayがVR百貨店をオープン</h2>
<p>ebayが5月25日に”バーチャルリアリティのショッピング体験ができる世界初の「バーチャルリアリティ百貨店」（VR百貨店）をオープンした”と発表しました。</p>
<p>google cardboardのようにスマートフォンを利用した簡易のヘッドセットで利用するサービスで、ヘッドセットの名前は「ショプティカル」。</p>
<p>商品を選択したりカートに入れたりする操作は、視点を合わせて行うとの事で、cardboardのアプリに多いUIになっています。</p>
<p>規模については1万2000以上の商品を観覧できるとの事。</p>
<p>こちらがプロモーション映像です。</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/yAuiXhJPnr8?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2>Trillenium 将来、本当にお店に行く必要がなくなるのでは・・・</h2>
<p>これはまだβ版という事ですが、実際の店舗をそのまま再現していようというのがTrilleniumです。</p>
<p>質感や操作性という面でまだ不足している部分はあるかと思いますが、じっくり商品をみたり買い物そのものを楽しむという、リアル店舗ならではの要素をECが獲得する事によって、リアルとECの差が徐々に無くなっていくのではないでしょうか。</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/bNRnyR-Z-bQ?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Oculus Riftやスマホ向けのデモアプリをダウンロードすることもできます。<a href="http://www.trillenium.com/">http://www.trillenium.com/</a></p>
<p>商品を見て頂くと、内装とは若干質感が違うと感じられますが、これは3Dをフォトスキャンで作成しているとの事でした。</p>
<p>ECでVRを活用する際に商品を3D化する際の労力・クオリティーがネックになると個人的に考えていたので、この技術は非常にうれしい発見です。</p>
<p>無料で作成するアプリケーションも存在しているようですので、今後深く掘ってみたいと思います。ちなみに<a href="https://mikaninc.com/3d%E3%83%95%E3%82%A9%E3%83%88%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E5%88%B6%E4%BD%9C%E3%81%95%E3%82%8C%E3%81%9F3d%E3%83%87%E3%83%BC%E3%82%BF%E9%81%94/">フォトスキャンテクノロジーとは</a></p>
<h2>中国から渋谷で買い物 越境ECにVRを取り入れるKABUKIペディア</h2>
<p><a href="/uploads-archive/2016/05/1-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10872" src="/uploads-archive/2016/05/1-1.jpg" alt="1" width="640" height="308" srcset="/uploads-archive/2016/05/1-1.jpg 640w, /uploads-archive/2016/05/1-1-300x144.jpg 300w, /uploads-archive/2016/05/1-1-228x110.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>kabukiペディアは日本に関するブログ・動画・VRといったコンテンツ主導型の越境ECモールで、2017年の春にはVRのモールをオープンする予定との事です。</p>
<p>下のリンクはテレ東で同モールを取材した動画です。</p>
<p><a href="http://www.tv-tokyo.co.jp/mv/nms/netanotane/post_111186/">http://www.tv-tokyo.co.jp/mv/nms/netanotane/post_111186/</a></p>


EC業界でも普及しはじめたVR

<p>私のまわりのEC事業者の皆様において、最近アマゾンペイメントの話題が非常に多かったので、まとめてみました。</p>
<p>公式サイトは<a href="https://payments.amazon.co.jp/" target="_blank">こちら</a>です。</p>
<h2>Amazonログイン＆ペイメント</h2>
<p>正式名称は</p>
<p><strong>Amazonログイン＆ペイメント</strong></p>
<p>ちょっと長いなと思っていたのですが、ただのAmazonのセキュリティや情報を流用した決済代行ではないもうひとつの機能のために、このような名前になったのではないかと推測しました。</p>
<p>もうひとつの機能とは、Amazonアカウントにログインをするだけで住所情報を入力しなくてもよいということです。</p>
<p>これは、他のPaypal決済にはない画期的な機能で二つの機能を備えているから<strong>Amazonログイン＆ペイメント</strong>なんだと理解しました。</p>
<p><a href="/uploads-archive/2016/05/a365133a66b13014ea799d2177f89934.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10845" src="/uploads-archive/2016/05/a365133a66b13014ea799d2177f89934-300x288.png" alt="amazonペイメント" width="300" height="288" srcset="/uploads-archive/2016/05/a365133a66b13014ea799d2177f89934-300x288.png 300w, /uploads-archive/2016/05/a365133a66b13014ea799d2177f89934-768x737.png 768w, /uploads-archive/2016/05/a365133a66b13014ea799d2177f89934-1024x983.png 1024w, /uploads-archive/2016/05/a365133a66b13014ea799d2177f89934-228x219.png 228w, /uploads-archive/2016/05/a365133a66b13014ea799d2177f89934.png 1548w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>実際に、Amazonペイメントを導入しているサイトで決済の途中まで進んでみた結果が上記です。</p>
<p>Amazonに登録している発送先住所を参照するので、フォームの入力はAmazonアカウントのID＆PWのみで済みます。</p>
<h2>導入費用</h2>
<table>
<tbody>
<tr>
<td>項目</td>
<td>価格</td>
</tr>
<tr>
<td>物理的商品・サービスの販売</td>
<td>4%</td>
</tr>
<tr>
<td>デジタルコンテンツの販売</td>
<td>4.5%</td>
</tr>
<tr>
<td>初期費用</td>
<td>無料</td>
</tr>
<tr>
<td>月額費用</td>
<td>無料</td>
</tr>
<tr>
<td>トランザクション料</td>
<td>無料</td>
</tr>
<tr>
<td>振込手数料</td>
<td>無料</td>
</tr>
</tbody>
</table>
<p>手数料は単純明快ですね。4%は最安ではないですが、その他の費用が掛からないので、心理的な負担もなく初期から導入可能ですね。</p>
<p>月商が3桁万円を超えるECサイトにとっては、この料率は響いて来ます（自社のクレジット決済であれば大抵もっとよい料率で契約出来る可能性がある）が、いずれにしてもその他の費用が別途発生しないので、機能追加としては、容易です。</p>
<h2>3つのメリット</h2>
<p>以上から購入者側のメリットをまとめてみると以下の3つに集約されることが分かります。</p>
<ul>
<li>カード番号の入力省略</li>
<li>住所の入力省略</li>
<li>Amazonマーケットプレイス保証を受けられる</li>
</ul>
<p>購入者へは、利便性と安心が同時に提供されるので、導入企業側としてもフォームの入力での離脱や、安心をAmazon側が担保してくれることによる転換率の向上ということでのメリットが大きいです。</p>
<h2>まとめ</h2>
<p>やはりというか、脅威というか、Amazonアカウントを持っている層と合致する商材を扱っている業者は、導入しない理由がないのではと思われる内容でした。</p>
<p>他の楽天ID決済やYahooウォレット決済と組み合わせれば、通販サイトの購入層をほぼ網羅出来るのではと思います。</p>
<p>弊社が扱うカラコンでは、どうだろうか？市場調査と共に検討したい。</p>


アマゾンペイメントまとめ

checkbox,radioがチェックされた時にちょっとアニメーションさせてみる

<p>Ruby on Railsの管理画面自動生成には、typus等様々なものが存在しますが、今回はrails adminとdeviseを利用した管理画面生成を記事にしてみました。</p>
<h3>1.deviseのインストール</h3>
<p>今回は割愛します。</p>
<h3>2.管理画面を利用したいmodelにdeviseを追加する</h3>
<p></p>

		<div id="crayon-649540263e088954173100" 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">add devise to model / generate devise model</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 devise モデル名</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-649540263e088954173100-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-649540263e088954173100-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">devise</span><span class="crayon-h"> </span>モデル名</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>3.deviseが追加されたmodelの調整を行う</h3>
<p>deviseをmodelに追加された際には、<br />
:database_authenticatable, :registerable,:recoverable, :rememberable, :validatableが自動的に追加されます。<br />
管理画面を生成する際は、:registerable,:recoverable,を削除するのが一般的なようです。<br />
もし、上記を削除した際には、deviseを追加した際に、上記のカラムがmigrationに追加されますが、<br />
Recoverableとreset_password_tokenの部分も同様に削除します。</p>
<p>調整が完了したらrake db:migrateを実行します。</p>
<h3>4.Gemfileにadmin_railsのgemを追加し、bundle installを実行</h3>
<p>そしてそのあと、rails g rails_admin:installを実行し、rails_adminのconfigファイルを生成する。</p>
<h3>5.rails_adminとdeviseの連携を行う</h3>
<p>config/initializers/rails_admin.rb<br />
にて</p>

		<div id="crayon-649540263e08c820769357" 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">default rails_admin</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;">
## == Devise ==
# config.authenticate_with do
#　　 warden.authenticate! scope: :モデル名
# end
# config.current_user_method(&amp;:current_モデル名)</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-649540263e08c820769357-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263e08c820769357-2">2</div><div class="crayon-num" data-line="crayon-649540263e08c820769357-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263e08c820769357-4">4</div><div class="crayon-num" data-line="crayon-649540263e08c820769357-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-649540263e08c820769357-1"><span class="crayon-p">## == Devise ==</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263e08c820769357-2"><span class="crayon-p"># config.authenticate_with do</span></div><div class="crayon-line" id="crayon-649540263e08c820769357-3"><span class="crayon-p">#　　 warden.authenticate! scope: :モデル名</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263e08c820769357-4"><span class="crayon-p"># end</span></div><div class="crayon-line" id="crayon-649540263e08c820769357-5"><span class="crayon-p"># config.current_user_method(&amp;:current_モデル名)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>と元もとコメントアウトされている部分を外す。</p>
<p></p>

		<div id="crayon-649540263e08e477853773" 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">modify rails_admin.rb</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;">
# == Devise ==
config.authenticate_with do
　　warden.authenticate! scope: :user
end
config.current_user_method(&amp;:current_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-649540263e08e477853773-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263e08e477853773-2">2</div><div class="crayon-num" data-line="crayon-649540263e08e477853773-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263e08e477853773-4">4</div><div class="crayon-num" data-line="crayon-649540263e08e477853773-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-649540263e08e477853773-1"><span class="crayon-p"># == Devise ==</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263e08e477853773-2"><span class="crayon-i">config</span><span class="crayon-sy">.</span><span class="crayon-e">authenticate_with </span><span class="crayon-st">do</span></div><div class="crayon-line" id="crayon-649540263e08e477853773-3">　　<span class="crayon-i">warden</span><span class="crayon-sy">.</span><span class="crayon-i">authenticate</span><span class="crayon-sy">!</span><span class="crayon-h"> </span><span class="crayon-i">scope</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-e">user</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263e08e477853773-4"><span class="crayon-st">end</span></div><div class="crayon-line" id="crayon-649540263e08e477853773-5"><span class="crayon-i">config</span><span class="crayon-sy">.</span><span class="crayon-e">current_user_method</span><span class="crayon-sy">(</span>&<span class="crayon-sy">:</span><span class="crayon-i">current_user</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>６.routeの設定を行う</h3>
<p></p>

		<div id="crayon-649540263e08f243438649" 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">add route</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;">
devise_for :モデル名（sが必要かもしれない）</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-649540263e08f243438649-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-649540263e08f243438649-1"><span class="crayon-i">devise_for</span><span class="crayon-h"> </span><span class="crayon-sy">:</span>モデル名（<span class="crayon-i">s</span>が必要かもしれない）</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>7.rails consoleより管理画面ユーザーの追加</h3>
<p></p>

		<div id="crayon-649540263e090603294446" 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">save email and password</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;">
m = Model.new
m.email = "example@www.example.com"
m.password = "password"
m.password_confirmation = "password"</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-649540263e090603294446-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263e090603294446-2">2</div><div class="crayon-num" data-line="crayon-649540263e090603294446-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263e090603294446-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-649540263e090603294446-1"><span class="crayon-i">m</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">Model</span><span class="crayon-sy">.</span><span class="crayon-i">new</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263e090603294446-2"><span class="crayon-i">m</span><span class="crayon-sy">.</span><span class="crayon-i">email</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"example@www.example.com"</span></div><div class="crayon-line" id="crayon-649540263e090603294446-3"><span class="crayon-i">m</span><span class="crayon-sy">.</span><span class="crayon-i">password</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"password"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263e090603294446-4"><span class="crayon-i">m</span><span class="crayon-sy">.</span><span class="crayon-i">password_confirmation</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"password"</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>8.リロードを行い、root_url/adminにアクセスする</h3>
<h2>所感・参考</h2>
<p>30分ぐらいで完成します。</p>
<p><a href="https://github.com/sferik/rails_admin">rails admin git hub</a><br />
<a href="http://rails-admin-tb.herokuapp.com/">rails admin demo site</a></p>

rails admin + deviseを利用して管理画面を自動生成する

<p>中国に特化した越境ECカートシステムLaunchCartのセミナーを、2016年5月13日新宿のコンファレンス東京にて開催しました。</p>
<p>中国越境ECに興味はあっても、めまぐるしく変わる税制や独特な中国の商習慣の前に、中国進出を諦めるお客様は少なくありません。</p>
<p>今回のセミナーでは、</p>
<p><strong>【初心者にやさしい！】中国越境ECの全体像がざっくり分かるセミナー</strong></p>
<p>というタイトルのもと、1時間のセミナーで中国市場の概要と、進出時の注意を理解していただくことを目的にお話いたしました。</p>
<p>セミナー後には、「4月8日に制定された新税制の影響は？」や「日本酒を送る際に最適な方法は？」などと言った鋭い質問をいただき、改めて中国越境ECの注目度の高さを感じました。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/05/DSC06507-1024x680.jpg" alt="DSC06507" width="1024" height="680" class="aligncenter size-large wp-image-10800" srcset="/uploads-archive/2016/05/DSC06507-1024x680.jpg 1024w, /uploads-archive/2016/05/DSC06507-300x199.jpg 300w, /uploads-archive/2016/05/DSC06507-768x510.jpg 768w, /uploads-archive/2016/05/DSC06507-228x152.jpg 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h2>セミナー概要</h2>
<p>当日は下記のような内容でお話いたしました。</p>
<p>中国への越境ECを考えている方の共通の悩みは、、</p>
<p>●コネもノウハウもなし。ネットで情報収集しても…<br />
●越境支援の会社はたくさんあるけど、どこも言っていることが違う…<br />
●越境ECの具体的なイメージがまったく沸かない！</p>
<p>といったものではないでしょうか。</p>
<p>【初心者にやさしい！】中国越境ECの全体像がざっくり分かるセミナー　では、</p>
<p>◆中国EC事情を誰にでもわかるくらいシンプルに解説<br />
◆関税、物流、言語、マーケティングなどの概要はちゃんと押さえます！<br />
◆数ある具体的な越境ECの進出形態の長所と短所をご紹介するので<br />
◆きっと御社の商品に合った方法が見つかるはずです！</p>
<h2>次回セミナーは6月9日（木）＠渋谷です！</h2>
<p>次回は、3社合同開催です！</p>
<p><strong>「THE MAIN STREAM 2016」<br />
越境ECの主流はアジアへ!中国&#038;東南アジアで成功するネット通販の戦略と実践セミナー</strong></p>
<p>というテーマで開催いたします。</p>
<h3>タイムテーブル</h3>
<p>14：30～15：00<br />
基調講演　<br />
海外ビジネス支援事業を行うDijima　兒嶋 裕貴氏（株式会社Resorz）</p>
<p>15：00～16：00<br />
中国市場<br />
越境ECシステムLaunchCart　橋本 宏基（スターフィールド株式会社）</p>
<p>16：00～17：00<br />
東南アジア市場<br />
日本で唯一の東南アジア進出支援EC－PORT　鹿島 功敬氏(ソーシャルエージェント）</p>
<p>17：00～18：00<br />
ブース個別相談会</p>
<h3>日時場所</h3>
<p>2016年6月9日（木）14時開場<br />
TKP渋谷カンファレンスセンター　カンファレンスルーム8A</p>
<h3>定員</h3>
<p>定員　50名</p>
<h3>お申し込み</h3>
<p>お申し込みは下記の項目をご記入の上、info@sterfield.co.jp　（担当橋本）までご連絡ください。</p>
<p>・お名前<br />
・貴社名<br />
・人数<br />
・電話番号<br />
・メールアドレス</p>


中国越境ECがざっくりわかる」、LaunchCartセミナーを開催しました

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  今回はネタ切れにて、小技にもならない隠された？Macの機能の紹介。</p>
<p>  「システム環境設定」<br />
  の中にある<br />
  「アクセシビリティ」<br />
  を選択し、「ディスプレイ」の項目を表示します。<br />
<a href="/uploads-archive/2016/05/629ca88c64f92f4e3e10c6135d9bc3e3.png"><img decoding="async" loading="lazy" src="/uploads-archive/2016/05/629ca88c64f92f4e3e10c6135d9bc3e3-300x192.png" alt="スクリーンショット 2016-05-24 17.58.24" width="300" height="192" class="alignnone size-medium wp-image-10812" srcset="/uploads-archive/2016/05/629ca88c64f92f4e3e10c6135d9bc3e3-300x192.png 300w, /uploads-archive/2016/05/629ca88c64f92f4e3e10c6135d9bc3e3-228x146.png 228w, /uploads-archive/2016/05/629ca88c64f92f4e3e10c6135d9bc3e3.png 662w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  この中で「カラーを反転」を押すと、、、</p>
<p>  黒背景で作業してる人が<br />
  薄暗い場所でスクリーンに映し出す時、<br />
  白背景の人が背景真っ白の場所で際立たせたい時(あるか？)、</p>
<p>  見やすくなる気がします(多分)。</p>
<p>　※ 反転後のキャプチャはシステム上では反転されていない状態だったので、お手元のMacにてご確認をしてくださいまし<br />
</dvi></p>


モニタで遊ぶの巻

<p>今盛り上がりを見せている越境ECで、新しいビジネスを見つけました。まるでテレビの通販番組を見ているような、その名も「Bolome（ボロミー）」です。</p>
<p>スマートフォン版の生中継テレビ通販という新しいやり方で、日本の店頭と中国を結び、消費者はテレビショッピングの感覚で買い物が出来ます。生中継画面には利用者のコメント投稿が表示され、それを見てメーカーから直接中国消費者に回答をしてもらえる。</p>
<h2>bolomeは全てスマートフォンで行われる</h2>
<p>日本商品を実演販売する女性がスマートフォンで撮影され、日本語と中国語が混じった実演販売ではあるが、しっかりと画面には中国語の文章が映し出されるので中国の方でもその商品について知る事が可能。ただし、撮影に使う機材も視聴するための機材もすべてスマートフォン。撮影スタッフは、重厚なテレビカメラの替わりに、自撮り用のセルフィースティック片手に出演者を映します。視聴者はライブを見ながら、ボタン一つで商品が購入出来るのです。</p>
<h2>中国に居ながら、まるで日本の店頭で買い物をしているような感覚</h2>
<p>bolomeが取り扱うのは化粧品や食品、日用雑貨など、商品数は5000点で、日本の本物を求める中国消費者の支持を受け、流通総額は月額10億円を突破。毎月20％の勢いで伸びているとか･･･<br />
またbolomeのすごいところは、中国で既に人気の高い商品は取り扱わず「中国で認知度が低い商品を優先的に発掘する」こと。以前テレビ生中継で行った「ノエビア」のNOVシリーズも中国での知名度は乏しく、同社が中国で今後拡販したいと考えていた商品だそうです。（この商品はライブ中に100本の売り上げ、放映後3週間で累計300本が売れた）</p>
<p>商品はbolomeがメーカーから仕入れ、自社の在庫として販売。同社は差額を収益とする。メーカーは出店や返品の手数料を負担する必要がなく、返品のリスクも負わない。</p>
<h2>アプリがとってもきれい</h2>
<p>【インストール直後】<br />
<a href="/uploads-archive/2016/05/Screenshot_2016-05-24-16-05-07-e1464076052905-1-e1464080582110.png"><img decoding="async" loading="lazy" src="/uploads-archive/2016/05/Screenshot_2016-05-24-16-05-07-e1464076052905-1-e1464080582110.png" alt="" width="450" height="800" class="alignnone size-full wp-image-10773" srcset="/uploads-archive/2016/05/Screenshot_2016-05-24-16-05-07-e1464076052905-1-e1464080582110.png 450w, /uploads-archive/2016/05/Screenshot_2016-05-24-16-05-07-e1464076052905-1-169x300.png 169w, /uploads-archive/2016/05/Screenshot_2016-05-24-16-05-07-e1464076052905-1-576x1024.png 576w, /uploads-archive/2016/05/Screenshot_2016-05-24-16-05-07-e1464076052905-1-228x405.png 228w" sizes="(max-width: 450px) 100vw, 450px" /></a></p>
<p>ここは登録画面みたいなものでした。</p>
<p>【トップページ】</p>
<p><a href="/uploads-archive/2016/05/Screenshot_2016-05-24-16-06-51-e1464076211249.png"><img decoding="async" loading="lazy" src="/uploads-archive/2016/05/Screenshot_2016-05-24-16-06-51-e1464076211249.png" alt="Screenshot_2016-05-24-16-06-51" width="450" height="800" class="alignnone size-full wp-image-10764" /></a></p>
<p>ここから、直通放送やお買い物が出来る商品が確認出来ます。パッと見た感じでは金額はピンキリで食品も1元で売られていたり日本で有名な美顔器などが人気商品として出ていました。ご興味があったらダウンロードしてみて下さい。<br />
※ ただし、中国版のみの提供となっており、日本の携帯端末からの商品購入はできません。</p>
<h2>おまけ</h2>
<p>社名のbolomeとは、中国で有名な映画の劇中セリフに由来する単語で、瞬間移動する魔法の呪文を意味するそうです。日本と中国を瞬間移動のように商品が買えるって意味合いなんでしょうかね？</p>


まるでテレビの通販番組のような越境ECビジネス「Bolome」

<p>今回はUnityで作成したゲームをwebGLで書き出して（ビルドして）、ブラウザだけどゲームをプレイできるか挑戦してました。</p>
<p>その前にwebGLとは何ぞやという方の為に簡単に説明させて頂きます。</p>
<blockquote><p><b>WebGL</b> (Web Graphics Library) は、互換性がある Web ブラウザでプラグインを使用せずにインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API</p></blockquote>
<p>つまり、プレイするためのアプリやプレイヤーをインストールせず、ブラウザだけでゲーム等のグラフィックスを表示しプレイできてしまうという事です。上記にあるようにブラウザ上でグラフィックスを動かすためにJavaScriptが使われます。</p>
<h2>webGLが本格的に始動</h2>
<p>以前まではunityのbuild setteing からwebGLを選択する際に「webGL(プレビュー)」とありましたが、バージョン5以降になって、このプレビューが外れています。webGLに関する最近の記事を色々と検索してみたところ、どうやら本格的に利用できる状態になってきているみたいです。</p>
<p>ちなみにブラウザのサポート状況は以下の通り。</p>
<blockquote><p>■PC<br />
・Google Chrome 8 (8は要設定、9から標準で有効)<br />
・Internet Explorer 11<br />
・Mozilla Firefox 4<br />
・Opera 12[3] (12は要設定、15から標準で有効)<br />
・Safari 5.1 (5.1は要設定、8から標準で有効)</p>
<p>■モバイル<br />
・Android ブラウザ &#8211; Android 5.0 以降<br />
・BlackBerry 10<br />
・Firefox for Mobile (Maemoは1.0から, Androidは4から)<br />
・Google Chrome for Android 25 (※注意事項あり)<br />
・Internet Explorer Mobile 11<br />
・Opera Mobile 12 (Android のみ)<br />
・Safari 8 &#8211; iOS 8 以降。5〜7 は iAd の広告のみ対応。<br />
・Tizen 1.0</p>
<p>参照：wikipedia webGL</p></blockquote>
<h2>さっそくwebGLでビルドしてみる</h2>
<p>ビルドするゲームはterrainでフィールドと地形を作って、その上にキャラクターのプレハブからThird Personを置いただけのシーンを作成しました。</p>
<p>こんな感じです。</p>
<p><a href="/uploads-archive/2016/05/1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10765" src="/uploads-archive/2016/05/1.jpg" alt="1" width="640" height="405" srcset="/uploads-archive/2016/05/1.jpg 640w, /uploads-archive/2016/05/1-300x190.jpg 300w, /uploads-archive/2016/05/1-228x144.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>build setting でwebGLを選択してビルド開始</p>
<p><a href="/uploads-archive/2016/05/3-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10767" src="/uploads-archive/2016/05/3-1.jpg" alt="3" width="640" height="605" srcset="/uploads-archive/2016/05/3-1.jpg 640w, /uploads-archive/2016/05/3-1-300x284.jpg 300w, /uploads-archive/2016/05/3-1-228x216.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>この時に、webGLをビルドするためのモジュールをインストールしていない場合は「No <a class="keyword" href="http://d.hatena.ne.jp/keyword/WebGL">WebGL</a> module loaded」と出てくるので、unityのインストーラーでモジュールを追加して下さい。</p>
<p>案の定、私も最初にインストールする際にチェックを外していたのでwebGLのモジュールが入っていませんでした。</p>
<p><a class="demo" href="/demo/makabe/12/index.html">demo</a></p>


unityで作ったゲームをwebGLでビルドしてみる

<p>去る5月20日〜22日にかけて佐賀・福岡出張に行ってきました。</p>
<p>20日は佐賀で打ち合わせを行い、21日はずっと行きたいと思っていた糸島市と福岡に行きました。</p>
<p>何故、行きたいと思っていたかというと、九州とりわけ福岡には通販会社さんが多く、通販カートシステムを提供する弊社としては、今後必ず接点を持っていかなければならない地域だと考えており、もし拠点をつくるのであれば今、注目されている糸島市だと思ったからです。</p>
<p><a href="http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1339568328" target="_blank">九州福岡に本社が多い、通販業界 やずやサンとか、ジャパネットたかだサンとか、&#8230;</a></p>
<p>誰もが知っている通販会社さんの本社がたくさんあります。</p>
<h2>糸島市が注目されている理由</h2>
<p>福岡の博多からは車で30分、佐賀の唐津からは車の60分ほどに位置していて、新しい働き方の移住先として注目されている場所です。</p>
<p><iframe loading="lazy" width="600" height="450" style="border: 0;" align="center" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212801.85859313025!2d130.02573839104073!3d33.5526217945273!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3541e7fad27a8f01%3A0x919456694edeac0e!2z5pel5pysLCDnpo_lsqHnnIzns7jls7bluII!5e0!3m2!1sja!2sus!4v1464064768943" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<p>ご覧頂くと分かるように、福岡市の左隣に位置しているのが糸島市で私が向かった佐賀県の唐津市からは右隣となります。</p>
<p>他の魅力も詳しく紹介されている以下の記事をご覧下さい。</p>
<p><a href="http://itoshima.style/" target="_blank">糸島スタイル</a></p>
<p class="h2_style01 "><a href="http://www.lifehacker.jp/2015/02/150215fukuoka_style.html" target="_blank">アメリカ西海岸のようなスタイルで福岡で働く人々。彼らが語る福岡の魅力</a></p>
<p><a href="http://www.huffingtonpost.jp/taviicom/moving-to-countryside_b_8001664.html" target="_blank">「移住したい町No.1」福岡県糸島市の魅力</a></p>
<p>&nbsp;</p>
<p>おしゃれなカフェもいっぱいあったりと観光でも楽しめる場所です。</p>
<p><a href="http://find-travel.jp/article/92" target="_blank">糸島のおしゃれカフェ22選。おすすめを厳選して紹介します！</a></p>
<h2>福岡で3つの拠点を運営されるスマートデザインアソシエーションさん</h2>
<p>「糸島 シェアオフィス」などのキーワードで検索すると必ず出てくるのが「福岡移住計画」というメディアも手がけられているスマートデザインアソシエーションさんの施設です。</p>
<p>糸島市、福岡市西区、天神と3つの施設を運営されており、それぞれお伺いさせて頂きました。</p>
<h3>糸島市のコワーキングスペース「ライズアップケヤ」</h3>
<p><a href="/uploads-archive/2016/05/8d08c9cc0ce22bca140a4d8969df1a3e.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10730" src="/uploads-archive/2016/05/8d08c9cc0ce22bca140a4d8969df1a3e-300x161.png" alt="RISE UP KEYA　オフィシャルサイト" width="300" height="161" srcset="/uploads-archive/2016/05/8d08c9cc0ce22bca140a4d8969df1a3e-300x161.png 300w, /uploads-archive/2016/05/8d08c9cc0ce22bca140a4d8969df1a3e-768x411.png 768w, /uploads-archive/2016/05/8d08c9cc0ce22bca140a4d8969df1a3e-1024x548.png 1024w, /uploads-archive/2016/05/8d08c9cc0ce22bca140a4d8969df1a3e-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://itoshima-lifedesign.com/" target="_blank">公式サイト</a></p>
<p>まず最初にお伺いさせて頂いたのが、糸島市にある「ライズアップケヤ」です。</p>
<p><a href="/uploads-archive/2016/05/IMG_20160521_103756.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10731" src="/uploads-archive/2016/05/IMG_20160521_103756-300x225.jpg" alt="IMG_20160521_103756" width="300" height="225" srcset="/uploads-archive/2016/05/IMG_20160521_103756-300x225.jpg 300w, /uploads-archive/2016/05/IMG_20160521_103756-768x576.jpg 768w, /uploads-archive/2016/05/IMG_20160521_103756-1024x768.jpg 1024w, /uploads-archive/2016/05/IMG_20160521_103756-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>土曜日のため、営業はしておらず外観のみとなります。</p>
<p><iframe loading="lazy" width="600" height="450" style="border: 0;" align="center" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3323.5592314994797!2d130.10962501520294!3d33.590791680733915!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3541e79bb254c2a3%3A0xaebbe8a63c8dd5ff!2z5pel5pysLCDjgJI4MTktMTMzNSDnpo_lsqHnnIzns7jls7bluILlv5fmkanoiqXlsYvvvJHvvJDvvJPvvJfiiJLvvJE!5e0!3m2!1sja!2sus!4v1464070970515" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<p>しかしながら場所が最高でした。</p>
<p>鉄道からは少し離れているので、車移動が必要かと思いますが、このロケーション。</p>
<p>外観を見たあとナビを頼りに先に行ってみると・・・</p>
<p><a href="/uploads-archive/2016/05/IMG_20160521_105251.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10732" src="/uploads-archive/2016/05/IMG_20160521_105251-300x225.jpg" alt="IMG_20160521_105251" width="300" height="225" srcset="/uploads-archive/2016/05/IMG_20160521_105251-300x225.jpg 300w, /uploads-archive/2016/05/IMG_20160521_105251-768x576.jpg 768w, /uploads-archive/2016/05/IMG_20160521_105251-1024x768.jpg 1024w, /uploads-archive/2016/05/IMG_20160521_105251-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a> <a href="/uploads-archive/2016/05/IMG_20160521_105307.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10733" src="/uploads-archive/2016/05/IMG_20160521_105307-300x225.jpg" alt="IMG_20160521_105307" width="300" height="225" srcset="/uploads-archive/2016/05/IMG_20160521_105307-300x225.jpg 300w, /uploads-archive/2016/05/IMG_20160521_105307-768x576.jpg 768w, /uploads-archive/2016/05/IMG_20160521_105307-1024x768.jpg 1024w, /uploads-archive/2016/05/IMG_20160521_105307-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>海が広がっていました。</p>
<p>海水浴場の砂浜とは違う荒々しさにとても感動しました。</p>
<h3>福岡市西区のシェアオフィス「salt」</h3>
<p><a href="/uploads-archive/2016/05/a47275d710641970a45c151edc5a47e9.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10734" src="/uploads-archive/2016/05/a47275d710641970a45c151edc5a47e9-300x161.png" alt="SALT – 福岡市西区、海辺のシェアオフィス" width="300" height="161" srcset="/uploads-archive/2016/05/a47275d710641970a45c151edc5a47e9-300x161.png 300w, /uploads-archive/2016/05/a47275d710641970a45c151edc5a47e9-768x411.png 768w, /uploads-archive/2016/05/a47275d710641970a45c151edc5a47e9-1024x548.png 1024w, /uploads-archive/2016/05/a47275d710641970a45c151edc5a47e9-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="https://salt.today/" target="_blank">公式サイト</a></p>
<p>次にお伺いさせて頂いたのがシェアオフィスの「salt」です。</p>
<p>こちらダメ元でお電話したところ、なんとスマートデザインアソシエーションの池松さんがすぐに案内していただけることに。電話して30分後にわざわざ来て頂いて案内してくれるとはどれだけ神対応なんでしょうか。人の暖かさを感じました。</p>
<p>公式サイトにアクセスすると海が見える場所に位置しているのが分かるのですが、実際に行ってみるとこの破壊力はすごかったです。一発で何ていい場所だと心を揺さぶられました。<br />
<iframe loading="lazy" width="600" height="450" style="border: 0;" align="center" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3323.9093826956437!2d130.2728880152027!3d33.581701980736575!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3541eb7a5d453673%3A0x877982b2c4155da8!2z5pel5pysLCDjgJI4MTktMDE2OCDnpo_lsqHnnIznpo_lsqHluILopb_ljLrku4rlrr_pp4XliY3vvJHkuIHnm67vvJHvvJXiiJLvvJHvvJgg44Oe44Oq44OW5LuK5a6_44K344O844K144Kk44OJ44OG44Op44K5!5e0!3m2!1sja!2sus!4v1464071609659" frameborder="0" allowfullscreen="allowfullscreen"></iframe><br />
まさに目の前が海。</p>
<p><a href="/uploads-archive/2016/05/IMG_20160521_121104.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10735" src="/uploads-archive/2016/05/IMG_20160521_121104-225x300.jpg" alt="IMG_20160521_121104" width="225" height="300" srcset="/uploads-archive/2016/05/IMG_20160521_121104-225x300.jpg 225w, /uploads-archive/2016/05/IMG_20160521_121104-768x1024.jpg 768w, /uploads-archive/2016/05/IMG_20160521_121104-228x304.jpg 228w" sizes="(max-width: 225px) 100vw, 225px" /></a></p>
<p>外観はこんな感じです。</p>
<p><a href="/uploads-archive/2016/05/IMG_20160521_114450.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10736" src="/uploads-archive/2016/05/IMG_20160521_114450-300x225.jpg" alt="IMG_20160521_114450" width="300" height="225" srcset="/uploads-archive/2016/05/IMG_20160521_114450-300x225.jpg 300w, /uploads-archive/2016/05/IMG_20160521_114450-768x576.jpg 768w, /uploads-archive/2016/05/IMG_20160521_114450-1024x768.jpg 1024w, /uploads-archive/2016/05/IMG_20160521_114450-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>入口を入るとおしゃれな内装と共に3階から見下ろす海が目に飛び込んできます。</p>
<p><a href="/uploads-archive/2016/05/IMG_20160521_114517.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10737" src="/uploads-archive/2016/05/IMG_20160521_114517-300x225.jpg" alt="IMG_20160521_114517" width="300" height="225" srcset="/uploads-archive/2016/05/IMG_20160521_114517-300x225.jpg 300w, /uploads-archive/2016/05/IMG_20160521_114517-768x576.jpg 768w, /uploads-archive/2016/05/IMG_20160521_114517-1024x768.jpg 1024w, /uploads-archive/2016/05/IMG_20160521_114517-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>窓際までいくともうそこにはもう海しか見えません。</p>
<p>下手なスマホ写真で恐縮です。</p>
<p>とにかくこのオーシャンビューは体感しないと分からないかもしれないです。</p>
<p>近くではサーファーの方やBBQをやっている方たちもいらっしゃり、そういう元々リゾートをするための地域であります。</p>
<p>そんな地域が博多から車で30分というのが最大にして最強のメリットではないでしょうか。</p>
<h3>天神のシェアオフィス「HOOD天神」</h3>
<p><a href="/uploads-archive/2016/05/1546dd4e288f9c4fc5d4592008bc3ec4.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10738" src="/uploads-archive/2016/05/1546dd4e288f9c4fc5d4592008bc3ec4-300x161.png" alt="HOOD天神 西鉄と福岡移住計画が福岡の天神にオープンする新しいコミュニティ ワークスペース" width="300" height="161" srcset="/uploads-archive/2016/05/1546dd4e288f9c4fc5d4592008bc3ec4-300x161.png 300w, /uploads-archive/2016/05/1546dd4e288f9c4fc5d4592008bc3ec4-768x411.png 768w, /uploads-archive/2016/05/1546dd4e288f9c4fc5d4592008bc3ec4-1024x548.png 1024w, /uploads-archive/2016/05/1546dd4e288f9c4fc5d4592008bc3ec4-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="https://hood-tenjin.com/" target="_blank">公式サイト</a></p>
<p>最後に伺ったのは、福岡の中心天神にあるシェアオフィス「HOOD天神」です。</p>
<p><iframe loading="lazy" width="600" height="450" style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3323.503274037185!2d130.39967811556295!3d33.59224409927703!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3541919218f3a185%3A0x47bb2aec0367cdb6!2z5pel5pysLCDjgJI4MTAtMDAwMSDnpo_lsqHnnIznpo_lsqHluILkuK3lpK7ljLrlpKnnpZ7vvJHkuIHnm67vvJHvvJXiiJLvvJUg5aSp56We5piO5rK76YCa44KK44OT44Or!5e0!3m2!1sja!2sus!4v1464072997516" frameborder="0" align="center" allowfullscreen="allowfullscreen"></iframe></p>
<p>ビジネスビルが立ち並ぶいわば福岡の中心部の天神駅から徒歩すぐのところにあります。</p>
<p>イベントスペースとしても頻繁に使われているようです。</p>
<p><a href="/uploads-archive/2016/05/IMG_20160521_165511.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10739" src="/uploads-archive/2016/05/IMG_20160521_165511-300x225.jpg" alt="IMG_20160521_165511" width="300" height="225" srcset="/uploads-archive/2016/05/IMG_20160521_165511-300x225.jpg 300w, /uploads-archive/2016/05/IMG_20160521_165511-768x576.jpg 768w, /uploads-archive/2016/05/IMG_20160521_165511-1024x768.jpg 1024w, /uploads-archive/2016/05/IMG_20160521_165511-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>こちらも土曜日に伺ったので、外観のみとなります。</p>
<h2>まとめ</h2>
<p>自然と都市を網羅するこの布陣がすごすぎます。それが車で30分圏内に全てあるというのは、日本でも稀有な場所ではないでしょうか？</p>
<p>とにかく、街がコンパクトにまとまっているので、糸島を本拠地にしても、博多・天神を本拠地にしても地理的な差異はなく、どちらの選択肢も大いに有り得ると思いました。</p>
<p>最後に、突然の土曜日の訪問にも関わらず、快く対応して下さいましたスマートデザインアソシエーションの池松さんには大変感謝です。</p>


自然と都市両方の魅力を持つ福岡・糸島視察レポート

<h2>台湾の基礎知識</h2>
<p>人口：2348万人 (1.273億人)</p>
<p>EC市場規模：3兆3703億円 (12.8兆円)</p>
<p>スマホ普及率：50.8% (24.7%)</p>
<p>検索エンジンシェア：Google：83.4%、Yahoo!：15.2%</p>
<p>&nbsp;</p>
<h2>高いEC利用率</h2>
<p>EC事情規模 / 人口 = 1人あたりの年間平均EC利用金額</p>
<p>と考えると、台湾：14.3万円、日本：10.0万円となり、ECへの依存度は日本よりも高い。</p>
<p>ちなみに中国は3.4万円なので利用率の高さがうかがえる。</p>
<p>&nbsp;</p>
<p>更に、2013年のEC市場規模は7,673億元だったが、スーパーマーケット：1,584億元、コンビニ：2,761億元、百貨店：2,886億元であり、合計7231億元を上回る。</p>
<p>さらに、台湾のEC市場規模は年間2桁の成長を続けている。</p>
<p>&nbsp;</p>
<p>以下は2013年の統計</p>
<p><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-10725" src="/uploads-archive/2016/05/1502_aun_taiwan_16.jpg" alt="台湾EC市場規模推移" width="570" height="392" srcset="/uploads-archive/2016/05/1502_aun_taiwan_16.jpg 570w, /uploads-archive/2016/05/1502_aun_taiwan_16-300x206.jpg 300w, /uploads-archive/2016/05/1502_aun_taiwan_16-228x157.jpg 228w" sizes="(max-width: 570px) 100vw, 570px" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>利用されているECサイト</h2>
<p>Yahoo!系のECサイトが54.9%でトップ。</p>
<p><a href="https://tw.buy.yahoo.com/" target="_blank">https://tw.buy.yahoo.com/</a></p>
<p>&nbsp;</p>
<p>次いでPChome線上購物 23.7%</p>
<p><a href="http://shopping.pchome.com.tw/" target="_blank">http://shopping.pchome.com.tw/</a></p>
<p>&nbsp;</p>
<p>momo購物網 17.2%</p>
<p><a href="http://www.momoshop.com.tw/main/Main.jsp" target="_blank">http://www.momoshop.com.tw/main/Main.jsp</a></p>
<p>&nbsp;</p>
<p>尚、楽天台湾は2.1%</p>
<p>&nbsp;</p>
<p>ちなみに利用されている決済手段の上位3つは以下</p>
<p>代引き：33.4%</p>
<p>コンビニ受取・決済：27.8%</p>
<p>超商付款?：24.7%</p>
<p>&nbsp;</p>
<h2>日本製品とマーケティング</h2>
<p>台湾は親日で有名</p>
<p><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-10726" src="/uploads-archive/2016/05/20150715_01.jpg" alt="アジア10国 親日度合" width="685" height="246" srcset="/uploads-archive/2016/05/20150715_01.jpg 685w, /uploads-archive/2016/05/20150715_01-300x108.jpg 300w, /uploads-archive/2016/05/20150715_01-228x82.jpg 228w" sizes="(max-width: 685px) 100vw, 685px" /></p>
<p>売れているものは他の国とあまり変わらず、薬や美容品などが人気とのこと。</p>
<p>&nbsp;</p>
<p>台湾はFacebookの普及率が高い</p>
<p><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-10727" src="/uploads-archive/2016/05/5c443186eb8b4cee00d4c66f124ccd4e.png" alt="Facebook国別普及率" width="495" height="657" srcset="/uploads-archive/2016/05/5c443186eb8b4cee00d4c66f124ccd4e.png 495w, /uploads-archive/2016/05/5c443186eb8b4cee00d4c66f124ccd4e-226x300.png 226w, /uploads-archive/2016/05/5c443186eb8b4cee00d4c66f124ccd4e-228x303.png 228w" sizes="(max-width: 495px) 100vw, 495px" /></p>
<p><a href="https://www.auncon.co.jp/corporate/2015/0114.pdf" target="_blank">https://www.auncon.co.jp/corporate/2015/0114.pdf</a></p>
<p>正確な数字は見つからなかったが、台湾では微博よいも圧倒的にFacebookの方が人気なようだ</p>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>台湾は、人口はそこまで多くないものの、訪日旅行者数国別ランキングで20年も前から常に3位に入っている。</p>
<p>日本に関心が強く、芸能、アニメ、TV番組などの文化への知名度は外国の中でトップクラスらしい。</p>
<p>マーケティングの観点から言うとFacebookが活用できるのはやりやすい。</p>
<p>Yahoo!にもリスティングを出せるようで、広告手段は豊富にありそうだ。</p>
<p>1つだけ懸念点として、クレジットカードの利用率が低い。</p>
<p>ただ、越境EC利用者にとってクレジットカード決済は必須なのと、2014年の記事で発行枚数が3,900万枚とあるので</p>
<p>普及はしており、あまり問題にはならなそうだ</p>


台湾のEC市場

large_nino-eye (1).jpg

medium_nino-eye (1).jpg

small_nino-eye (1).jpg

thumbnail_nino-eye (1).jpg

nino-eye (1).jpg

Canvasで波のアニメーションを描画する

<p><a href="/uploads-archive/2016/05/rds.png"><img decoding="async" loading="lazy" src="/uploads-archive/2016/05/rds-300x300.png" alt="rds" width="300" height="300" class="alignnone size-medium wp-image-10678" srcset="/uploads-archive/2016/05/rds-300x300.png 300w, /uploads-archive/2016/05/rds-150x150.png 150w, /uploads-archive/2016/05/rds-228x228.png 228w, /uploads-archive/2016/05/rds.png 301w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
下記事項をSymfony2を適切な箇所に設定します。</p>

		<div id="crayon-649540263db55271153274" 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;">
database_driver="mysql等ドライバーの指定"
database_host="エンドポイント"
database_port="ポート番号"
database_name="データベース名"
database_user=　"ユーザー"
database_password="パスワード"</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-649540263db55271153274-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263db55271153274-2">2</div><div class="crayon-num" data-line="crayon-649540263db55271153274-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263db55271153274-4">4</div><div class="crayon-num" data-line="crayon-649540263db55271153274-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263db55271153274-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263db55271153274-1"><span class="crayon-i">database_driver</span>=<span class="crayon-s">"mysql等ドライバーの指定"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263db55271153274-2"><span class="crayon-i">database_host</span>=<span class="crayon-s">"エンドポイント"</span></div><div class="crayon-line" id="crayon-649540263db55271153274-3"><span class="crayon-i">database_port</span>=<span class="crayon-s">"ポート番号"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263db55271153274-4"><span class="crayon-i">database_name</span>=<span class="crayon-s">"データベース名"</span></div><div class="crayon-line" id="crayon-649540263db55271153274-5"><span class="crayon-i">database_user</span>=　<span class="crayon-s">"ユーザー"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263db55271153274-6"><span class="crayon-i">database_password</span>=<span class="crayon-s">"パスワード"</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>今回はRDSインスタンスの作成は省略させていただきました。<br />
エンドポイントは、データベースの作成完了後、RDSのダッシュボードで確認ができます。<br />
name.abcdefghijklmn.ap-northeast-1.rds.amazonaws.com:3306<br />
のような形で表示されています。</p>
<p>例としては下のようになります。</p>

		<div id="crayon-649540263db5a653332014" 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;">
database_driver="pdo_mysql"
database_host="name.abcdefghijklmn.ap-northeast-1.rds.amazonaws.com"
database_port="３３０６"
database_name="aws_database_name"
database_user=　"user"
database_password="password"</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-649540263db5a653332014-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263db5a653332014-2">2</div><div class="crayon-num" data-line="crayon-649540263db5a653332014-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263db5a653332014-4">4</div><div class="crayon-num" data-line="crayon-649540263db5a653332014-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263db5a653332014-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263db5a653332014-1"><span class="crayon-i">database_driver</span>=<span class="crayon-s">"pdo_mysql"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263db5a653332014-2"><span class="crayon-i">database_host</span>=<span class="crayon-s">"name.abcdefghijklmn.ap-northeast-1.rds.amazonaws.com"</span></div><div class="crayon-line" id="crayon-649540263db5a653332014-3"><span class="crayon-i">database_port</span>=<span class="crayon-s">"３３０６"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263db5a653332014-4"><span class="crayon-i">database_name</span>=<span class="crayon-s">"aws_database_name"</span></div><div class="crayon-line" id="crayon-649540263db5a653332014-5"><span class="crayon-i">database_user</span>=　<span class="crayon-s">"user"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263db5a653332014-6"><span class="crayon-i">database_password</span>=<span class="crayon-s">"password"</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>注意点</h2>
<ul>
<li>他サーバー等から接続する場合は、セキュリティユーザーのインバウンドに接続元のIPアドレスを追加する必要があります。（xxx.xxx.xxx.xxx/32等）。
</li>
<li>MySQLのバージョンは5.5以上を選択した方が良さそう。<br />
<a href="/uploads-archive/2016/05/8b5acae9b169fc723508af45429b05c2.png"><img decoding="async" loading="lazy" src="/uploads-archive/2016/05/8b5acae9b169fc723508af45429b05c2-300x94.png" alt="error_aws" width="300" height="94" class="alignnone size-medium wp-image-10695" srcset="/uploads-archive/2016/05/8b5acae9b169fc723508af45429b05c2-300x94.png 300w, /uploads-archive/2016/05/8b5acae9b169fc723508af45429b05c2-768x240.png 768w, /uploads-archive/2016/05/8b5acae9b169fc723508af45429b05c2-228x71.png 228w, /uploads-archive/2016/05/8b5acae9b169fc723508af45429b05c2.png 1022w" sizes="(max-width: 300px) 100vw, 300px" /></a>
</li>
</ul>

Symfony2からAmazon RDSへの接続

<p>2016/5/11に株式会社KABUKIがメディアECモール「kabukiペディア」を無料で提供開始することが発表されました。</p>
<h1>注目のメディアECモール</h1>
<h2>記事型コンテンツでECへ集客する</h2>
<p>イメージとしては、楽天市場やyahoo!ショッピングのようなEC事業者が各々記事を作成していくモール型のメディアで、事コンテンツをフックとして国内外からのユーザーを集客できる事が期待できます。</p>
<p>以前こちらの記事 <a href="/designer/%E3%81%84%E3%81%BE%E8%A9%B1%E9%A1%8C%E3%81%AE%E5%A5%B3%E3%81%AE%E5%AD%90%E3%81%AB%E4%BA%BA%E6%B0%97%E3%81%AA%E6%83%85%E5%A0%B1%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%8E%B3%E9%81%B8%E3%81%97%E3%81%A6/" target="_blank">いま話題の女の子に人気な情報アプリを厳選してみた</a>　で紹介しています「MERY（メリー）」では、月間PV3億、EC売上は月額数十億円にものぼります。</p>
<p>ECサイトの商品ページではなく記事として掲載することには、記事によって潜在的な需要を興味関心のあるコンテンツメディアによって喚起させ、そのあと同じページ内で商品紹介を行う事によって、ECでの購入につなげる働きがあるのです。</p>
<p>こういった動きは日本国内にとどまらず、中国ではモバイル特化型の越境ECアプリ、アメリカでは「Thrilist」というアプリが同様に展開しているそうです。</p>
<p>（興味があったのですが残念ながらAndroidではアプリは見つかりませんでした。iphoneはありましたが･･･）</p>
<h2>kabukiペディアではどのような事ができるのか</h2>
<p>・記事コンテンツから商品ページが一括登録で記事型のコンテンツを作成できる、商品へのリンクは自社サイトもしくは大手ECモールの商品APIを活用OK<br />
・流入から購入までの効果測定も可能、自社サイトで購入したのか、もしくはモールを利用して購入したのかも把握できる<br />
・<strong>インバウンドも今後はターゲットとするため、多言語システムも備わっている。</strong>直訳はされず、翻訳のサポートも充実しているとの事</p>
<p>kabukiペディアは、今後中国圏の獲得を目指しているそうで、越境ECへの対応後には、中国の旅行会社と提携し記事を提供。反応が良ければ、連携しているSNSWechatで拡散、また中国でSIMカード付きの情報誌を発刊し、「kabukiメディア」に掲載されている商品を掲載する予定だそうです。</p>
<p>さらに買い物意欲を掻き立てる仕組みとして、「VRショッピング＆観光」サービスを2017年春のリリースに向けて米国の開発チームと連携し、サービス構築をスタートしているそうです。</p>
<p>参考記事　「<a href="https://ecnomikata.com/ecnews/strategy/8954/" target="_blank">新時代到来。メディアECモール「kabuki ペディア」誕生　- ECのミカタ &#8211;</a>」</p>
<h2>感想</h2>
<p>この記事を見てから、そういえば記事型のECサイトって多いかもしれないと感じています。それが、メディアECモールという総称というのも初めて知りましたが、普段私が見ているアプリやサイトがソレだとしたら、買い物意欲を自然と掻き立てられているもんなんだな･･･と思いました。<br />
また、弊社も中国に強いECとして<a href="http://http://launchcart.jp/">Launchcart</a>がありますので、kabukiペディアがどの程度、多言語システムが充実しているのかが気になりました。</p>
<p>kabukiペディアさんが行おうとしている「VRショッピング＆観光」は、弊社でも何度か話題になっていますが、こんなに早く実現するとは思ってもみませんでした。自社でも挑戦出来たらいいな～</p>


新時代到来？無料のメディアECモールが越境ECにも対応

<p>ネットショップ・通販の事業を行っている方の多くは、仕入れの際に出る大量の段ボールや梱包材の廃棄で困っているのではないでしょうか。</p>
<p>今は事業者なら段ボールも捨てるのにお金がかかってしまう時代です。（地域によるかもしれませんが）毎回、大量にあるので廃棄するためにコンビニで廃棄用のシールを購入するのもめんどくさいですし、金額も安いわけではありません。</p>
<p>しかし、世の中には無料で古紙・段ボールを回収してくれるという、なんともありがたい業者様が存在しております。まとめましたので、必要な方はぜひご利用下さい。</p>
<h2>業者の回収ルートを確認する</h2>
<p>回収してくれる業者さんは、それぞれ回収時に通るルートが決まっているらしく、ルートから外れていると有料になってしまう場合があります。回収先の住所をまず伝えて確認してもらってください。</p>
<h2>量が少ないと来てくれない</h2>
<p>量が少なすぎると業者さんにとっては、回収に向かっても割に合わなくなってしまうので断られる可能性があります。そういう場合は2週間分などある程度溜まったタイミングでお願いすれば大丈夫だと思います。</p>
<h2>段ボールを無料で回収してくれる業者まとめ</h2>
<h3>明正商会</h3>
<p><a href="http://www.meiseisyoukai.com/">http://www.meiseisyoukai.com/</a></p>
<p>０４８－２６５－８２１７</p>
<p>地域：東京２３区・埼玉</p>
<p>内容：古紙・段ボール無料回収</p>
<p>かなりフットワークが良い業者さんですぐに対応してくれます。私もこちらにお願いをしています。回収は深夜～早朝に行うそうです。</p>
<p>&nbsp;</p>
<h3>練馬リサイクルサポート</h3>
<p><a href="http://www.nerima-recycle.com/">http://www.nerima-recycle.com/</a></p>
<p>地域：東京・埼玉</p>
<p>内容：古紙・段ボール　50キロ以下は有料になるようです。</p>
<h3>東京紙業株式会社</h3>
<p><a href="http://www.tokyo-s.com/recycling/">http://www.tokyo-s.com/recycling/</a></p>
<p>地域：東京埼玉</p>
<p>内容：古紙・段ボール　200キロ以下は有料。ルートに入っていれば無料になるかもしれません。</p>
<h3>株式会社ＤＳＰ</h3>
<p><a href="http://www.dspeco.co.jp/paper/">http://www.dspeco.co.jp/paper/</a></p>
<p>詳しい事は見積もり次第ですが、古紙・段ボールを買い取ってくれるそうです。</p>
<h3>文本商店</h3>
<p><a href="http://www.fumimoto.net/">http://www.fumimoto.net/</a></p>
<p>地域：大坂</p>
<p>内容：古紙・段ボール　アルミなども回収可能だそうです。</p>
<h3>株式会社トヨダ</h3>
<p><a href="http://www.toyoda.co.jp/customer/">http://www.toyoda.co.jp/customer/</a></p>
<p>地域：京都</p>
<p>内容：古紙・段ボール　100キロ以下は有料</p>


small_ebbb7795e9197aaa8e123fb36c218a3b_s.jpg

thumbnail_ebbb7795e9197aaa8e123fb36c218a3b_s.jpg

ebbb7795e9197aaa8e123fb36c218a3b_s.jpg

経費削減！無料で古紙・段ボールを持って行ってくれる業者まとめ

<p>あくなきガントチャートへの愛。そして、生産性向上への追求。</p>
<p>過去に何度も生産性向上のためのツールを紹介してきましたが、その中でも未だにしっくり来ていなかったのが、スケジュール管理ツールです。</p>
<p>社内のタスク管理はbacklogに集約しているので、その中でスケジュール管理に不都合はないのですがbacklogやredmineなどのツールを使っていないお客様との共有をする時、複数社が集まるチームでのプロジェクトの時、backlogやredmineでも個別にアカウントが必要で初めてのツールを使って頂くとなるとよほど長く続くプロジェクトでもない限り導入ハードルがどうしても高いんですよね。</p>
<p>一番ハードルが低く皆さんに見て頂けるのがエクセルですが、雛形はあれど作成に一番時間が掛かり、軌道修正の必要が生じた時やバージョン管理をしていくのが非常に工数が掛かります。</p>
<p>そんな中でもっと手軽に共有するためのスケジュール管理ツールでしっくり来たものが正直なかったのですが今回、Googleカレンダーと連携する「<a href="https://www.ganttplanner.com/" target="_blank">GANTTplanner</a>」というサービスがあったのでご紹介します。</p>
<h2>料金プラン</h2>
<p><a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10660" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart0" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>月＄19からとなっており、初回は30日の無料期間がついています。</p>
<h2>使い方</h2>
<h3>アカウント登録</h3>
<p><a href="/uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10661" src="/uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2-291x300.png" alt="許可のリクエスト" width="291" height="300" srcset="/uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2-291x300.png 291w, /uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2-768x793.png 768w, /uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2-228x235.png 228w, /uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2.png 936w" sizes="(max-width: 291px) 100vw, 291px" /></a></p>
<p>登録はおなじみのGoogle認証なので、フォームの入力などは一切ありませんでした。</p>
<p><a href="/uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10662" src="/uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart-300x159.png" alt="GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart" width="300" height="159" srcset="/uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart-300x159.png 300w, /uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart-768x406.png 768w, /uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart-1024x542.png 1024w, /uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart-228x121.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h3>ガントチャートの登録</h3>
<p><a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10663" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart00" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ガントチャート用のカレンダーを新規作成します。</p>
<p>今回は「test」という名前で作成しました。</p>
<p>最初、自分の日々の予定を入れているメインのカレンダーを選択してしまったら打ち合わせの予定などが全て読み込まれカオス状態になりました。</p>
<p><a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10665" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>あとはガシガシとタスクの大項目を作り、</p>
<p><a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10666" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart2" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>横にドラッグして個別タスクを登録していきます。</p>
<p>サービスの画面は英語ですが、日本語も登録いけます。</p>
<p>まさに、横スクロールに最適化したGoogleカレンダーといったところです。</p>
<h3>日、週、月、四半期さまざまな表示形式に対応</h3>
<p><a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10667" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart6" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>大きなプロジェクトから小さなプロジェクトまでさまざま対応出来ますし、俯瞰して見るときにも便利ですね。</p>
<h3>ガントチャートのエクスポート</h3>
<p><a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10657" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart4" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>画像かPDFでダウンロード出来ます。</p>
<p><a href="/uploads-archive/2016/05/test_export.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10658" src="/uploads-archive/2016/05/test_export-300x80.jpg" alt="test_export" width="300" height="80" srcset="/uploads-archive/2016/05/test_export-300x80.jpg 300w, /uploads-archive/2016/05/test_export-768x206.jpg 768w, /uploads-archive/2016/05/test_export-1024x274.jpg 1024w, /uploads-archive/2016/05/test_export-228x61.jpg 228w, /uploads-archive/2016/05/test_export.jpg 1360w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>こちらは実際にダウンロードした画像です。</p>
<h3>ガントチャートの共有</h3>
<p>ガントチャートの共有の仕方はGoogleカレンダーに準拠します。</p>
<p><a href="http://help.ganttplanner.com/knowledgebase/articles/447142-how-do-i-share-a-gantt" target="_blank">http://help.ganttplanner.com/knowledgebase/articles/447142-how-do-i-share-a-gantt</a></p>
<p><a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10656" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5-300x160.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart5" width="300" height="160" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5-300x160.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5-768x409.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5-1024x546.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>共有されていないアカウントでアクセスするとこのようにアラートが出て表示されません。</p>
<h3>Googleカレンダーからの見え方</h3>
<p><a href="/uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10653" src="/uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b-300x161.png" alt="スターフィールド株式会社   カレンダー   2016年 5月 15日 の週" width="300" height="161" srcset="/uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b-300x161.png 300w, /uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b-768x411.png 768w, /uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b-1024x548.png 1024w, /uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>testというカレンダーだけを表示しています。</p>
<p>初めて知ったのですが、一つのカレンダーの中でも予定別に色を変更出来るのですね。</p>
<h2>まとめ</h2>
<p>お手軽さでは一番よいツールかもしれません。</p>
<p>必要十分な機能を備えつつ、Googleカレンダーで出来ることをガントチャートツールとして見せてくれています。</p>
<p>共有は申し分ないのですが、エクスポートがもし、スプレッドシートかエクセル形式で出力出来たら最強です。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2016/06/01

2016/06/01

2016/06/01

2016/06/01

2016/05/31

2016/05/25

2016/05/25

2016/05/25

2016/05/25

2016/05/25

2016/05/25

2016/05/25

2016/05/24

2016/05/23

2016/05/18

2016/05/18

2016/05/18

2016/05/18