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

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

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

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

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


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

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

<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>以前、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を背景に使う

cakephp 2.5.8 初期設定

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


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

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


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

test

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

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


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

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


LETSELL: Buy and sell on Instagram

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


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

<p>2015年3月いっぱいでクロネコネール便が廃止になることから、クロネコヤマトでそれに代わる新サービスを4月1日から始めるとの発表があったようですが、通販事業者にとっては&#8221;使える&#8221;サービスなのかどうか少しまとめてみました。</p>
<p>新しいサービスは主に２つあって、「<a href="http://www.kuronekoyamato.co.jp/compact/index.html">宅配便コンパクト</a>」と「<a href="http://www.kuronekoyamato.co.jp/nekoposu/index.html">ネコポス</a>」です。どちらも”宅配便以下、メール便以上”というサイズ制限のサービスになるのでコスメ・小さ目のアパレル・雑貨・サプリなどの配送に向いた配送方法だと思います。</p>
<p><a href="/uploads-archive/2015/03/main.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6996" src="/uploads-archive/2015/03/main.jpg" alt="main" width="495" height="168" srcset="/uploads-archive/2015/03/main.jpg 950w, /uploads-archive/2015/03/main-300x102.jpg 300w, /uploads-archive/2015/03/main-228x78.jpg 228w" sizes="(max-width: 495px) 100vw, 495px" /></a></p>
<p><a href="/uploads-archive/2015/03/main-1.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6997" src="/uploads-archive/2015/03/main-1.jpg" alt="main (1)" width="493" height="174" srcset="/uploads-archive/2015/03/main-1.jpg 976w, /uploads-archive/2015/03/main-1-300x106.jpg 300w, /uploads-archive/2015/03/main-1-228x81.jpg 228w" sizes="(max-width: 493px) 100vw, 493px" /></a></p>
<p>日本郵便が宅配便とメール便の間をとったサービスを開始した事への対応策的な部分もあるのかなという感じがします。</p>
<p>クロネコの新サービスと日本郵便の同等のサービスを送料やサイズ制限で比べてみました。</p>
<h2>ネコポスVSゆうパケット</h2>
<table style="height: 92px;" width="138">
<tbody>
<tr>
<td>サービス名</td>
<td>ネコポス</td>
<td>ゆうパケット</td>
</tr>
<tr>
<td> 送料</td>
<td>250円 （100件の場合）</td>
<td> 150円～250円程度（月500件以上）</td>
</tr>
<tr>
<td>日数</td>
<td>発送から1日（一部の地域を除く）</td>
<td>発送から1～2日（北海道の一部3日、沖縄離島5日程度）</td>
</tr>
<tr>
<td> 厚さ</td>
<td> 2.5cmまで</td>
<td> 3.0cmまで</td>
</tr>
<tr>
<td>大きさ</td>
<td>31.2cm×22.8cm以内</td>
<td>3辺合計60cm以内長辺34cm以内</td>
</tr>
<tr>
<td>重さ</td>
<td>1kgまで</td>
<td>1kgまで</td>
</tr>
<tr>
<td>追跡</td>
<td>可能</td>
<td>可能</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>２つのサービスを比べると良く似ているのですが、厚さの制限が多少違います。</p>
<p>この0.5cmの差が意外に大きくて、私が担当する店舗では3cmまで送れるゆうパケットがかなり役立っています。</p>
<p>送料に関してはゆうパケットは厚さによっても金額がことなるのでゆうパケットの方が安い気もするのですが、発送個数によってネコポスは送料の交渉ができるようなので一概にどちらが安いかは見積もりを出さないとわかりません。</p>
<p>ちなみにゆうパケットも発送個数で送料の交渉は可能です。</p>
<h2>宅配便コンパクトVSポスパケット</h2>
<table style="height: 92px;" width="138">
<tbody>
<tr>
<td>サービス名</td>
<td>宅配便コンパクト</td>
<td>ポスパケット</td>
</tr>
<tr>
<td> 送料</td>
<td>地域によって354円～1188円（別途専用BOX代が65円）</p>
<p>※法人は値引き交渉できそう</td>
<td> 全国一律360円</td>
</tr>
<tr>
<td>日数</td>
<td>発送から1日（一部の地域を除く）</td>
<td>発送から1～2日</p>
<p>※速達と同様の扱い</td>
</tr>
<tr>
<td> 厚さ</td>
<td> 5.0cmまで</td>
<td> 3.5cmまで</td>
</tr>
<tr>
<td>大きさ</td>
<td>20cm×25cm（薄型は24.8cm×34.0cm）</td>
<td>34.0cm×24.0cm</td>
</tr>
<tr>
<td>重さ</td>
<td>調査中</td>
<td>1kgまで</td>
</tr>
<tr>
<td>追跡</td>
<td>可能</td>
<td>可能</td>
</tr>
</tbody>
</table>
<p>宅配便コンパクトは日本郵便のポスパケットに相当するかなと思うのですが、厚さが3.5cmを超えないのであれば値段的にパスパケットが良いようです。</p>
<p>宅配便コンパクトは専用BOXで発送する必要があるようなので別途箱代65円もかかってきます。</p>
<p>&nbsp;</p>


クロネコヤマトの新サービスはECの配送方法として使えるのか

<p>以前、あるコーディングの案件を受けている時に、ニュースの文で文末を&#8230;にしてほしいと言われ、それはコーディングですることじゃなくてシステムでやるのではないかと思ったのですが、いざ調べてみると、CSSで出来る方法がありました。</p>
<p>早速説明していきます。<br />
DEMOもありますのでご覧ください。</p>
<p><a href="/demo/abe/53/" target="_blank" class="demo">DEMO</a></p>
<h2>CSSのみで文末をカットし、&#8230;を代入する方法</h2>
<p>html</p>

		<div id="crayon-649540158425c304956696" 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">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
 &lt;div class="text"&gt;
  	&lt;p class="textCut"&gt;つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。&lt;/p&gt;
 &lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158425c304956696-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158425c304956696-2">2</div><div class="crayon-num" data-line="crayon-649540158425c304956696-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-649540158425c304956696-1"><span class="crayon-h"> </span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"text"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158425c304956696-2"><span class="crayon-i ">&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"textCut"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540158425c304956696-3"><span class="crayon-i "> </span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>css</p>
<p></p>

		<div id="crayon-6495401584260044683358" 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;">
.text {
  width: 400px;
}
.text .textCut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}</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-6495401584260044683358-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-2">2</div><div class="crayon-num" data-line="crayon-6495401584260044683358-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-4">4</div><div class="crayon-num" data-line="crayon-6495401584260044683358-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-6">6</div><div class="crayon-num" data-line="crayon-6495401584260044683358-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-8">8</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-6495401584260044683358-1"><span class="crayon-k ">.text </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-2"><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 ">400px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584260044683358-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-4"><span class="crayon-k ">.text .textCut </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401584260044683358-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">text-overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">ellipsis</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">white-space</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">nowrap</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584260044683358-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">hidden</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-8"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>すべて必須になります。<br />
text-overflowのellipsisという値で&#8230;を代入するようです。<br />
横幅の設定はその要素でも、親の要素でも大丈夫です。</p>
<p>そしてこれは横幅で指定し、それ以上のテキストを消すというものなので、<br />
複数行に対応しておらず、一行の場合のみとなります。</p>
<p>複数行、もしくは文字数を設定したい場合、jQueryを使用すれば可能です。</p>
<h2>jQueryでやる方法</h2>
<p>htmlは同じで、<br />
jQueryのソースは以下になります。</p>
<p></p>

		<div id="crayon-6495401584262968720239" 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;">
$(function(){
	var elm = $('.textCut2');//対象
	var cutNum = '55';//文字数
	var endTxt = '…';//何を代入するか

	elm.each(function(){
		var textLength = $(this).text().length;
		var textTrim;
		if(cutNum &lt; textLength) {
			textTrim = $(this).text().substr(0,(cutNum));
			$(this).html(textTrim + endTxt);
		}
	});	
});</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-6495401584262968720239-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-2">2</div><div class="crayon-num" data-line="crayon-6495401584262968720239-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-4">4</div><div class="crayon-num" data-line="crayon-6495401584262968720239-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-6">6</div><div class="crayon-num" data-line="crayon-6495401584262968720239-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-8">8</div><div class="crayon-num" data-line="crayon-6495401584262968720239-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-10">10</div><div class="crayon-num" data-line="crayon-6495401584262968720239-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-12">12</div><div class="crayon-num" data-line="crayon-6495401584262968720239-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-14">14</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-6495401584262968720239-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-2"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">elm</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.textCut2'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//対象</span></div><div class="crayon-line" id="crayon-6495401584262968720239-3"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-e ">cutNum</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'55'</span><span class="crayon-sy">;</span><span class="crayon-c">//文字数</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-4"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-e ">endTxt</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'…'</span><span class="crayon-sy">;</span><span class="crayon-c">//何を代入するか</span></div><div class="crayon-line" id="crayon-6495401584262968720239-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-6"><span class="crayon-h">	</span><span class="crayon-i">elm</span><span class="crayon-sy">.</span><span class="crayon-st">each</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401584262968720239-7"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">textLength</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">text</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">length</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-8"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">textTrim</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584262968720239-9"><span class="crayon-h">		</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">cutNum</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-i">textLength</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-10"><span class="crayon-h">			</span><span class="crayon-i">textTrim</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">text</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">substr</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-sy">(</span><span class="crayon-i">cutNum</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584262968720239-11"><span class="crayon-h">			</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-i">textTrim</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-i">endTxt</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-12"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-6495401584262968720239-13"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-14"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>もっと良い方法があるかもしれません。</p>
<p>text-overflowについては下記URLで説明されておりますので、<br />
よろしければご覧ください。</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow" target="_blank">text-overflow &#8211; CSS | MDN</a></p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: スターフィールド編集部

2015/04/09

2015/04/08

2015/04/08

2015/04/01

2015/04/01

2015/03/26

2015/03/25

2015/03/25

2015/03/18

2015/03/18

2015/03/18

2015/03/13

2015/03/11

2015/03/11

2015/03/11

2015/03/10

2015/03/04

2015/03/04