<p>最近ファッション関連ECサイトの動きが激しい。<br />
大きいところだと、ドコモ、楽天がそれぞれ<br />
マガシークとスタイライフにTOBを仕掛けている。</p>
<p>楽天はファッション関連の流通額を3567億円と初めて発表し、<br />
今後は更にファッション関連の販売に力を入れていくと強調している。</p>
<p>また、スタートトゥデイは新たにZOZObyUというセレクトショップをオープンする。<br />
従来のブランド単位でのラインナップと異なり、<br />
ブランドをまたがっての商品の提案により新たな購買層の獲得を狙う。</p>
<p>なぜ今ファッションECで大きな動きが起こっているのか?<br />
それは大きく分けると<br />
1. 購入者のネットリテラシー向上<br />
2. 競争の激化<br />
3. 技術革新<br />
が挙げられると感じる。</p>
<p>1. 購入者のネットリテラシー向上<br />
サイズやクオリティで、店舗での購入を選択していた購入者が<br />
ネットでの購入に慣れてきたということと、<br />
SNSなど個人の発言がweb上で一定の信頼感が得られるようになり<br />
加えてコミュニケーションツールの普及により購入までの障壁が下がったと考えられる。</p>
<p>2. 競争の激化<br />
即日配達、送料無料、ポイントなどの需要が高まるなか、<br />
利益率の減退に加え、流通、人的コストが増している。<br />
資本力と規模が優位性を保つ唯一の方法となる。</p>
<p>3. 技術革新<br />
付加価値や安心感を向上させるため、<br />
動画を使った表現などはよく目にするようになった。<br />
今後は例えばスマホアプリで自分を撮影して試着できるシステムや<br />
商品を3D表現するECサイトなども出てくるだろう。<br />
そうなると、値引きや流通コストの増加に加え、<br />
システムに対する設備投資もかさみ、これも資本力がものを言う。</p>
<p>要するに、そのECサイトで買うメリットが無ければ生き残れない = 大手の下で展開する<br />
しかないという選択を余儀なくされる時代になったということと思う。</p>
<p>企業にとっては苦しいが、ECサイトのクオリティ向上が図れるだけでなく、<br />
消費者にとっては選択の幅が広がることと、競争によるサービスの向上はEC業界にとってはとても良いことだと思う。</p>


ファッション業界のEC

<p>3Dプリンタの実用化が本格化しているとの情報が多く入るようになったので<br />
現時点での市場の動向についてまとめてみた。</p>
<p>■市場規模<br />
2013年は23億ドル、2019年には65億ドルと予想されている。</p>
<p>■ツール<br />
様々なモデリングソフトが存在するが、<br />
現在は3D CADが一般化している模様。<br />
世界での利用者は500万人程度。<br />
2D CAD利用者約1400万人のうち年間約100万人が3D CADに移行している。</p>
<p>■メーカー<br />
本場アメリカでは<br />
3D Systems Corporation<br />
Stratasys<br />
の2社が大手。</p>
<p>日本でも<br />
ホットプロシード<br />
キーエンス<br />
ローランド ディー. ジー.<br />
などの企業が有名。</p>
<p>■使用出来る素材<br />
・樹脂<br />
・セラミック<br />
・金属<br />
印刷用素材としては、家庭用ではフィラメントが一般的で<br />
カラーも多く出回っている。</p>
<p>■まとめ<br />
直近では医療や工業製品で使われ始めており、<br />
例えば医療では自分の骨格にぴったりのインプラントを作ったり<br />
最近ではES細胞をプリントして臓器を作る研究も進んでいる。<br />
<a href="http://wired.jp/2013/02/17/bodies-will-print-in-the-laboratory/" target="_blank">http://wired.jp/2013/02/17/bodies-will-print-in-the-laboratory/</a></p>
<p>また、GE社は3Dプリンタによってジェットエンジンの部品を生産しており、<br />
ボーイング社の小型機への供給が決まっている。</p>
<p>プロトタイプの印刷という利用方法としては既に浸透しつつあり、<br />
MS社のsurfaceは開発に300個以上の試作を用意しており<br />
その多くは3Dプリンタによって作られたという。</p>
<p>今後は上記のような利用方法から発展していく傍ら<br />
中小規模での利用も増え、そうなるとモデリングを得意とする会社や<br />
デザイナーを抱える会社がモデリング技術を備えることにより<br />
メーカーとの連携が増え、結果として3D制作関連の企業も増加すると思う。</p>
<p>また、個人レベルでの製造業が可能となり、<br />
例えばiPhoneケースやメガネなどの個人メーカーが増えるかもしれない。</p>


3Dプリンタの現状

テキストファイルで作る オートコンプリート jQueryプラグイン

<p>セクションごとにメニューがついてくるjQueryプラグインjquery-stick-em。</p>
<p><a href="http://viget.com/inspire/jquery-stick-em" target="_blank">http://viget.com/inspire/jquery-stick-em</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/29/">デモ</a></p>
<p>&nbsp;</p>
<p>設置は非常に簡単。</p>

		<div id="crayon-64953fd58405d342668721" 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">XHTML</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;">
&lt;div class="container"&gt;
    &lt;div class="stickem-container"&gt;
        &lt;div class="content"&gt;
        &lt;/div&gt;
        &lt;div class="stickem"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58405d342668721-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58405d342668721-2">2</div><div class="crayon-num" data-line="crayon-64953fd58405d342668721-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58405d342668721-4">4</div><div class="crayon-num" data-line="crayon-64953fd58405d342668721-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58405d342668721-6">6</div><div class="crayon-num" data-line="crayon-64953fd58405d342668721-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58405d342668721-8">8</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-64953fd58405d342668721-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"container"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58405d342668721-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"stickem-container"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd58405d342668721-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"content"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58405d342668721-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd58405d342668721-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"stickem"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58405d342668721-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd58405d342668721-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58405d342668721-8"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>という構造を作り、</p>

		<div id="crayon-64953fd584062102177744" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(document).ready(function() {
	$('.container').stickem();
});</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-64953fd584062102177744-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584062102177744-2">2</div><div class="crayon-num" data-line="crayon-64953fd584062102177744-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd584062102177744-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">document</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ready</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584062102177744-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.container'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">stickem</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd584062102177744-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>を呼ぶだけ。</p>
<p>.stickem-container</p>
<p>.content</p>
<p>.stickem</p>
<p>は固定なので注意。</p>
<p>FAQページなどで使えそう。</p>

コンテンツに合わせてメニューがついてくる jQueryプラグイン

ECサイトで使えそうなjQueryプラグイン elevatezoom

tableをExcelみたいにかっこ良くしてくれる jQueryプラグイン

<p>表示までのスピードはやや気になるが、</p>
<p>何かあった時に使えそうなプラグインを見つけたのでメモ。</p>
<p>デモはこちら。</p>
<p><a class="demo" href="/demo/hoshino/25/">demo</a></p>
<p>&nbsp;</p>
<p>js</p>

		<div id="crayon-64953fd582870798256485" 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 scrapper_total_width = 403;
var scrapper_image_width = 100;
var scrapper_image_height = 100;

var scrapperLinkURL;
var scrapperLinkTitle;
var scrapperLinkDescription;
var scrapperLinkImageURL;
var scrapperText;

function displayScrapperData()
{
	$('#displayArea').prepend('&lt;hr/&gt;&lt;br/&gt;&lt;div style="margin:0px auto; text-align:center;"&gt;&lt;img src="'+scrapperLinkImageURL+'"/&gt;&lt;/div&gt;'+'&lt;br/&gt;&lt;b&gt;Text: &lt;/b&gt;'+scrapperText+'&lt;br/&gt;&lt;b&gt;URL: &lt;/b&gt;'+scrapperLinkURL+'&lt;br/&gt;&lt;b&gt;Title: &lt;/b&gt;'+scrapperLinkTitle+'&lt;br/&gt;&lt;b&gt;Description: &lt;/b&gt;'+scrapperLinkDescription+'&lt;br/&gt;&lt;b&gt;Image Source: &lt;/b&gt;'+scrapperLinkImageURL+'&lt;br/&gt;&lt;br/&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-64953fd582870798256485-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-2">2</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-4">4</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-6">6</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-8">8</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-10">10</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-12">12</div><div class="crayon-num" data-line="crayon-64953fd582870798256485-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582870798256485-14">14</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd582870798256485-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapper_total_width</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">403</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapper_image_width</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd582870798256485-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapper_image_height</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd582870798256485-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapperLinkURL</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-6"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapperLinkTitle</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd582870798256485-7"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapperLinkDescription</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-8"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapperLinkImageURL</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd582870798256485-9"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">scrapperText</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-10">&nbsp;</div><div class="crayon-line" id="crayon-64953fd582870798256485-11"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">displayScrapperData</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-12"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd582870798256485-13"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#displayArea'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">prepend</span><span class="crayon-sy">(</span><span class="crayon-s">'&lt;hr/&gt;&lt;br/&gt;&lt;div style="margin:0px auto; text-align:center;"&gt;&lt;img src="'</span>+<span class="crayon-i">scrapperLinkImageURL</span>+<span class="crayon-s">'"/&gt;&lt;/div&gt;'</span>+<span class="crayon-s">'&lt;br/&gt;&lt;b&gt;Text: &lt;/b&gt;'</span>+<span class="crayon-i">scrapperText</span>+<span class="crayon-s">'&lt;br/&gt;&lt;b&gt;URL: &lt;/b&gt;'</span>+<span class="crayon-i">scrapperLinkURL</span>+<span class="crayon-s">'&lt;br/&gt;&lt;b&gt;Title: &lt;/b&gt;'</span>+<span class="crayon-i">scrapperLinkTitle</span>+<span class="crayon-s">'&lt;br/&gt;&lt;b&gt;Description: &lt;/b&gt;'</span>+<span class="crayon-i">scrapperLinkDescription</span>+<span class="crayon-s">'&lt;br/&gt;&lt;b&gt;Image Source: &lt;/b&gt;'</span>+<span class="crayon-i">scrapperLinkImageURL</span>+<span class="crayon-s">'&lt;br/&gt;&lt;br/&gt;'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582870798256485-14"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>scrapper_total_width</p>
<p>これは自動生成されるテキストエリアの横幅。</p>
<p>&nbsp;</p>
<p>scrapper_image_width</p>
<p>URL入力後に出てくるサムネイルの横幅。</p>
<p>&nbsp;</p>
<p>scrapper_image_height</p>
<p>URL入力後に出てくるサムネイルの高さ。</p>
<p>&nbsp;</p>
<p>scrapperLinkURL<br />
scrapperLinkTitle<br />
var scrapperLinkDescription<br />
scrapperLinkImageURL<br />
scrapperText</p>
<p>それぞれ取得したサイトの情報が格納されるが、</p>
<p>変数名が固定のようなので、変更しない方が良い。</p>
<p>&nbsp;</p>
<p>上記に格納されたそれぞれの要素を</p>
<p>prepend()</p>
<p>の引数にHTMLの文字列として代入すると出力される。</p>
<p>このHTMLを変更してCSS調整すればオリジナルにもなるのがとてありがたい。</p>
<p>&nbsp;</p>
<p>html</p>

		<div id="crayon-64953fd582875364597126" 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">XHTML</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;">
&lt;div id="container"&gt;
    &lt;div id="box"&gt;
        &lt;h1&gt;FacebookのようにURLを打ち込むとサイトの情報がでてくるjQueryプラグイン&lt;/h1&gt;
        URLを入れてちょっと待ってね&lt;br/&gt;
        &lt;div id="linkScrapper"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="displayArea"&gt;&lt;/div&gt;
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd582875364597126-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582875364597126-2">2</div><div class="crayon-num" data-line="crayon-64953fd582875364597126-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582875364597126-4">4</div><div class="crayon-num" data-line="crayon-64953fd582875364597126-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582875364597126-6">6</div><div class="crayon-num" data-line="crayon-64953fd582875364597126-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582875364597126-8">8</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-64953fd582875364597126-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"container"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582875364597126-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"box"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd582875364597126-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h1&gt;</span><span class="crayon-i ">FacebookのようにURLを打ち込むとサイトの情報がでてくるjQueryプラグイン</span><span class="crayon-r ">&lt;/h1&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582875364597126-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;URLを入れてちょっと待ってね</span><span class="crayon-r ">&lt;br/&gt;</span></div><div class="crayon-line" id="crayon-64953fd582875364597126-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"linkScrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582875364597126-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd582875364597126-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"displayArea"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582875364597126-8"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>#linkScrapperにはURL入力用のテキストエリアが入り</p>
<p>#displayAreaには決定ボタンを押した時の結果が表示される。</p>
<p>&nbsp;</p>
<p>各要素の見た目は</p>
<p>linkScrapper.min.js</p>
<p>の中にベタ書きなので、書き換えればどんなデザインにも変更できそうなのがありがたい。</p>
<p>URL入力後結果がでるのが少し遅いのが玉に瑕だが</p>
<p>要望などでそうなので、何かあった時にはつかえそうだ。</p>

FacebookのようにURLを打ち込むとサイトの情報がでてくるjQueryプラグイン

<p>ECサイトで使えそうなjQueryプラグイン snipe.jsを使ってみた。</p>
<p><a class="demo" href="/demo/hoshino/24/">デモ</a></p>
<p>設置方法は3種類。</p>
<p>&nbsp;</p>
<p>パターン1</p>

		<div id="crayon-64953fd5821c8085230295" 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">XHTML</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;">
&lt;img src="jeff.jpg" id="demo1" data-zoom="jeff_large.jpg" alt=""&gt;
&lt;script type="text/javascript"&gt;
$(function(){
    $('#demo1').snipe();
});
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5821c8085230295-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821c8085230295-2">2</div><div class="crayon-num" data-line="crayon-64953fd5821c8085230295-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821c8085230295-4">4</div><div class="crayon-num" data-line="crayon-64953fd5821c8085230295-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821c8085230295-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-64953fd5821c8085230295-1"><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"jeff.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"demo1"</span><span class="crayon-h"> </span><span class="crayon-e ">data-zoom</span>=<span class="crayon-s ">"jeff_large.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">""</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5821c8085230295-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd5821c8085230295-3"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5821c8085230295-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#demo1'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">snipe</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5821c8085230295-5"><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-64953fd5821c8085230295-6"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>パターン2</p>

		<div id="crayon-64953fd5821d1109646063" 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;">
&lt;img src="jeff.jpg" id="demo2" alt=""&gt;
&lt;script type="text/javascript"&gt;
$(function(){
    $('#demo2').snipe({
        image: 'jeff_large.jpg'
    });
});
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5821d1109646063-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d1109646063-2">2</div><div class="crayon-num" data-line="crayon-64953fd5821d1109646063-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d1109646063-4">4</div><div class="crayon-num" data-line="crayon-64953fd5821d1109646063-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d1109646063-6">6</div><div class="crayon-num" data-line="crayon-64953fd5821d1109646063-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d1109646063-8">8</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-64953fd5821d1109646063-1"><span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"jeff.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"demo2"</span><span class="crayon-h"> </span><span class="crayon-i">alt</span>=<span class="crayon-s">""</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5821d1109646063-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd5821d1109646063-3"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5821d1109646063-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#demo2'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">snipe</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd5821d1109646063-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">image</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'jeff_large.jpg'</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5821d1109646063-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5821d1109646063-7"><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-64953fd5821d1109646063-8"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>パターン3</p>

		<div id="crayon-64953fd5821d3851199759" 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;">
&lt;a href="jeff_large.jpg" id="demo3"&gt;&lt;img src="jeff.jpg" alt=""&gt;&lt;/a&gt;
&lt;script type="text/javascript"&gt;
$(function(){
    $('#demo3').snipe();
});
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5821d3851199759-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d3851199759-2">2</div><div class="crayon-num" data-line="crayon-64953fd5821d3851199759-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d3851199759-4">4</div><div class="crayon-num" data-line="crayon-64953fd5821d3851199759-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d3851199759-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-64953fd5821d3851199759-1"><span class="crayon-h">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-s">"jeff_large.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"demo3"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"jeff.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">alt</span>=<span class="crayon-s">""</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-e">a</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5821d3851199759-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd5821d3851199759-3"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5821d3851199759-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#demo3'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">snipe</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5821d3851199759-5"><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-64953fd5821d3851199759-6"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>jsは共通で</p>

		<div id="crayon-64953fd5821d4748923199" 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;">
&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.snipe.min.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5821d4748923199-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5821d4748923199-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-64953fd5821d4748923199-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5821d4748923199-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.snipe.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>ECサイトでは</p>
<p><a class="demo" href="/demo/hoshino/24/ec.html">デモ</a></p>
<p>と思ったけどバグってる、、</p>
<p>ソースを見たが直りそうになかったのでとりあえず保留。</p>

ECサイトで使えそうなjQueryプラグイン snipe.js

<p>JQUERY 1.9 BETA 1が12月17日にリリースされた。<br />
<a href="http://blog.jquery.com/2012/12/17/jquery-1-9-beta-1-released/" target="_blank">http://blog.jquery.com/2012/12/17/jquery-1-9-beta-1-released/</a></p>
<p><a href="http://jquery.com/upgrade-guide/1.9/" target="_blank">http://jquery.com/upgrade-guide/1.9/</a></p>
<p>&nbsp;</p>
<p>・変更点は全てjQuery 2.0に継承される<br />
・多くの不要と判断された機能が削除された<br />
・移行支援ツールjQuery Migrateを提供<br />
・一時しのぎなので新しいプロジェクトには採用しないように</p>
<p>という2.0へ向けてのお試しのような内容のようだ。</p>
<p>例として記載があった新セレクタのサンプル。</p>
<div>


		<div id="crayon-64953fd581fd0805814648" 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">XHTML</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;">
&lt;!DOCTYPE&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script src=" http://code.jquery.com/jquery-1.9.0b1.js "&gt;&lt;/script&gt; 
&lt;script src=" http://code.jquery.com/jquery-migrate-1.0.0b1.js "&gt;&lt;/script&gt; 
&lt;title&gt;&lt;/title&gt;
&lt;style&gt;
div
{
	background-color: red;
	width: 100%;
	height: 200px;
}
&lt;/style&gt;
&lt;script&gt;
$( document ).ready(function(e)
{
	var dm = $( 'div' ).css( [ 'width', 'height', 'backgroundColor' ] );
	alert(dm.width);
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="wrap"&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&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-64953fd581fd0805814648-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-2">2</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-4">4</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-6">6</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-8">8</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-10">10</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-12">12</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-14">14</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-16">16</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-18">18</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-20">20</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-22">22</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-24">24</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-26">26</div><div class="crayon-num" data-line="crayon-64953fd581fd0805814648-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581fd0805814648-28">28</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-64953fd581fd0805814648-1"><span class="crayon-n">&lt;!DOCTYPE&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-2"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-4"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span>=<span class="crayon-s ">"Content-Type"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"text/html; charset=utf-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-5"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">" http://code.jquery.com/jquery-1.9.0b1.js "</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-6"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">" http://code.jquery.com/jquery-migrate-1.0.0b1.js "</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span> </span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-7"><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-8"><span class="crayon-i "><span class="crayon-ta">&lt;style&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-9"><span class="crayon-k ">div</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-10"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-11"><span class="crayon-h">	</span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">red</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-12"><span class="crayon-h">	</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-13"><span class="crayon-h">	</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-14"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-15"><span class="crayon-ta">&lt;/style&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-16"><span class="crayon-i "><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-17"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">document</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ready</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-i">e</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-18"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-19"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">dm</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'div'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-h"> </span><span class="crayon-s">'width'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'height'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'backgroundColor'</span><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-20"><span class="crayon-h">	</span><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-i">dm</span><span class="crayon-sy">.</span><span class="crayon-i">width</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-21"><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-64953fd581fd0805814648-22"><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-23"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-24"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-25"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"wrap"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-26"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd581fd0805814648-27"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581fd0805814648-28"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<br />
cssプロパティを複数取得して連想配列で返してくれるようだ。</p>
<p>&nbsp;</p>
</div>
<div></div>

JQUERY 1.9 BETA 1

<div>何か参考になる記事を見つけたのでメモと、</div>
<div>今後のために今ECソリューションの営業をしていて思ったことのまとめ。</div>
<div><a href="http://web-tan.forum.impressrd.jp/e/2012/11/16/14171" target="_blank">http://web-tan.forum.impressrd.jp/e/2012/11/16/14171</a></div>
<div></div>
<h2>リニューアルを検討している人の要望</h3>
<h3>1. 運用方法を変更したい</h4>
<div>・受注〜管理のフローを最適化したい</div>
<div>・新たに倉庫会社と連携したい</div>
<div>・コールセンターで注文を受けるようにしたい</div>
<p>&nbsp;</p>
<div>サイトの成長や扱う商品の変化など、</div>
<div>フェーズによって現行システムに不満を持ち出すケースが多い模様。</div>
<div></div>
<div>
<h3>2. 機能を拡張したい</h4>
<div>・メルマガ、ステップメール</div>
<div>・決済手段を増やしたい</div>
<div>・定期購入、ブログ連携</div>
<p>&nbsp;</p>
<div>初期の売上をとにかく増やすというフェーズを越え</div>
<div>コンバージョン率の向上や多方面のニーズへの対応など</div>
<div>サービスの拡張としての機能拡張が多い模様。</div>
<div></div>
<h3>3. プラットフォーム</h4>
<div>・スマホ、タブレット対応</div>
<div>・Facebookページと連携</div>
</div>
<div>・モールからの脱却</div>
<p>&nbsp;</p>
<div>時代の変化に伴う改修。</div>
<div>ユーザーが集まる、若しくはよりよいサービスを提供するためのニーズ。</div>
<div></div>
<h3>4. 露出を増やしたい</h4>
<div>・LPなど特設ページを増設したい</div>
<div>・複数のアフィリエイトをやりたい</div>
<div>・SEOやアクセス解析</div>
<p>&nbsp;</p>
<div>アクセスやコンバージョンを高めたいというニーズ。</div>
<div>次のステップへサイトを成長させるための施策としてリニューアルを検討するケースが多い模様。</div>
<div></div>
<h2>現状システムへの不満</h3>
<div>1. 機能の拡張ができない、運用が合わない</div>
<div>2. 広告、アフィリエイトとの連携がとれない</div>
<div>3. デザインの縛り、テンプレートの拡張ができない</div>
<p>&nbsp;</p>
<div>ASPやオープンソースを使っているECサイトに多いが</div>
<div>やはりやりたいことが出来ないという悩み。</div>
<div>独自システム構築済みのECサイトでは、コールセンターや物流センターの新設や</div>
<div>新たなプラットフォームへの対応きっかけでリニューアルを検討する模様。</div>
<div></div>
<h2>リニューアル後に期待すること</h3>
<div>1. 運用効率の向上 = コスト削減</div>
<div>2. アクセス数、広告効果向上 = 売上アップ</div>
<div>3. ブランディング</div>
<p>&nbsp;</p>
<div>当たり前だが、システムのリプレイスはEC事業者にとってコストでしかない。</div>
<div>コストに見合う成果 = 運用コストダウン、売上の向上が伴わなければする意味が無い。</div>
<div>逆に、そこら辺を可視化して説明すれば、大抵は納得してくれる。</div>
<div>例えば、スマホ最適化するとスマホ経由の売上が倍になるとか、</div>
<div>Facebookページと連携すると10%アクセス伸びるとか。</div>
<div></div>
<h2>越境ECについて</h3>
<div>正直ニーズとしてはほとんどない。</div>
<div>あったとしても淘宝網などの海外のモール系サービスへの出店について検討しているくらい。</div>
<div>ただ、ここのニーズは今はまだ無い方が良い。</div>
<div>ここは当社がプラットフォームを創りニーズを掘り起こす！</div>
<div></div>
<h2>まとめ</h3>
<div>冒頭で紹介したサイトの文言を引用すると</div>
<div>「成功しているECサイトは、ベンダーと夫婦のような関係を築いている」</div>
<div>ということ。</div>
<div>技術やプラットフォームは時代と共に変化するもの。</div>
<div>変化に迅速に、且つ上手に対応していくことはとても大事。</div>
<div>ベンダーもこれらの対応がソフトウェアの価値を向上させる。</div>
<div>要はECサイトの成長がベンダーの成長にもつながる関係の構築を作ることが両者にとって一番よいことですね。</div>
<p>&nbsp;</p>
<div>あと、すごく驚いたのが、上記の要望や不満</div>
<div><a href="/launchcart" target="_blank">LaunchCart</a>は全て無料で対応してくれること。</div>
<div>LaunchCart すごい…</div>


ECサイトのリニューアルを検討している人の要望まとめ

HTML5でWebカメラ &#8211; Photobooth.js

jQueryで簡単にグラフを作る！

jQuery 3D画像スライドエフェクト

<p>コンシューマ向けの3Dプリンタがかなり話題になってきた。<br />
扱える素材も増え、安価で高性能なプリンタが増えてきたことがきっかけで<br />
ビジネスとして比較的障壁が低く参入できるようになってきた。</p>
<p>日本のものづくりは今後中小企業が主役になる。<br />
その価値を決めるのは個人の技術と創造力だ。<br />
これまではデザインやプログラム、情報などPCさえあれば納品できる商材において、個人や企業が多数容易に参入してきていた。<br />
3Dプリンタの高性能化と低価格化により、今後はこのようなデジタルデータにとどまらずあらゆる”もの”をつくることができるようになる。<br />
とても素晴らしい変化だ。</p>
<p>ちょっとしたグラスやアクセサリーを作ってみたり、3Dスキャナーで壊れた水道管のパッキンを複製して自分で直すこともできるようになる。<br />
第三次産業革命や新産業革命という人も出てきている。</p>
<p>やりようによっては個人も企業も大きなビジネスチャンスだ。</p>
<p>ただ、1つだけ気をつけないといけないのは、3Dプリンタは今まであったものが簡単に作れるという範囲でのイノベーションということだ。<br />
生産効率の向上と手軽さが最大の魅力であり、大事なのは個人レベルでの取り扱いが可能となることで、新しい価値が生まれることに期待したい。<br />
紙やwebのデザイナーが新たな販促品を生み出したり、リフォーム会社がオリジナルの装飾部品を開発したりなど、今まで取り扱えなかった分野へチャレンジできるようになる。</p>
<p>今は普及が十分でなくこのような新たな価値はこれからという状況だが、今後はどんなものが生まれてくるかを注目したい</p>


3Dプリンタ 第三次産業革命の可能性

<p>出所：<a href="http://www.dac.co.jp/Contents/pdf/press/20121105_research.pdf" target="_blank">http://www.dac.co.jp/Contents/pdf/press/20121105_research.pdf</a></p>
<p>今年10月実施のスマートフォンの利用実態調査がdacさんから出ていたのでメモ。</p>
<p>&nbsp;</p>
<h2>スマートフォン年代別利用率</h3>
<table>
<tbody>
<tr>
<td></td>
<td>年代</td>
<td>2011年9月</td>
<td>2012年10月</td>
</tr>
<tr>
<td rowspan="5">男性</td>
<td>16～19歳</td>
<td>19.0%</td>
<td>33.8%</td>
</tr>
<tr>
<td>男性20代</td>
<td>23.9%</td>
<td>45.8%</td>
</tr>
<tr>
<td>男性30代</td>
<td>21.4%</td>
<td>36.2%</td>
</tr>
<tr>
<td>男性40代</td>
<td>14.7%</td>
<td>28.9%</td>
</tr>
<tr>
<td>男性50代</td>
<td>9.5%</td>
<td>18.4%</td>
</tr>
<tr>
<td rowspan="5">女性</td>
<td>16～19歳</td>
<td>7.5%</td>
<td>36.6%</td>
</tr>
<tr>
<td>女性20代</td>
<td>20.5%</td>
<td>39.1%</td>
</tr>
<tr>
<td>女性30代</td>
<td>11.6%</td>
<td>26.1%</td>
</tr>
<tr>
<td>女性40代</td>
<td>7.2%</td>
<td>18.6%</td>
</tr>
<tr>
<td>女性50代</td>
<td>5.4%</td>
<td>14.0%</td>
</tr>
</tbody>
</table>
<p>全体的に伸びているが女性の伸び率が目立つ。</p>
<h2>情報の入手方法</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
<td>4位</td>
<td>5位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>テレビ</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>84.0%</td>
<td>75.6%</td>
<td>65.5%</td>
<td>38.6%</td>
<td>32.6%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>友達・知人</td>
<td>雑誌</td>
</tr>
<tr>
<td>87.0%</td>
<td>77.0%</td>
<td>66.5%</td>
<td>37.5%</td>
<td>30.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>PC</td>
<td>友達・知人</td>
<td>雑誌</td>
</tr>
<tr>
<td>85.5%</td>
<td>82.5%</td>
<td>70.5%</td>
<td>58.5%</td>
<td>43.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>友達・知人</td>
<td>新聞</td>
</tr>
<tr>
<td>86.0%</td>
<td>75.5%</td>
<td>71.0%</td>
<td>34.0%</td>
<td>28.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>PC</td>
<td>友達・知人</td>
<td>店頭</td>
</tr>
<tr>
<td>81.5%</td>
<td>80.0%</td>
<td>73.5%</td>
<td>53.0%</td>
<td>44.0%</td>
</tr>
</tbody>
</table>
<p>女性に関してはスマートフォンが最も多い情報入手の手段となっている。</p>
<h2>情報の検索手段</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>スマートフォン</td>
</tr>
<tr>
<td>91.7%</td>
<td>67.0%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
</tr>
<tr>
<td>91.0%</td>
<td>82.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
</tr>
<tr>
<td>88.0%</td>
<td>81.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
</tr>
<tr>
<td>92.0%</td>
<td>72.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
</tr>
<tr>
<td>85.5%</td>
<td>81.0%</td>
</tr>
</tbody>
</table>
<p>こちらも女性はスマートフォンが最も多くなっている。</p>
<h2>情報の比較・検討手段</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
<td>4位</td>
<td>5位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
<td>友人・知人</td>
</tr>
<tr>
<td>88.8%</td>
<td>42.7%</td>
<td>24.7%</td>
<td>19.6%</td>
<td>11.9%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
<td>テレビ</td>
</tr>
<tr>
<td>85.5%</td>
<td>54.5%</td>
<td>22.5%</td>
<td>14.5%</td>
<td>13.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>友人・知人</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>73.5%</td>
<td>58.0%</td>
<td>26.5%</td>
<td>23.0%</td>
<td>20.0%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
<td>友人・知人</td>
</tr>
<tr>
<td>91.5%</td>
<td>53.0%</td>
<td>18.0%</td>
<td>14.0%</td>
<td>11.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>友人・知人</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>76.5%</td>
<td>56.5%</td>
<td>29.0%</td>
<td>20.0%</td>
<td>17.0%</td>
</tr>
</tbody>
</table>
<p>比較・検討は大きい画面(PC)でじっくり品定めをするらしい。</p>
<h2>購入を決断した媒体</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
<td>4位</td>
<td>5位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>店頭</td>
<td>スマートフォン</td>
<td>カタログ・パンフレット</td>
<td>店舗スタッフ</td>
</tr>
<tr>
<td>65.0%</td>
<td>49.9%</td>
<td>27.3%</td>
<td>16.4%</td>
<td>16.6%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>店頭</td>
<td>スマートフォン</td>
<td>カタログ・パンフレット</td>
<td>友人・知人</td>
</tr>
<tr>
<td>68.0%</td>
<td>40.5%</td>
<td>33.0%</td>
<td>11.0%</td>
<td>10.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>店頭</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人</td>
<td>店舗スタッフ</td>
</tr>
<tr>
<td>55.0%</td>
<td>48.0%</td>
<td>38.0%</td>
<td>17.0%</td>
<td>13.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td colspan="2">スマートフォン・店頭</td>
<td>友人・知人</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>72.0%</td>
<td colspan="2">39.0%</td>
<td>16.0%</td>
<td>14.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td colspan="2">店頭・PC</td>
<td>スマートフォン</td>
<td>友人・知人</td>
<td>店舗スタッフ</td>
</tr>
<tr>
<td colspan="2">53.5%</td>
<td>36.0%</td>
<td>22.5%</td>
<td>19.5%</td>
</tr>
</tbody>
</table>
<p>スマホや店頭で関心をもち、最終的なジャッジはPCでじっくり考えて買うということのよう。</p>
<h2>情報の共有手段</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>66.1%</td>
<td>38.6%</td>
<td>33.9%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>72.5%</td>
<td>58.0%</td>
<td>32.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>76.0%</td>
<td>52.5%</td>
<td>31.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>71.0%</td>
<td>51.0%</td>
<td>30.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>59.5%</td>
<td>55.0%</td>
<td>40.0%</td>
</tr>
</tbody>
</table>


スマートフォン利用実態調査

<p>出所：<a href="http://www.worksap.co.jp/topics/news/2012/1026.html" target="_blank">http://www.worksap.co.jp/topics/news/2012/1026.html</a></p>
<p>&nbsp;</p>
<p>大変参考になる記事を見つけたのでメモ。</p>
<p>&nbsp;</p>
<h4>主に大手企業ECサイト、通販運営者71人の回答</h6>
<table>
<tbody>
<tr>
<td>SNSプロモーション</td>
<td>39</td>
<td>55%</td>
</tr>
<tr>
<td>スマホ対応</td>
<td>32</td>
<td>45%</td>
</tr>
<tr>
<td>顧客データの分析</td>
<td>28</td>
<td>39%</td>
</tr>
<tr>
<td>リピート率向上</td>
<td>26</td>
<td>37%</td>
</tr>
<tr>
<td>SEO</td>
<td>19</td>
<td>27%</td>
</tr>
<tr>
<td>他社との差別化</td>
<td>18</td>
<td>25%</td>
</tr>
<tr>
<td>O2O連携</td>
<td>18</td>
<td>25%</td>
</tr>
<tr>
<td>リスティング</td>
<td>14</td>
<td>20%</td>
</tr>
<tr>
<td>システムコストの増大</td>
<td>13</td>
<td>18%</td>
</tr>
<tr>
<td>システム陳腐化</td>
<td>12</td>
<td>17%</td>
</tr>
<tr>
<td>セキュリティ脆弱性</td>
<td>11</td>
<td>15%</td>
</tr>
<tr>
<td>ブラックボックス化</td>
<td>9</td>
<td>13%</td>
</tr>
<tr>
<td>アフィリエイト</td>
<td>7</td>
<td>10%</td>
</tr>
<tr>
<td>バナー広告</td>
<td>6</td>
<td>8%</td>
</tr>
<tr>
<td>システム規模変更</td>
<td>3</td>
<td>4%</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h4>EC・通販関連システムの利用年数</h6>
<p><a href="/uploads-archive/2012/10/1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-524" title="1" src="/uploads-archive/2012/10/1.jpg" alt="" width="362" height="217" srcset="/uploads-archive/2012/10/1.jpg 362w, /uploads-archive/2012/10/1-300x179.jpg 300w, /uploads-archive/2012/10/1-228x136.jpg 228w" sizes="(max-width: 362px) 100vw, 362px" /></a></p>
<p>&nbsp;</p>
<p>なるほどと思える結果。</p>
<p>5年以上前のECシステムでスマホ、ソーシャルコマースが十分考慮されているものは無いはず。</p>
<p>システム的な小回りが効かないことに加え</p>
<p>1日のサイト停止がうん千万円という機械損失になる大規模サイト特有の悩みともとれる。</p>
<p>&nbsp;</p>
<h4>サイト運営業務に関する外部委託業務範囲</h6>
<p><a href="/uploads-archive/2012/10/2.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-528" title="2" src="/uploads-archive/2012/10/2.jpg" alt="" width="362" height="217" srcset="/uploads-archive/2012/10/2.jpg 362w, /uploads-archive/2012/10/2-300x179.jpg 300w, /uploads-archive/2012/10/2-228x136.jpg 228w" sizes="(max-width: 362px) 100vw, 362px" /></a></p>
<p>広告関連と思いきや、以外にもデザインが一番多い。</p>
<p>クリエイティブにこだわりがあるということはもちろんのこと、</p>
<p>古めのシステムはカート、決済、ポイントなどECとしての機能が重視されており、</p>
<p>CMSなど見た目の制御があまり考えられていないことも起因していると思う。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: hoshino

2013/02/28

2013/02/21

2013/02/07

2013/01/31

2013/01/23

2013/01/17

2013/01/10

2012/12/20

2012/12/20

2012/12/13

2012/12/06

2012/11/29

2012/11/22

2012/11/15

2012/11/08

2012/11/01

2012/09/20

2012/09/06