<p>株式会社ジャストシステムがネット調査のサービスを利用して「ネット通販に関するアンケート」を実施しました。</p>
<p>アンケートの対象は「直近半年以内にネットショッピングを利用した」と回答した20代～50代の男女1,000名で,</p>
<p>2014年の11月17日に行われました。</p>
<p>調査結果の全体は有料？で閲覧できるようですが</p>
<p>下は調査結果の一部ですがこれだけでもなかなか興味深いです。</p>
<p><a href="https://www.fast-ask.com/report/report-netshopping-20141205.html#reportform"><img decoding="async" loading="lazy" class="alignnone  wp-image-6470" src="/uploads-archive/2014/12/report-netshopping-20141205.gif" alt="report-netshopping-20141205" width="522" height="397" /></a></p>
<p>「普段使いの商品」を購入する際に購入を後押しする要素は何かという問いについての結果です。</p>
<p>&nbsp;</p>
<h2>送料無料の効果はやはり大きい！</h2>
<p>この問に関して、最も影響が大きいのは「送料の有無」で５６．６％が非常に影響を与える、３３．８％が影響を与えると答えています。</p>
<p>つまり9割近くのお客さんは送料が無料なら買う可能性が上がるという事です。</p>
<p>&nbsp;</p>
<p>それに対してレビューなどの評価については２４．５％が非常に影響を与える、４５，７％が影響を与えると答えていて、合わせて約７５％です。</p>
<p>数字からすると無視できるものでは当然ありませんが、ショップとして優先すべきは送料を無料にする事の様です。</p>
<p>&nbsp;</p>
<h2> お得感が大切、定期的なセールは必須</h2>
<p>送料の有無、レビューなどの評価に続いて影響が大きいのは商品を購入した際に「付与されるポイントの有無」と「期間限定の割引の有無」です。どちらも７０%弱が影響があると答えています。</p>
<p>「ポイントの有無」にしても「期間限定の割引」にしても販売価格が一緒ならば、得した感を与えられる商品を選ぶという事だと思います。いわずもがなですね。</p>
<p>「セール中で今だけ安い」という感覚を与える事はかなり効果があるという事です。７０％弱が影響があると答えているわかですから、定期的にセールは行うべきです。</p>
<p>&nbsp;</p>
<h2>オマケの効果は？</h2>
<p>私が運営を担当するショップでも商品にオマケをつけるという事は行っていますが、実際のところ効果はどうなんでしょうか。</p>
<p>アンケートの結果では約３５％が影響すると答えています。もし、オマケを無くすと送料が無料にできるのであればすぐにでも実践したほうがいいですね。</p>
<p>&nbsp;</p>
<h2>ネットショップが優先すべき要素</h2>
<p>ショップとして売上を伸ばすために何を優先すべきかという問題に戻ると、価格が最も左右する要素なのはもちろんなので、優先順位はおそらくこんな感じです。</p>
<p>&nbsp;</p>
<p>商品価格 ＞ 送料 ＞ 評価（レビュー） ＞ セールの開催 ＞ ポイント ＞ オマケ</p>
<p>&nbsp;</p>
<p>もちろんモール内でショップを展開する場合には表示順位などが大きな要素となってきますが、この優先順位はどんなネットショップでも共通だと思われます。</p>
<p>この優先順位は運営の際にどの要素にどれだけ時間をかけるかという目安にもなると思います。</p>


レビュー？送料？売上向上のためにネットショップが優先するべきなのは何か

【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>スナップチャットが個人間の少額決済を代行するサービス「Snapcash」を始めた。</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/kBwjxBmMszQ?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>&nbsp;</p>
<p>上限は1週間で250ドルで、審査により最大2,500ドルまで増やせるとのこと。</p>
<p>システムはスクエアのものを利用しており、利用者の手数料は無料、スナップチャットが費用を負担するという。</p>
<p>&nbsp;</p>
<p>個人間決済は今後の需要と新たなサービスモデル創出ですごく注目の分野だ。</p>
<p>このようなインフラの整備が進みつつある状況で、どういったサービスが今後流行するかは我々EC事業者は考えておくべき必要があると思う。</p>
<p>Facebookも今年6月PayPal社長をメッセージング製品部門担当バイスプレジデントとして迎え入れた。</p>
<p>個人の顔が割れていて、サービスとしての安心感があるSNS系からこのようなサービスが始まりそうだ。</p>
<p>&nbsp;</p>
<p>個人的には、これらSNS系のサービスが決済代行や海外送金の窓口になる日も近いと思う。</p>
<p>&nbsp;</p>
<p>個人間で例えばその国でしか買えないものを現地の友人に買っておいてもらって支払いをSNSでやったり、<br />
その先には企業のキャンペーンでFacebookアプリを作り、その場で支払いをさせるタイムセールのようなものも出てくると思う。</p>
<p>&nbsp;</p>
<p>もしかしたら今回のSnapcashのように、決済による手数料はとらず、あくまでサービスの強化であり収入源は広告という風潮になるかもしれない。<br />
さらには為替リスクだけとってFacebookコインみたいなドル建ての仮想通貨ができてもおかしくない。</p>
<p>&nbsp;</p>
<p>当面の課題はやはり安全性のアピールだと思うので、やりすぎで市場を壊さないよう慎重に少しずつ進めてもらえるといいなと思った</p>


広がる個人間決済

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

<p>ここはオンラインリソースだけ紹介します。</p>
<h2>Computer Science入門</h2>
<p><a href="https://www.google.com/url?q=https%3A%2F%2Fwww.udacity.com%2Fcourse%2Fcs101&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGdmrWTUY5b_qe3xle9-ddkB1YXqA" target="_blank">Udacity &#8211; intro to CS course</a><br />
<a href="https://www.google.com/url?q=https%3A%2F%2Fwww.coursera.org%2Fcourse%2Fcs101&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNE-mScGCD0MJRKuWuFyLJbIr4XdbA" target="_blank">Coursera &#8211; Computer Science 101</a></p>
<h2>少なくとも１個のオブジェクト指向言語を使ってコーディングする &#8211; C++、JavaもしくはPython</h2>
<h3>初心者コース</h3>
<p><a href="https://www.google.com/url?q=https%3A%2F%2Fwww.coursera.org%2Fcourse%2Fprogramming1&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNERrKn8RoMF2C-tzZ_51XpGA2QzUQ" target="_blank">Coursera &#8211; Learn to Program: The Fundamentals</a><br />
<a href="http://www.google.com/url?q=http%3A%2F%2Focw.mit.edu%2Fcourses%2Felectrical-engineering-and-computer-science%2F6-092-introduction-to-programming-in-java-january-iap-2010%2Findex.htm&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHfuFmBicr4_Zh4dtfmk_mYq0BtNQ" target="_blank">MIT Intro to Programming in Java</a><br />
<a href="https://developers.google.com/edu/python/" target="_blank">Google&#8217;s Python Class</a><br />
<a href="https://www.coursera.org/course/interactivepython" target="_blank">Coursera &#8211; Introduction to Python</a><br />
<a href="http://www.openbookproject.net/thinkcs/python/english2e/" target="_blank">Python Open Source E-Book</a></p>
<h3>中級者コース</h3>
<p><a href="https://www.udacity.com/course/cs212" target="_blank">Udacity&#8217;s Design of Computer Programs</a><br />
<a href="https://www.coursera.org/course/programming2" target="_blank">Coursera &#8211; Learn to Program: Crafting Quality Code</a><br />
<a href="https://www.coursera.org/course/proglang" target="_blank">Coursera &#8211; Programming Languages</a><br />
<a href="http://cs.brown.edu/courses/cs173/2012/OnLine/" target="_blank">Brown University &#8211; Introduction to Programming Languages</a></p>
<h2>他のプログラミング言語を勉強する</h2>
<p>例えば、Java Script、CSS、HTML、Ruby、PHP、C、Perl、Shell、Lisp、Scheme。<br />
<a href="http://www.w3schools.com/" target="_blank">w3school.com &#8211; HTML Tutorial</a><br />
<a href="http://www.codecademy.com/learn" target="_blank">CodeAcademy.com</a></p>
<h2>コードをテストする</h2>
<p><a href="https://www.udacity.com/course/cs258" target="_blank">Udacity &#8211; Software Testing Methods</a><br />
<a href="https://www.udacity.com/course/cs259" target="_blank">Udacity &#8211; Software Debugging</a></p>
<h2>ロジック推理と離散数学を勉強する</h2>
<p><a href="http://www.google.com/url?q=http%3A%2F%2Focw.mit.edu%2Fcourses%2Felectrical-engineering-and-computer-science%2F6-042j-mathematics-for-computer-science-fall-2010%2Findex.htm&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEXtF_m9Lj7XMQZFy8Y92633L2EcQ" target="_blank"> MIT Mathematics for Computer Science</a></p>
<h2>データ構造とアルゴリズムを勉強する</h2>
<p><a href="http://www.google.com/url?q=http%3A%2F%2Focw.mit.edu%2Fcourses%2Felectrical-engineering-and-computer-science%2F6-006-introduction-to-algorithms-spring-2008%2Findex.htm&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEIwTJvLQcPGJL2hPxLibPRvjhbbg" target="_blank">MIT Introduction to Algorithms</a></p>
<h2>オペレーティングシステムについて勉強する</h2>
<p><a href="http://www.youtube.com/watch?v=XgQo4JkN4Bw&amp;list=PL3289DD0D0F0CD4A3" target="_blank">UC Berkeley Computer Science 162</a></p>
<h2>人工知能</h2>
<p><a href="http://see.stanford.edu/see/courseinfo.aspx?coll=86cc8662-f6e4-43c3-a1be-b30d1d179743" target="_blank">Introduction to Robotics</a><br />
<a href="http://see.stanford.edu/see/courseinfo.aspx?coll=63480b48-8819-4efd-8412-263f1a472f5a" target="_blank">Natural Language Processing</a><br />
<a href="http://see.stanford.edu/see/courseinfo.aspx?coll=348ca38a-3a6d-4052-937d-cb017338d7b1" target="_blank">Machine Learning</a></p>
<h2>コンパイラ構築</h2>
<p><a href="https://www.coursera.org/course/compilers" target="_blank">Coursera &#8211; Compilers</a></p>
<h2>暗号化</h2>
<p><a href="https://www.coursera.org/course/crypto" target="_blank">Coursera &#8211; Cryptography</a><br />
<a href="https://www.udacity.com/course/cs387" target="_blank">Udacity &#8211; Applied Cryptography</a></p>
<h2>Parallel Programming</h2>
<p><a href="https://www.coursera.org/course/hetero" target="_blank">Coursera &#8211; Heterogeneous Parallel Programming</a></p>
<h2>元リンク</h2>
<p><a href="http://www.google.com/edu/tools-and-solutions/guide-for-technical-development/index.html" target="_blank">元リンク</a></p>


googleが技術開発のガイドを出しました

<p>先月Twitterで新しいサービスが試験的に開始されました、その名も「<a href="https://blog.twitter.com/2014/introducing-twitter-offers">Twitter offer</a>」。</p>
<p>どんなサービスか簡単に説明します。購入者はあらかじめtwitterにクレジットカード、またはデビットカードの情報を登録します。そして、お店からのoffer（クーポン）を入手します。</p>
<p>クーポンを入手する際には「get offer」というボタンを押します。例えば5000円以上購入したら500円引きというクーポンを入手したりします。</p>
<p>クーポンを発行した実店舗やネットショップで、twitterに登録したカードを使って5000円の買い物をすると自動で割引がされて4500円になります。</p>
<p><a href="/uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6417" src="/uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM.png" alt="Screen_Shot_2014-11-18_at_4.10.58_PM" width="700" height="230" srcset="/uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM.png 700w, /uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM-300x98.png 300w, /uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM-228x74.png 228w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>
<p>購入者側からすると、いちいちクーポンを見せたりする手間がかかりません。</p>
<p>お店側はクーポンを発行するために必要なのはTwitterだけなので、もちろんクーポンを印刷するコストもかかりませんしクーポンを発行するためのプログラムを構築する必要もなくかなり低コストに抑えられます。</p>
<p>さらにクーポンによる効果を測ることも容易になります。</p>
<p><a href="/uploads-archive/2014/12/Offers_Screenshot.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6418" src="/uploads-archive/2014/12/Offers_Screenshot.jpg" alt="Offers_Screenshot" width="621" height="575" srcset="/uploads-archive/2014/12/Offers_Screenshot.jpg 621w, /uploads-archive/2014/12/Offers_Screenshot-300x277.jpg 300w, /uploads-archive/2014/12/Offers_Screenshot-228x211.jpg 228w" sizes="(max-width: 621px) 100vw, 621px" /></a></p>
<p>左はお店から発行されたクーポンを獲得する画面です。</p>
<p>&nbsp;</p>
<p>プロもツイートでクーポンを発行する地域を絞ることもできるので、小規模な店舗にも有効なツールになりますです。</p>
<p>&nbsp;</p>


小規模ショップでもクーポンが簡単に作れる「Twitter Offer」

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>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2014/12/10

2014/12/09

2014/12/09

2014/12/09

2014/12/09

2014/12/04

2014/12/04

2014/12/04

2014/12/03

2014/12/03

2014/11/26

2014/11/26

2014/11/26

2014/11/26

2014/11/26

2014/11/26

2014/11/25

2014/11/19