<p>今回紹介したいのは、【Photoset Grid】というjQueryプラグインです。</p>
<p><a href="/demo/jeff/photosetgrid_sample.html" class="demo" target="_blank">デモ</a></p>
<h2>ソースコード</h3>
<p></p>

		<div id="crayon-64953fd58794b809812378" 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;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;photoset-gridサンプル&lt;/title&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://stylehatch.github.com/photoset-grid/jquery.photoset-grid.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://stylehatch.github.com/photoset-grid/js/jquery.colorbox.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Photoset Grid Sample&lt;/h1&gt;
&lt;div id="photoset-grid-basic" data-layout="3223" style="visibility: hidden;"&gt;
	&lt;img src="IMG_0368.jpg" /&gt;
	&lt;img src="IMG_0516.jpg" /&gt;
	&lt;img src="IMG_0922.JPG" /&gt;
	&lt;img src="IMG_0988.JPG" /&gt;
	&lt;img src="IMG_1017.JPG" /&gt;
	&lt;img src="IMG_1018.JPG" /&gt;
	&lt;img src="IMG_1019.JPG" /&gt;
	&lt;img src="IMG_1020.JPG" /&gt;
	&lt;img src="IMG_1021.JPG" /&gt;
	&lt;img src="IMG_1075.JPG" /&gt;
&lt;/div&gt;
&lt;script&gt;
	$('#photoset-grid-basic').photosetGrid({
		onComplete: function(){
			$('#photoset-grid-basic').attr('style', '');
		}
	});
&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58794b809812378-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-2">2</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-4">4</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-6">6</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-8">8</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-10">10</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-12">12</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-14">14</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-16">16</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-18">18</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-20">20</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-22">22</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-24">24</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-26">26</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-28">28</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58794b809812378-30">30</div><div class="crayon-num" data-line="crayon-64953fd58794b809812378-31">31</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-64953fd58794b809812378-1"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span>=<span class="crayon-s ">"utf-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">photoset-gridサンプル</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-5"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-6"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://stylehatch.github.com/photoset-grid/jquery.photoset-grid.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-7"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://stylehatch.github.com/photoset-grid/js/jquery.colorbox.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-8"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-9"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-10"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h1&gt;</span><span class="crayon-i ">Photoset Grid Sample</span><span class="crayon-r ">&lt;/h1&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-11"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"photoset-grid-basic"</span><span class="crayon-h"> </span><span class="crayon-e ">data-layout</span>=<span class="crayon-s ">"3223"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"visibility: hidden;"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-12"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_0368.jpg"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-13"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_0516.jpg"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-14"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_0922.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-15"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_0988.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-16"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1017.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-17"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1018.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-18"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1019.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-19"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1020.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-20"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1021.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-21"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"IMG_1075.JPG"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-22"><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-23"><span class="crayon-i "><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-24"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#photoset-grid-basic'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">photosetGrid</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-25"><span class="crayon-h">		</span><span class="crayon-i">onComplete</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-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-26"><span class="crayon-h">			</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#photoset-grid-basic'</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-s">'style'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">''</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-27"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-28"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-29"><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58794b809812378-30"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-64953fd58794b809812378-31"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>説明</h3>
<p>シンプルにdata-layoutという属性で毎行何枚の画像を表示したいのを指定すれば、自動に調整してくれるということです。</p>
<p>lightboxとの連動も可能です。</p>
<p>本家のサイトは<a href="http://stylehatch.github.com/photoset-grid/" target="_blank">こちら</a>になります。</p>

【jQuery】画像のレイアウト調整に便利なプラグイン

Gmailみたいなオートコンプリートを実装する jQueryプラグイン

IE6もOK！画像を白黒にするjQueryプラグイン 「jQuery.BlackAndWhite」

PC、スマホでスワイプで画像、コンテンツを送れるスライドショー

<p>&nbsp;</p>
<p>前回ブログ<br />
<a href="/officer/%E3%82%BB%E3%82%AD%E3%83%A5%E3%82%A2%E3%81%AA%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89%E3%82%92%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B%E4%BE%BF%E5%88%A9%E3%83%84%E3%83%BC%E3%83%AB.html">セキュアなパスワードを自動生成する便利ツール</a><br />
でパスワード自動生成ツールを作成したが、<br />
それをプログラムから呼び出せるAPI的なものを作成した。</p>
<p><a class="demo" href="/demo/hoshino/32/js/get_password.js" target="_blank">download</a></p>
<p>&nbsp;</p>
<h2>使い方</h2>
<p></p>

		<div id="crayon-64953fd5869bd982059526" 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;script type="text/javascript" src="js/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/get_password.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-64953fd5869bd982059526-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869bd982059526-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5869bd982059526-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-1.8.2.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-64953fd5869bd982059526-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/get_password.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>HTMLでjQueryと本jsをインポート。</p>
<p>あとは</p>

		<div id="crayon-64953fd5869c2357177791" 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;">
get_password();</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-64953fd5869c2357177791-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-64953fd5869c2357177791-1"><span class="crayon-e">get_password</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のように呼び出すだけ。</p>
<p>&nbsp;</p>
<h2>パラメータ</h2>
<h2>無し</h3>
<p>例</p>

		<div id="crayon-64953fd5869c3207869581" 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;">
get_password();</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-64953fd5869c3207869581-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-64953fd5869c3207869581-1"><span class="crayon-e">get_password</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>英字、数値、記号それぞれ混合の8桁の値が返る。</p>
<p>&nbsp;</p>
<h2>数値</h3>
<p>例</p>

		<div id="crayon-64953fd5869c4871513410" 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;">
get_password( 8 );</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-64953fd5869c4871513410-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-64953fd5869c4871513410-1"><span class="crayon-e">get_password</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-cn">8</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>英字、数値、記号それぞれ混合の指定した桁数の値が返る。</p>
<p>例だと8桁の文字列が返る。</p>
<p>&nbsp;</p>
<h2>配列</h3>
<p>例</p>

		<div id="crayon-64953fd5869c6764298541" 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;">
get_password( {
	alphabet: false,
	symbol: false,
	number: false,
	len: 2
} );</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-64953fd5869c6764298541-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869c6764298541-2">2</div><div class="crayon-num" data-line="crayon-64953fd5869c6764298541-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869c6764298541-4">4</div><div class="crayon-num" data-line="crayon-64953fd5869c6764298541-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5869c6764298541-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5869c6764298541-1"><span class="crayon-e">get_password</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5869c6764298541-2"><span class="crayon-h">	</span><span class="crayon-i">alphabet</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd5869c6764298541-3"><span class="crayon-h">	</span><span class="crayon-i">symbol</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5869c6764298541-4"><span class="crayon-h">	</span><span class="crayon-i">number</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd5869c6764298541-5"><span class="crayon-h">	</span><span class="crayon-i">len</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5869c6764298541-6"><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>&nbsp;</p>
<table>
<tbody>
<tr>
<th>キー</th>
<th>値の型</th>
<th>デフォルト</th>
<th>必須</th>
<th>説明</th>
</tr>
<tr>
<td>alphabet</td>
<td>boolean</td>
<td>true</td>
<td>☓</td>
<td>戻り値にアルファベットをtrueの時は含め、falseのときは含めない</td>
</tr>
<tr>
<td>number</td>
<td>boolean</td>
<td>true</td>
<td>☓</td>
<td>戻り値に数値をtrueの時は含め、falseのときは含めない</td>
</tr>
<tr>
<td>symbol</td>
<td>boolean</td>
<td>true</td>
<td>☓</td>
<td>戻り値に記号をtrueの時は含め、falseのときは含めない</td>
</tr>
<tr>
<td>len</td>
<td>int</td>
<td>8</td>
<td>☓</td>
<td>戻り値の桁数を指定</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>

パスワードを自動生成する jQueryプラグイン

small_title.jpg

thumbnail_title.jpg

title.jpg

jQueryプラグイン「bxSlider」がレスポンシブ対応になってた

今までで一番高機能かもしれないjQueryプラグインのスライドショー「camera」

<p>最近のプロジェクトでは、スペースがあまりないですが、格好いいかつ分かりやすいツールバーみたいのものを導入したいと思います。<br />
そのとき、この<a href="http://paulkinzett.github.com/toolbar/" target="_blank">toolbar.js</a>というjQueryプラグインを思い出しました。</p>
<p>公式サイト（一応）の格好良さに釣られて、結構簡単に実装できるかなと思いましたが、そうではありません。。<br />
<a href="/uploads-archive/2013/02/toolbar-js-screenshot.png"><img decoding="async" loading="lazy" src="/uploads-archive/2013/02/toolbar-js-screenshot.png" alt="toolbar-js-screenshot" width="110" height="159" class="aligncenter size-full wp-image-1593" /></a></p>
<h2>ソースの書き方が明言されていない</h3>
<p>ます、公式サイトで載せてる書き方（下記）を見て、</p>
<p></p>

		<div id="crayon-64953fd585537970903681" 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;">
$('#format-toolbar').toolbar({
	content: '#format-toolbar-options', 
	position: 'top',
	hideOnClick: true
});</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-64953fd585537970903681-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd585537970903681-2">2</div><div class="crayon-num" data-line="crayon-64953fd585537970903681-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd585537970903681-4">4</div><div class="crayon-num" data-line="crayon-64953fd585537970903681-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-64953fd585537970903681-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#format-toolbar'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">toolbar</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd585537970903681-2"><span class="crayon-h">	</span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'#format-toolbar-options'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-64953fd585537970903681-3"><span class="crayon-h">	</span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'top'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd585537970903681-4"><span class="crayon-h">	</span><span class="crayon-i">hideOnClick</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line" id="crayon-64953fd585537970903681-5"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p></p>

		<div id="crayon-64953fd58553b137802333" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div id="format-toolbar-options"&gt;
	&lt;a href="#"&gt;&lt;i class="icon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;	</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58553b137802333-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553b137802333-2">2</div><div class="crayon-num" data-line="crayon-64953fd58553b137802333-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553b137802333-4">4</div><div class="crayon-num" data-line="crayon-64953fd58553b137802333-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-64953fd58553b137802333-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"format-toolbar-options"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553b137802333-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-align-left"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553b137802333-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-align-center"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553b137802333-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-align-right"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553b137802333-5"><span class="crayon-r ">&lt;/div&gt;</span><span class="crayon-h">	</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>id=format-toolbar-optionsのdivは書いてありますが、id=format-toolbarのは書いてありません。<br />
公式サイトのhtmlソースを見て拾いましたが、実装してみて下記の書き方しかうまくいきませんでした。</p>

		<div id="crayon-64953fd58553c627864996" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div style="width:5px;float:left;"&gt;
  &lt;div id="format-toolbar" class="settings-button"&gt;&lt;i class="icon-wrench"&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;div id="format-toolbar-options"&gt;
	&lt;a href="#"&gt;&lt;i class="icon-arrow-up"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-arrow-down"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;	
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58553c627864996-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-2">2</div><div class="crayon-num" data-line="crayon-64953fd58553c627864996-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-4">4</div><div class="crayon-num" data-line="crayon-64953fd58553c627864996-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-6">6</div><div class="crayon-num" data-line="crayon-64953fd58553c627864996-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58553c627864996-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"width:5px;float:left;"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"format-toolbar"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"settings-button"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-wrench"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553c627864996-3"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"format-toolbar-options"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-arrow-up"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553c627864996-5"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-arrow-down"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-6"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-trash"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553c627864996-7"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span><span class="crayon-i ">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-8"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>id=format-toolbar-optionsのとid=format-toolbarのを同じdivに入れなければうまく表示出来できませんでしたが、<br />
公式サイトのhtmlソースにはid=format-toolbar-optionsのとid=format-toolbarをばらばら書いてでも表示出来ています。。<br />
何かが条件になっているのかよくわかりません。。</p>
<h2>jQueryのバージョンに注意を</h3>
<p>ソースをダウンロードしてから分かるですが、このプラグインはjquery1.7以上でしか動きません。<br />
公式サイトにはjqueryのバージョンや、対応ブラウザなど一切書いてませんから、ちょっと不安です。<br />
IE8は対応していることを確認できましたが。</p>
<h2>結論</h3>
<p>jQueryのプラグインの選び方をもっと慎重にしたいと思います。</p>

【jQuery】スペースが足りない時に使えるtoolbarjs

<p>こういう<a href="http://techwave.jp/archives/51779365.html" target="_blank">記事</a>に釣られて、「なに？javascriptだけで決済を完了できるのか」と驚いて、「jquery-payment」というプラグインを少し見てみました。</p>
<p><a class="demo" href="/demo/jeff/jquery_payment/example/" target="_blank">デモ</a></p>
<p>デモのソースを見てわかると思いますが、このプラグインがカード番号と有効期間をチェックするバリデーションです。。。</p>
<p>騙させたかと思って、上の記事も載せてた<a href="https://kairosfundraiser.com/" target="_blank">URL</a>に検証しに行きました。</p>
<p>驚くことに、このプラグインを使って、決済をjavascriptで完結できているみたいです！<br />
その証拠は二つ。<br />
 １、</p>

		<div id="crayon-64953fd585137186942531" 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;script type="text/javascript" src="https://js.stripe.com/v1/"&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-64953fd585137186942531-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-64953fd585137186942531-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"https://js.stripe.com/v1/"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>stripeのjavascriptをincludeしている！<br />
２、</p>
<p></p>

		<div id="crayon-64953fd58513b610010630" 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;script type="text/javascript"&gt;
	Stripe.setPublishableKey('pk_live_C2Ckr9nZbkcBra5ZWlV8wQLs');
&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-64953fd58513b610010630-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58513b610010630-2">2</div><div class="crayon-num" data-line="crayon-64953fd58513b610010630-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-64953fd58513b610010630-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58513b610010630-2"><span class="crayon-h">	</span><span class="crayon-i">Stripe</span><span class="crayon-sy">.</span><span class="crayon-e">setPublishableKey</span><span class="crayon-sy">(</span><span class="crayon-s">'pk_live_C2Ckr9nZbkcBra5ZWlV8wQLs'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58513b610010630-3"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>stripeのキーを設定している！</p>
<p>具体的にはもっと仕様を詳しく見ないとわからないですが、<br />
javasciprtだけで決済ができるのは、なかなか興味深いですね。</p>
<p>さくらの共有サーバでcgiのpermissionが755でなくては動かないことを知らなくてイライラしてたjeffより。</p>

javascriptだけで決済完了できそうなプラグイン

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

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

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

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

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

<p>今回紹介したいのは、データ表示にめちゃ便利なプラグイン<strong>jQuery Grid Plugin</strong>です。</p>
<p>まず<a href="/demo/jeff/grid/index.htm" target="_blank">デモ</a>を見てください。</p>
<p>ドキュメントが少々複雑で、また見終わっていないですが、これがなかなか使えるに気がします。<br />
大きな特徴として、下記があります。</p>
<h2>特徴</h3>
<p>・ソート対応<br />
・ページングも対応<br />
・各種データ（HTML、配列、JSONなど）を使って表示することができる<br />
・列の表示・非表示の制御ができる<br />
・少々複雑になるが、値の編集もできる（tabキーもしくはshiftキーで編集結果を保存）<br />
・テーマ(css)を作るなら、見た目も変わる</p>
<p>今回のデモはページング機能を実装してみましたが、<br />
他いろいろな機能があるみたいで、詳しくは<a href="http://paramquery.com/" target="_blank">公式サイト</a>まで。</p>


【jQuery】データ表示にめちゃ便利なプラグイン

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

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

サンプルECサイトを作ってみました。~heightLineプラグインの使用~

<p>サイト構築に使えそうなjQueryプラグインを見つかりましたので、紹介いたします。</p>
<p>動画を背景にして、サイトの見栄えをよくするものです。</p>
<p><a href="/demo/jeff/videoBG.html" target="_blank">デモ</a>を見てください。</p>
<p>プラグインは<a href="https://github.com/sydlawrence/jquery.videoBG" target="_blank">ここ</a>からダウンロードできます。</p>
<h2>よいところ</h3>
<p>・簡単に使える</p>

		<div id="crayon-64953fd581622372030492" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(document).ready(function() {
	$('body').videoBG({
		position:"fixed",
		zIndex:0,
		mp4:'assets/christmas_snow.mp4',
		ogv:'assets/christmas_snow.ogv',
		webm:'assets/christmas_snow.webm',
		poster:'assets/christmas_snow.jpg',
		opacity:1,
		fullscreen:true,
	});
})</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-64953fd581622372030492-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-2">2</div><div class="crayon-num" data-line="crayon-64953fd581622372030492-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-4">4</div><div class="crayon-num" data-line="crayon-64953fd581622372030492-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-6">6</div><div class="crayon-num" data-line="crayon-64953fd581622372030492-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-8">8</div><div class="crayon-num" data-line="crayon-64953fd581622372030492-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-10">10</div><div class="crayon-num" data-line="crayon-64953fd581622372030492-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581622372030492-12">12</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-64953fd581622372030492-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">document</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ready</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581622372030492-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'body'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">videoBG</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd581622372030492-3"><span class="crayon-h">		</span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-s">"fixed"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581622372030492-4"><span class="crayon-h">		</span><span class="crayon-i">zIndex</span><span class="crayon-sy">:</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd581622372030492-5"><span class="crayon-h">		</span><span class="crayon-i">mp4</span><span class="crayon-sy">:</span><span class="crayon-s">'assets/christmas_snow.mp4'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581622372030492-6"><span class="crayon-h">		</span><span class="crayon-i">ogv</span><span class="crayon-sy">:</span><span class="crayon-s">'assets/christmas_snow.ogv'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd581622372030492-7"><span class="crayon-h">		</span><span class="crayon-i">webm</span><span class="crayon-sy">:</span><span class="crayon-s">'assets/christmas_snow.webm'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581622372030492-8"><span class="crayon-h">		</span><span class="crayon-i">poster</span><span class="crayon-sy">:</span><span class="crayon-s">'assets/christmas_snow.jpg'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd581622372030492-9"><span class="crayon-h">		</span><span class="crayon-i">opacity</span><span class="crayon-sy">:</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581622372030492-10"><span class="crayon-h">		</span><span class="crayon-i">fullscreen</span><span class="crayon-sy">:</span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd581622372030492-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-64953fd581622372030492-12"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>よくないところ</h3>
<p>・ブラウザによる対応できる動画のフォーマットが違う<br />
動画ファイルをいっぱい作らなければならない<br />
・意味不明なオプションがいっぱいある<br />
textReplacementなど、使う気がしない<br />
・apacheの設定にも関係あるに気がする。<br />
httpd.confもしくは.htaccessにAddTypeでmimetypeを追加する必要ある？</p>

		<div id="crayon-64953fd581626328942766" 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">Apache</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;">
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
AddType audio/webm .weba
AddType video/mp4 .mp4
AddType video/x-m4v .m4v</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-64953fd581626328942766-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581626328942766-2">2</div><div class="crayon-num" data-line="crayon-64953fd581626328942766-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581626328942766-4">4</div><div class="crayon-num" data-line="crayon-64953fd581626328942766-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581626328942766-6">6</div><div class="crayon-num" data-line="crayon-64953fd581626328942766-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd581626328942766-1"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">ogg</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">ogm</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581626328942766-2"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">ogg</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">ogv</span></div><div class="crayon-line" id="crayon-64953fd581626328942766-3"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">ogg</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">ogg</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581626328942766-4"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">webm</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">webm</span></div><div class="crayon-line" id="crayon-64953fd581626328942766-5"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">audio</span>/<span class="crayon-i ">webm</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">weba</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581626328942766-6"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">mp4</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">mp4</span></div><div class="crayon-line" id="crayon-64953fd581626328942766-7"><span class="crayon-r">AddType</span><span class="crayon-h"> </span><span class="crayon-i ">video</span>/<span class="crayon-i ">x-m4v</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i ">m4v</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #jQueryプラグイン

2013/04/04

2013/04/04

2013/04/04

2013/03/28

2013/03/28

2013/03/27

2013/03/06

2013/02/28

2013/02/20

2013/02/07

2013/01/31

2013/01/23

2013/01/17

2013/01/16

2013/01/10

2012/12/13

2012/12/12

2012/12/06