レスポンシブ＆フラットに合った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>

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

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

cakephp 2.5.8 初期設定

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


スマイルカーブ理論

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

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


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

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

2015/03/18

2015/03/18

2015/03/18

2015/03/18