<p>botのイメージというと、Twitterで機械的に過去の発言などをつぶやく有名人botやとあるジャンルに絞ったコピペを投稿するbotが私の中での定義に近かったのですが、もっと広い意味合いでbotという言葉が使われ始めているなと思っていたところにtechcrunchをみていて、様々なbotを集めた「Botlist」というサイトがあることを知ったのでご紹介です。</p>
<p><a href="http://techcrunch.com/2016/04/11/botlist-is-an-app-store-for-bots/" target="_blank">Botlist is an app store for bots</a></p>
<p>なんていう記事を書いていたら、cnetでも<a href="http://japan.cnet.com/news/commentary/35081012/" target="_blank">マイクロソフトのボット戦略&#8211;各部門の取り組みを探る</a>という記事を発見しました。</p>
<p>bot盛り上がってますね。</p>
<h2>Botlist</h2>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/botlist_%e2%80%a2_an_app_store_for_bots_/" rel="attachment wp-att-10337"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10337" src="/uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20-300x138.png" alt="Botlist_•_An_App_Store_For_Bots_" width="300" height="138" srcset="/uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20-300x138.png 300w, /uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20-768x354.png 768w, /uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20-1024x472.png 1024w, /uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20-228x105.png 228w, /uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20.png 1263w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h3>対応プラットフォーム</h3>
<ul class="list-unstyled">
<li>Android</li>
<li>Email</li>
<li>Facebook Messenger</li>
<li>iPhone</li>
<li>Kik</li>
<li>Slack</li>
<li>SMS</li>
<li>Telegram</li>
<li>Web</li>
</ul>
<p>これだけの数があるのが初めて知りましたが、中でもKik、Telegramという見慣れないものがあったのですが、どちらもメッセージングサービスであるんですね。</p>
<p><a href="https://www.kik.com/" target="_blank">https://www.kik.com/</a></p>
<p><a href="https://telegram.org/" target="_blank">https://telegram.org/</a></p>
<p>数としてはslackが圧倒的に多く登録されていました。</p>
<p>その中でも気になった一つを試してみました。</p>
<p>またGoogleアナリティクスネタです。</p>
<h2>Statsbot</h2>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/botlist_%e2%80%a2_an_app_store_for_bots_-2/" rel="attachment wp-att-10340"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10340" src="/uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98-300x144.png" alt="Botlist_•_An_App_Store_For_Bots_ 2" width="300" height="144" srcset="/uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98-300x144.png 300w, /uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98-768x369.png 768w, /uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98-1024x492.png 1024w, /uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98-228x110.png 228w, /uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98.png 1170w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>slackとGoogleアナリティクスを連携するbotです。</p>
<p>リンクはタイトル下からしかいけないです。</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot/" rel="attachment wp-att-10341"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10341" src="/uploads-archive/2016/04/Statsbot-300x134.png" alt="Statsbot" width="300" height="134" srcset="/uploads-archive/2016/04/Statsbot-300x134.png 300w, /uploads-archive/2016/04/Statsbot-768x343.png 768w, /uploads-archive/2016/04/Statsbot-1024x458.png 1024w, /uploads-archive/2016/04/Statsbot-228x102.png 228w, /uploads-archive/2016/04/Statsbot.png 1271w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>あとはお馴染みの連携のステップを進めていきます。自分自身slackは初めてですが、この辺りは一緒ですね。</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot-2/" rel="attachment wp-att-10342"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10342" src="/uploads-archive/2016/04/Statsbot-2-300x56.png" alt="Statsbot 2" width="300" height="56" srcset="/uploads-archive/2016/04/Statsbot-2-300x56.png 300w, /uploads-archive/2016/04/Statsbot-2-768x143.png 768w, /uploads-archive/2016/04/Statsbot-2-1024x191.png 1024w, /uploads-archive/2016/04/Statsbot-2-228x43.png 228w, /uploads-archive/2016/04/Statsbot-2.png 1228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>最後にGoogleアナリティクスのビューを選びます。</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot-3/" rel="attachment wp-att-10344"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10344" src="/uploads-archive/2016/04/Statsbot-3-300x221.png" alt="Statsbot 3" width="300" height="221" srcset="/uploads-archive/2016/04/Statsbot-3-300x221.png 300w, /uploads-archive/2016/04/Statsbot-3-768x567.png 768w, /uploads-archive/2016/04/Statsbot-3-1024x756.png 1024w, /uploads-archive/2016/04/Statsbot-3-228x168.png 228w, /uploads-archive/2016/04/Statsbot-3.png 1195w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>完了するとslackの画面にbotが追加されました。</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot___sterfield_slack/" rel="attachment wp-att-10345"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10345" src="/uploads-archive/2016/04/statsbot___sterfield_Slack-300x228.png" alt="statsbot___sterfield_Slack" width="300" height="228" srcset="/uploads-archive/2016/04/statsbot___sterfield_Slack-300x228.png 300w, /uploads-archive/2016/04/statsbot___sterfield_Slack-768x585.png 768w, /uploads-archive/2016/04/statsbot___sterfield_Slack-1024x780.png 1024w, /uploads-archive/2016/04/statsbot___sterfield_Slack-228x174.png 228w, /uploads-archive/2016/04/statsbot___sterfield_Slack.png 1237w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>後は、用意されたコマンドを叩くと応答してくれます。</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot-4/" rel="attachment wp-att-10346"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10346" src="/uploads-archive/2016/04/Statsbot-1-300x183.png" alt="Statsbot" width="300" height="183" srcset="/uploads-archive/2016/04/Statsbot-1-300x183.png 300w, /uploads-archive/2016/04/Statsbot-1-768x467.png 768w, /uploads-archive/2016/04/Statsbot-1-1024x623.png 1024w, /uploads-archive/2016/04/Statsbot-1-228x139.png 228w, /uploads-archive/2016/04/Statsbot-1.png 1147w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>例にあったように</p>

		<div id="crayon-649540263bc35735888758" 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;">
@Statsbot summary yesterday</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-649540263bc35735888758-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-649540263bc35735888758-1"><span class="crayon-sy">@</span><span class="crayon-e">Statsbot </span><span class="crayon-e">summary </span><span class="crayon-i">yesterday</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>と打ち込むと下記のように返してくれました。</p>
<p>&nbsp;</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot___sterfield_slack-3/" rel="attachment wp-att-10353"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10353" src="/uploads-archive/2016/04/statsbot___sterfield_Slack-3-300x141.png" alt="statsbot___sterfield_Slack 3" width="300" height="141" srcset="/uploads-archive/2016/04/statsbot___sterfield_Slack-3-300x141.png 300w, /uploads-archive/2016/04/statsbot___sterfield_Slack-3-768x361.png 768w, /uploads-archive/2016/04/statsbot___sterfield_Slack-3.png 1024w, /uploads-archive/2016/04/statsbot___sterfield_Slack-3-228x107.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>他にも日時のレポートを送ってくれるスケジュールもセット出来るようです。</p>
<h2>まとめ</h2>
<p>bot面白い</p>

slackやdropboxまで様々なbotのまとめサイト「Botlist」

<p>CINEMA4Dを使っているなら一度は見た事があるかもしれませんが、Cineversityというチュートリアルサイトが存在します。Cineversityはできたらカッコイイ表現のチュートリアルを動画でいくつもアップしています。</p>
<p>基本的に全て英語ですが、操作方法を解説してくれる部分については動画の通りに設定をすれば良いので、きちんと聞き取れなくても利用できると思います。</p>
<p>Cineversityにはこちらからどうぞ<a href="http://www.cineversity.com">http://www.cineversity.com</a></p>
<h2>membership option</h2>
<p>Cineversityのメンバーシップにはフリーとプレミアムが存在します。</p>
<p><a href="/uploads-archive/2016/04/2-1.gif" rel="attachment wp-att-10332"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10332" src="/uploads-archive/2016/04/2-1.gif" alt="2" width="640" height="361" /></a></p>
<p>フリーでもチュートリアルを観る事はできるのですが内容に制限があります。</p>
<p>プレミアムは一年間で約1万円さらに初年度は約3万円とかなり割高ですが、結構便利なプラグインをいくつもダウンロードできるので、プラグインを購入したと思えば安いかもしれません。とはいえプレミアムに入るのは高い！という方がほとんどだと思います。約4万円をポンと出すのはかなり厳しい物があります。</p>
<p>しかし、MSAに加入しているユーザーなら無料でプレミアムメンバーとしてCineversityを利用できます。キャンペーンなどでCINEMA4Dを購入した方はMSAがついてくる事がよくあるみたいなので、MSAに加入している方は是非利用してみてください。</p>
<h2>プレミアムへのクーポンコード</h2>
<p>MSA加入者にはMAXONからCineversityをプレミアムで利用するためのクーポンコードがメールで送られます。おそらくMSAに加入した時点で送られているようなので確認してみてください。</p>
<p>メールの内容は全て英語表記で「Free Cineversity voucher for MSA customers」というタイトルで送られてきます。</p>
<p>&nbsp;</p>
<p>送られてきたクーポンコードをUse Couponから入力し、名前や住所などを入力すればプレミアムメンバーに変更できます。</p>
<h2>便利なプラグインをダウンロードできるCV-TOOLBOX</h2>
<p>TOOLBOXがどんな物かこちらを見て頂ければ分かりやすいと思います。</p>
<p>http://www.cineversity.com/vidplaylist/cineversity_resources/cv_toolbox</p>
<p>TOOLBOXはCineversityからダウンロードして、他のプラグインと同様に「プラグイン」のフォルダに入れてください。その後、CINEMA4Dを立ち上げ直すとCineversityの登録アドレスとパスを入力してログインすればOKです。</p>
<p><a href="/uploads-archive/2016/04/3-1.gif" rel="attachment wp-att-10333"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10333" src="/uploads-archive/2016/04/3-1.gif" alt="3" width="640" height="382" /></a></p>
<p>プラグインにCV-Toolboxという名前で入っています。</p>
<p><a href="/uploads-archive/2016/04/4.gif" rel="attachment wp-att-10334"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10334" src="/uploads-archive/2016/04/4.gif" alt="4" width="536" height="225" /></a></p>
<p>CV-Toolbox開き、ここから必要なプラグインにチェックを入れる事でダウンロードができます。</p>
<p><a href="/uploads-archive/2016/04/5.gif" rel="attachment wp-att-10335"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10335" src="/uploads-archive/2016/04/5.gif" alt="5" width="640" height="370" /></a></p>


CINEMA4D 最新のチュートリアルとプラグインを利用できるCineversity

<p>webサイトを翻訳する場合、複数の方法がある。</p>
<p>その中でも最も簡単に実装できる方法の1つはフロント側での対応 = jsでの対応と思っており、良いツールなどが無いか調べてみた。</p>
<p>&nbsp;</p>
<p>いくつか調べてみた中ではこれの評価が高いように思えたため使ってみた</p>
<p><a href="http://www.openxrest.com/translatejs/" target="_blank">http://www.openxrest.com/translatejs/</a></p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/65/" target="_blank">デモ</a></p>
<p>&nbsp;</p>
<p>構造としては、以下のようにまずjsonで定義しておく必要がある。</p>

		<div id="crayon-649540263ba46821042236" 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;">
var t = {
	signin: {
		jp: "ログイン",
		en: "Sign in"
	},
	registration: {
		jp: "会員登録",
		en: "Registration"
	},
	cart: {
		jp: "カート",
		en: "Cart"
	},
	contactus: {
		jp: "お問い合わせ",
		en: "Contact Us"
	}
}</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-649540263ba46821042236-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-2">2</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-4">4</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-6">6</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-8">8</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-10">10</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-12">12</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-14">14</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-16">16</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-18">18</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-649540263ba46821042236-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">t</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-2"><span class="crayon-h">	</span><span class="crayon-i">signin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-3"><span class="crayon-h">		</span><span class="crayon-i">jp</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"ログイン"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-4"><span class="crayon-h">		</span><span class="crayon-i">en</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"Sign in"</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-5"><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-649540263ba46821042236-6"><span class="crayon-h">	</span><span class="crayon-i">registration</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-7"><span class="crayon-h">		</span><span class="crayon-i">jp</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"会員登録"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-8"><span class="crayon-h">		</span><span class="crayon-i">en</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"Registration"</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-9"><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-649540263ba46821042236-10"><span class="crayon-h">	</span><span class="crayon-i">cart</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-11"><span class="crayon-h">		</span><span class="crayon-i">jp</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"カート"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-12"><span class="crayon-h">		</span><span class="crayon-i">en</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"Cart"</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-13"><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-649540263ba46821042236-14"><span class="crayon-h">	</span><span class="crayon-i">contactus</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-15"><span class="crayon-h">		</span><span class="crayon-i">jp</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"お問い合わせ"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-16"><span class="crayon-h">		</span><span class="crayon-i">en</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"Contact Us"</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-17"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-18"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>それを例えば</p>

		<div id="crayon-649540263ba4a916126260" 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').translate({lang: "jp", t: t});</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-649540263ba4a916126260-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-649540263ba4a916126260-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'body'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">translate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">lang</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"jp"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">t</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">t</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このように特定の要素(ここではbody)に対して実行すると指定した言語に変換される</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>定義が面倒だが、1つの選択肢としては手軽に導入できて良いかもしれない</p>

多言語翻訳用jQuery【translate.js】

スマホに合ったステップリストをインラインSVGで

<h2>出版不況と言われていますが絵本はどーなの？</h2>
<p>世の中は出版不況が声高に叫ばれています。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/f3bf3f308449f55e3c5f91f4151721dd_s-300x200.jpg" alt="f3bf3f308449f55e3c5f91f4151721dd_s" width="300" height="200" class="aligncenter size-medium wp-image-10247" srcset="/uploads-archive/2016/04/f3bf3f308449f55e3c5f91f4151721dd_s-300x200.jpg 300w, /uploads-archive/2016/04/f3bf3f308449f55e3c5f91f4151721dd_s-228x152.jpg 228w, /uploads-archive/2016/04/f3bf3f308449f55e3c5f91f4151721dd_s.jpg 640w" sizes="(max-width: 300px) 100vw, 300px" /><br />
（´-`）.｡oO（叫ぶおじさんの写真。特にいみはないです。</p>
<p>現在、1年間に国内で出版された書籍と雑誌の売上高は1兆6000億円を割り込む程度なのですが、これは市場規模がピークだった1996年の2兆6563億円の6割を下回る水準だそうで。</p>
<p>こりゃひどいですね。</p>
<p>じゃあ、絵本はどーなの？（もっとヒドそうだな）と思って調べてみますと、</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/childrens-book-market-process-300x236.jpg" alt="children&#039;s book-market-process" width="300" height="236" class="aligncenter size-medium wp-image-10246" srcset="/uploads-archive/2016/04/childrens-book-market-process-300x236.jpg 300w, /uploads-archive/2016/04/childrens-book-market-process-228x180.jpg 228w, /uploads-archive/2016/04/childrens-book-market-process.jpg 703w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>これが実はそんなにヒドくないんですね。</p>
<h3>絵本が比較的売れてる3つの理由</h3>
<ol>
<li>子供は減っているが子供一人あたりにかける教育費はそんなに減っていない？</li>
<li>学校や図書館で最低限度の数は買い支えられている？</li>
<li>大手が参入して、出版点数が増えている。</li>
</ol>
<p>１と２は推測ですが、３はマジっぽいです。</p>
<p>小学生向けのエンターテイメント小説がブームになったときに、大手出版社がこぞって児童文学に新規参入、または力を入れ始めたそうです。</p>
<p>異色なところではブックオフが２０１２年にプライベート絵本ブランドを立ち上げて、価格は税込み５００円。<br />
公式通販サイトや一部ブックオフ店舗、書店などで売られています。</p>
<p>また、作品の作り方も一風変わっていまして。</p>
<blockquote><p>出版する絵本は、フジテレビKIDS などが主催する一般公募の「Be 絵本大賞」の選考から漏れた作品の一部。同賞はこれまで4回実施され、累計6288件の応募があるものの、絵本として出版されるのは一部の作品だった。</p>
<p>そこで、同社は「子どもたちにもっと多くの絵本を読んでほしい」という思いから、選考には漏れたものの良質な絵本作品を出版することを決めた。今回出版するのは「Be 絵本大賞」の過去の優秀作品賞・特別賞獲得受賞作品を中心とした7タイトル。<br />
<a href="http://www.advertimes.com/20120913/article85562/">http://www.advertimes.com/20120913/article85562/</a></p></blockquote>
<h2>新作よりもどうしても古典が売れちゃう絵本業界</h2>
<p>出版業界の低迷のわりには善戦している絵本ですが、どうしても克服できない問題もあります。</p>
<p>それは、新作よりもどうしても古典が売れてしまうという事情です。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/110717feature4_1_list_big-278x300.jpg" alt="110717feature4_1_list_big" width="278" height="300" class="aligncenter size-medium wp-image-10252" srcset="/uploads-archive/2016/04/110717feature4_1_list_big-278x300.jpg 278w, /uploads-archive/2016/04/110717feature4_1_list_big-228x246.jpg 228w, /uploads-archive/2016/04/110717feature4_1_list_big.jpg 718w" sizes="(max-width: 278px) 100vw, 278px" /></p>
<p>トーハンが出している絵本国内ベストセラーリストを見ると、1位いないいないばあ、2位ぐりとぐら、3位はらぺこあおむし……</p>
<p>めっちゃ見たことありません？？　我々が子供の頃に読んだものと変わりなくないでしょうか。</p>
<p>つまり、ほんの一握りのベストセラーは売れ続け、新作は数をたくさん出すことでなんとか全体として売上を立てているという状況なのです。</p>
<p>たしかに絵本の場合、親が子供に選んであげることになるのですから、「よくわからん新作」よりは「自分も読んで思い出深い古典」を与えてしまう気持ちもわかります。</p>
<h2>でじたる絵本の未来</h2>
<p>では、これからの絵本はどうなるのでしょうか。</p>
<p>角川グループホールディングス会長角川歴彦さんは、「電子書籍に一番向いているのは絵本ではないか？」とインタビューで答えています。</p>
<blockquote><p>
<strong>「電子書籍に一番向いているのは絵本ではないか？」と角川さんは語る。iPadが出たときに、直感的にこれはデジタルえほんが一番いいと思ったというのだ。</strong>これまで、子どもたちも含め、日本人には、パソコンは向かないと言われて来た。タイプライターで言葉を入力する習慣もないからだ。だから、日本は情報化社会に取り残されていくと言われてきたという。しかし、<strong>iPadが登場すると、子どもたちは当たり前のようにタッチして使う。</strong>「タッチ革命」という言葉が生まれた。そのタッチ革命で、日本人の生活は、がらっと変わった。西洋人に立ち後れる理由がなくなったのだ。ITの技術革新はアメリカで始まったが、すでに日本人のDNAになっている。それは子どもも同じ。<strong>これまでは、保護者が子どもに与えるのはテレビだったが、今の親をみていると、タブレットを与えている。「テレビでも見ていなさい。」ではなく、「タブレットでも見ていなさい。」となった。子どもたちはデジタルネイティブだが、お父さんお母さんもデジタル世代。新しい時代へと革命的に変化している。</strong>「子どもたちの経験は、テレビで見たではなく、タブレットで見たに変わってきています。テレビが誕生してから60年。歴史がいま大きく変わろうとしています。」<br />
<a href="http://www.canvas.ws/nanako/?p=195" target="_blank">http://www.canvas.ws/nanako/?p=195</a></p></blockquote>
<p>たしかに、小さな子供たちが親のスマホやタブレットを触りたがるという話はよく聞きます。</p>
<p>僕はなんとなく子供たちには紙の本に触れてほしいという気持ちがあるのですが、ただの感傷でしょうか。</p>
<p>紙への愛着も、デジタルへの抵抗もゼロの子供たち。<br />
彼らの選択や如何！！</p>
<h3></h3>


なんか気になったので絵本出版業界について調べてみた

<h3>vimで連番を作る！</h3>
<div style="padding-left: 15px;">
  併せて小技紹介です。</p>
<p>  普段vimmerだけど連番を使う時だけExcelを開いてrowを使っていませんか？</p>
<p>  そんな貴方にこんな技を紹介です。</p>
<p>  vimにはインクリメント機能が実は存在します。<br />
  Ctrl+a<br />
  を数値に合わせて押すだけです。<br />
  (設定次第では英字も対応可能です。必要性があれば。)</p>
<p>  上記を活用してやってみましょう</p></div>
<h3>実例</h3>
<div style="padding-left: 15px;">
  1を入力します。ここまではいつもどおりです。<br />
<a href="/uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63.png" rel="attachment wp-att-10267"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63-300x183.png" alt="スクリーンショット 2016-04-05 17.53.12" width="300" height="183" class="alignnone size-medium wp-image-10267" srcset="/uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63-300x183.png 300w, /uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63-228x139.png 228w, /uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63.png 733w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  マクロを作るためにレコードモードに変更します。<br />
  qを押したあと、適当な文字(ここではaとします)を押すとレコーディングスタート！</p>
<p>  yyを押して今の行をコピー。<br />
  pを押して次の行へペースト。(自動的に次の行へ移動されます)<br />
<a href="/uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3.png" rel="attachment wp-att-10268"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-300x173.png" alt="スクリーンショット 2016-04-05 17.55.42" width="300" height="173" class="alignnone size-medium wp-image-10268" srcset="/uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-300x173.png 300w, /uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-768x443.png 768w, /uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-228x131.png 228w, /uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3.png 831w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  ここで Ctrl+a を押す！すると！<br />
<a href="/uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a.png" rel="attachment wp-att-10269"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-300x176.png" alt="スクリーンショット 2016-04-05 17.55.49" width="300" height="176" class="alignnone size-medium wp-image-10269" srcset="/uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-300x176.png 300w, /uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-768x450.png 768w, /uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-228x134.png 228w, /uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a.png 844w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  そして再びqを押してレコーディング終了です。</p>
<p>  では、スタートを3でやってみましょう。<br />
<a href="/uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff.png" rel="attachment wp-att-10270"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-300x184.png" alt="スクリーンショット 2016-04-05 17.56.45" width="300" height="184" class="alignnone size-medium wp-image-10270" srcset="/uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-300x184.png 300w, /uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-768x471.png 768w, /uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-228x140.png 228w, /uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff.png 891w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  さらにここからがポイント。<br />
  10@a<br />
  と入力してReturnキーを押下！<br />
<a href="/uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5.png" rel="attachment wp-att-10271"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5-300x193.png" alt="スクリーンショット 2016-04-05 17.57.40" width="300" height="193" class="alignnone size-medium wp-image-10271" srcset="/uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5-300x193.png 300w, /uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5-228x147.png 228w, /uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5.png 754w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  10回分、インクリメント(連番増加)された行が増えましたね。<br />
  アットマーク前が実行回数、最後のaはマクロに登録した文字と言う意味です。</p></div>


vimの小技紹介

<p>前回は、Bigcommerceを紹介しましたが、今回は世界最大といわれる、shopifyを紹介します。</p>
<p>カナダ発のベンチャー企業でこちらは20万ショップが開設済みで100億ドル（1.1兆円の流通総額とのこと。</p>
<p>shopifyは既に上場をしていて、時価総額16億ドル（1800億円）ショップの開設が15分以内に出来るということでインスタントコマースといわれる分野の先駆けです。</p>
<p><a href="https://en.wikipedia.org/wiki/Shopify" target="_blank">https://en.wikipedia.org/wiki/Shopify</a></p>
<h2>サイトからトライアル登録</h2>
<h3>価格表</h3>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/shopify_pricing_-_the_best_ecommerce_platform__now_free_for_14_days/" rel="attachment wp-att-10201"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10201" src="/uploads-archive/2016/04/Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days-300x236.png" alt="Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days" width="300" height="236" srcset="/uploads-archive/2016/04/Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days-300x236.png 300w, /uploads-archive/2016/04/Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days-768x604.png 768w, /uploads-archive/2016/04/Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days-228x179.png 228w, /uploads-archive/2016/04/Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days.png 937w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>Liteプランは非常に安いです。ただ、Onlinestoreにチェックが入っておらず、独自の店構えが出来ない。どこか別のチャネルで商品を紹介してBuyButtonを設置するというような方法しか取れないようです。</p>
<p>プラスして、注目したのがTRANSACTION FEESの項目でBasicでは2%と掲げられており、クレジットカードの手数料と合わせて4.9％は1注文毎に必ず掛かってくる計算になります。</p>
<p>例）</p>
<h4>Basic</h4>
<ul>
<li>月商50万円</li>
<li>月額　3000円</li>
<li>カード手数料　14,500円</li>
<li>トランザクション　10,000円</li>
<li>計27,500円</li>
</ul>
<h4>Pro</h4>
<ul>
<li>月商50万円</li>
<li>月額　8000円</li>
<li>カード手数料　13,000円</li>
<li>トランザクション　5,000円</li>
<li>計26,000円</li>
</ul>
<p>ということで月商50万円クラスでもProを契約したほうがお得だという計算になります。</p>
<h3>3ステップでトライアル登録</h3>
<p>&nbsp;</p>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/ecommerce_software__online_store_builder__pos_-_free_14-day_trial_by_shopify/" rel="attachment wp-att-10203"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10203" src="/uploads-archive/2016/04/Ecommerce_Software__Online_Store_Builder__POS_-_Free_14-day_Trial_by_Shopify-300x232.png" alt="Ecommerce_Software__Online_Store_Builder__POS_-_Free_14-day_Trial_by_Shopify" width="300" height="232" srcset="/uploads-archive/2016/04/Ecommerce_Software__Online_Store_Builder__POS_-_Free_14-day_Trial_by_Shopify-300x232.png 300w, /uploads-archive/2016/04/Ecommerce_Software__Online_Store_Builder__POS_-_Free_14-day_Trial_by_Shopify-228x177.png 228w, /uploads-archive/2016/04/Ecommerce_Software__Online_Store_Builder__POS_-_Free_14-day_Trial_by_Shopify.png 630w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/shopify-sign-up-for-the-best-online-store-software/" rel="attachment wp-att-10204"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10204" src="/uploads-archive/2016/04/e154aec9cb60aa240d1413c3da04d62b-300x252.png" alt="Shopify — Sign up for the best online store software" width="300" height="252" srcset="/uploads-archive/2016/04/e154aec9cb60aa240d1413c3da04d62b-300x252.png 300w, /uploads-archive/2016/04/e154aec9cb60aa240d1413c3da04d62b-768x645.png 768w, /uploads-archive/2016/04/e154aec9cb60aa240d1413c3da04d62b-1024x860.png 1024w, /uploads-archive/2016/04/e154aec9cb60aa240d1413c3da04d62b-228x192.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/2shopify-sign-up-for-the-best-online-store-software/" rel="attachment wp-att-10205"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10205" src="/uploads-archive/2016/04/5cc71ba0ad951606d98d2b5b5cd214f9-300x201.png" alt="2Shopify — Sign up for the best online store software" width="300" height="201" srcset="/uploads-archive/2016/04/5cc71ba0ad951606d98d2b5b5cd214f9-300x201.png 300w, /uploads-archive/2016/04/5cc71ba0ad951606d98d2b5b5cd214f9-768x514.png 768w, /uploads-archive/2016/04/5cc71ba0ad951606d98d2b5b5cd214f9-1024x685.png 1024w, /uploads-archive/2016/04/5cc71ba0ad951606d98d2b5b5cd214f9-228x153.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>上記の3画面の入力で登録できました。<a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/stershop-home-shopify/" rel="attachment wp-att-10202"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10202" src="/uploads-archive/2016/04/stershop-Home-Shopify-300x160.png" alt="stershop Home Shopify" width="300" height="160" srcset="/uploads-archive/2016/04/stershop-Home-Shopify-300x160.png 300w, /uploads-archive/2016/04/stershop-Home-Shopify-768x410.png 768w, /uploads-archive/2016/04/stershop-Home-Shopify-1024x547.png 1024w, /uploads-archive/2016/04/stershop-Home-Shopify-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>BigCommerceとは異なり、チュートリアルなどは発生せず、このホーム画面から進めていくようです。</p>
<p>ここで読み飛ばすのが後々、仇となります。</p>
<h2>管理画面をザックリチェック！</h2>
<h3>管理画面大項目</h3>
<p>管理画面の項目として翻訳すると以下のような構成でしょうか？</p>
<ul>
<li>検索</li>
<li>ホーム</li>
<li>受注</li>
<li>商品</li>
<li>顧客</li>
<li>レポート</li>
<li>割引</li>
<li>解析</li>
<li>アプリ</li>
<li>設定</li>
</ul>
<p>割引の機能が大項目として入っているのは面白いですね。</p>
<p>頻繁に使い、大きい概念のものからメニューは構成するものでしょうから、Bigcommerceではマーケティングという大項目の中に内包しているものです。</p>
<h3>デザイン編集がどこにもない・・・</h3>
<p>どこを探しても見当たらないと途方にくれていたところ、HOMEの中にある「Add online store」ボタンを押さないといけないんですね。。。</p>
<p>左のメニューを隅々まで見回しましたよ。</p>
<p>ということでようやく左メニューにお店のメニューが追加されました。</p>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/stershop-free-themes-shopify/" rel="attachment wp-att-10207"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10207" src="/uploads-archive/2016/04/stershop-Free-Themes-Shopify-300x160.png" alt="stershop Free Themes Shopify" width="300" height="160" srcset="/uploads-archive/2016/04/stershop-Free-Themes-Shopify-300x160.png 300w, /uploads-archive/2016/04/stershop-Free-Themes-Shopify-768x410.png 768w, /uploads-archive/2016/04/stershop-Free-Themes-Shopify-1024x547.png 1024w, /uploads-archive/2016/04/stershop-Free-Themes-Shopify-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h3>BuybuttonもHOMEから追加</h3>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/monetize_your_blog_or_website_-_make_money_on_your_website/" rel="attachment wp-att-10209"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10209" src="/uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6-300x147.png" alt="Monetize_your_blog_or_website_–_make_money_on_your_website" width="300" height="147" srcset="/uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6-300x147.png 300w, /uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6-768x377.png 768w, /uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6-1024x503.png 1024w, /uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6-228x112.png 228w, /uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6.png 1964w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>BigCommerceなどにもなかった機能として、外部のブログやWebサイト上にスクリプトを設置するだけで、決済のポップアップを立ち上げることが出来るBuybuttonという機能があります。</p>
<p>こちらもHOMEから追加出来ます。↓に公式サイトにあったscriptを置いてみました。</p>
<div data-embed_type="product" data-shop="embeds.myshopify.com" data-product_name="YELLOW WATCHES" data-product_handle="yello-w" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="30373b" data-button_text_color="ffffff" data-background_color="f1f1e9" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>
<p><script type="text/javascript">// <![CDATA[
document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');
// ]]&gt;</script><noscript><a href="https://embeds.myshopify.com/cart/8829753283:1" target="_blank">Buy YELLOW WATCHES</a></noscript></p>
<h2>まとめ</h2>
<p>フリートライアルだけを見る限りでは、BigCommerceが高機能で軍配が。もともとターゲットが違うのかもしれませんが。</p>
<p>しかし、やっぱり当社の<a href="http://launchcart.jp/" target="_blank">LaunchCart</a>負けてない。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Shopifyのフリートライアル版使ってみた

<h3>スプレッドシートのスクリプト活用方法紹介</h3>
<div style="padding-left: 15px;">
  <a href="https://developers.google.com/apps-script/">GAS(Google Apps Script)</a>で実現出来る手軽なシート活用方法です。</p>
<p>  課題管理などを更新日を入れ忘れてどれが最新か解らなくなったことは無いでしょうか？</p>
<p>  GASを活用すれば、そんな記載漏れからおさらば出来ます！</p></div>
<h3>具体的な例</h3>
<div style="padding-left: 15px;">
  スプレッドシートを開いた状態で上部のメニューから<br />
  「ツール」「スクリプトエディタ」<br />
  を選択してください。</p>
<p>  すると新しいウィンドウが出てきます。<br />
  エクセルで言うところのVBAマクロエディタのようなものです。<br />
  (実際はVBAほど実行範囲は広くありません)</p>
<p>  「コード.gs」というスクリプトがデフォルトで表示されています。<br />
  右側のペインのテキストエリアに以下のように入力してみましょう。</p>
<p></p>

		<div id="crayon-649540263b44f887222715" 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 onEdit(event){
    var ss = event.source.getActiveSheet(); //編集したシート
    var us = Session.getActiveUser().getEmail(); //編集者のメールアドレス

    if (ss.getName() == "課題管理") {
      var Row;
      Row = ss.getActiveCell().getRow();
      Col = ss.getActiveCell().getColumn();
      if(Row&gt;2 &amp;&amp; Col &lt; 9 &amp;&amp; Col &gt; 2){ //2行目までがタイトルヘッダーなので
        ss.getRange(Row, 10).setValue(new Date()); // JカラムにDateを突っ込みます
      }
    }
  }</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-649540263b44f887222715-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-2">2</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-4">4</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-6">6</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-8">8</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-10">10</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-12">12</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-13">13</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-649540263b44f887222715-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">onEdit</span><span class="crayon-sy">(</span><span class="crayon-i">event</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">ss</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">event</span><span class="crayon-sy">.</span><span class="crayon-i">source</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveSheet</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//編集したシート</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">us</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">Session</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveUser</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">getEmail</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//編集者のメールアドレス</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-4">&nbsp;</div><div class="crayon-line" id="crayon-649540263b44f887222715-5"><span class="crayon-h">&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">ss</span><span class="crayon-sy">.</span><span class="crayon-e">getName</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">"課題管理"</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-649540263b44f887222715-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">Row</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">Row</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">ss</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveCell</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">getRow</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-649540263b44f887222715-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">Col</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">ss</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveCell</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">getColumn</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">Row</span><span class="crayon-h">&gt;</span><span class="crayon-cn">2</span><span class="crayon-h"> </span><span class="crayon-sy">&amp;&amp; Col &lt; 9 &amp;&amp; Col &gt; 2){ //2行目までがタイトルヘッダーなので</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-10"><span class="crayon-sy">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ss.getRange(Row, 10).setValue(new Date());</span><span class="crayon-h"> </span><span class="crayon-c">// JカラムにDateを突っ込みます</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-13"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>  上の例だと列の番号がベタ書き(数字をそのまま直接書いて)しています。</p>
<p>  内容は<br />
  「編集したシートが」「&#8221;課題管理&#8221;と言う名前なら」<br />
  かつ<br />
  「編集したセルが」「2行目以降」かつ「3列目から8列目までの範囲」<br />
  の時、<br />
  「編集したセルの」「10列目に」「現在の時刻を」「代入する」<br />
  です。</p>
<p>  これだけでは何も動きません。</p>
<p>  上部メニューから<br />
  「リソース」「現在のプロジェクトのトリガー」<br />
  を選択すると以下の様なダイアログが表示されます。<br />
<a href="/uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544.png" rel="attachment wp-att-10250"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-300x92.png" alt="スクリーンショット 2016-04-05 17.41.29" width="300" height="92" class="alignnone size-medium wp-image-10250" srcset="/uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-300x92.png 300w, /uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-768x236.png 768w, /uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-228x70.png 228w, /uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544.png 896w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  参照画像の例だと<br />
  「onEditという関数を」「スプレッドシートの」「値が変更された時」<br />
  に実行されるという内容となります。</p>
<p>  つまりイベントに対して自分の好きな命令をGASが定めた範囲内で自由に自動化出来るという仕組みです。</p></div>

スプレッドシート管理の小技紹介

<p>JavaScriptのエラーが発生した場合、エラーを通知してくれるChromeの拡張機能の紹介です。<br />
Chromeを使用していれば、JavaScriptのエラーが発生した際に、コンソールに表示してくれるのですが、コンソールを開かない限り気づくことができません。<br />
そこで、JavaScript Errors Notifierという拡張機能を追加すると、コンソールを開かなくても、ツールバーや画面の右下にエラーを通知してくれます。</p>
<h2>追加方法</h2>
<p><a href="https://chrome.google.com/webstore/detail/javascript-errors-notifie/jafmfknfnkoekkdocjiaipcnmkklaajd/related?hl=ja" class="link">JavaScript Errors Notifier</a><br />
にて、追加する。</p>
<h2>使用例</h2>
<p>下のような形でエラーを通知してくれます。<br />
 &#8211; ツールバー上：<br />
<a href="/uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f.png" rel="attachment wp-att-10230"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f-300x52.png" alt="スクリーンショット 2016-04-05 17.20.34" width="300" height="52" class="alignnone size-medium wp-image-10230" srcset="/uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f-300x52.png 300w, /uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f-228x40.png 228w, /uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f.png 389w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p> &#8211; 画面右下：<br />
<a href="/uploads-archive/2016/04/cfc05b21b03413488632549b51866111.png" rel="attachment wp-att-10231"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/cfc05b21b03413488632549b51866111.png" alt="スクリーンショット 2016-04-05 17.20.55" width="193" height="169" class="alignnone size-full wp-image-10231" /></a></p>
<h2>補足</h2>
<p>以前に作られて以降、アップデートは行われていなかったのですが、今年に入ってから開発が行なわれているようです。<br />
<a href="https://github.com/barbushin/javascript-errors-notifier" class="link">barbushin/javascript-errors-notifier</a></p>
<p>Angular.jsのエラーにも対応してきているようです。</p>


JavaScript Errors Notifier

<p>花びらが散る様子を表現する方法としてはいくつかあるようですが、今回はシミュレーションのパーティクルとモディファイアを使用して制作してみました。</p>
<p>ちなみに事前に桜の木と花びらのオブジェクトがある前提の説明になります。</p>
<h2>エミッタから花びらを出す</h2>
<p>エミッタから花びらが出すための設定です。</p>
<p>まず花びらのオブジェクトをエミッタの子にします。</p>
<p><a href="/uploads-archive/2016/04/1.gif" rel="attachment wp-att-10225"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10225" src="/uploads-archive/2016/04/1.gif" alt="1" width="284" height="60" /></a></p>
<p>エミッタ（吹き出し口）の角度を下向きにして、エミッタの「パーティクル」から「進行方向を向く」と「エディタにオブジェクトを表示」にチェックを入れます。その他の要素については必要に応じて変更してみてください。</p>
<p>次にエミッタのサイズと位置を木のオブジェクトに合わせて調整します。</p>
<h2>風モディファイアを設定する</h2>
<p>花びらが風に乗って散る様子を表現するために風のモディファイアを使います。</p>
<p>モディファイアを効かせるためにはエミッタの「含む」にモディファイアをドラッグ&amp;ドロップしてあげればOKです。モディファイアを複数使用する場合には「含む」の上から順番に効いていきます。</p>
<p><a href="/uploads-archive/2016/04/2.gif" rel="attachment wp-att-10242"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10242" src="/uploads-archive/2016/04/2.gif" alt="2" width="312" height="204" /></a></p>
<p>風モディファイアの「オブジェクト」で風速をいじって花びらが風に流される強さを調整します、タービュランスを少し上げると単純な直線上に吹く風ではなく、実際の気流のように曲線を描く風を吹かせる事ができます。モードは加速度で良いかと思います。</p>
<h2>重力モディファイアを設定する</h2>
<p>風だけですと花びらが舞う感じがあまり出ませんので重力を追加します。先ほど同様にエミッタの「含む」に追加します。</p>
<p><a href="/uploads-archive/2016/04/3.gif" rel="attachment wp-att-10244"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10244" src="/uploads-archive/2016/04/3.gif" alt="3" width="276" height="136" /></a></p>
<p>「オブジェクト」の重力加速度を低めに調整して軽い物が落ちるようにします。</p>
<h2>シミュレーションにスプラインを使った動きを追加する</h2>
<p>花びらが散るようなシミュレーションの場合、来てほしい位置や角度にタイミングよく花びらが来てくれません。アニメーションを走らせる度に異なるので、カメラ前に1枚だけ丁度良く来てほしいなどの演出は狙い通りになりません。</p>
<p>こういう場合は「スプラインに沿う」のタグを使うなどして、狙い通りにオブジェクト（花びら）を動かしてあげる必要がります。</p>
<p>自然に見せるのがなかなか難しいので、スプラインの引き方など工夫が必要です。</p>
<h2>出来上がり</h2>
<p>花びらがヒラヒラする感じが足りないのと、花びらが落ちる速度が速すぎました。次はMographなど他の方法も試してみようと思います。</p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-10216-7" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/04/sakura_final2.mp4?_=7" /><a href="/uploads-archive/2016/04/sakura_final2.mp4">/uploads-archive/2016/04/sakura_final2.mp4</a></video></div>
<p>&nbsp;</p>


CINEMA4D　桜が散るシーンを作ってみた

<p>「あらゆる Web ページを友達とともに即座にブラウジングできます。」</p>
<p>というキャッチコピーで、webページの共有が出来るサービスがいつの間にかFirefoxに追加されていました。</p>
<p>その名も「<a href="https://www.mozilla.org/ja/firefox/hello/" target="_blank">Firefox Hello</a>」。</p>
<p>skypeの画面共有みたいな感じでしょうか？</p>
<p>ブラウザにもしれっとアイコンが追加されていました。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10212" src="/uploads-archive/2016/04/726b7e2b9a87490fbc1e61b5bd9d4714.png" alt="スクリーンショット 2016-04-05 15.43.23" width="196" height="112" /></p>
<p>ニコちゃんマークみたいなやつです。</p>
<p>ログイン等は必要なく、Firefoxをインストールしていれば使えるようです。<br />
(相手がFirefoxを使っていなくてもできるとのこと！)<br />
※カメラやマイクがないと無理そうかも・・・</p>
<p>開始する方法は、<br />
<strong>・URLを相手に送る</strong><br />
<strong>・Facebookメッセージで送る</strong><br />
の2つで、アイコンをクリックすると、<br />
「このページを共有しますか？」的なメッセージが表示されるので、<br />
そちらをクリックすると以下の様な画面になります。</p>
<p>開始するときの画面はこちら↓<br />
<a href="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png" class="modal"><img decoding="async" class="alignnone size-large wp-image-10213" src="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png" alt="スクリーンショット 2016-04-05 15.49.38" width="640" srcset="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png 1024w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-300x206.png 300w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-768x528.png 768w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-228x157.png 228w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438.png 1221w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>webカメラでお互いを映しながら同じページを閲覧するようです。<br />
Skypeとはまた少し違う感じですね。</p>
<p>僕らの業界では結構webサイトを見ながらなんて事が多いかと思うので、<br />
もしかしたらskypeよりいいかもしれませんね。<br />
ただ、開始するのがskypeよりひと手間かかります。</p>
<p>これを使えば、遠隔で、<br />
webサイトの使い方を教えたり、<br />
一緒の旅行サイトを見たり、<br />
ECサイトみたり、<br />
ぐるなびとか食べログみたり、<br />
いろいろ同じものを見ながら決められそうですね！<br />
(skypeでも出来るか・・・)</p>
<p>今はまだBeta版みたいなので、今後どのように機能が追加されていくか楽しみですね！</p>
<p><a class="link" href="https://www.mozilla.org/ja/firefox/hello/" target="_blank">Firefox Hello — 友達と一緒に Web ブラウジング — Mozilla</a></p>


あらゆる Web ページを友達とともに即座にブラウジングできる「Firefox Hello」

<p>前回に引き続き、ECについて</p>
<h2>中国で新制度 開始</h2>
<p>中国の財政部は越境ECに関する税制度改革を断行し、4月8日から新たな制度をスタートさせることを公表しました。その新制度というのは、中国の消費者が越境ECサイトで商品を購入した場合「しっかり税金を徴収すること」というもの。</p>
<p>この新制度は商品によって実質増税になったり、減税になったりするケースが生まれるらしいですが「税制度改革＝中国向けECが冷え込む」なんて悲観的な考えではありません。どちらかというと、<strong>中国政府自身が越境ECという新たなビジネスを活用し、税関の検閲がきちんと届く範囲内で暫定的に海外商品を国内に流通させる仕組みを提供する</strong>という思惑があるからです。</p>
<p>つまり中国政府が「越境ECに力を入れていく」と宣言したのだと思います。</p>
<h2>越境EC税制変更のポイント</h2>
<p>・1度の購入金額上限を2000元まで引き上げ（現状は1000元）　2000元＝約34,542円（4月4日時点）<br />
・1人の年間購入金額の上限は2万元（現状通り）<br />
・購入金額の上限以下の購入商品に関し関税率は0％とする。ただし、上限金額を超える場合は一般貿易と同じ税率を適用する。<br />
・輸入に関する増値税を30％減額し、すべてに適用（増値税17％×70＝11.9％）<br />
・消費税がかかる場合（商品によっては消費税がかかるケースがある）、30％減額で適用する（消費税30％の商品の場合、30％×70％＝21％）<br />
・行郵税を廃止し、現状の個人輸入関税50元までの免税措置を廃止</p>
<p>行郵税が廃止され、免税範囲がなくなることが大きな変更点となります。商品によっては実質減税となったり増税となったりします。</p>
<h2>現状の運用状況</h2>
<p>「行郵税」やら「増値税」など中国の税制度には、日本人になじみのないワードがあります。言葉を解読すると、主に中国では物販（海外からの輸入）において下記の税金が発生します。</p>
<table style="height: 150px;" width="1188">
<tbody>
<tr>
<td>税の種類</td>
<td>内容</td>
</tr>
<tr>
<td> 関税</td>
<td> 中国に輸入される商品に対して中国政府より課せられる税金。いわゆる一般的な関税。</td>
</tr>
<tr>
<td>増値税</td>
<td>流通段階で商品に対して課税される税金。 日本でいう消費税に当たるもの。</p>
<p>増値税は基本税率が17％となっています。</p>
<p>（生活インフラの穀物、食用油などの特定の品目への増値税には低減税率13％が適用される）</td>
</tr>
<tr>
<td>消費税</td>
<td>特定の嗜好品や贅沢品に対して、工場出荷時か輸入時に課税される税金。品目によって3％～45％が課税される。</p>
<p>ちなみに、越境ECなどで売れ筋のカテゴリである化粧品は30％の消費税がかかる。</p>
<p>日本の酒税などに類似する、一部の「贅沢品」だけにかかる特別税。</td>
</tr>
<tr>
<td>行郵税</td>
<td>個人携帯輸入物品（個人が海外から買ってきたもの）や個人輸入輸送品（個人輸入したもの）に対して課税される税金。</p>
<p>商品ジャンルにより10％～50％が課税。</p>
<p>今の越境ECではこの行郵税が課税の基本となっている。</td>
</tr>
</tbody>
</table>
<p>以上が必要なワード。これらを踏まえて現状の体制を解説 ↓</p>
<p>中国向けに商品を送る場合は「一般貨物」「個人輸入」の2通りに分類されます。「一般貨物」は、企業から企業に荷物を送る、「個人輸入」は中国の消費者が海外のECサイトで購入というイメージ。</p>
<p>1. 一般貨物の場合･･･貿易としての扱いとなり、中国に輸入する際は「関税」「消費税」「増値税」の3種類の税金が課せられる。商品検査、植物検査、衛生検査を受ける必要があります。</p>
<p>2. 個人輸入の場合･･･郵便物や手荷物などに対する管理が対象。「行郵税」が課せられる。自己使用や合理的な数量ではないと判断された場合は、貨物としての扱いとなる。</p>
<p>一般貨物の場合、多くのケースで中間流通分のマージンが販売価格に転嫁されます。「関税」「消費税」「増値税」に加えて、流通分のコストなどが上乗せされるので、最終的には越境ECで購入した方が安い、という構図になっています。また、課税額が50元以下であれば免税になるという規定もあり、「一般貨物」と「個人輸入」の価格差が生じていました。そのため、以下の内容で越境ECの税制改革が始まるようになりました。</p>
<blockquote><p>越境ECの取引は貿易の属性が備わっており、「行郵税」を徴収しても全体的な税負担が、国内販売されている一般貿易輸入貨物や国産貨物の税負担レベルより も低い。不公平な競争を形成した。これにより、政策として越境EC小売輸入商品に対して貨物に応じて「関税」「増値税」「消費税」を徴収する。（<strong>中国の財政部の発表を要約</strong>）</p></blockquote>
<h2>気になる影響は？</h2>
<p>1.新制度で今までよりも減税となるジャンルに関しては、販売が伸びるので購入上限の引き上げも好影響</p>
<p>2.低価格商品は実質増税となりますが、一般貿易に課せられる税率とは差があるため、引き続き越境ECのメリットは大きい</p>
<p>3.直送モデル（EMS）は、取引限度額が上がったことにより個人輸入貨物の検査が強化されることが考えられるので、すべての越境ECの流通に対して課金が可能になる。より直送商品に対する課税（検査）が厳しくなる可能性が浮上</p>
<p>4.保全区の活用から直送モデルに一部シフトするという見方もあり。だが2016/6/1から、中国向けEMSの料金値上げなどもあるため、保全区活用から直送へシフトするとは考えにくい</p>
<p>5.一般貿易と関税の課税に関しての差は縮まったが、それ以外の「商品申請費用」「申請資料」の作成の手間、「中間流通業者利益」などを考えるとまだまだ越境ECモデルの方が有利。今まで通り、直送に加え、保全区を活用した越境商品は流通量が拡大すると考えられる</p>
<p>参考資料　<a href="https://netshop.impress.co.jp/node/2808" target="_blank">【詳報】中国でついに始まる越境ECの新税収制度。増税? 減税? 日本企業への影響は?</a></p>
<p>越境EC特化運用カートシステム　<a href="http://launchcart.jp/" target="_blank">Launchcart</a></p>


新しく始まる越境ECの新税収制度は日本企業への影響はあるのか

CSS3のtransform3dを使った奥行きの効果

<h3>2038年問題とは</h3>
<div style="padding-left: 15px;">
<a href="/uploads-archive/2016/03/bokan.jpg" rel="attachment wp-att-10172"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/bokan-150x150.jpg" alt="bokan" width="150" height="150" class="alignnone size-thumbnail wp-image-10172" /></a></p>
<p><a href="/uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221.jpg" rel="attachment wp-att-10174"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221.jpg" alt="Bannière-Unix-linux" width="960" height="370" class="alignnone size-large wp-image-10174" srcset="/uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221.jpg 960w, /uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221-300x116.jpg 300w, /uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221-768x296.jpg 768w, /uploads-archive/2016/03/0b9e6668fe87cec06e4d85b7a5e29221-228x88.jpg 228w" sizes="(max-width: 960px) 100vw, 960px" /></a><br />
  現在色んなサイトを見ることが出来るサーバーの多くは<br />
  UNIXというOSをベースにしたLinuxに属するマシンの中で動いています。</p>
<p>  UNIXはC言語というプログラミング言語で組まれており<br />
  このC言語に限らず、多くの(当初の)プログラミング言語では<br />
  時間の基点を1970年1月1日0時0分0秒となっています。</p>
<p>  2038年1月19日を過ぎた時点で、この「経過時間」を表すことが32bitでは不可能となるのが原因です。</p>
<p>  32bitとは、今でも稼働しているPCのCPUが一回の処理で演算できる単位量です。<br />
  32bit=2^32 です。つまり (2^31 = 2,147,483,648)です。</p>
<p>  同時に1970年1月1日0時0分0秒からの経過時刻が、これを超えると0に戻ってしまうのです。</p></div>
<h3>対策とか</h3>
<div style="padding-left: 15px;">
<a href="/uploads-archive/2016/03/32-64.jpeg" rel="attachment wp-att-10171"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/32-64-150x150.jpeg" alt="32-64" width="150" height="150" class="alignnone size-thumbnail wp-image-10171" /></a><br />
  簡単(？)な対策は、この世の全てのマシンを64bitOSにすることです。</p>
<p>  厳密には32bitOSでもOSの基底部分(カーネル)を、それに対応させたものに書き換えれば<br />
  数十年は先までしのげるとの説もあります。(理論上は確かに出来そうだけど&#8230;)</p>
<p>  ただし、64bitOSとマシンが普及したとしても他の周辺機器のドライバ問題(例えばどうしても使いたい古い機器)や、<br />
  32bitで作られているアプリケーションが残り続けること。<br />
  安定性や今までの普及性によって32bitの方が使いやすいアプリケーションは現在も色々とあります。</p>
<p>  あと20余年の間に、そのような移行が問題なく実施されるかは実際にその節目に合わないと解らないかと思います。</p></div>
<h3>余談</h3>
<div style="padding-left: 15px;">
  古いバージョンの(所謂)Web言語(PHP 5.1.x系など)は、対応出来ていないようです。</p>
<p>  古いインフラにずっと固執している企業などはどうなるのか。。若干その辺りが心配です。</p>
<p>  2000年問題の時のように、特に大きな問題なく過ぎるといいのですが・・・と言った共有の日記です。</p></div>


2038年問題の共有

<p>地方自治体のIT企業誘致の動きがHOTです。</p>
<p>先日仕事で、全国の地方自治体を回ったのですが、弊社がIT企業だとわかると「うちの県もIT企業のサテライトオフィス誘致をやってるんですよ。来ませんか？？」と逆営業をしていただきました。</p>
<p>そこで興味を持って少し調べたのですが、各自治体がプッシュするメリットは大きく言えば、以下の３つに集約されるようです。</p>
<p>１　大自然！</p>
<p>２　アクセスよし！</p>
<p>３　ITあり〼！</p>
<p>大自然のなかで仕事ができますよ～東京から２時間ほどの距離ですよ～ネット環境は揃っているのでITな方たちだったら東京と変わらず仕事ができますよ～というものです。</p>
<p>自治体サイトをいろいろ見ていると、関東近郊だったら山梨県が良さそうだったので、勝手にご紹介いたします。</p>
<h2>多摩源流こすげ</h2>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/01-300x225.jpg" alt="01" width="300" height="225" class="aligncenter size-medium wp-image-10153" srcset="/uploads-archive/2016/03/01-300x225.jpg 300w, /uploads-archive/2016/03/01-768x576.jpg 768w, /uploads-archive/2016/03/01.jpg 1024w, /uploads-archive/2016/03/01-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<blockquote><p>
・オフィス直結の天然温泉「小菅の湯」に入り放題<br />
・都心から2時間で行ける近場の立地<br />
・山と川に囲まれた自然豊かな環境<br />
・和室10帖＋洋室8帖の広いオフィス室内<br />
・光通信＋高速無線LAN（最大1300Mbps）の高速通信環境<br />
・オフィス作業に必要な備品（ホワイトボード、ディスプレイ、ペンなど）は用意済み<br />
・リフレッシュ施設（大型アスレチック、道の駅（源流レストラン・物産館・展示スペース）、農場）に隣接</p></blockquote>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/06-300x225.jpg" alt="06" width="300" height="225" class="aligncenter size-medium wp-image-10154" srcset="/uploads-archive/2016/03/06-300x225.jpg 300w, /uploads-archive/2016/03/06-768x576.jpg 768w, /uploads-archive/2016/03/06.jpg 1024w, /uploads-archive/2016/03/06-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/07-300x225.jpg" alt="07" width="300" height="225" class="aligncenter size-medium wp-image-10155" srcset="/uploads-archive/2016/03/07-300x225.jpg 300w, /uploads-archive/2016/03/07-768x576.jpg 768w, /uploads-archive/2016/03/07.jpg 1024w, /uploads-archive/2016/03/07-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/08-300x225.jpg" alt="08" width="300" height="225" class="aligncenter size-medium wp-image-10156" srcset="/uploads-archive/2016/03/08-300x225.jpg 300w, /uploads-archive/2016/03/08-768x576.jpg 768w, /uploads-archive/2016/03/08.jpg 1024w, /uploads-archive/2016/03/08-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/20-300x225.jpg" alt="20" width="300" height="225" class="aligncenter size-medium wp-image-10157" srcset="/uploads-archive/2016/03/20-300x225.jpg 300w, /uploads-archive/2016/03/20-768x576.jpg 768w, /uploads-archive/2016/03/20.jpg 1024w, /uploads-archive/2016/03/20-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/071-300x135.jpg" alt="071" width="300" height="135" class="aligncenter size-medium wp-image-10158" srcset="/uploads-archive/2016/03/071-300x135.jpg 300w, /uploads-archive/2016/03/071-768x346.jpg 768w, /uploads-archive/2016/03/071-228x103.jpg 228w, /uploads-archive/2016/03/071.jpg 978w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>オフィス直結温泉ってすごいですね。<br />
ほんとにオフィスの真横が温泉らしいです。<br />
ただいまキャンペーン期間中だそうで、3,500円＋税／人・泊（食事代別）です！</p>
<h2>創造空間 JAM 山中湖の古民</h2>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/slide_image-1-300x200.jpg" alt="slide_image (1)" width="300" height="200" class="aligncenter size- wp-image-10160" srcset="/uploads-archive/2016/03/slide_image-1-300x200.jpg 300w, /uploads-archive/2016/03/slide_image-1-228x152.jpg 228w, /uploads-archive/2016/03/slide_image-1.jpg 630w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<blockquote><p>山中湖の大自然の中、都会の喧騒から離れた環境で開発合宿、経営合宿、チーム合宿、勉強会などいかがですか？夏は都会に比べ非常に過ごしやすく、開発合宿などには、最適です。暑い都会を離れ、メンバーの士気を高めるとともに、プロダクト、会社、クリエイティビティを洗礼する絶好の場所です。古民家の一軒家を貸切レンタルいたしますので、ホテルやその他宿泊施設とは異なり、周りに気を使う事なく、集中する事ができます。館内はwifi完備。プロジェクタ、モニターなどレンタル可能。また、集中した合宿以外でも、自然を満喫するためのスペースとしてもご利用いただけます。近くに温泉もございますので、日頃の疲れをゆっくり癒す事も可能です。</p></blockquote>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/slide_image-2-300x200.jpg" alt="slide_image (2)" width="300" height="200" class="aligncenter size-medium wp-image-10161" srcset="/uploads-archive/2016/03/slide_image-2-300x200.jpg 300w, /uploads-archive/2016/03/slide_image-2-228x152.jpg 228w, /uploads-archive/2016/03/slide_image-2.jpg 630w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/slide_image-300x200.jpg" alt="slide_image" width="300" height="200" class="aligncenter size-medium wp-image-10162" srcset="/uploads-archive/2016/03/slide_image-300x200.jpg 300w, /uploads-archive/2016/03/slide_image-228x152.jpg 228w, /uploads-archive/2016/03/slide_image.jpg 630w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>こちらは古民家です。<br />
１０名以上だったら１日一人４０００円です。</p>
<h2>築１００年兜造りの古民家宿　LOOF</h2>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/room_001-300x188.png" alt="room_001" width="300" height="188" class="aligncenter size-medium wp-image-10166" srcset="/uploads-archive/2016/03/room_001-300x188.png 300w, /uploads-archive/2016/03/room_001-228x143.png 228w, /uploads-archive/2016/03/room_001.png 400w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<blockquote><p>
山梨県笛吹市の標高1000mに位置する芦川町。<br />
芦川町には、築100年以上の古民家が156棟以上存在しております。<br />
その中でも、非常に状態の良かった築120年以上の「澤之家」を<br />
改修し木の家に戻し、日本の生活文化を感じて頂ける古民家宿を創りました。<br />
なんといっても、天井の茅葺きは非常に味わい深いモノとなっております。<br />
そんな昔ながらの環境で、研修合宿や開発合宿、交流会等をしてみるのは如何でしょうか。<br />
ぜひお楽しみください!!</p></blockquote>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/slide_image-5-300x200.jpg" alt="slide_image (5)" width="300" height="200" class="aligncenter size-medium wp-image-10170" srcset="/uploads-archive/2016/03/slide_image-5-300x200.jpg 300w, /uploads-archive/2016/03/slide_image-5-228x152.jpg 228w, /uploads-archive/2016/03/slide_image-5.jpg 630w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/slide_image-4-300x200.jpg" alt="slide_image (4)" width="300" height="200" class="aligncenter size-medium wp-image-10169" srcset="/uploads-archive/2016/03/slide_image-4-300x200.jpg 300w, /uploads-archive/2016/03/slide_image-4-228x152.jpg 228w, /uploads-archive/2016/03/slide_image-4.jpg 630w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/slide_image-3-300x200.jpg" alt="slide_image (3)" width="300" height="200" class="aligncenter size-medium wp-image-10168" srcset="/uploads-archive/2016/03/slide_image-3-300x200.jpg 300w, /uploads-archive/2016/03/slide_image-3-228x152.jpg 228w, /uploads-archive/2016/03/slide_image-3.jpg 630w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/room_katari-300x210.png" alt="room_katari" width="300" height="210" class="aligncenter size-medium wp-image-10167" srcset="/uploads-archive/2016/03/room_katari-300x210.png 300w, /uploads-archive/2016/03/room_katari-228x160.png 228w, /uploads-archive/2016/03/room_katari.png 500w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>こちらはめっちゃオシャレ…。<br />
と思ったら、古民家界隈では有名な場所のようでした。<br />
料金……施設使用料20,000円 ＋サービス料金 6,500円(夕飯1食付き)/お一人様(税抜）<br />
定員……1名様～10名様まで</p>
<h2>いきなり移住は難しいから。。</h2>
<p>いきなりオフィスを移転したり、サテライトオフィスを新たに開設したりするのはそんなにサクっとできることではありません。</p>
<p>まず一度体験してみたい…という声に答えるため、まずはビジネス合宿に来ませんかと呼びかけています。</p>
<p>IT企業で合宿場所を考えている担当者の方は、関東近辺の自治体のサテライトオフィスを候補に入れてみてはいかがでしょうか？</p>
<p>自治体のサイトではあまり情報が詳しく載ってなかったりしますが、問い合わせたら丁寧に教えてくれるはずです！</p>


温泉直結オフィスがあつい！！勝手に山梨県のサテライトオフィス特集！

Oracle 11gでキャラクタセットをSJISに変更する

<p>よく久しぶりに会う友人などに「今、なんの仕事してんの？」と聞かれたとき、私は「ECサイトに関わった仕事してるよ」など答えるのですが、決まって言われる台詞は</p>
<p><strong>「ECサイトって何？」</strong>　です。</p>
<p>一般的にまずECという言葉自体が聞きなれないのかもしれないと思ったので今回の題材は「ECサイト」にしました。</p>
<h2>ECサイトって何？</h2>
<blockquote><p>ECサイトとは、Eコマース（EC）のサービスを提供するWebサイトの通称である。オンラインショップやウェブストアなどと呼ばれることも多い。</p>
<p>ECサイトの多くは商品説明、ショッピングカート、決済システムなどが備えられており、Webサイト上で商品の購入、発注などが行えるようになっている。いわゆるネット通販を提供するオンラインショップや、音楽や動画などのネットワーク配信、インターネットバンキングなどを提供するサービスもECサイトに含まれる。</p></blockquote>
<p>正直、そんなに難しい説明は出来ないので簡単に「通信販売ですね」と答える事が多いです。</p>
<p>それを聞いた人が次に返してくる言葉は「楽天とか？」</p>
<p>使用した事がある方もたくさんいらっしゃると思いますが、インターネットには様々なショッピングモールがあります。その一つが有名な”楽天市場”、その他にもyahooモール、Amazon、ポンパレ…など数えきれない程の出店型や出品型などのモールサービスがあります。</p>
<p>これらもECサイト。また知名度も高く利用者数もかなり多いので、ここに出店する店舗はとても多いです。後は、独自店舗でECサイトを開くことが出来ます。そう考えると今ではインターネットでお店を持つなんて簡単かも…？</p>
<p>個人的にECサイトを開こうと思えば開けるこの時代ですから、どこに出店または出品したら良いか見極めてぜひトライしてみるのも良いと思いますよ。</p>
<h2>自分のお店や商品の世界展開も夢ではない「LaunchCart」</h2>
<p>弊社でも　<strong>世界へ</strong>　展開できるカートシステムをEC事業として展開しています。</p>
<p><a href="/uploads-archive/2016/03/launchcart-e1459240586673.jpg" rel="attachment wp-att-10124"><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/launchcart-e1459240586673.jpg" alt="launchcart" width="600" height="377" class="alignnone size-full wp-image-10124" /></a></p>
<p>左カラムにもご紹介させて頂いておりますが、せっかくなので<a href="http://launchcart.jp/">こちら</a>からも飛べるようにしておきます(笑)</p>
<p>LaunchCartは、中国に強く越境ECに特化したシステムとなっております。さらに、中国などに出店・出品した事がない方にもうれしいマーケティングサポートがついているプランもあります。</p>
<p>（LaunchCartの紹介ブログを株式会社LIGさんに書いていただきました⇒　<a href="http://liginc.co.jp/254637">【1兆円市場がみえてきた中国越境EC】始める前に知っておきたいリスクと対策</a>）</p>
<p>さあ、ここでまた新しい言葉が出てきましたね。そうです！「越境EC」です！これは私も弊社で初めて聞いた言葉だったので、ついどういう意味か調べてしまいました、雰囲気でなんとなく分かりますけどね(笑)</p>
<h2>越境ECって何？</h2>
<blockquote><p>越境EC（えっきょうイーシー）とは、国際的な電子商取引のことである。 ECとは&#8221;electronic commerce&#8221;（エレクトロニックコマース=電子商取引）の略。 クロスボーダーECとも呼ばれることがある。</p></blockquote>
<p>越境は、境界線を越えることや国境を超えることを意味しています。その越境がECとつながる事で簡単に言えば「国際的な通信販売」みたいな感じですね。この越境ECの凄いところは、経済産業省が消費国としての推計市場規模を試算したところ、2014年から2018年までの間に日本は約1.4倍、米国は約1.6倍、中国は約2.3倍の規模になると推計されているのです。</p>
<p>日米中3カ国間における越境ECの購入総額合計（日本円換算）で見てみると、2020年までに約4.1兆円にまで拡大する可能性も秘めている…とか…（額が大きすぎてあまり私はパッとしていませんが）</p>
<p>これからも国の境界を越えて、ECがよりグローバル化していくことでしょう。</p>
<h2>まとめ</h2>
<p>ざっくりではありますがECサイトについてちょっと知ってもらうことが出来ましたでしょうか。私もまだまだ勉強することがありますので、また何か深いな～～～！なんて思う事があったらブログで紹介したいと思います。もうずっとそう思いっぱなしなんですけどね(笑)</p>
<p>EC業界について詳しく書かれている本がありましたので、ご興味あればぜひ。</p>
<p><a href="http://www.amazon.co.jp/2015%E5%B9%B4%E3%81%AEEC%E6%A5%AD%E7%95%8C%E3%82%92%E7%B7%8F%E3%81%BE%E3%81%A8%E3%82%81-EC%E6%A5%AD%E7%95%8C%E5%A4%A7%E5%9B%B3%E9%91%91-%E7%9B%A3%E4%BF%AE%E8%80%85-%E7%B7%A8%E8%91%97%E8%80%85-EC%E3%81%AE%E3%83%9F%E3%82%AB%E3%82%BF/dp/4286159361" target="_blank">2015年のEC業界を総まとめ! ! 最新 EC業界大図鑑</a></p>


「ECサイト」という言葉の認知度が一部の層で低い件について

<p>こちらの「Bootstrap Editor」はブラウザで使用できるエディタで、<br />
Bootstrapをベースにしたサイトを制作するのに適したツールになります。</p>
<p>このツール自体もBootstrapを元に作成されてますね！！</p>
<p>Bootstrap自体、CSSのフレームワークとして有名で比較的簡単に、カッコイイデザイン、レイアウトを実装することができるツールです。</p>
<p>ただし、Bootstrap自体の記述ルールみたいなものがあり、使いはじめるには少し学習しないといけません。</p>
<p>初心者やエンジニア向けのBootstrapですが(個人の見解です笑)、ちょっと手間がかかってしまいます。</p>
<p>しかし、この「Bootstrap Editor」は、ブラウザ上でコードの編集ができ、結果も右に即時反映されますので直ぐに使用することができます！！</p>
<p>さらに、テンプレートも用意されているのでそのまま作るのはもちろん、ローカルで作っているコードに、「Bootstrap Editor」で呼び出したテンプレートの一部を持ってきたりとかいろんな使い方ができますね。</p>
<h2>Bootstrapの使い方</h2>
<p><img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor.jpg" alt="Bootstrap Editor" width="640" class="alignnone size-full wp-image-10125" srcset="/uploads-archive/2016/03/Bootstrap-Editor.jpg 994w, /uploads-archive/2016/03/Bootstrap-Editor-300x221.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor-768x566.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor-228x168.jpg 228w" sizes="(max-width: 994px) 100vw, 994px" /></p>
<p><a href="http://www.venezia-works.com/bst/index.html" target="_blank">Bootstrap Editor</a>を開き、「Let&#8217;s Start」ボタンを押します。</p>
<p>それだけでもう使えます！</p>
<p><img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor2-1024x689.jpg" alt="Bootstrap Editor2" width="640" class="alignnone size-large wp-image-10126" srcset="/uploads-archive/2016/03/Bootstrap-Editor2-1024x689.jpg 1024w, /uploads-archive/2016/03/Bootstrap-Editor2-300x202.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor2-768x517.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor2-228x153.jpg 228w, /uploads-archive/2016/03/Bootstrap-Editor2.jpg 1268w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>あとはこの画面でLet&#8217;s コーディングです！！</p>
<h2>Bootstrapの機能</h2>
<p>主な機能は以下になります。</p>
<p><a href="#menu01">１．CODE</a><br />
エディタの色を選択（Emmet使用可能）</p>
<p><a href="#menu02">２．Template</a><br />
Bootstrapテンプレートを選択</p>
<p><a href="#menu03">3. Nomal(Theme)</a><br />
Bootstrapテンプレートの色(Theme)を選択</p>
<p><a href="#menu04">４．Live View</a><br />
編集中のCODEをプレビュー（PC,Tablet,Phone,CodeOnry）</p>
<p><a href="#menu05">５．Save/Open</a><br />
「Save」は編集中のデータを一時保存します。「Open」は保存データを再表示します。</p>
<p><a href="#menu06">６．Download</a><br />
編集中データをHTMLファイルダウンロード</p>
<h3 id="menu01">CODE</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor3-1024x714.jpg" alt="Bootstrap Editor3" width="640" class="alignnone size-large wp-image-10117" srcset="/uploads-archive/2016/03/Bootstrap-Editor3-1024x714.jpg 1024w, /uploads-archive/2016/03/Bootstrap-Editor3-300x209.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor3-768x536.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor3-228x159.jpg 228w, /uploads-archive/2016/03/Bootstrap-Editor3.jpg 1153w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
コードを書くスタイルを、Chrome,github,tommorrow_night_bright,dreamweaverから選択できます。</p>
<h3 id="menu02">Template</h3>
<p>テンプレートが予め用意されていますので、それを元にコーディングを開始することができます。<br />
テンプレートの一部分のパーツをコピーして使うという方法もいいですね！</p>
<p><img decoding="async" src="/uploads-archive/2016/03/ibLdlBsdRf.gif" alt="ibLdlBsdRf" width="640" class="alignnone size-large wp-image-10118" /></p>
<h3 id="menu03">Nomal(Theme)</h3>
<p>サイトに色（テーマ）を変更することができます。豊富に用意されています。<br />
<img decoding="async" src="/uploads-archive/2016/03/oQN8i8LUAg.gif" alt="oQN8i8LUAg" width="640"class="alignnone size-large wp-image-10119" /></p>
<p>ちなみに、<a href="https://bootswatch.com/">Bootswatch: Free themes for Bootstrap</a>のテーマを使用しているようです。テーマのサイトのプレビューをみるより、このエディタで切り替えた方が断然早くテーマの中身をチェックできますね！</p>
<h3 id="menu04">Live View</h3>
<p>左側でソースを編集し、その編集した結果が即時右側でプレビューとして表示されています。<br />
直感的に幅を変えられるのが素晴らしく、スマホ、PCのチェックもラクにできます！</p>
<p><a href="/uploads-archive/2016/03/9Gjh4CWqxM.gif" rel="attachment wp-att-10121"><img decoding="async" src="/uploads-archive/2016/03/9Gjh4CWqxM.gif" alt="9Gjh4CWqxM" width="640" class="alignnone size-large wp-image-10121" /></a></p>
<h3 id="menu05">Save/Open</h3>
<p>「Save」で今編集しているコードを一時保存します。<br />
「Open」で一時保存したコードを表示します。</p>
<p>ブラウザの「localstorage」に保存しているので、<br />
違うブラウザを使用すると保存されてないので注意！(当たり前か&#8230;)</p>
<h3 id="menu06">Download</h3>
<p>編集したhtmlをダウンロードします。<br />
bootstrap.htmlがダウンロードできます。</p>
<p>こんなに簡単に無料で使用できるツールはなかなかないと思います。（しかも日本製）<br />
おそらく今後もパワーアップしそうな予感がありますので、ますます期待です！！</p>
<p>Bootstrapを扱う方はぜひ使用してみると良いと思います！！</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2016/04/13

2016/04/12

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/05

2016/03/30

2016/03/30

2016/03/30

2016/03/30

2016/03/30

2016/03/30