<p>OGPのTwitter版ともいうべき、機能「Twitter Cards」を弊社運営サイトに今更ながら設定してみました。</p>
<p>公式の説明はこちらです。</p>
<p><a href="https://dev.twitter.com/docs/cards" target="_blank">https://dev.twitter.com/docs/cards</a></p>
<p>&nbsp;</p>
<p>このTwitter Cardsを設定すると、該当のURLが紹介された時に、意図した画像や表現を設定することが出来ます。</p>
<p>設定は、弊社運営の<a title="カラコン通販キャッツアイ" href="http://catseye-store.com/" target="_blank">カラコン通販サイト「キャッツアイ」</a>にて行いました。</p>
<p>&nbsp;</p>
<h2>基本設定</h3>
<p>HTMLヘッダーにmetaタグとして以下の設定します。</p>
<table>
<thead>
<tr>
<th>Cardプロパティ</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td><tt>twitter:card</tt></td>
<td>タイプ, &#8220;summary&#8221;, &#8220;photo&#8221;, または &#8220;player&#8221;か指定します</td>
</tr>
<tr>
<td><tt>twitter:url</tt></td>
<td>ページのURL</td>
</tr>
<tr>
<td><tt>twitter:title</tt></td>
<td>ページのタイトル</td>
</tr>
<tr>
<td><tt>twitter:description</tt></td>
<td>ページの概要</td>
</tr>
<tr>
<td><tt>twitter:image</tt></td>
<td>記事に掲載される写真画像やサムネイルなど</td>
</tr>
<tr>
<td><tt>twitter:site</tt></td>
<td>@username<br />
カードのフッターに表示されます。Webサイトのツイッターアカウントです（例えば企業アカウントとか）</td>
</tr>
<tr>
<td><tt>twitter:creator</tt></td>
<td>@username<br />
カードに表示されるページの制作者のツイッターアカウントです</td>
</tr>
</tbody>
</table>
<p>ということでサイト上では以下のように記述しました。</p>

		<div id="crayon-64953fd582c74684623125" 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;meta name="twitter:card" content="summary"&gt;
    &lt;meta name="twitter:title" content="キャッツアイ｜カラコン通販サイト"&gt;
    &lt;meta name="twitter:url" content="http://catseye-store.com"&gt;
    &lt;meta name="twitter:description" content="カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"&gt;
    &lt;meta name="twitter:image" content="http://catseye-store.com/images/big.jpg"&gt;
    &lt;meta name="twitter:site" content="@catseye_store"&gt;
    &lt;meta name="twitter:creator" content="@catseye_store"&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-64953fd582c74684623125-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582c74684623125-2">2</div><div class="crayon-num" data-line="crayon-64953fd582c74684623125-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582c74684623125-4">4</div><div class="crayon-num" data-line="crayon-64953fd582c74684623125-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd582c74684623125-6">6</div><div class="crayon-num" data-line="crayon-64953fd582c74684623125-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd582c74684623125-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:card"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"summary"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582c74684623125-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:title"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"キャッツアイ｜カラコン通販サイト"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd582c74684623125-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:url"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"http://catseye-store.com"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582c74684623125-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:description"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd582c74684623125-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:image"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"http://catseye-store.com/images/big.jpg"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd582c74684623125-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:site"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"@catseye_store"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd582c74684623125-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"twitter:creator"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"@catseye_store"</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2>プレビュー</h3>
<p>Twitterのデベロッパーサイトで確認が出来ます。</p>
<p><a href="https://dev.twitter.com/docs/cards/preview">preview tool</a>にいき、URLを入力します。</p>
<p><a href="/officer/twitter-cards%e3%82%92%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82.html/attachment/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2013_01_16_17_03" rel="attachment wp-att-1153"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1153" alt="スクリーンショット_2013_01_16_17_03" src="/uploads-archive/2013/01/a839bdb09859a2c182c0b6e03a59af1c-265x300.jpg" width="265" height="300" /></a></p>
<p>&nbsp;</p>
<p>設定できました。</p>
<h2>TwiiterCards利用申請</h3>
<p>最後にTwitterにCardの利用を設定する必要があります。</p>
<p>再び、Twitterのデベロッパーサイト<a href="https://dev.twitter.com/form/participate-twitter-cards">Apply to participate</a>にいき設定します。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Twitter Cardsを設定してみた。

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プラグイン

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
<div class="booklink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4822282295/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/51HKFQD123L._SL160_.jpg" style="border: none;" /></a></div>
<div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
<div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4822282295/sackoh71-22/" target="_blank" >アジャイルプロジェクトマネジメント</a></p>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">ジム ハイスミス 日経BP出版センター 2005-06-09    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4822282295/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>先日、<a title="アジャイルソフトウェア開発という手法" href="/officer/%e3%82%a2%e3%82%b8%e3%83%a3%e3%82%a4%e3%83%ab%e3%82%bd%e3%83%95%e3%83%88%e3%82%a6%e3%82%a7%e3%82%a2%e9%96%8b%e7%99%ba%e3%81%a8%e3%81%84%e3%81%86%e6%89%8b%e6%b3%95.html">アジャイルサムライ</a>というアジャイル開発のプロセスをまとめた本をご紹介してから引き続き、「アジャイル開発」について考察を深めているなかでの一冊です。なんとこの本も2005年出版なんですね。長い間、アジャイル開発という開発手法を知らなかったことがお恥ずかしい限りです。</p>
<p>アジャイルサムライが、プロセスの説明を重視していて、こちらの本はどちらかというとアジャイルプロジェクトマネジメント（APM）という概念からどのようにマネジメントを改善出来るかということを述べています。</p>
<h2>抜粋</h2>
<h3>■アジャイルプロジェクトマネジメントの価値</h3>
<ol>
<li>プロセスやツール　＜　個人との対話</li>
<li>包括的なドキュメント　＜　動作するソフトウェア</li>
<li>契約の交渉　＜　顧客との協調</li>
<li>計画に従う　＜　変化への対応</li>
</ol>
<h3>■アジャイルプロジェクトマネジメント（APM）の原則</h3>
<ul>
<li>製品提供と顧客価値
<ol>
<li>顧客価値の提供</li>
<li>反復型で機能ベースの提供</li>
<li>技術的優位性の重視</li>
</ol>
</li>
<li>リーダーシップ－コラボレーション
<ol>
<li>探索の奨励</li>
<li>適応型（自己組織的、自発的規律）チームの構築</li>
<li>シンプル</li>
</ol>
</li>
</ul>
<h3>■APMプロセスフレームワーク（APMモデル）</h3>
<ol>
<li>適応(Envision)
<ol>
<li>何を提供するかについての構想を立てる。</li>
<li>プロジェクトのスコープを決める。</li>
<li>ステークホルダも含めたチーム体制を決める。</li>
<li>チームメンバーがどのように協力し合って作業を進めるかの構想を立てる。</li>
</ol>
</li>
<li>思索(Speculate)
<ol>
<li>最初の要求を幅広く収集する。</li>
<li>機能リストを作り、その作業負荷を見積もる。</li>
<li>リソース計画とリリース計画（リリース、マイルストーン、イテレーション）を立てる。</li>
<li>計画にリスク軽減策を盛り込む。</li>
</ol>
</li>
<li>探索(Explore)
<ol>
<li>機能を実際にリリースする。</li>
<li>協力的で自己組織的なプロジェクトコミュニティを作り出す。</li>
<li>機能を実際にリリースする。</li>
<li>ステークホルダ間の対話を取り持つ。</li>
</ol>
</li>
<li>適応(Adapt)
<ol>
<li>計画し、結果を監視し、軌道修正する。</li>
<li>変更や変化に対応する。</li>
<li>学習した事を組み込み、それを教訓として覚えておく。</li>
<li>思索・探索・適応のループをたどり、各イテレーションで機能を洗練させていく。</li>
<li>チームが新しい情報を集めながら、構想フェーズに立ち戻って見直す。</li>
<li>顧客の観点、技術的観点、プロセスパフォーマンスの観点、プロジェクトステータスの観点から、成果を見直す。</li>
<li>最新の情報に基づいて修正されたプロジェクトの展望と、実情を対比して考察する。</li>
<li>適応によって得られた結果は次のイテレーションを開始する際の再計画に組み込まれる。</li>
</ol>
</li>
<li>終結(Close)
<ol>
<li>プロジェクトの終了を見極める。</li>
<li>学習し、学習した内容を次のイテレーションの作業に組み込む。</li>
<li>次のプロジェクトチームに引き継ぐ。</li>
</ol>
</li>
</ol>
<h2>まとめ</h2>
<p>アジャイルサムライだけでは、正直、ピンとこないというか腹にしっかり落ちた感覚はなかったのですが、私が携わるプロジェクトマネジメントという目線での本書であったので、非常にわかりやすかった。スポーツをやるにしても、茶道や書道などの芸術をやるにしても、先人が積み上げてきたものが基本、手本となっていて、それを習って習得することが最も早くレベルが上がるものと考えています。この考え方は、ビジネスにおいても当てはまるので、このようなフレームワーク、概念は積極的に取り入れて行きたいと思います。</p>


アジャイルプロジェクトマネジメント 最高のチームづくりと革新的な製品の法則

<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

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
<div class="booklink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4314010479/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/51oNT1FOu3L._SL160_.jpg" style="border: none;" /></a></div>
<div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
<div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4314010479/sackoh71-22/" target="_blank" >経済は感情で動く―― はじめての行動経済学</a></p>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">マッテオ モッテルリーニ 紀伊國屋書店 2008-04-17    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4314010479/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>行動経済学の先駆けの本。</p>
<p>合理的に判断をしないという人間の価値判断が非常に参考になります。</p>
<h2> 抜粋</h3>
<p>・お金に勝手に相対的価値を付けてしまう。娯楽費4万円と名目のない2万円+娯楽費2万円は違う。</p>
<p>・三つあると真ん中を選ぶ<br />
寿司屋のランチメニューで「特上・上・並」とあれば、「上」の注文がいちばん多い。一般に、三つの選択肢では真ん中が好まれる。売る立場でいうと、4000円と5000円の類似商品があって、値段の高いほうを「売りたい」と思えば、6000円という選択肢を追加すればよい。</p>
<p>・自分のものになると値が上がる<br />
通販での試供品の提供「使ってダメなら一週間以内に返品して下さい。お値段は無料です」。通販業者はめったに返品されないことを知っている。――買ってもいないのに、手元に来ただけで「保有効果」がはたらきます。</p>
<p>・進むも地獄、退くも地獄の…<br />
巨額の先行投資をしている。さらに追加の投資が必要。しかし、先行きの展望は「暗い」。これは、「コンコルドの誤謬」と呼ばれるもので、展望がないなら、いま、手を引くべきなのです。</p>
<p>・ダメな会議の典型とは…<br />
会議の結論がなかなか出ない。話がグルグル回っている気がする。これは最初の発言者の発言にひっぱられ、新しい話題が出てこなくなっているのです。これを、「アンカリング効果」といいます。</p>
<p>・交渉は最後の一言で決まる<br />
交渉事でメインの話が終わったら、安心したりしていませんか。締めの一言が、契約にこぎつけるには重要です。人の記憶はメインのことと、最後の一言で印象の良し悪しが決まります。これを「ピーク・エンドの法則」といいます(同様に、恋人とのデートは、別れ際の一言が最重要です)。</p>


経済は感情で動く

<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サイトのリニューアルを検討している人の要望まとめ

<p>みなさんは、マウスジェスチャーを使用しますか？</p>
<p>私は、Windows、Firefoxを メインに使っていた数年前から、マウスジェスチャーを多用していました。</p>
<p>ブラウジングなどでは、マウスを持つ片手のみで完結し、戻るためにフォーカスを合わせる必要もないので捗ります。</p>
<p>mac、chromeに移行をしてからもSmooth Gestureというプラグインを利用していたのですが、</p>
<p>突然、Chrome Web Storeから削除されるという事態が起こりました。</p>
<p><del><span style="font-size: x-large;"><a href="/uploads-archive/2012/12/smooth-gesture-8.png"><img decoding="async" loading="lazy" class=" wp-image-1549 alignnone" alt="smooth-gesture-8" src="/uploads-archive/2012/12/smooth-gesture-8.png" width="24" height="24" /></a>Smooth Gesture</span></del></p>
<p>当時の流れなどは↓のブログに書かれております。</p>
<p><a href="http://blog.livedoor.jp/protanuki/archives/13931688.html" target="_blank">http://blog.livedoor.jp/protanuki/archives/13931688.html</a></p>
<p>&nbsp;</p>
<p>その他にも</p>
<p><a href="https://chrome.google.com/webstore/detail/gestures-for-chrometm/jpkfjicglakibpenojifdiepckckakgk?hl=ja" target="_blank">Gestures for Chrome(TM)</a></p>
<p>などのマウスジェスチャーのプラグインがあるのですが、残念ながら現時点でmacには、対応しておりません。</p>
<p>マウスジェスチャーが失われてから数ヶ月、chromeを離れられる訳にもいかず、今でも長年の癖で空振りジェスチャーをしてしまっていましたが、ふと思い立って調べてみると、<strong>Smooth Gesture</strong>が復活していることが分かりました！</p>
<p>問題となったマルウェア削除したバージョンということですが、ご利用は自己責任でお願い致します。</p>
<h2>リンク</h3>
<p><span style="font-size: large;"><a href="http://nisza.org/" target="_blank">http://nisza.org/</a></span></p>
<p><a href="/uploads-archive/2012/12/fde42154af135f9fec5ec34d7c11da85.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1550" alt="スクリーンショット_2013_02_20_12_15-3" src="/uploads-archive/2012/12/fde42154af135f9fec5ec34d7c11da85-300x123.jpg" width="300" height="123" /></a></p>
<blockquote><p>Smooth Gestures 0.15.4 &#8211; Hacked clean version (no malware)</p></blockquote>
<p>と書いてある箇所からダウンロードが出来ます。</p>
<h3>インストールの注意点</h4>
<p>Chrome Web Store外からの拡張機能をインストールするためには「拡張機能の管理」を開き、</p>
<p>ダウンロードしたファイルを「拡張機能の管理」の画面にドラッグ＆ドロップでインストールをすることが出来ます。</p>
<p>&nbsp;</p>


mac版chromeでマウスジェスチャーが動作する拡張機能「Smooth Gesture」

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
<div class="booklink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4274068560/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/51b4P511wTL._SL160_.jpg" style="border: none;" /></a></div>
<div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
<div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4274068560/sackoh71-22/" target="_blank" >アジャイルサムライ−達人開発者への道−</a></p>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">Jonathan Rasmusson オーム社 2011-07-16    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4274068560/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>昔から言葉だけは聞いたことがあったのですが、友人経営者がアジャイルサムライという本を推薦していたので、読んでみました。</p>
<p>以下、アジャイル開発とは何か簡単にまとめます。</p>
<h2>アジャイルソフトウェア開発</h2>
<p>そもそもアジャイルという単語自体を調べると以下であることが分かります。</p>
<blockquote><p>アジャイル（agile) は「俊敏な」という意味。</p>
<p><a href="http://d.hatena.ne.jp/keyword/%A5%BD%A5%D5%A5%C8%A5%A6%A5%A7%A5%A2">ソフトウェア</a>開発プロセスのうち、良いものを素早く無駄なく作ろうとするものの総称。</p>
<p>従来の、後戻り不可能なウォータフォール型開発と対比して使われることがある。</p>
<ul>
<li><a href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%B8%A5%E3%A5%A4%A5%EB">アジャイル</a>開発の価値
<ul>
<li><a href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%BB%A5%B9">プロセス</a>やツールより人と人同士の相互作用を重視する。</li>
<li>包括的なドキュメントより動作する<a href="http://d.hatena.ne.jp/keyword/%A5%BD%A5%D5%A5%C8%A5%A6%A5%A7%A5%A2">ソフトウェア</a>を重視する。</li>
<li>契約上の交渉よりも顧客との協調を重視する。</li>
<li>計画に従うことよりも変化に対応することを重視する。</li>
</ul>
</li>
</ul>
</blockquote>
<p>ZDnetJAPANさんの文章を引用させていただくと下記になります。</p>
<blockquote><p>ウォーターフォールモデルを採用した場合には、ユーザーは開発の終盤にならなければシステムを利用して仮説の検証を行うということができず、そのためほとんどの機能を作り終えた後で変更要求が頻発して対応しきれなくなり、最終的に満足度の低いシステムになってしまう可能性が高いと言えます。</p>
<p>それに対して、アジャイル開発では開発プロジェクトの期間を短期間（1週間〜6週間）に区切り、この間に開発工程を一通り行って、部分的に機能を完成させます。そしてこの「短く区切られた期間で動くアプリケーションを開発する」という作業を繰り返すことによって、段階的にシステム全体を仕上げていきます。このような開発スタイルは反復型（イテレーション）開発と呼ばれていますが、開発期間の早い段階からユーザーが動くソフトウェアを目で見て確認できます。</p></blockquote>
<ul>
<li>3つの真実
<ul>
<li>プロジェクトの初めに全ての要求を集める事はできない。</li>
<li>集めたところで、要求はどれも必ず変わる。</li>
<li>やるべき事は必ず、当初の予定や予算より多い。</li>
</ul>
</li>
<li>アジャイルでは役割分担がはっきりとは分かれていない。</li>
<li>アジャイルチームの特徴
<ul>
<li>きっちり区別しない役割分担</li>
<li>継続的な開発工程</li>
<li>チームで成果責任を果たそうとする態度</li>
</ul>
</li>
<li>インセプションデッキ
<ul>
<li>我々はなぜここにいるのか？プロジェクトの意図、背景を理解</li>
</ul>
</li>
<li>エレベーターピッチを作る
<ul>
<li>エレベーターで会った重要人物に30秒でアイデアを伝える</li>
</ul>
</li>
<li>パッケージデザインを作る
<ul>
<li>プロダクトの顧客へのアピールは何か</li>
</ul>
</li>
<li>やらない事リストを作る
<ul>
<li>なにがプロジェクトのスコープ外か？内か？</li>
</ul>
</li>
<li>ご近所さんを探せ
<ul>
<li>予め関係しそうな人達に根回しする</li>
</ul>
</li>
</ul>
<h2> まとめ</h2>
<p>ウォーターフォール型の、いわゆるシステム開発のフレームワークは納めているつもりではおりましたが、弊社のようにライトなWebサービスの受託開発などでは、実態にそぐわないパターンが多いと感じていたところに、このアジャイルソフトウェア開発はまさに現代の手法だと感じました。</p>
<h3>参考サイト</h3>
<p><a href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%B8%A5%E3%A5%A4%A5%EB" target="_blank">http://d.hatena.ne.jp/keyword/%A5%A2%A5%B8%A5%E3%A5%A4%A5%EB</a></p>
<p><a href="http://japan.zdnet.com/sp/sp_06sp0130/20248727/" target="_blank">http://japan.zdnet.com/sp/sp_06sp0130/20248727/</a></p>


アジャイルソフトウェア開発という手法

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

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

<p>皆様もみたことがあるであろうこのマーク。グッドデザイン賞2012が11月25日に発表されました。</p>
<p>大賞はテレビ番組 の「デザインあ」（<a href="http://www.g-mark.org/award/describe/39089">http://www.g-mark.org/award/describe/39089</a>）でした。</p>
<p>2つ驚いた点があるのですが、単純にデザイン性の優れた製品が対象だと思っていたのですが、</p>
<p>グッドデザイン賞が定めるデザインの定義はもっと広く、</p>
<blockquote>
<h4>グッドデザイン賞の対象</h6>
<p>「グッドデザイン賞」は、家電やクルマなどの工業製品から、住宅や建築物、各種のサービスやソフトウェア、パブリックリレーションや地域づくりなどのコミュニケーション、ビジネスモデルや研究開発など、有形無形を問わず、人によって生み出されるあらゆるものや活動を対象としています。<br />
その対象の主体者（企業やデザイナーなど）は、その対象が、翌年の3月末までに生活者が使用・利用できる状況にあれば、グッドデザイン賞に応募することができます。</p></blockquote>
<p>とのことでした。</p>
<p>そして、今回の大賞を取ったのが、テレビ番組ということです。</p>
<p>ウェブの制作会社であれば知らない人はいないであろう、中村勇吾氏がディレクターに入っていたりとその番組は見たことがないのですが、ものすごく興味がそそられるものでした。</p>
<p><a href="http://www.nhk.or.jp/design-ah/ah-song/">http://www.nhk.or.jp/design-ah/ah-song/</a></p>
<p>のようなウェブサイトも公開されており、一つの作品として評価されているんだなと思います。</p>
<p>&nbsp;</p>
<h2>モバイルアプリケーションが金賞受賞</h3>
<p>さらに、驚くべきことは金賞に</p>
<p><a href="http://www.g-mark.org/award/describe/39107" target="_blank">http://www.g-mark.org/award/describe/39107</a></p>
<p>アプリが入ってきており、生活をより便利ものにするという広義のデザインとして、</p>
<p>モバイルアプリケーションが認めれたことになります。</p>
<h3>過去のグッドデザイン賞</h4>
<p>過去のグッドデザイン賞を見回してみても、いわゆるIT分野のソフトウェアというのは</p>
<p>受賞歴がありません。</p>
<ul>
<li><a href="http://archive.g-mark.org/2011/" target="_blank">Good Design Award 2011</a></li>
<li><a href="http://archive.g-mark.org/2010/" target="_blank">Good Design Award 2010</a></li>
<li><a href="http://archive.g-mark.org/2009/" target="_blank">Good Design Award 2009</a></li>
<li><a href="http://archive.g-mark.org/2008/" target="_blank">Good Design Award 2008</a></li>
<li><a href="http://archive.g-mark.org/2007/" target="_blank">Good Design Award 2007</a></li>
</ul>
<p>といいたいところなのですが、</p>
<p><a href="http://archive.g-mark.org/2007/best15/07C02038.html" target="_blank">http://archive.g-mark.org/2007/best15/07C02038.html</a></p>
<p>ありましたセカンドライフが。</p>
<p>もう5年前にもなるのですね。</p>
<p>今は、こんな感じになっているようです。</p>
<p><a href="http://liginc.co.jp/osora/archives/2575" target="_blank">http://liginc.co.jp/osora/archives/2575</a></p>
<h2>まとめ</h3>
<p>最後にオチがついてしまいましたが、グッドデザイン賞を眺めていて、我々が手がけている分野でも評価をされるということがわかり、いつかは、このような賞を貰えるような仕事を作ってみたいと思いました。</p>


グッドデザイン賞2012のデザインあ

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

<p>2012年11月20日に早稲田大学の大隈講堂を会場にした、イベントに参加して参りました。</p>
<p>大企業とベンチャーを結びつけるOpen　Innovation　Networkということで、</p>
<p>大企業（CVC）、VC、ベンチャー経営者300人が一堂に会するというイベントでした。</p>
<p>開催趣旨説明で主催者であるメンバーズ剣持社長から説明がありましたが、全てが手弁当で会場さえも早稲田大学から無償で提供されているということをお聞きし、本イベント開催にあたっての関係者の皆さまに非常に感謝の念を覚えました。</p>
<p>私は普段から大学のインキュベーション施設にも入居しており、オフィスも高田馬場にあることから大学に今でも訪れる機会が多いのですが、卒業以来来ていなかったというOBの経営者の方が懐かしんでおられたり、私自身も、何年ぶりかに再会出来た方が複数名いたりと非常に意義のあるイベントでした。</p>
<p><a href="http://everevo.com/event/2464  " target="_blank">http://everevo.com/event/2464</a></p>
<h2>開催趣旨説明</h3>
<p>メンバーズ剣持社長から開催にあたっての趣旨説明。</p>
<p>雇用を創出できるのは現在ベンチャー企業しかない。大企業の状況は惨憺たるものだ。</p>
<p>だからこそ、ベンチャーを育てるために出来ることをやるという使命感の元に開催をしている。</p>
<p>イスラエル、軍事産業からベンチャーのメッカ</p>
<p>韓国、ベンチャー起業で兵役免除。雇用を増やすことを最重視する。</p>
<p>&nbsp;</p>
<p>株式上場　12社</p>
<p>M&amp;A　271社</p>
<p>&nbsp;</p>
<p>シリコンバレーはベンチャー企業だけのためのものでなく大企業のためのものである</p>
<p>IBMは直接投資ではなく、VCに資金提供</p>
<p>大企業はコーポレートベンチャリングへの関心が2/3がない</p>
<h2> パネルディスカッション</h3>
<p>・インキュベートファンド　本間さん</p>
<p>・リードキャピタル　高階さん</p>
<p>・マイク上杉さん</p>
<p>社長をやりたいから会社をやっている人のほうが大きい</p>
<p>No１になりたいから社長をやっている人のほうが少ない</p>
<p>日本では、全てのものに神が宿って、情が入る。</p>
<p>欧米では、企業、法律で決めた仕組みでしかない。</p>
<p>本間さん</p>
<p>シードステージに提供</p>
<p>ポケラボとセガの事例</p>
<p>セガのスマートフォンの知見とポケラボのガラケーの知見の融合</p>
<p>gumi　500名</p>
<div></div>
<p>高階さん</p>
<p>1999年渡米</p>
<p>CVC(Corporate Venture Capital)　2003年に帰国</p>
<p>3億の投資がメイン</p>
<div>リードのアジャイルメディア</div>
<p>&nbsp;</p>
<p>マイク上杉さん</p>
<p>ソーシャルリワーズ</p>
<p>2500万円ずつ出しあい5000万円で家を売って開始。</p>
<p>VC周りを1年やったが、全く受けなかった。</p>
<p>シードで5%しかやらない。</p>
<p>シリーズAでも少なめに。</p>
<div>ニッチマーケットに特化</div>
<p>&nbsp;</p>
<p>・大企業側が降りてきてくれている</p>
<p>早めに情報を共有することが大きい</p>
<p>・50%渡せは、いきなり結婚しろと言っているようなもの。</p>
<p>・MAのバリューがあがることを期待している</p>
<h2> パネルディスカッション2</h3>
<p>仮説</p>
<p>・大手企業にとってグローバル競争化に自前だけで事業開発は無理</p>
<p>・ベンチャーとの連携もしくはM&amp;Aで事業開発をしたいと本気で思っている</p>
<p>・起業家・アーリーVC・ミドルステージ</p>
<p>&nbsp;</p>
<p>リーンスタートアップ</p>
<p>起業家は若者　よそ者　変わり者</p>
<p>&nbsp;</p>


Connect! 2012に参加して

<p>今日も少し思いを綴っていきたいと思います。</p>
<p>&nbsp;</p>
<p>直近で取り組んだ案件で、私はこの「チームプレー」を意識しました。</p>
<p>ベンチャーでありがちな、今でも私自身もやってしまうのですが、個々の「マンパワー」で力技で納品に持っていくというやり方があります。当然、マンパワー＝個人能力ということもあるので、マンパワーが個々に高めるというのは当たり前です。</p>
<p>しかし、今回は構成するメンバーも今まではとは違う布陣で、個々人でやり切るというよりは、守備範囲を明確に決め、ボールを受け渡しあうチームプレーをとかく意識しました。</p>
<p>自分の担当に責任を持つのは当然ですが、何よりパスをしっかりさせ、全体を見回すために、定期的な会議を徹底的にやりました。</p>
<p>責任感に欠く行動については、徹底的に叱りました。</p>
<p>しかし、後から考えるとそのようなことを取ってしまうのは当たり前かもしれません。何故なら、今回初めて取り組んでいることですから。</p>
<p>皆、地頭は申し分ないので、すぐに理解し軌道修正をしてくれました。</p>
<p>そして結果、納品当日もスムーズに進行し、クライアント様にはお褒めの言葉を頂きました。</p>
<p>携わってくれたメンバーにはすごく感謝しているし、何より会社としての組織力が向上したと感じました。</p>
<h4>補足</h6>
<p>あとは、個人としての内容になりますが、組織を思うように動かし、結果、 クライアント様に喜んで頂き、そして対価を頂く。これほど、冥利に尽きることはありません。</p>
<p>それぞれが、満足を感じる、充足感を得るポイントというのは違うと思いますが、是非、仕事を通じてそういうのを見つけて頂きたいと心から思っています。何故なら、それこそが人して幸せだと思うからです。そのために、必要なことがあれば是非、私に意見を言って頂きたいと思います。</p>
<div></div>


チームプレーと組織力

<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>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #役員

2013/01/17

2013/01/17

2013/01/10

2013/01/09

2012/12/20

2012/12/20

2012/12/20

2012/12/13

2012/12/13

2012/12/06

2012/12/06

2012/11/29

2012/11/29

2012/11/22

2012/11/22

2012/11/15

2012/11/15

2012/11/08