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

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

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

small_title3.jpg

thumbnail_title3.jpg

title3.jpg

webサイトのフォントサイズをjQueryを使って変更する

【Symfony2.3】Form関連の仕様変更

【jquery】ページを丸ごと切り替えるプラグイン

高さを揃えるjQueryプラグイン「jQuery-fixHeightSimple」つくりました

phpとinfinitescrollのもっと見る機能

css3を使って要素を上下左右中央に配置する方法

jQueryとCSS3で円の型抜きのホバー効果

googlemapをブラウザの横幅一杯に表示するとカッコイイかも

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2013/10/08

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

2013/09/18

2013/09/17

2013/09/11

2013/09/11

2013/09/11

2013/09/11

2013/09/05

2013/09/05