<p>ネットショップの運営をしていると、セミナーやツールの営業が電話やメールで数多くきます。</p>
<p>耳にしたことがある企業や団体が開催しているものは有料で、結構いい値段だったりすることが多いです。</p>
<p>無料で参加できるような物に限って運営している企業や団体がマイナーなためにどうしても如何わしい印象がしてしまいます。</p>
<p>そこで信用がもてそうな無料のオンライン講座を見つけたのでご紹介します。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/12/img_logo.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6527" src="/uploads-archive/2014/12/img_logo.gif" alt="img_logo" width="364" height="36" /></a></p>
<p>独法の<a href="http://www.smrj.go.jp/">中小企業基盤整備機構</a>が提供している「ネットショップ開店Ch」というオンライン講座です。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/12/header_img.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6530" src="/uploads-archive/2014/12/header_img.jpg" alt="header_img" width="622" height="260" srcset="/uploads-archive/2014/12/header_img.jpg 682w, /uploads-archive/2014/12/header_img-300x125.jpg 300w, /uploads-archive/2014/12/header_img-228x95.jpg 228w" sizes="(max-width: 622px) 100vw, 622px" /></a></p>
<p><a href="http://ec.smrj.go.jp/online/">中小機構「ネットショップ開店Ch」</a></p>
<p>&nbsp;</p>
<p>ターゲットは”これからネットショップを開店したい方々、また既存のネットショップの運営力をアップしたい方々”としています。</p>
<p>内容はかなり基本的な「ネットショップとは何か？」というところからスタートするので、既に運営を担当している方は途中からで良さそうですが、かなり丁寧な印象です。</p>
<p>３つのシリーズに分かれていて、１回１時間程度の動画を全２０回に渡って配信しています。</p>
<p><strong>■シリーズ1：ネットショップを開店するための基礎知識</strong></p>
<p><strong>■シリーズ2：ネットショップで売上を作るための基礎知識</strong></p>
<p><strong>■シリーズ３：ネットショップの運営テクニック</strong></p>
<p>第６回まで既に配信されていて、アーカイブで観る事ができます。次回は１２月１７日（水）に配信予定で、３月７日まで週に１回のペースで配信されます。</p>
<p>&nbsp;</p>
<p>ネットショップ初心者の女性出演者と一緒に学んでいくスタイルでメインの講師は「ネットショップのてらこや」代表の方です。他に47CLUB、ネットショップ総研、エンパワーショップが監修しています。</p>
<p>&nbsp;</p>
<p><iframe loading="lazy" width="560" height="315" src="//www.youtube.com/embed/EwLpl7QhMvg" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<p>webのリテラシーが高くない場合も想定して制作されているので、ECに関するツールやサービスを開発している企業が、顧客向けに教えてあげても良いかもしれません。</p>
<p>&nbsp;</p>
<p>youtubeのチャンネル</p>
<p><a href="https://www.youtube.com/user/smrjec">https://www.youtube.com/user/smrjec</a></p>
<p>&nbsp;</p>


（独）中小機構がネットショップのオンライン講座を無料でやっている

<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デザイントレンド

<p>今週のニュースとしては、一番の衝撃でした。</p>
<p>Google翻訳が遂にミャンマー語に対応しました。</p>
<p><a href="http://googletranslate.blogspot.jp/2014/12/google-translate-10-more-languages-with.html" target="_blank">http://googletranslate.blogspot.jp/2014/12/google-translate-10-more-languages-with.html</a></p>
<p>公式ブログでも言及されているように、長い間チャレンジを続けてきたというくらいミャンマー語の機械翻訳は念願でした。</p>
<p>当社のミャンマー法人の社長がミャンマー語は難しいと言うほど、言語構造が複雑で更にWebにおいては、フォントの両面で実現が難しいとされてきました。</p>
<p>これで、社内の少し距離が近づくことが出来ることが楽しみです。</p>
<p>さらに、今回の10言語が追加され世界90の言語の機械翻訳が出来るようになったとのことです。</p>
<p>ကျေးဇူးတင်ပါသည်</p>


Google翻訳が遂にミャンマー語対応！

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

Twigの基本

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

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2014/12/17

2014/12/17

2014/12/16

2014/12/10

2014/12/10

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