【WordPress】WordPress Popular Postsでサムネイル画像を指定サイズのものに差し替える方法

<p>海外のブログ、<a href="http://marketblog.envato.com/trends/best-worst-web-design-trends-2014/">The Best &amp; Worst Web Design Trends of 2014 &#8211; Market Blog</a><br />
こちらで2014年に流行ったwebデザイントレンドを紹介しています。</p>
<p>簡単に見出しだけ抽出しますと、<br />
以下のことを説明しています。</p>
<p>ベストトレンドとしては、<br />
・ミニマルなフラットデザイン<br />
・改善されたwebフォント<br />
・フルスクリーンの背景<br />
・レスポンシブデザインの改善</p>
<p>ワーストトレンドとしては、<br />
・モーダルウィンドウプロモーション<br />
・多すぎるソーシャルメディア<br />
・永遠につづくローディング画面<br />
・カスタマイズされたスクロールバー</p>
<p>もし、気になるものがあればブログを見てみてください<br />
（説明少なすぎてすみません・・・）</p>
<p>今年はなんといっても、<br />
フラットデザイン、ミニマルなデザインが流行りましたね。<br />
フラットデザイン自体はもう少し前ぐらいから出現してましたが、<br />
日本のwebサイトでグッと増えたのは、今年からだと思います。<br />
一年前と比べると、フラットでミニマルなサイトがかなり増えました！</p>
<p>今はフラットデザインをやるのに適した環境ですね！<br />
この流れがいつまで続くのかが気になるところです。</p>
<p>あと、上記にはなかったのですが、<br />
フラットデザインが流行したついでに、相性のよいシングルページ(縦長ページ)も多く見かけました。<br />
パララックス程のアニメーションはしていないのですが、多少スクロールと連動したアニメーションを取り入れたサイトが多かったように感じます。</p>
<h2>おまけ</h2>
<p>最近見かけた便利そうなサービスを紹介します。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6507" src="/uploads-archive/2014/12/Tridiv-CSS-3D-Editor-1024x563.jpg" alt="Tridiv  CSS 3D Editor" width="640" height="352" srcset="/uploads-archive/2014/12/Tridiv-CSS-3D-Editor-1024x563.jpg 1024w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor-300x164.jpg 300w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor-228x125.jpg 228w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor.jpg 1184w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://tridiv.com/">Tridiv | CSS 3D Editor</a><br />
CSSを使った3Dポリゴンを作成することができるwebサービスです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6508" src="/uploads-archive/2014/12/TypeWonder-Beta-1024x563.jpg" alt="TypeWonder - Beta" width="640" height="352" srcset="/uploads-archive/2014/12/TypeWonder-Beta-1024x563.jpg 1024w, /uploads-archive/2014/12/TypeWonder-Beta-300x164.jpg 300w, /uploads-archive/2014/12/TypeWonder-Beta-228x125.jpg 228w, /uploads-archive/2014/12/TypeWonder-Beta.jpg 1184w" sizes="(max-width: 640px) 100vw, 640px" /><br />
<a href="http://typewonder.com/">TypeWonder &#8211; Beta</a><br />
好きなサイトのフォントを、選んだフォントに変更できてしまうサービスです。<br />
いつか使う場面が来るかもしれません。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6506" src="/uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-1024x555.jpg" alt="Coolors - The super fast color palettes generator!" width="640" height="347" srcset="/uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-1024x555.jpg 1024w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-300x162.jpg 300w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-228x123.jpg 228w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator.jpg 1199w" sizes="(max-width: 640px) 100vw, 640px" /><br />
<a href="http://coolors.co/ad7a99-b2cede-8cdfd6-6dc0d5-5a716a">Coolors &#8211; The super fast color palettes generator!</a><br />
5つの色を自動生成してくれ、スペースを押すとまた新たに5つの色を生成してくれます。</p>


2014年のベスト＆ワーストのwebデザイントレンド

HTML5のCanvasの画像処理に挑戦(透過率の変更)

Twigの基本

【PHP】可変長引数リスト

<p>最近はちょっとした動きはもちろん、今までjavascriptで制御していた動きもcssでできるようになってきました。</p>
<p>css3も含めて、動かすプロパティはいっぱいあるのですが、正直把握しきれていないのと、実際どういう動きをするかわからないのもあります。</p>
<p>自分でいろいろ試すのも面白いのですが、<br />
動きのパターンをたくさん用意してくれているサイト(フレームワークになるのかな)を紹介します。</p>
<p>まずはhoverの動きです。</p>
<h2>Hover.css</h2>
<p>様々なパターンが用意されているので、そのまま使ってみたり、<br />
ここから発想させて自分なりの動きを考えてみたりできるかと思います！</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6457" src="/uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-1024x583.jpg" alt="Hover.css - A collection of CSS3 powered hover effects" width="640" height="365" srcset="/uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-1024x583.jpg 1024w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-300x170.jpg 300w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-228x129.jpg 228w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects.jpg 1160w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://ianlunn.github.io/Hover/" target="_blank">Hover.css &#8211; A collection of CSS3 powered hover effects</a></p>
<p>次はクリックでの動きです。</p>
<h2>magic_animations</h2>
<p>hover.cssと同様、様々なパターンが用意されています。<br />
これを見て、動きを考えるのがいいですね！</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6458" src="/uploads-archive/2014/12/Magic-Animations-CSS3-1024x583.jpg" alt="Magic Animations CSS3" width="640" height="365" srcset="/uploads-archive/2014/12/Magic-Animations-CSS3-1024x583.jpg 1024w, /uploads-archive/2014/12/Magic-Animations-CSS3-300x170.jpg 300w, /uploads-archive/2014/12/Magic-Animations-CSS3-228x129.jpg 228w, /uploads-archive/2014/12/Magic-Animations-CSS3.jpg 1160w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://www.minimamente.com/example/magic_animations/" target="_blank">Magic Animations CSS3</a></p>
<p>webサイトのアクセントとしてこのような動きがあるだけでも、<br />
だいぶ違って見えるので、サイトのリッチ感がアップして見えますね。</p>
<p>デザインの発想にも使えるので見てるだけでも楽しいです！</p>


css3だけでhoverやclickの動きを豪華にしよう！

<p>先日、iphone5からNexus5にメインのスマートフォンに変えました。</p>
<p>変えた理由はいろいろあるのですが、一番大きかったのが、Nexus5が一括0円で売られていたことです。</p>
<p>過去にも何度か実施しているようですが、Nexus6が発売されることから在庫処分的な意味合いで最後の投げ売りになっているようです。</p>
<p>一括0円かつ、emobile時代から受け継ぐYmobileの誰とでも定額でトータルの通信費を抑えることが出来つつ、躊躇なくAndroidに変えることが出来たのが、最新のOSであるAndroid5.0の出来が良かったからです。</p>
<p>これは、Androidも慣れないとなという思いで買ったNexus7をAndroid5.0にアップデートして確信したことでした。</p>
<p>昔は、正直iOSには負けてしまっている感が私の中ではあったのですが、もはや互角かそれ以上になっている感があります。</p>
<p>GmailなどのGoogle純正アプリは、Androidのほうがスピード、機能共に既に進んでいます。</p>
<h3 id="toc_0">移行に必要な項目</h2>
<ul>
<li>アプリ</li>
<li>メールアカウント</li>
<li>電話帳</li>
<li>写真</li>
</ul>
<p>移行する項目を考えてみたのですが、これくらいですよね。</p>
<h3>アプリ</h3>
<p>いきなり、割愛しますがiOSとAndroidで両方リリースされているものが多いです。<br />
私の場合、ほとんどローカルにだけ置いておくということがなく、メモやドキュメント関連であればEvernote、その他のファイルはDropbox、Googleドキュメントとクラウドとの連携をしているので、同じアプリをインストールするだけで全く問題ありませんでした。<br />
メモ帳を純正のアプリで保存していたりという方は下記などを参照するといいかもしれません。</p>
<p><a class="link" href="http://d.hatena.ne.jp/rhea/20121124/1353755510" target="_blank">iOSのメモ帳をAndroidと同期する</a></p>
<h4 id="toc_2">メールアカウント</h3>
<p>続いて、メールアカウント<br />
仕事のメールはGoogleApps導入済み、プライベート用もGmailと統一しているので全く問題御座いません。<br />
複数アカウントの切替もAndroidのGmailアプリは早いです。<br />
また、Gmail5.0以降のアプリでは、通常のPOPアカウントやYahoo!メールなど他のアカウントも追加出来るようになっており、統合型のメーラーとして機能します。<br />
試してみたら、@icloud.comのメールアドレスも普通に追加出来ました。<br />
もはや、appleが提供するメールアドレスという制約は全くありませんね。</p>
<h4 id="toc_3">電話帳</h3>
<p>電話帳は、私の中で一番重要でした。</p>
<p>いくつか方法はあるようですが、それぞれサードパーティのアプリを介さず、純正の機能だけで出来る以下の方法が一番早そうです。</p>
<p><a class="link" href="http://andronavi.com/2013/03/255145" target="_blank">意外と簡単にできた！iPhoneからAndroidへの電話帳移行の方法</a></p>
<h4 id="toc_4">写真</h3>
<p>一応写真データも移行しました。<br />
これは、icloudで保存していたものを書き出して、PCに放り込んでおけばいいかなとも思いましたが、容量が16GBから32GBに倍増したこともあって、余裕があるのでやってみました。<br />
Dropboxを介したカメラアップロードという方法もありますが、フォトアプリで閲覧出来るようにするには、以下のGoogle+を経由した方法がオススメです。</p>
<p><a class="link" href="http://c-through.blogto.jp/archives/24647852.html" target="_blank">複数デバイス iOS (iPhone, iPad) / Android / Mac / Windows 間の写真共有に Google+ を使おう！</a></p>
<h3 id="toc_5">まとめ</h2>
<p>便利な世の中になりました。<br />
iphone6PlusのSimフリーが安くなったら、MVNOとの組合わせでまた戻ろうかとも考えていますが、これだけ移行が簡単なのであれば、何も躊躇する必要がありません。</p>


iphoneからAndroidへの移行に際してやったこと

<p>Web上でExcelライクなインターフェイスを作れないかと相談があり調べたところ、</p>
<p>複数のjQueryプラグインがあった。</p>
<p>軽くて見た目が良いが演算ができなかったり、どれも長所短所があり迷っていたところ以下のプラグインを発見。フリーのプラグインの中では最も良いかと。</p>
<p><a href="http://visop-dev.com/Project+jQuery.sheet" target="_blank">http://visop-dev.com/Project+jQuery.sheet</a></p>
<p>&nbsp;</p>
<h2>グラフを表示する</h2>
<p><a href="/uploads-archive/2014/12/1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-6563" src="/uploads-archive/2014/12/1.png" alt="1" width="656" height="302" srcset="/uploads-archive/2014/12/1.png 656w, /uploads-archive/2014/12/1-300x138.png 300w, /uploads-archive/2014/12/1-228x104.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<h2>プルダウンメニュー</h2>
<p><a href="/uploads-archive/2014/12/2.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-6564" src="/uploads-archive/2014/12/2.png" alt="2" width="656" height="301" srcset="/uploads-archive/2014/12/2.png 656w, /uploads-archive/2014/12/2-300x137.png 300w, /uploads-archive/2014/12/2-228x104.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>演算</h2>
<p><a href="/uploads-archive/2014/12/3.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-6565" src="/uploads-archive/2014/12/3.png" alt="3" width="656" height="314" srcset="/uploads-archive/2014/12/3.png 656w, /uploads-archive/2014/12/3-300x143.png 300w, /uploads-archive/2014/12/3-228x109.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>上記以外にもいろいろな機能が揃っており使い切れないレベル。</p>
<p>・表の中のイベントをjsでキャッチ</p>
<p>・ソート</p>
<p>・リードオンリー</p>
<p>・条件分岐</p>
<p>など、何かあればぜひ使ってみようと思った</p>


GoogleスプレッドシートみたいなjQueryプラグイン

cssを使ったちょっとしたテクニック

centosメールサーバー構築（postfix + dovecot + Cyrus SASL）

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


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2014/12/17

2014/12/17

2014/12/10

2014/12/10

2014/12/09

2014/12/09

2014/12/09

2014/12/04

2014/12/04

2014/12/04

2014/11/26

2014/11/26

2014/11/26

2014/11/26

2014/11/26

2014/11/25

2014/11/19

2014/11/19