video：動画自体をクリックで再生・停止させる

<p>昨日この記事を目撃しました。</p>
<p><a href="http://trendy.nikkeibp.co.jp/article/pickup/20150325/1063349/" target="_blank">なぜ、レノボはThinkPadを米沢で生産するのか？</a></p>
<p>この記事を見て、私は一人ざわざわしました。</p>
<p>皆さんは何だかわかりますか？</p>
<h2>外資メーカーが日本生産</h2>
<p>SHARPが液晶テレビでブランディングをした「世界の亀山モデル」やSHARPに比べるとマイナーですが、 VAIOの里と言われる「安曇野モデル」などとは訳が違います。</p>
<p><a href="http://www.nikkei.com/article/DGXKZO82137800Q5A120C1EA1000/" target="_blank">生産の国内回帰を一過性で終わらせるな ：日本経済新聞 </a></p>
<p>このような話の中でキャノンやパナソニック等の国内回帰も注目されていますが、これとも違います。</p>
<p>レノボが中国企業でThinkpadは元々IBMが作るPCのブランドであるという点です。</p>
<p>つまり今まで例を上げた国内メーカーの国内生産ではなく、外資メーカーの日本生産なのです。</p>
<p>一つ時代の大きな流れだなと思います。</p>
<p>先人達の功績のおかげで日本の品質というのは、世界に認められています。</p>
<p>今までは、日本メーカーがそれを売りにしつつ、中国での生産と国内生産で発展を遂げて来たのですが、これからは、 外資メーカーが品質を求める場合に日本での生産を行う「Assembled in Japan」ということが選択肢に入っているくるのかと思います。</p>
<h2>他の事例</h2>
<p>他にも調べてみると、GEの医療機器会社が日本生産を行っていたり、化粧品のロレアルが新工場を設立をしています。</p>
<p><a href="http://techon.nikkeibp.co.jp/article/FEATURE/20140430/349382/?ST=ndh" target="_blank">日本工場を持つ外資医療機器会社、GE Healthcareの日野工場を見る</a></p>
<p><a href="http://www.nikkei.com/article/DGXNASGF2304C_T21C13A0MM8000/" target="_blank">仏ロレアル、日本に新工場　アジアへ高級化粧品</a></p>
<h2>まとめ</h2>
<p>こうしてみると、付加価値が高い物、高級品に対しての進出がされていることがわかります。</p>
<p>日本がまた立ち上がるのはこの分野しかないと確信しました。</p>


レノボがThinkPadを米沢で生産

<p>ここ1〜2ヶ月、日本企業のミャンマー進出のニュースを見ることがすごく増えている気がしたのでまとめてみた。</p>
<p>ミャンマーでは急速な経済発展が見込まれる中、インフラの整備が行き届いておらず<br />
外資の呼び込みをより強めていく方針を政府が打ち出している。</p>
<p>昨年の日本3メガ銀行の免許交付から始まり、あらゆる分野への参入を認め始めている模様。<br />
まずは今までの流れ</p>
<h2>今日までの緩和の流れ</h2>
<p>2014年8月 外資参入を規制していた業種を半減</p>
<p>2014年10月 3メガ銀行が営業免許獲得</p>
<p>2014年12月 保険業を外資に解放 → 現在審査中(4月頃発表か) 大手3社が有力視</p>
<p>2015年2月 外資系企業の勧誘強化を発表</p>
<p>&nbsp;</p>
<h2>今月のミャンマーへの日本企業の進出のリリース</h2>
<p>三菱商事 食品製造・物流会社出資</p>
<p>投資規模：250億円</p>
<p>ミャンマーのコア事業への日本企業出資が初</p>
<p>&nbsp;</p>
<p>日本郵船 完成車輸送の総合物流会社設立</p>
<p>海上輸送に加え、ヤンゴン港から任意の場所まで配送</p>
<p>&nbsp;</p>
<p>ワコール 女性用下着製造・販売会社設立</p>
<p>投資規模：7億8千万円</p>
<p>対向けのブラジャーの製造をティラワで</p>
<p>&nbsp;</p>
<p>住友商事 ティラワに物流会社設立</p>
<p>投資規模：14億円</p>
<p>ティラワでの物流サービス業は初</p>
<p>&nbsp;</p>
<p>エースコック 製造・販売会社設立</p>
<p>資本金 2千万USD</p>
<p>ヤンゴン支店で自社の即席麺を輸入していたが好調なよう</p>
<p>&nbsp;</p>
<p>政府の方針上、今後も日本企業の進出は加速しそうだ</p>
<p>&nbsp;</p>
<p>最後に、余談だが以下のようなニュースがあった。</p>
<p><a href="http://www.asahi.com/articles/ASH3K5FDTH3KUHBI01F.html" target="_blank"> http://www.asahi.com/articles/ASH3K5FDTH3KUHBI01F.html</a></p>
<p>ゆかりがない人には笑い話と思われるが、我々としては言動はもちろんだが、<br />
持ち物や身に付けるものにも配慮しなければと思った</p>


最近日本企業のミャンマー進出が活発な件

<p>前回インストールしたcakephp でsmartyを使いたかったので使えるようにしてみました。</p>
<h3>smartyのダウンロード</h3>
<p>・smartyの公式サイト（<a href="http://www.smarty.net/download" target="_blank">http://www.smarty.net/download</a>）より安定版（stable）をダウンロードします。<br />
・ファイルを解凍しディレクトリ内のlibsをsmartyに変更します。<br />
・cakephp内のapp/Vender/の下に先ほどのsmartyディレクトリを配置します。<br />
・smartyが使用するディレクトリを作成します。</p>

		<div id="crayon-6495401585588894570257" 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;">
app/tmp/smarty/cache/
app/tmp/smarty/compile/</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-6495401585588894570257-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585588894570257-2">2</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-6495401585588894570257-1"><span class="crayon-i">app</span>/<span class="crayon-i">tmp</span>/<span class="crayon-i">smarty</span>/<span class="crayon-i">cache</span>/</div><div class="crayon-line crayon-striped-line" id="crayon-6495401585588894570257-2"><span class="crayon-i">app</span>/<span class="crayon-i">tmp</span>/<span class="crayon-i">smarty</span>/<span class="crayon-i">compile</span>/</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>SmartyView.phpのダウンロード</h3>
<p>SmartyView.phpは、cakephpでsmartyをつかうためのファイルです。<br />
このファイルをこちら（<a href="https://github.com/news2u/cakephp-smartyview" target="_blank">https://github.com/news2u/cakephp-smartyview</a>）よりダウンロードします。<br />
その後、app/View/の下に配置します。</p>
<h3>AppController.php の変更</h3>
<p>app/Controller/AppController.phpで SmartyView を使用するように変更します。</p>
<p></p>

		<div id="crayon-649540158558c885383631" 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;">
class AppController extends Controller {
    public $viewClass = 'Smarty';
}</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-649540158558c885383631-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158558c885383631-2">2</div><div class="crayon-num" data-line="crayon-649540158558c885383631-3">3</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-649540158558c885383631-1"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">AppController</span><span class="crayon-h"> </span><span class="crayon-r">extends</span><span class="crayon-h"> </span><span class="crayon-e">Controller</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158558c885383631-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">viewClass</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'Smarty'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158558c885383631-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>動作確認</h3>
<p>動作確認するためにサンプルを作成します。<br />
app/Controller/SamplesController.phpを作成します。</p>
<p></p>

		<div id="crayon-649540158558d528976834" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;?php
class SamplesController extends AppController {
	public $viewClass = 'Smarty';
	public function index() {
		$this-&gt;set('sampleValue', 'サンプルテキスト');
	}
}</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-649540158558d528976834-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158558d528976834-2">2</div><div class="crayon-num" data-line="crayon-649540158558d528976834-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158558d528976834-4">4</div><div class="crayon-num" data-line="crayon-649540158558d528976834-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158558d528976834-6">6</div><div class="crayon-num" data-line="crayon-649540158558d528976834-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-649540158558d528976834-1"><span class="crayon-h">&lt;</span><span class="crayon-sy">?</span><span class="crayon-e">php</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158558d528976834-2"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">SamplesController</span><span class="crayon-h"> </span><span class="crayon-r">extends</span><span class="crayon-h"> </span><span class="crayon-e">AppController</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540158558d528976834-3"><span class="crayon-h">	</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">viewClass</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'Smarty'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158558d528976834-4"><span class="crayon-h">	</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">index</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-649540158558d528976834-5"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-r">this</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">set</span><span class="crayon-sy">(</span><span class="crayon-s">'sampleValue'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'サンプルテキスト'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158558d528976834-6"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540158558d528976834-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>続いて、テンプレートを作成します。<br />
app/View/samples/index.tplを作成します。</p>
<p></p>

		<div id="crayon-649540158558f114105224" 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;h1&gt;{$sampleValue}&lt;/h1&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-649540158558f114105224-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-649540158558f114105224-1"><span class="crayon-h">&lt;</span><span class="crayon-e">h1</span><span class="crayon-h">&gt;</span><span class="crayon-sy">{</span><span class="crayon-sy">$</span><span class="crayon-i">sampleValue</span><span class="crayon-sy">}</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">h1</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>URLにアクセスし確認します。<br />
<a href="http://ud-ac.com/cake2/Samples" target="_blank">動作確認</a></p>
<p>エラーなく表示されればOKです。</p>

cakephp smartyを使えるようにする

<p>海淘が熱い！ 中国に強い企業の方と話していました。</p>
<p>何だか、最近引き寄せるように中国との繋がりを持った方たちと話す機会があります。 こうやってブログを書いていると全く別のメーカーの方から中国へのビジネスをやっているんですか？と今日も聞かれました。 当時話していた時は、中国へのビジネスは特に取り組んでいなかったのですが、香港には既に進出。大陸への情報収集を行っている最中とのことでした。 これがアウトプットの醍醐味ですね。</p>
<p>ということで今後もガンガン行きます。</p>
<p>「海淘」はカタカタにすると、「ハイタオ」となります。「海」は海外の意味で「淘」はものを探すとなりますので、 いわゆる海外通販・個人輸入を意味する中国語ですね。</p>
<p>我々が目指している越境ECで世界をもっと身近にするというこの越境ECは日本側からの視点で、中国側からの視点ですと、 日本を含めて「海淘」になり、要は同じ事を意味し、視点と言語だけの違いになります。</p>
<h3 id="-">海淘が流行る理由</h2>
<p>なんといっても、日本の品質の高さでしょう。 逆に言うと、低品質や偽物が横行し過ぎているため、物流コストを支払ってでも正規品を入手したいという本物を知る層が増えているためでしょう。 同じメーカーでも日本向けと、他国向けでは品質が異なるという話しも聞いたことがあります。</p>
<h3 id="-">海淘利用者</h2>
<p>こちらの記事によると、購入者は1,800万人、購入額は3兆8千億円とあります。</p>
<p><a href="http://www.hirogin.co.jp/lib/kaigai/shanghai/report/s1409.pdf">http://www.hirogin.co.jp/lib/kaigai/shanghai/report/s1409.pdf</a></p>
<p>楽天の流通総額が2兆円を超えたと言われているところですから、やはりマーケットの大きさの凄まじさがわかります。</p>
<p>アリペイのみですが、更なるデータも確認出来ました。</p>
<p><a href="http://weibo-japan.blog.jp/archives/1007482436.html">http://weibo-japan.blog.jp/archives/1007482436.html</a></p>
<h4 id="-">人気商品</h3>
<ol>
<li>スキンケア商品</li>
<li>化粧品</li>
<li>玩具</li>
<li>女性関連商品（アパレル・アクセサリー等）</li>
<li>赤ちゃん用品</li>
<li>健康食品</li>
<li>香水</li>
<li>アパレル</li>
</ol>
<h4 id="-">購入国</h3>
<ol>
<li>アメリカ</li>
<li>香港</li>
<li>日本</li>
<li>韓国</li>
<li>台湾</li>
<li>イギリス</li>
<li>マレーシア</li>
<li>オランダ</li>
<li>デンマーク</li>
<li>スウェーデン</li>
</ol>
<h3 id="-">有力サイト</h2>
<p>先日お話した方に聞きました。</p>
<ul>
<li><a href="http://www.haitao.com/">http://www.haitao.com/</a></li>
<li><a href="http://haitao.smzdm.com/">http://haitao.smzdm.com/</a></li>
<li><a href="http://www.55haitao.com/">http://www.55haitao.com/</a></li>
<li><a href="http://www.letsebuy.com/">http://www.letsebuy.com/</a></li>
</ul>
<p>海淘関連のセミナーも増えているようなので行ってみたいと思います。</p>


海淘が熱い

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


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/04/01

2015/04/01

2015/03/31

2015/03/26

2015/03/25

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