<p>メディアコマースというものが活況らしい。</p>
<p>要は、全面にECサイトを押し出すのではなくあくまでメディアの延長線上でのECという位置づけのサイト。</p>
<p>以前<a href="/officer/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E5%8C%96%E3%81%99%E3%82%8Bec.html" target="_blank">メディア化するEC</a>という記事を書き、その時はそんなでもなかったのだが、1年あまりで急速に流れが来ているようだ。</p>
<p>いくつかの事例をまとめてみた。</p>
<h2>houzz</h2>
<p>http://www.houzz.jp/</p>
<p>アメリカ最大のメディアコマース</p>
<p>2015年4月 日本でサービス開始</p>
<p>&nbsp;</p>
<h2>JOOY</h2>
<p><a href="https://jooy.jp/" target="_blank">https://jooy.jp/</a></p>
<p>DeNAが始めた男性ファッションに特化したキュレーションプラットフォーム</p>
<p>2015年4月 サービス開始</p>
<p>今後EC機能を追加していくとのこと</p>
<p>&nbsp;</p>
<h2>MERY</h2>
<p><a href="http://mery.jp/" target="_blank">http://mery.jp/</a></p>
<p>女性向けファッションのまとめサイト</p>
<p>2014年10月 DeNAが買収</p>
<p>今後EC機能を追加していくとのこと</p>
<p>&nbsp;</p>
<h2>4meee!と4yuuu!</h2>
<p><a href="http://4meee.com/" target="_blank">http://4meee.com/</a></p>
<p><a href="http://4yuuu.com/" target="_blank">http://4yuuu.com/</a></p>
<p>4meee!と4yuuu!を運営するロケットベンチャー株式会社</p>
<p>2015年2月 エニグモが買収</p>
<p>BUYMAとの連携を強める</p>
<p>&nbsp;</p>
<h2>STYLE HAUS</h2>
<p><a href="https://stylehaus.jp/" target="_blank">https://stylehaus.jp/</a></p>
<p>ファッションメディア</p>
<p>2015年2月 エニグモがサービス開始</p>
<p>BUYMA外のユーザーをつかむ</p>
<p>&nbsp;</p>
<h2>YAPPA</h2>
<p>2014年10月 スタートトゥデイが買収</p>
<p>相互利用による集客</p>
<p>&nbsp;</p>
<h2>honeyee.com</h2>
<p><a href="http://www.honeyee.com/" target="_blank">http://www.honeyee.com/</a></p>
<p>2013年 アラタナがハニカムを買収</p>
<p>2014年 ECサイトJUST LIKE HONEYEEのサービス開始</p>
<p>&nbsp;</p>
<p>今後は、ECサイトが集客手段としてのメディアを持つパターンとメディアが収益源としてECサイトを持つという2パターンに分けて見ていくと勉強になると思った</p>
<p>&nbsp;</p>


メディアコマース

<p><a href="https://chrome.google.com/webstore/detail/weblioポップアップ英和辞典/oingodpdjohhkelnginmkagmkbplgema">https://chrome.google.com/webstore/detail/weblioポップアップ英和辞典/oingodpdjohhkelnginmkagmkbplgema</a></p>
<p>これめちゃくちゃ便利です。</p>
<p>サイトに遷移する必要なくポップアップで英単語を表示してくれます。</p>
<p><a href="/uploads-archive/2015/04/133617723778bcb0f85cc4f43d866944.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7257" src="/uploads-archive/2015/04/133617723778bcb0f85cc4f43d866944-300x266.jpg" alt="Weblioポップアップ英和辞典オプション" width="300" height="266" srcset="/uploads-archive/2015/04/133617723778bcb0f85cc4f43d866944-300x266.jpg 300w, /uploads-archive/2015/04/133617723778bcb0f85cc4f43d866944-228x202.jpg 228w, /uploads-archive/2015/04/133617723778bcb0f85cc4f43d866944.jpg 915w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ポップアップさせるトリガーもオプションで複数設定できます。</p>
<ul>
<li>英単語にマウスカーソルをあわせてポップアップ</li>
<li>英単語にマウスカーソルをあわせ、[Ctrl]キーを押してポップアップ</li>
<li>英単語を選択状態にしてポップアップ</li>
<li>英単語にマウスカーソルをのせても、選択状態にしてもどちらでもポップアップ</li>
<li>英単語を選択状態にし、Eキーを押してポップアップ</li>
</ul>
<p>カーソルを合わせるだけだったり、選択状態にするだけにすると、文章をコピーしたいだけの時など意図していないポップアップが 上がってしまうことが多々あったので、私は、キーを押すことを組み合わせて癖にしました。</p>
<p><a href="/uploads-archive/2015/04/a47cee23650725c6d6202f7e7c95549c.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7258" src="/uploads-archive/2015/04/a47cee23650725c6d6202f7e7c95549c-300x248.jpg" alt="Weblioポップアップ英和辞典オプション 2" width="300" height="248" srcset="/uploads-archive/2015/04/a47cee23650725c6d6202f7e7c95549c-300x248.jpg 300w, /uploads-archive/2015/04/a47cee23650725c6d6202f7e7c95549c-228x188.jpg 228w, /uploads-archive/2015/04/a47cee23650725c6d6202f7e7c95549c.jpg 910w" sizes="(max-width: 300px) 100vw, 300px" /></a> <a href="/uploads-archive/2015/04/b6aba5ea391a64c6fc688f767dd9fa3b.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7259" src="/uploads-archive/2015/04/b6aba5ea391a64c6fc688f767dd9fa3b-300x152.jpg" alt="Weblioポップアップ英和辞典オプション 3" width="300" height="152" srcset="/uploads-archive/2015/04/b6aba5ea391a64c6fc688f767dd9fa3b-300x152.jpg 300w, /uploads-archive/2015/04/b6aba5ea391a64c6fc688f767dd9fa3b-228x116.jpg 228w, /uploads-archive/2015/04/b6aba5ea391a64c6fc688f767dd9fa3b.jpg 911w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>他の設定も豊富にあります。</p>
<p>httpsでも可能な限りポップアップは設定をしておいたほうがいいです。 こちらの設定に気づかずにFacebookでポップアップが上がらず悶々とした日々を過ごしていました。</p>
<h3 id="-">類似の拡張機能</h2>
<h3>英辞郎</h3>
<p><a href="https://chrome.google.com/webstore/detail/英辞郎-on-the-web-拡張機能/oonalfdoahlmjaoloddjenihohbfodme">https://chrome.google.com/webstore/detail/英辞郎-on-the-web-拡張機能/oonalfdoahlmjaoloddjenihohbfodme</a></p>
<p>こちらも実はすごくいいです。</p>
<p>辞書というよりは、例文が非常に豊富で生きた英語がいいとオススメされました。</p>
<h3>Google翻訳</h3>
<p><a href="https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb">https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb</a></p>
<p>言わずもがなで取り上げないといけないですね。</p>


英語学習に便利なChrome拡張機能「Weblioポップアップ英和辞書」

jQueryのよく使いそうなAjax関係のAPIをまとめてみました

cakephp 一覧表示、登録、編集、削除の実装

レスポンシブ＆フラットに合ったLightbox系jQueryプラグイン「strip」

<p>サイトに埋め込んだ動画にjavascriptを使ってテロップを出す方法です、そもそも「動画に元からテロップ入れておけばいいじゃないか」ってことになってしまいますが&#8230;.。応用すればflashを使わずにvideoタグとjsで色々な事ができそうな気がします。</p>
<p><a class="demo" href="/demo/makabe/03/03demo.html">demo</a></p>
<p>方法としてはcurrentTimeプロパティを使って動画の現在尺に合わせた内容の文章を表示させています。</p>
<p>&nbsp;</p>
<h2>video ＋ javascript 現在の再生位置を表示する</h2>
<p>テロップの前にまず現在の再生位置（再生時間）を表示させてみます。</p>

		<div id="crayon-6495401585e10346975264" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
var video = document.getElementById("v");

v.addEventListener("timeupdate", function(){
		document.getElementById("time").innerHTML = v.currentTime;
	}, 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-6495401585e10346975264-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e10346975264-2">2</div><div class="crayon-num" data-line="crayon-6495401585e10346975264-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e10346975264-4">4</div><div class="crayon-num" data-line="crayon-6495401585e10346975264-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-6495401585e10346975264-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">video</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">"v"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e10346975264-2">&nbsp;</div><div class="crayon-line" id="crayon-6495401585e10346975264-3"><span class="crayon-i">v</span><span class="crayon-sy">.</span><span class="crayon-e">addEventListener</span><span class="crayon-sy">(</span><span class="crayon-s">"timeupdate"</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 crayon-striped-line" id="crayon-6495401585e10346975264-4"><span class="crayon-h">		</span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">"time"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">innerHTML</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">v</span><span class="crayon-sy">.</span><span class="crayon-i">currentTime</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401585e10346975264-5"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>htmlは各ブラウザに対応した動画ファイルを挿入して、再生位置を表示するpタグを書いておきます。</p>

		<div id="crayon-6495401585e14689976927" 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 controls id="v"&gt;
&lt;source src="video/sample1.mp4"&gt;
&lt;source src="video/sample1.webm"&gt;
&lt;source src="video/sample1.ogg"&gt;
&lt;/video&gt;

&lt;p id="time"&gt;&lt;/p&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-6495401585e14689976927-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e14689976927-2">2</div><div class="crayon-num" data-line="crayon-6495401585e14689976927-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e14689976927-4">4</div><div class="crayon-num" data-line="crayon-6495401585e14689976927-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e14689976927-6">6</div><div class="crayon-num" data-line="crayon-6495401585e14689976927-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-6495401585e14689976927-1"><span class="crayon-h">&lt;</span><span class="crayon-e">video </span><span class="crayon-e">controls </span><span class="crayon-i">id</span>=<span class="crayon-s">"v"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e14689976927-2"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/sample1.mp4"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-6495401585e14689976927-3"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/sample1.webm"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e14689976927-4"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/sample1.ogg"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-6495401585e14689976927-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">video</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e14689976927-6">&nbsp;</div><div class="crayon-line" id="crayon-6495401585e14689976927-7"><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"time"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>「timeupdate:再生位置が変更された」というイベントで処理をさせる事で常に再生時間を取得してくれます。</p>
<h2>video ＋ javascript 尺に合わせてテロップを出す</h2>
<p>if分で尺を限定する事で、画にあったテロップが出せます。</p>

		<div id="crayon-6495401585e15407812307" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
v.addEventListener("timeupdate", function(){
		if(video.currentTime &gt; 3){
			if(video.currentTime &lt; 8){
				document.getElementById("price").innerHTML = "シャンパン￥2800";
			}
		}
	}, 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-6495401585e15407812307-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e15407812307-2">2</div><div class="crayon-num" data-line="crayon-6495401585e15407812307-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e15407812307-4">4</div><div class="crayon-num" data-line="crayon-6495401585e15407812307-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e15407812307-6">6</div><div class="crayon-num" data-line="crayon-6495401585e15407812307-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-6495401585e15407812307-1"><span class="crayon-i">v</span><span class="crayon-sy">.</span><span class="crayon-e">addEventListener</span><span class="crayon-sy">(</span><span class="crayon-s">"timeupdate"</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 crayon-striped-line" id="crayon-6495401585e15407812307-2"><span class="crayon-h">		</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">video</span><span class="crayon-sy">.</span><span class="crayon-i">currentTime</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-cn">3</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401585e15407812307-3"><span class="crayon-h">			</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">video</span><span class="crayon-sy">.</span><span class="crayon-i">currentTime</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-cn">8</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e15407812307-4"><span class="crayon-h">				</span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">"price"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e ">innerHTML</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"シャンパン￥2800"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401585e15407812307-5"><span class="crayon-h">			</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e15407812307-6"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-6495401585e15407812307-7"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>htmlでテロップが表示される場所も作ります。</p>

		<div id="crayon-6495401585e17300405145" 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;p id="price"&gt;&lt;/p&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-6495401585e17300405145-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-6495401585e17300405145-1"><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"price"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>この方法を応用すれば、動画中の商品をクリックすれば商品ページに飛ぶようなインタラクティブなサイトが作れると思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

html5 video javascriptで動画のタイムにあわせてテロップを出す

<div class="booklink-box" style="text-align: left; padding-bottom: 20px; font-size: small; zoom: 1; overflow: hidden;">
<div class="booklink-image" style="float: left; margin: 0 15px 10px 0;"><a target="_blank" rel="noopener"><img decoding="async" style="border: none;" src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/9270/9784532119270.jpg?_ex=200x200" /></a></div>
<div class="booklink-info" style="line-height: 120%; zoom: 1; overflow: hidden;">
<div class="booklink-name" style="margin-bottom: 10px; line-height: 120%;">
<p><a target="_blank" rel="noopener">ビジネス・フレームワーク</a></p>
<div class="booklink-powered-date" style="font-size: 8pt; margin-top: 5px; font-family: verdana; line-height: 120%;">posted with <a href="https://yomereba.com" target="_blank" rel="nofollow noopener">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom: 5px;">堀 公俊 日本経済新聞出版社 2013年08月</div>
<div class="booklink-link2" style="margin-top: 10px;">
<div class="shoplinkamazon" style="display: inline; margin-right: 5px;"><a href="https://www.amazon.co.jp/exec/obidos/asin/4532119278/sackoh71/" target="_blank" rel="noopener">Amazon</a></div>
</div>
</div>
<div class="booklink-footer" style="clear: left;"></div>
</div>
<p>ビジネスフレームワークが200種まとまった文庫です。 それぞれの項目で本一冊説明出来るほどの内容が見開き2ページで端的にまとまっています。</p>
<p>目次を引用させて頂きつつそれぞれの項目のGoogle検索結果のリンクをつけておきますので、 気になったワードはクリックで確認してみてください。</p>
<h3>第Ⅰ章　戦略立案のフレームワーク</h3>
<ol>
<li><a href="https://google.co.jp/search?q=３Ｃ" target="_blank" rel="noopener">３Ｃ</a></li>
<li><a href="https://google.co.jp/search?q=ＳＷＯＴ（スウォット）" target="_blank" rel="noopener">ＳＷＯＴ（スウォット）</a></li>
<li><a href="https://google.co.jp/search?q=ＰＥＳＴ（ペスト）" target="_blank" rel="noopener">ＰＥＳＴ（ペスト）</a></li>
<li><a href="https://google.co.jp/search?q=３Ｍ（ヒト／モノ／カネ）" target="_blank" rel="noopener">３Ｍ（ヒト／モノ／カネ）</a></li>
<li><a href="https://google.co.jp/search?q=７Ｓ" target="_blank" rel="noopener">７Ｓ</a></li>
<li><a href="https://google.co.jp/search?q=ＶＲＩＯ（ヴリオ）" target="_blank" rel="noopener">ＶＲＩＯ（ヴリオ）</a></li>
<li><a href="https://google.co.jp/search?q=５Ｆ（ファイブ・フォース）" target="_blank" rel="noopener">５Ｆ（ファイブ・フォース）</a></li>
<li><a href="https://google.co.jp/search?q=ランチェスターの法則" target="_blank" rel="noopener">ランチェスターの法則</a></li>
<li><a href="https://google.co.jp/search?q=競争戦略ポジショニング" target="_blank" rel="noopener">競争戦略ポジショニング</a></li>
<li><a href="https://google.co.jp/search?q=ＰＰＭ" target="_blank" rel="noopener">ＰＰＭ</a></li>
<li><a href="https://google.co.jp/search?q=アンゾフの成長マトリクス" target="_blank" rel="noopener">アンゾフの成長マトリクス</a></li>
<li><a href="https://google.co.jp/search?q=バリューチェーン" target="_blank" rel="noopener">バリューチェーン</a></li>
<li><a href="https://google.co.jp/search?q=バランス・スコア・カード" target="_blank" rel="noopener">バランス・スコア・カード</a><br />
<h3 id="-">第Ⅱ章　マーケティングのフレームワーク</h3>
</li>
<li><a href="https://google.co.jp/search?q=ＳＴＰ" target="_blank" rel="noopener">ＳＴＰ</a></li>
<li><a href="https://google.co.jp/search?q=ポジショニングマップ" target="_blank" rel="noopener">ポジショニングマップ</a></li>
<li><a href="https://google.co.jp/search?q=４Ｐ" target="_blank" rel="noopener">４Ｐ</a></li>
<li><a href="https://google.co.jp/search?q=プロダクトアウト／マーケットイン" target="_blank" rel="noopener">プロダクトアウト／マーケットイン</a></li>
<li><a href="https://google.co.jp/search?q=製品ライフサイクル" target="_blank" rel="noopener">製品ライフサイクル</a></li>
<li><a href="https://google.co.jp/search?q=イノベーター理論" target="_blank" rel="noopener">イノベーター理論</a></li>
<li><a href="https://google.co.jp/search?q=パレートの法則" target="_blank" rel="noopener">パレートの法則</a></li>
<li><a href="https://google.co.jp/search?q=ＲＦＭ分析" target="_blank" rel="noopener">ＲＦＭ分析</a></li>
<li><a href="https://google.co.jp/search?q=バリュー分析（ＣＳ／ＣＥ分析）" target="_blank" rel="noopener">バリュー分析（ＣＳ／ＣＥ分析）</a></li>
<li><a href="https://google.co.jp/search?q=ＡＩＤＭＡ（アイドマ）" target="_blank" rel="noopener">ＡＩＤＭＡ（アイドマ）</a><br />
<h3 id="-">第Ⅲ章　問題解決のフレームワーク</h3>
</li>
<li><a href="https://google.co.jp/search?q=Ａs　ｉｓ／Ｔｏ　ｂｅ（ギャップ分析）" target="_blank" rel="noopener">Ａs　ｉｓ／Ｔｏ　ｂｅ（ギャップ分析）</a></li>
<li><a href="https://google.co.jp/search?q=特性要因図" target="_blank" rel="noopener">特性要因図</a></li>
<li><a href="https://google.co.jp/search?q=ロジックツリー" target="_blank" rel="noopener">ロジックツリー</a></li>
<li><a href="https://google.co.jp/search?q=プロセスマップ" target="_blank" rel="noopener">プロセスマップ</a></li>
<li><a href="https://google.co.jp/search?q=ブレーンストーミング" target="_blank" rel="noopener">ブレーンストーミング</a></li>
<li><a href="https://google.co.jp/search?q=ＳＣＡＭＰＥＲ（スキャンパー）" target="_blank" rel="noopener">ＳＣＡＭＰＥＲ（スキャンパー）</a></li>
<li><a href="https://google.co.jp/search?q=マインドマップ" target="_blank" rel="noopener">マインドマップ</a></li>
<li><a href="https://google.co.jp/search?q=親和図法" target="_blank" rel="noopener">親和図法</a></li>
<li><a href="https://google.co.jp/search?q=タイムマシン法" target="_blank" rel="noopener">タイムマシン法</a></li>
<li><a href="https://google.co.jp/search?q=期待／課題マトリクス" target="_blank" rel="noopener">期待／課題マトリクス</a></li>
<li><a href="https://google.co.jp/search?q=プロコン表" target="_blank" rel="noopener">プロコン表</a></li>
<li><a href="https://google.co.jp/search?q=ペイオフマトリクス" target="_blank" rel="noopener">ペイオフマトリクス</a></li>
<li><a href="https://google.co.jp/search?q=意思決定マトリクス" target="_blank" rel="noopener">意思決定マトリクス</a><br />
<h3 id="-">第Ⅳ章　マネジメントのフレームワーク</h3>
</li>
<li><a href="https://google.co.jp/search?q=マネジメント・ヒエラルキー" target="_blank" rel="noopener">マネジメント・ヒエラルキー</a></li>
<li><a href="https://google.co.jp/search?q=ＰＤＣＡ" target="_blank" rel="noopener">ＰＤＣＡ</a></li>
<li><a href="https://google.co.jp/search?q=ＱＣＤ" target="_blank" rel="noopener">ＱＣＤ</a></li>
<li><a href="https://google.co.jp/search?q=５Ｗ１Ｈ" target="_blank" rel="noopener">５Ｗ１Ｈ</a></li>
<li><a href="https://google.co.jp/search?q=ムリ／ムダ／ムラ（３Ｍ）" target="_blank" rel="noopener">ムリ／ムダ／ムラ（３Ｍ）</a></li>
<li><a href="https://google.co.jp/search?q=５Ｓ" target="_blank" rel="noopener">５Ｓ</a></li>
<li><a href="https://google.co.jp/search?q=３現主義" target="_blank" rel="noopener">３現主義</a></li>
<li><a href="https://google.co.jp/search?q=ＥＣＲＳ（イクルス）" target="_blank" rel="noopener">ＥＣＲＳ（イクルス）</a></li>
<li><a href="https://google.co.jp/search?q=ハインリッヒの法則" target="_blank" rel="noopener">ハインリッヒの法則</a></li>
<li><a href="https://google.co.jp/search?q=ＣＭＭＩ（能力成熟度統合モデル）" target="_blank" rel="noopener">ＣＭＭＩ（能力成熟度統合モデル）</a></li>
<li><a href="https://google.co.jp/search?q=ＯＡＲＲ（オール）" target="_blank" rel="noopener">ＯＡＲＲ（オール）</a></li>
<li><a href="https://google.co.jp/search?q=ＳＭＡＲＴ（スマート）" target="_blank" rel="noopener">ＳＭＡＲＴ（スマート）</a></li>
<li><a href="https://google.co.jp/search?q=重要度／緊急度マトリクス" target="_blank" rel="noopener">重要度／緊急度マトリクス</a></li>
<li><a href="https://google.co.jp/search?q=ＫＰＴ（ケプト）" target="_blank" rel="noopener">ＫＰＴ（ケプト）</a></li>
<li><a href="https://google.co.jp/search?q=ＰＲＥＰ（プレップ）" target="_blank" rel="noopener">ＰＲＥＰ（プレップ）</a></li>
<li><a href="https://google.co.jp/search?q=ＦＡＢＥ（ファブ）" target="_blank" rel="noopener">ＦＡＢＥ（ファブ）</a></li>
<li><a href="https://google.co.jp/search?q=ＰＲＡＭ（ピーラム）" target="_blank" rel="noopener">ＰＲＡＭ（ピーラム）</a><br />
<h3 id="-">第Ⅴ章　組織開発のフレームワーク</h3>
</li>
<li><a href="https://google.co.jp/search?q=ＭＶＶ（ミッション／ビジョン／バリュー）" target="_blank" rel="noopener">ＭＶＶ（ミッション／ビジョン／バリュー）</a></li>
<li><a href="https://google.co.jp/search?q=能力の３要素" target="_blank" rel="noopener">能力の３要素</a></li>
<li><a href="https://google.co.jp/search?q=Ｗｉｌｌ／Ｓｋｉｌｌマトリクス" target="_blank" rel="noopener">Ｗｉｌｌ／Ｓｋｉｌｌマトリクス</a></li>
<li><a href="https://google.co.jp/search?q=欲求階層説" target="_blank" rel="noopener">欲求階層説</a></li>
<li><a href="https://google.co.jp/search?q=ジョハリの窓" target="_blank" rel="noopener">ジョハリの窓</a></li>
<li><a href="https://google.co.jp/search?q=ハーマンモデル" target="_blank" rel="noopener">ハーマンモデル</a></li>
<li><a href="https://google.co.jp/search?q=ＧＲＯＷモデル" target="_blank" rel="noopener">ＧＲＯＷモデル</a></li>
<li><a href="https://google.co.jp/search?q=経験学習モデル" target="_blank" rel="noopener">経験学習モデル</a></li>
<li><a href="https://google.co.jp/search?q=ウォント／コミットメント" target="_blank" rel="noopener">ウォント／コミットメント</a></li>
<li><a href="https://google.co.jp/search?q=キャリアアンカー" target="_blank" rel="noopener">キャリアアンカー</a></li>
<li><a href="https://google.co.jp/search?q=ＡＢＣ理論" target="_blank" rel="noopener">ＡＢＣ理論</a></li>
<li><a href="https://google.co.jp/search?q=ＰＭ理論" target="_blank" rel="noopener">ＰＭ理論</a></li>
<li><a href="https://google.co.jp/search?q=タックマンモデル" target="_blank" rel="noopener">タックマンモデル</a></li>
<li><a href="https://google.co.jp/search?q=フォースフィールド分析" target="_blank" rel="noopener">フォースフィールド分析</a></li>
<li><a href="https://google.co.jp/search?q=システムシンキング" target="_blank" rel="noopener">システムシンキング</a></li>
<li><a href="https://google.co.jp/search?q=レヴィンの変革モデル" target="_blank" rel="noopener">レヴィンの変革モデル</a></li>
</ol>
<h3>まとめ</h3>
<p>使い方としては、手元に置いておいて、判断に迷った時や思考の軸として、さっと読み返すといいと思います。 但し、冒頭でも述べたように、それぞれの項目で本一冊かけて説明出来る内容を端的にまとめられているので 罠に陥らないように気をつけて欲しいのが、このフレームワークが全てに当てはまる訳ではないということです。</p>
<p>例えば、QCDを例に取ると、</p>
<ul>
<li>Quality 品質</li>
<li>Cost 費用</li>
<li>Delivery 工数</li>
</ul>
<p>はトレードオフの関係にある。 つまり、それぞれが相互に作用していて、品質を上げようとすれば、費用と納期が増える。 納期を縮めれば、当然コストも下がるが品質も下がるというようないわゆるトリレンマの関係を表したものです。</p>
<p>これは、製造業などで品質が一定レベルに推移するものであれば当てはめることが出来ると思います。 図にするとこうなります。</p>
<p><a href="/uploads-archive/2015/04/chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7230" src="/uploads-archive/2015/04/chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p-300x201.jpg" alt="chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p" width="300" height="201" srcset="/uploads-archive/2015/04/chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p-300x201.jpg 300w, /uploads-archive/2015/04/chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p-228x153.jpg 228w, /uploads-archive/2015/04/chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p.jpg 498w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ただし、我々が取り組んでいる制作・開発事業においては、実はこのグラフではなく、こうなります。</p>
<p><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7231" src="/uploads-archive/2015/04/chartcreator_finite-field_com___7B_22containerId_22__22visualization_22__22dataTable_22__7B_22cols_22__5B_7B_22id_22__22_22__22label_22__22_22__22pattern_22__22_22__22type_22__22string_22_7D__7B_22id_22__22_22__22label_22__22_5Cu54c1_5Cu8ce-300x193.png" alt="chartcreator_finite-field_com___7B_22containerId_22__22visualization_22__22dataTable_22__7B_22cols_22__5B_7B_22id_22__22_22__22label_22__22_22__22pattern_22__22_22__22type_22__22string_22_7D__7B_22id_22__22_22__22label_22__22_5Cu54c1_5Cu8ce" width="300" height="193" srcset="/uploads-archive/2015/04/chartcreator_finite-field_com___7B_22containerId_22__22visualization_22__22dataTable_22__7B_22cols_22__5B_7B_22id_22__22_22__22label_22__22_22__22pattern_22__22_22__22type_22__22string_22_7D__7B_22id_22__22_22__22label_22__22_5Cu54c1_5Cu8ce-300x193.png 300w, /uploads-archive/2015/04/chartcreator_finite-field_com___7B_22containerId_22__22visualization_22__22dataTable_22__7B_22cols_22__5B_7B_22id_22__22_22__22label_22__22_22__22pattern_22__22_22__22type_22__22string_22_7D__7B_22id_22__22_22__22label_22__22_5Cu54c1_5Cu8ce-228x146.png 228w, /uploads-archive/2015/04/chartcreator_finite-field_com___7B_22containerId_22__22visualization_22__22dataTable_22__7B_22cols_22__5B_7B_22id_22__22_22__22label_22__22_22__22pattern_22__22_22__22type_22__22string_22_7D__7B_22id_22__22_22__22label_22__22_5Cu54c1_5Cu8ce.png 508w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>かかった工数に対し、品質は正比例せず、limit値に向けて収束するグラフになります。</p>
<p>更には、この品質のlimit値というのは、携わる人間に依存がします。</p>
<p>営業側の判断としては、品質と工数のバランスが最適化する値を見極め、</p>
<p>制作側はこのlimit値の上限を上げるということと、limit値に収束させるまでのリードタイムを短くする</p>
<p>という QCDのフレームワークとは別の軸が存在するということを理解しないといけません。</p>
<p>このように、フレームワークを捉えつつも、自分自身の市場、領域、状況に落とし込み、発展させていく必要があります。</p>


ビジネス・フレームワーク (日経文庫ビジュアル)

PHPを使わずにmetaタグやogタグを取得する方法

<p>昨今のwebサイトデザインにはアイコンが欠かせないと言っていいかと思います。<br />
テキストより絵で視覚的に訴える方が強いです。</p>
<p>しかし、アイコンを制作していたら時間がかかってしまいます。<br />
ましてやそんなアイコンを作る絵心・センスがない・・・<br />
お客さんには費用がかかってしまう・・・</p>
<p>そんな時には、フリーで使えるアイコンを使用するのが良いかと思います。<br />
僕はアイコンつくれないので、必死に探して、適切なものを使用しています。</p>
<p>早速紹介したいと思います。</p>
<h2>FLAT ICON DESIGN</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7208" src="/uploads-archive/2015/03/20150331-1024x616.jpg" alt="20150331" width="640" height="385" srcset="/uploads-archive/2015/03/20150331-1024x616.jpg 1024w, /uploads-archive/2015/03/20150331-300x181.jpg 300w, /uploads-archive/2015/03/20150331-228x137.jpg 228w, /uploads-archive/2015/03/20150331.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>流行り(?)のフラットデザインのアイコンが豊富にあります！<br />
しっかりしたアイコンなのに無料！<br />
ai,eps,jpg,png,svgの形式でダウンロードできます。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://flat-icon-design.com/" target="_blank">FLAT ICON DESIGN -フラットアイコンデザイン-</a></p>
<h2>Endless Icons</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7209" src="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg" alt="Endless Icons  Free Icon Library" width="640" height="385" srcset="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg 1024w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-300x181.jpg 300w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-228x137.jpg 228w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>シルエット的なシンプルなアイコンが揃っています。<br />
Tag付されており、探しやすいです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.endlessicons.com/" target="_blank">Endless Icons | Free Icon Library</a></p>
<h2>アイコン配布中！</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7210" src="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg" alt="リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～" width="640" height="385" srcset="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg 1024w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-300x181.jpg 300w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-228x137.jpg 228w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>今はもうあんまりなくなってしまったかもしれない・・・リアルなアイコン、<br />
そしてシルエットアイコンをダウンロードできます。<br />
リクエストも受付しているようです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://icon.touch-slide.jp/real/" target="_blank">リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～</a></p>
<p>&nbsp;</p>
<p>一昔前ならこのクオリティのアイコン達は無料なんかでゲット出来なかったのですが、<br />
いい時代になりました・・・（みんな同じアイコンばっかり使って画一的になりそう気もしますが・・・）</p>
<p>本当は自分でサッと作れたらいいなぁ。。。</p>


フラットアイコンやシンプルなアイコンを無料でダウンロードできるサイト

<p>2014年の秋に正式にW3Cから勧告されたHTML5では、</p>
<p>それまで一部のブラウザ用に作られたタグで、</p>
<p>正式なタグとして採用されたものがいくつかあります。</p>
<p>その中でも、利用すると便利だと思われる&lt;ruby&gt;というタグがあります。</p>
<p>このタグは感じなどに読み仮名などをルビとして表示させるためのものです。</p>
<p>&nbsp;</p>
<p>↓<ruby>表示例<rp>(</rp><rt>ひょうじれい</rt><rp>)</rp></ruby></p>
<p><a class="demo" href="/demo/ninomiya/70/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<p>基本的には、以下のように記述して使います。</p>

		<div id="crayon-64954015859e2846033237" 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;ruby&gt;文字A&lt;rt&gt;るびa&lt;/rt&gt;文字B&lt;rt&gt;るびb&lt;/rt&gt;&lt;/ruby&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-64954015859e2846033237-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-64954015859e2846033237-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>まず、&lt;ruby&gt;でルビを付ける対象の文字全体を囲みます。</p>
<p>次に、ルビを付けたい文字のあとに、&lt;rt&gt;タグでルビの文字を記述すれば完了です。</p>
<p>&nbsp;</p>
<p>ただ、Firefoxでは、現時点(Firefox36)ではrubyの表示に対応しておらず(プラグインが必要; <a href="http://rockridge.hatenablog.com/entry/2015/02/22/003049" target="_blank">38より正式に対応予定</a> →追記(2015/05/22)：無事38から正式に対応されたようです<a href="https://hacks.mozilla.org/2015/05/trainspotting-firefox-38/" target="_blank">&lt;参考&gt;</a>)、</p>
<p>そういったruby非対応のブラウザに配慮したい場合は、以下のように記述します。</p>

		<div id="crayon-64954015859e6117137372" 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;ruby&gt;文字A&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびa&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;文字B&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびb&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&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-64954015859e6117137372-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-64954015859e6117137372-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ここではルビの文字を括弧で<ruby>括<rp>(</rp><rt>くく</rt><rp>)</rp></ruby>るようにします。</p>
<p>&lt;rp&gt;で囲った文字は、</p>
<p>&lt;ruby&gt;に対応したブラウザでは表示されず、非対応のブラウザのみで表示されるため、</p>
<p>非対応のブラウザではカッコ書きでルビの文字が表示されるようになります。</p>
<p>&nbsp;</p>
<p>ルビがたくさんあって記述が面倒な場合は、以下のように&lt;rt&gt;や&lt;rp&gt;の閉じタグを省略することも可能です。</p>

		<div id="crayon-64954015859e7760458886" 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;ruby&gt;文字A&lt;rp&gt;(&lt;rt&gt;るびa&lt;rp&gt;)&lt;/rp&gt;文字B&lt;rp&gt;(&lt;rt&gt;るびb&lt;rp&gt;)&lt;/ruby&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-64954015859e7760458886-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-64954015859e7760458886-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>以下のように、ルビを付けたい文字を&lt;rb&gt;で囲む方法もあります。</p>

		<div id="crayon-64954015859e8657677934" 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;ruby&gt;&lt;rb&gt;文字A&lt;/rb&gt;&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびa&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;rb&gt;文字B&lt;/rb&gt;&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびb&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&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-64954015859e8657677934-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-64954015859e8657677934-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rb</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rb</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rb</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rb</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&lt;rb&gt;はHTML5が正式に勧告される前に廃止されそうになったのですが、</p>
<p>より複雑なルビの表記に対応させるために、採用されることになりました。</p>
<p>また、さらに&lt;ruby&gt;タグ内全体のルビを下付けで表示させる&lt;rtc&gt;というタグも採用されていますが、</p>
<p>ブラウザで表示に対応しているものが<ruby>殆<rp>(</rp><rt>ほとん</rt><rp>)</rp></ruby>どないようですので、省略いたします。</p>
<p>&nbsp;</p>
<p>使ってみると意外と簡単に使えますので、</p>
<p>ぜひお試しください。</p>
<p>&nbsp;</p>
<h3>参考サイト</h3>
<p><a href="http://www.htmq.com/html5/ruby.shtml" target="_blank">&amp;lt;ruby&amp;gt;－HTML5タグリファレンス</a></p>
<p><a href="http://www.w3.org/TR/html5/" target="_blank">HTML5</a></p>
<p><a href="http://www.html5.jp/tag/elements/ruby.html" target="_blank">ruby 要素 &#8211; テキストレベルの意味づけ &#8211; HTML要素 &#8211; HTML5 タグリファレンス &#8211; HTML5.JP</a></p>
<p><a href="http://rockridge.hatenablog.com/entry/2015/02/22/003049" target="_blank">Firefox 38でルビ機能が有効化へ &#8211; Mozilla Flux</a></p>

HTML5で正式な要素になった&lt;ruby&gt;の基本的な使い方

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>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - 2015年

2015/04/15

2015/04/15

2015/04/14

2015/04/09

2015/04/08

2015/04/08

2015/04/07

2015/04/07

2015/04/01

2015/04/01

2015/04/01

2015/04/01

2015/03/31

2015/03/26

2015/03/25

2015/03/25

2015/03/25

2015/03/21