jQuery-Timepicker-AddonにDatepickerみたいなアイコンボタンを付ける方法

<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>ネットショップを運営する方の中には、梱包作業やショップ運営の手伝いなどにアルバイトの方を雇用している場合はよくあると思います。</p>
<p>時給となると勤怠管理はしっかりしないといけません、そこで無料で利用できるタイムカードのような物はないかと探してみたところ、なかなか良さそうなサービスがあったのでご紹介します。</p>
<p>いくつか同じようなサービスがありましたが、シンプルで使いやすそうなのが「タイムレコポン」というものです。</p>
<p><a href="http://time-recopon.jp/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6371" src="/uploads-archive/2014/11/timecard1.jpg" alt="timecard1" width="547" height="371" srcset="/uploads-archive/2014/11/timecard1.jpg 600w, /uploads-archive/2014/11/timecard1-300x203.jpg 300w, /uploads-archive/2014/11/timecard1-228x154.jpg 228w" sizes="(max-width: 547px) 100vw, 547px" /></a></p>
<p><a href="http://time-recopon.jp/">http://time-recopon.jp/</a></p>
<p>&nbsp;</p>
<p>クラウドなのでインストールする必要はありません、管理する側もスタッフ側もPCとタブレット両方で利用ができます。</p>
<p>利用するためにはメールアドレスなど必要な情報を登録するだけです。</p>
<p>&nbsp;</p>
<p>使い方はいたってシンプルでリアルのタイムカード同様、出勤した際に「出勤ボタン」を押して、上がる時に「退勤」ボタンを押すだけ。左にリアルタイムの時間が表示され右の覧には出退勤時間が記録されます。</p>
<p>&nbsp;</p>
<p>打刻画面のデザインはいくつかありますが、正直微妙なデザインばかりです。夜のお店っぽいデザインが多い気がします。</p>
<p>打刻画面のデザインについては有料でロゴをいれたりカスタマイズができるようです。</p>
<p><a href="/uploads-archive/2014/11/timecard2.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6372" src="/uploads-archive/2014/11/timecard2.jpg" alt="timecard2" width="538" height="258" srcset="/uploads-archive/2014/11/timecard2.jpg 600w, /uploads-archive/2014/11/timecard2-300x144.jpg 300w, /uploads-archive/2014/11/timecard2-228x109.jpg 228w" sizes="(max-width: 538px) 100vw, 538px" /></a></p>
<p>&nbsp;</p>
<p>ログイン画面には管理者用とスタッフ用の２つがあります。</p>
<p>無料のサービスなので管理画面には広告が表示されます、</p>
<p>&nbsp;</p>
<p>下の画像は管理者用の画面です、打刻データの修正やスタッフデータを編集する事ができます。</p>
<p>おそらくリアル店舗向けにつくられたサービスなので勤務先を複数登録できます、例えば同じ名前のお店でも新宿店と池袋店を登録できるという感じです。</p>
<p>&nbsp;</p>
<p>使い方を変えれば、作業内容ごとや勤務時間帯、時給が違うスタッフごとにくくる事ができます。</p>
<p>退勤時間のデータをエクセルなどで出力できるので、作業内容の異なるスタッフなどで登録先を変えておくと便利かもしれません。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-6373" src="/uploads-archive/2014/11/timecard3.jpg" alt="timecard3" width="566" height="369" srcset="/uploads-archive/2014/11/timecard3.jpg 600w, /uploads-archive/2014/11/timecard3-300x196.jpg 300w, /uploads-archive/2014/11/timecard3-228x148.jpg 228w" sizes="(max-width: 566px) 100vw, 566px" /></p>
<p>EC運営などでは自宅で作業をしてもらう場合もあると思いますが、そういった時にも使えると思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


タイムカードでの勤怠管理が無料で行えるツール「タイムレコポン」

<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のコンテンツモデルとは？

<p>ワインの通販市場を調べております。</p>
<p>「ワイン　通販」というキーワードで上位表示されているサイトをsimilarwebというツールを使って予想アクセス数を調べてみました。</p>
<p>1位は楽天のワインカテゴリーのサイトになるので除外しました。</p>
<p><a href="http://www.similarweb.com/website/belluna-gourmet.com" target="_blank">http://www.similarweb.com/website/belluna-gourmet.com</a></p>
<p><a href="/uploads-archive/2014/11/screenshot6.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6292" src="/uploads-archive/2014/11/screenshot6-300x172.png" alt="screenshot" width="300" height="172" srcset="/uploads-archive/2014/11/screenshot6-300x172.png 300w, /uploads-archive/2014/11/screenshot6-1024x589.png 1024w, /uploads-archive/2014/11/screenshot6-228x131.png 228w, /uploads-archive/2014/11/screenshot6.png 1108w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://www.similarweb.com/website/enoteca.co.jp" target="_blank">http://www.similarweb.com/website/enoteca.co.jp</a></p>
<p><a href="/uploads-archive/2014/11/screenshot7.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6293" src="/uploads-archive/2014/11/screenshot7-300x171.png" alt="screenshot" width="300" height="171" srcset="/uploads-archive/2014/11/screenshot7-300x171.png 300w, /uploads-archive/2014/11/screenshot7-1024x586.png 1024w, /uploads-archive/2014/11/screenshot7-228x130.png 228w, /uploads-archive/2014/11/screenshot7.png 1103w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p><a href="http://www.similarweb.com/website/biccamera.com" target="_blank">http://www.similarweb.com/website/biccamera.com</a> <a href="/uploads-archive/2014/11/screenshot9.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6295" src="/uploads-archive/2014/11/screenshot9-300x171.png" alt="screenshot" width="300" height="171" srcset="/uploads-archive/2014/11/screenshot9-300x171.png 300w, /uploads-archive/2014/11/screenshot9-1024x586.png 1024w, /uploads-archive/2014/11/screenshot9-228x130.png 228w, /uploads-archive/2014/11/screenshot9.png 1110w" sizes="(max-width: 300px) 100vw, 300px" /></a> <a href="http://www.similarweb.com/website/kbwine.com" target="_blank">http://www.similarweb.com/website/kbwine.com</a><a href="/uploads-archive/2014/11/screenshot10.png"><br />
</a> <a href="/uploads-archive/2014/11/screenshot11.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6297" src="/uploads-archive/2014/11/screenshot11-300x172.png" alt="screenshot" width="300" height="172" srcset="/uploads-archive/2014/11/screenshot11-300x172.png 300w, /uploads-archive/2014/11/screenshot11-1024x587.png 1024w, /uploads-archive/2014/11/screenshot11-228x130.png 228w, /uploads-archive/2014/11/screenshot11.png 1109w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>Estimated VisitsとPage Viewsの値がおおよその目安になります。</p>
<p>ここでBiccameraの小会社のBic酒販が200万ユーザーでトップですが、これは、ワイン以外の酒類の販売も含まれているためでしょう。</p>
<p>その他のサイトは、ワインのみを取り扱っているサイトになります。</p>
<p>その中では、エノテカさんが一番アクセスされているという結果が出ており、時点でベルーナのMyWineCLUBと続きます。</p>
<p>ここで上位を見渡してみると、全て総合的に商品を扱う通販サイトであることが分かります。</p>
<p>&nbsp;</p>
<p>しかしながら、ワインはとかく、嗜好性、専門性が高く、好きな人でなければ何を飲めばいいのか分からないということが大半かと思います。</p>
<p>そこで、アメリカでは既に違った切り口のワイン通販サイトとして成功を集めているのが下の2サイトです。</p>
<p><a href="http://www.similarweb.com/website/clubw.com" target="_blank">http://www.similarweb.com/website/clubw.com</a></p>
<p><a href="/uploads-archive/2014/11/screenshot12.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6324" src="/uploads-archive/2014/11/screenshot12-300x172.png" alt="screenshot" width="300" height="172" srcset="/uploads-archive/2014/11/screenshot12-300x172.png 300w, /uploads-archive/2014/11/screenshot12-1024x590.png 1024w, /uploads-archive/2014/11/screenshot12-228x131.png 228w, /uploads-archive/2014/11/screenshot12.png 1105w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>Club Wは、キュレーション型のサイトでたくさん商品を置くのではなく、あえてキュレーターが厳選したワインのみを置いています。</p>
<p>さらに、一番売れ筋の価格帯$10〜15のみを揃えています。</p>
<p>人間あまりにも選択肢が多すぎると「選択のパラドックス」という状態に陥ってしまうそうなのです。</p>
<p>選択のパラドックスに関しての詳細は<a href="http://164s.net/2428.html" target="_blank">こちら</a></p>
<p>ある程度「適度な不自由」がある方が満足度が高いようです。</p>
<p>これ、無数に選択肢があると何を選んでいいか分からないですが、「店長イチオシ」や「◯◯で紹介されました」「◯◯推薦」などがあるとついつい、選択肢として寄せてしまいますよね。</p>
<p><a href="http://www.similarweb.com/website/nakedwines.com" target="_blank">http://www.similarweb.com/website/nakedwines.com</a></p>
<p><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6325" src="/uploads-archive/2014/11/screenshot13-300x133.png" alt="screenshot" width="300" height="133" srcset="/uploads-archive/2014/11/screenshot13-300x133.png 300w, /uploads-archive/2014/11/screenshot13-1024x457.png 1024w, /uploads-archive/2014/11/screenshot13-228x101.png 228w, /uploads-archive/2014/11/screenshot13.png 1115w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>Naked Winesは、クラウドファンディングの要素を持たせ、エンジェルとして投資をすることでサイト上のワインを格安で買えるなど様々な得点があることで成長をしており、どちらもユーザー規模だけを見ると日本の上位サイトと桁が一つ違います。</p>
<p>&nbsp;</p>
<p>最後に今回調べたワイン通販・ECサイトをまとめておきます。</p>
<p>&nbsp;</p>
<h2>国内ワインECサイト</h2>
<h3>トータル</h3>
<h4>エノテカ</h4>
<p>エノテカ株式会社</p>
<p><a href="http://www.enoteca.co.jp/" target="_blank">http://www.enoteca.co.jp/</a></p>
<h4>MyWineCLUB</h4>
<p>株式会社ベルーナ</p>
<p><a href="http://belluna-gourmet.com/wine/" target="_blank">http://belluna-gourmet.com/wine/</a></p>
<h4>ビック酒販</h4>
<p>株式会社ビック酒販</p>
<p><a href="http://www.biccamera.com/bicbic/jsp/w/liquor/index.jsp" target="_blank">http://www.biccamera.com/bicbic/jsp/w/liquor/index.jsp</a></p>
<h3>サブスクリプション型(定期購入)</h3>
<h4>家ワイン</h4>
<p>アイオイクス株式会社</p>
<p><a href="http://iewine.jp/" target="_blank">http://iewine.jp/</a></p>
<h4>ワインナレッジ</h4>
<p>株式会社オンライフ</p>
<p><a href="http://wine-k.jp/" target="_blank">http://wine-k.jp/</a></p>
<h4>Vinica</h4>
<p>株式会社カカクコム</p>
<p><a href="http://vinica.me/sales/top" target="_blank">http://vinica.me/sales/top</a></p>
<h3>セレクトショップ</h3>
<h4>halcol</h4>
<p>株式会社ADDIX</p>
<p>https://www.halcol.com/</p>
<h2>海外ワインECサイト</h2>
<h3>キュレーション</h3>
<h4>Club W</h4>
<p>https://clubw.com/</p>
<h3>クラウドファンディング</h3>
<h4>Naked Wines</h4>
<p>http://www.nakedwines.com/</p>


ワイン通販ECサイト市場

<p>競合やターゲットのECサイトがどんなシステムを使っているのかを判定する方法のまとめ。</p>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>システム名</th>
<th>対象ページ</th>
<th>URL</th>
</tr>
<tr>
<td>EC-CUBE</td>
<td>カートページ</td>
<td>products/list.php</td>
</tr>
<tr>
<td width="77">MakeShopショップサーブ</td>
<td>商品一覧</td>
<td>shop/shopbrand.html</td>
</tr>
<tr>
<td>えびすマート</td>
<td>新規会員登録ページ</td>
<td>member_regist_new.html</td>
</tr>
<tr>
<td>Mtcommerce</td>
<td>ログインページ</td>
<td>apps/shop.cgi</td>
</tr>
<tr>
<td>EC-Orange</td>
<td colspan="2">ECCUBEベースなのでECCUBEと同じ</td>
</tr>
<tr>
<td>たまごカート</td>
<td>カート</td>
<td>shop/display_cart</td>
</tr>
<tr>
<td>Commerce21</td>
<td>会員登録</td>
<td>member/CMmMemberForm.jsp<br />
※一部異なる店舗あり</td>
</tr>
<tr>
<td>HIT-MALL</td>
<td>会員登録</td>
<td>interim/index.html</td>
</tr>
<tr>
<td>EC-Bing</td>
<td>ログインページ</td>
<td>customer/menu.aspx</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>ASPでもスクラッチでも、URLに一定のクセがあるため、URLを検索するとみつかりやすい。</p>
<p>営業リストの作成などにも便利。</p>
<p>ちなみにGoogleはURL検索なくなったぽいので、Yahoo!のものを使うと良いかも。</p>
<p>http://search.yahoo.co.jp/web/advanced</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


【ECサイト】どのシステムを使っているか判定する方法

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」

<p>私の職場ではラジオをつけっぱなしにしているのですが、最近「石川遼選手も使っている」という例のスピードラーニングのラジオCMがよく流れます。”聞き流すだけで大丈夫”とか、”石川遼も英語ができるようになった”と言われるとちょっと気になるので調べてみました。</p>
<p>気になるのはやはり料金と効果です。</p>
<p>実際いくらくらいするものなのかと、公式ページを開いてみると、初回で例のCD2枚とテキストなどがいくつかついて9400円（税別）、さらに毎月4300円（税別）で新しいCDが届くとの事。</p>
<p>もし一年間続けたら6万円オーバー！ちょっと高いですよね・・・。なんと最終的には50枚ほどあるそうです・・・値段高すぎです。</p>
<p>じゃあ効果についてはどうなんだ？という事で動画でアップしている人がいたので確認してみたところセンテンスや会話の内容が日本語と英語の両方で流れるといった感じです。</p>
<p>実際、聞き流すだけで大丈夫とは思いませんが電車の中など移動しながら聞いたりするのには良さそうです。確かにあまり苦にならない感じがしました。</p>
<p>とは言え高すぎます！もっと安くて同じような英語の教材はないものかとネットで調べたり、書店に行って探したりしたところ、、、何ことはない、安くていいのがありました！</p>
<p>せっかくなので紹介させて頂きます。</p>
<p>&nbsp;</p>
<h6>おそらく値段は10分の１くらい　韓国の英語教材</h6>
<p>私が見つけたのはCD付きの書籍で「英会話リアルパターン５００+」というタイトルです。</p>
<p><iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=ebakam-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=486454039X&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
<p>著者はイ・ヴアンスという韓国の人です。元々韓国でかなり売れた本らしく、その後日本でも翻訳されたとの事です。</p>
<p>そもそも日本語も韓国語も文法的には英語と逆で同じなのに、韓国の人は英語が結構しゃべれるという印象があります。そんな理由もあって海外ではどう勉強しているのかも気になったので手にとりました。</p>
<p>ついてくるCDは日本語の後に英語が流れます。正直、例の教材より良い気がしました。</p>
<p>内容は、実際に会話の中で良く使う言い回しのパターンを繰り返していくという物です。１つのパターンについて5種類くらいの例文が流れたあとに、少し長めの会話文が流れます。</p>
<p>価格も安いし、文章的ではなく会話表現が集められているので、英語を話す事に重きを置く人や海外ドラマを字幕なしで観たいなんて人に丁度いいと思います。</p>
<p>オススメの勉強法は、例文の日本の後にCDと一緒に話してみるという方法です。</p>
<p>&nbsp;</p>
<p>ビジネス編とドラマ編もあります。私は最近ドラマ編を聞きながら通勤をしています。</p>
<p>一人でブツブツ言いながら歩いていると若干怪しく見えますが、かなりいい勉強になります。</p>
<p><iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=ebakam-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4864540438&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
<p><iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=ebakam-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4864540403&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>


例の英語学習教材より安いのが書店に売っていた！

<p>インテリアショップ「Francfranc」がクリスマス向けのキャンペーンサイト『1<a href="https://100gifts.francfranc.com/" target="_blank">00 GIFTS Christmas Story</a>』を11月10日にオープンしたという情報が入ってきました。</p>
<p>こちらのサイトが新しいコマースの形「Vコマース」を取っており、おそらく本格的な展開としては、国内初ではないでしょうか？</p>
<h2>Vコマースとは</h2>
<p>VコマースはVideo Commerceの略です。</p>
<p>静止したWebサイトで行うのがEコマースでVコマースは動画上に掲載されている商品を直接購入出来るという仕組みになっております。</p>
<p>カートに入れてからの流れはEコマースと変りませんが、商品が動画で流れているので何ともウキウキしながら、衝動買いをしてしまいそうですね。</p>
<p><a href="/uploads-archive/2014/11/screenshot3.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6240" src="/uploads-archive/2014/11/screenshot3-300x136.png" alt="screenshot" width="300" height="136" srcset="/uploads-archive/2014/11/screenshot3-300x136.png 300w, /uploads-archive/2014/11/screenshot3-228x103.png 228w, /uploads-archive/2014/11/screenshot3.png 913w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>『100 GIFTS Christmas Story』はさらに特殊でサイトはFullFlashで構築されているのですが、動画内で100個の商品が散りばめられており、動画内を直接クリックしてカートに入れることが出来ます。</p>
<p><a href="/uploads-archive/2014/11/screenshot4.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6241" src="/uploads-archive/2014/11/screenshot4-300x214.png" alt="screenshot" width="300" height="214" srcset="/uploads-archive/2014/11/screenshot4-300x214.png 300w, /uploads-archive/2014/11/screenshot4-228x163.png 228w, /uploads-archive/2014/11/screenshot4.png 782w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>横スクロールで動画が流れているのですが、ちょうど右上の額の絵が商品になっています。</p>
<h2>Vコマースのいろいろ</h2>
<p>米国では既にZapposなどを初め、Vコマースが浸透しているようですが、国内の事例はまだまだ少ないですがその中で一部ご紹介です。</p>
<p>・「VAULT」（楽天）</p>
<p><a href="http://vault.rakuten.co.jp/" target="_blank">http://vault.rakuten.co.jp/</a></p>
<p>・「ポイント」（ポイント）</p>
<p><a href="http://www.point.jp/" target="_blank">http://www.point.jp/</a></p>
<p>&nbsp;</p>
<p>動画である以上、企業側の制作コストとユーザー側の通信コストが共に高くなることを解消することが出来れば日本でも普及も考えられる。</p>
<p>特に、スマートフォンで動画を見るユーザーにとっては、キャリア通信料の上限を設けている場合が多く、そういった外部要因を排除していく必要がある。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - 2014年

2014/11/26

2014/11/26

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

2014/11/12

2014/11/12

2014/11/12

2014/11/12

2014/11/12

2014/11/11