<p>商品詳細で使えそうな3DのjQueryプラグインを試してみた。</p>
<p><a class="demo" href="/demo/hoshino/47/detail.html">デモ</a></p>
<p>&nbsp;</p>
<p>設置方法は以下</p>
<p>js</p>

		<div id="crayon-64953fd591a67670239410" 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;">
$( window ).load(function()
{
	$('#slider').impulseslider({
		height: 300,
		width: 480,
		depth: 329,
		perspective: 2800,
		pauseTime: 3000,
		transitionDuration: 1000,
		transitionEffect: "ease-in-out",
		autostart: true,
		rightSelector: ".right",
		leftSelector: ".left",
		pauseSelector: ".pause",
		directionRight: true,
		containerSelector: "#slider-container",
		spinnerSelector: "#slider",
		images: ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"],
		imageDivClasses: ["face"]
	});
});</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-64953fd591a67670239410-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-2">2</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-4">4</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-6">6</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-8">8</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-10">10</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-12">12</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-14">14</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-16">16</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-18">18</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a67670239410-20">20</div><div class="crayon-num" data-line="crayon-64953fd591a67670239410-21">21</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-64953fd591a67670239410-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">window</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">load</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#slider'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">impulseslider</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-4"><span class="crayon-h">		</span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">300</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-5"><span class="crayon-h">		</span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">480</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-6"><span class="crayon-h">		</span><span class="crayon-i">depth</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">329</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-7"><span class="crayon-h">		</span><span class="crayon-i">perspective</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2800</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-8"><span class="crayon-h">		</span><span class="crayon-i">pauseTime</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">3000</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-9"><span class="crayon-h">		</span><span class="crayon-i">transitionDuration</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">1000</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-10"><span class="crayon-h">		</span><span class="crayon-i">transitionEffect</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"ease-in-out"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-11"><span class="crayon-h">		</span><span class="crayon-i">autostart</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-12"><span class="crayon-h">		</span><span class="crayon-i">rightSelector</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">".right"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-13"><span class="crayon-h">		</span><span class="crayon-i">leftSelector</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">".left"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-14"><span class="crayon-h">		</span><span class="crayon-i">pauseSelector</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">".pause"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-15"><span class="crayon-h">		</span><span class="crayon-i">directionRight</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-16"><span class="crayon-h">		</span><span class="crayon-i">containerSelector</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"#slider-container"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-17"><span class="crayon-h">		</span><span class="crayon-i">spinnerSelector</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"#slider"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-18"><span class="crayon-h">		</span><span class="crayon-i">images</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">"img/1.jpg"</span><span class="crayon-sy">,</span><span class="crayon-s">"img/2.jpg"</span><span class="crayon-sy">,</span><span class="crayon-s">"img/3.jpg"</span><span class="crayon-sy">,</span><span class="crayon-s">"img/4.jpg"</span><span class="crayon-sy">,</span><span class="crayon-s">"img/5.jpg"</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-19"><span class="crayon-h">		</span><span class="crayon-i">imageDivClasses</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">"face"</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a67670239410-20"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd591a67670239410-21"><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>HTML</p>

		<div id="crayon-64953fd591a6c175601526" 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="slider-container"&gt;
    &lt;div id="slider"&gt;
       &lt;!-- to be populated by the plugin--&gt;
    &lt;/div&gt;

&lt;/div&gt;
 &lt;div class="nav"&gt;
    &lt;span class="left arrow"&gt;&amp;#60;&lt;/span&gt;
    &lt;span class="pause arrow"&gt;||&lt;/span&gt;
    &lt;span class="right arrow"&gt;&amp;#62;&lt;/span&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-64953fd591a6c175601526-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a6c175601526-2">2</div><div class="crayon-num" data-line="crayon-64953fd591a6c175601526-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a6c175601526-4">4</div><div class="crayon-num" data-line="crayon-64953fd591a6c175601526-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a6c175601526-6">6</div><div class="crayon-num" data-line="crayon-64953fd591a6c175601526-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a6c175601526-8">8</div><div class="crayon-num" data-line="crayon-64953fd591a6c175601526-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591a6c175601526-10">10</div><div class="crayon-num" data-line="crayon-64953fd591a6c175601526-11">11</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-64953fd591a6c175601526-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"slider-container"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a6c175601526-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 ">"slider"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd591a6c175601526-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">&lt;!-- to be populated by the plugin--&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a6c175601526-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd591a6c175601526-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a6c175601526-6"><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd591a6c175601526-7"><span class="crayon-i "> </span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"nav"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a6c175601526-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"left arrow"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">&amp;#60;</span><span class="crayon-r ">&lt;/span&gt;</span></div><div class="crayon-line" id="crayon-64953fd591a6c175601526-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"pause arrow"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">||</span><span class="crayon-r ">&lt;/span&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591a6c175601526-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"right arrow"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">&amp;#62;</span><span class="crayon-r ">&lt;/span&gt;</span></div><div class="crayon-line" id="crayon-64953fd591a6c175601526-11"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>cssは</p>
<p>font-awesome.min.css</p>
<p>を固定で読み込み、ナビゲーションなどは自分で調整すればOK。</p>
<p>ナビゲーションはjsの引数</p>
<p>・rightSelector → 右送りのオブジェクト</p>
<p>・leftSelector → 左送りのオブジェクト</p>
<p>・pauseSelector → 停止のオブジェクト</p>
<p>と指定する。</p>
<p>あとは</p>
<p>・containerSelector → コンテナ(画像の上のオブジェクト)</p>
<p>・spinnerSelector → 実際に画像が入るオブジェクト</p>
<p>・images → 画像のパスを指定</p>
<p>spinnerSelectorで指定した要素はpositionがabsoluteになるのでレイアウトに注意が必要。</p>
<p>&nbsp;</p>
<p>わりと派手だが、画像を複数効果的に見せたいときなどはいいかもしれない。</p>

商品詳細で使えそうな3D jQueryプラグイン

【CentOS 6】Movable Type 6のインストール環境を作ってみました

<p>Redmineのインストールで、</p>
<p>nokogiri以降のbundle installが失敗し、DBが作成されなかった。</p>
<p>原因は、libxml と libxsltがインストールされていないため！</p>
<p></p>

		<div id="crayon-64953fd591615119410416" 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;">
yum install libxml*</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-64953fd591615119410416-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd591615119410416-1"><span class="crayon-e">yum </span><span class="crayon-e">install </span><span class="crayon-e ">libxml*</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p></p>

		<div id="crayon-64953fd591619743506310" 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;">
yum install libxslt*</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-64953fd591619743506310-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd591619743506310-1"><span class="crayon-e">yum </span><span class="crayon-e">install </span><span class="crayon-e ">libxslt*</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>先に、yum経由でその２つをインストールして、bundleのインストールをしたら</p>
<p>nokogiri以降のbundle installが成功し、DBが作成されました。</p>

bundle install 、nokogiri以降のインストール失敗

<p>2013年10月7日Yahooショッピングが衝撃的な発表をしましたね。</p>
<p>Yahooショッピングの出店は、大量に広告を投下してスタートダッシュをかけない限り、収益性に見合わないと出店を見合わせておりましたが、いよいよ出店する理由がなくなりました。</p>
<p>どれくらいの差が生じるのか？</p>
<p>最大のボリュームゾーンと想定する月商100万円規模で出店プランや費用シュミレーションを比較してみたいと思います。</p>
<p>比較するにあたり最も重要な「条件を揃える」ために出来る限りシンプルに条件を指定しています。</p>
<p>&nbsp;</p>
<p><span style="font-size: x-small;">なお、個人的な調査に基づいておりますので、間違いがある可能性も御座います。</span></p>
<p><span style="font-size: x-small;">また、実際には、アフィリエイト負担やポイント原資など他にも細かく費用が掛かるものがあり、モール固有のものは省いて粗く比較しています。</span></p>
<p><span style="font-size: x-small;">上記二点予めご了承下さいませ。</span></p>
<h2>出店プラン比較</h3>
<h3>条件</h4>
<ul>
<li>最小のプラン</li>
<li>税抜き</li>
</ul>
<table border="0">
<tbody>
<tr>
<td></td>
<td>Yahoo!ショッピング</td>
<td>楽天</td>
<td>DeNAショッピング</td>
<td>Amazon</td>
</tr>
<tr>
<td>プラン名称</td>
<td></td>
<td>がんばれプラン</td>
<td>ライトプラン</td>
<td>大口出品</td>
</tr>
<tr>
<td>初期費用</td>
<td><span style="color: #ff0000;">無料</span></td>
<td>￥60,000</td>
<td>￥60,000</td>
<td><span style="color: #ff0000;">無料</span></td>
</tr>
<tr>
<td>月額費用</td>
<td><span style="color: #ff0000;">無料</span></td>
<td>￥19,500</td>
<td>￥16,500</td>
<td>￥4,666</td>
</tr>
<tr>
<td>成約手数料</td>
<td><span style="color: #ff0000;">無料</span></td>
<td>6.5%</td>
<td>6%</td>
<td>8%〜15%が多数</td>
</tr>
<tr>
<td>カード決済手数料</td>
<td>3.24%</td>
<td>2.65% or 3.6%</td>
<td>3.57%</td>
<td><span style="color: #ff0000;">無料</span>（成約手数料に含む）</td>
</tr>
<tr>
<td>カードトランザクション</td>
<td><span style="color: #ff0000;">無料</span></td>
<td>15円/件</td>
<td>15円/件</td>
<td><span style="color: #ff0000;">無料</span></td>
</tr>
<tr>
<td>カード月額費用</td>
<td><span style="color: #ff0000;">無料</span></td>
<td>￥3,000</td>
<td>￥2,000</td>
<td><span style="color: #ff0000;">無料</span></td>
</tr>
</tbody>
</table>
<h2>月商100万円の費用シミュレーション</h3>
<h3>条件</h4>
<ul>
<li>月商100万円（単価5,000円×200件）</li>
<li>決済はクレジットカードのみ</li>
<li>商品カテゴリーは家電（Amazonで8%）</li>
<li>対象デバイスはPC（スマートフォン、モバイルで手数料が異なるため）</li>
</ul>
<table border="0">
<tbody>
<tr>
<td></td>
<td>Yahoo!ショッピング</td>
<td>楽天</td>
<td>DeNAショッピング</td>
<td>Amazon</td>
</tr>
<tr>
<td>月額費用</td>
<td>¥0</td>
<td>￥19,500</td>
<td>￥16,500</td>
<td>￥4,666</td>
</tr>
<tr>
<td>成約手数料</td>
<td>¥0</td>
<td>¥65,000</td>
<td>¥60,000</td>
<td>¥80,000</td>
</tr>
<tr>
<td>カード決済手数料</td>
<td>¥32,400</td>
<td>￥26,500</td>
<td>￥35,700</td>
<td>¥0</td>
</tr>
<tr>
<td>カードトランザクション</td>
<td>¥0</td>
<td>￥3,000</td>
<td>￥3,000</td>
<td>¥0</td>
</tr>
<tr>
<td>カード月額費用</td>
<td>¥0</td>
<td>￥3,000</td>
<td>￥2,000</td>
<td>¥0</td>
</tr>
<tr>
<td><strong>小計</strong></td>
<td><strong>¥32,400</strong></td>
<td><strong>¥117,000</strong></td>
<td><strong>¥117,200</strong></td>
<td><strong>¥84,666</strong></td>
</tr>
</tbody>
</table>
<h2>参考資料</h3>
<h3>出店プラン</h4>
<p>Yahoo!ショッピング</p>
<p><a href="http://business.ec.yahoo.co.jp/shopping/archives/plan.html" target="_blank">http://business.ec.yahoo.co.jp/shopping/archives/plan.html</a></p>
<p>楽天</p>
<p><a href="http://www.rakuten.co.jp/ec/plan/" target="_blank">http://www.rakuten.co.jp/ec/plan/</a></p>
<p>DeNAショッピング</p>
<p><a href="http://www.bidders.co.jp/cb/ce/mplan.html" target="_blank">http://www.bidders.co.jp/cb/ce/mplan.html</a></p>
<p>Amazon</p>
<p><a href="http://services.amazon.co.jp/services/sell-on-amazon/fee.html" target="_blank">http://services.amazon.co.jp/services/sell-on-amazon/fee.html</a></p>
<h3>決済プラン</h4>
<p>Yahoo!ショッピング</p>
<p><a href="http://business.ec.yahoo.co.jp/shopping/archives/settlement.html" target="_blank">http://business.ec.yahoo.co.jp/shopping/archives/settlement.html</a></p>
<p>楽天</p>
<p><a href="http://www.rakuten.co.jp/ec/payment/" target="_blank">http://www.rakuten.co.jp/ec/payment/</a></p>
<p>DeNAショッピング</p>
<p>別途paygentとの契約必須</p>
<p>Amazon</p>
<p>成約手数料に含まれる</p>
<h2>まとめ</h3>
<p>比較してみると、Yahoo!ショッピングの安さが際立っていますね。</p>
<p>今回の改定がどのようなインパクトを与えるかを考えると、ガチンコの競合サービス以外は、CtoCへの参入によるCtoCマーケットの認知拡大、手数料が下がることによる利益の再分配が進み、総じてプラス方向に転じるのではないでしょうか？</p>
<p>弊社もいち早い出店を考えながら、先週電話を掛けてきたYahoo!ショッピング出店の代理店営業マンはどうなるんだろうと憂慮しながら、締めくりりたいと思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Yahooショッピング無料の衝撃をまとめてみた

jQueryのプチプラグイン化でjQueryを使った関数を広く使えるようにする

<p>前回までAmazon マーケットプレイスへの出品についてを進めており、ようやく、全部ではないですが、</p>
<p>多くの商品の出品が完了したためとどうやったら、上位表示が出来るか考えてみました。</p>
<p>検索をしても該当するような記事がありませんでした。</p>
<p>「Amazonマーケットプレイス＋SEO」のようなキーワードにおいても、Amazonそのものの検索結果が強すぎるため、</p>
<p>Amazon内で販売されているSEO関連の本ばかりが検索結果に表れてしまいました。</p>
<h2>基本ロジック</h3>
<p>まず基本的な検索ロジックの確認です。</p>
<h3>価格が同じで送料が異なるもの</h4>
<p><a href="/uploads-archive/2013/10/76df0c254e2558b1ba05f38c5c3e79ea.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3229" alt="Amazon.co.jp__こちらもどうぞ__エバーカラーワンデーナチュラルブラウン新発売！ばれずに盛れるナチュラルデカ目カラコン±0.00Ｄ-3" src="/uploads-archive/2013/10/76df0c254e2558b1ba05f38c5c3e79ea-300x208.jpg" width="300" height="208" srcset="/uploads-archive/2013/10/76df0c254e2558b1ba05f38c5c3e79ea-300x208.jpg 300w, /uploads-archive/2013/10/76df0c254e2558b1ba05f38c5c3e79ea-1024x712.jpg 1024w, /uploads-archive/2013/10/76df0c254e2558b1ba05f38c5c3e79ea-228x158.jpg 228w, /uploads-archive/2013/10/76df0c254e2558b1ba05f38c5c3e79ea.jpg 1346w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>現在、とある商品で当店は、27件中25位表示でした。</p>
<p>この検索結果をみて分かるように、同じ価格の商品の場合、何よりも「<strong>送料設定</strong>」が優先されます。</p>
<p>デフォルトの送料設定では、どうあがいても対応が出来ないため、最低限送料を周りに合わせる必要があります。</p>
<h3>価格が異なるもの</h4>
<p><a href="/uploads-archive/2013/10/screenshot.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3230" alt="screenshot" src="/uploads-archive/2013/10/screenshot-300x212.png" width="300" height="212" srcset="/uploads-archive/2013/10/screenshot-300x212.png 300w, /uploads-archive/2013/10/screenshot-1024x724.png 1024w, /uploads-archive/2013/10/screenshot-228x161.png 228w, /uploads-archive/2013/10/screenshot.png 1348w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>商品価格が違うものは、価格が安いほうが上位表示されます。</p>
<h3>価格も送料も異なるもの</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3231" alt="screenshot" src="/uploads-archive/2013/10/screenshot1-300x209.png" width="300" height="209" srcset="/uploads-archive/2013/10/screenshot1-300x209.png 300w, /uploads-archive/2013/10/screenshot1-1024x715.png 1024w, /uploads-archive/2013/10/screenshot1-228x159.png 228w, /uploads-archive/2013/10/screenshot1.png 1350w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>商品価格＋送料が加味されたもので最安のものが表示されます。</p>
<p>ただ、この場合参照している送料が<strong>関東への配送料</strong>であることを注意する必要があります。</p>
<p>逆にAmazonSEOを意識するのであれば、関東のみ送料を下げてといった施策を取ることが出来るのかは検証が必要です。</p>
<h3>価格も送料も同じ場合</h4>
<p><a href="/uploads-archive/2013/10/screenshot2.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3232" alt="screenshot" src="/uploads-archive/2013/10/screenshot2-300x209.png" width="300" height="209" srcset="/uploads-archive/2013/10/screenshot2-300x209.png 300w, /uploads-archive/2013/10/screenshot2-1024x715.png 1024w, /uploads-archive/2013/10/screenshot2-228x159.png 228w, /uploads-archive/2013/10/screenshot2.png 1353w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>これが一番難しいパターンですね。</p>
<p>様々なパラメータが設定されているように思われますが、</p>
<ol>
<li>在庫の有無</li>
<li>高評価</li>
<li>レビューの数</li>
</ol>
<p>といったところが総合的に評価されているようです。</p>
<h2>まとめ</h3>
<p>上位表示結果がAmazonの企業理念（得た利益を還元してコスト戦略を取っていく）そのものなのかもしてません。</p>
<p>トータルでの価格設定が第一優先。その上で、様々な評価を下すという内容です。</p>
<p>あ、この記事を書いているうちに送料無料設定を変更したら、27件中5位に表示されました。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Amazon マーケットプレイスのSEOを考える

<p>Shopifyという無料でECサイトを作成できるサービスが8月に<br />
Shopify Ecommerce Design Awards<br />
と題してECサイトのデザインアワードが開催された。<br />
Shopifyはアメリカのサービスで2004からやっている、Store.jpやBaseの先駆け的な存在だ。<br />
Ruby on railsで開発されており、当時はそっちでのみ話題になっていた。</p>
<p>こちらがデザインアワードの結果ページ。<br />
<a href="http://www.shopify.com/design-awards" target="_blank">http://www.shopify.com/design-awards</a></p>
<p>こちらが受賞サイト</p>
<h2>1位 Whipping + Post</h3>
<p><a href="/uploads-archive/2013/10/1.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3201" alt="1" src="/uploads-archive/2013/10/1.png" width="656" height="340" srcset="/uploads-archive/2013/10/1.png 656w, /uploads-archive/2013/10/1-300x155.png 300w, /uploads-archive/2013/10/1-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://www.whippingpost.com/" target="_blank">http://www.whippingpost.com/</a></p>
<p>&nbsp;</p>
<h2>2位 GREATS</h3>
<p><a href="/uploads-archive/2013/10/2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3202" alt="2" src="/uploads-archive/2013/10/2.png" width="656" height="340" srcset="/uploads-archive/2013/10/2.png 656w, /uploads-archive/2013/10/2-300x155.png 300w, /uploads-archive/2013/10/2-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://greatsbrand.com/" target="_blank">http://greatsbrand.com/</a></p>
<p>&nbsp;</p>
<h2>3位 Goodwin + Goodwin</h3>
<p><a href="/uploads-archive/2013/10/3.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3203" alt="3" src="/uploads-archive/2013/10/3.png" width="656" height="340" srcset="/uploads-archive/2013/10/3.png 656w, /uploads-archive/2013/10/3-300x155.png 300w, /uploads-archive/2013/10/3-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://www.goodwinandgoodwin.com/" target="_blank">http://www.goodwinandgoodwin.com/</a></p>
<p>&nbsp;</p>
<p>以下は佳作。10点あるが、個人的に良かったと思ったものを3点紹介。</p>
<p>&nbsp;</p>
<h2>Pure Fix Cycles</h3>
<p><a href="/uploads-archive/2013/10/4.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3204" alt="4" src="/uploads-archive/2013/10/4.png" width="656" height="340" srcset="/uploads-archive/2013/10/4.png 656w, /uploads-archive/2013/10/4-300x155.png 300w, /uploads-archive/2013/10/4-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://purefixcycles.com/" target="_blank">http://purefixcycles.com/</a></p>
<p>&nbsp;</p>
<h2>Jennifer Torosian</h3>
<p><a href="/uploads-archive/2013/10/5.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3205" alt="5" src="/uploads-archive/2013/10/5.png" width="656" height="340" srcset="/uploads-archive/2013/10/5.png 656w, /uploads-archive/2013/10/5-300x155.png 300w, /uploads-archive/2013/10/5-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://www.jennifertorosian.com/" target="_blank">http://www.jennifertorosian.com/</a></p>
<h2>Society of the Sun</h3>
<p><a href="/uploads-archive/2013/10/6.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3206" alt="6" src="/uploads-archive/2013/10/6.png" width="656" height="340" srcset="/uploads-archive/2013/10/6.png 656w, /uploads-archive/2013/10/6-300x155.png 300w, /uploads-archive/2013/10/6-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://shop.societyclothing.com/" target="_blank">http://shop.societyclothing.com/</a></p>
<p>&nbsp;</p>
<p>全体の印象としては、ほとんどがレスポンシブWebデザインであり完成度が高いということ。</p>
<p>あとはECサイトといえば商品が大量に陳列してあるイメージが強いが、</p>
<p>全てがコンセプトを全面に出しており世界観で勝負しているということ。</p>
<p>大量仕入れ大量販売では勝負できないサイトがコンセプトを追求し</p>
<p>ブランドを売っていくという方法は有効だ。</p>
<p>そこでweb上で一番大事になってくるのはデザインだ。</p>
<p>そういういみではデザインがECで成功するための最も重要なファクターの1つと再認識した。</p>


Shopify Ecommerce Design Awards

Mysqlの初歩の初歩を学んだのでまとめました

MySQL အေျခခံ

<p>前から気になっていたですが、ついてにLaunchCartに実装を実現できました。<br />
<a href="http://mjsarfatti.com/sandbox/nestedSortable/" target="_blank">nestedSortable</a>のjQueryプラグインです。</p>
<h2>レイアウト</h3>
<p></p>

		<div id="crayon-64953fd590d1c266881221" 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;ol class="sortable"&gt;
  &lt;li&gt;
    &lt;div&gt;親カテゴリ&lt;/div&gt;
    &lt;ol&gt;
      &lt;li&gt;
        &lt;div&gt;子カテゴリ&lt;/div&gt;
        &lt;ol&gt;
          &lt;li&gt;
            &lt;div&gt;孫カテゴリ&lt;/div&gt;
          &lt;/li&gt;
        &lt;/ol&gt;
      &lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  ...
&lt;/ol&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-64953fd590d1c266881221-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590d1c266881221-2">2</div><div class="crayon-num" data-line="crayon-64953fd590d1c266881221-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590d1c266881221-4">4</div><div class="crayon-num" data-line="crayon-64953fd590d1c266881221-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590d1c266881221-6">6</div><div class="crayon-num" data-line="crayon-64953fd590d1c266881221-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590d1c266881221-8">8</div><div class="crayon-num" data-line="crayon-64953fd590d1c266881221-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590d1c266881221-10">10</div><div class="crayon-num" data-line="crayon-64953fd590d1c266881221-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590d1c266881221-12">12</div><div class="crayon-num" data-line="crayon-64953fd590d1c266881221-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590d1c266881221-14">14</div><div class="crayon-num" data-line="crayon-64953fd590d1c266881221-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590d1c266881221-16">16</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-64953fd590d1c266881221-1"><span class="crayon-r ">&lt;ol </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"sortable"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590d1c266881221-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span></div><div class="crayon-line" id="crayon-64953fd590d1c266881221-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-i ">親カテゴリ</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590d1c266881221-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;ol&gt;</span></div><div class="crayon-line" id="crayon-64953fd590d1c266881221-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590d1c266881221-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-i ">子カテゴリ</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd590d1c266881221-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;ol&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590d1c266881221-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span></div><div class="crayon-line" id="crayon-64953fd590d1c266881221-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-i ">孫カテゴリ</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590d1c266881221-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd590d1c266881221-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/ol&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590d1c266881221-12"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd590d1c266881221-13"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/ol&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590d1c266881221-14"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd590d1c266881221-15"><span class="crayon-i ">&nbsp;&nbsp;...</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590d1c266881221-16"><span class="crayon-r ">&lt;/ol&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>さすがネストであることで、親カテゴリ＞子カテゴリ＞孫カテゴリのような階層を作るのに、上記なものを作る必要あります。<br />
プログラムを組むのは難しそうなので、辛抱強くtwig関数を作って対応しました。</p>
<h2>serializeなどの関数を使うために</h3>
<p>サンプルでは、</p>
<p></p>

		<div id="crayon-64953fd590d21230149183" 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;">
$('#serialize').click(function(){
  serialized = $('ol.sortable').nestedSortable('serialize');
  $('#serializeOutput').text(serialized+'\n\n');
})</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-64953fd590d21230149183-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590d21230149183-2">2</div><div class="crayon-num" data-line="crayon-64953fd590d21230149183-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590d21230149183-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd590d21230149183-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#serialize'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</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-64953fd590d21230149183-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">serialized</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'ol.sortable'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">nestedSortable</span><span class="crayon-sy">(</span><span class="crayon-s">'serialize'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd590d21230149183-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#serializeOutput'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">text</span><span class="crayon-sy">(</span><span class="crayon-i">serialized</span>+<span class="crayon-s">'\n\n'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590d21230149183-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>で書くと、<br />
id = &#8220;serializeOutput&#8221; のブロックに、</p>
<p></p>

		<div id="crayon-64953fd590d22689542659" 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;">
list[1]=null&amp;list[2]=1&amp;list[3]=2&amp;list[4]=null&amp;list[5]=null&amp;list[6]=5&amp;list[7]=5&amp;list[8]=7&amp;list[9]=null&amp;list[10]=null</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-64953fd590d22689542659-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd590d22689542659-1"><span class="crayon-i">list</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span>=<span class="crayon-t">null</span><span class="crayon-h">&amp;list</span><span class="crayon-sy">[</span><span class="crayon-cn">2</span><span class="crayon-sy">]</span>=<span class="crayon-cn">1</span><span class="crayon-h">&amp;list</span><span class="crayon-sy">[</span><span class="crayon-cn">3</span><span class="crayon-sy">]</span>=<span class="crayon-cn">2</span><span class="crayon-h">&amp;list</span><span class="crayon-sy">[</span><span class="crayon-cn">4</span><span class="crayon-sy">]</span>=<span class="crayon-t">null</span><span class="crayon-h">&amp;list</span><span class="crayon-sy">[</span><span class="crayon-cn">5</span><span class="crayon-sy">]</span>=<span class="crayon-t">null</span><span class="crayon-h">&amp;list</span><span class="crayon-sy">[</span><span class="crayon-cn">6</span><span class="crayon-sy">]</span>=<span class="crayon-cn">5</span><span class="crayon-h">&amp;list</span><span class="crayon-sy">[</span><span class="crayon-cn">7</span><span class="crayon-sy">]</span>=<span class="crayon-cn">5</span><span class="crayon-h">&amp;list</span><span class="crayon-sy">[</span><span class="crayon-cn">8</span><span class="crayon-sy">]</span>=<span class="crayon-cn">7</span><span class="crayon-h">&amp;list</span><span class="crayon-sy">[</span><span class="crayon-cn">9</span><span class="crayon-sy">]</span>=<span class="crayon-t">null</span><span class="crayon-h">&amp;list</span><span class="crayon-sy">[</span><span class="crayon-cn">10</span><span class="crayon-sy">]</span>=<span class="crayon-t">null</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>のようなものが出てくるハズですが。。</p>
<p>実は、裏条件があります。<br />
liタグのidを、&#8221;list_&#8221; + category.id にすることです！<br />
どこにも書いていないから、原因を特定し、探し出すのに時間かかりました。</p>
<h2>Doctrine2 NestedSetと連動するには</h3>
<p>細かく書かないですが、編集した順番と階層をDBに入れる作業がります。</p>
<p><a href="https://github.com/blt04/doctrine2-nestedset" target="_blank">Doctrine2 NestedSet</a>では、順番に対応していない仕様なので、一回Doctrine2 NestedSetを使って階層だけを更新して、あとで手動で順番を更新するようにしました。<br />
仕様を確認しスクリプトを書いてテストするのに、一苦労でしたが、とりあえず実用できるレベルに達したかと思います。</p>

【jQuery】nestedSortable jQuery Plugin

<p>デザインを考えるとき、何を優先してデザインしていくかということで迷うことがあります。</p>
<p>「<a href="http://www.amazon.co.jp/dp/4766120175" target="_blank">レイアウトデザイン レイアウト基本マニュアル（南雲治嘉 著）</a>」で優先順位とその理由について、</p>
<p>詳しく説明されていました。</p>
<p>この本ではその他、レイアウトの方法について、基礎の観点からとてもわかりやすく説明されているのでおすすめです。</p>
<p>今回はこの本から、<strong>デザイン</strong>の<strong>優先順位</strong>の部分について、一部ご紹介いたします。</p>
<p><a href="http://www.amazon.co.jp/dp/4766120175" target="_blank"><img decoding="async" loading="lazy" alt="レイアウトデザイン　レイアウト基本マニュアル　南雲治嘉著" src="/uploads-archive/2013/10/bookimage.jpg" width="250" height="250" /></a></p>
<p>&nbsp;</p>
<h2>1.わかりやすさ</h3>
<p>見た瞬間に、その画面が何を伝えようとしているのかが、わかるようにするということ。</p>
<p>情報を整理し、優先順位をつけ、複雑な分割構成は避ける。</p>
<p>&nbsp;</p>
<h2>2.読みやすさ</h3>
<p>デザインには文字は欠かせないもの。</p>
<p>読めないような小さいサイズ、飾りすぎたり踊るような入れ方は避けるべき。</p>
<p>読みやすいサイズ、字間・行間、配置を心がける。</p>
<p>&nbsp;</p>
<h2>3.美しさ・かっこよさ</h3>
<p>作品は美的でなければならない。人にいい感じを与えることが、レイアウトの使命でもある。</p>
<p>しかし、最初に手をつけるものではない。</p>
<p>わかりやすさ、読みやすさを処理した後の、仕上げである。</p>
<p>&nbsp;</p>
<p>補足として</p>
<h2>4.見る人を眠らせない</h3>
<p>全体のまとまりがよくても、ある条件をクリアしていないと眠くなる。</p>
<p>その条件とは視覚的な対比であり、コントラストのことである。</p>
<p>&nbsp;</p>
<p>デザインをするとき、ついつい美しさやかっこよさを一番最初に考えてしまいがちですが、</p>
<p>それ以前にやるべき大切なことがあることが理解できました。</p>
<p>&nbsp;</p>
<p>４の見る人を眠らせないという部分も、</p>
<p>まとまりばかりを意識していて、眠いデザインになってしまったことが私にもあるので、</p>
<p>納得できました。</p>
<p>&nbsp;</p>
<p>みなさんもデザインに迷ったときや見直す必要があるときは、是非参考にされてみてください。</p>


デザインの優先順位

<p>ナビゲーションにアニメーションを使うことは、今ではごく普通のこととなりましたが、</p>
<p>アニメーションの仕方がちょっと変わっていて面白いサイトを集めてみました。</p>
<p>&nbsp;</p>
<h3><a href="http://jtpj.jp/" target="_blank">「女子旅つくるプロジェクト」</a></h4>
<p><a href="http://jtpj.jp/" target="_blank"><img decoding="async" loading="lazy" alt="女子旅つくるプロジェクト" src="/uploads-archive/2013/09/SS01.jpg" width="656" height="362" /></a></p>
<p>CSS3アニメーションとjQueryを組み合わせたアニメーションが使われています。</p>
<p>数種類のアニメーションが組み合わされていて、</p>
<p>とてもきれいです。</p>
<p>&nbsp;</p>
<h3><a href="http://azitas.co.jp/recruit2014/" target="_blank">「Azitas 新卒採用2014・2015」</a></h4>
<p><a href="http://azitas.co.jp/recruit2014/" target="_blank"><img decoding="async" loading="lazy" alt="Azitas 新卒採用2014・2015" src="/uploads-archive/2013/09/SS02.jpg" width="656" height="362" /></a></p>
<p>ホバーアニメーションは普通ですが、</p>
<p>ナビゲーションにGIFアニメが使われていて、</p>
<p>思わず目が止まります。</p>
<p>&nbsp;</p>
<h3><a href="http://fonta.kayac.com/" target="_blank">「FONTA」</a></h4>
<p><img decoding="async" loading="lazy" alt="FONTA" src="/uploads-archive/2013/09/SS03.jpg" width="656" height="362" /></p>
<p>&nbsp;</p>
<p>CSS3アニメーションとjQueryを組み合わせたアニメーションが使われています。</p>
<p>Webアプリとしてのリッチな印象を、アニメーションが高めています。</p>
<p>&nbsp;</p>
<h3><a href="http://cp.okinawastory.jp/" target="_blank">「しゅんおき！旬香周島おきなわ」</a></h4>
<p><img decoding="async" loading="lazy" alt="しゅんおき！旬香周島おきなわ" src="/uploads-archive/2013/09/SS04.jpg" width="656" height="362" /></p>
<p>&nbsp;</p>
<p>CSS3アニメーションがバナー類に使われています。</p>
<p>ゆったりとしたアニメーションが、控えめながら印象を残します。</p>
<p>&nbsp;</p>
<h3><a title="風景結々" href="http://www.fukei-okinawa.jp/" target="_blank">「風景結々」</a></h4>
<p><a href="http://www.fukei-okinawa.jp/" target="_blank"><img decoding="async" loading="lazy" alt="風景結々" src="/uploads-archive/2013/09/SS05.jpg" width="656" height="362" /></a></p>
<p>&nbsp;</p>
<p>左側のナビゲーションにアニメーションが使われています。</p>
<p>よく見るアニメーションのように思いましたが、</p>
<p>よくみると、色の反転の仕方などが凝っています。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


ナビゲーションに面白いアニメーションが使われたサイト

<p>前回に引き続き、今回は一括登録手順を試して見たいと思います。</p>
<h2>テンプレートのダウンロード</h3>
<p><a href="/uploads-archive/2013/09/3065edfbe13c5c8cb4e08d0241375837.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3171" alt="アップロードによる一括商品登録_-_Amazon_セラーセントラル" src="/uploads-archive/2013/09/3065edfbe13c5c8cb4e08d0241375837-300x211.jpg" width="300" height="211" srcset="/uploads-archive/2013/09/3065edfbe13c5c8cb4e08d0241375837-300x211.jpg 300w, /uploads-archive/2013/09/3065edfbe13c5c8cb4e08d0241375837-1024x721.jpg 1024w, /uploads-archive/2013/09/3065edfbe13c5c8cb4e08d0241375837-228x160.jpg 228w, /uploads-archive/2013/09/3065edfbe13c5c8cb4e08d0241375837.jpg 1354w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>まずは、出品用のファイルをダウンロードします。</p>
<p>&nbsp;</p>
<p>出品カテゴリーや商品が既に登録されているか否かで複数のテンプレートがあるため、詳細は割愛致します。</p>
<p>ここでは、既に出品されている商品の登録で進めます。</p>
<h2>Amazon マーケットプレイスWebサービス(MWS) への登録</h3>
<p>Excelファイルをダウンロードすると、マクロが組まれており、Excel内で商品の検索などが可能になります。</p>
<p>それを実現させるためにAmazon マーケットプレイスWebサービス(MWS) への登録が必要になります。</p>
<p>下のURLで規約への同意等を進めていく形になります。</p>
<p>https://developer.amazonservices.jp/</p>
<p><a href="/uploads-archive/2013/09/Marketplace-Web-Service.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3161" alt="Marketplace Web Service" src="/uploads-archive/2013/09/Marketplace-Web-Service-300x253.png" width="300" height="253" srcset="/uploads-archive/2013/09/Marketplace-Web-Service-300x253.png 300w, /uploads-archive/2013/09/Marketplace-Web-Service-228x192.png 228w, /uploads-archive/2013/09/Marketplace-Web-Service.png 774w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>登録が完了すると4つのID（キー）が発行されるので、保存をしておきます。</p>
<h2>Excelファイルでの編集</h3>
<p><a href="/uploads-archive/2013/09/08b72341d1849e5d2e0121aaae1daf27.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3162" alt="スクリーンショット_092413_044955_PM" src="/uploads-archive/2013/09/08b72341d1849e5d2e0121aaae1daf27-300x233.jpg" width="300" height="233" srcset="/uploads-archive/2013/09/08b72341d1849e5d2e0121aaae1daf27-300x233.jpg 300w, /uploads-archive/2013/09/08b72341d1849e5d2e0121aaae1daf27-1024x798.jpg 1024w, /uploads-archive/2013/09/08b72341d1849e5d2e0121aaae1daf27-228x177.jpg 228w, /uploads-archive/2013/09/08b72341d1849e5d2e0121aaae1daf27.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>以下の必須項目を埋め</p>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="middle"><b>商品管理番号</b></td>
</tr>
<tr>
<td valign="middle"><b>販売価格</b></td>
</tr>
<tr>
<td valign="middle"><b>在庫数</b></td>
</tr>
<tr>
<td valign="middle"><b>商品コード(JANコード等)</b></td>
</tr>
<tr>
<td valign="middle"><b>商品コードのタイプ</b></td>
</tr>
<tr>
<td valign="middle"><b>商品のコンディション</b></td>
</tr>
</tbody>
</table>
<p>左上の一括検索を行います。</p>
<p><a href="/uploads-archive/2013/09/2f8ee34709f251ac1c0c07327c04e582.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3163" alt="スクリーンショット_092413_045029_PM" src="/uploads-archive/2013/09/2f8ee34709f251ac1c0c07327c04e582-300x233.jpg" width="300" height="233" srcset="/uploads-archive/2013/09/2f8ee34709f251ac1c0c07327c04e582-300x233.jpg 300w, /uploads-archive/2013/09/2f8ee34709f251ac1c0c07327c04e582-1024x798.jpg 1024w, /uploads-archive/2013/09/2f8ee34709f251ac1c0c07327c04e582-228x177.jpg 228w, /uploads-archive/2013/09/2f8ee34709f251ac1c0c07327c04e582.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>すると、商品コードをベースに検索をかけているようで、エラーが検出されました。</p>
<p><a href="/uploads-archive/2013/09/fd42d7fe990fe4dbb2bae3207a88d06e.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3164" alt="スクリーンショット_092413_045135_PM" src="/uploads-archive/2013/09/fd42d7fe990fe4dbb2bae3207a88d06e-300x233.jpg" width="300" height="233" srcset="/uploads-archive/2013/09/fd42d7fe990fe4dbb2bae3207a88d06e-300x233.jpg 300w, /uploads-archive/2013/09/fd42d7fe990fe4dbb2bae3207a88d06e-1024x798.jpg 1024w, /uploads-archive/2013/09/fd42d7fe990fe4dbb2bae3207a88d06e-228x177.jpg 228w, /uploads-archive/2013/09/fd42d7fe990fe4dbb2bae3207a88d06e.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>横のシートを見てみると該当の商品が2つ検出されていることがわかったので、上部のものを選択します。</p>
<p><a href="/uploads-archive/2013/09/892da03cf8da08fbea9ac0c9c66b10d4.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3165" alt="スクリーンショット_092413_045221_PM" src="/uploads-archive/2013/09/892da03cf8da08fbea9ac0c9c66b10d4-300x233.jpg" width="300" height="233" srcset="/uploads-archive/2013/09/892da03cf8da08fbea9ac0c9c66b10d4-300x233.jpg 300w, /uploads-archive/2013/09/892da03cf8da08fbea9ac0c9c66b10d4-1024x798.jpg 1024w, /uploads-archive/2013/09/892da03cf8da08fbea9ac0c9c66b10d4-228x177.jpg 228w, /uploads-archive/2013/09/892da03cf8da08fbea9ac0c9c66b10d4.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>情報が補完されますので、アップロードボタンを押します。</p>
<p><a href="/uploads-archive/2013/09/3b1c8442ae646a9714ec6320b2ec5228.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3166" alt="スクリーンショット_092413_045351_PM" src="/uploads-archive/2013/09/3b1c8442ae646a9714ec6320b2ec5228-300x233.jpg" width="300" height="233" srcset="/uploads-archive/2013/09/3b1c8442ae646a9714ec6320b2ec5228-300x233.jpg 300w, /uploads-archive/2013/09/3b1c8442ae646a9714ec6320b2ec5228-1024x798.jpg 1024w, /uploads-archive/2013/09/3b1c8442ae646a9714ec6320b2ec5228-228x177.jpg 228w, /uploads-archive/2013/09/3b1c8442ae646a9714ec6320b2ec5228.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>アップロードが完了しました。</p>
<p><a href="/uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc71.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3184" alt="すべての出品商品" src="/uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc71-300x97.jpg" width="300" height="97" srcset="/uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc71-300x97.jpg 300w, /uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc71-1024x333.jpg 1024w, /uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc71-228x74.jpg 228w, /uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc71.jpg 1362w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>管理画面を確認すると無事アップロード出来ていることが確認出来ました。</p>
<h2>まとめ</h3>
<p>商品の一括登録もどこよりも簡単でした。</p>
<p>JANコードやASINをベースに情報を補完してくれます。</p>
<p>新規出品は補完する情報がないため、全ての情報を入力する必要があります。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Amazonマーケットプレイス出店手順④（商品一括登録）

<p>webアプリケーション、webの管理画面で、</p>
<p>そのままでも、少し加工して、デザインの参考に、</p>
<p>使えそうなデザインテンプレートがありましたので、紹介します。</p>
<p>&nbsp;</p>
<p>いずれもフリーで手に入れられます。<br />
<a href="http://www.egrappler.com/free-premium-html-adminbackend-template-for-web-applications-bluewhale-admin/" target="_blank">BlueWhale Admin</a><br />
<a href="http://www.egrappler.com/free-premium-html-adminbackend-template-for-web-applications-bluewhale-admin/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3173" alt="Dashboard  BlueWhale Admin" src="/uploads-archive/2013/09/Dashboard-BlueWhale-Admin-1011x1024.jpg" width="615" height="622" srcset="/uploads-archive/2013/09/Dashboard-BlueWhale-Admin-1011x1024.jpg 1011w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-296x300.jpg 296w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-228x230.jpg 228w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-120x120.jpg 120w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin.jpg 1333w" sizes="(max-width: 615px) 100vw, 615px" /></a><br />
960 Grid CSSをベースに作っているようです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://www.egrappler.com/templatevamp-free-twitter-bootstrap-admin-template/" target="_blank">Twitter Bootstrap Admin Template</a><br />
<a href="http://www.egrappler.com/templatevamp-free-twitter-bootstrap-admin-template/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3174" alt="Dashboard - Bootstrap Admin Template" src="/uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-699x1024.jpg" width="615" height="900" srcset="/uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-699x1024.jpg 699w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-205x300.jpg 205w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-228x333.jpg 228w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template.jpg 1333w" sizes="(max-width: 615px) 100vw, 615px" /></a><br />
こちらはTwitter Bootstrapをベースに作っているようです。こちらはシンプルでいいデザインですね！</p>
<p>&nbsp;<br />
<a href="http://www.egrappler.com/free-web-backend-admin-template-psd-app-admin/" target="_blank">Free Web Backend Admin Template PSD: App Admin</a><br />
<a href="http://www.egrappler.com/free-web-backend-admin-template-psd-app-admin/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3175" alt="Dashboard" src="/uploads-archive/2013/09/Dashboard-1024x743.jpg" width="615" height="446" srcset="/uploads-archive/2013/09/Dashboard-1024x743.jpg 1024w, /uploads-archive/2013/09/Dashboard-300x217.jpg 300w, /uploads-archive/2013/09/Dashboard-228x165.jpg 228w, /uploads-archive/2013/09/Dashboard.jpg 1100w" sizes="(max-width: 615px) 100vw, 615px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>おまけ</h3>
<p><a href="https://www.clipular.com/welcome" target="_blank">clipular</a>というchromeの拡張機能が良いらしいと聞きました。<br />
webサイトのキャプチャを撮れるものなんですが、それだけで終わらず、クラウドに自分で撮ったキャプチャのギャラリーを作れるというなんとも素晴らしい内容。（作れるというか自動的に一覧に表示できるようになってるという感じです。）</p>
<p>キャプチャして、ローカルに保存してる人なんかにはとてもいい拡張機能だと思います！！</p>


管理画面のデザインテンプレートをフリーでダウンロード!

<p>「Lightbox 2」を使って、ポップアップのスライドショーを簡単に作る事が出来ます。</p>
<p>まず、</p>
<p></p>

		<div id="crayon-64953fd590b18506145813" 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">js</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;link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /&gt;
　&lt;script src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
　&lt;script src="js/jquery-ui-1.8.18.custom.min.js"&gt;&lt;/script&gt;
　&lt;script src="js/jquery.smooth-scroll.min.js"&gt;&lt;/script&gt;
　&lt;script src="js/lightbox.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-64953fd590b18506145813-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590b18506145813-2">2</div><div class="crayon-num" data-line="crayon-64953fd590b18506145813-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590b18506145813-4">4</div><div class="crayon-num" data-line="crayon-64953fd590b18506145813-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd590b18506145813-1"><span class="crayon-h">&lt;</span><span class="crayon-e">link </span><span class="crayon-i">rel</span>=<span class="crayon-s">"stylesheet"</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-s">"css/lightbox.css"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"text/css"</span><span class="crayon-h"> </span><span class="crayon-i">media</span>=<span class="crayon-s">"screen"</span><span class="crayon-h"> </span>/<span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590b18506145813-2">　<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-1.7.2.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-64953fd590b18506145813-3">　<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-ui-1.8.18.custom.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-64953fd590b18506145813-4">　<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.smooth-scroll.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-64953fd590b18506145813-5">　<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/lightbox.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>cssとjsをheaderの部分に書いて、ソースを読み込みます。</p>
<p>次は<br />
jQueryで画像の動きを書きます。</p>
<p></p>

		<div id="crayon-64953fd590b1d107485684" 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">js</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&gt;
jQuery(document).ready(function($) {
$('a').smoothScroll({
speed: 1000,
easing: 'easeInOutCubic'
});
$('.showOlderChanges').on('click', function(e){
$('.changelog .old').slideDown('slow');
$(this).fadeOut();
e.preventDefault();
})
});
&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-64953fd590b1d107485684-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590b1d107485684-2">2</div><div class="crayon-num" data-line="crayon-64953fd590b1d107485684-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590b1d107485684-4">4</div><div class="crayon-num" data-line="crayon-64953fd590b1d107485684-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590b1d107485684-6">6</div><div class="crayon-num" data-line="crayon-64953fd590b1d107485684-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590b1d107485684-8">8</div><div class="crayon-num" data-line="crayon-64953fd590b1d107485684-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590b1d107485684-10">10</div><div class="crayon-num" data-line="crayon-64953fd590b1d107485684-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590b1d107485684-12">12</div><div class="crayon-num" data-line="crayon-64953fd590b1d107485684-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd590b1d107485684-1"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590b1d107485684-2"><span class="crayon-e">jQuery</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-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd590b1d107485684-3"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'a'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">smoothScroll</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590b1d107485684-4"><span class="crayon-i">speed</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">1000</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd590b1d107485684-5"><span class="crayon-i">easing</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'easeInOutCubic'</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590b1d107485684-6"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd590b1d107485684-7"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.showOlderChanges'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">on</span><span class="crayon-sy">(</span><span class="crayon-s">'click'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-i">e</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590b1d107485684-8"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.changelog .old'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">slideDown</span><span class="crayon-sy">(</span><span class="crayon-s">'slow'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd590b1d107485684-9"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">fadeOut</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-64953fd590b1d107485684-10"><span class="crayon-i">e</span><span class="crayon-sy">.</span><span class="crayon-e">preventDefault</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd590b1d107485684-11"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590b1d107485684-12"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd590b1d107485684-13"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>表示させたいHTML内容</p>
<p></p>

		<div id="crayon-64953fd590b1f904867141" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">html</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
//ポップアップに表示される画像とテキスト
&lt;a href="./images/img_01.jpeg" rel="lightbox[plants]" title="ミャンマー、初めての首都、バガン"&gt;

&lt;img src="./images/img_01.jpeg" alt="バガン"&gt;&lt;/a&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-64953fd590b1f904867141-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590b1f904867141-2">2</div><div class="crayon-num" data-line="crayon-64953fd590b1f904867141-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd590b1f904867141-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd590b1f904867141-1"><span class="crayon-c">//ポップアップに表示される画像とテキスト</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590b1f904867141-2"><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">"./images/img_01.jpeg"</span><span class="crayon-h"> </span><span class="crayon-i">rel</span>=<span class="crayon-s">"lightbox[plants]"</span><span class="crayon-h"> </span><span class="crayon-i">title</span>=<span class="crayon-s">"ミャンマー、初めての首都、バガン"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd590b1f904867141-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd590b1f904867141-4"><span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"./images/img_01.jpeg"</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-i">a</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p><a href="/demo/poe/20130924/" class="demo" target="_blank">デモ</a></p>
<p>ポップアップのデザインをちょっと調整したい時は、「css/lightbox.css」を使って調整できます。</p>

ポップアップスライドショー

【symfony2.3】仕様変更のまとめその2

<p>Androidブラウザでアンカーリンクがうまく動作しないので調べてみたところ</p>
<p>同じURLには1度しか飛ばないという仕様があることが判明。</p>
<p>要は#link1に1度リンクしたら2度目以降はリンクしないそうだ。</p>
<p><a href="http://d.hatena.ne.jp/koba04/20120803/1343919758" target="_blank">http://d.hatena.ne.jp/koba04/20120803/1343919758</a></p>
<p>&nbsp;</p>
<p>それを解決するための簡単なスクリプトを作成した。</p>
<p><a class="demo" href="/demo/hoshino/45/1.html">デモ</a></p>
<p>&nbsp;</p>
<p>要は指定したリンク元が指している飛び先のx座標を調べて強制的にスクロールさせるというもの。</p>

		<div id="crayon-64953fd5905e6789367175" 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;">
android_ss( $( 'a' ) );
android_ss( $( '.smooth' ) );
android_ss( $( 'a.scroll' ) );</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-64953fd5905e6789367175-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905e6789367175-2">2</div><div class="crayon-num" data-line="crayon-64953fd5905e6789367175-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-64953fd5905e6789367175-1"><span class="crayon-e">android_ss</span><span class="crayon-sy">(</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">'a'</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-64953fd5905e6789367175-2"><span class="crayon-e">android_ss</span><span class="crayon-sy">(</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">'.smooth'</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" id="crayon-64953fd5905e6789367175-3"><span class="crayon-e">android_ss</span><span class="crayon-sy">(</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">'a.scroll'</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></td>
					</tr>
				</table>
			</div>
		</div>

<p>例えばこのような形でスクロールさせるターゲットを引数として渡してもらえればOK。</p>
<p>プラグイン化するまでもないので、以下をコピペで貼り付けてもらえれば動作します。</p>

		<div id="crayon-64953fd5905eb957430662" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
function android_ss( a )
{
	for ( var i = 0; i &lt; a.size(); i++ )
	{	
		a.eq( i ).click(function()
		{
			var h = $( this ).attr( 'href' );
			var p = $( h ).offset().top;
			$( 'html, body' ).animate( {scrollTop: p}, 500, 'swing' );
			return false;
		});

		var h = $( this ).removeAttr( 'href' );
	}
}</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-64953fd5905eb957430662-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-2">2</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-4">4</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-6">6</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-8">8</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-10">10</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-12">12</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5905eb957430662-14">14</div><div class="crayon-num" data-line="crayon-64953fd5905eb957430662-15">15</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-64953fd5905eb957430662-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">android_ss</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5905eb957430662-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-3"><span class="crayon-h">	</span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-i">a</span><span class="crayon-sy">.</span><span class="crayon-e">size</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">i</span>++<span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5905eb957430662-4"><span class="crayon-h">	</span><span class="crayon-sy">{</span><span class="crayon-h">	</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-5"><span class="crayon-h">		</span><span class="crayon-i">a</span><span class="crayon-sy">.</span><span class="crayon-e">eq</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5905eb957430662-6"><span class="crayon-h">		</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-7"><span class="crayon-h">			</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">h</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-r">this</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">attr</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'href'</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-64953fd5905eb957430662-8"><span class="crayon-h">			</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">p</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-i">h</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">offset</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">top</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-9"><span class="crayon-h">			</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'html, body'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-i">scrollTop</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">p</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">500</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'swing'</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-64953fd5905eb957430662-10"><span class="crayon-h">			</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-11"><span class="crayon-h">		</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-64953fd5905eb957430662-12">&nbsp;</div><div class="crayon-line" id="crayon-64953fd5905eb957430662-13"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">h</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-r">this</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">removeAttr</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'href'</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-64953fd5905eb957430662-14"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd5905eb957430662-15"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>

Android標準ブラウザでアンカーリンクが効かない場合の解決策

<p>前回は、審査基準ありの商品カテゴリーだったために、出品審査を提出したところまでご紹介致しました。</p>
<p>出品審査が降りてからは24時間以内に該当カテゴリーの出品が可能になるということで、</p>
<p>翌日、実際に商品を一つ登録してみました。</p>
<h2>アマゾン管理画面</h3>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3122" alt="Amazon_セラーセントラル" src="/uploads-archive/2013/09/e93c516548a6e0735706633c64162ab21-300x195.jpg" width="300" height="195" srcset="/uploads-archive/2013/09/e93c516548a6e0735706633c64162ab21-300x195.jpg 300w, /uploads-archive/2013/09/e93c516548a6e0735706633c64162ab21-1024x666.jpg 1024w, /uploads-archive/2013/09/e93c516548a6e0735706633c64162ab21-228x148.jpg 228w, /uploads-archive/2013/09/e93c516548a6e0735706633c64162ab21.jpg 1321w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>左カラム下の商品登録を選択します。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3121" alt="Seller_Central_-_商品登録_-_Amazon_セラーセントラル" src="/uploads-archive/2013/09/cfd0af39582c54f350a427690633611d-300x71.jpg" width="300" height="71" srcset="/uploads-archive/2013/09/cfd0af39582c54f350a427690633611d-300x71.jpg 300w, /uploads-archive/2013/09/cfd0af39582c54f350a427690633611d-1024x242.jpg 1024w, /uploads-archive/2013/09/cfd0af39582c54f350a427690633611d-228x54.jpg 228w, /uploads-archive/2013/09/cfd0af39582c54f350a427690633611d.jpg 1312w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>検索ボックスがあるので、商品名やJANコードなどを入力します。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3120" alt="Seller_Central_-_商品登録_-_Amazon_セラーセントラル 2" src="/uploads-archive/2013/09/dd2343027153d466d877b777d3e4f652-300x207.jpg" width="300" height="207" srcset="/uploads-archive/2013/09/dd2343027153d466d877b777d3e4f652-300x207.jpg 300w, /uploads-archive/2013/09/dd2343027153d466d877b777d3e4f652-1024x708.jpg 1024w, /uploads-archive/2013/09/dd2343027153d466d877b777d3e4f652-228x157.jpg 228w, /uploads-archive/2013/09/dd2343027153d466d877b777d3e4f652.jpg 1323w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>商品名で入力をすると複数の候補が検出されました。</p>
<p>ここでは、一番上の商品を選択をしました。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3119" alt="商品提供の情報を登録" src="/uploads-archive/2013/09/97d28c6f34b2dd433b0ce486677cf43f-300x216.jpg" width="300" height="216" srcset="/uploads-archive/2013/09/97d28c6f34b2dd433b0ce486677cf43f-300x216.jpg 300w, /uploads-archive/2013/09/97d28c6f34b2dd433b0ce486677cf43f-1024x739.jpg 1024w, /uploads-archive/2013/09/97d28c6f34b2dd433b0ce486677cf43f-228x164.jpg 228w, /uploads-archive/2013/09/97d28c6f34b2dd433b0ce486677cf43f.jpg 1304w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>商品価格等、必須項目を埋めます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3118" alt="商品提供の情報を登録 2" src="/uploads-archive/2013/09/a9c170c5afe5c10f29dc0e7d3c9e6311-300x208.jpg" width="300" height="208" srcset="/uploads-archive/2013/09/a9c170c5afe5c10f29dc0e7d3c9e6311-300x208.jpg 300w, /uploads-archive/2013/09/a9c170c5afe5c10f29dc0e7d3c9e6311-1024x710.jpg 1024w, /uploads-archive/2013/09/a9c170c5afe5c10f29dc0e7d3c9e6311-228x158.jpg 228w, /uploads-archive/2013/09/a9c170c5afe5c10f29dc0e7d3c9e6311.jpg 1303w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>次へを押しても、新規出品ではないため一切編集することは出来ません。</p>
<p>ここで保存して終了を選択します。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc7.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3117" alt="すべての出品商品" src="/uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc7-300x125.jpg" width="300" height="125" srcset="/uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc7-300x125.jpg 300w, /uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc7-1024x428.jpg 1024w, /uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc7-228x95.jpg 228w, /uploads-archive/2013/09/c043c55b422f4b75c5ff2e0531241fc7.jpg 1360w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>登録完了。ここでもあっけなくすんなりと終了しました。</p>
<p>次回は、一括登録に挑戦してみたいと思います。</p>
<h2>まとめ</h3>
<p>いままで複数のモールを出店してまいりましたが、ダントツでアマゾンが出品に関しては、簡単です。</p>
<p>既存の商品を選んで価格等最低限を調整するだけ。</p>
<p>但し、これでは、商品が横並びになってしまうので、価格以外で差別化出来る要因がないか探ってみたいと思います。</p>
<p>また、複数の商品が一覧で表示された場合の検索順位結果など、管理画面と実際のユーザ画面とを比較して最適な商品登録方法を模索したいと思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2013/10/09

2013/10/08

2013/10/08

2013/10/08

2013/10/08

2013/10/02

2013/10/02

2013/10/02

2013/10/02

2013/10/01

2013/10/01

2013/09/25

2013/09/25

2013/09/25

2013/09/25

2013/09/25

2013/09/24

2013/09/18