<p>僕自身はあまりペンツールを使用することが少ないため、あんまり得意ではないです。<br />
台形を作る時ぐらいしか使わないかもしれません笑</p>
<p>サイトをちょっと利用してみましたが、ペンツールを使用する感覚がほぼ本物に近い感じで、最初にチュートリアルステージがあり、方法を説明してくれるのでいい練習になると思います。</p>
<p>僕もまだまだなので、もっと突っ込んで練習してみたいと思います。</p>
<p><a href="http://bezier.method.ac/#">The Bézier Game</a></p>


ベジェ曲線の練習が出来るwebサービス「The Bézier Game」」

<p>jQuery UIに、datepickerとdatetimepickerがありますが、意外とmonthpickerがありません。<br />
今回はその漏れたmonthpickerのプラグインを紹介したいと思います。</p>
<p><a href="/demo/jeff/monthpicker.html" class="demo" target="_blank">デモ</a>を見てください。</p>
<p></p>

		<div id="crayon-649540157c390390069490" 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;link rel="stylesheet" href="css/jquery-ui-1.10.4.custom.min.css"&gt;
&lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.mtz.monthpicker.js"&gt;&lt;/script&gt;&lt;script&gt;
$(function() {
    // monthPick
    var currentTime = new Date();
    var year = currentTime.getFullYear();
    var year2 = parseInt(year)+10;
    var op = {
            pattern: 'yyyy-mm',
            selectedYear: year,
            startYear: year,
            finalYear: year2,
            monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        };
    $(".monthPick").monthpicker(op);
});
&lt;/script&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-649540157c390390069490-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157c390390069490-2">2</div><div class="crayon-num" data-line="crayon-649540157c390390069490-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157c390390069490-4">4</div><div class="crayon-num" data-line="crayon-649540157c390390069490-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157c390390069490-6">6</div><div class="crayon-num" data-line="crayon-649540157c390390069490-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157c390390069490-8">8</div><div class="crayon-num" data-line="crayon-649540157c390390069490-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157c390390069490-10">10</div><div class="crayon-num" data-line="crayon-649540157c390390069490-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157c390390069490-12">12</div><div class="crayon-num" data-line="crayon-649540157c390390069490-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157c390390069490-14">14</div><div class="crayon-num" data-line="crayon-649540157c390390069490-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157c390390069490-16">16</div><div class="crayon-num" data-line="crayon-649540157c390390069490-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157c390390069490-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-649540157c390390069490-1"><span class="crayon-h">&lt;</span><span class="crayon-e">link </span><span class="crayon-i">rel</span>=<span class="crayon-s">"stylesheet"</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-s">"css/jquery-ui-1.10.4.custom.min.css"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157c390390069490-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-649540157c390390069490-3"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.mtz.monthpicker.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157c390390069490-4"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157c390390069490-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// monthPick</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157c390390069490-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">currentTime</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-r">Date</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157c390390069490-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">year</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">currentTime</span><span class="crayon-sy">.</span><span class="crayon-e">getFullYear</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-649540157c390390069490-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">year2</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">parseInt</span><span class="crayon-sy">(</span><span class="crayon-i">year</span><span class="crayon-sy">)</span>+<span class="crayon-cn">10</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157c390390069490-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">op</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-649540157c390390069490-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">pattern</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'yyyy-mm'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540157c390390069490-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">selectedYear</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">year</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157c390390069490-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">startYear</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">year</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540157c390390069490-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">finalYear</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">year2</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157c390390069490-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">monthNames</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">'1月'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'2月'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'3月'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'4月'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'5月'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'6月'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'7月'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'8月'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'9月'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'10月'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'11月'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'12月'</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-649540157c390390069490-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157c390390069490-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".monthPick"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">monthpicker</span><span class="crayon-sy">(</span><span class="crayon-i">op</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157c390390069490-17"><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-649540157c390390069490-18"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>jquery.mtz.monthpicker.jsが<a href="https://github.com/lucianocosta/jquery.mtz.monthpicker" target="_blank">github</a>からダウンロードできます。</p>

【jQuery】monthpicker

<p>１０月２８日からヤマト運輸が「国際クール宅急便」を開始すると発表しました。</p>
<p>日本と香港との間でサービスを利用でき、国内で展開されているクール宅急便と同様に冷蔵と冷凍の荷物を送る事ができるという事です。</p>
<p>日本の魚介類や和牛はアジアで人気ですから、このサービスを利用すれば食品の生産者や、小規模に展開する加工業者が海外を相手にビジネスを展開できます。</p>
<h4>午前中に集荷で翌日香港へ届く</h6>
<p><a href="/uploads-archive/2014/09/kokusai_cool_flow.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5821" src="/uploads-archive/2014/09/kokusai_cool_flow.jpg" alt="kokusai_cool_flow" width="680" height="288" srcset="/uploads-archive/2014/09/kokusai_cool_flow.jpg 680w, /uploads-archive/2014/09/kokusai_cool_flow-300x127.jpg 300w, /uploads-archive/2014/09/kokusai_cool_flow-228x96.jpg 228w" sizes="(max-width: 680px) 100vw, 680px" /></a></p>
<p>参考：<a href="http://www.kuronekoyamato.co.jp/kokusaicooltakkyubin/kokusaicooltakkyubin_b.html">クロネコヤマト国際クール宅急便</a>より</p>
<p>日本から荷物を送る場合は沖縄を経由して香港に届けられるという経路になります。荷物を午前中に集荷あるいは持ち込みすれば、翌日の午後２時以降には荷物が届くそうです。沖縄からなら夕方までに集荷・持ち込みで大丈夫。</p>
<p>ほとんど国内に発送するのと変わらないスピードです。ただ送料がやはり高い！</p>
<p>最も小さいサイズの６０サイズ（縦・横・高さの３辺の合計６０ｃｍ以内、重さ２キロまで）でも送料６０５０円、１２０サイズ（計１２０ｃｍ以内、重さが１５キロまで）だと送料２６９５０円。</p>
<p>富裕層相手に単価の高い物を送るというスタイルしか通販では難しい感じです。ブランド牛なんかを扱えば勝算があるかも。</p>
<h4>配送状況も確認できる</h6>
<p>国をまたぐ場合、荷物が今どこにあるのかを状況を確認することは困難です。海外旅行に行った際に同じ飛行機に乗っていたはずの自分の荷物が行方不明になるなんて事もざらにあるくらいです。</p>
<p>単価の高い商品を香港へ販売しても、ちゃんと届かないなんて事があったら損失大です。しかし国際クール宅急便は、香港にあるヤマト運輸と日本のヤマト運輸のみで荷物の配送が行われるので、荷物がどこにあるのか配送状況を確認もできるそうです。</p>
<p>&nbsp;</p>
<p>国際宅急便はすでにシンガポール、マレーシア、台湾、中国（上海）で展開しているので、国際クール宅急便も今後さらにサービスを利用できる地域が広がると思われます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


アナタも香港に向けて生鮮品やスイーツを販売できる！？

<p>遂に、Twitterで直接購入出来る「Buy」ボタンがスタートしたようです。</p>
<p>Facebookコマースというのも2012年ほどから様々な立ち上がりましたが、どれもサードパーティがFacebookアプリとして提供しているものでした。</p>
<p>Facebookというソーシャルメディアの性質か、タイムラインに商品を流して購入をするというシーンはあまり定着せず、最近では、話題を見かけることが少なくなって来ました。</p>
<p>そんなところで満を持してTwitterが本体のサービスとしてソーシャルコマースを提供してきました。</p>
<p>私は、弊社のサービスのカラコン通販サイトと初めて相性がいいのではないかと思います。</p>
<p>まずは、ごく一部のアメリカでの利用者を対象となっており、日本での登場を待ち望みます。</p>
<p><a href="https://blog.twitter.com/2014/testing-a-way-for-you-to-make-purchases-on-twitter">https://blog.twitter.com/2014/testing-a-way-for-you-to-make-purchases-on-twitter</a></p>
<h2>紹介動画</h2>
<p><iframe loading="lazy" width="560" height="315" src="//www.youtube.com/embed/dEGk5LRumJM" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<h2>ポイント</h2>
<ul>
<li>Twitterのユーザー層とカラコンのユーザー層の相性がいい。<br />
参考：<a href="http://jp.wsj.com/news/articles/SB10001424052702303493804579535280087968794">若者はFacebookよりTwitterが好き　利用者の高齢化と関係か</a></li>
<li>タイムセールとタイムラインの相性がいい。<br />
参考：<a href="http://www.marsdesign.co.jp/blog/design/twitter-5.html">&#8220;タイムセールなう&#8221;で成功したTwitterプロモーション</a></li>
<li>情報発信から購買へと一直線で繋げられる。
<ul>
<li>リピーターのご指名買いにおいて最短距離を保てる。</li>
<li>情報を発信→サイトに誘導→購買ステップ</li>
<li>情報発信→Twitter内で購入</li>
</ul>
</li>
</ul>
<h3>おまけ</h4>
<p>FacebookもBuyボタンの準備をしているようです。</p>
<p><a href="http://jp.techcrunch.com/2014/07/30/20140729an-obituary-for-facebook-gifts/" target="_blank">http://jp.techcrunch.com/2014/07/30/20140729an-obituary-for-facebook-gifts/</a></p>


Twitter「Buy」ボタンを実装！

<h2>概要</h2>
<p>通常、WEBアプリケーションには外部からの入力などに応じて表示が変化する箇所があり、この部分のHTML生成の実装に問題があると、悪意のあるjavascriptコードをHTMLやCSSに埋め込まれ、XSSという脆弱性が生じます。</p>
<p>WEBアプリケーションにXSS脆弱性がある場合には、以下の影響があります。</p>
<ul>
<li>サイト利用者のブラウザ上で、攻撃者の用意したスクリプトの実行によりクッキー値を盗まれ、成りすましの被害にあう。</li>
<li>ブラウザ上で、スクリプトを実行させられ、サイト利用者の権限でWEBアプリケーションの機能を悪用される。</li>
<li>WEBサイト上に偽の入力フォームが表示され、フィッシングにより利用者が個人情報を盗まれる。</li>
</ul>
<h2>対策</h2>
<h3>HTML文字参照によりエスケープする</h4>
<p>外部から入力された文字列を表示する直前にhtmlspecialchars()関数でエスケープします。</p>

		<div id="crayon-649540157c1b2371306002" 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;">
htmlspecialchars('文字列',ENT_QUOTES,'文字エンコード');</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-649540157c1b2371306002-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-649540157c1b2371306002-1"><span class="crayon-e">htmlspecialchars</span><span class="crayon-sy">(</span><span class="crayon-s">'文字列'</span><span class="crayon-sy">,</span><span class="crayon-i">ENT_QUOTES</span><span class="crayon-sy">,</span><span class="crayon-s">'文字エンコード'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>こうすると、&lt;は&amp;lt;に、&gt;は&amp;gt;に、&amp;は&amp;amp;に、”は&amp;quote;に、’は&amp;#39;に変換されます。</p>
<p>htmlspecialchars()関数の第2引数は必ずENT_QUOTESを指定します。これを使用しないとシングルコーテーションが変換されず、脆弱性が残る可能性があります。属性値については、ダブルコーテーションで囲んでエスケープします。</p>
<p>&nbsp;</p>
<h3>HTTP レスポンスヘッダーに文字コードを指定する</h4>
<p>HTTP のレスポンスヘッダーのContent-Type フィールドには、「Content-Type: text/html; charset=UTF-8」のように、文字コード(charset)を指定します。</p>
<p>HTML の META タグでも、Content-Type で charset を指定できますが、ブラウザの挙動に依存するため、確実に正しい文字コードで表示できるように、HTTP のレスポンスヘッダーで文字コードを指定するようにします。</p>
<p>&nbsp;</p>
<h3>URL は「http://」か「https://」で始まるもののみ出力する</h4>
<p>URL は 「http://」や「https://」だけでなく、JavaScript を実行できる「javascript:」という記述もできます。スクリプトが注入されないように、URL は「http://」と「https://」から始まるもののみ出力します(ホワイトリスト方式)。正規表現などでURLかどうかチェックするのが望ましいです。</p>
<p>&nbsp;</p>
<h3>javascript<script></script>要素の内容を動的に生成しない</h4>
<p>&lt;script&gt;&lt;/script&gt; 要素内容の動的な生成は、安全な形でエスケープするのは非常に難しいため、動的に生成しないようにしてください。</p>

XSS(クロスサイト・スクリプティング)

<p>現在２つ程気になっているweb制作をサポートしてくれるようなwebサービスがあります。</p>
<p>まだ試せてないのですが、いずれ試してみたいと思うものなのでとりあえず忘れないように書いておきます。</p>
<p>&nbsp;</p>
<h2><a href="https://c9.io/" target="_blank">Cloud9 &#8211; Your development environment, in the cloud</a></h2>
<p>ひとつはCloud9というサービス(ツール)です。</p>
<p><a href="https://c9.io/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5805" src="/uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-1024x609.jpg" alt="Cloud9 - Your development environment, in the cloud" width="640" height="381" srcset="/uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-1024x609.jpg 1024w, /uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-300x178.jpg 300w, /uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-228x135.jpg 228w, /uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud.jpg 1192w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>これはブラウザ上で使用できるツールで以下のような特徴があります。</p>
<p>&nbsp;</p>
<ul>
<li>そもそも高機能テキストエディタである</li>
<li>ブラウザチェックができる（IEにも対応！）</li>
<li>リアルタイムエラーチェック機能(HTMLやjavascript等)</li>
<li>バージョン管理</li>
<li>画像加工(リサイズ、トリミング、回転)</li>
</ul>
<p>&nbsp;</p>
<p>いろんな機能が混ざっていてすごいです。。。</p>
<p>&nbsp;</p>
<p>詳しく知りたい方は以下もご覧下さい！</p>
<p><a href="http://plus.appgiga.jp/masatolan/2014/08/19/53354/" target="_blank">無料で300以上のクロスブラウザチェックを搭載した「Cloud9」エディタの神進化が話題に！ | APPGIGA!!（アプギガ）</a><br />
&nbsp;</p>
<h2><a href="http://universions.com/" target="_blank">Webクリエイターのためのファイル管理コラボレーションツール｜universions</a></h2>
<p>そして2つめは、いわゆるgitのようなツールの「universions」です。</p>
<p>&nbsp;</p>
<p><a href="http://universions.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5806" src="/uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-1024x609.jpg" alt="Webクリエイターのためのファイル管理コラボレーションツール｜universions" width="640" height="381" srcset="/uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-1024x609.jpg 1024w, /uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-300x178.jpg 300w, /uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-228x135.jpg 228w, /uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160.jpg 1192w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>こちらの特徴は、</p>
<p>&nbsp;</p>
<ul>
<li>ファイル管理(バージョン管理)</li>
<li>チャット</li>
<li>タスク管理</li>
<li>プレビュー機能(AIやPSDも見れる！)</li>
<li>Wiki</li>
</ul>
<p>&nbsp;</p>
<p>バージョン管理とプレビューでAIとPSDが見れるのはいいですね！</p>
<p>&nbsp;</p>
<p>以上、今後試してみたいサービスでした。</p>


気になるweb制作サポートサービス

【Symfony2】サーバー別でパラメーターを設定

<p>ECの需要拡大によるREITの好調は以前の記事で紹介したが、</p>
<p>更なる需要拡大を見込んだ動きが最近増えてきているようなので、主要なニュースをまとめてみた。</p>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>会社名</th>
<th>情報</th>
</tr>
<tr>
<td>伊藤忠商事</td>
<td>3年で1000億円</td>
</tr>
<tr>
<td>住友商事</td>
<td>2015年までに500億円</p>
<p>中長期的に1000億円</td>
</tr>
<tr>
<td>三菱商事</td>
<td>REITを設立し2000億円運用</td>
</tr>
<tr>
<td>三井物産</td>
<td>REITを設立し2000億円運用</td>
</tr>
<tr>
<td>スクロール</td>
<td>化粧品および健康食品通販物流拠点に13億円</td>
</tr>
<tr>
<td>イー・ロジット</td>
<td>12,000坪の物流センター新設</td>
</tr>
<tr>
<td>丸紅</td>
<td>子会社統合し新会社</p>
<p>2018年度に売上500億、経常35億目指す</td>
</tr>
<tr>
<td>グローバル・ロジスティック・プロパティーズ</td>
<td>43,100平米の物流センター新設</td>
</tr>
<tr>
<td>リコーロジスティクス</td>
<td>49,878平米の物流センターを城南島に新設</td>
</tr>
<tr>
<td>アマゾン</td>
<td>200,000平米の物流センターを小田原に新設</td>
</tr>
<tr>
<td>良品計画</td>
<td>105,000平米139億円の物流センターを新設</td>
</tr>
</tbody>
</table>
<p>REIT、物流会社に続けて商社系の大きな資金が入ってくることで</p>
<p>ECにとってはサービス合戦が加速しそうだ。</p>
<p>大規模な物流センターが増えると、配送業者が多様化し、価格は下がるし配送スピードも増しそう。</p>
<p>関東であれば即日、などエリア限定での即日サービスは、配送センターを持っていないEC事業者でも近いうちにできるようになりそうだ</p>


【EC】国内の物流系の投資が活況

<p>HTML5のCanvasではCanvas以外のHTML要素とCSSだけではできないような、</p>
<p>複雑な効果を使ったアニメーションのビジュアルなども、Canvasに対応したブラウザであれば表示することができるというメリットがありますが、</p>
<p>それを実現するためには、高度なJavaScriptや画像処理の知識が必要であったりして、</p>
<p>実際に制作するには若干ハードルが高かったり、</p>
<p>制作のために多くのコードを書かなければならなかったりといった問題があります。</p>
<p>&nbsp;</p>
<p>CanvasなどのHTML5の技術をより扱いやすくするためのJavaScriptのライブラリの一つに、</p>
<p>Adobeの制作したCreateJSがありますが、</p>
<p>FlashのCS6ではFlash上で制作したアニメーションなどを、</p>
<p>CreateJSを使ったHTML5の形式で書き出す拡張機能があります。</p>
<p>さらにFlash CCでは、拡張機能ではなく、HTML5での書き出しを前提とした制作も可能になっているようです。</p>
<p>&nbsp;</p>
<p>この機能を使えば、Flashを通してより簡単にCanvasアニメーション等を制作することができます。</p>
<p>今回はこのFlash CS6で、実際にCanvasアニメーションを作ってみました。</p>
<p>&nbsp;</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="/demo/ninomiya/51/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<h3>1.Flash CS6に「Toolkit for CreateJS」が入っているか確認する。</h4>
<p>Flash CS6を最新の状態にアップデートしていれば、今回のHTML5の書き出しに必要な</p>
<p>「Toolkit for CreateJS」という拡張機能が入っているはずなのですが、</p>
<p>入っていない場合は↓<a href="http://www.adobe.com/jp/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html" target="_blank">こちら</a>よりダウンロードして拡張機能をインストールする必要があります。</p>
<p><a class="link" href="http://www.adobe.com/jp/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html" target="_blank">Flash Professional Toolkit for CreateJSの使用</a></p>
<p><a href="/uploads-archive/2014/09/ss01.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5775" src="/uploads-archive/2014/09/ss01-300x190.jpg" alt="ss01" width="300" height="190" srcset="/uploads-archive/2014/09/ss01-300x190.jpg 300w, /uploads-archive/2014/09/ss01-1024x651.jpg 1024w, /uploads-archive/2014/09/ss01-228x145.jpg 228w, /uploads-archive/2014/09/ss01.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>「ウィンドウ」&gt;「Toolkit for CreateJS」</p>
<p>&nbsp;</p>
<h3>2.Flashアニメーションの制作</h4>
<p>Flash CS6でモーショントゥイーンやActionScript3などを駆使してFlashアニメーションを制作します。</p>
<p>今回DEMOで作ってみたのは、Canvasでないと再現が困難になる、パスのマスクを使ったアニメーションです。</p>
<p><a href="/uploads-archive/2014/09/ss02.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5776" src="/uploads-archive/2014/09/ss02-300x190.jpg" alt="ss02" width="300" height="190" srcset="/uploads-archive/2014/09/ss02-300x190.jpg 300w, /uploads-archive/2014/09/ss02-1024x651.jpg 1024w, /uploads-archive/2014/09/ss02-228x145.jpg 228w, /uploads-archive/2014/09/ss02.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<h3>3.「Toolkit for CreateJS」でHTML5を書き出し</h4>
<p>「ウィンドウ」&gt;「Toolkit for CreateJS」でToolkit for CreateJSを開き、</p>
<p>パブリッシュをクリックして書き出します。</p>
<p>これで書き出しは完了です。</p>
<p><a href="/uploads-archive/2014/09/ss03.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5778" src="/uploads-archive/2014/09/ss03-300x190.jpg" alt="ss03" width="300" height="190" srcset="/uploads-archive/2014/09/ss03-300x190.jpg 300w, /uploads-archive/2014/09/ss03-1024x651.jpg 1024w, /uploads-archive/2014/09/ss03-228x145.jpg 228w, /uploads-archive/2014/09/ss03.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Toolkit for CreateJS似寄る書き出しでは「ぼかし」などのフィルターに対応していなかったり、</p>
<p>半透明のマスクはActionScript3を理解していなければ制作ができなかったりするなど、新たな壁も見つかりましたが、</p>
<p>Canvas制作への道が少し開けたような気がします。</p>
<p>&nbsp;</p>


Flash CS6でHTML5のCanvasを書き出す方法

<p>久しぶりにEC-CUBEネタです。</p>
<p>いまさらですが、Bootstrapを勉強したいな〜と幅を広げる意味で漠然と考えていたのですが、なかなかそのきっかけを掴めず取り組んでいなかったのですが、よいものを見つけてしまいました。</p>
<p><a href="http://blog.nagaki.me/practice/released-eccube-bootstrap.html" target="_blank">http://blog.nagaki.me/practice/released-eccube-bootstrap.html</a></p>
<blockquote><p>EC CUBEのデフォルトテーマがイケてないし、イケる予定もなさそうだったので、 &gt;GitとかGitHubとかTwitterBootstrapとかHTML5の勉強も兼ねてテーマを作りました。</p></blockquote>
<p>作者の方の引用ですが、私はまだ、作って頂いたBootstrapのテンプレートを用いての勉強です。<br />
こういったアウトプットが出来るのってすごいなぁと思います。</p>
<p>ちなみに、作者様のサイトでは、</p>
<blockquote><p>使用出来るバージョンは2.12系です</p></blockquote>
<p>とありましたが、2.13系でも問題ありませんでした。</p>
<h2>設定方法</h3>
<p>まずは、こちらのテンプレートの適用の方法が通常とは違います。<br />
レスポンシブウェブデザインとなっておりますので、これもスマートフォン用のテンプレートを出力するデフォルトの仕様とは異なります。<br />
そして、SQLを操作する必要があります。ノンプラグラマの私はphpMyAdminでSQLを実行しましたが、そこら辺は割愛させていただきます。</p>
<h3>テンプレートのダウンロードとアップロード</h4>
<p><a href="https://github.com/nagaki/eccube-bootstrap" target="_blank">https://github.com/nagaki/eccube-bootstrap</a></p>
<p>解凍をすると<br />
data<br />
html<br />
というフォルダが存在します。</p>
<p>通常通りインストールしていれば、そのまま、ルートのディレクトリにアップをすれば問題ないのですが、私のデモ環境は階層を変えていたので、調整してアップします。</p>
<p>基本は、それぞれのデータを以下のディレクトリに格納して下さい。<br />
data\Smarty\templates\<br />
html\user_data\packages\bootstrap</p>
<h3>SQL文</h4>
<p>このままですと、アップロードしただけですので、EC-CUBEのデータベースにBootstrapのテンプレートを認識させるために、以下のSQLを流します。</p>

		<div id="crayon-649540157bd99804374418" 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;">
INSERT INTO dtb_templates VALUES ("bootstrap", 10, "bootstrap", now(), now());</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-649540157bd99804374418-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-649540157bd99804374418-1"><span class="crayon-e">INSERT </span><span class="crayon-e">INTO </span><span class="crayon-e">dtb_templates </span><span class="crayon-e">VALUES</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-s">"bootstrap"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">10</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"bootstrap"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">now</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">now</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>テンプレートの適用</h4>
<p><a href="/uploads-archive/2014/09/screenshot.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5761" src="/uploads-archive/2014/09/screenshot-300x105.png" alt="screenshot" width="300" height="105" srcset="/uploads-archive/2014/09/screenshot-300x105.png 300w, /uploads-archive/2014/09/screenshot-1024x361.png 1024w, /uploads-archive/2014/09/screenshot-228x80.png 228w, /uploads-archive/2014/09/screenshot.png 1037w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>SQLをちゃんと適用すると上図のように、管理画面から選択が出来るようになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5762" src="/uploads-archive/2014/09/screenshot1-300x170.png" alt="screenshot" width="300" height="170" srcset="/uploads-archive/2014/09/screenshot1-300x170.png 300w, /uploads-archive/2014/09/screenshot1-228x129.png 228w, /uploads-archive/2014/09/screenshot1.png 979w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>適用するとこのデフォルト画面から</p>
<p><a href="/uploads-archive/2014/09/6e04f4c9acb4cb808d88c0909224dbac.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5763" src="/uploads-archive/2014/09/6e04f4c9acb4cb808d88c0909224dbac-259x300.png" alt="ECサイトのあれこれテストサイト 2014-09-03 15-18-54" width="259" height="300" srcset="/uploads-archive/2014/09/6e04f4c9acb4cb808d88c0909224dbac-259x300.png 259w, /uploads-archive/2014/09/6e04f4c9acb4cb808d88c0909224dbac-885x1024.png 885w, /uploads-archive/2014/09/6e04f4c9acb4cb808d88c0909224dbac-228x263.png 228w, /uploads-archive/2014/09/6e04f4c9acb4cb808d88c0909224dbac.png 1235w" sizes="(max-width: 259px) 100vw, 259px" /></a></p>
<p>スタイリッシュな画面になりました！</p>
<h3>スマートフォンテンプレートへも適用</h4>
<p>このままですとスマートフォンはまだデフォルトのテンプレートを表示してしまいますので、スマートフォンへもこのレスポンシブ対応したBootstrapのテンプレートを表示させるように致します。</p>
<p>こちらも引用となりますが、以下を削除もしくはコメントアウトをすると、スマートフォンの判定をせずにそのままPCのテンプレートを表示します。</p>
<blockquote><p>レスポンシブテーマなので、data/class/SC_Display.phpにあるスマートフォン判定のコードを削除することで使用できます。</p>
<p>// data/class/SC_Display.php:141<br />
function detectDevice() {<br />
$nu = new Net_UserAgent_Mobile();<br />
$su = new SC_SmartphoneUserAgent_Ex(); //削除<br />
if ($nu-&gt;isMobile()) {<br />
return DEVICE_TYPE_MOBILE;<br />
} elseif ($su-&gt;isSmartphone()) { //削除<br />
return DEVICE_TYPE_SMARTPHONE; //削除<br />
} else {<br />
return DEVICE_TYPE_PC;<br />
}<br />
}</p></blockquote>
<p><a href="/uploads-archive/2014/09/screenshot2.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5764" src="/uploads-archive/2014/09/screenshot2-201x300.png" alt="screenshot" width="201" height="300" srcset="/uploads-archive/2014/09/screenshot2-201x300.png 201w, /uploads-archive/2014/09/screenshot2-228x340.png 228w, /uploads-archive/2014/09/screenshot2.png 378w" sizes="(max-width: 201px) 100vw, 201px" /></a></p>
<h2>まとめ</h3>
<p>素晴らしいテンプレートを作ってくれた作者に感謝。</p>
<p>これを機にいろいろ触ってみたいと思います。</p>

EC-CUBEの無料Bootstrapテンプレート

<p>ネットで何かを買う時、店舗側がせっかく「翌日にお届け」としていても、帰宅する時間が遅いという理由で結局週末に配達指定をするなんて人は少なくないはず。そんな人には嬉しいサービスが楽天で始まりました。</p>
<p>その名も「<a href="http://event.rakuten.co.jp/r-box/">楽天ＢＯＸ</a>」、楽天市場で購入した商品を通勤や通学の途中で受け取れるというもの。駅などに設置されたコインロッカーの様なＢＯＸに商品が届き、購入時に送られるパスワードでロッカー開けて商品を受け取る事ができます。（参考：<a href="http://event.rakuten.co.jp/r-box/">http://event.rakuten.co.jp/r-box/</a>）</p>
<p>８月２８日からサービスがスタートし、現時点では西鉄天神大牟田線の西鉄福岡(天神)駅、薬院駅、大阪市営地下鉄なんば駅（予定？）で利用できるようです。</p>
<p>駅なので、もちろん２４時間利用できるわけではないですが福岡では５：３０～２３：３０<span style="color: #000000;">、大阪では５：１５～２４：１５と深夜まで大丈夫。</span></p>
<p><a href="/uploads-archive/2014/09/con03_map.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-5752" src="/uploads-archive/2014/09/con03_map.jpg" alt="con03_map" width="707" height="305" srcset="/uploads-archive/2014/09/con03_map.jpg 950w, /uploads-archive/2014/09/con03_map-300x129.jpg 300w, /uploads-archive/2014/09/con03_map-228x98.jpg 228w" sizes="(max-width: 707px) 100vw, 707px" /></a></p>
<p>&nbsp;</p>
<p>利用の手順としては、楽天市場で商品を購入し配送方法を選ぶ際に「楽天ＢＯＸ」を選択。この時に受取で利用する楽天ＢＯＸも指定します。</p>
<p>その後メールでロッカーを開けるパスワードが送られてきて、好きな時間に楽天ＢＯＸに取りに行くという流れです。保管期間は３日間で、やはりサイズ制限があります。（大きい物は家まで配達してもらうと思いますが・・・）</p>
<p>本や小物を購入する時にはかなり使えそうな気がします。</p>
<p>現時点では代引きが使えず、冷蔵・冷凍の商品も利用不可との事です。とはいえ本格的に普及した場合は、代引き支払用の精算機がくっついたり、冷蔵庫っぽいのも出てくるはずです。</p>
<p>現時点では楽天のみのサービスですし、都内に存在しないので、類似したサービスが出てきそうな気がします。駅のすぐそばで荷物受取代行なんてビジネスもありかも、タバコ屋程度の敷地があればできそう。</p>


これなら受け取れる！深夜に帰宅する人に便利な楽天ＢＯＸ

<p>人気のプログラミング言語のランキングの記事を見て興味があったので書いてみました。</p>
<p>ランキングを発表しているところはいくつかありますが、今回は、TIOBE(オランダのTOIBE Software) と RedMonk(産業調査会社) のランキングになります。</p>
<p>&nbsp;</p>
<h5 id="smoothplay1-1">TIOBEによるランキング</h4>
<p>TIOBEによるランキングでは、Google、Bing、Wikipedia、Amazonなどの複数の検索エンジンで言語名で検索数を出し、エンジン毎に集計を行います。</p>
<table class="table table-striped table-top20">
<thead>
<tr>
<th style="font-size: 12px;">Programming Language</th>
<th style="font-size: 12px;">2014/8</th>
<th style="font-size: 12px;">2013/8</th>
<th style="font-size: 12px;">Ratings</th>
<th style="font-size: 12px;">Change</th>
</tr>
</thead>
<tbody>
<tr>
<td>C</td>
<td>1</td>
<td>2</td>
<td>16.401%</td>
<td>+0.43%</td>
</tr>
<tr>
<td>Java</td>
<td>2</td>
<td>1</td>
<td>14.984%</td>
<td>-0.99%</td>
</tr>
<tr>
<td>Objective-C</td>
<td>3</td>
<td>4</td>
<td>9.552%</td>
<td>+1.47%</td>
</tr>
<tr>
<td>C++</td>
<td>4</td>
<td>3</td>
<td>4.695%</td>
<td>-4.68%</td>
</tr>
<tr>
<td>Basic</td>
<td>5</td>
<td>7</td>
<td>3.635%</td>
<td>-0.24%</td>
</tr>
<tr>
<td>C#</td>
<td>6</td>
<td>6</td>
<td>3.409%</td>
<td>-2.71%</td>
</tr>
<tr>
<td>Python</td>
<td>7</td>
<td>8</td>
<td>3.121%</td>
<td>-0.48%</td>
</tr>
<tr>
<td>PHP</td>
<td>8</td>
<td>5</td>
<td>2.864%</td>
<td>-3.83%</td>
</tr>
<tr>
<td>Perl</td>
<td>9</td>
<td>11</td>
<td>2.218%</td>
<td>+0.18%</td>
</tr>
<tr>
<td>JavaScript</td>
<td>10</td>
<td>9</td>
<td>2.172%</td>
<td>+0.08%</td>
</tr>
<tr>
<td>Visual Basic</td>
<td>11</td>
<td>&#8211;</td>
<td>2.014%</td>
<td>+2.01%</td>
</tr>
<tr>
<td>Visual Basic .NET</td>
<td>12</td>
<td>13</td>
<td>1.310%</td>
<td>-0.01%</td>
</tr>
<tr>
<td>Ruby</td>
<td>13</td>
<td>10</td>
<td>1.242%</td>
<td>-0.83%</td>
</tr>
<tr>
<td>F#</td>
<td>14</td>
<td>23</td>
<td>1.096%</td>
<td>+0.56%</td>
</tr>
<tr>
<td>Pascal</td>
<td>15</td>
<td>18</td>
<td>1.044%</td>
<td>+0.42%</td>
</tr>
<tr>
<td>Transact-SQL</td>
<td>16</td>
<td>12</td>
<td>1.043%</td>
<td>-0.35%</td>
</tr>
<tr>
<td>ActionScript</td>
<td>17</td>
<td>38</td>
<td>1.001%</td>
<td>+0.69%</td>
</tr>
<tr>
<td>Delphi/Object Pascal</td>
<td>18</td>
<td>14</td>
<td>0.915%</td>
<td>-0.00%</td>
</tr>
<tr>
<td>Lisp</td>
<td>19</td>
<td>16</td>
<td>0.828%</td>
<td>+0.08%</td>
</tr>
<tr>
<td>PL/SQL</td>
<td>20</td>
<td>17</td>
<td>0.786%</td>
<td>+0.03%</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h5 id="smoothplay1-1">RedMonkによるランキング</h4>
<p>RedMonkによるランキングでは、TOIBEとは異なりオープンソースのプロジェクトホスティングサイトGitHubの利用実態と、プログラミングのQ&amp;AサイトStackOverflowにおける会話の動向を指標としてランキングを作成しています。</p>
<table class="table table-striped table-top20">
<thead>
<tr>
<th style="font-size: 12px;">Programming Language</th>
<th style="font-size: 12px;">2014/6</th>
<th style="font-size: 12px;">2013/6</th>
<th style="font-size: 12px;">Ratings</th>
<th style="font-size: 12px;">Change</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>1</td>
<td>1</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>JavaScript</td>
<td>2</td>
<td>2</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>PHP</td>
<td>3</td>
<td>3</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>Python</td>
<td>4</td>
<td>4</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>C#</td>
<td>5</td>
<td>6</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>C++</td>
<td>6</td>
<td>7</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>Ruby</td>
<td>7</td>
<td>5</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>CSS</td>
<td>8</td>
<td>&#8211;</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>C</td>
<td>9</td>
<td>8</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>Objective-C</td>
<td>10</td>
<td>9</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>Shell</td>
<td>11</td>
<td>10</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>Perl</td>
<td>12</td>
<td>11</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>R</td>
<td>13</td>
<td>16</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>Scala</td>
<td>14</td>
<td>12</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>Haskell</td>
<td>15</td>
<td>14</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>Matlab</td>
<td>16</td>
<td>19</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>Visual Basic</td>
<td>17</td>
<td>20</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>CoffeeScript</td>
<td>18</td>
<td>17</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>Clojure</td>
<td>19</td>
<td>&#8211;</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
<tr>
<td>Groovy</td>
<td>20</td>
<td>18</td>
<td>&#8211;</td>
<td>&#8211;</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>集計方法は各々異なりますが、上位にランクする言語はだいたい共通しているように思います。初めてプログラミング言語を学ばれる方や、新たに言語を学ばれる方など参考にしていただけたらと思います。</p>


プログラミング言語人気ランキング

OpenStreetMapを使ってみた

<p>ふだん、mysql内のプロセスの確認やステータスの確認は、下記コマンドで行えます。</p>

		<div id="crayon-649540157b961398731482" 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;">
mysql&gt; show processlist;</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-649540157b961398731482-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-649540157b961398731482-1"><span class="crayon-i">mysql</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">show </span><span class="crayon-i">processlist</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

		<div id="crayon-649540157b965821639616" 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;">
mysql&gt; show status \g</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-649540157b965821639616-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-649540157b965821639616-1"><span class="crayon-i">mysql</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">show </span><span class="crayon-i">status</span><span class="crayon-h"> </span><span class="crayon-sy">\</span><span class="crayon-i">g</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>また、mysqlサーバーのログは、/var/log/mysqld.logにあります。<br />
mysqlスローログ（実行時間が1秒以上かかるクエリーのログ）が有効化すれば見れますが、<br />
今回紹介したいのは、ある時点から、すべてのクエリーを確認する方法です。</p>
<h3>general_logを「ON」にする</h4>
<p>まずgeneral_logの状態とパスを確認します。<br />
確認できたら、general_logを「ON」にします。</p>

		<div id="crayon-649540157b967693593929" 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;">
mysql&gt; SHOW VARIABLES LIKE "general_log%";

+------------------+----------------------------+
| Variable_name    | Value                      |
+------------------+----------------------------+
| general_log      | OFF                        |
| general_log_file | /var/run/mysqld/mysqld.log |
+------------------+----------------------------+

mysql&gt; SET GLOBAL general_log = 'ON';</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-649540157b967693593929-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b967693593929-2">2</div><div class="crayon-num" data-line="crayon-649540157b967693593929-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b967693593929-4">4</div><div class="crayon-num" data-line="crayon-649540157b967693593929-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b967693593929-6">6</div><div class="crayon-num" data-line="crayon-649540157b967693593929-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b967693593929-8">8</div><div class="crayon-num" data-line="crayon-649540157b967693593929-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b967693593929-10">10</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-649540157b967693593929-1"><span class="crayon-i">mysql</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">SHOW </span><span class="crayon-e">VARIABLES </span><span class="crayon-i">LIKE</span><span class="crayon-h"> </span><span class="crayon-s">"general_log%"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b967693593929-2">&nbsp;</div><div class="crayon-line" id="crayon-649540157b967693593929-3">+------------------+----------------------------+</div><div class="crayon-line crayon-striped-line" id="crayon-649540157b967693593929-4"><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">Variable_name</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">Value</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">|</span></div><div class="crayon-line" id="crayon-649540157b967693593929-5">+------------------+----------------------------+</div><div class="crayon-line crayon-striped-line" id="crayon-649540157b967693593929-6"><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">general_log</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">OFF</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">|</span></div><div class="crayon-line" id="crayon-649540157b967693593929-7"><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">general_log_file</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span>/<span class="crayon-t">var</span>/<span class="crayon-i">run</span>/<span class="crayon-i">mysqld</span>/<span class="crayon-i">mysqld</span><span class="crayon-sy">.</span><span class="crayon-i">log</span><span class="crayon-h"> </span><span class="crayon-sy">|</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b967693593929-8">+------------------+----------------------------+</div><div class="crayon-line" id="crayon-649540157b967693593929-9">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540157b967693593929-10"><span class="crayon-i">mysql</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">SET </span><span class="crayon-m">GLOBAL</span><span class="crayon-h"> </span><span class="crayon-i">general_log</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'ON'</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>確認できたら、general_logを「OFF」にする</h4>
<p>general_logを「ON」にした時点から、クエリーが/var/run/mysqld/mysqld.logに出力できるようになります。<br />
自分が確認したいクエリーを確認できたら、general_logを「OFF」にすることを忘れずに行いましょう。</p>
<p></p>

		<div id="crayon-649540157b968509547022" 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;">
mysql&gt; SET GLOBAL general_log = 'OFF';</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-649540157b968509547022-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-649540157b968509547022-1"><span class="crayon-i">mysql</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">SET </span><span class="crayon-m">GLOBAL</span><span class="crayon-h"> </span><span class="crayon-i">general_log</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'OFF'</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

【mysql】クエリーの確認方法

<p><strong>TED (Technology, Entertainment, Design)</strong></p>
<p><a href="http://www.ted.com/">TED</a> is a global set of conferences owned by a private non-profit Foundation under the slogan: &#8220;Ideas Worth Spreading&#8221;. The main conference it is hold annually in Vancouver, Canada, although TED events are also held throughout North America, Europe and Asia, offering live streaming talks. Currently there&#8217;s more than 1500 TED Talks, all are subtitled in English, and many in other languages.</p>
<p>Speakers at TED events have a maximum of 18 minutes to share their messages, which are delivered in highly polished speeches.</p>
<p>TED&#8217;s mission is to spread great ideas worldwide, giving an insight into a great variety of topics like: technology, entertainment, design, business, science, global issues, etc.</p>
<p><a href="/uploads-archive/2014/09/la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002.jpeg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5688" src="/uploads-archive/2014/09/la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002-300x210.jpeg" alt="la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002" width="300" height="210" srcset="/uploads-archive/2014/09/la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002-300x210.jpeg 300w, /uploads-archive/2014/09/la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002-228x159.jpeg 228w, /uploads-archive/2014/09/la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002.jpeg 600w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><em><span style="color: #888888;">Chris Anderson (Curator of TED conference), (left), and Google&#8217;s Sergey Brin discuss Google Glass at TED 2013.</span></em></p>
<p>&nbsp;</p>
<p>It is one of my favourite sources for inspiration and practical advice. I think TED talks have certainly set a benchmark in recent years and I wanted to share it with the team, as I feel is not that popular in the office.</p>
<p>I like the fact that the speakers bring to learning a lifetime of previously acquired information and experience, exposing with effective video instruction without dumbing down. It is also a good opportunity to have a glimpse of other disciplines you might not be familiar with.</p>
<p><a href="/uploads-archive/2014/09/bill-gates-at-ted-talks-education.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5666" src="/uploads-archive/2014/09/bill-gates-at-ted-talks-education-300x197.jpg" alt="bill-gates-at-ted-talks-education" width="300" height="197" srcset="/uploads-archive/2014/09/bill-gates-at-ted-talks-education-300x197.jpg 300w, /uploads-archive/2014/09/bill-gates-at-ted-talks-education-228x150.jpg 228w, /uploads-archive/2014/09/bill-gates-at-ted-talks-education.jpg 586w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><em><em><span style="color: #888888;">Bill Gates &#8220;Teachers needs real feedback&#8221; at TED 2013</span></em></em></p>
<p><strong>TEDx</strong></p>
<p>In the spirit of “Ideas worth spreading”, alongside <a href="http://www.ted.com/tedx">TEDx</a> is a program designed to give communities, organisations and individuals the opportunity to create their own TED-like events at the local level.</p>
<p>&nbsp;</p>
<p><strong>TEDxTokyo</strong></p>
<p><a href="http://www.tedxtokyo.com/en#about">TEDxTokyo</a> was the first TEDx conference to be held following the US launch event in 2009. TedxTokyo, located in Hikarie building, Shibuya from 2012, has become a powerful platform for bringing together global innovators and creative talent from Japan and around the world.</p>
<p>Nowadays there&#8217;s actually many Tedx hold all over Japan,  if you want to keep updated with TED events hold in Japan here is the <a href="https://www.ted.com/tedx/events?filter=0&amp;autocomplete_filter=japan&amp;when=&amp;month=&amp;year=&amp;go=Go">link.</a> Next one is <a href="https://www.ted.com/tedx/events/12836">TEDxKyoto</a> <span style="color: #3f3f3f;">28th of September, f</span>or next TEDxTokyo we will have to wait until <span style="color: #3f3f3f;">October 8th. </span></p>
<p><a href="/uploads-archive/2014/09/0710_pict001.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5667" src="/uploads-archive/2014/09/0710_pict001-300x152.jpg" alt="0710_pict001" width="300" height="152" srcset="/uploads-archive/2014/09/0710_pict001-300x152.jpg 300w, /uploads-archive/2014/09/0710_pict001-228x116.jpg 228w, /uploads-archive/2014/09/0710_pict001.jpg 704w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><em><em><span style="color: #888888;">TEDxTokyo 2013</span></em></em></p>
<p><strong>Talks</strong></p>
<p>As there&#8217;s tones of Talks, there is available playlists curated by TED  like: &#8220;<a class="ga-link" style="color: #111111;" href="http://www.ted.com/playlists/the_20_most_popular_talks_of_a" data-ga-action="click" data-ga-category="homepage.playlist" data-ga-label="http://www.ted.com/playlists/the_20_most_popular_talks_of_a">20 most popular TED Talks of all time</a>&#8221; , &#8220;<a class="ga-link" style="color: #111111;" href="http://www.ted.com/playlists/kickstart_your_creativity" data-ga-action="click" data-ga-category="homepage.playlist" data-ga-label="http://www.ted.com/playlists/kickstart_your_creativity">Kickstart your creativity</a>&#8220;, &#8220;<a class="ga-link" style="color: #111111;" href="http://www.ted.com/playlists/talks_to_give_you_wanderlust" data-ga-action="click" data-ga-category="homepage.playlist" data-ga-label="http://www.ted.com/playlists/talks_to_give_you_wanderlust">Talks to give you wanderlust</a>&#8220;, etc.</p>
<p>Here are some beautiful and clever talks I&#8217;ve chosen (with Japanese subtitles):</p>
<p><em>“Creativity expert Sir Ken Robinson challenges the way we&#8217;re educating our children.”</em></p>
<p><iframe loading="lazy" width="640" height="360" src="https://embed-ssl.ted.com/talks/lang/ja/ken_robinson_says_schools_kill_creativity.html" frameborder="0" scrolling="no" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><em>From TEDxIndia. “&#8230;Pranav Mistry invented a wearable device that enables new interactions between the real world and the world of data”.</em></p>
<p><iframe loading="lazy" width="640" height="360" src="https://embed-ssl.ted.com/talks/lang/ja/pranav_mistry_the_thrilling_potential_of_sixthsense_technology.html" frameborder="0" scrolling="no" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><em>“Psychologist Kelly McGonigal urges us to see stress as a positive.”</em></p>
<p><iframe loading="lazy" width="640" height="360" src="https://embed-ssl.ted.com/talks/lang/ja/kelly_mcgonigal_how_to_make_stress_your_friend.html" frameborder="0" scrolling="no" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><em>From TEDWomen “Sheryl Sandberg, COO at the helm of Facebook looks at why a smaller percentage of women than men reach the top of their professions.”</em></p>
<p><iframe loading="lazy" width="640" height="360" src="https://embed-ssl.ted.com/talks/lang/ja/sheryl_sandberg_why_we_have_too_few_women_leaders.html" frameborder="0" scrolling="no" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p>&nbsp;</p>
<p>What are your favourite TED Talks?</p>
<p>&nbsp;</p>


TED: Ideas worth spreading

<p>自社のＥＣサイトを構築して販売を行う場合、どんなサイトを参考にすればいいのでしょうか？</p>
<p>運営する側の意見も大事ですが、やはりお客さんが満足する良いサイト・サービスを作るというのが本質だと思います。</p>
<p>2014年8月20日に<span style="color: #3d3d3d;"><a href="http://www.service-js.jp/modules/contents/?ACTION=content&amp;content_id=515">サービス産業生産性協議会</a>が発表した調査の中に通信販売を行う企業に対する顧客満足のランキングが出ています。</span></p>
<p>サイトのみへの評価ではなく企業全体としての評価ですが、参考になると思います。</p>
<blockquote><p>統計的な収集方法による総計１２万人以上の利用者からの回答をもとに調査する日本最大級の顧客満足度調査</p></blockquote>
<p>ということなので信憑性は高いと思います。</p>
<p>結果としては<strong>「Amazon」「オルビス」「ヨドバシ」が同点で第１位</strong>になっています。</p>
<p><a href="http://activity.jpc-net.jp/detail/srv/activity001419/attached.pdf">http://activity.jpc-net.jp/detail/srv/activity001419/attached.pdf</a></p>
<p><span style="color: #3d3d3d;">「出典：２０１４年度ＪＣＳＩ(日本版顧客満足度指数) 第２回調査結果 </span></p>
<p>結果としては「Amazon」「オルビス」「ヨドバシ」が同点で第１位になっています。</p>
<p>意外だったのは楽天、yahooショッピングが上位にランクインしていないことです。amazonを除いたサイトに比べれば、楽天・yahooショッピングは商品数も多いので評価も高そうですが、ロイヤリティの分野で楽天が１３位という結果です。</p>
<p>&nbsp;</p>
<p>「Amazon」はちょっと規模感が違うような気がするで、「オルビス」「ヨドバシ」はどういう所がウケているのか分析する価値がありそうです。</p>
<p>個人的に良いなと思った点を上げてみます。</p>
<p>&nbsp;</p>
<p>yodobahi.com　<a href="http://www.yodobashi.com/index.html">http://www.yodobashi.com/index.html</a></p>
<p>商品検索結果のページに知りたい情報がキチンと表示されています。商品の到着日やポイント還元率など、既に買うものが決まっている場合なら買い物がしやすい印象はやはりします。ページの遷移が少なくて済みそうです。</p>
<p>&nbsp;</p>
<p>オルビス　<a href="http://www.orbis.co.jp/">http://www.orbis.co.jp/</a></p>
<p>サイトでの初回購入で値引きがあったり全商品が送料無料という点も評価されているようですが、個人的には「クチコミ」が豊富で参考にしやすいという印象を受けました。やはり化粧品などは効果に個人差があるのでクチコミは非常に大事だと思います。</p>
<p>合わせてシミ、テカりといった目的別で商品を探したり、年代別で商品を探せたりする部分も使いやすそうな印象です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


ＥＣサイト構築で参考にしたいサイトは？顧客満足度が高い企業のサイト

<p>複数の値を１行にまとめて返す、<span style="color: red;">group_concat</span>関数を使用します。</p>
<p>PHPの関数で言うと、implodeと同じ機能になります。</p>
<p>以下２つのテーブルがあります。</p>
<p>Aテーブル</p>
<table style="height: 77px;" width="153">
<tbody>
<tr>
<td>a_id</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>山田</td>
</tr>
<tr>
<td>2</td>
<td>鈴木</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>Bテーブル</p>
<table style="height: 252px;" width="151">
<tbody>
<tr>
<td>b_id</td>
<td>a_id</td>
<td>hobby</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>映画</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>お酒</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>音楽</td>
</tr>
<tr>
<td>4</td>
<td>2</td>
<td><span style="width: 64px;">ショッピング</span></td>
</tr>
<tr>
<td>5</td>
<td>1</td>
<td><span style="width: 64px;">旅行</span></td>
</tr>
<tr>
<td>6</td>
<td>2</td>
<td><span style="width: 64px;">ドライブ</span></td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td><span style="width: 64px;">カラオケ</span></td>
</tr>
<tr>
<td>8</td>
<td>2</td>
<td><span style="width: 64px;">サッカー</span></td>
</tr>
<tr>
<td>9</td>
<td>2</td>
<td><span style="width: 64px;">温泉</span></td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>group_concatを使用してSQLを作成します。</p>

		<div id="crayon-649540157b76e660106605" 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 
	A.a_id,
	GROUP_CONCAT(B.hobby) as hobby
FROM
	A,B
WHERE 
	A.a_id = B.a_id
GROUP BY 
	A.a_id</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-649540157b76e660106605-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b76e660106605-2">2</div><div class="crayon-num" data-line="crayon-649540157b76e660106605-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b76e660106605-4">4</div><div class="crayon-num" data-line="crayon-649540157b76e660106605-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b76e660106605-6">6</div><div class="crayon-num" data-line="crayon-649540157b76e660106605-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b76e660106605-8">8</div><div class="crayon-num" data-line="crayon-649540157b76e660106605-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-649540157b76e660106605-1"><span class="crayon-i">SELECT</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b76e660106605-2"><span class="crayon-h">	</span><span class="crayon-i">A</span><span class="crayon-sy">.</span><span class="crayon-i">a_id</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540157b76e660106605-3"><span class="crayon-h">	</span><span class="crayon-e">GROUP_CONCAT</span><span class="crayon-sy">(</span><span class="crayon-i">B</span><span class="crayon-sy">.</span><span class="crayon-i">hobby</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-st">as</span><span class="crayon-h"> </span><span class="crayon-e">hobby</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b76e660106605-4"><span class="crayon-i">FROM</span></div><div class="crayon-line" id="crayon-649540157b76e660106605-5"><span class="crayon-h">	</span><span class="crayon-i">A</span><span class="crayon-sy">,</span><span class="crayon-i">B</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b76e660106605-6"><span class="crayon-i">WHERE</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-649540157b76e660106605-7"><span class="crayon-h">	</span><span class="crayon-i">A</span><span class="crayon-sy">.</span><span class="crayon-i">a_id</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">B</span><span class="crayon-sy">.</span><span class="crayon-e">a_id</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b76e660106605-8"><span class="crayon-e">GROUP </span><span class="crayon-i">BY</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-649540157b76e660106605-9"><span class="crayon-h">	</span><span class="crayon-i">A</span><span class="crayon-sy">.</span><span class="crayon-i">a_id</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>実行結果はこのようになりました。</p>
<table style="height: 77px;" width="248">
<tbody>
<tr>
<td>a_id</td>
<td>hobby</td>
</tr>
<tr>
<td>1</td>
<td>映画,お酒,旅行,カラオケ</td>
</tr>
<tr>
<td>2</td>
<td>音楽,ショッピング,ドライブ,サッカー,温泉</td>
</tr>
</tbody>
</table>
<p>他にもこんなことができます。</p>
<p>区切り文字を指定できます。（指定しない場合、カンマ区切りになります。）</p>

		<div id="crayon-649540157b772941112264" 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;">
GROUP_CONCAT(B.hobby separator '/')</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-649540157b772941112264-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-649540157b772941112264-1"><span class="crayon-e">GROUP_CONCAT</span><span class="crayon-sy">(</span><span class="crayon-i">B</span><span class="crayon-sy">.</span><span class="crayon-e">hobby </span><span class="crayon-i">separator</span><span class="crayon-h"> </span><span class="crayon-s">'/'</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>昇順・降順に並べられます。</p>

		<div id="crayon-649540157b774895714107" 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;">
GROUP_CONCAT(B.hobby order by B.b_id)</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-649540157b774895714107-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-649540157b774895714107-1"><span class="crayon-e">GROUP_CONCAT</span><span class="crayon-sy">(</span><span class="crayon-i">B</span><span class="crayon-sy">.</span><span class="crayon-e">hobby </span><span class="crayon-e">order </span><span class="crayon-i">by</span><span class="crayon-h"> </span><span class="crayon-i">B</span><span class="crayon-sy">.</span><span class="crayon-i">b_id</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2014/09/17

2014/09/17

2014/09/10

2014/09/10

2014/09/10

2014/09/10

2014/09/10

2014/09/09

2014/09/04

2014/09/04

2014/09/03

2014/09/03

2014/09/03

2014/09/03

2014/09/02

2014/08/27

2014/08/27

2014/08/27