<p>いわゆるFlexibleBoxとかFlexBoxとか呼ばれてるみたいなんですが、こちらまだ実践で使ったことがないので、試しに使ってみました。</p>
<p>こちらはcss3なので最新のブラウザしか対応してなくて、IE９ですら対応してないようなので、実践には向かないかと思います。</p>
<p>こちらはその名の通り、レイアウトをフレキシブルにできるもので、今までカラムをfloatを使っていたものをこちらのプロパティでできるというものです。<br />
考え方としてはtableと似てると思います。</p>
<p><a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#propdef-justify-content" target="_blank">CSS Flexible Box Layout Module Level 1</a></p>
<p>とりあえずデモがありますのでそちらをご覧ください。</p>
<p>グロナビと、メインビジュアル下のコンテンツに使用しています。</p>
<p><a href="/demo/abe/50/" class="demo" target="_blank">DEMO</a></p>
<p>htmlは以下のようになります。</p>
<p></p>

		<div id="crayon-64954015800e3321432114" 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 class="gnavi"&gt;
            	&lt;li class="navi01"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi02"&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi03"&gt;&lt;a href="#"&gt;Service&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi04"&gt;&lt;a href="#"&gt;Work&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi05"&gt;&lt;a href="#"&gt;Recruit&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi06"&gt;&lt;a href="#"&gt;Blog&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-64954015800e3321432114-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-2">2</div><div class="crayon-num" data-line="crayon-64954015800e3321432114-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-4">4</div><div class="crayon-num" data-line="crayon-64954015800e3321432114-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-6">6</div><div class="crayon-num" data-line="crayon-64954015800e3321432114-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-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-64954015800e3321432114-1"><span class="crayon-r ">&lt;ul </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"gnavi"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e3321432114-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi01"</span><span class="crayon-r ">&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-i ">Home</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64954015800e3321432114-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi02"</span><span class="crayon-r ">&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-i ">About us</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-64954015800e3321432114-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi03"</span><span class="crayon-r ">&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-i ">Service</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64954015800e3321432114-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi04"</span><span class="crayon-r ">&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-i ">Work</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-64954015800e3321432114-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi05"</span><span class="crayon-r ">&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-i ">Recruit</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64954015800e3321432114-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi06"</span><span class="crayon-r ">&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-i ">Blog</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-64954015800e3321432114-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/ul&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>これに対してcssは、</p>
<p></p>

		<div id="crayon-64954015800e8318036862" 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;">
.gnavi
{
	margin-top: -3px;
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
    -webkit-justify-content: space-around;
}
.gnavi li
{
	flex: auto;
    -webkit-flex: auto;
	border-top: 3px solid #444;
	border-bottom: 3px solid #fff;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	
}</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-64954015800e8318036862-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-2">2</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-3">3</div><div class="crayon-num crayon-marked-num crayon-top crayon-striped-num" data-line="crayon-64954015800e8318036862-4">4</div><div class="crayon-num crayon-marked-num" data-line="crayon-64954015800e8318036862-5">5</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-64954015800e8318036862-6">6</div><div class="crayon-num crayon-marked-num crayon-bottom" data-line="crayon-64954015800e8318036862-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-8">8</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-10">10</div><div class="crayon-num crayon-marked-num crayon-top" data-line="crayon-64954015800e8318036862-11">11</div><div class="crayon-num crayon-marked-num crayon-bottom crayon-striped-num" data-line="crayon-64954015800e8318036862-12">12</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-14">14</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-16">16</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-18">18</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-64954015800e8318036862-1"><span class="crayon-k ">.gnavi</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-3"><span class="crayon-h">	</span><span class="crayon-e ">margin-top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">-3px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-striped-line" id="crayon-64954015800e8318036862-4"><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 ">flex</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line" id="crayon-64954015800e8318036862-5"><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 ">-webkit-flex</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-64954015800e8318036862-6"><span class="crayon-h">	</span><span class="crayon-e ">justify-content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">space-around</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-bottom" id="crayon-64954015800e8318036862-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">-webkit-justify-content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">space-around</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-8"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-9"><span class="crayon-k ">.gnavi li</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-10"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line crayon-top" id="crayon-64954015800e8318036862-11"><span class="crayon-h">	</span><span class="crayon-e ">flex</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-bottom crayon-striped-line" id="crayon-64954015800e8318036862-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">-webkit-flex</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-13"><span class="crayon-h">	</span><span class="crayon-e ">border-top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">3px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#444</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-14"><span class="crayon-h">	</span><span class="crayon-e ">border-bottom</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">3px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#fff</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-15"><span class="crayon-h">	</span><span class="crayon-e ">-webkit-transition</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">all</span><span class="crayon-h"> </span><span class="crayon-i ">0.3s</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-16"><span class="crayon-h">	</span><span class="crayon-e ">-moz-transition</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">all</span><span class="crayon-h"> </span><span class="crayon-i ">0.3s</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-17"><span class="crayon-h">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-18"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>親要素に<strong>display: flex;</strong>を設定するだけで横並びレイアウトが簡単にできます！<br />
あとは、<strong>justify-contentやflex</strong>の値を変更すると、幅や余白の調整ができます。</p>
<p>ちなみに、<strong>justify-content</strong>のプロパティとイメージは以下になります。<br />
<img decoding="async" src="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/images/flex-pack.svg"><br />
参照：<a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#propdef-justify-content" target="_blank">CSS Flexible Box Layout Module Level 1</a></p>
<p>もっと複雑かつ細かく設定できるのですが、本記事ではここまでとさせていただきます。<br />
横並びだけでなく、縦の並びもできるようで、縦中央や縦均等で並べたり、今までなかなかできなかったことが簡単にできるようにもなります。</p>
<p>その辺はまたいずれご説明したいと思います。</p>

css3のFlexible Box Layout Moduleで横並びレイアウトが簡単に！

<p>サブクエリを使って条件を抽出していきます。</p>
<h2>サブクエリとは</h2>
<p>SQL文の中にSELECT文を埋め込み、抽出条件として利用することを可能としています。<br />
SELECT文の中に、SELECT文が入る「入れ子」になります。<br />
サブクエリは()で囲って使用します。</p>

		<div id="crayon-649540157feed601029454" 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 列名1, 列名2, ...
FROM テーブル名
WHERE 列名 = ( 
    SELECT 
    列名 
    FROM 
    テーブル名 
    [WHERE 条件式など]
)</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-649540157feed601029454-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157feed601029454-2">2</div><div class="crayon-num" data-line="crayon-649540157feed601029454-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157feed601029454-4">4</div><div class="crayon-num" data-line="crayon-649540157feed601029454-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157feed601029454-6">6</div><div class="crayon-num" data-line="crayon-649540157feed601029454-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157feed601029454-8">8</div><div class="crayon-num" data-line="crayon-649540157feed601029454-9">9</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-649540157feed601029454-1"><span class="crayon-i">SELECT</span><span class="crayon-h"> </span>列名<span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-h"> </span>列名<span class="crayon-cn">2</span><span class="crayon-sy">,</span><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-649540157feed601029454-2"><span class="crayon-i">FROM</span><span class="crayon-h"> </span>テーブル名</div><div class="crayon-line" id="crayon-649540157feed601029454-3"><span class="crayon-i">WHERE</span><span class="crayon-h"> </span>列名<span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157feed601029454-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">SELECT</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-649540157feed601029454-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>列名<span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157feed601029454-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">FROM</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-649540157feed601029454-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>テーブル名<span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157feed601029454-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">[</span><span class="crayon-i">WHERE</span><span class="crayon-h"> </span>条件式など<span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-649540157feed601029454-9"><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>WHERE以下の（）で示した部分がサブクエリです．実行の際にはまずサブクエリが解決され，値が抽出されます．次にメインのクエリが解決され，サブクエリから返された値と等しい値を持つレコードが選択されます．上記ではサブクエリとメインのクエリを「=」で結んでいますが，そのほかにも以下の演算子が使用できます．</p>
<table>
<tbody>
<tr>
<th>比較演算子</th>
<th>説明</th>
</tr>
<tr>
<td class="code">=</td>
<td>等しい</td>
</tr>
<tr>
<td class="code">&lt;</td>
<td>小さい</td>
</tr>
<tr>
<td class="code">&gt;</td>
<td>大きい</td>
</tr>
<tr>
<td class="code">&lt;=</td>
<td>以下</td>
</tr>
<tr>
<td class="code">&gt;=</td>
<td>以上</td>
</tr>
<tr>
<td class="code">&lt;&gt;, !=</td>
<td>等しくない</td>
</tr>
</tbody>
</table>
<h2>サブクエリを使用したSQLサンプル</h2>
<p>以下のデータを使用してサブクエリを使って行います。</p>
<table border="1" cellspacing="0" cellpadding="4">
<caption>User</caption>
<tbody>
<tr>
<th>UserID</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>嶋田</td>
</tr>
<tr>
<td>2</td>
<td>山城</td>
</tr>
<tr>
<td>3</td>
<td>後藤</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<table border="1" cellspacing="0" cellpadding="4">
<caption>Order</caption>
<tbody>
<tr>
<th>OrderID</th>
<th>OrderItem</th>
<th>OrderUserID</th>
</tr>
<tr>
<td>1</td>
<td>Pコート</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>ダッフルコート</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>ダウンジャケット</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>モッズコート</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>N-2Bブルゾン</td>
<td>2</td>
</tr>
</tbody>
</table>
<p>この場合、例えば「嶋田」さんが注文した商品をリストアップしたい、というときには、<br />
・まず、テーブル「User」を検索して「嶋田」という名前のユーザーのIDを取得<br />
・取得したユーザーのIDを元に「Order」を検索して、注文した商品リストを取得<br />
という手順になるわけですが、この処理をサブクエリを使うことによって、以下のようにできます。<br />
SQL</p>

		<div id="crayon-649540157fef2996090447" 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 Order.OrderID,Order.OrderItem
from Order
where Order.OrderUserID = (
     select User.UserID
     from User
     where User.Name= '嶋田');</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-649540157fef2996090447-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fef2996090447-2">2</div><div class="crayon-num" data-line="crayon-649540157fef2996090447-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fef2996090447-4">4</div><div class="crayon-num" data-line="crayon-649540157fef2996090447-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fef2996090447-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-649540157fef2996090447-1"><span class="crayon-e">select </span><span class="crayon-i">Order</span><span class="crayon-sy">.</span><span class="crayon-i">OrderID</span><span class="crayon-sy">,</span><span class="crayon-i">Order</span><span class="crayon-sy">.</span><span class="crayon-e">OrderItem</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fef2996090447-2"><span class="crayon-e">from </span><span class="crayon-e">Order</span></div><div class="crayon-line" id="crayon-649540157fef2996090447-3"><span class="crayon-e">where </span><span class="crayon-i">Order</span><span class="crayon-sy">.</span><span class="crayon-i">OrderUserID</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fef2996090447-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e">select </span><span class="crayon-i">User</span><span class="crayon-sy">.</span><span class="crayon-e">UserID</span></div><div class="crayon-line" id="crayon-649540157fef2996090447-5"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e">from </span><span class="crayon-e">User</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fef2996090447-6"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e">where </span><span class="crayon-i">User</span><span class="crayon-sy">.</span><span class="crayon-i">Name</span>=<span class="crayon-h"> </span><span class="crayon-s">'嶋田'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><b>結果</b></p>
<table>
<tbody>
<tr>
<th>OrderID</th>
<th>OrderItem</th>
</tr>
<tr>
<td>3</td>
<td class="col-number">ダウンジャケット</td>
</tr>
<tr>
<td>4</td>
<td class="col-number">モッズコート</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Mysql サブクエリを使ったSELECT文　

<p>前々からデスクトップ通知(desktop notifications)をしてくるWebサービスが気になっており、</p>
<p>どうやってやっているのかを調べたところ、すごく簡単に実装できたのでメモ</p>
<p>&nbsp;</p>
<p>調べると色々とやり方があるようだったのだが、ブラウザによって方法が異なり、ちゃんとやるのは難しそうだったので以下のプラグインを使用。</p>
<p>&nbsp;</p>
<p>&lt;a href=&#8221;https://github.com/ttsvetko/HTML5-Desktop-Notifications&#8221; target=&#8221;_blank&#8221;&gt;desktop-notify-min.js&lt;/a&gt;</p>
<p>&nbsp;</p>
<p>サンプルなどがangularjsで書かれており、社内では少し敷居が高そうだったのでjQueryで書きなおした。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/54/" target="_blank">デモ</a></p>
<p>&nbsp;</p>
<h2>重要な関数たち</h2>
<p>1. permissionLevel()</p>
<p>デスクトップ通知に対するユーザーの設定が帰ってくる。</p>
<p>基本的には以下の3つぷらすその他。</p>
<p>notify.PERMISSION_GRANTED → 許可</p>
<p>notify.PERMISSION_DEFAULT → デフォルト(=全部許可、サイトごとに設定、全部拒否など)</p>
<p>notify.PERMISSION_DENIED → 全部拒否</p>
<p>&nbsp;</p>
<p>戻り値は上記3つと比較する。</p>
<p>デモの例</p>

		<div id="crayon-649540157fcf1865493805" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
function setText()
{
	if ( permissionLevel == notify.PERMISSION_GRANTED )
	{
		$( '#notificationLevel' ).html( 'デスクトップ通知が許可されている環境です' );
	}
	else if ( permissionLevel == notify.PERMISSION_DEFAULT )
	{
		$( '#notificationLevel' ).html( 'デスクトップ通知が許可されていない環境です。&lt;br /&gt;ここをクリックして許可して下さい' );
	}
	else if ( permissionLevel == notify.PERMISSION_DENIED )
	{
		$( '#notificationLevel' ).html( 'デスクトップ通知を完全拒否しています。&lt;br /&gt;ブラウザの設定で許可して下さい' );
	}
	else
	{
		$( '#notificationLevel' ).html( 'よくわからないので出てってください' );
	}	
}</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-649540157fcf1865493805-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-2">2</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-4">4</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-6">6</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-8">8</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-10">10</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-12">12</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-14">14</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-16">16</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fcf1865493805-18">18</div><div class="crayon-num" data-line="crayon-649540157fcf1865493805-19">19</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-649540157fcf1865493805-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">setText</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-3"><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">permissionLevel</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-i">notify</span><span class="crayon-sy">.</span><span class="crayon-i">PERMISSION_GRANTED</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-4"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-5"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#notificationLevel'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'デスクトップ通知が許可されている環境です'</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-649540157fcf1865493805-6"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-7"><span class="crayon-h">	</span><span class="crayon-st">else</span><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">permissionLevel</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-i">notify</span><span class="crayon-sy">.</span><span class="crayon-i">PERMISSION_DEFAULT</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-8"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-9"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#notificationLevel'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'デスクトップ通知が許可されていない環境です。&lt;br /&gt;ここをクリックして許可して下さい'</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-649540157fcf1865493805-10"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-11"><span class="crayon-h">	</span><span class="crayon-st">else</span><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">permissionLevel</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-i">notify</span><span class="crayon-sy">.</span><span class="crayon-i">PERMISSION_DENIED</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-12"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-13"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#notificationLevel'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'デスクトップ通知を完全拒否しています。&lt;br /&gt;ブラウザの設定で許可して下さい'</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-649540157fcf1865493805-14"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-15"><span class="crayon-h">	</span><span class="crayon-st">else</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fcf1865493805-16"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-17"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#notificationLevel'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'よくわからないので出てってください'</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-649540157fcf1865493805-18"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-h">	</span></div><div class="crayon-line" id="crayon-649540157fcf1865493805-19"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>2. notify.isSupported</p>
<p>ユーザーの環境がそもそもデスクトップ通知に対応しているかどうか</p>
<p>動作環境は以下とのこと</p>
<p>Chrome(version 23+), Safari(version6+), Firefox(with ff-html5notifications plugin installed) and IE9+</p>
<p>たぶんそれ以外だとfalseとなる模様</p>
<p>&nbsp;</p>
<p>3. requestPermission</p>
<p>許可するためのポップアップを出力する。</p>
<p>これがブラウザごとに異なったため苦労したが、1行で完了。</p>
<p>&nbsp;</p>
<p>4. createNotification</p>

		<div id="crayon-649540157fcf5928765366" 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;">
notify.createNotification( 'デスクトップ通知', { body: 'あああああああああああああああああ', icon: 'logo.png' } )</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-649540157fcf5928765366-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-649540157fcf5928765366-1"><span class="crayon-i">notify</span><span class="crayon-sy">.</span><span class="crayon-e">createNotification</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'デスクトップ通知'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">body</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'あああああああああああああああああ'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">icon</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'logo.png'</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>デモだと上記のように設定している。</p>
<p>&nbsp;</p>
<p>簡単だし便利そうなのでぜひ実際のサービスでも試してみたい</p>

jQueryで簡単にデスクトップ通知を実装する方法

<p>以前にMarkDown記法というのを紹介し、それに対応するエディター「<a href="/officer/markdown%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%80%8Cmou%E3%80%8D.html">Mou</a>」も合わせて紹介しました。</p>
<p>このブログももちろんMarkDownという記法を用いて記述をしています。まだ、リファレンスを見ながらでないと中々素早く記述が出来ませんが、<strong>このように</strong>強調したりといったところは、どんな言語よりも素早く記述することが出来ると思います。</p>
<p>githubからダウンロードするソースには、「readme.md」という（.mdがMarkDownファイルを示す拡張子）ファイルが大抵入っており、mdファイルを読み込むためのソフトウェアが必要になるシーンが増えているように思います。<br />
読み込むだけであれば、SublimeTextのプラグインでも十分なようですが、ブログを記述するなどライティングをする場合は、やはり、プレビュー機能などを備えたエディターというのが必要になります。</p>
<h3 id="toc_0">Mouは開発停止状態になっていた</h2>
<p>MarkDownエディターとして代表的なソフトウェアとして「Mou」がありましたが、現在は開発停止状態になっているようでした。<br />
サイトを訪れてみるとこれまた代表的なクラウドファンディングの一つである「INDIEGOGO」で出資を募っている最中でした。<br />
<a href="http://25.io/mou/" target="_blank">http://25.io/mou/</a></p>
<h3 id="toc_1">Mouのファンが作ったエディター「MacDown」</h2>
<p>その開発停止状態になっていた「Mou」をこよなく愛したユーザーにより、開発されたのが今回紹介する「MacDown」になります。</p>
<p>公式サイト上でもMouに多大な影響を受けていると宣言しており、Mouが好きだというエピソードが記載されており、何とも熱い気持ちを受けました。</p>
<p><a href="http://macdown.uranusjr.com/" target="_blank">http://macdown.uranusjr.com/</a></p>
<p>FFFTPのように一度開発中止されたものが有志によって、オープンソースとして開発が再開された話しを思い出し、ソフトウェア開発における無情を感じつつも、その背景だけで一気にファンになりました。個人的な感想が入ってしまいましたが、比較した画像が以下になります。</p>
<h3 id="toc_2">「Mou」と「MacDown」の比較画像</h2>
<p>基本的には、左がエディター、右がプレビュー画面となっております。</p>
<p><a href="/uploads-archive/2014/11/1.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6377" src="/uploads-archive/2014/11/1-300x214.png" alt="1" width="300" height="214" srcset="/uploads-archive/2014/11/1-300x214.png 300w, /uploads-archive/2014/11/1-228x163.png 228w, /uploads-archive/2014/11/1.png 1014w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="/uploads-archive/2014/11/screenshot14.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6379" src="/uploads-archive/2014/11/screenshot14-300x163.png" alt="screenshot" width="300" height="163" srcset="/uploads-archive/2014/11/screenshot14-300x163.png 300w, /uploads-archive/2014/11/screenshot14-1024x556.png 1024w, /uploads-archive/2014/11/screenshot14-228x123.png 228w, /uploads-archive/2014/11/screenshot14.png 1899w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>MacDownはエディター部分が黒背景デフォルトとなっており、流行りのSublimeTextと彷彿とさせます。</p>
<p>エディター自体はほぼ同一機能を有しており（Mouをベースに作られているので当たり前ですが）、違和感なく操作が可能です。</p>
<h3 id="toc_3">まとめ</h2>
<p>Mouも開発資金＄20,000を超えて調達に成功をしているようですし、是非ともVer1をリリースして頂きつつ、MacDownも開発を継続してよりよいMarkDownエディタを提供してくれたら幸いです。</p>


MarkDownエディター「MacDown」が素晴らしい

<p>Symfony2で使えるクローラーを判別するプログラムを書いてきました。<br />
すべてのものを判別するのは不可能に近いゆえ、メインのものしか書いてありません。</p>
<p></p>

		<div id="crayon-649540157fb0a682867180" 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;">
&lt;?php

namespace HogeBundle\API;

use Symfony\Component\DependencyInjection\ContainerInterface;

class UserAgentAPI {

    private $container;

    public function __construct(ContainerInterface $container) {
        $this-&gt;container = $container;
    }

    public function isCrawler() {
        $ua = $this-&gt;container-&gt;get ( "request" )-&gt;headers-&gt;get ( 'User-Agent' );
        // $_SERVER['HTTP_USER_AGENT']
        
        $crawler_arr = array (
                "Googlebot", // google
                "Baiduspider", // Baidu
                "bingbot", // Bing
                "Yeti", // NHN
                "NaverBot", // NaverBot
                "Yahoo", // Yahoo
                "Tumblr", // Tumblr
                "livedoor" // livedoor
        ) 
;
        foreach ( $crawler_arr as $value ) {
            if (stripos ( $ua, $value ) !== false) {
                return true;
            }
        }
        return false;
    }
}</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-649540157fb0a682867180-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-2">2</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-4">4</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-6">6</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-8">8</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-10">10</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-12">12</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-14">14</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-16">16</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-18">18</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-20">20</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-22">22</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-24">24</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-26">26</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-28">28</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-30">30</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-32">32</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-34">34</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157fb0a682867180-36">36</div><div class="crayon-num" data-line="crayon-649540157fb0a682867180-37">37</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-649540157fb0a682867180-1"><span class="crayon-h">&lt;</span><span class="crayon-sy">?</span><span class="crayon-e">php</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-2">&nbsp;</div><div class="crayon-line" id="crayon-649540157fb0a682867180-3"><span class="crayon-t">namespace</span><span class="crayon-h"> </span><span class="crayon-i">HogeBundle</span><span class="crayon-sy">\</span><span class="crayon-i">API</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-4">&nbsp;</div><div class="crayon-line" id="crayon-649540157fb0a682867180-5"><span class="crayon-st">use</span><span class="crayon-h"> </span><span class="crayon-i">Symfony</span><span class="crayon-sy">\</span><span class="crayon-i">Component</span><span class="crayon-sy">\</span><span class="crayon-i">DependencyInjection</span><span class="crayon-sy">\</span><span class="crayon-i">ContainerInterface</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-6">&nbsp;</div><div class="crayon-line" id="crayon-649540157fb0a682867180-7"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">UserAgentAPI</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-8">&nbsp;</div><div class="crayon-line" id="crayon-649540157fb0a682867180-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">private</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">container</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-10">&nbsp;</div><div class="crayon-line" id="crayon-649540157fb0a682867180-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">__construct</span><span class="crayon-sy">(</span><span class="crayon-i">ContainerInterface</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">container</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-649540157fb0a682867180-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-r">this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">container</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">container</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157fb0a682867180-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-14">&nbsp;</div><div class="crayon-line" id="crayon-649540157fb0a682867180-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">isCrawler</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-i">ua</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-r">this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">container</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">get</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">"request"</span><span class="crayon-h"> </span><span class="crayon-sy">)</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">headers</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">get</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'User-Agent'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157fb0a682867180-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// $_SERVER['HTTP_USER_AGENT']</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-649540157fb0a682867180-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-i">crawler_arr</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-h"> </span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"Googlebot"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">// google</span></div><div class="crayon-line" id="crayon-649540157fb0a682867180-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"Baiduspider"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">// Baidu</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"bingbot"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">// Bing</span></div><div class="crayon-line" id="crayon-649540157fb0a682867180-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"Yeti"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">// NHN</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"NaverBot"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">// NaverBot</span></div><div class="crayon-line" id="crayon-649540157fb0a682867180-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"Yahoo"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">// Yahoo</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"Tumblr"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">// Tumblr</span></div><div class="crayon-line" id="crayon-649540157fb0a682867180-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"livedoor"</span><span class="crayon-h"> </span><span class="crayon-c">// livedoor</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">)</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-649540157fb0a682867180-29"><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-30"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">foreach</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-e">crawler_arr </span><span class="crayon-st">as</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">value</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" id="crayon-649540157fb0a682867180-31"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">stripos</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">ua</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">value</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">!</span>==<span class="crayon-h"> </span><span class="crayon-t">false</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-649540157fb0a682867180-32"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157fb0a682867180-33"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-34"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540157fb0a682867180-35"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157fb0a682867180-36"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540157fb0a682867180-37"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

【Symfony2】クローラーの判別

<p>言わずと知れたWordpressでございますが、こちらみなさんご存知のことと思いますが、どこの会社が運営しているかまでは把握してる人はそう多くはないと思います。</p>
<p>wordpressの生みの親は、<a href="http://automattic.com/" target="_blank">Automattic</a>という会社です。<br />
まぁ知ったところで一体なんなんだという話かもしれませんが、こちらの会社さん、さすがというべきか他にもいろんなサービス運営しておりましたので、そちらを紹介したいと思います。</p>
<h2>Automattic運営しているサービス(抜粋)</h2>
<p>数多くあるのですが(全体の半分くらいはwordpressと関連があるサービスだと思います。)、今回は簡単に5つ程にしたいと思います。</p>
<h3>WordPress.com</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6338" src="/uploads-archive/2014/11/4c0dedf74cd1c67506273b59bb56bb65.jpg" alt="WordPress.com-無料のサイトやブログを作成" width="630" height="399" srcset="/uploads-archive/2014/11/4c0dedf74cd1c67506273b59bb56bb65.jpg 1065w, /uploads-archive/2014/11/4c0dedf74cd1c67506273b59bb56bb65-300x190.jpg 300w, /uploads-archive/2014/11/4c0dedf74cd1c67506273b59bb56bb65-1024x649.jpg 1024w, /uploads-archive/2014/11/4c0dedf74cd1c67506273b59bb56bb65-228x144.jpg 228w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらよく混合される方がいるらしく、<a href="https://ja.wordpress.org/" target="_blank">WordPress.org</a>とは違い、無料でブログを作成できるサービスになります。アメブロみたいな感じでしょうか。<br />
Worpressをサーバーにインストールして、自分でテーマ作成してっていうのができない、やりたくない方向けですね！</p>
<p><a href="https://ja.wordpress.com/" target="_blank">WordPress.com</a></p>
<h3>Simplenote</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6337" src="/uploads-archive/2014/11/Simplenote-1024x649.jpg" alt="Simplenote" width="630" height="399" srcset="/uploads-archive/2014/11/Simplenote-1024x649.jpg 1024w, /uploads-archive/2014/11/Simplenote-300x190.jpg 300w, /uploads-archive/2014/11/Simplenote-228x144.jpg 228w, /uploads-archive/2014/11/Simplenote.jpg 1065w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらはその名の通り、シンプルなノートです。<br />
Evernoteをさらにシンプルにし多様な感じで、ノートのみの機能をもったサービスです。<br />
僕はこのシンプルさが結構好きなので使用しております。<br />
PC、タブレット、スマホで同期でき、さらに起動が早いのでなかなか良い感じです。<br />
基本的には無料で使用できます。</p>
<p><a href="http://simplenote.com/" target="_blank">Simplenote</a></p>
<h3>Cloudup</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6335" src="/uploads-archive/2014/11/Cloudup.jpg" alt="Cloudup" width="630" height="399" srcset="/uploads-archive/2014/11/Cloudup.jpg 1065w, /uploads-archive/2014/11/Cloudup-300x190.jpg 300w, /uploads-archive/2014/11/Cloudup-1024x649.jpg 1024w, /uploads-archive/2014/11/Cloudup-228x144.jpg 228w" sizes="(max-width: 630px) 100vw, 630px" /><br />
ここからは僕は使用したことないのですが、<br />
ファイル共有サービスのようで、映像、写真、音楽、リンク、ドキュメントを素早く簡単に共有できるようです。<br />
1000アイテム、200GBまでは無料で使えるようです。<br />
ただ、現在(2014年11月18日)は招待制になっています。<br />
公開されたらぜひ使ってみたいサービスです。</p>
<p><a href="https://cloudup.com/" target="_blank">Cloudup</a></p>
<h3>Simperium</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6336" src="/uploads-archive/2014/11/Simperium-1024x649.jpg" alt="Simperium" width="630" height="399" srcset="/uploads-archive/2014/11/Simperium-1024x649.jpg 1024w, /uploads-archive/2014/11/Simperium-300x190.jpg 300w, /uploads-archive/2014/11/Simperium-228x144.jpg 228w, /uploads-archive/2014/11/Simperium.jpg 1065w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらはサービスというかAPIなのでしょうか？<br />
開発者向けのサービスでデータをPC、タブレット、スマホ、のデータを即座に同期させることができるようになるサービスのようです。<br />
上記のサービスで使用しているライブラリの提供といった感じでしょうか。<br />
アクティブユーザーによって月額の費用が変わるようです。</p>
<p><a href="https://simperium.com/" target="_blank">Simperium</a></p>
<h3>BuddyPress</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6334" src="/uploads-archive/2014/11/BuddyPress.org_-1024x649.jpg" alt="BuddyPress.org" width="630" height="399" srcset="/uploads-archive/2014/11/BuddyPress.org_-1024x649.jpg 1024w, /uploads-archive/2014/11/BuddyPress.org_-300x190.jpg 300w, /uploads-archive/2014/11/BuddyPress.org_-228x144.jpg 228w, /uploads-archive/2014/11/BuddyPress.org_.jpg 1065w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらはwordpressのプラグインで、wordpressで作るサイトを<br />
SNSのようなサイトにできるシロモノです。<br />
料金はかかりません！</p>
<p><a href="https://buddypress.org/" target="_blank">BuddyPress.org</a></p>
<p>使い方に関しては以下のリンクを参考にしてください！</p>
<p><a href="http://www.webcreatorbox.com/tech/wordpress-plugin-buddypress/" target="_blank">WordPressプラグイン「BuddyPress」でSNSサイトを作成 | Webクリエイターボックス</a></p>
<p><a href="http://matome.naver.jp/odai/2129933933835561001" target="_blank">WordPressで作るSNS BuddyPressの活用方法 &#8211; NAVER まとめ</a></p>
<p>弊社もLaunchCartというサービス(?)をやっていますが、また新たに違うサービスをやってみたいですね〜</p>


wordpressの生みの親「Automattic」には他にもいいサービスがあった

VagrantをWindows7にインストールしてCentos6.5環境構築

<p>Subversion（svn）でどうやって前のバージョンに戻す方法について調べてみました。<br />
実際に使ったわけではなく、メモになります。</p>
<h2>ツール</h2>
<h3>svnコマンド（Macのターミナル）</h3>
<p>Xcodeをインストールしたついてくるらしいです。<br />
brewやmacportsでインストールこともあり。</p>
<p></p>

		<div id="crayon-649540157f6c5387415407" 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;">
which svn
/usr/bin/svn</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-649540157f6c5387415407-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157f6c5387415407-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-649540157f6c5387415407-1"><span class="crayon-e">which </span><span class="crayon-i">svn</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157f6c5387415407-2">/<span class="crayon-i">usr</span>/<span class="crayon-i">bin</span>/<span class="crayon-i">svn</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3> TortoiseSVN（Windows）</h3>
<p>GUI（フォルダの窓になる）。<br />
WindowsのShellでコマンドラインが使えるらしい。</p>
<h3>Eclipse</h3>
<p>Subversionプラグインをインストールすること。<br />
GUI。コマンドラインは使えないらしい。</p>
<h2>やり方</h2>
<p>コマンドラインでコマンドを打つか、EclipseのGUIで操作をするかでやり方が分けられます。</p>
<p>コマンドラインでコマンドを打つ方法で、svn merge と svn updateの２つの方法を紹介しますが、<br />
個人的にはsvn updateのほうが使えたとしても、ローカルファイルの更新のみになるので、もう一回svn commitが必要かと思います。</p>
<h3>svn merge</h3>
<p>リビジョン 31 を破棄して 30 に戻す例である。</p>

		<div id="crayon-649540157f6c9792510396" 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;">
svn merge -r 31:30 http://svn.example.com/repos/calc/trunk
svn commit -m "Undoing change committed in r31."</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-649540157f6c9792510396-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157f6c9792510396-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-649540157f6c9792510396-1"><span class="crayon-e">svn </span><span class="crayon-i">merge</span><span class="crayon-h"> </span>-<span class="crayon-i">r</span><span class="crayon-h"> </span><span class="crayon-cn">31</span><span class="crayon-sy">:</span><span class="crayon-cn">30</span><span class="crayon-h"> </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//svn.example.com/repos/calc/trunk</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157f6c9792510396-2"><span class="crayon-e">svn </span><span class="crayon-i">commit</span><span class="crayon-h"> </span>-<span class="crayon-i">m</span><span class="crayon-h"> </span><span class="crayon-s">"Undoing change committed in r31."</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>svn update</h3>
<p></p>

		<div id="crayon-649540157f6cb742467329" 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;">
svn update -r 30</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-649540157f6cb742467329-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-649540157f6cb742467329-1"><span class="crayon-e">svn </span><span class="crayon-i">update</span><span class="crayon-h"> </span>-<span class="crayon-i">r</span><span class="crayon-h"> </span><span class="crayon-cn">30</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>おわり</h2>
<p>けっこう前からSubversionを使ってきましたが、やはりSubversionの機能全部は使えこなせていなかったのようです。<br />
Subversionサーバー構築もあるから、少し奥深い感じますね。</p>

svnを前のバージョンに戻す方法

<p>私がHTMLについて勉強を始めた頃はXHTML1.0が主流として使われており、</p>
<p>XHTMLでは要素（タグ）がインライン要素とブロック要素の2種類だけに分かれていて、</p>
<p>「インライン要素の中にブロック要素を入れてはいけない」「インライン要素は意味を持つブロック要素で囲む必要がある」といったことを念頭に入れていればコーディングで大きな間違いはなかったのですが、</p>
<p>&nbsp;</p>
<p>HTML5でコンテンツモデルという新たな要素の分類基準が設けられてからは、</p>
<p>a要素でブロック要素と呼ばれていたグループの要素を囲むことが可能になったりするなど、</p>
<p>要素の囲み方のルールが複雑になりました。</p>
<p>&nbsp;</p>
<p>tableの直下にはtbody, thead, trのいずれかしか配置してはいけないなど、</p>
<p>基本的な各要素の囲み方のルールはXHTMLと替わらないのですが、</p>
<p>「a要素で囲むことができるのはどこまで？」「spanやstrongのルールは変わったの？」</p>
<p>といった、HTML5からの新たなルールがどのようなものかわからないと、</p>
<p>間違ったコーディングをしてしまうことは避けられないので、</p>
<p>今回具体的に調べてみることにしました。</p>
<p>&nbsp;</p>
<p>参考サイト</p>
<p><a class="link" href="http://ascii.jp/elem/000/000/628/628869/" target="_blank">浜 俊太朗のHTML5マークアップ移行ガイド</a></p>
<p><a class="link" href="http://www.htmq.com/html5/007.shtml" target="_blank">HTML5における要素の分類（コンテンツ・モデル）－HTML5リファレンス</a></p>
<p><a class="link" href="http://www.w3.org/TR/2010/WD-html5-20101019/content-models.html" target="_blank">3.2.5 Content models — HTML5 </a></p>
<p>&nbsp;</p>
<p>参考図書</p>
<p><a class="link" href="http://www.amazon.co.jp/dp/4048660705" target="_blank">『HTML5マークアップ 現場で使える最短攻略ガイド』 浜俊太朗(著) 2013.12</a></p>
<p>&nbsp;</p>
<h2>HTML5のコンテンツモデルとは？</h2>
<p>コンテンツモデルとは、簡単に言うと、</p>
<p>「どの分類の要素が、どの分類の要素を含むことができるのか」というルールのことです。</p>
<p>HTML5では要素が14種類に分類されています。</p>
<p>&nbsp;</p>
<p>とはいえ、それぞれの要素が1つずつ分類を持っているのではなく、複数の分類を持ちます。</p>
<p>たとえば、h1要素は「フレージングコンテンツ」という<strong>コンテンツモデル</strong>に分類されており、</p>
<p>「フローコンテンツ」、「ヘッディングコンテンツ」という<strong>カテゴリー</strong>に属します。</p>
<p>&nbsp;</p>
<p>h1要素の場合、フレージングコンテンツというコンテンツモデルであり、</p>
<p>フレージングコンテンツのカテゴリーに属する要素のみを含むことができます。</p>
<p>&nbsp;</p>
<p>つまり、「どのコンテンツモデルが、どのカテゴリーの要素を含むことができるか」というルールが、</p>
<p>コンテンツモデルの基本になります。</p>
<p>&nbsp;</p>
<p>しかしながら、HTML5のコンテンツモデルはこの限りではなく、全部で次の７つのパターンがあります。</p>
<ol>
<li>カテゴリー単位で定義: h1, span etc.</li>
<li>カテゴリー単位で定義(条件つき): header, button etc.</li>
<li>特定の内容のみ入れられる: table, ul etc.</li>
<li>特定の内容のみ入れられる(条件つき): dl etc.</li>
<li>他の要素を入れられない: img, br etc.</li>
<li>親要素の条件を引き継ぐ: del, ins etc.</li>
<li>親要素の条件を引き継ぐ(条件付き): a, iframe etc.</li>
</ol>
<p>つまり、ある程度の基本的なルールはあるが、</p>
<p>各要素の特性によって含むことができる要素がそれぞれ限られているということのようです。</p>
<p>&nbsp;</p>
<p>とはいっても、この特性は、</p>
<p>「tableの直下にはtrやtbodyのようなテーブル関係の要素しか入れられない」</p>
<p>「dlには最低1つのdtとそれに続く１つ以上のddを入れなければならない」</p>
<p>「フレージングコンテンツのコンテンツモデルであるbuttonのような操作できる要素(インタラクティブコンテンツ)には、</p>
<p>フレージングコンテンツのカテゴリであってもaやiframeのような同じく操作できる要素を含むことはできない」</p>
<p>といった、</p>
<p>それぞれの要素の意味や基本的な使い方が理解できていれば迷うことのないものばかりですので、</p>
<p>そこまで複雑に考える必要はないと言えます。</p>
<p>&nbsp;</p>
<p>それでは、コンテンツモデルの基本になるカテゴリーとコンテンツモデルについて、具体的にご紹介いたします。</p>
<h2>カテゴリーと要素</h2>
<h3>メタデータコンテンツ(Metadata content)</h3>
<p>おもにhead要素に入る、メタデータやスタイル・スクリプトといった、基本的に描画されない要素です。</p>
<p>このカテゴリの要素: base, link, meta, noscript, script, style, title</p>
<p>&nbsp;</p>
<h3>フローコンテンツ(Flow content)</h3>
<p>文書に使われるほとんどの要素です。</p>
<p>このカテゴリーの要素: <em>a, abbr, address, area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, time, ul, var, video, wbr, テキスト</em></p>
<p>&nbsp;</p>
<h3>セクショニングコンテンツ(Sectioning content)</h3>
<p>セクションの範囲を定義する要素です。</p>
<p>このカテゴリの要素: <em>article, aside, nav, section</em></p>
<p>&nbsp;</p>
<h3>ヘッディングコンテンツ(Heading content)</h3>
<p>セクションのヘッダー(見出し)を表す要素です</p>
<p>このカテゴリの要素:<em> h1, h2, h3, h4, h5, h6 (hgroupは廃止)</em></p>
<p>&nbsp;</p>
<h3>フレージングコンテンツ(Phrasing content)</h3>
<p>文書のテキストを表す要素です。この要素の多くがフレージングコンテンツのコンテンツモデルとなります。</p>
<p>以前インライン要素と呼ばれていた要素の多くがこの要素にあたります。</p>
<p>このカテゴリの要素: <em>a, abbr, area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, meta, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, テキスト</em></p>
<p>&nbsp;</p>
<h3>エンベッディッドコンテンツ(Embedded content)</h3>
<p>文書に他のリソース(画像や動画)を埋め込んだり、他の語彙(svgなど)を挿入したりする要素です。</p>
<p>このカテゴリの要素: <em>audio, canvas, embed, iframe, img, math, object, svg, video</em></p>
<p>&nbsp;</p>
<h3>インタラクティブコンテンツ(Iteractive content)</h3>
<p>ユーザーが操作できる要素です。</p>
<p>このカテゴリの要素: <em>a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video</em></p>
<p>&nbsp;</p>
<h3>パルパブルコンテンツ(Palpable content)</h3>
<p>具体的な意味を持つ要素のことです。</p>
<p>br要素やhr要素のような、具体的な意味を持たない要素はこのコンテンツから省かれます。</p>
<p>フローティングコンテンツやフレージングコンテンツのコンテンツモデルをもつ要素は、</p>
<p>hidden属性の指定されていないパルパブルコンテンツを含まなければならないと定義されています。</p>
<p>このカテゴリの要素: <em>a, abbr, address, article, aside, audio(controls属性を持つ場合), b, bdi, bdo, blockquote, button, canvas, cite, code, data, details, dfn, div, dl(dtとddが一組以上ある場合), em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, input(type属性の値がhiddenでない場合), ins, kbd, keygen, label, map, mark, math, menu(type属性の値がtoolbarかlistの場合), meter, nav, object, ol(子要素に一つ以上のli要素を持つ場合), output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, ul(子要素に一つ以上のli要素を持つ場合), var, video, テキスト(半角スペースのみは除く)</em></p>
<p>&nbsp;</p>
<p><a href="http://ascii.jp/elem/000/000/628/628869/" target="_blank">こちら</a>のサイトで、それぞれの要素の具体的なルールが紹介されていますので、</p>
<p>是非、参考になされてください。</p>


インライン要素・ブロック要素に替わるHTML5のコンテンツモデルとは？

SQLセキュリティ対策

クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン

<p><a class="link" href="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/" target="_blank">jquery.adaptive-backgrounds.js</a></p>
<p><a href="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/" target="_blank">jquery.adaptive-backgrounds.js</a>はimgの画像のドミナントカラーを調べて、</p>
<p>背景色にしてくれるjQueryのプラグインです。</p>
<p>写真に合わせて背景色を変えるデザインなどで使えそうです。</p>
<p>&nbsp;</p>
<p>ちなみにこちらのjQueryプラグインでは、色の取得にHTML5のCanvasを使っているため、</p>
<p>HTML5に対応したブラウザで動作します。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/ninomiya/57/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>使い方</h2>
<p><a href="https://github.com/briangonzalez/jquery.adaptive-backgrounds.js" target="_blank">こちら</a>からファイルをダウンロードし、htmlのheadでjqueryと一緒にJSファイルを読み込みます。</p>

		<div id="crayon-649540157eea3068449914" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><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;head&gt;
・・・
&lt;script type="text/javascript" src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.adaptive-backgrounds.js"&gt;&lt;/script&gt;
・・・
&lt;/head&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-649540157eea3068449914-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-2">2</div><div class="crayon-num" data-line="crayon-649540157eea3068449914-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-4">4</div><div class="crayon-num" data-line="crayon-649540157eea3068449914-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-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-649540157eea3068449914-1"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-2"><span class="crayon-i ">・・・</span></div><div class="crayon-line" id="crayon-649540157eea3068449914-3"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-1.11.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-4"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.adaptive-backgrounds.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-649540157eea3068449914-5"><span class="crayon-i ">・・・</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-6"><span class="crayon-r ">&lt;/head&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>色を取得するターゲットとなるimg要素に「data-adaptive-background=&#8217;1&#8217;」を、</p>
<p>背景色を設定する親要素に「data-ab-css-background=&#8217;1&#8217;」を設定します。</p>

		<div id="crayon-649540157eea7595854631" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><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;li class="image" data-ab-css-background='1'&gt;&lt;img src="images/spring1.jpg" alt="image" data-adaptive-background='1'&gt;&lt;/li&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-649540157eea7595854631-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-649540157eea7595854631-1"><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"image"</span><span class="crayon-h"> </span><span class="crayon-e ">data-ab-css-background</span>=<span class="crayon-s ">'1'</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/spring1.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image"</span><span class="crayon-h"> </span><span class="crayon-e ">data-adaptive-background</span>=<span class="crayon-s ">'1'</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>以下のコードでプラグインを実行します。</p>

		<div id="crayon-649540157eea9978137669" 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">JavaScript</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	$.adaptiveBackground.run();
});</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-649540157eea9978137669-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea9978137669-2">2</div><div class="crayon-num" data-line="crayon-649540157eea9978137669-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157eea9978137669-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea9978137669-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-i">adaptiveBackground</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eea9978137669-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>取得した色の情報などは、以下のように記述することで取得が可能です。</p>

		<div id="crayon-649540157eeaa951081602" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	$.adaptiveBackground.run({
		success: function($img, data) {
			console.log("color-code: " + data.color);
		}
	});
});</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-649540157eeaa951081602-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-2">2</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-4">4</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-6">6</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157eeaa951081602-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-i">adaptiveBackground</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-3"><span class="crayon-h">		</span><span class="crayon-i">success</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-i">img</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">data</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-649540157eeaa951081602-4"><span class="crayon-h">			</span><span class="crayon-i">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">"color-code: "</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-sy">.</span><span class="crayon-i">color</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-5"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-6"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-7"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>背景色に反映される色の data.color以外に、data.palette[0]〜data.palette[19]に画像からサンプリングした色が入っていますので、</p>
<p>こちらも合わせて使うと、もっとデザインの幅が広がるかもしれません。</p>
<p>&nbsp;</p>

写真のドミナントカラーを親要素の背景色にするjQueryプラグイン「jquery.adaptive-backgrounds.js」

ajaxの書き方

JSON形式のデータを返すAPI

横幅だけじゃない！Media Queryでの指定の方法

nino-eye (5).jpg

「Matter.js」を使ってCanvasの物理演算をやってみました

CentOS 6から7にアップグレード

<p>WebGLなどCanvas上でグラフィックを扱う場合、</p>
<p>JSON化されたデータを読み込んで、表示するという手順がよく使われることになると思います。</p>
<p>このJSON化されたグラフィックデータなのどデータには、ユーザーにダウンロードされて流用されることを避けたいものも多いかと思います。</p>
<p>Flashなどのプラグインを使った場合は、コードをユーザーに見られないようにすることができるので、このリスクを避けられますが、</p>
<p>HTML5でJSONを扱う場合はJavaScriptを使って読み込むことになるため、</p>
<p>ユーザーがHTMLやJavaScriptからデータの場所をたどってJSONデータがダウンロードされるリスクが高まります。</p>
<p>&nbsp;</p>
<p>そこで、JSONデータを難読化して、簡単にはJSONデータが利用できないような仕組みについて、</p>
<p>調べて実際にやってみました。</p>
<p>&nbsp;</p>
<p>↓こちらが作ってみたものです。</p>
<p><a class="demo" href="/demo/ninomiya/55/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h2>
<h3>1.JSONコードを暗号化する。</h3>
<p><a class="link" href="http://www.broadband-xp.com/obfuscation/crypt.html" target="_blank">参考サイト： JavaScript難読化のためのヒント</a></p>
<p>今回はこちらの記事を参考に、暗号化を試みてみました。</p>
<p>&nbsp;</p>
<h3>2. 暗号化前のJSON本体はPHPで読み込み、URLを伏せる</h3>
<p>暗号化前のJSONデータはPHPで記述したURLからアクセスするようにして、</p>
<p>ユーザーからは直接URLがわからないようにしました。</p>
<p>&nbsp;</p>
<h3>3.暗号解読のJavaScriptコードも暗号化する。</h3>
<p>JavaScriptコード自体も暗号化して、より難読生を高めます。</p>
<p>ただ、暗号解読のコードは記述せざるを得なかったりするので、</p>
<p>飽くまでも、解読するための手間を多くするのが限界です。</p>
<p>&nbsp;</p>
<p>その他参考サイト</p>
<p><a class="link" href="http://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%BC%E3%82%B6%E3%83%BC%E6%9A%97%E5%8F%B7" target="_blank">シーザー暗号 &#8211; Wikipedia</a></p>
<p><a class="link" href="http://www.php-ref.com/bapi/02_ord.html" target="_blank">ＰＨＰリファレンス（ord()）</a></p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2014/11/26

2014/11/26

2014/11/26

2014/11/26

2014/11/25

2014/11/19

2014/11/19

2014/11/19

2014/11/19

2014/11/12

2014/11/12

2014/11/12

2014/11/11

2014/11/06

2014/11/06

2014/11/05

2014/11/04

2014/10/29