【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でラジオボタンをチェックボックスに変更する

<p>hoverの場合、画像の明るさを調整したいので、いつものようにcssを書きました。<br />
　　　</p>

		<div id="crayon-64953fd593fa8909326414" 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;">
opacity:0.6;</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-64953fd593fa8909326414-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-64953fd593fa8909326414-1"><span class="crayon-i">opacity</span><span class="crayon-sy">:</span><span class="crayon-cn">0.6</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>今回はIE8、FF、Safariを対応しないといけないので、</p>
<p>それぞれのブラウザを対応するcssを追加して、確認したところIE8ではうまくいかなかった。</p>
<p></p>

		<div id="crayon-64953fd593fac682675553" 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;">
filter: alpha(opacity=60);        /* ie lt 8 */
-ms-filter: "alpha(opacity=60)";  /* ie 8 */
-moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
-khtml-opacity: 0.6;              /* Safari 1.x */</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-64953fd593fac682675553-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593fac682675553-2">2</div><div class="crayon-num" data-line="crayon-64953fd593fac682675553-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593fac682675553-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-64953fd593fac682675553-1"><span class="crayon-i">filter</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">alpha</span><span class="crayon-sy">(</span><span class="crayon-i">opacity</span>=<span class="crayon-cn">60</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">/* ie lt 8 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593fac682675553-2">-<span class="crayon-i">ms</span>-<span class="crayon-i">filter</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"alpha(opacity=60)"</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">/* ie 8 */</span></div><div class="crayon-line" id="crayon-64953fd593fac682675553-3">-<span class="crayon-i">moz</span>-<span class="crayon-i">opacity</span><span class="crayon-sy">:</span><span class="crayon-cn">0.6</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">/* FF lt 1.5, Netscape */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593fac682675553-4">-<span class="crayon-i">khtml</span>-<span class="crayon-i">opacity</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0.6</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">/* Safari 1.x */</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>対策方法を検索した結果を</p>

		<div id="crayon-64953fd593fad858977391" 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;">
zoom:1;</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-64953fd593fad858977391-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-64953fd593fad858977391-1"><span class="crayon-i">zoom</span><span class="crayon-sy">:</span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を追加したら、早速うまくいったので、<br />
安心して、本番にアップしたら、本番環境ではうまくいっていない！</p>
<p>cssのパスが違っているか何度も確認しても、テスト環境との違いが見つからない！</p>
<p>それで、cssを変えようとして、また検索したところ、<br />
場合によって、「a」タグの幅と「display: block;」を指定しないといけないみたいです。</p>
<p>試してみたら本番環境もうまくいくようになりました。</p>
<p>cssも同じブラウザでも環境によって、動作がちがうって初めての体験でした。</p>

IE8対応 画像 opacity

<p>北欧のデザイン好きです。</p>
<p>かわいいものが好きと言うわけではないんですが、<br />
あの感じはとても心動かされます。</p>
<p>シンプルで機能的なデザインのタイプのものも好きなので、<br />
北欧デザインにドはまりです。いつか行ってみたいですね〜</p>
<p>そんな北欧の企業で、特に雑貨店が近年で日本に進出しているらしいです。</p>
<p>ちょっと前にはテレビにもでていたデンマークの「タイガー」が話題になっていました。<br />
まだ出始めの頃、大阪の店舗に行ってみたのですが、<br />
めちゃめちゃ混んでおり、さらに整理券が必要だとのことで、外から見るだけでした。<br />
この間、表参道にも出店されましたが、おそらく同じように混んでいることでしょう。。。</p>
<p>ちなみにタイガーは、「北欧の100円ショップ」と呼ばれていたりしますが、<br />
正確には「100円ショップ」ではなく「激安ショップ」といったところで、<br />
価格は数段階に分かれており、100円程度の商品もあれば、800円程度の商品もあります。</p>
<p><a class="link" href="http://www.flyingtiger.jp/" target="_blank">フライング タイガー コペンハーゲン : Flying Tiger Copenhagen</a></p>
<p>&nbsp;</p>
<h2>最近日本にやってきた北欧ブランド雑貨店</h3>
<p>そして、直近で日本に来たお店を紹介させていただきます。</p>
<p>&nbsp;</p>
<h3>ラガハウス</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3664" alt="LAGERHAUS JAPAN-ラガハウス  インテリア・雑貨の通販サイト" src="/uploads-archive/2013/11/1b6b9a6102969449edc243574da8c8db-1024x574.jpg" width="632" height="354" srcset="/uploads-archive/2013/11/1b6b9a6102969449edc243574da8c8db-1024x574.jpg 1024w, /uploads-archive/2013/11/1b6b9a6102969449edc243574da8c8db-300x168.jpg 300w, /uploads-archive/2013/11/1b6b9a6102969449edc243574da8c8db-228x127.jpg 228w, /uploads-archive/2013/11/1b6b9a6102969449edc243574da8c8db.jpg 1183w" sizes="(max-width: 632px) 100vw, 632px" /></p>
<p>ユニーが運営する大型総合スーパー「アピタ」内で出店されるそうで、<br />
まだ2,3店舗にしかなく、今後増えていくようです。<br />
価格は315円、525円、735円、1050円、1575円、2100円の6種類</p>
<p>&nbsp;</p>
<p><a class="link" href="http://lagerhaus-japan.jp/" target="_blank">LAGERHAUS JAPAN/ラガハウス | インテリア・雑貨の通販サイト</a></p>
<p>&nbsp;</p>
<h3>ソストレーネ・グレーネ</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3668" alt="Forside" src="/uploads-archive/2013/11/Forside-1024x582.jpg" width="630" height="358" srcset="/uploads-archive/2013/11/Forside-1024x582.jpg 1024w, /uploads-archive/2013/11/Forside-300x170.jpg 300w, /uploads-archive/2013/11/Forside-228x129.jpg 228w, /uploads-archive/2013/11/Forside.jpg 1168w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>12月20日に開業する「イオンモール幕張新都心」に日本1号店を出店されるそうで、<br />
今後の出店はまだ予定がないもののショッピングセンターを中心に出店いくとのことです。</p>
<p>価格は200～300円が中心</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.grenes.dk/" target="_blank">Forside</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>安いと必要なくてもついつい買っちゃうんですよね〜<br />
こういった雑貨は買わなくても見ているだけでも楽しくなれますよね！</p>
<p>&nbsp;</p>
<h2>既にある北欧ブランドのお店(家具・ファッション等)</h3>
<p>既に日本で人気かつ有名なブランドとして、<br />
IKEAやマリメッコやH&amp;Mなんかがありますよね！<br />
IKEAは大好きで、買うものなくても行きたいくらいです。</p>
<p>&nbsp;</p>
<h3>アラビア</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3663" alt="Arabia - Etusivu" src="/uploads-archive/2013/11/Arabia-Etusivu-1024x582.jpg" width="630" height="358" srcset="/uploads-archive/2013/11/Arabia-Etusivu-1024x582.jpg 1024w, /uploads-archive/2013/11/Arabia-Etusivu-300x170.jpg 300w, /uploads-archive/2013/11/Arabia-Etusivu-228x129.jpg 228w, /uploads-archive/2013/11/Arabia-Etusivu.jpg 1168w" sizes="(max-width: 630px) 100vw, 630px" /><br />
<a class="link" href="http://www.arabia.fi/web/Arabiawww.nsf/fi/etusivu" target="_blank">Arabia &#8211; Etusivu</a></p>
<p>&nbsp;</p>
<h3>イッタラ</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3667" alt="iittala - イッタラ" src="/uploads-archive/2013/11/6b192c3179fb8f854508683459273ed3-1024x582.jpg" width="630" height="358" srcset="/uploads-archive/2013/11/6b192c3179fb8f854508683459273ed3-1024x582.jpg 1024w, /uploads-archive/2013/11/6b192c3179fb8f854508683459273ed3-300x170.jpg 300w, /uploads-archive/2013/11/6b192c3179fb8f854508683459273ed3-228x129.jpg 228w, /uploads-archive/2013/11/6b192c3179fb8f854508683459273ed3.jpg 1168w" sizes="(max-width: 630px) 100vw, 630px" /><br />
<a class="link" href="http://www.scope.ne.jp/iittala/" target="_blank">iittala &#8211; イッタラ</a></p>
<p>&nbsp;</p>
<h3>イルムス</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3666" alt="イルムスオンラインショップ　北欧雑貨・インテリア　北欧ライフスタイルの通販" src="/uploads-archive/2013/11/129ecbe798d079e3ddd4dd0ae4281831-1024x649.jpg" width="630" height="399" srcset="/uploads-archive/2013/11/129ecbe798d079e3ddd4dd0ae4281831-1024x649.jpg 1024w, /uploads-archive/2013/11/129ecbe798d079e3ddd4dd0ae4281831-300x190.jpg 300w, /uploads-archive/2013/11/129ecbe798d079e3ddd4dd0ae4281831-228x144.jpg 228w, /uploads-archive/2013/11/129ecbe798d079e3ddd4dd0ae4281831.jpg 1163w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p><a class="link" href="http://www.illums-online.com/pc/" target="_blank">イルムスオンラインショップ　北欧雑貨・インテリア　北欧ライフスタイルの通販</a></p>
<p>&nbsp;</p>
<h2>その他番外編</h3>
<h3>スウェーデンハウス</h4>
<p>北欧デザインの家を建てたい方に！</p>
<p><a class="link" href="http://www.swedenhouse.co.jp/" target="_blank">スウェーデンハウス</a></p>
<p>&nbsp;</p>
<p>北欧デザインとは関係ないですが、<br />
北欧企業ということで、</p>
<h3>スウェーデンのスタートアップ企業Virtusize</h4>
<p>ファッションECサイト「MAGASEEK」で導入してある、<br />
ECサイトでバーチャル試着の機能を実装してくれるソリューションです。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3665" alt="Virtusize - Japanese" src="/uploads-archive/2013/11/Virtusize-Japanese-1024x582.jpg" width="630" height="358" srcset="/uploads-archive/2013/11/Virtusize-Japanese-1024x582.jpg 1024w, /uploads-archive/2013/11/Virtusize-Japanese-300x170.jpg 300w, /uploads-archive/2013/11/Virtusize-Japanese-228x129.jpg 228w, /uploads-archive/2013/11/Virtusize-Japanese.jpg 1168w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p><a class="link" href="http://www.virtusize.com/global/jp">Virtusize &#8211; Japanese</a></p>
<p>&nbsp;</p>
<h3>FJORD</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3662" alt="Fjord. The service design consultancy." src="/uploads-archive/2013/11/Fjord.-The-service-design-consultancy.-1024x649.jpg" width="630" height="399" srcset="/uploads-archive/2013/11/Fjord.-The-service-design-consultancy.-1024x649.jpg 1024w, /uploads-archive/2013/11/Fjord.-The-service-design-consultancy.-300x190.jpg 300w, /uploads-archive/2013/11/Fjord.-The-service-design-consultancy.-228x144.jpg 228w, /uploads-archive/2013/11/Fjord.-The-service-design-consultancy..jpg 1163w" sizes="(max-width: 630px) 100vw, 630px" /><br />
フィンランドのweb系制作会社で最近アクセンチュアに買収されたとか。</p>
<p><a class="link" href="http://www.fjordnet.com/">Fjord</a></p>
<p>北欧ブランドは素晴らしいですね！<br />
今後もいろいろな業態で進出してくる企業に期待したいと思います！</p>


素晴らしき北欧ブランド・デザインの雑貨店が日本に続々進出！！＋α

small_nino_eye.jpg

thumbnail_nino_eye.jpg

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>

Sublimetext2 のプラグイン「Hayaku」が便利すぎてびっくりしました

<p>急な案件で、facebookとtwitterのAPI仕様の再確認になりました。</p>
<h2>facebook</h3>
<h3>sharer.php</h4>
<p>軽くソーシャルボタンで対応したいから、sharer.phpの仕様を調べてみたことろ、<br />
<a href="https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/" target="_blank">OGPの仕様追加</a>によって、サイトの「og:image」設定ではなく、個別の画像をソーシャルボタンで投稿することができなってしまいました。<br />
よって、今回も<a href="https://developers.facebook.com/docs/graph-api/" target="_blank">graph API</a>で対応することにしました。</p>
<h3>graph API</h4>
<p>こちらはあまり一年前と変わってないみたで、わりと簡単にできました。</p>
<h2>twitter</h3>
<h3>REST API</h4>
<p>1.0から1.1にアップデータしてから、ほぼ変化がないみたいです。<br />
oauth2が出て、<a href="https://dev.twitter.com/docs/auth/application-only-auth" target="_blank">application-only authentication</a>（bearer token）が新しく出てきたぐらいです。</p>
<h3>流れ</h4>
<p>忘れがちですが、<br />
request_tokenを取得してから、access_tokenを取得するのは基本です。</p>
<h3>ライブラリ</h4>
<p>以前は、<a href="https://github.com/abraham/twitteroauth" target="_blank">twitteroauth</a>を使ってきました。<br />
特に挫折なくできてましたが、<br />
今回は前方の都合で、<a href="https://github.com/themattharris/tmhOAuth" target="_blank">tmhOAuth</a>を使いました。<br />
直感使い方が違くて、twitteroauthのような便利のものではないようです。</p>


【API】facebookとtwitterのAPI再確認

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
<div class="booklink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4382055784/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/41LiU0PLGVL._SL160_.jpg" style="border: none;" /></a></div>
<div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
<div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4382055784/sackoh71-22/" target="_blank" >知的思考の技術―考えるフレームを強化する7つのステップの思考術 (SANNOマネジメントコンセプトシリーズ)</a></p>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">産業能率大学総合研究所知的思考の技術研究プロジェクト 産能大出版部 2007-12-13    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4382055784/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>久しぶりにヒットした本です。</p>
<p>思考のプロセスに関しては、本書を叩き込めば網羅されているのではないかと思うほど濃いです。</p>
<h2>目的探索の思考</h3>
<ol>
<li>考え方のポイント
<ul>
<li>考えることを疎かにしがちな思考や行動の目的を明らかにするために、何かを始めるときには自分自身に対して「そもそも何のために？」という問いかけを行うことが大切である。</li>
</ul>
</li>
<li>陥りやすい失敗
<ul>
<li>そもそも目的を考えていない。</li>
<li>目的は考えてはいるが妥当性が引くい。</li>
<li>かつては高かった目的の妥当性がいつしか失われてしまった。</li>
</ul>
</li>
<li>主なツール
<ul>
<li>状況の構造化図</li>
<li>目的の連鎖</li>
</ul>
</li>
</ol>
<h2>観察の思考</h3>
<ol>
<li>考え方のポイント
<ul>
<li>心理的要因や発信者の意図に惑わされない。</li>
<li>偏りなく多面的に物事を捉える。</li>
</ul>
</li>
<li>陥りやすい失敗
<ul>
<li>バイアスによる阻害。</li>
<li>他社の主張をそのまま受け入れてしまう。</li>
<li>ウソに騙されてしまう。</li>
</ul>
</li>
<li>主なツール
<ul>
<li>4分割マトリックス</li>
</ul>
</li>
</ol>
<h2>発想の思考</h3>
<ol>
<li>考え方のポイント
<ul>
<li>豊かなアイデアを得るためには、3つのブロックで思考を足止めされることなく自ら積極的に思考し、「量が質を生む」の原則を貫きとおすことが大切である。</li>
<li>偏りなく多面的に物事を捉える。</li>
</ul>
</li>
<li>陥りやすい失敗
<ul>
<li>アイデアが天から降ってくるのを期待して、思考することなく、ただ待ち続けてしまう。</li>
<li>発散思考と収束思考を同時に使って、思考の効率が低下する。</li>
<li>認識、感情、文化の3つのブロックに足止めされてしまい、モノの見方・考え方が偏ってしまう。</li>
</ul>
</li>
<li>主なツール
<ul>
<li>ブレイン・ストーミング法（BS法）</li>
<li>属性列挙法</li>
<li>チェックリスト法</li>
<li>欠点列挙法</li>
<li>希望点列挙法</li>
<li>ゴードン法</li>
<li>NM法</li>
</ul>
</li>
</ol>
<h2>分類の思考</h3>
<ol>
<li>考え方のポイント
<ul>
<li>分類とは、思考対象となる情報をその思考の目的に従って「違う」部分で分け、「同じ」部分でくくること。</li>
<li>分類することによって、わからないことがわかるようになる。複雑なものが単純化され、あいまいな状況が解明され、物事が整理されて使いやすくなるといったさまざまなメリットを享受できる。</li>
</ul>
</li>
<li>陥りやすい失敗
<ul>
<li>事象や問題を漠然と捉えてしまう。</li>
<li>思考の目的にあわない分類基準を設定してしまう。</li>
<li>分ける際にモレやダブリがある。</li>
</ul>
</li>
<li>主なツール
<ul>
<li>目的にあった分類基準を設定する。</li>
<li>抽象水準を統一する。</li>
<li>モレなくダブリなく分ける。（MECE）</li>
</ul>
</li>
</ol>
<h2>構造化の思考</h3>
<ol>
<li>考え方のポイント
<ul>
<li>構造化とは、思考対象について分類した構成要素（部分）がどのような関係（つながり方）にあるのかを明らかにし、思考対象（全体）の意味を理解すること。</li>
<li>この世の中に存在するものは、さまざまな要素が依存しあい、影響をあたえあい、関連しあって存在している。何かを知ろうとして思考するためには、それらすべての関係を押さえなければならない。</li>
</ul>
</li>
<li>陥りやすい失敗
<ul>
<li>組織設計、企画書、プレゼンテーションなど、あらゆるビジネスシーンで分類することはできても、「くくる」「まとめる」という構造化の思考が弱い。</li>
<li>部分は理解できるが、全体として何を伝えたいのかわからなくなってしまう。</li>
<li>人は「木を見て森を見ないタイプ」と「森を見て木を見ないタイプ」に分かれる。木も森も両方捉えるものの見方ができない。</li>
</ul>
</li>
<li>主なツール
<ul>
<li>ツリー構造</li>
<li>マトリックス構造</li>
<li>プロセス構造</li>
</ul>
</li>
</ol>
<h2>意思決定の思考</h3>
<ul>
<li>意思決定には、とっさの意思決定とじっくり考える意思決定がある。</li>
<li>特にとっさの意思決定の際には、意思決定の先送りはしない。</li>
<li>じっくり考える意思決定から&#8221;正しい反応パッケージ&#8221;を複数用意しておく。</li>
<li>反復訓練により迅速に”正しい反応パッケージ”を選択できるようにしておく。</li>
</ul>
<h2>表現の思考</h3>
<ul>
<li>思考の幅を広げるためには表現の手段を多く持つこと。</li>
<li>どのようなことでも言葉で表現（文章に書く）することを習慣付けること。</li>
<li>数字で表現することに日頃から慣れておくこと。</li>
<li>図解は見栄えではなく、シンプルでわかりやすいこと。</li>
</ul>


知的思考の技術―考えるフレームを強化する7つのステップの思考術

<p>テキストボックスを分けずに、入力パターンを制御してくれるjQueryプラグインformatter.jsを使ってみた。</p>
<p>生年月日や電話番号など、テキストボックスを分けずに1つでも意図した値を得ることができそうと思ったのがきっかけ。</p>
<p>&nbsp;</p>
<p>まずはこちらからソースをダウンロード</p>
<p><a href="https://github.com/firstopinion/formatter.js" target="_blank">https://github.com/firstopinion/formatter.js</a></p>
<p>ファイルがいろいろ入っているが、jQueryとformatter.jsを読みこめば良い。</p>
<p>あとは入力フォームを用意して(maxlengthは設定したほうが良い)</p>

		<div id="crayon-64953fd593468984901578" 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;input type="text" class="input" id="serial" maxlength="19"&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-64953fd593468984901578-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-64953fd593468984901578-1"><span class="crayon-r ">&lt;input </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"text"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"input"</span><span class="crayon-h"> </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"serial"</span><span class="crayon-h"> </span><span class="crayon-e ">maxlength</span>=<span class="crayon-s ">"19"</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>JSを実行する。</p>

		<div id="crayon-64953fd59346c407465045" 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()
{
	var serial = document.getElementById('serial');
	if ( serial )
	{
		new Formatter( serial,
		{
			'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}'
		});
	}
});</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-64953fd59346c407465045-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59346c407465045-2">2</div><div class="crayon-num" data-line="crayon-64953fd59346c407465045-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59346c407465045-4">4</div><div class="crayon-num" data-line="crayon-64953fd59346c407465045-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59346c407465045-6">6</div><div class="crayon-num" data-line="crayon-64953fd59346c407465045-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59346c407465045-8">8</div><div class="crayon-num" data-line="crayon-64953fd59346c407465045-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59346c407465045-10">10</div><div class="crayon-num" data-line="crayon-64953fd59346c407465045-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-64953fd59346c407465045-1"><span class="crayon-sy">$</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-r">document</span><span class="crayon-h"> </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-h"> </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-64953fd59346c407465045-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59346c407465045-3"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">serial</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">'serial'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59346c407465045-4"><span class="crayon-h">	</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">serial</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64953fd59346c407465045-5"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59346c407465045-6"><span class="crayon-h">		</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Formatter</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">serial</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd59346c407465045-7"><span class="crayon-h">		</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59346c407465045-8"><span class="crayon-h">			</span><span class="crayon-s">'pattern'</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'{{9999}}-{{9999}}-{{9999}}-{{9999}}'</span></div><div class="crayon-line" id="crayon-64953fd59346c407465045-9"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59346c407465045-10"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd59346c407465045-11"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>パターンは{{}}で囲う必要があり、それぞれ以下のように指定する。</p>
<p>数字(0-99) → 9</p>
<p>英字(A-Za-z) → a</p>
<p>全て(A-Za-z0-9) → *</p>
<p>&nbsp;</p>
<p>デモはこちら</p>
<p><a class="demo" href="/demo/hoshino/48/test.html">demo</a></p>
<p>&nbsp;</p>
<p>しかし、使ってみてわかったが、2つ大きな欠点がある。</p>
<p>&nbsp;</p>
<p>1. 日本語が使えない</p>
<p>姓名の間にスペースを入れるなどのフォーマットはできない。</p>
<p>それは良いとしても、記号や空白文字列も使えないので、結構困る。</p>
<p>正規表現が使えれば良いのだが、対応してないみたい。</p>
<p>&nbsp;</p>
<p>2. 桁数がフレキシブルじゃない</p>
<p>例えば日本の電話番号だと</p>
<p>03-…の場合もあれば080…の場合もある。</p>
<p>しかしこちらのプラグインでは桁数は予め決めた桁数からの過不足は認められない。</p>
<p>なので使うのであれば完全に桁数が決まっていなければならない。</p>
<p>&nbsp;</p>
<p>用途は限られるが、特にシリアルなどはわかりやすいので使ってみようと思う。</p>

入力パターンをかっこよく制御してくれるjQueryプラグイン formatter.js

<p>Photoshopを使い始めて数年経ちましたが、</p>
<p>最近になってようやく知った、便利なショートカットを少しだけご紹介します。</p>
<p>&nbsp;</p>
<h2>移動ツール選択中に「ctrl(command) + 左クリック」</h3>
<p>このショートカットを使うと、Illustratorでオブジェクトを選択するときと同じように、</p>
<p>クリックした場所にある要素のレイヤーを選択することができます。</p>
<p>大量のレイヤーの中から、目的の要素があるレイヤーを選択するのに便利です。</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss00.jpg" width="656" height="525" /></p>
<p>↓</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss01.jpg" width="656" height="525" /></p>
<p>&nbsp;</p>
<h2>移動ツール選択中に「ctrl(command) + J」</h3>
<p>このショートカットを使うと、選択しているレイヤーを複製することができます。</p>
<p>同じ要素を多数複製したりする場合に便利です。</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss02.jpg" width="656" height="525" /></p>
<p>&nbsp;</p>
<p>覚えるととても便利なショートカットですので、</p>
<p>使ったことのない方は、是非使ってみてください。</p>


ひそかに便利なPhotoshopのショートカット（レイヤー系）

MATCH Against In Boolean Mode

<p>こんなものがあるなんて今まで知りませんでした・・・</p>
<p>なぜ知らなかったのでしょう。勉強不足ですね。。。</p>
<p>&nbsp;</p>
<p>今日紹介するのは、photoshopの「CSS3Ps」というエクステンションです。</p>
<p>&nbsp;</p>
<p>シェイプレイヤーやテキストレイヤーのをcssで書き出しくれるという代物です。</p>
<p>もちろん名前の通りcss3対応です。</p>
<p>&nbsp;</p>
<p>どんな風に書きだされるのかが気になる所かと思いますが、</p>
<p>順をおって説明していきます。</p>
<p>&nbsp;</p>
<h2>まずはダウンロード</h3>
<p>&nbsp;<br />
まずは下記URLからダウンロードします。</p>
<p><a href="http://css3ps.com/" target="_blank">http://css3ps.com/</a></p>
<p>右上の「free download」をクリックです！<br />
&nbsp;</p>
<h2>ダウンロードしたファイルを開く</h3>
<p>ダウンロードしたファイルを開くと勝手にphotoshopへインストールしてくれます。</p>
<p>以下のような画面が立ち上がると思います。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-3568" alt="スクリーンショット 2013-11-12 13.47.09" src="/uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5.png" width="550" height="408" srcset="/uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5.png 825w, /uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5-300x222.png 300w, /uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5-228x169.png 228w" sizes="(max-width: 550px) 100vw, 550px" /></p>
<p>&nbsp;</p>
<h2>photoshopを開いて、エクステンションを表示</h3>
<p>&nbsp;<br />
もし今まで開いていたのであれば、<br />
１回終了してからまた開いてください。</p>
<p>そうすると、ウィンドウ &gt; エクステンションの所にcss3Psと表示されるのでクリックします。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3569" alt="スクリーンショット 2013-11-12 14.20.17（2）" src="/uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-1024x201.png" width="607" height="119" srcset="/uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-1024x201.png 1024w, /uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-300x59.png 300w, /uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-228x44.png 228w, /uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2.png 1220w" sizes="(max-width: 607px) 100vw, 607px" /></p>
<p>&nbsp;</p>
<h2>シェイプ選んでクリック</h3>
<p>シェイプレイヤーを選択状態にし、下の画面のCSS3Psの箇所をクリックします。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3570" alt="スクリーンショット 2013-11-12 14.00.57" src="/uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-1024x641.png" width="600" height="375" srcset="/uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-1024x641.png 1024w, /uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-300x188.png 300w, /uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-228x142.png 228w, /uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953.png 1241w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>&nbsp;</p>
<h2>cssの書きだしが完了！</h3>
<p>新規ブラウザウィンドウが立ち上がり、数秒待つと、<br />
cssが表示されます。<br />
そちらをコピーして後は自由に使用すると言った感じですね。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3571" alt="スクリーンショット 2013-11-12 14.04.49" src="/uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-1024x569.png" width="601" height="334" srcset="/uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-1024x569.png 1024w, /uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-300x166.png 300w, /uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-228x126.png 228w, /uploads-archive/2013/11/9571ea2391a4939314df01247606dc99.png 1191w" sizes="(max-width: 601px) 100vw, 601px" /></p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3572" alt="ページの画像" src="/uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-1024x571.jpg" width="601" height="335" srcset="/uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-1024x571.jpg 1024w, /uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-300x167.jpg 300w, /uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-228x127.jpg 228w, /uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac.jpg 1201w" sizes="(max-width: 601px) 100vw, 601px" /></p>
<p>&nbsp;</p>
<h2>複数も可能</h3>
<p>複数のレイヤーを選択して書き出すことも可能です。</p>
<p>以下のような形で書きだすと、<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3573" alt="スクリーンショット 2013-11-12 14.05.10" src="/uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-1024x639.png" width="601" height="375" srcset="/uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-1024x639.png 1024w, /uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-300x187.png 300w, /uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-228x142.png 228w, /uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3.png 1244w" sizes="(max-width: 601px) 100vw, 601px" /></p>
<p>&nbsp;</p>
<p>以下の様に表示されます。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3574" alt="ページの画像2" src="/uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-706x1024.jpg" width="527" height="764" srcset="/uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-706x1024.jpg 706w, /uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-206x300.jpg 206w, /uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-228x330.jpg 228w, /uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428.jpg 1186w" sizes="(max-width: 527px) 100vw, 527px" /></p>
<p>レイヤー重ねていても、それぞれのレイヤーを個々に書き出してくれます。</p>
<p>どこまでcssで書き出しくれるかもサイトに載っておりますので、</p>
<p>ぜひ使ってみて下さい！</p>
<p>&nbsp;<br />
<a href="http://css3ps.com/" target="_blank">http://css3ps.com/</a><br />
&nbsp;</p>


知らなかった！photoshopでcssを書き出してくれる無料のエクステンション「CSS3Ps」

<p>今日はMySQLの外部参照について話したいと思います。<br />
慣れないキーワードがちょっと出てきますが、安心してください。<br />
MySQLの外部参照はこれだけで覚えます。</p>
<h2>キーワード</h3>
<p>CONSTRAINT<br />
REFERENCES<br />
RESTRICT<br />
NO ACTION<br />
CASCADE<br />
SET NULL</p>
<h2>基本用法</h3>
<p></p>

		<div id="crayon-64953fd593043722562159" 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;">
CREATE TABLE 子テーブル名(子カラム名 データ型,
  CONSTRAINT キー名 FOREIGN KEY (子カラム名)
  REFERENCES 親テーブル名(親カラム名)
  ON DELETE reference_option
  ON UPDATE reference_option
) ENGINE=InnoDB;</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-64953fd593043722562159-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593043722562159-2">2</div><div class="crayon-num" data-line="crayon-64953fd593043722562159-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593043722562159-4">4</div><div class="crayon-num" data-line="crayon-64953fd593043722562159-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593043722562159-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd593043722562159-1"><span class="crayon-e">CREATE </span><span class="crayon-i">TABLE</span><span class="crayon-h"> </span>子テーブル名<span class="crayon-sy">(</span>子カラム名<span class="crayon-h"> </span>データ型<span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593043722562159-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">CONSTRAINT</span><span class="crayon-h"> </span>キー名<span class="crayon-h"> </span><span class="crayon-e">FOREIGN </span><span class="crayon-e">KEY</span><span class="crayon-h"> </span><span class="crayon-sy">(</span>子カラム名<span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64953fd593043722562159-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">REFERENCES</span><span class="crayon-h"> </span>親テーブル名<span class="crayon-sy">(</span>親カラム名<span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593043722562159-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">ON </span><span class="crayon-e">DELETE </span><span class="crayon-e">reference_option</span></div><div class="crayon-line" id="crayon-64953fd593043722562159-5"><span class="crayon-e">&nbsp;&nbsp;</span><span class="crayon-e">ON </span><span class="crayon-e">UPDATE </span><span class="crayon-i">reference_option</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593043722562159-6"><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i">ENGINE</span>=<span class="crayon-i">InnoDB</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>reference_option</h3>
<h3>RESTRICT</h4>
<p>ON DELETE句やON UPDATE句にRESTRICTを指定した場合は、親テーブルに対して更新や削除を行うとエラーが発生します。RESTRICTはON DELETE句やON UPDATE句を明示的に指定しなかった場合に設定される値です。</p>
<h3>NO ACTION</h4>
<p>ON DELETE句やON UPDATE句にNO ACTIONを指定した場合は、親テーブルに対して更新や削除を行うとエラーが発生します。MySQLにおいてはNO ACTIONとRESTRICTは同じ挙動となります。</p>
<h3>CASCADE</h4>
<p>ON DELETE句やON UPDATE句にCASCADEを指定した場合は、親テーブルに対して更新を行うと子テーブルで同じ値を持つカラムの値も合わせて更新されます。また親テーブルに対して削除を行うと子テーブルで同じ値を持つデータが削除されます。</p>
<h3>SET NULL</h4>
<p>ON DELETE句やON UPDATE句にSET NULLを指定した場合は、親テーブルに対して更新を行うと子テーブルで同じ値を持つカラムの値がNULLに更新されます。また親テーブルに対して削除を行うと子テーブルで同じ値を持つデータのカラムの値がNULLに更新されます。</p>
<h2>参考リンク</h3>
<p><a href="http://dev.mysql.com/doc/refman/5.1/ja/innodb-foreign-key-constraints.html" target="_blank">http://dev.mysql.com/doc/refman/5.1/ja/innodb-foreign-key-constraints.html</a><br />
<a href="http://www.dbonline.jp/mysql/table/index12.html" target="_blank">http://www.dbonline.jp/mysql/table/index12.html</a></p>

【MySQL】外部参照について

<p>文章はほとんどのHPにあると思いますが、</p>
<p>その文章でちょっと悩ませるのが折り返しについてです。</p>
<p>&nbsp;</p>
<p>紙とは違い完全に思い通りにはならないものなのですが、</p>
<p>cssでいろいろな設定をすることができます。</p>
<p>&nbsp;</p>
<p>その主要なものが以下になります。</p>
<h3>word-wrap</h4>
<p><strong>normal</strong><br />
単語の途中で改行はせず、必要に応じて表示範囲を拡大。<br />
<strong>break-word</strong><br />
必要に応じて単語の途中で改行</p>
<h3>word-break</h4>
<p><strong>normal</strong><br />
英語等は単語の途中では改行せず、単語で改行。日本語等は表示範囲に合わせて改行され、単語の途中で改行されることもある。<br />
<strong>break-all</strong><br />
言語に関係なく表示範囲に合わせて改行。単語の途中で改行されることもある。<br />
<strong>keep-all</strong><br />
言語に関係なく単語の途中では改行せず、単語で改行。</p>
<h3>white-space</h4>
<p><strong>normal</strong><br />
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合には、その大きさに応じて自動的に改行。<br />
<strong>pre</strong><br />
ソース中の連続する半角スペース・タブ・改行を、そのまま表示。<br />
<strong>nowrap</strong><br />
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合にも、自動的に改行されない。</p>
<p>&nbsp;</p>
<p>となっておりますが、</p>
<p>言葉で説明されてもあまりピンとこないと思いますので、</p>
<p>英語と日本語で実際にhtmlで作成してみましたので、</p>
<p>ご覧ください。<br />
<a class="demo" href="/demo/abe/35/" target="_blank">DEMO</a></p>
<p>あまり変わらないような感じがしますね・・・</p>
<p>word-breakのbreal-allとwhite-spaceのpreが目に見えて違いますが、</p>
<p>おそらくhtmlの状況によって変わってくるのだと思います。</p>
<p>簡単な参考にしてください。</p>
<p>&nbsp;</p>
<p>ちなみに、DEMOに入ってるテキストは、</p>
<p>以下のサイトで生成されたものを使用しています。</p>
<p>テキスト何入れようかと迷った時はいいですね！</p>
<p>日本語<br />
<a href="http://www.blindtextgenerator.com/lorem-ipsum" target="_blank">http://www.blindtextgenerator.com/lorem-ipsum</a></p>
<p>英語<br />
<a href="http://lipsum.sugutsukaeru.jp/index.cgi" target="_blank">http://lipsum.sugutsukaeru.jp/index.cgi</a></p>


cssで制御する折り返しのまとめ

<p>&nbsp;</p>
<p>Android4.4が発表されましたので、備忘録を兼ねてまとめてみました。</p>
<p>個人としては、Nexus7（2013）を初めて本格的に保有するAndroid端末として購入しました。</p>
<p>ipadも保有しておりますが、一言で比較をすると、Android断片化の影響を強く受けていると感じました。</p>
<p>ipadであれば、画面サイズが決まっているため、アプリにしろWebにしろ、最適化されたサイズ操作性というものが用意されていることが多かったのですが、Androidの7インチ端末となると、アプリがスマートフォンの比率で表示されたりすることがあるため、異様にボタンの類が大きかったり、WebではPCサイトのまま表示されると7インチでは非常に小さくなってしまったりと、CPUスペックも解像度も十分で動作は申し分ないのですが、UXの部分で厳しさを感じました。</p>
<p>上記の感想を抱いていただけに、Android4.4の発表は非常に興味深いものでした。</p>
<p>&nbsp;</p>
<p>Nexus5と同時に発表されたものですが、主なポイントは下記になります。</p>
<ul>
<li>低スペックの端末でも動作可能</li>
<li>マルチタスキングの高速化</li>
<li>統合されたメッセージアプリHungout</li>
<li>絵文字の改良</li>
</ul>
<p>ここで、述べた興味深い内容というのが、低スペックの端末でも動作が可能というところです。</p>
<p>新興国ではいまだにメモリ512MBなど日本の主流端末の1/4ほどのスペックが多いとのことですが、そのような端末でも動作が可能になるように隅々まで効率化と最適化をしたとのことです。</p>
<p>バージョンアップをするにつれて、機能が増え、表現がリッチになり要求スペックを挙げていき、低スペック端末を切り捨てていくというのがソフトウェア開発の主たる流れなのかと思っていましたが、Googleのこの判断は素晴らしいと思います。</p>
<p>私がフラッグシップ端末を買って、感じていた断片化をまず、GoogleがOSレベルで収束をさせようとしているため、今後に期待です。</p>
<p>&nbsp;</p>
<h2><span style="font-size: 1em;">アップデートの提供は18ヶ月以内の発売端末に限る</span></h3>
<p>また 、リリース時期について、確認をしていたのですが、驚くべきことが分かりました。</p>
<p>GoogleのOSアップデートの提供基準が18ヶ月以内に発売された端末のみということです。</p>
<p>下記URLによると、GalaxyNEXUSは対象外になるということです。</p>
<p>断片化を取り除きつつもアップデートが18ヶ月以内というのは何とも矛盾するポリシーになっていますが、ここも今後に期待したいところです。</p>
<p><a href="https://support.google.com/nexus/answer/3507867?hl=ja&amp;ref_topic=3415518" target="_blank">https://support.google.com/nexus/answer/3507867?hl=ja&amp;ref_topic=3415518</a></p>
<p>&nbsp;</p>
<h2>参考サイト</h3>
<p><a href="http://www.android.com/versions/kit-kat-4-4/" target="_blank">http://www.android.com/versions/kit-kat-4-4/</a></p>
<p><a href="http://www.android.com/versions/kit-kat-4-4/" target="_blank">http://jp.techcrunch.com/2013/11/01/20131031android-4-4-kitkat-google/</a></p>
<p><a href="http://jp.techcrunch.com/2013/11/01/20131031android-4-4-kitkat-google/" target="_blank">http://smhn.info/201311-what-change-android-kitkat </a></p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2013/11/27

2013/11/26

2013/11/26

2013/11/26

2013/11/21

2013/11/21

2013/11/21

2013/11/21

2013/11/21

2013/11/19

2013/11/13

2013/11/13

2013/11/13

2013/11/13

2013/11/12

2013/11/12

2013/11/07

2013/11/07