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>


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

オブジェクトをきれいに整列させてくれるjQueryプラグイン

<p>前回の続きで、vimのコマンドを紹介したいと思います。</p>
<table>
<tbody>
<h2>vimのコマンド</h3>
<tr>
<td>u</td>
<td>undo の場合</td>
</tr>
<tr>
<td>ctrl+r</td>
<td>redo の場合</td>
</tr>
<tr>
<td>.</td>
<td> 直前の動作を繰り返す</td>
</tr>
<tr>
<td>2.</td>
<td>直前の動作を2回繰り返す</td>
</tr>
<tr>
<td>j</td>
<td>一行下に移動</td>
</tr>
<tr>
<td>k</td>
<td>一行上に移動</td>
</tr>
<tr>
<td>l</td>
<td>右に移動</td>
</tr>
<tr>
<td>h</td>
<td>左に移動</td>
</tr>
<tr>
<td>yy</td>
<td>行をコピー</td>
</tr>
<tr>
<td>y0</td>
<td>カーソルのある位置から行の先頭までをコピー</td>
</tr>
<tr>
<td>y$</td>
<td>カーソルのある位置から行の終わりまでをコピー</td>
</tr>
<tr>
<td>yw</td>
<td>カーソル位置の単語をコピー</td>
</tr>
<tr>
<td>yW</td>
<td>カーソル位置の単語をコピー(:や%などを含む)</td>
</tr>
</tbody>
</table>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

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

2013/09/18

2013/09/18

2013/09/18

2013/09/17

2013/09/11

2013/09/11

2013/09/11

2013/09/11