<p>今回紹介するのは、<br />
wordpressプラグイン「Meta Slider」というもので、<br />
要はスライダーのプラグインなんですが、有名なプラグインのスライダー４つから選べるという代物。</p>
<p>その4つとは、</p>
<p><strong>・Nivo Slider (レスポンシブ対応, 16のエフェクト, 4つのテーマ)</strong><br />
<strong> ・Coin Slider (4のエフェクト)</strong><br />
<strong> ・Flex Slider 2 (レスポンシブ対応, 2のエフェクト, カルーセルモード)</strong><br />
<strong> ・Responsive Slides (レスポンシブ対応, フェイドのみ, 軽量！)</strong></p>
<p>です。</p>
<p>さらにいいのは、<br />
管理画面上で選べて、細かい設定も可能です。<br />
画像も管理画面でアップロードできます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3797" alt="Meta Slider Lite ‹ e-sign — WordPress" src="/uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-1024x903.jpg" width="640" height="563" srcset="/uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-1024x903.jpg 1024w, /uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-300x264.jpg 300w, /uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-228x201.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>表示の設定も簡単で、<br />
ショートコードまたは、テンプレートのタグがあります。<br />
つまり、テーマでも固定ページでもブログでも使えるということになります。</p>
<h2>Meta Sliderのインストール・設定</h3>
<p><strong>wordpressの管理画面　＞　プラグイン　＞　新規追加　＞　「Meta Slider」検索</strong></p>
<p>でOK！</p>
<p>プラグインのインストールして、有効化すると、<br />
サイドメニューに「Meta Slider Lite」の項目が出るので、<br />
そこから設定できます。</p>
<p>ちなみに、これは無料版と有料版があり、<br />
無料版は機能が制限されいていますが、<br />
普通に使用する程度であれば十分かと思います。</p>
<p>管理画面も使いやすい感じなので、<br />
HTML等を知らないクライアントでも写真を差し替えたり、<br />
設定を変更したりできるので、なかなか良いプラグインだと思います。</p>
<p><a class="link" href="http://wordpress.org/plugins/ml-slider/" target="_blank">Meta Slider</a></p>


スライダーが４つも！wordpressプラグイン「Meta Slider」

<p>urlの最後のidを取得して、スライドショーを始める位置を指定する方法を紹介します。</p>
<p>今回はスライドショーに「bxslider」を利用しています。</p>
<p>一覧ページと詳細ページのつながりの内容</p>
<p>①　商品一覧ページがあります。<br />
②　詳細ページは商品一つ一つのページごとにスライドしてあります。<br />
③　詳細ページにいく場合、一覧ページからクリックされた商品の詳細を表示する<br />
④　また、スライドは通常通り動く。</p>
<p>上記のような流れで実装したい！</p>
<p>今回初めて使ったのは「location.hash」です。</p>
<p>「location.hash」は一覧ページからidで指定した値を取得します。</p>
<p>一覧ページからクリックした場合のurlは</p>
<p></p>

		<div id="crayon-64953fd59569b522526158" 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;">
index.html#product01　　// #からの文字を取得します。</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-64953fd59569b522526158-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-64953fd59569b522526158-1"><span class="crayon-i">index</span><span class="crayon-sy">.</span><span class="crayon-i">html</span><span class="crayon-p">#product01　　// #からの文字を取得します。</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p></p>

		<div id="crayon-64953fd59569f605822285" 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;">
if (location.hash){
		id = location.hash.replace("#product0","");  //最後の数字を取得しています。

			$('#slider1').bxSlider({
				 	startSlide: id - 1,　//zero based
					infiniteLoop: true,
//  infiniteLoopをtrueにしてループ表示を有効化します。
  				});
	}else{
		$('#slider1').bxSlider();
	}</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-64953fd59569f605822285-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-2">2</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-4">4</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-6">6</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-8">8</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-10">10</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-11">11</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd59569f605822285-1"><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-i">hash</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-2"><span class="crayon-h">		</span><span class="crayon-i">id</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-i">hash</span><span class="crayon-sy">.</span><span class="crayon-e">replace</span><span class="crayon-sy">(</span><span class="crayon-s">"#product0"</span><span class="crayon-sy">,</span><span class="crayon-s">""</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//最後の数字を取得しています。</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-4"><span class="crayon-h">			</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#slider1'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">bxSlider</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-5"><span class="crayon-h">				 	</span><span class="crayon-i">startSlide</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">id</span><span class="crayon-h"> </span>-<span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">,</span>　<span class="crayon-c">//zero based</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-6"><span class="crayon-h">					</span><span class="crayon-i">infiniteLoop</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-7"><span class="crayon-c">//&nbsp;&nbsp;infiniteLoopをtrueにしてループ表示を有効化します。</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-8"><span class="crayon-h">&nbsp;&nbsp;				</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-9"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-st">else</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-10"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#slider1'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">bxSlider</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-11"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

URLを取得してスライドショーの位置を調整する

<p>今回はxargsコマンドによる一括操作を紹介したいと思います。</p>
<h3>あるフォルダ下のファイルを検索し、特定文字列があるところを出力</h4>
<p></p>

		<div id="crayon-64953fd5954ba106189722" 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;">
find /path/to/files -type f -print | xargs grep "search_string"</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-64953fd5954ba106189722-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-64953fd5954ba106189722-1"><span class="crayon-i">find</span><span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">files</span><span class="crayon-h"> </span>-<span class="crayon-i">type</span><span class="crayon-h"> </span><span class="crayon-i">f</span><span class="crayon-h"> </span>-<span class="crayon-i">print</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-e">xargs </span><span class="crayon-i">grep</span><span class="crayon-h"> </span><span class="crayon-s">"search_string"</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>あるフォルダ下のファイルを検索し、特定文字列を置換</h4>
<p></p>

		<div id="crayon-64953fd5954be030239999" 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;">
find /path/to/files -name "*.sh" -print | xargs sed -i 's@string_before_replace@string_after_replace@g'</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-64953fd5954be030239999-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-64953fd5954be030239999-1"><span class="crayon-i">find</span><span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">files</span><span class="crayon-h"> </span>-<span class="crayon-i">name</span><span class="crayon-h"> </span><span class="crayon-s">"*.sh"</span><span class="crayon-h"> </span>-<span class="crayon-i">print</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-e">xargs </span><span class="crayon-i">sed</span><span class="crayon-h"> </span>-<span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-s">'s@string_before_replace@string_after_replace@g'</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>※置換操作の前に、ファイルのバックアップを取ったほうがより安全でオススメです。</p>
<h3>あるフォルダ下のファイルを検索し、子フォルダだけ権限変更</h4>
<p></p>

		<div id="crayon-64953fd5954c0642220699" 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;">
find /path/to/files -type d -print0 | xargs -0 chmod 777</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-64953fd5954c0642220699-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-64953fd5954c0642220699-1"><span class="crayon-i">find</span><span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">files</span><span class="crayon-h"> </span>-<span class="crayon-i">type</span><span class="crayon-h"> </span><span class="crayon-i">d</span><span class="crayon-h"> </span>-<span class="crayon-i">print0</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">xargs</span><span class="crayon-h"> </span>-<span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-i">chmod</span><span class="crayon-h"> </span><span class="crayon-cn">777</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>※findコマンドもある程度一括操作ができるようです。</p>

【Linux】知って便利な一括操作コマンド

PHPを手軽に使って、画像のサムネイルを出力する方法

iOS7みたいにクリックでそこからページが飛び出してくるような効果をjQueryで作ってみる

Ajax でデータ送信、受信

<p>今更ながらですが、google fontsについての記事を書くことにしました。</p>
<p>1,2年前ぐらいwebフォントが出現し、モリサワ等の会社もwebフォントを提供していますが、<br />
webフォントを実際のサイトで使用したことはまだありません。</p>
<p>その理由としては有料ということもあると思いますが、そこまでフォントに対してこだわるお客さんがいないといった所でしょうか。。webフォントを読み込むのに時間がかかってユーザビリティが悪いといった懸念もあるように思います。</p>
<p>google fontsは無料かつ商用可で、特に登録もなく利用できるのですが、<br />
こちらは英語しかないためまだ使用に至っていません。</p>
<p>結局の所、今後もしばらくはwebフォントを使う予定はないかもしれません笑</p>
<p>とはいえ、使い方を学んでおくにこしたことはないので、<br />
軽くでは試してみたので、そちらとその流れを紹介したいと思います。</p>
<p><a class="demo" href="/demo/abe/36/" target="_blank">DEMO</a></p>
<h2>Google Fontsを使ってみた</h3>
<p>まずは、<a href="http://www.google.com/fonts" target="_blank">Google Fonts</a>で使いたいフォントを選びます。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3728" alt="Google Fonts" src="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>&nbsp;</p>
<p>今は全部629種類のフォントがあるようですね。<br />
基本的にはこの画面から、<br />
フォントのカテゴリー（Serif,Sans Serif,Display,Handwriting）やThickness,Slant,Widthを設定して検索できます。</p>
<p>フォントの右下の⇒みたいなマークを押すと、</p>
<p>詳細画面に遷移します。</p>
<h2>webフォントのスクリプトタグをゲット！</h3>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/12/Google-Fonts2.jpg"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3727" alt="Google Fonts2" src="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts2-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts2-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts2.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></a></p>
<p>右側のストップウォッチみたいものはそのフォントを読み込むのかかる時間を表しているようです。</p>
<p>このページの下に、以下のようなwebフォントを読み込むスクリプトタグがあります。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd594c5c654787806" 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;link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'&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-64953fd594c5c654787806-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-64953fd594c5c654787806-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">href</span>=<span class="crayon-s ">'http://fonts.googleapis.com/css?family=Wellfleet'</span><span class="crayon-h"> </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">'stylesheet'</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s ">'text/css'</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>もうこれでOKです！</p>
<p>&nbsp;</p>
<p>あとはcssで、</p>
<p></p>

		<div id="crayon-64953fd594c60148252762" 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">CSS</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;">
font-family: 'Wellfleet', cursive;</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-64953fd594c60148252762-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-64953fd594c60148252762-1"><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'Wellfleet'</span><span class="crayon-i ">,</span><span class="crayon-h"> </span><span class="crayon-i ">cursive</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>としてすればOKです！</p>
<p>非常に簡単ですね！</p>
<p>&nbsp;</p>
<h2>Google Fontsを選ぶのに便利なサイト</h3>
<p>以下のサイトでは、実際にgoogle fontsを試せて、ダウンロードまでできるサイトです。<br />
フォントの数が多いのでこちらで試しながらフォントを決めるのがオススメです！</p>
<p><a href="http://typecast.com/preview/google" class="link" target="_blank">Typecast &#8211; Public Demo | Design in the browser with web fonts and real content</a></p>
<p>また、googlefontsとは関係ないのですが、<br />
フォント選びということで、便利なサイトを紹介します。</p>
<p>好きな文字/単語を、<br />
自分のパソコンに入っているフォントで一覧で表示してくれるサイトです。<br />
一つ一つPhotoshopで試すのはちょっと面倒ですよね！<br />
意外と役に経ちます。</p>
<p><a href="http://wordmark.it/" class="link" target="_blank">wordmark.it &#8211; helps you choose fonts!</a></p>
<p>&nbsp;<br />
&nbsp;<br />
&nbsp;</p>
<p>google fontsで日本語出してくれないかな〜</p>

Google Fontsを使ってみた＆フォント選びに便利なツール

git再入門

<p>My first experience in installation symfony 2 on Mac made me crazy. I had experienced installing it on Ubuntu Linux and it worked fine. I used to setup web development on Ubuntu Linux and mobile development on Mac.</p>
<p>In Mac, for web development, I used MAMP (<strong>Macintosh, Apache, Mysql and PHP</strong>) instead of using built-in PHP and Apache Web server. I know that its time saving but it can&#8217;t make a complete and perfect development environment. But setting up built-in web server and using PHP take time to completely setup. So I was lazy to set it up.</p>
<p>In previous days, I need to install symfony 2 on my Mac. I thought installing a PHP framework is piece of cake for me. Because I&#8217;ve many experience since earlier. But, when I try to install symfony, I can&#8217;t get perfect installation. Installation stages reported back many errors. I was googling again and again to solve it. Finally, I found that Symfony 2 uses</p>
<ul>
<li>Alternative PHP Cache (APC) 3.1.13</li>
</ul>
<p>But in MAMP package, it can offer &#8220;Alternative PHP Cache (APC) 3.1.9&#8221; only. I can&#8217;t upgrade MAMP version anymore. If I will continue want to use current MAMP version, I can only downgrade symfony version, it may be version 1 of Symfony.</p>
<p>So, finally, I completely gave up using MAMP package and start setting up all required tools for web development in my local laptop. It took about half day to fully setting up it manually, but its the most suitable development for a developer.</p>
<p>Yes, of course, we developer guys like to setup our own web development environment by ourselves instead of using the ready-made already setting up working environment.</p>
<p>Ok, this is just my first experience when I try to install symfony 2 with MAMP.</p>
<p>Thank for reading at the end.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Symfony 2 installation problem with MAMP

NivoスライダーみたいなエフェクトをjQueryで組んでみる

<p>今まで気付かなかった！GoogleAppsの空き容量が復活する方法があったのでご紹介します。</p>
<p>弊社では、GoogleAppsを導入し、Gmail、Googleカレンダー、Googleドライブで業務を遂行しています。</p>
<p>無料プランが存在していた時に導入をしていたので、幸い50ユーザーまで無料で使うことが出来ますが、容量が15GBと制限されています。</p>
<p>この15GBの容量というのが、GmailとGoogleドライブを合算した容量となっておりまして、日々の業務を遂行する上で、プレゼン資料や、psdやaiファイルなどを共有しているとあっという間に数GBになってしまいます。</p>
<p>ですので、日々プロジェクトが終了すると、社内のローカルサーバにファイルを移動して、Googleドライブの容量を確保するという運用をしておりますが、先日気づくと既に14GBほど、空き容量が1GBを切っている状態になっていました。</p>
<p>定期的にGoogleドライブのファイルは移動しているし、</p>
<p><a href="https://www.google.com/settings/storage">https://www.google.com/settings/storage</a></p>
<p>ここで容量を見てみると、Googleドライブが半分以上利用していることになっていました。</p>
<p>何よりPCで保存してあるGoogleドライブの容量と異なっていることが気になりました。</p>
<p>余計なファイルでもないかとWeb版のGoogleドライブにアクセスして判明致しました。</p>
<p><a href="/uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3687" alt="スター付き_-_Google_Drive-6" src="/uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98-300x196.jpg" width="300" height="196" srcset="/uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98-300x196.jpg 300w, /uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98-228x149.jpg 228w, /uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98.jpg 866w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>なんと左カラムに「ゴミ箱」なるものが！！！</p>
<p>ここに今まで削除したファイルがたんまり溜まっていました。</p>
<p>ゴミ箱を空にしたところ</p>
<p><a href="/uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3688" alt="ドライブ_ストレージ-2" src="/uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468-295x300.jpg" width="295" height="300" srcset="/uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468-295x300.jpg 295w, /uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468-228x231.jpg 228w, /uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468.jpg 511w" sizes="(max-width: 295px) 100vw, 295px" /></a></p>
<p>&nbsp;</p>
<p>5GB以上の空き容量が出来ましたとさ。</p>
<p>Web版は滅多にアクセスしないからそりゃ気が付かないって。</p>
<p>容量が逼迫している人はどうぞお試しあれ。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


GoogleAppsの空き容量回復！ドライブのゴミ箱に要注意！

【CentOS6】phpmyadminをインストールしてみた

<p>MTでサイトを運用しており、例えば以下のように</p>
<p><label for="sample1_1"><input id="sample1_1" type="radio" name="saple1" />東京</label><br />
<label for="sample1_2"><input id="sample1_2" type="radio" name="saple1" />埼玉</label><br />
<label for="sample1_3"><input id="sample1_3" type="radio" name="saple1" />神奈川</label><br />
<label for="sample1_4"><input id="sample1_4" type="radio" name="saple1" />茨城</label></p>
<p><a href="/uploads-archive/2013/11/1.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-3659" alt="1" src="/uploads-archive/2013/11/1.png" width="526" height="398" srcset="/uploads-archive/2013/11/1.png 876w, /uploads-archive/2013/11/1-300x227.png 300w, /uploads-archive/2013/11/1-228x172.png 228w" sizes="(max-width: 526px) 100vw, 526px" /></a></p>
<p>&nbsp;</p>
<p>エリアを選択させるラジオボタンのリストがあったとして、</p>
<p>途中で複数選択にしてほしいという要望はよくありそうで、実際に起こってしまったのでその対応方法。</p>
<p>要は<br />
<label for="sample2_1"><input id="sample2_1" type="checkbox" name="saple2" />東京</label><br />
<label for="sample2_2"><input id="sample2_2" type="checkbox" name="saple2" />埼玉</label><br />
<label for="sample2_3"><input id="sample2_3" type="checkbox" name="saple2" />神奈川</label><br />
<label for="sample2_4"><input id="sample2_4" type="checkbox" name="saple2" />茨城</label></p>
<p><a href="/uploads-archive/2013/11/2.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-3660" alt="2" src="/uploads-archive/2013/11/2.png" width="526" height="482" srcset="/uploads-archive/2013/11/2.png 876w, /uploads-archive/2013/11/2-300x275.png 300w, /uploads-archive/2013/11/2-228x209.png 228w" sizes="(max-width: 526px) 100vw, 526px" /></a></p>
<p>のようにしたいというもの。</p>
<p>単純にラジオボタンのフィールドを削除して新しくチェックボックスグループを追加すれば済む話だが</p>
<p>入力済みの記事がたくさんある場合は打ち直しがとてつもなく大変なため、DBを操作して無理やりチェックボックスグループに変更する方法。</p>
<p>使うのは以下2つのテーブル</p>
<p>&nbsp;</p>
<p>■mt_fieldテーブル</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8212;&#8212;-+</p>
<p>| Field             | Type         | Null | Key | Default | Extra          |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8212;&#8212;-+</p>
<p>| field_id          | int(11)      | NO   | PRI | NULL    | auto_increment |</p>
<p>| field_basename    | varchar(255) | YES  | MUL | NULL    |                |</p>
<p>| field_blog_id     | int(11)      | YES  | MUL | NULL    |                |</p>
<p>| field_default     | mediumtext   | YES  |     | NULL    |                |</p>
<p>| field_description | mediumtext   | YES  |     | NULL    |                |</p>
<p>| field_name        | varchar(255) | NO   | MUL | NULL    |                |</p>
<p>| field_obj_type    | varchar(50)  | NO   | MUL | NULL    |                |</p>
<p>| field_options     | mediumtext   | YES  |     | NULL    |                |</p>
<p>| field_required    | tinyint(4)   | YES  |     | NULL    |                |</p>
<p>| field_tag         | varchar(255) | NO   |     | NULL    |                |</p>
<p>| field_type        | varchar(50)  | NO   | MUL | NULL    |                |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8212;&#8212;-+</p>
<p>&nbsp;</p>
<p>■mt_entry_metaテーブル</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;-+</p>
<p>| Field                    | Type         | Null | Key | Default | Extra |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;-+</p>
<p>| entry_meta_entry_id      | int(11)      | NO   | PRI | NULL    |       |</p>
<p>| entry_meta_type          | varchar(75)  | NO   | PRI | NULL    |       |</p>
<p>| entry_meta_vchar         | varchar(255) | YES  |     | NULL    |       |</p>
<p>| entry_meta_vchar_idx     | varchar(255) | YES  |     | NULL    |       |</p>
<p>| entry_meta_vdatetime     | datetime     | YES  |     | NULL    |       |</p>
<p>| entry_meta_vdatetime_idx | datetime     | YES  |     | NULL    |       |</p>
<p>| entry_meta_vinteger      | int(11)      | YES  |     | NULL    |       |</p>
<p>| entry_meta_vinteger_idx  | int(11)      | YES  |     | NULL    |       |</p>
<p>| entry_meta_vfloat        | float        | YES  |     | NULL    |       |</p>
<p>| entry_meta_vfloat_idx    | float        | YES  |     | NULL    |       |</p>
<p>| entry_meta_vblob         | mediumblob   | YES  |     | NULL    |       |</p>
<p>| entry_meta_vclob         | mediumtext   | YES  |     | NULL    |       |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;-+</p>
<p>&nbsp;</p>
<p>まずカスタムフィールド自体のIDを用意する。</p>
<p>/mt.cgi?__mode=view&amp;_type=field&amp;blog_id=17&amp;id=906&amp;saved=1&amp;saved_added=1</p>
<p>例えばこのようなURLの場合、906がIDとなる。</p>
<p>これを使い、</p>

		<div id="crayon-64953fd5941a5252337217" 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">MySQL</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;">
SELECT * FROM mt_field where field_id=906;</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-64953fd5941a5252337217-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-64953fd5941a5252337217-1"><span class="crayon-st">SELECT</span><span class="crayon-h"> </span>*<span class="crayon-h"> </span><span class="crayon-st">FROM</span><span class="crayon-h"> </span>mt_field<span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>field_id<span class="crayon-o">=</span>906;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>などのようにSELECT文を実行して項目を確認。</p>
<p>field_typeがradioになっていることを確認し</p>

		<div id="crayon-64953fd5941aa356579294" 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">MySQL</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;">
UPDATE mt_field SET field_type='checkbox_group' where field_id=906;</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-64953fd5941aa356579294-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-64953fd5941aa356579294-1"><span class="crayon-st">UPDATE</span><span class="crayon-h"> </span>mt_field<span class="crayon-h"> </span><span class="crayon-st">SET</span><span class="crayon-h"> </span>field_type=<span class="crayon-s">'checkbox_group'</span><span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>field_id<span class="crayon-o">=</span>906;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を実行してfield_typeをcheckbox_groupに変更する。</p>
<p>次に該当カスタムフィールドのベースネームを確認しておき、今回の場合だと</p>

		<div id="crayon-64953fd5941ab000998575" 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">MySQL</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;">
select entry_meta_entry_id,entry_meta_vchar,entry_meta_vchar_idx from mt_entry_meta where entry_meta_type like "%entry_area%";</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-64953fd5941ab000998575-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-64953fd5941ab000998575-1"><span class="crayon-st">select</span><span class="crayon-h"> </span>entry_meta_entry_id,entry_meta_vchar,entry_meta_vchar_idx<span class="crayon-h"> </span><span class="crayon-st">from</span><span class="crayon-h"> </span>mt_entry_meta<span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>entry_meta_type<span class="crayon-h"> </span><span class="crayon-st">like</span><span class="crayon-h"> </span><span class="crayon-s">"%entry_area%"</span>;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>などのようにして現在該当カスタムフィールドを使っている記事を確認する。</p>
<p>ラジオボタンのリストはカンマ区切りでentry_meta_vchar_idxカラムにデータが入っているが</p>
<p>チェックボックスリストはentry_meta_vcharカラムを使用するため</p>

		<div id="crayon-64953fd5941ac987169711" 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">MySQL</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;">
update mt_entry_meta set entry_meta_vchar=entry_meta_vchar_idx where entry_meta_type like "%entry_area%";</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-64953fd5941ac987169711-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-64953fd5941ac987169711-1"><span class="crayon-st">update</span><span class="crayon-h"> </span>mt_entry_meta<span class="crayon-h"> </span><span class="crayon-st">set</span><span class="crayon-h"> </span>entry_meta_vchar<span class="crayon-o">=</span>entry_meta_vchar_idx<span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>entry_meta_type<span class="crayon-h"> </span><span class="crayon-st">like</span><span class="crayon-h"> </span><span class="crayon-s">"%entry_area%"</span>;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を実行して entry_meta_vcharにentry_meta_vchar_idxを入れてします。</p>
<p>checkbox_groupはentry_meta_vchar_idxカラムを使用しないため、値はそのままとっておいてOK。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

【MovableType】MoreCustomFieldsでラジオボタンをチェックボックスに変更する

nino_eye.jpg

jQueryプラグインを使わずにフリック＆ドラッグで動くスライダーを作ってみる

<p>mailto構文でメールを送る機能において文字コードをどうするか？</p>
<p>これは、今後も必ず発生する課題となるので、備忘録を兼ねてまとめておきたいと思います。</p>
<h2>結論</h3>
<p>まず、簡単に結論から述べてしまうと、</p>
<ul>
<li>UTF-8では、Windows環境Outlook系で文字化け</li>
<li>ShiftJISでは、Gmail、Thunderbird等で文字化け</li>
<li>すべての環境、メーラーで対応する術はなし</li>
</ul>
<p>となります。</p>
<h2>どちらも一長一短</h3>
<p>ご自身の環境で試されたい方はこちらが参考になります。</p>
<p><a href="http://dd-kaihatsu-room.blogspot.jp/2013/04/mailtoutf-8sjis.html" target="_blank">http://dd-kaihatsu-room.blogspot.jp/2013/04/mailtoutf-8sjis.html</a></p>
<p>Windows環境はS-JIS、それ以外のグローバルサービスではUTF-8がサポートされています。</p>
<p>メーラーを選択して、文字コードを出し分けるということは難しいため、上記のサイトのように</p>
<p>S-JISとUTF-8の両方のリンクを出さない限り、文字化けを回避することは出来ません。</p>
<p>&nbsp;</p>
<p>また、Outlook2007以降のようですと、UTF-8をサポートするというオプションがあるようですが、サイト上から一般のユーザー様にこのような操作を強いるのは酷ですね。</p>
<p><a href="http://www.justhpbs.jp/hpb16/outlook-mailto.html" target="_blank">http://www.justhpbs.jp/hpb16/outlook-mailto.html</a></p>
<h2>考察</h3>
<p>ということで、じゃあどうするのがベストなのかというのを、考察してみました。</p>
<p>通常のプロセスですとシェアに応じてプライオリティを定めるというのが王道かと思いますが、残念ながらメーラーシェアの統計でここ一年のようなものは容易に見つけることは出来ませんでした。</p>
<p>Gmialやsmartphoneが普及した昨今、WindowsベースのOutlookはシェアが落ちていることは確実かと思いますので、UTF-8一択でいいと結論着けてしまっていいものでしょうか？</p>
<p>私が考えたのは以下です。</p>
<ul>
<li>メールで送るという行為自体がレガシーなものになりつつある。</li>
<li>シェアする方法としてTwitterやFacebookが普及している。</li>
</ul>
<p>という前提からGmailやThunderbirdを使いこなすユーザーは、他の方法でシェアをする。</p>
<p>メールで送るという機能を使うユーザーこそ、Windows系に合致するため、メーラーはShiftJISで設定しておくのがベストではないかと考えます。</p>


メーラーの文字コードはUTF-8とS-JISどちらがいい？

<p>Pathみたいなナビゲーションが作れるjQueryプラグイン ferroMenuを使ってみた。</p>
<p><a class="demo" href="/demo/hoshino/49/">デモ</a></p>
<p>&nbsp;</p>
<p>以下設置方法</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd593a7d220585936" 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;link rel="stylesheet" href="css/jquery.ferro.ferroMenu.css" /&gt;
&lt;script src="js/jquery.ferro.ferroMenu-1.0.min.js" type="text/javascript"&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-64953fd593a7d220585936-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a7d220585936-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-64953fd593a7d220585936-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">"stylesheet"</span><span class="crayon-h"> </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"css/jquery.ferro.ferroMenu.css"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a7d220585936-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.ferro.ferroMenu-1.0.min.js"</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>まずはダウンロードしたファイルを読み込む。</p>
<p>CSSは必ず読み込んだ方が良い。ただ、デフォルトで#navに対してスタイルをかけているが</p>
<p>変更が容易は容易だった。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd593a81910894925" 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()
{
	$("#left-bottom").ferroMenu();
});</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-64953fd593a81910894925-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a81910894925-2">2</div><div class="crayon-num" data-line="crayon-64953fd593a81910894925-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a81910894925-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd593a81910894925-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></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a81910894925-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd593a81910894925-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#left-bottom"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ferroMenu</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-64953fd593a81910894925-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>次にターゲットに対して ferroMenu関数を実行する。</p>
<p>1ページに複数ターゲットを置いて別々に指定したらエラーになり最後のものしか実行されなかった。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd593a82857719733" 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;ul id="left-bottom" class="nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;1&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;2&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;3&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;4&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;5&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;6&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&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-64953fd593a82857719733-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-2">2</div><div class="crayon-num" data-line="crayon-64953fd593a82857719733-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-4">4</div><div class="crayon-num" data-line="crayon-64953fd593a82857719733-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-6">6</div><div class="crayon-num" data-line="crayon-64953fd593a82857719733-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-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-64953fd593a82857719733-1"><span class="crayon-r ">&lt;ul </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"left-bottom"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"nav"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">1</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd593a82857719733-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">2</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">3</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd593a82857719733-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">4</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">5</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd593a82857719733-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</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&gt;</span><span class="crayon-i ">6</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-8"><span class="crayon-r ">&lt;/ul&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ターゲットはulで指定した方が無難だった。</p>
<p>&nbsp;</p>
<p>また、以下はパラメータ一覧</p>
<p>&nbsp;</p>
<table>
<tr>
<th>パラメータ</th>
<th>値</th>
<th>デフォルト値</th>
<th>説明</th>
</tr>
<tr>
<td>closeTime</td>
<td>int</td>
<td>500</td>
<td>メニューが閉じる時の時間(ミリ秒)</td>
</tr>
<tr>
<td>delay</td>
<td>int</td>
<td>0</td>
<td>各アイテムのアニメーション開始時のディレイ</td>
</tr>
<tr>
<td>drag</td>
<td>bool</td>
<td>TRUE</td>
<td>メニューをドラッグできるか否か</td>
</tr>
<tr>
<td>easing</td>
<td>string</td>
<td>cubic-bezier(0.680, -0.550, 0.265, 1.550)</td>
<td>イージングの指定</td>
</tr>
<tr>
<td>margin</td>
<td>int</td>
<td>10</td>
<td>配置によるが、エッジに対するマージン</td>
</tr>
<tr>
<td>position</td>
<td>&#8216;left-top&#8217; | &#8216;center-top&#8217; | &#8216;right-top&#8217; | &#8216;right-bottom&#8217; |   &#8216;center-bottom&#8217; | &#8216;left-bottom&#8217; | &#8216;right-center&#8217; | &#8216;left-center&#8217; |   &#8216;center-center&#8217;</td>
<td>&#8216;left-bottom&#8217;</td>
<td>配置位置。dragがtrueであればデフォルトの位置</td>
</tr>
<tr>
<td>radius</td>
<td>int</td>
<td>100</td>
<td>アイテムの距離感</td>
</tr>
<tr>
<td>rotation</td>
<td>int</td>
<td>0</td>
<td>アイテムの回転角度</td>
</tr>
<tr>
<td>opened</td>
<td>bool</td>
<td>FALSE</td>
<td>デフォルトでメニューを開いてるか否か</td>
</tr>
<tr>
<td>openTime</td>
<td>int</td>
<td>500</td>
<td>アイテムが開くスピード(ミリ秒)</td>
</tr>
</table>

Pathみたいなナビゲーションが作れるjQueryプラグイン ferroMenu

<p>１つのデータベースに、それぞれが異なる情報を持つ複数のテーブルを保持し、<br />
それぞれのテーブルに同じフィールドがあれば、それを利用してテーブル結合してデータを取得する事が出来ます。</p>
<p>今回はサンプルでcustomersテーブルとshopテーブルを利用して説明します。</p>
<p>先に以下の内容でテーブルを作りました。</p>
<h2>customersテーブル</h3>
<table>
<tr>
<th>id</th>
<th>name</th>
<th>address</th>
<th>products</th>
</tr>
<tr>
<td> 1 </td>
<td> poe </td>
<td>  shinjyuku </td>
<td> iphone5 </td>
</tr>
<tr>
<td> 2 </td>
<td> su  </td>
<td>  shinagawa </td>
<td> iphone3  </td>
</tr>
<tr>
<td> 3 </td>
<td> hnin </td>
<td> ikebukuro </td>
<td> iphone5  </td>
</tr>
<tr>
<td> 4 </td>
<td> ei </td>
<td> ikebukuro </td>
<td> iphone5  </td>
</tr>
</table>
<h2>shopテーブル</h3>
<table>
<tr>
<th>id</th>
<th>products</th>
<th>price</th>
<th>code</th>
</tr>
<tr>
<td> 1 </td>
<td> iphone </td>
<td>  30000 </td>
<td> IP01 </td>
</tr>
<tr>
<td> 2 </td>
<td> iphone4  </td>
<td>  40000 </td>
<td> IP02  </td>
</tr>
<tr>
<td> 3 </td>
<td> iphone4S </td>
<td> 42000 </td>
<td> IP03  </td>
</tr>
<tr>
<td> 4 </td>
<td> iphone5 </td>
<td> 50000 </td>
<td> IP04  </td>
</tr>
</table>
<p>customersテーブのproductsというフィールドとshopテーブルのproductsフィールドを一致して、<br />
現在販売されている商品とお客さんの情報を取得できます。</p>
<p>以下のようなmysql文で取得できます。</p>
<p></p>

		<div id="crayon-64953fd593847096081621" 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;">
SELECT * from customers,shop WHERE customers.products = shop.products;</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-64953fd593847096081621-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-64953fd593847096081621-1"><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">from </span><span class="crayon-i">customers</span><span class="crayon-sy">,</span><span class="crayon-e">shop </span><span class="crayon-e">WHERE </span><span class="crayon-i">customers</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">shop</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>結果の表示です。</p>
<table>
<tr>
<th>id</th>
<th>name</th>
<th>address</th>
<th>products</th>
<th>id</th>
<th>products</th>
<th>price</th>
<th>code</th>
</tr>
<tr>
<td>2 </td>
<td> su   </td>
<td> shinagawa </td>
<td> iphone4  </td>
<td>  2 </td>
<td> iphone4  </td>
<td> 40000 </td>
<td> IP02 </td>
</tr>
<tr>
<td>1 </td>
<td> poe  </td>
<td> shinjyuku </td>
<td> iphone5  </td>
<td>  4 </td>
<td> iphone5  </td>
<td> 50000 </td>
<td> IP04 </td>
</tr>
<tr>
<td>3 </td>
<td> hnin </td>
<td> ikebukuro </td>
<td> iphone5  </td>
<td>  4 </td>
<td> iphone5  </td>
<td> 50000 </td>
<td> IP04 </td>
</tr>
<tr>
<td>4 </td>
<td> ei </td>
<td> ikebukuro </td>
<td> iphone5  </td>
<td>  4 </td>
<td> iphone5  </td>
<td> 50000 </td>
<td> IP04 </td>
</tr>
</table>
<h2>NATURAL JOIN</h3>
<p>-NATURAL JOINは2つのテーブルを取り、同じ名前を持つ列を<br />
自動的に結合させます。<br />
サンプル :</p>

		<div id="crayon-64953fd59384c240439438" 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;">
SELECT * FROM customers NATURAL JOIN shop;</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-64953fd59384c240439438-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-64953fd59384c240439438-1"><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">FROM </span><span class="crayon-e">customers </span><span class="crayon-e">NATURAL </span><span class="crayon-e">JOIN </span><span class="crayon-i">shop</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>結果表示：</p>
<table>
<tr>
<th>id</th>
<th>products</th>
<th>name</th>
<th>address</th>
<th>price</th>
<th>code</th>
</tr>
<tr>
<td>2</td>
<td>iphone4</td>
<td>su</td>
<td>shinagawa</td>
<td>40000</td>
<td>IP02</td>
</tr>
<tr>
<td>4</td>
<td>iphone5</td>
<td>ei</td>
<td>ikebukuro</td>
<td>50000</td>
<td>IP04</td>
</tr>
</table>
<p>上記の場合、テーブルの両方に存在するカラムは「id」と「products」カラムだけですので「id」と「products」カラムを使って結合が行われます。</p>
<h2>JOIN…..ON</h3>
<p>2つのテーブルの結合させる列を指定したい場合には、JOIN…..ON構造を次のように使用します。<br />
サンプル：</p>
<p></p>

		<div id="crayon-64953fd59384d248140877" 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;">
SELECT * FROM customers JOIN shop ON customers.products = shop.products;</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-64953fd59384d248140877-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-64953fd59384d248140877-1"><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">FROM </span><span class="crayon-e">customers </span><span class="crayon-e">JOIN </span><span class="crayon-e">shop </span><span class="crayon-e">ON </span><span class="crayon-i">customers</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">shop</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>※結果は「SELECT * from customers,shop WHERE customers.products = shop.products;」と同じです。</p>
<h2>ASの使用</h3>
<p>ASキーワードを利用して、入力にかかる手数を減らしクエリを読みやすくする事も出来ます。<br />
サンンプル：</p>

		<div id="crayon-64953fd59384e693006288" 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;">
SELECT * from customers AS cust, shop AS sp WHERE cust.products = sp.products;</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-64953fd59384e693006288-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-64953fd59384e693006288-1"><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">from </span><span class="crayon-e">customers </span><span class="crayon-st">AS</span><span class="crayon-h"> </span><span class="crayon-i">cust</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">shop </span><span class="crayon-st">AS</span><span class="crayon-h"> </span><span class="crayon-e">sp </span><span class="crayon-e">WHERE </span><span class="crayon-i">cust</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">sp</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>※結果は「SELECT * from customers,shop WHERE customers.products = shop.products;」と同じです。</p>

テーブル結合

<p>最近コーディングをする時はすっかりSublimetextを使用するようになりました。</p>
<p>軽さ、機能、プラグインが良くて多用している日々でございます。</p>
<p>Sublimetextの魅力は、いろいろあるのですが、ここでは割愛させていただきます。<br />
代わりに記事を紹介しますので、そちらをご覧下さい。</p>
<p><a href="/programmer/%e6%96%b0%e3%81%97%e3%81%84%e5%b9%b4%e3%81%ab%e3%80%81%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf%e3%82%92sublime%e3%81%ab%e5%a4%89%e3%81%88%e3%81%9f.html">新しい年に、テキストエディタをsublimeに変えた | スターフィールド株式会社</a></p>
<p><a href="http://liginc.co.jp/designer/archives/6774">”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！ | 株式会社LIG</a></p>
<p><a href="http://dotinstall.com/lessons/basic_sublimetext">Sublime Text 2入門 (全14回) &#8211; プログラミングならドットインストール</a></p>
<h2>オススメのプラグイン</h3>
<p>僕が今回オススメしたいのが「Hayaku」というプラグインです！<br />
こちらはその名の通り、cssを早く書けちゃうという代物でございます！</p>
<p><a href="https://github.com/hayaku/hayaku">hayaku/hayaku · GitHub</a></p>
<p>sublimetextを使っている人であれば、プラグインの「emmet」を入れて使用していると思います。<br />
emmetでもcssを簡略化して書けるじゃないか、とお思いの方もいると思いますが、<br />
emmetでは、簡略化の型が決まっているので、その型を覚えないといけないですよね・・・<br />
それってやっぱり面倒な人には面倒なことだと思います。</p>
<p>その型を覚える必要がないのが「Hayaku」なんです！</p>
<p>どういうことかと言いますと、<br />
cssを書く際に、適当に</p>
<p></p>

		<div id="crayon-64953fd593651318683169" 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">CSS</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;">
/* w,wd,wid,widt いずれかの打ち方でも以下のスタイルに変換されます(Tabキーで変換です)！*/
width: 100%;
/* w960 */
width: 960px;</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-64953fd593651318683169-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593651318683169-2">2</div><div class="crayon-num" data-line="crayon-64953fd593651318683169-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593651318683169-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd593651318683169-1"><span class="crayon-c">/* w,wd,wid,widt いずれかの打ち方でも以下のスタイルに変換されます(Tabキーで変換です)！*/</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593651318683169-2"><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593651318683169-3"><span class="crayon-c">/* w960 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593651318683169-4"><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">960px</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>これすごくないですか？？笑</p>
<p>それっぽかったらある程度、思い通りに変換してくれちゃうんですよ！</p>
<p>だから型なんかを覚えることなく、頭に思い浮かべたスタイルの頭文字を適当に並べるだけでOKぐらいのレベルで、<br />
cssが書けちゃうわけです。</p>
<p>一部ですが以下のような形です。</p>
<p></p>

		<div id="crayon-64953fd593655829431568" 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">CSS</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;">
	/* pl20 */
	padding-left: 20px;
	/* mb30 */
	margin-bottom: 30px;
	/* bgc */
	background-color: #FFF;
	/* pa */
	position: absolute;
	/* dn,dpn */
	display: none;
	/* fs14 */
	font-size: 14px;
	/* lh180% */
	line-height: 180%;
	/* bl1s */
	border-left: 1px solid;</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-64953fd593655829431568-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-2">2</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-4">4</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-6">6</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-8">8</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-10">10</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-12">12</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-14">14</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-16">16</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd593655829431568-1"><span class="crayon-h">	</span><span class="crayon-c">/* pl20 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-2"><span class="crayon-h">	</span><span class="crayon-e ">padding-left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-3"><span class="crayon-h">	</span><span class="crayon-c">/* mb30 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-4"><span class="crayon-h">	</span><span class="crayon-e ">margin-bottom</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">30px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-5"><span class="crayon-h">	</span><span class="crayon-c">/* bgc */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-6"><span class="crayon-h">	</span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#FFF</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-7"><span class="crayon-h">	</span><span class="crayon-c">/* pa */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-8"><span class="crayon-h">	</span><span class="crayon-e ">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">absolute</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-9"><span class="crayon-h">	</span><span class="crayon-c">/* dn,dpn */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-10"><span class="crayon-h">	</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">none</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-11"><span class="crayon-h">	</span><span class="crayon-c">/* fs14 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-12"><span class="crayon-h">	</span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">14px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-13"><span class="crayon-h">	</span><span class="crayon-c">/* lh180% */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-14"><span class="crayon-h">	</span><span class="crayon-e ">line-height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">180%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-15"><span class="crayon-h">	</span><span class="crayon-c">/* bl1s */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-16"><span class="crayon-h">	</span><span class="crayon-e ">border-left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>感覚で書いてる感じになりますねこれは。</p>
<p>ホントおすすめです！！</p>
<p>sublimetext、emmet共々、使いこなせば、コーディングがグッと早くなるかも！？<br />
いや、少しぐらいは早くなると思います。</p>
<h2>プラグインのインストール</h3>
<p>プラグインの入れ方は、通常のプラグインと同様、<br />
「command + shift + p」でinstall packageを開き、「hayaku」と記入すれば出てくるので、<br />
選択してインストール完了です。</p>
<p>ぜひぜひ活用してよいコーディングライフをお送りください！笑</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2013/12/11

2013/12/11

2013/12/10

2013/12/10

2013/12/04

2013/12/04

2013/12/04

2013/12/03

2013/11/27

2013/11/27

2013/11/27

2013/11/27

2013/11/26

2013/11/21

2013/11/21

2013/11/21

2013/11/21

2013/11/21