<p>以前、CSSの優先順位についての記事を書いたのですが、<br />
<a href="/designer/%e5%88%9d%e7%b4%9a%e8%80%85%e3%81%af%e6%84%8f%e5%a4%96%e3%81%a8%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e3%81%aa%e3%81%84css%e3%81%ae%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%e3%81%ab%e3%81%a4%e3%81%84.html">初級者は意外と理解してない(?)CSSの優先順位について | スターフィールド株式会社</a></p>
<p>その順位をチェックできるツールがありました。<br />
ポイント制になっておりわかりやすくなっています。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7175" src="/uploads-archive/2015/03/Specificity-Calculator-1024x591.jpg" alt="Specificity Calculator" width="640" height="369" srcset="/uploads-archive/2015/03/Specificity-Calculator-1024x591.jpg 1024w, /uploads-archive/2015/03/Specificity-Calculator-300x173.jpg 300w, /uploads-archive/2015/03/Specificity-Calculator-228x132.jpg 228w, /uploads-archive/2015/03/Specificity-Calculator.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>「+Duplicate」で比べたいセレクタを追加し、左上にある「Sort by specificity」を押すと、高い順に並べてくれます。</p>
<p><a class="link" href="http://specificity.keegan.st/" target="_blank">Specificity Calculator</a></p>
<h2>CSS3のブラウザサポート表</h2>
<h3>HTML5 &amp; CSS3 Web Design</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7174" src="/uploads-archive/2015/03/HTML5-CSS3-Web-Design-1024x591.jpg" alt="HTML5 &amp; CSS3 Web Design" width="640" height="369" srcset="/uploads-archive/2015/03/HTML5-CSS3-Web-Design-1024x591.jpg 1024w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design-300x173.jpg 300w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design-228x132.jpg 228w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /><br />
各css3がどのブラウザに対応しているかを表にしているサイトです。わかりやすいですね！</p>
<p><a class="link" href="http://fmbip.com/litmus/" target="_blank">HTML5 &amp; CSS3 Web Design</a></p>
<h3>Can I use&#8230; Support tables for HTML5, CSS3, etc</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7176" src="/uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-1024x591.jpg" alt="Can I use... Support tables for HTML5, CSS3, etc" width="640" height="369" srcset="/uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-1024x591.jpg 1024w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-300x173.jpg 300w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-228x132.jpg 228w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>こちら同様ですが、もっと細かく別れており、詳細ページへ行くと以下のようにわかり易く表示してくれています。こちらのサイトの方がブラウザ、バージョンの数は多いですね。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7177" src="/uploads-archive/2015/03/Can-I-use...-Support-tables-1024x591.jpg" alt="Can I use... Support tables" width="640" height="369" srcset="/uploads-archive/2015/03/Can-I-use...-Support-tables-1024x591.jpg 1024w, /uploads-archive/2015/03/Can-I-use...-Support-tables-300x173.jpg 300w, /uploads-archive/2015/03/Can-I-use...-Support-tables-228x132.jpg 228w, /uploads-archive/2015/03/Can-I-use...-Support-tables.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>赤がサポート外ですね。<br />
あとそれぞれの四角い項目にマウスオンすると、そのブラウザ（＆バージョン）のシェアの％を教えてくれます。<br />
便利ですね！</p>
<p><a class="link" href="http://beta.caniuse.com/" target="_blank">Can I use&#8230; Support tables for HTML5, CSS3, etc</a></p>
<p>これらを見ると、今はほぼIE9以上の対応でいい雰囲気なので、</p>
<p>・Box Sizing<br />
・Border Radius<br />
・Box Shadow<br />
・Background Size<br />
・CSS Transforms<br />
・nth-child等の擬似要素</p>
<p>なんかはもう普通に使用してもいいかもしれませんね！<br />
これを使用できるだけでだいぶ違いますね〜</p>
<p>あとはcss animationやcss transitionが使えるようになると変わりますね。</p>


CSSの優先順位をチェックできるツール＆CSS3のブラウザサポート表

<p>背景に動画を設置しているサイトをよく見ると思います。</p>
<p>ページ全体に表示するのはcssだけでできるので、実装はかなりシンプルにできます。</p>
<h2>videoで動画を挿入する</h2>
<p></p>

		<div id="crayon-649540158539e622024199" 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;video autoplay loop poster="image/sampleposter.jpg" id="sampleVideo"&gt;
&lt;source src="video/shinjuku.mp4" type="video/mp4"&gt;
&lt;source src="shinjuku.webm" type="video/webm"&gt;
&lt;source src="shinjuku.ogv" type="video/ogv"&gt;
&lt;/video&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-649540158539e622024199-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158539e622024199-2">2</div><div class="crayon-num" data-line="crayon-649540158539e622024199-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158539e622024199-4">4</div><div class="crayon-num" data-line="crayon-649540158539e622024199-5">5</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-649540158539e622024199-1"><span class="crayon-h">&lt;</span><span class="crayon-e">video </span><span class="crayon-e">autoplay </span><span class="crayon-e">loop </span><span class="crayon-i">poster</span>=<span class="crayon-s">"image/sampleposter.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"sampleVideo"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158539e622024199-2"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/shinjuku.mp4"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/mp4"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158539e622024199-3"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"shinjuku.webm"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/webm"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158539e622024199-4"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"shinjuku.ogv"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/ogv"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158539e622024199-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">video</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>autoplayにしておいて、videoに対応していないブラウザの為にposterを設定しておきます。</p>
<p>動画素材はブラウザによって形式が異なるので、mp4、webmの２つを用意する必要があります。</p>
<p>各ブラウザへの対応状況は以下を参考にしてください。</p>
<p><a href="/uploads-archive/2015/03/mp4.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-7166" src="/uploads-archive/2015/03/mp4.png" alt="mp4" width="326" height="190" srcset="/uploads-archive/2015/03/mp4.png 642w, /uploads-archive/2015/03/mp4-300x175.png 300w, /uploads-archive/2015/03/mp4-228x133.png 228w" sizes="(max-width: 326px) 100vw, 326px" /></a></p>
<p><a href="http://caniuse.com/#search=mp4">http://caniuse.com/#search=mp4</a></p>
<p><a href="/uploads-archive/2015/03/webm.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-7167" src="/uploads-archive/2015/03/webm.png" alt="webm" width="322" height="196" srcset="/uploads-archive/2015/03/webm.png 642w, /uploads-archive/2015/03/webm-300x183.png 300w, /uploads-archive/2015/03/webm-228x139.png 228w" sizes="(max-width: 322px) 100vw, 322px" /></a></p>
<p><a href="http://caniuse.com/#search=WebM">http://caniuse.com/#search=WebM</a></p>
<p>ファイルフォーマットの変換は編集ソフトで吐き出す際に変換できる場合もありますが、フリーのコンバーターも結構あるので探してみて下さい。</p>
<h2>動画を背景に設定する</h2>
<p></p>

		<div id="crayon-64954015853a2854513256" 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;">
#sampleVideo {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -10;
  background: url(image/sampleposter.jpg) no-repeat;
  background-size: cover;
}</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-64954015853a2854513256-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-2">2</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-4">4</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-6">6</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954015853a2854513256-1"><span class="crayon-k ">#sampleVideo </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">fixed</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">right</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">bottom</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">min-width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">min-height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">z-index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">-10</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-i ">image/sampleposter.jpg</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">no-repeat</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">background-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">cover</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>videoを右下に設置して、幅と高さをauto、さらに最少値をどちらも100%にします。</p>
<p>対応していないブラウザためにbackgroundに静止画を設置します。</p>
<p>&nbsp;</p>
<p>今回使用した動画はNHKのライブラリー（フリー）から持ってきたのでかなり粗いのですが、通常背景に設置する場合はHDで撮影した動画の方が良いと思います。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/makabe/01/01demo.html">DEMO</a></p>

動画：cssでvideoを背景に使う

【WordPress】CSVをアップロードするプラグインを作ってみた

cakephp 2.5.8 初期設定

<p>エイサーの創業者の人が提唱したとのこと。</p>
<p>&nbsp;</p>
<p>エイサーはもともと技術力があったがブランド力がなく、IBMの下請けとしてPCの生産を行っており</p>
<p>利益率とともに規模を拡大させるため、1990年代に上の図の高付加価値部分、研究開発とマーケティングに力を入れたという。</p>
<p>&nbsp;</p>
<p>エイサーの場合は、2つの高付加価値な領域に手を出したためにうまくいっていなく、</p>
<p>逆に鴻海やTSMCは1つの高付加価値領域に経営資源を集中したからうまくいっているという書き方がされていた。</p>
<p>&nbsp;</p>
<p>自分的には、それは変化が激しい産業の一部の期間だけであって、</p>
<p>実際にはどっちもできる方が強いのであって、少なくとも最初は両方共できるべきだと思った。</p>
<p>&nbsp;</p>
<p>今考えている課題をまとめるのに参考になったのでメモ</p>


スマイルカーブ理論

SVG.JSを使ったSVGファイルの読み込みと操作

<p>遂に来ました。</p>
<p>今回は、マレーシアの友人が来日に合わせて、オンラインストアで買ってもらって、来日に合わせてハンドキャリーで持ってきてもらいました。<br />
RM799なので大体26000円くらいです。<br />
それでいて、昨夏時点で世界最速のCPUと2GBのメモリを積んでいて、後は大体ipad mini retinaと同じスペックwという知る人ぞ知るタブレットです。</p>
<h2>開封の儀</h2>
<p><a href="/uploads-archive/2015/03/IMG_20150315_002129.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7111" src="/uploads-archive/2015/03/IMG_20150315_002129-171x300.jpg" alt="IMG_20150315_002129" width="171" height="300" srcset="/uploads-archive/2015/03/IMG_20150315_002129-171x300.jpg 171w, /uploads-archive/2015/03/IMG_20150315_002129-584x1024.jpg 584w, /uploads-archive/2015/03/IMG_20150315_002129-228x400.jpg 228w, /uploads-archive/2015/03/IMG_20150315_002129.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a></p>
<p>外装はとてもシンプル</p>
<p><a href="/uploads-archive/2015/03/IMG_20150315_014315.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7112" src="/uploads-archive/2015/03/IMG_20150315_014315-171x300.jpg" alt="IMG_20150315_014315" width="171" height="300" srcset="/uploads-archive/2015/03/IMG_20150315_014315-171x300.jpg 171w, /uploads-archive/2015/03/IMG_20150315_014315-584x1024.jpg 584w, /uploads-archive/2015/03/IMG_20150315_014315-228x400.jpg 228w, /uploads-archive/2015/03/IMG_20150315_014315.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a></p>
<p>ぴっちり入っています。</p>
<p><a href="/uploads-archive/2015/03/IMG_20150315_014338.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7113" src="/uploads-archive/2015/03/IMG_20150315_014338-171x300.jpg" alt="IMG_20150315_014338" width="171" height="300" srcset="/uploads-archive/2015/03/IMG_20150315_014338-171x300.jpg 171w, /uploads-archive/2015/03/IMG_20150315_014338-584x1024.jpg 584w, /uploads-archive/2015/03/IMG_20150315_014338-228x400.jpg 228w, /uploads-archive/2015/03/IMG_20150315_014338.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a></p>
<p>本体をとると説明書とアダプターだけが見えます。</p>
<p><a href="/uploads-archive/2015/03/IMG_20150315_014401.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7114" src="/uploads-archive/2015/03/IMG_20150315_014401-171x300.jpg" alt="IMG_20150315_014401" width="171" height="300" srcset="/uploads-archive/2015/03/IMG_20150315_014401-171x300.jpg 171w, /uploads-archive/2015/03/IMG_20150315_014401-584x1024.jpg 584w, /uploads-archive/2015/03/IMG_20150315_014401-228x400.jpg 228w, /uploads-archive/2015/03/IMG_20150315_014401.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a></p>
<p>あとは、USBケーブルとこれだけです。充電アダプターは、日本のコンセントに入る形状ではありません。</p>
<p><a href="/uploads-archive/2015/03/IMG_20150315_014528.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7115" src="/uploads-archive/2015/03/IMG_20150315_014528-171x300.jpg" alt="IMG_20150315_014528" width="171" height="300" srcset="/uploads-archive/2015/03/IMG_20150315_014528-171x300.jpg 171w, /uploads-archive/2015/03/IMG_20150315_014528-584x1024.jpg 584w, /uploads-archive/2015/03/IMG_20150315_014528-228x400.jpg 228w, /uploads-archive/2015/03/IMG_20150315_014528.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a></p>
<p>ドーンと一気に立ち上げてしまいましたが、初期設定は5ステップくらいで、すいません。写真撮り忘れました。</p>
<p>マレーシア版なので、GooglePlayが標準で入っています。そして後は、驚くほどに似たiosのフラットデザインの見た目でした。</p>
<p>非公式の日本語化ROMというのもあるようですが、autoupdateが出来なくなったりするようなので適用せず英語環境で使用し続けようと思います。</p>
<p>外観などは、他の方のレビューでも紹介されていますので、MIUIについてちょっと思ったこと。</p>
<h3 id="toc_0">MIUIってこういうことか</h2>
<p><a href="/uploads-archive/2015/03/Screenshot_2014-04-17-07-59-49.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7133" src="/uploads-archive/2015/03/Screenshot_2014-04-17-07-59-49-169x300.png" alt="Screenshot_2014-04-17-07-59-49" width="169" height="300" srcset="/uploads-archive/2015/03/Screenshot_2014-04-17-07-59-49-169x300.png 169w, /uploads-archive/2015/03/Screenshot_2014-04-17-07-59-49-576x1024.png 576w, /uploads-archive/2015/03/Screenshot_2014-04-17-07-59-49-228x405.png 228w, /uploads-archive/2015/03/Screenshot_2014-04-17-07-59-49.png 1080w" sizes="(max-width: 169px) 100vw, 169px" /></a></p>
<p>AndroidベースのカスタムROM「MIUI」というのがデフォルトで入っています。</p>
<p>http://en.miui.com/</p>
<p>いわゆるNexusに搭載されているものがピュアなAndroidに対してメーカー独自のカスタマイズを加えたものがカスタムROMです。<br />
実際に触れるまで、何でピュアなAndroidにわざわざ手を入れるんだろう、もちろん、囲い込みビジネスに直結しているのは分かっていますが、それ以上にピュアAndroidで足りない事を補うためにあるものだと分かりました。<br />
そして、それは気付いていなかったストレスを軽減するすごいものです。</p>
<p>しかしながら、ここでもやはりiOSの意識を強く感じました。</p>
<p>以下、私が良かった点をピックアップします。</p>
<h4 id="toc_1">メールや通知の未読数がバッチで出る</h3>
<p>iphoneでは当たり前の機能ですが、何故か着いていませんでした。<br />
特にメールの未読件数は、通知センターでも分からないのでいちいちアプリを開く必要がありました。</p>
<h4 id="toc_2">アプリを一括で終らせられる</h3>
<p>アプリをたくさん立ち上げるとその分メモリが確保されてしまって、上限に達すると突然重くなりますよね。<br />
メモリ開放アプリを利用するか、右ボタン（mipadでは左）のアプリスイッチボタンを押して一つずつ落としていくので10回以上スワイプするのが煩わしくずっと思っていたのですが、これも標準で着いています。<br />
地味に嬉しい。</p>
<h4 id="toc_3">通知バーを設定出来る</h3>
<p>通知バーとは画面最上部の時計や電池残量が表示されている部分です。</p>
<ul>
<li>通知アイコン</li>
<li>速度</li>
<li>接続wifiの名称</li>
</ul>
<p>通知アイコンは出ていると私は鬱陶しいので見えないようにします。<br />
速度はwifi接続しかないのですが、目安に表示しています。<br />
接続wifiの名称は町中で弱い電波を拾っちゃった時に一目瞭然ですね。<br />
mipadであれば、横幅が十分にあるので、全部表示しても余りあります。<br />
今まで独立したアプリでないと出来なかったことが設定一つで出来ます。</p>
<h3 id="toc_4">まとめ</h2>
<p>MIUIは、便利！と思ったものをピックアップしましたが、非常に完成度が高く、見た目も洗練されていました。</p>
<p>Androidをカスタムすることで、バージョンアップに追いつけず、スマホも結局ガラパゴス化していると揶揄される日本メーカーですが、結局、機種を絞って販売していることでこういった管理工数を削減するということへも理が叶っているのでしょう。</p>
<p>7.9インチ4:3のretinaディスプレイのipadminiを2万6000円で買えたような気がします。<br />
非常に満足度高いのですが、同時に日本で勝てる企業が見当たらないという脅威を覚えました。</p>
<p>私は、元SONYのVaioを含むSONY陣営には、高単価高付加価値で差別化した販路を見出して欲しいとずっと思っていたのですが、VaioZを20万円で徹底的に振り切ったPCを発表したあと、何だか残念なスマホを発表していたりと、迷走せずに突っ走って欲しいと切に願っています。<br />
<a href="http://weekly.ascii.jp/elem/000/000/315/315302/" target="_blank">http://weekly.ascii.jp/elem/000/000/315/315302/</a></p>


Mipad開封の儀＆レビュー＆MIUI

<p>最近ＥＣでも動画を活用したサイトが増えてきています。</p>
<p>ＥＣにおいて動画を活用するメリットとはなんでしょうか？</p>
<p>私個人としては最大の利点はページからの離脱率を下げる事だと思います。これは人間の心理的な部分に理由があって「人は動いている物を無意識に見てしまう」のです。</p>
<p>サイトのファーストビューに動画が設置してあるだけでちょっと目をとめてしまいます、さらに興味をそそる部分があれば、動画を全て見てしまうかもしれません。</p>
<p>自身でデータをとった事がないので断言はできませんが、個人的にもページを遷移した時点で動画が再生されたらちょっと観てしまいます。</p>
<h2>動画を商品説明として活用する</h2>
<p>どんなに優れた商品でも「どこが良いのか、どこが優れているのか」が伝わらなければ買ってもらえません。もし、商品自体に力があるのであれば動画での商品説明をする方がいいかもしれません。</p>
<p>なぜなら商品の良い所を長々と文章で書かれても正直読む気にならないからです、つまり良い所が多い商品ほど文章量やページの遷移などお客さんの負担が大きくなってしまいます。ほとんどの人は動画で説明してもらった方が頭を使わずに買い物ができて楽だなと感じるはずです。</p>
<h6>ポケットの多さが売りのジャケット</h6>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/M7cBIruqzQU"></iframe></p>
<h6>新しすぎて何に使うか分からない商品</h6>
<p><iframe loading="lazy" width="425" height="350" src="//player.vimeo.com/video/79758052?title=0&amp;amp;byline=0"></iframe></p>
<p>上の２つは動画をうまく使っているというよりは、使わないと買ってもらえない気がします。既に世間一般に商品の良さが知れ渡っている場合を除いてはこうした商品説明が重要になると思います。さほど手が込んでいる動画というわけでもないので少ない予算で作れそうです。</p>
<p>&nbsp;</p>
<h2>購入後のイメージを膨らませる</h2>
<h6>サラダがすぐできる料理家電</h6>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/onIoeeG8uNM"></iframe></p>
<h6>手打ちパスタの作り方</h6>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/5AhTJActw78"></iframe></p>
<h6>果物の美味しい切り方</h6>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/GsSUeGCOg2o"></iframe></p>
<h2> 動画の尺と構成はどんなものがいい？</h2>
<p>動画の尺、つまり動画の長さについてですが内容にストーリー性が無いのであれば、できるだけ短い方がいいと思います。</p>
<p>作りとしてベストなのはティファールの動画です、できれば30秒から1分くらいが良いと思います。長すぎると飽きてしまうので、1番伝えたい事をギュッとした動画を作るべきです。</p>
<p>30秒程度の動画はキャッチとして位置づけて、さらに詳しい情報については他に動画を作るか（これは長くていいと思う）、もしくは文書と画像で説明するのが良いと思います。</p>
<p>気を付けるべきは何のための動画なのかをしっかり決めて振り切った物にするという事です。</p>
<p>ＥＣサイトに張り付けてある動画で良くある失敗例としては、さほどクオリティーの高くない商品イメージをＢＧＭと共に長尺みせた後に以前メディアで取材された過去ＶＴＲを入れるという物です。</p>
<p>商品にブランド力をつけてイメージを良くしたい場合はカッコよさにこだわった動画でないと何の意味も成しません。</p>
<p>バズる事を目的とするならばインパクトだけを追及する、説明を主とするなら画だけで説明ができない場合きちんとナレーションを入れる、それぞれ目的に限定した適した尺の動画にするべきだと思います。</p>
<p>&nbsp;</p>


Vコマース　ECサイトで動画をうまく生かす方法を考える

<p>だいぶお恥ずかしい話、非推奨になっているの気づきませんでした。。。<br />
version 2.2から非推奨になっているとのことで、だいぶ前ですね〜・・・</p>
<p><a href="http://codex.wordpress.org/Function_Reference/bloginfo" class="link" target="_blank">codex</a></p>
<p>wordpressでサイト制作を始めた時から</p>
<p><strong>bloginfo(&#8220;url&#8221;)<br />
bloginfo(&#8220;stylesheet_url&#8221;)<br />
bloginfo(&#8220;template_url&#8221;)</strong></p>
<p>を使っていたのですが、一回使った後にこのタグを検索するなんてことは特になかったので全く知りませんでした。<br />
なんていいわけを言ってみたり・・・</p>
<p>とにかく、非推奨らしいので、違うタグを使わないといけません。</p>
<p>なので、僕の場合は、以下のようにすることにしました。</p>
<table>
<tr>
<th>今まで</th>
<th>今後</th>
<th>タグの内容</th>
</tr>
<tr>
<td>bloginfo(&#8220;url&#8221;)</td>
<td>echo home_url()</td>
<td>サイトのURL(ドメイン)</td>
</tr>
<tr>
<td>bloginfo(&#8220;stylesheet_url&#8221;)</td>
<td>echo get_stylesheet_uri()</td>
<td>スタイルシートのパス(style.css)</td>
</tr>
<tr>
<td>bloginfo(&#8220;template_url&#8221;)</td>
<td>echo get_template_directory_uri()</td>
<td>wordpressのテーマの位置のパス</td>
</tr>
</table>
<p>wordpressはアップデート頻度が多いので、たまにチェックしていないと、<br />
マズイことになりますね〜・・・</p>
<p>しっかりアンテナはっておかないとなと思う出来事でした。</p>


【WordPress】bloginfo()の一部が非推奨になっているのを最近気づいた件

test

Pager クラスを使ったページング

<p>HTML5ではSVGをHTML内の要素として書き込むことができますが、</p>
<p>サイトの運用の都合などで、外部ファイルとして存在するSVGを読み込んで操作したい場合も多くあると思います。</p>
<p>外部SVGファイルの読み込み方法はいろいろありますが、jQueryのload()を使うと、簡単に読み込むことができます。</p>
<p>&nbsp;</p>
<p>↓こちらがその方法で読み込んでみたもの</p>
<p><a class="demo" href="/demo/ninomiya/68/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h2>
<p>方法はとても簡単です。</p>
<h3>HTML</h3>
<p></p>

		<div id="crayon-6495401584760508831904" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML head内</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;script src="æ/jquery-2.1.1.min.js"&gt;&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-6495401584760508831904-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-6495401584760508831904-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"æ/jquery-2.1.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

		<div id="crayon-6495401584764828524158" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML body内</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;div id="svgArea"&gt;&lt;/div&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-6495401584764828524158-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-6495401584764828524158-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"svgArea"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>まず HTMLのhead内でjQueryを読み込み、</p>
<p>HTMLのbody内にSVGを配置するdivに適当なIDを設定して配置します。</p>
<p>&nbsp;</p>
<h3>jQuery</h3>
<p></p>

		<div id="crayon-6495401584766058824221" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">JavaScript</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	$("#svgArea").load("images/logo.svg svg", function(){

		//SVGの処理
		
	});
});</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-6495401584766058824221-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584766058824221-2">2</div><div class="crayon-num" data-line="crayon-6495401584766058824221-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584766058824221-4">4</div><div class="crayon-num" data-line="crayon-6495401584766058824221-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584766058824221-6">6</div><div class="crayon-num" data-line="crayon-6495401584766058824221-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495401584766058824221-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584766058824221-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#svgArea"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">load</span><span class="crayon-sy">(</span><span class="crayon-s">"images/logo.svg svg"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401584766058824221-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-6495401584766058824221-4"><span class="crayon-h">		</span><span class="crayon-c">//SVGの処理</span></div><div class="crayon-line" id="crayon-6495401584766058824221-5"><span class="crayon-h">		</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584766058824221-6"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584766058824221-7"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>次にjQueryで「$(&#8220;[SVGを読み込む要素]&#8221;).load(&#8220;SVGファイルのパス svg&#8221;)」を実行すれば読み込み完了です。</p>
<p>さらに読み込んだSVGを操作する場合は、「$(&#8220;[SVGを読み込む要素]&#8221;).load(&#8220;SVGファイルのパス svg&#8221;, function(){ … 操作するプログラム … })」</p>
<p>という風にload()でコールバック関数をつけると、操作が可能になります。</p>
<p>&nbsp;</p>
<p>SVGでは色の変更など、通常の画像ではできないことができ、</p>
<p>Webフォントを使った方法より運用がしやすいというメリットもあるので、</p>
<p>どんどん活用していきたいです。</p>

jQueryを使った外部SVGファイルの読み込み

<p>GoogleからMaterial Designが提唱され、しばらく経ち広まっているかどうかは定かではないのですが、制作にするのに便利なサービスを発見したので、紹介したいと思います。</p>
<p>まずは、Material Designとはなにかということは以下のサイトからご覧ください。<br />
<a href="http://www.google.com/design/spec/material-design/introduction.html">Introduction &#8211; Material design &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h2>フレームワーク</h2>
<p>&nbsp;</p>
<h3>MUI</h3>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7069" src="/uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-1024x605.jpg" alt="MUI - Material Design CSS Framework" width="620" height="366" srcset="/uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-1024x605.jpg 1024w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-300x177.jpg 300w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-228x135.jpg 228w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /><br />
ひと通りのコンポーネントが揃っているかと思います。</p>
<p><a class="link" href="https://www.muicss.com/" target="_blank">MUI &#8211; Material Design CSS Framework</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Materialize</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7065" src="/uploads-archive/2015/03/Documentation-Materialize-1024x605.jpg" alt="Documentation - Materialize" width="620" height="366" srcset="/uploads-archive/2015/03/Documentation-Materialize-1024x605.jpg 1024w, /uploads-archive/2015/03/Documentation-Materialize-300x177.jpg 300w, /uploads-archive/2015/03/Documentation-Materialize-228x135.jpg 228w, /uploads-archive/2015/03/Documentation-Materialize.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /><br />
上記のサイトよりも豊富で、jQueryの動きもけっこうあります。</p>
<p><a class="link" href="http://dogfalo.github.io/materialize/" target="_blank">Documentation &#8211; Materialize</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Material UI</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7068" src="/uploads-archive/2015/03/Material-UI-Material-Design-React-Components-1024x605.jpg" alt="Material UI - Material Design React Components" width="620" height="366" srcset="/uploads-archive/2015/03/Material-UI-Material-Design-React-Components-1024x605.jpg 1024w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components-300x177.jpg 300w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components-228x135.jpg 228w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /></p>
<p>こちらもひと通りのコンポーネントが揃っています。<br />
&nbsp;<br />
<a class="link" href="http://material-ui.com/#/" target="_blank">Material UI &#8211; Material Design React Components</a><br />
&nbsp;<br />
&nbsp;<br />
どのフレームワークもひと通りコンポーネントは揃っており、アニメーションでそれぞれ少しづつ違う感じです。<br />
パッと見て良さそうなのは、Materializeかなと思います。</p>
<p>&nbsp;</p>
<h2>配色ツール</h2>
<p>&nbsp;</p>
<h3>Material Palette</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7066" src="/uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-1024x597.jpg" alt="Material Design Color Palette Generator - Material Palette" width="620" height="361" srcset="/uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-1024x597.jpg 1024w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-300x175.jpg 300w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-228x133.jpg 228w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette.jpg 1120w" sizes="(max-width: 620px) 100vw, 620px" /><br />
こちらは２つの色を選ぶと、<br />
その色に合わせて簡単なカラーパレットを教えてくれます。</p>
<p><a class="link" href="http://www.materialpalette.com/" target="_blank">Material Design Color Palette Generator &#8211; Material Palette</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Material UI Colors</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7067" src="/uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-1024x597.jpg" alt="Material UI  Material Design  Material UI Colors" width="620" height="361" srcset="/uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-1024x597.jpg 1024w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-300x175.jpg 300w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-228x133.jpg 228w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors.jpg 1120w" sizes="(max-width: 620px) 100vw, 620px" /><br />
色数が豊富で、色情報をいろんな形式でコピーすることができます。</p>
<p><a class="link" href="http://www.materialui.co/colors" target="_blank">Material UI | Material Design | Material UI Colors</a></p>
<p>今後どんどん便利なサービスが出てくるかと思います。<br />
これらを上手いこと使いながら良いサイトを作りたいですね！！</p>


Material Designの制作に便利なwebサービス5つ

<p>We are well informed of how important are the social media to promote your commerce, but now we have gone one step further. Social networks are becoming more and more common to use as a tool for buying and selling. According to an announcement made in December 2014 by Kevin Systrom, CEO of <a href="https://instagram.com/">Instagram</a>, the photo sharing network has passed the 300-million user mark.</p>
<p>Taking advantage of the moment, Brazilian company <a href="http://gerencianet.com.br/">Gerencianet </a>saw an opportunity in making transactions directly via Instagram and is now preparing<strong> “<a href="http://letsell.it/">Letsell</a>”</strong>, the only app that allow you to buy and sell through Instagram.</p>
<blockquote><p>Letsell was developed for people who want to advertise any object they wish to sell, whether new or used, without bureaucracy.</p></blockquote>
<p>The application affords an excellent chance for companies or ordinary people to use Instagram as a sales channel.</p>
<p>If a transaction goes through a fee is charged to the vendor, while the person making the purchase doesn&#8217;t pay any fee at all.</p>
<p><a href="http://letsell.it/"><img decoding="async" loading="lazy" class="alignnone wp-image-7070 " src="/uploads-archive/2015/03/Screen-Shot-2015-03-10-at-16.16.48-1024x514.png" alt="Screen Shot 2015-03-10 at 16.16.48" width="755" height="396" /></a><br />
The release of Letsell is scheduled for the beginning of March in 9 countries: the United States, Germany, Canada, the United Kingdom, Australia, Brazil, Mexico, Spain and Andorra. The app will be available in English, Spanish and Portuguese.</p>
<p>The app is free, and when it comes to making a bargain over the internet, it&#8217;s equipped with basic tools. One example is an online chat function that works as a channel for sellers and buyers to negotiate. Another feature is that the application covers the whole payment process. PayPal was chosen as the means of payment to make it possible to use Letsell in a number of countries, even in situations when the parties are in different countries.</p>
<p><a href="http://letsell.it/"><img decoding="async" loading="lazy" class="alignnone wp-image-7071 " src="/uploads-archive/2015/03/Screen-Shot-2015-03-10-at-16.17.13-1024x505.png" alt="Screen Shot 2015-03-10 at 16.17.13" width="713" height="349" srcset="/uploads-archive/2015/03/Screen-Shot-2015-03-10-at-16.17.13-300x148.png 300w, /uploads-archive/2015/03/Screen-Shot-2015-03-10-at-16.17.13-228x113.png 228w" sizes="(max-width: 713px) 100vw, 713px" /></a></p>
<p>The app can be installed in Android or iOS tablets or cell phones so users can track purchases, sales and records of negotiations.</p>
<p>Those interested can register at: <a href="http://letsell.it/">http://letsell.it</a> to get information on this exclusive new product.</p>


LETSELL: Buy and sell on Instagram

<p>今年に入ってから、日本国内の受取ロッカーの新規設置のニュースがいくつか出てきている。</p>
<p>日本郵便と楽天 1月</p>
<p><a href="http://www.sankei.com/economy/news/150115/ecn1501150018-n1.html" target="_blank"> http://www.sankei.com/economy/news/150115/ecn1501150018-n1.html</a></p>
<p>&nbsp;</p>
<p>西友 3月</p>
<p><a href="http://www.nikkei.com/article/DGXLASDZ03HFD_T00C15A3TI0000/" target="_blank"> http://www.nikkei.com/article/DGXLASDZ03HFD_T00C15A3TI0000/</a></p>
<p>&nbsp;</p>
<p>欧米では日本よりは一般的だそうで、Amazonなどの大手ECサイトや物流会社や専門会社が町中にロッカーを設置している例も多いとのこと。</p>
<p>日本では東京にいてもほぼ見たことが無く、もしかしたらこれから一般化されていくかもしれないので考えてみた。</p>
<p>&nbsp;</p>
<h2>1. 公共交通機関がやるパターン</h2>
<p>JRなどが駅などにロッカーを設置し、配送業者からの受取を代行する。</p>
<p>別会社がロッカーへの搬入や受取期限超えの商品の返送などを行う。</p>
<p>顧客管理は自社で、物流は外部と連携する</p>
<p>&nbsp;</p>
<p>メリット：導入スピードが早そう</p>
<p>デメリット：鉄道会社間で仕様統一できなそう</p>
<p>&nbsp;</p>
<h2>2. 配送業者がロッカーを設置するパターン</h2>
<p>配送会社が駅や公共施設にロッカーを設置する。</p>
<p>ロッカーへの搬入や受取期限切れの返送はそのまま自社で行う。</p>
<p>顧客管理や物流も自社で行う</p>
<p>&nbsp;</p>
<p>メリット：一元管理で効率的そう。システム側が導入しやすそう</p>
<p>デメリット：全国的に広がるのはお金かかりそう = 時間かかりそう</p>
<p>&nbsp;</p>
<h2>3. コンビニ</h2>
<p>コンビニ受取プラス人通りが多い場所にロッカーを設置する。</p>
<p>搬入・搬出は別会社がやる。</p>
<p>顧客管理や物流は外部でやる</p>
<p>&nbsp;</p>
<p>メリット：導入スピードが早そう。便利そう</p>
<p>デメリット：手数料が高そう</p>
<p>&nbsp;</p>
<p>結論としては、コンビニでやればいいと思った。</p>
<p>利便性が高いし参入障壁も低いと思う。</p>
<p>管理の一元性と現場のフローが大変と思うので、その辺りさえクリアすれば顧客は利用すると思う</p>


【EC】受取用ロッカー

<p>今月、3月6日に総務省統計局から「家計におけるネットショッピングの実態把握」なるものが報道資料として発表されています。</p>
<p>ざっくり中身を説明させてもらうと最近ネットショッピングの利用が増えてきているので、どれくらいの人が、何を、幾らくらいネットで買い物をしているのかという調査で、2015年1月分の速報です。（確定データではない）→<a href="http://www.soumu.go.jp/menu_news/s-news/01toukei07_01000078.html">当該の調査</a></p>
<p>情報の集計世帯数17,029世帯（2人以上の世帯）で1ヶ月にインターネットを利用した支出があった世帯数は4,076世帯、1世帯当たりの支出額は一ヶ月31,757円だったそうです。1世帯で31,757円という数字は個人的には結構使っているなと感じました。</p>
<h2>ネットショップで何を買っているか？</h2>
<p>買い物の中身についてですが、自宅用が95.6%でほとんどを占めています。</p>
<table>
<tbody>
<tr>
<td>贈答用</td>
<td>自宅用</td>
</tr>
<tr>
<td>4.4%</td>
<td>95.6%</td>
</tr>
</tbody>
</table>
<p>出展：総務省（家計消費状況調査平成27年（2015年）１月分（速報）</p>
<p>&nbsp;</p>
<p>自宅用に何をかっているのかについて</p>
<table>
<tbody>
<tr>
<td>項目</td>
<td>支出額に占める割合</td>
</tr>
<tr>
<td>食料</td>
<td><strong>15.9%</strong></td>
</tr>
<tr>
<td>家電</td>
<td>7.9%</td>
</tr>
<tr>
<td>家具</td>
<td>2.3%</td>
</tr>
<tr>
<td>衣類・履物</td>
<td><strong>12.5%</strong></td>
</tr>
<tr>
<td>保健・医療</td>
<td>4.5%</td>
</tr>
<tr>
<td>化粧品</td>
<td>4.2%</td>
</tr>
<tr>
<td>自動車等関係用品</td>
<td>1.8%</td>
</tr>
<tr>
<td>書籍</td>
<td>2.5%</td>
</tr>
<tr>
<td>音楽・映像ソフト等</td>
<td>3.1%</td>
</tr>
<tr>
<td>デジタルコンテンツ</td>
<td>0.8%</td>
</tr>
<tr>
<td>保険</td>
<td>4.7%</td>
</tr>
<tr>
<td>旅行関係費</td>
<td><strong>19.5%</strong></td>
</tr>
<tr>
<td>チケット</td>
<td>2.8%</td>
</tr>
<tr>
<td>その他</td>
<td>13.0%</td>
</tr>
</tbody>
</table>
<p>出展：総務省（家計消費状況調査平成27年（2015年）１月分（速報</p>
<p>旅行関係がは単価が高いからなのかもしれませんが、割合的には最も支出の割合が高くなっています。</p>
<h2> ネットショッピングで物が売れるのはいつなのか？</h2>
<p>調査対象におけるネットショッピングを利用する世帯の割合の推移が下のグラフです。</p>
<p>2014年の3月に急激に増えているのはおそらく消費税増税の影響だと思いますが、2013年、2014年に共通しているのは12月が最もネットショッピングで買い物をしていて、季節が冬に向かうほど割合が増えていっています。</p>
<p>「外が寒いと買い物に出なくなるから？」というのは単純過ぎますが一つの要因かもしれません・・・</p>
<p><a href="/uploads-archive/2015/03/soumusyo01.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7053" src="/uploads-archive/2015/03/soumusyo01.gif" alt="soumusyo01" width="626" height="302" /></a></p>
<p>出展：総務省（家計消費状況調査平成27年（2015年）１月分（速報） 結果の概要：図２）</p>


ネットで物が売れるのは何月なのか？”家計のネットショッピングの実態把握”

<p>イケてるスマートフォンメーカーMeizuを聞いたので、調べてみました。<br />
日本には進出しておらず認知をしている人は極めて少ないと思われますが、多少日本語に翻訳された記事もありました。</p>
<h3 id="toc_0">Meizu概要</h2>
<p>まずは、Wikipediaから</p>
<blockquote><p>当初はデジタルオーディオプレイヤーを製造していたが、2007年以降はスマートフォンを製造するようになった。<br />
2015年2月9日、アリババはMeizuに5億9000万ドルを出資し、同社の少数株を取得することで合意した。この提携により、アリババは自社の携帯電話向けカスタムOS「YunOS」の搭載ハードウェアを増やし、一方のMeizuはAlibabaの巨大なオンライン流通ネットワークを利用することになる。</p></blockquote>
<p>とあります。<br />
ちょうど、1ヶ月ほど前にアリババから700億強の出資を受けています。</p>
<h3 id="toc_1">1ヶ月で150万台販売</h2>
<p>2014年第2四半期のスマートフォンシェアではトップ5が「Xiaomi」「Samsung」「Lenovo」「Yulong」「Huawei」とこのMeizuは入っていないものの、 2015年1月の1か月間で同社としては過去最大の 150万台のスマートフォンを販売したそうです。</p>
<p><a href="http://getnews.jp/archives/809037" target="_blank">Meizu、2015年1月は150万台のスマートフォンを販売</a></p>
<p>この150万台というのがどういう数字かと言うと<br />
日本で2014年の1年間で2770万台です。1ヶ月に割り戻すと、225万台です。<br />
異様なシェアを持つiphoneでも1,648万台。1ヶ月あたり137万台です。<br />
これは、日本全体のスマートフォン販売台数です。如何に、巨大なマーケットかつスケールが違うか分かると思います。<br />
このMeizuでトップ5に入っていません。</p>
<p><a href="http://www.m2ri.jp/newsreleases/main.php?id=010120150203500" target="_blank">http://www.m2ri.jp/newsreleases/main.php?id=010120150203500</a></p>
<p>ちなみに、xiaomiは、2014年第3四半期で1600万台、1ヶ月あたり530万台とすごいことになっています。</p>
<p><a href="http://jp.techcrunch.com/2014/12/16/20141215gartner-301m-smartphones-sold-in-q3-as-xiaomi-muscles-into-the-top-5-at-samsungs-expense/" target="_blank">http://jp.techcrunch.com/2014/12/16/20141215gartner-301m-smartphones-sold-in-q3-as-xiaomi-muscles-into-the-top-5-at-samsungs-expense/</a></p>
<h3 id="toc_2">製品キャプチャ</h2>
<h4 id="toc_3">MX4</h3>
<p><a href="/uploads-archive/2015/03/mx4.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-7039" src="/uploads-archive/2015/03/mx4.jpg" alt="mx4" width="225" height="190" /></a></p>
<ul>
<li>$ 449.00</li>
<li>147 g</li>
<li>5.36インチ</li>
<li>1920 x 1152 px</li>
<li>MediaTek 6595 8コア</li>
<li>16GB ROM</li>
<li>2GB RAM<br />
現在のメインストリーム機に位置します。<br />
5万円程度で8コアと先端のスペックをいっており、サイズ的にはiphone６Plusがベンチマークとしていると思われます。<br />
解像度が見たことない数値です。</li>
</ul>
<h4 id="toc_4">MX4 Pro</h3>
<p><a href="/uploads-archive/2015/03/mx4pro.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-7040" src="/uploads-archive/2015/03/mx4pro.jpg" alt="mx4pro" width="225" height="190" /></a></p>
<ul>
<li>$ 579.00</li>
<li>158g</li>
<li>5.5インチ</li>
<li>2560 x 1536 px</li>
<li>Samsung Exynos 5430 8コア</li>
<li>16GB ROM</li>
<li>3GB RAM<br />
いわゆるフラグシップ、ハイエンド機です。<br />
FullHDを超える2Kディスプレイを積んでいます。ボタンのあたりがなんだか激似ですが、GalaxyNOTEや６インチですがNexus6などがこの2Kディスプレイを積んでいます。<br />
メモリも3GBで申し分のない最高スペックです。それでいて、６万円程度の価格に抑えられています。</li>
</ul>
<h4 id="toc_5">M1 Note</h3>
<p><a href="/uploads-archive/2015/03/m1note.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-7041" src="/uploads-archive/2015/03/m1note.jpg" alt="m1note" width="262" height="190" srcset="/uploads-archive/2015/03/m1note.jpg 262w, /uploads-archive/2015/03/m1note-228x165.jpg 228w" sizes="(max-width: 262px) 100vw, 262px" /></a></p>
<ul>
<li>$ 未定</li>
<li>145g</li>
<li>5.5インチ</li>
<li>1920 x 1080 px</li>
<li>MediaTek MT6752 8コア</li>
<li>16GB ROM</li>
<li>2GB RAM<br />
こちらは、ローエンド機、廉価版の位置付けですが、スペックはiphone6plusそのものです。価格とCPUの性能が気になるところではあります。<br />
200ドル台で出してきたら、どこも勝てませんね。</li>
</ul>
<h4 id="toc_6">MX3</h3>
<p><a href="/uploads-archive/2015/03/MX3.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7042" src="/uploads-archive/2015/03/MX3-300x300.jpg" alt="MX3" width="300" height="300" srcset="/uploads-archive/2015/03/MX3-300x300.jpg 300w, /uploads-archive/2015/03/MX3-150x150.jpg 150w, /uploads-archive/2015/03/MX3-228x227.jpg 228w, /uploads-archive/2015/03/MX3.jpg 440w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<ul>
<li>$ 399.00</li>
<li>143 g</li>
<li>5.1インチ</li>
<li>1800 × 1080 px</li>
<li>Samsung Exynos 5 8コア</li>
<li>16GB ROM</li>
<li>2GB RAM<br />
昨年のモデルです。最近のスマートフォンメーカーとして、昨年のモデルを100ドルを値引いて売る手法が確立しているようです。<br />
xioamiはMI3という1年前の機種（それでも十分なスペック）をインドの進出にあたり、2秒で売り切るという話題をもたらしています。<br />
http://juggly.cn/archives/124491.html</li>
</ul>
<p>この時点で8コアを搭載しているのが驚きです。<br />
ちょうど、私も使っているNexus5あたりが去年モデルでベンチマークになるのでしょう。<br />
また、ディスプレイの解像度が見たことない数値です。いわゆるFullHDに縦が120pxほど足りません。</p>
<h3 id="toc_7">まとめ</h2>
<p>以上、現行で発売されているのはたったの4機種です。<br />
質感はすごくいいと思われるのですが、どこかで見たことあるような感じですねw<br />
世界1位と2位のスマートフォンメーカーのデザインを足して2で割ったような・・・・・<br />
それでも、高い次元で製品を作っていればいいと思います。<br />
ところで今、中国と関わらず製造しているスマートフォンメーカーなどあるのでしょうか。<br />
中国最大のIT企業アリババに出資を受けたMeizuからも目が離せません。</p>


Meizu(魅族科技)中国のスマートフォンメーカー

<p>ページ内でアンカーリンクさせる場合、</p>
<p>何も設定しないと急激に動いてしまい、動きとしてあまり見栄えが良くないため、</p>
<p>jQueryなどJavaScriptを使ったスムーススクロールを導入することが多いです。</p>
<p>&nbsp;</p>
<p>ただ、この場合、急激な動作を避けるために、&lt;a&gt;のクリックイベントに対して&#8221;return false;&#8221;をかけて、</p>
<p>実際にはリンクさせないようにするのですが、</p>
<p>CSS3ではアンカーリンクさせた要素に対してスタイルを設定することができる、</p>
<p>「:target」という疑似クラスがあり、</p>
<p>通常のスムーススクロールではこの「:target」を活かすことができません。</p>
<p>&nbsp;</p>
<p>そこで、CSS3の「:target」疑似クラスに対応させられるスムーススクロールを考えてみました。</p>
<p>&nbsp;</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="/demo/ninomiya/67/" target="_blank"> DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h2>
<p></p>

		<div id="crayon-649540158456f182295739" 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">jQuery</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;">
$(function(){
	/*-------------------------------
	通常のsmooth scroll
	-------------------------------*/
	$('a[href^=#]').click(function() {
		var speed = 400;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$('body,html').animate({scrollTop:position}, speed, 'swing');
		return false;
	});
});

↓

$(function(){
	/*-------------------------------
	「:target」に対応したsmooth scroll
	-------------------------------*/
	$('a[href^=#]').click(function() {
		var speed = 400;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$('body,html').animate({scrollTop:position}, speed, 'swing', function(){
			location.href = href;　←ここを追記
		});
		return false;
	});
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158456f182295739-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-2">2</div><div class="crayon-num" data-line="crayon-649540158456f182295739-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-4">4</div><div class="crayon-num" data-line="crayon-649540158456f182295739-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-6">6</div><div class="crayon-num" data-line="crayon-649540158456f182295739-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-8">8</div><div class="crayon-num" data-line="crayon-649540158456f182295739-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-10">10</div><div class="crayon-num" data-line="crayon-649540158456f182295739-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-12">12</div><div class="crayon-num" data-line="crayon-649540158456f182295739-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-14">14</div><div class="crayon-num" data-line="crayon-649540158456f182295739-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-16">16</div><div class="crayon-num" data-line="crayon-649540158456f182295739-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-18">18</div><div class="crayon-num" data-line="crayon-649540158456f182295739-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-20">20</div><div class="crayon-num" data-line="crayon-649540158456f182295739-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-22">22</div><div class="crayon-num" data-line="crayon-649540158456f182295739-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-24">24</div><div class="crayon-num" data-line="crayon-649540158456f182295739-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-26">26</div><div class="crayon-num" data-line="crayon-649540158456f182295739-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-28">28</div><div class="crayon-num" data-line="crayon-649540158456f182295739-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-30">30</div><div class="crayon-num" data-line="crayon-649540158456f182295739-31">31</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-649540158456f182295739-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-2"><span class="crayon-h">	</span><span class="crayon-c">/*-------------------------------</span></div><div class="crayon-line" id="crayon-649540158456f182295739-3"><span class="crayon-c">	通常のsmooth scroll</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-4"><span class="crayon-c">	-------------------------------*/</span></div><div class="crayon-line" id="crayon-649540158456f182295739-5"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'a[href^=#]'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</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 crayon-striped-line" id="crayon-649540158456f182295739-6"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">speed</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">400</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-7"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">attr</span><span class="crayon-sy">(</span><span class="crayon-s">"href"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-8"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">target</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">href</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">"#"</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-h"> </span><span class="crayon-sy">?</span><span class="crayon-h"> </span><span class="crayon-s">'html'</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-9"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">target</span><span class="crayon-sy">.</span><span class="crayon-e">offset</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">top</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-10"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'body,html'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">scrollTop</span><span class="crayon-sy">:</span><span class="crayon-i">position</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">speed</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'swing'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-11"><span class="crayon-h">		</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-12"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-13"><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-649540158456f182295739-14">&nbsp;</div><div class="crayon-line" id="crayon-649540158456f182295739-15">↓</div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-16">&nbsp;</div><div class="crayon-line" id="crayon-649540158456f182295739-17"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-18"><span class="crayon-h">	</span><span class="crayon-c">/*-------------------------------</span></div><div class="crayon-line" id="crayon-649540158456f182295739-19"><span class="crayon-c">	「:target」に対応したsmooth scroll</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-20"><span class="crayon-c">	-------------------------------*/</span></div><div class="crayon-line" id="crayon-649540158456f182295739-21"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'a[href^=#]'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</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 crayon-striped-line" id="crayon-649540158456f182295739-22"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">speed</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">400</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-23"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">attr</span><span class="crayon-sy">(</span><span class="crayon-s">"href"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-24"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">target</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">href</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">"#"</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-h"> </span><span class="crayon-sy">?</span><span class="crayon-h"> </span><span class="crayon-s">'html'</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-25"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">target</span><span class="crayon-sy">.</span><span class="crayon-e">offset</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">top</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-26"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'body,html'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">scrollTop</span><span class="crayon-sy">:</span><span class="crayon-i">position</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">speed</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'swing'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540158456f182295739-27"><span class="crayon-h">			</span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-i">href</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-sy">;</span>　←ここを追記</div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-28"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-29"><span class="crayon-h">		</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-30"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-31"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>方法は簡単で、</p>
<p>通常のスムーススクロールのアニメーション部分のコールバック関数で、</p>
<p>本来のリンクを強制的に行わせます。</p>
<p>&nbsp;</p>
<p>「:target」を使うときには是非どうぞ。</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/03/25

2015/03/25

2015/03/21

2015/03/18

2015/03/18

2015/03/18

2015/03/18

2015/03/18

2015/03/18

2015/03/13

2015/03/11

2015/03/11

2015/03/11

2015/03/11

2015/03/11

2015/03/10

2015/03/10

2015/03/05