<p>最近はJavaScriptを使ったWEBページ上のアプリがどんどんリッチになってきており、<br />
それに合わせてプログラムの規模も大きくなることが増えてきています。<br />
プログラムの規模が大きくなってくると、<br />
いかにメモリを浪費しない、効率的なプログラムを記述するかということが重要になってきます。<br />
そこで重要になってくるのが、オブジェクト指向のプログラミング方法です。</p>
<p>オブジェクト指向とは、繰り返し利用するプログラムを部品として定義しておき、<br />
それを組み合わせてプログラムを組んでいく方法です。</p>
<p>&nbsp;</p>
<p>C++、C#、JAVA、PHPといった言語でオブジェクト指向のプログラムを行う場合は、<br />
クラスというものを使います。</p>

		<div id="crayon-64954015901a0853941209" 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">PHPの場合</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">PHP</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;">
//クラスを定義
class exampleClass() {
    public $var = 100; //プロパティの宣言

    // メソッドの宣言
    public function displayVar() {
        echo $this-&gt;var;
    }
}

$obj = new exampleClass();
$obj-&gt;displayVar();</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-64954015901a0853941209-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-2">2</div><div class="crayon-num" data-line="crayon-64954015901a0853941209-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-4">4</div><div class="crayon-num" data-line="crayon-64954015901a0853941209-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-6">6</div><div class="crayon-num" data-line="crayon-64954015901a0853941209-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-8">8</div><div class="crayon-num" data-line="crayon-64954015901a0853941209-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-10">10</div><div class="crayon-num" data-line="crayon-64954015901a0853941209-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-12">12</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-64954015901a0853941209-1"><span class="crayon-c">//クラスを定義</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a0853941209-2"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">exampleClass</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-64954015901a0853941209-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-v">$var</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//プロパティの宣言</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a0853941209-4">&nbsp;</div><div class="crayon-line" id="crayon-64954015901a0853941209-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// メソッドの宣言</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a0853941209-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</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">displayVar</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-64954015901a0853941209-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-k ">echo</span><span class="crayon-h"> </span><span class="crayon-v">$this</span>-<span class="crayon-h">&gt;</span><span class="crayon-t">var</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a0853941209-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64954015901a0853941209-9"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a0853941209-10">&nbsp;</div><div class="crayon-line" id="crayon-64954015901a0853941209-11"><span class="crayon-v">$obj</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">exampleClass</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-64954015901a0853941209-12"><span class="crayon-v">$obj</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">displayVar</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>JavaScriptでも、IE、Operaを除く最新のブラウザではクラスを利用することができますが、<br />
現在のところはprototypeという仕組みを使うのが通常です。</p>

		<div id="crayon-64954015901a4186286148" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">JavaScriptの場合</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><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 exampleObject() {
    this.var = 100; //プロパティの宣言
}

//メソッドを定義
exampleObject.prototype.alertVar = function() {
    alert(this.var);
} 

var obj = new exampleObject();
obj.alertVar();</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-64954015901a4186286148-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-2">2</div><div class="crayon-num" data-line="crayon-64954015901a4186286148-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-4">4</div><div class="crayon-num" data-line="crayon-64954015901a4186286148-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-6">6</div><div class="crayon-num" data-line="crayon-64954015901a4186286148-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-8">8</div><div class="crayon-num" data-line="crayon-64954015901a4186286148-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-10">10</div><div class="crayon-num" data-line="crayon-64954015901a4186286148-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-12">12</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-64954015901a4186286148-1"><span class="crayon-c">//コンストラクタを定義</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a4186286148-2"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">exampleObject</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-64954015901a4186286148-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-t">var</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//プロパティの宣言</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a4186286148-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64954015901a4186286148-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a4186286148-6"><span class="crayon-c">//メソッドを定義</span></div><div class="crayon-line" id="crayon-64954015901a4186286148-7"><span class="crayon-i">exampleObject</span><span class="crayon-sy">.</span><span class="crayon-i">prototype</span><span class="crayon-sy">.</span><span class="crayon-i">alertVar</span><span class="crayon-h"> </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-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a4186286148-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-t">var</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015901a4186286148-9"><span class="crayon-sy">}</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a4186286148-10">&nbsp;</div><div class="crayon-line" id="crayon-64954015901a4186286148-11"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">obj</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">exampleObject</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-64954015901a4186286148-12"><span class="crayon-i">obj</span><span class="crayon-sy">.</span><span class="crayon-e">alertVar</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>Canvasなどで同じ図形を同時に大量に描画するようなプログラムでは欠かせないプログラムの方法ですので、<br />
私も使いこなせるように実務でも積極的に使っていきたいです。</p>
<p>&nbsp;</p>
<h3>参考図書</h3>
<p><a class="link" href="http://www.amazon.co.jp/dp/479813905X" target="_blank">ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで</a></p>
<p>&nbsp;</p>
<h3> 参考サイト</h3>
<p><a class="link" href="http://php.net/manual/ja/language.oop5.basic.php" target="_blank">PHP: クラスの基礎 &#8211; Manual</a></p>
<p><a class="link" href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes" target="_blank">Classes &#8211; JavaScript | MDN</a></p>

JavaScriptでオブジェクト指向のプログラムを組む初歩の紹介

<h2>はじめに</h2>
<div style="padding-left: 15px;">
  PHP7が高速と言う話をしばらく前に聞いたので<br />
  実際、実効速度がどのくらいのものか既存のシステムを基に比較してみました。
</div>
<h2>別バージョンのPHPをインストール</h2>
<div style="padding-left: 15px;">
  phpenvと言うPHP複数バージョン管理ツールを使用します。</p>
<p>  phpenvをダウンロードし、実行パスを通す (bashの場合)</p>
<p></p>

		<div id="crayon-649540158ffbc491639751" 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">Shell</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;">
curl -L https://raw.github.com/CHH/phpenv/master/bin/phpenv-install.sh | bash
git clone git://github.com/CHH/php-build.git ~/.phpenv/plugins/php-build
echo 'export PATH="$HOME/.phpenv/bin:$PATH"' &gt;&gt; ~/.bashrc
echo 'eval "$(phpenv init -)"' &gt;&gt; ~/.bashrc
exec $SHELL -l</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-649540158ffbc491639751-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158ffbc491639751-2">2</div><div class="crayon-num" data-line="crayon-649540158ffbc491639751-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158ffbc491639751-4">4</div><div class="crayon-num" data-line="crayon-649540158ffbc491639751-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-649540158ffbc491639751-1"><span class="crayon-i">curl</span><span class="crayon-h"> </span>-<span class="crayon-i">L</span><span class="crayon-h"> </span><span class="crayon-i">https</span><span class="crayon-sy">:</span>//<span class="crayon-i">raw</span><span class="crayon-e">.github</span><span class="crayon-e">.com</span>/<span class="crayon-i">CHH</span>/<span class="crayon-i">phpenv</span>/<span class="crayon-i">master</span>/<span class="crayon-i">bin</span>/<span class="crayon-i">phpenv</span>-<span class="crayon-i">install</span><span class="crayon-e">.sh</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-r">bash</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158ffbc491639751-2"><span class="crayon-e">git </span><span class="crayon-r">clone</span><span class="crayon-h"> </span><span class="crayon-i">git</span><span class="crayon-sy">:</span>//<span class="crayon-i">github</span><span class="crayon-e">.com</span>/<span class="crayon-i">CHH</span>/<span class="crayon-i">php</span>-<span class="crayon-i">build</span><span class="crayon-e">.git</span><span class="crayon-h"> </span><span class="crayon-sy">~</span>/<span class="crayon-e">.phpenv</span>/<span class="crayon-i">plugins</span>/<span class="crayon-i">php</span>-<span class="crayon-e">build</span></div><div class="crayon-line" id="crayon-649540158ffbc491639751-3"><span class="crayon-r">echo</span><span class="crayon-h"> </span><span class="crayon-s">'export PATH="$HOME/.phpenv/bin:$PATH"'</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">~</span>/<span class="crayon-e">.bashrc</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158ffbc491639751-4"><span class="crayon-r">echo</span><span class="crayon-h"> </span><span class="crayon-s">'eval "$(phpenv init -)"'</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">~</span>/<span class="crayon-e">.bashrc</span></div><div class="crayon-line" id="crayon-649540158ffbc491639751-5"><span class="crayon-i">exec</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">SHELL</span><span class="crayon-h"> </span>-<span class="crayon-i">l</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>  指定のバージョンをインストールする (結構時間かかる)</p>
<p></p>

		<div id="crayon-649540158ffc0543617720" 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">Shell</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;">
phpenv install 7.0.1
phpenv install 5.3.3</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-649540158ffc0543617720-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158ffc0543617720-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-649540158ffc0543617720-1"><span class="crayon-e">phpenv </span><span class="crayon-i">install</span><span class="crayon-h"> </span><span class="crayon-cn">7.0.1</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158ffc0543617720-2"><span class="crayon-e">phpenv </span><span class="crayon-i">install</span><span class="crayon-h"> </span><span class="crayon-cn">5.3.3</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>  バージョンを切り替えてテストしてみる！</p></div>
<h2>いざ比較</h2>
<div style="padding-left: 15px;">
  結論から言えばSymfonyがphpenvの別バージョンを認識せず失敗。。。</p>
<p>  以下エビデンス<br />
<a href="/uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607.png" rel="attachment wp-att-9106"><img decoding="async" loading="lazy" src="/uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607-1024x36.png" alt="スクリーンショット 2016-01-05 17.51.21" width="1024" height="36" class="alignnone size-large wp-image-9106" srcset="/uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607-1024x36.png 1024w, /uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607-300x10.png 300w, /uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607-768x27.png 768w, /uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607-228x8.png 228w, /uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607.png 1059w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>  何故か7.0.1に切り替えても5.3.3のままです。<br />
  課題は残ったままとなりました。</p>
<p>  次回のための備忘録的なものとして残しておきます。</p></div>

高速！？ PHP7を試してみる！

<p>今年もこの季節がやってまいりました</p>
<p><a href="http://designmodo.com/web-design-trends-2016/" target="_blank">http://designmodo.com/web-design-trends-2016/</a></p>
<p>&nbsp;</p>
<p>自分の英語の勉強も兼ねて翻訳・要約してみた</p>
<p>&nbsp;</p>
<h2>縦スクロールとそのパターン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9069" src="/uploads-archive/2016/01/2016webtrend_1.jpg" alt="2016webtrend_1" width="900" height="496" srcset="/uploads-archive/2016/01/2016webtrend_1.jpg 900w, /uploads-archive/2016/01/2016webtrend_1-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_1-768x423.jpg 768w, /uploads-archive/2016/01/2016webtrend_1-228x126.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.beoplay.com/products/beoplayh7" target="_blank">http://www.beoplay.com/products/beoplayh7</a></p>
<p>モバイル端末からのアクセスが増えているので、今後ユーザーは縦スクロールの頻度が増え、 デザイナーは縦スクロールのユーザーインターフェイスをデザインすることの重要度が高まる</p>
<p>&nbsp;</p>
<h2>もっと、カード型デザイン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9065" src="/uploads-archive/2016/01/2016webtrend_2.jpg" alt="2016webtrend_2" width="900" height="494" srcset="/uploads-archive/2016/01/2016webtrend_2.jpg 900w, /uploads-archive/2016/01/2016webtrend_2-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_2-768x422.jpg 768w, /uploads-archive/2016/01/2016webtrend_2-228x125.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://block16omaha.com/" target="_blank">http://block16omaha.com/</a></p>
<p>マテリアルデザインから生まれたカード型デザインはアプリ、ウェブサイト、紙媒体などあらゆる場所で使われている。</p>
<p>カード型デザインはユーザーフレンドリーに情報整理ができ、作るのも楽しい。</p>
<p>更に、カード型デザインはデバイスを問わず動作するというメリットがある</p>
<p>&nbsp;</p>
<h2>ヒーロービデオヘッダー</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9066" src="/uploads-archive/2016/01/2016webtrend_3.jpg" alt="2016webtrend_3" width="900" height="490" srcset="/uploads-archive/2016/01/2016webtrend_3.jpg 900w, /uploads-archive/2016/01/2016webtrend_3-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_3-768x418.jpg 768w, /uploads-archive/2016/01/2016webtrend_3-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://follow-your-intuition.com/" target="_blank">http://follow-your-intuition.com/</a></p>
<p>ウェブデザインは映画制作のようになるだろう。</p>
<p>回線速度やモジュールの発展により映画のような体験をサイトに盛り込むことができるようになってきている。</p>
<p>ウェブ上の動画は、小さなものからフルカットへと進化し、高解像度で、くっきりとさくさく動作する。</p>
<p>これはユーザーに新しい体験だが、テレビでお馴染みの体験といえる</p>
<p>&nbsp;</p>
<h2>微細なアニメーション</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9067" src="/uploads-archive/2016/01/2016webtrend_4.jpg" alt="2016webtrend_4" width="900" height="487" srcset="/uploads-archive/2016/01/2016webtrend_4.jpg 900w, /uploads-archive/2016/01/2016webtrend_4-300x162.jpg 300w, /uploads-archive/2016/01/2016webtrend_4-768x416.jpg 768w, /uploads-archive/2016/01/2016webtrend_4-228x123.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://labs.convoy.me/camper/#!/landing" target="_blank">http://labs.convoy.me/camper/#!/landing</a></p>
<p>アニメーションは2015年からの最も大きなトレンドの1つだ。</p>
<p>ヒーローヘッダのようなサイトの顔から、見逃してしまうほど小さいものまで、<br />
アニメーションは至る所に存在している。</p>
<p>アニメーションを使う上で最も重要なことは、なぜこのアニメーションを作り、何を想定しているかといった<br />
目的を明らかにすることだ。</p>
<p>&nbsp;</p>
<h2>インタラクションデザイン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9068" src="/uploads-archive/2016/01/2016webtrend_5.jpg" alt="2016webtrend_5" width="900" height="473" srcset="/uploads-archive/2016/01/2016webtrend_5.jpg 900w, /uploads-archive/2016/01/2016webtrend_5-300x158.jpg 300w, /uploads-archive/2016/01/2016webtrend_5-768x404.jpg 768w, /uploads-archive/2016/01/2016webtrend_5-228x120.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.wove.com/" target="_blank">http://www.wove.com/</a></p>
<p>アニメーションと同時に活用されているのがインタラクションデザインだ。</p>
<p>インタラクションデザインはアプリやモバイルサイトにおいて、ユーザーとデバイスをつなぐ軸である。</p>
<p>良いインタラクションデザインはごくわずかな場合もあるが、ユーザーに価値を与えている。</p>
<p>メッセージ受信時のアラームから、ゲーム中にあなたの番が来た時の短い音など、<br />
ほんの小さなインタラクションデザインが人々とデバイスのやりとりを形作っている</p>
<p>&nbsp;</p>
<h2>更に美しいタイポグラフィ</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9059" src="/uploads-archive/2016/01/2016webtrend_6.jpg" alt="2016webtrend_6" width="900" height="488" srcset="/uploads-archive/2016/01/2016webtrend_6.jpg 900w, /uploads-archive/2016/01/2016webtrend_6-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_6-768x416.jpg 768w, /uploads-archive/2016/01/2016webtrend_6-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.viens-la.com/" target="_blank">http://www.viens-la.com/</a></p>
<p>合理化されたインターフェイスは美しいタイポグラフィへと導く。</p>
<p>大きくて太いタイポグラフィは他のトレンドとマッチすることから、今後も継続するだろう。</p>
<p>このシンプルな字体は他の要素との空間を広げ、高い可読性によりメッセージを伝えることができる。</p>
<p>単に読み易い書体のペアや、楽しくて珍しいものはぜひ挑戦したい小技だ</p>
<p>&nbsp;</p>
<h2>イラストとスケッチ</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9060" src="/uploads-archive/2016/01/2016webtrend_7.jpg" alt="2016webtrend_7" width="900" height="489" srcset="/uploads-archive/2016/01/2016webtrend_7.jpg 900w, /uploads-archive/2016/01/2016webtrend_7-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_7-768x417.jpg 768w, /uploads-archive/2016/01/2016webtrend_7-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://orangeyouglad.com/" target="_blank">http://orangeyouglad.com/</a></p>
<p>イラストやスケッチはサイトに気まぐれで楽しい要素を与える。</p>
<p>これらは全てのサイトに当てはまり、決して子供向けのサイトだけのものではない。</p>
<p>イラストは、アイコンやその他の要素などサイトの細かな部分から人気が高まってきている<br />
イラストはサイトにパーソナルな印象を持たせるという点が良い。</p>
<p>手書きのイラストやスケッチアイコンはユーザーに個性を感じさせ、ユーザーとの長いつながりに貢献するだろう</p>
<p>&nbsp;</p>
<h2>大胆で明るい色調 (80&#8217;sな雰囲気)</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9061" src="/uploads-archive/2016/01/2016webtrend_8.jpg" alt="2016webtrend_8" width="900" height="477" srcset="/uploads-archive/2016/01/2016webtrend_8.jpg 900w, /uploads-archive/2016/01/2016webtrend_8-300x159.jpg 300w, /uploads-archive/2016/01/2016webtrend_8-768x407.jpg 768w, /uploads-archive/2016/01/2016webtrend_8-228x121.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://circlesconference.com/" target="_blank">http://circlesconference.com/</a></p>
<p>大胆で明るい色調はフラットデザインとともに増加してきている。</p>
<p>Googleの&#8221;Material Design documentation&#8221;も協議が進んでおり、&#8221;Dribbble&#8221;を見ると色が散々としている。</p>
<p>これらはキーとなる指標であり、この色は年内にされに大きくなるだろう。</p>
<p>大胆な色使いにおいての幾つかの変化として、これらの色を使った文字がトレンドとなるだろう。</p>
<p>2015年はモノトーンが主流でしたが、80年代な大胆で明るい色使いが増えてくるだろう</p>
<p>&nbsp;</p>
<h2>ハンバーガーメニューと図解</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9062" src="/uploads-archive/2016/01/2016webtrend_9.jpg" alt="2016webtrend_9" width="900" height="425" srcset="/uploads-archive/2016/01/2016webtrend_9.jpg 900w, /uploads-archive/2016/01/2016webtrend_9-300x142.jpg 300w, /uploads-archive/2016/01/2016webtrend_9-768x363.jpg 768w, /uploads-archive/2016/01/2016webtrend_9-228x108.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.primeit.pt/en/" target="_blank">http://www.primeit.pt/en/</a></p>
<p>多くのデザイナーが楽しいアイコンや、簡単にアイコンを作れるキットをリリースしている。</p>
<p>その他に重要な点として、SVGの普及により巨大なアイコンを実験的に使用するデザイナーが出現していることだ</p>
<p>&nbsp;</p>
<h2>リアルと空想の融合</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9062" src="/uploads-archive/2016/01/2016webtrend_9.jpg" alt="2016webtrend_9" width="900" height="425" srcset="/uploads-archive/2016/01/2016webtrend_9.jpg 900w, /uploads-archive/2016/01/2016webtrend_9-300x142.jpg 300w, /uploads-archive/2016/01/2016webtrend_9-768x363.jpg 768w, /uploads-archive/2016/01/2016webtrend_9-228x108.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://bluestag.co.uk/" target="_blank">http://bluestag.co.uk/</a></p>
<p>次のゲーミフィケーションとデザインのステップは、リアルと空想(ウェブデザインにより作られたもの)の境界をぼかすことだ。</p>
<p>バーチャルリアリティからウェブサイトまで、これらはあなたに新しい要素を見つける選択肢を与え、ユーザーはこのタイプのカスタマイズを好む傾向にある</p>
<p>&nbsp;</p>
<h2>スライダー</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9064" src="/uploads-archive/2016/01/2016webtrend_11.jpg" alt="2016webtrend_11" width="900" height="494" srcset="/uploads-archive/2016/01/2016webtrend_11.jpg 900w, /uploads-archive/2016/01/2016webtrend_11-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_11-768x422.jpg 768w, /uploads-archive/2016/01/2016webtrend_11-228x125.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://yearinreview.fb.com/2015/us-presidential-election/" target="_blank">http://yearinreview.fb.com/2015/us-presidential-election/</a></p>
<p>まずはじめに、スライダーはウェブサイトの枠の中で画像を動かし複数見せることができた。</p>
<p>次の変化はフルスクリーンスライドだ。</p>
<p>それぞれのスライドは切替によって新たな内容を表示できる。クリック、スクロールや時間による処理もできる。<br />
ユーザーは前後のコンテンツに直感的に移動することができる。</p>
<p>このようなコンセプトは、数ヶ月のうちにさらに多く見かけることになるだろう</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ちなみに、以下は自分が昨年6月に2015年上半期のトレンドをまとめた記事</p>
<blockquote data-secret="znXQr4BvIU" class="wp-embedded-content"><p><a href="/officer/%e3%80%90web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%912015%e5%b9%b4-%e4%b8%8a%e5%8d%8a%e6%9c%9f%e3%81%ae%e3%83%88%e3%83%ac%e3%83%b3%e3%83%89.html">【Webデザイン】2015年 上半期のトレンド</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;" src="/officer/%e3%80%90web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%912015%e5%b9%b4-%e4%b8%8a%e5%8d%8a%e6%9c%9f%e3%81%ae%e3%83%88%e3%83%ac%e3%83%b3%e3%83%89.html/embed#?secret=znXQr4BvIU" data-secret="znXQr4BvIU" width="500" height="282" title="埋め込まれた WordPress の投稿" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>&nbsp;</p>
<p>そんなに変わってない気がするのは自分だけだろうか。</p>
<p>モバイルファーストや動画は当たり前、あとはマテリアルデザインとSVGが着々と広まってきているといった印象だ</p>


【Webデザイント】2016年に流行しそうなレンド11選

YeomanでMEAN環境を整える

<p>最近、displayのtable,table-cellを使用する機会が増えてきていますが、使用していてあるバグに当たりました。</p>
<p>それはタイトルの通りなんですが、<br />
display:table-cellのimgのmax-widthの指定が<br />
<strong>chrome</strong>は大丈夫なんですが、<strong>ie</strong>と<strong>firefox</strong>では無視されていました。。。</p>
<p>例えば以下のようなソースになります。</p>
<p></p>

		<div id="crayon-649540158faf8547440697" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">html</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="photo"&gt;
	&lt;figure&gt;
		&lt;img src="images/sample.jpg" alt=""&gt;
	&lt;/figure&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-649540158faf8547440697-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faf8547440697-2">2</div><div class="crayon-num" data-line="crayon-649540158faf8547440697-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faf8547440697-4">4</div><div class="crayon-num" data-line="crayon-649540158faf8547440697-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-649540158faf8547440697-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"photo"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faf8547440697-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;figure&gt;</span></div><div class="crayon-line" id="crayon-649540158faf8547440697-3"><span class="crayon-i ">		</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">""</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faf8547440697-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;/figure&gt;</span></div><div class="crayon-line" id="crayon-649540158faf8547440697-5"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p></p>

		<div id="crayon-649540158fafd754589208" 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">css</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;">
.photo {
	display: table;
	width: 200px;
}
.photo figure {
	display: table-cell;
}
.photo figure img {
	max-width: 100%;
	height: auto;
}</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-649540158fafd754589208-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158fafd754589208-2">2</div><div class="crayon-num" data-line="crayon-649540158fafd754589208-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158fafd754589208-4">4</div><div class="crayon-num" data-line="crayon-649540158fafd754589208-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158fafd754589208-6">6</div><div class="crayon-num" data-line="crayon-649540158fafd754589208-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158fafd754589208-8">8</div><div class="crayon-num" data-line="crayon-649540158fafd754589208-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158fafd754589208-10">10</div><div class="crayon-num" data-line="crayon-649540158fafd754589208-11">11</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-649540158fafd754589208-1"><span class="crayon-k ">.photo </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158fafd754589208-2"><span class="crayon-h">	</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">table</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158fafd754589208-3"><span class="crayon-h">	</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158fafd754589208-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540158fafd754589208-5"><span class="crayon-k ">.photo figure </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158fafd754589208-6"><span class="crayon-h">	</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">table-cell</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158fafd754589208-7"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158fafd754589208-8"><span class="crayon-k ">.photo figure img </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540158fafd754589208-9"><span class="crayon-h">	</span><span class="crayon-e ">max-width</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-649540158fafd754589208-10"><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></div><div class="crayon-line" id="crayon-649540158fafd754589208-11"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>これだとmax-widthが無視されてしまうので、cssをひとつ調整すればOKです！</p>
<p></p>

		<div id="crayon-649540158faff542700970" 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">css</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;">
.photo {
  display: table;
  width: 200px;
  table-layout: fixed;
}
.photo figure {
  display: table-cell;
}
.photo figure img {
  max-width: 100%;
  height: auto;
}</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-649540158faff542700970-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faff542700970-2">2</div><div class="crayon-num" data-line="crayon-649540158faff542700970-3">3</div><div class="crayon-num crayon-marked-num crayon-top crayon-bottom crayon-striped-num" data-line="crayon-649540158faff542700970-4">4</div><div class="crayon-num" data-line="crayon-649540158faff542700970-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faff542700970-6">6</div><div class="crayon-num" data-line="crayon-649540158faff542700970-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faff542700970-8">8</div><div class="crayon-num" data-line="crayon-649540158faff542700970-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faff542700970-10">10</div><div class="crayon-num" data-line="crayon-649540158faff542700970-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faff542700970-12">12</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-649540158faff542700970-1"><span class="crayon-k ">.photo </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faff542700970-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">table</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158faff542700970-3"><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 ">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-bottom crayon-striped-line" id="crayon-649540158faff542700970-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">table-layout</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">fixed</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158faff542700970-5"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faff542700970-6"><span class="crayon-k ">.photo figure </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540158faff542700970-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">table-cell</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faff542700970-8"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540158faff542700970-9"><span class="crayon-k ">.photo figure img </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faff542700970-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">max-width</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" id="crayon-649540158faff542700970-11"><span class="crayon-h">&nbsp;&nbsp;</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></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faff542700970-12"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>display:tableを指定している要素に、<br />
table-layout: fixed;<br />
を追加してあげるだけでOKです！</p>
<p>これでie,firefoxでもmax-widthが効くようになります。</p>
<p>便利なdisplay:tableですが、tableにすることによって効かないcssも出て来ちゃうので、<br />
気をつけないといけないですね〜</p>

display:table-cellの中でimgのmax-width指定が効かなかったバグ

<p>最近、<a href="https://www.pluralsight.com/">Pluralsight</a>を使用してみたので、ここが良かった！と感じる点をまとめてみました。</p>
<h2>1．技術的な知識だけでなく英語も身につく</h2>
<p><strong>ドメドメ</strong>な環境で育った育ってきた私にとって、英語というのは今後仕事をしていくうえでの課題です…。<br />
仕事に関係がある内容を英語で学習する身に付けるというのは一石二鳥ぐらいの感じがしています。</p>
<h2>2．体系的に学べる</h2>
<p>あの構文の書き方なんだっけというような簡単なことを調べるには、Pluralsightは不向きですが、ある分野を<strong>総合的に</strong>学習しようと思ったときには便利だと思います。一つのlessonで6時間ぐらいかかるものもあるものもあり、<strong>基礎から</strong>順を追って学習できるのではないかと感じました（因みに動画は5分区切りぐらいで細かく分けられています）。</p>
<h2>3．気になっていた分野に気軽に飛び込める</h2>
<p>Pluralsightでは現在<strong>3000ぐらいのコース</strong>が用意されているようです。アニメーションに興味あったけどこれまで機会を逃してきたという方も、動画再生ボタンを押すだけでアニメーターになれるきっかけが掴めるかもしれません。</p>
<h2>4．スマートフォンにも対応</h2>
<p>スマートフォンにも対応しています。Pluralsightのアプリも存在しています。移動時間中、SNS、ゲーム、ニュースを読む等やりきってやることがなくなった！そういうときに便利かもしれません。ちなみにスマートフォンでも倍速で視聴することができます。</p>
<h2>5．Chrome Castにも対応</h2>
<p>Chrome Castにも対応してます。マルチディスプレイできる環境はないけど、Chrome Cast使えるという方は便利だと思います。</p>
<p>今のところ、2週間のfree trialで利用しているのですが、フリートライアル後も使い続けようかちょっと悩んでいます。<br />
<strong>ちなみに、法人向けもあるみたいです。</strong></p>
<p>参考：<br />
・<a href="http://jp.techcrunch.com/2015/12/12/20151211enki-launches-snackable-mobile-learning-app-for-developers/">一日にわずか５分の‘授業’でソフトウェア開発技術を学ぶモバイル学習サービスEnki…既存デベロッパのスキルアップに最適かも</a><br />
　&#8211; 類似サービス<br />
・<a href="http://jp.techcrunch.com/2013/07/25/20130724developer-training-platform-pluralsight-acquires-peepcode-to-expand-into-open-source-content/">デベロッパ教育訓練企業もMicrosoft/Windows偏重から脱出して現代化未来化へ転身</a></p>


Pluralsightここが良かった5つの点

Sphinxで充実ドキュメントライフを！

CanvasにSVGファイルを読み込んで表示する

<p>前回に引き続きPhotoShopの機能を紹介します。</p>
<p>バッチ処理、、、いい響きですね。楽が出来て楽しいです。</p>
<p>難しく考える必要はありません。以下の手順を参考にしてみてください。</p>
<h2>アクションを作ってみる</h2>
<div style="padding-left: 15px;">
ざっくり行きます。<br />
ウィンドウに「アクション」を表示させておきます。</p>
<p>アクション表示の下部にフォルダのようなものがあるので押下。<br />
<a href="/uploads-archive/2015/12/7d3d6eb4ee703155109128d8dbbe7fd6.jpg" rel="attachment wp-att-8970"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/7d3d6eb4ee703155109128d8dbbe7fd6-300x231.jpg" alt="01_create_action_set のコピー" width="300" height="231" class="alignnone size-medium wp-image-8970" srcset="/uploads-archive/2015/12/7d3d6eb4ee703155109128d8dbbe7fd6-300x231.jpg 300w, /uploads-archive/2015/12/7d3d6eb4ee703155109128d8dbbe7fd6-228x176.jpg 228w, /uploads-archive/2015/12/7d3d6eb4ee703155109128d8dbbe7fd6.jpg 757w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>さらにアクションをフォルダの中に作ってみます。<br />
<a href="/uploads-archive/2015/12/e982681a6286a4a19cf98e851dacd734.jpg" rel="attachment wp-att-8972"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/e982681a6286a4a19cf98e851dacd734-300x244.jpg" alt="02_create_action のコピー" width="300" height="244" class="alignnone size-medium wp-image-8972" srcset="/uploads-archive/2015/12/e982681a6286a4a19cf98e851dacd734-300x244.jpg 300w, /uploads-archive/2015/12/e982681a6286a4a19cf98e851dacd734-228x185.jpg 228w, /uploads-archive/2015/12/e982681a6286a4a19cf98e851dacd734.jpg 734w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>アクションを作ったら自動的に「録画ボタンのような何か」が赤くなっています。<br />
この状態で録画？開始となります。<br />
<a href="/uploads-archive/2015/12/05d3004d9221e523d04cd87319b4d897.jpg" rel="attachment wp-att-8973"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/05d3004d9221e523d04cd87319b4d897-300x182.jpg" alt="03_action_start のコピー" width="300" height="182" class="alignnone size-medium wp-image-8973" srcset="/uploads-archive/2015/12/05d3004d9221e523d04cd87319b4d897-300x182.jpg 300w, /uploads-archive/2015/12/05d3004d9221e523d04cd87319b4d897-228x138.jpg 228w, /uploads-archive/2015/12/05d3004d9221e523d04cd87319b4d897.jpg 719w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>記録した内容は「背景と思われる白い部分を選択して、そこから画像を抽出して特定のフォルダに保存する！」です。<br />
<a href="/uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b.jpg" rel="attachment wp-att-8974"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b-300x230.jpg" alt="04_action_contents のコピー" width="300" height="230" class="alignnone size-medium wp-image-8974" srcset="/uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b-300x230.jpg 300w, /uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b-768x590.jpg 768w, /uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b-1024x786.jpg 1024w, /uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b-228x175.jpg 228w, /uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b.jpg 1180w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>あとはメニューの「ファイル」＞「自動処理」＞「バッチ」を選択し、<br />
一括処理したいフォルダを選択、あるいは開いてるファイルをプルダウンで選択してOKを押すだけです！
</p></div>


PhotoShopで自動処理を活用してみよう！

<p>先日、<a href="/blog/development/rails%E3%81%AE%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%82%92%E4%BD%9C%E3%82%8B%EF%BC%88%EF%BC%91%EF%BC%89.html">Railsの開発環境を作る（１）</a>という記事を書いたのですが、そのときはApacheを利用していない環境でした。前回の記事を書いてから、Apacheの設定を行なったので、その作成ログをまた記事にしました。</p>
<h2>passengerのインストール</h2>
<p></p>

		<div id="crayon-649540158f2df764737530" 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;">
gem install passenger
yum install libcurl-devel -y
passenger-install-apache2-module
passenger-install-apache2-module --snippet &gt; /etc/httpd/conf.d/passenger.conf </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-649540158f2df764737530-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158f2df764737530-2">2</div><div class="crayon-num" data-line="crayon-649540158f2df764737530-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158f2df764737530-4">4</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-649540158f2df764737530-1"><span class="crayon-e">gem </span><span class="crayon-e">install </span><span class="crayon-e">passenger</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158f2df764737530-2"><span class="crayon-e">yum </span><span class="crayon-e">install </span><span class="crayon-i">libcurl</span>-<span class="crayon-i">devel</span><span class="crayon-h"> </span>-<span class="crayon-i">y</span></div><div class="crayon-line" id="crayon-649540158f2df764737530-3"><span class="crayon-i">passenger</span>-<span class="crayon-i">install</span>-<span class="crayon-i">apache2</span>-<span class="crayon-e">module</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158f2df764737530-4"><span class="crayon-i">passenger</span>-<span class="crayon-i">install</span>-<span class="crayon-i">apache2</span>-<span class="crayon-i">module</span><span class="crayon-h"> </span>--<span class="crayon-i">snippet</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span>/<span class="crayon-i">etc</span>/<span class="crayon-i">httpd</span>/<span class="crayon-i">conf</span><span class="crayon-sy">.</span><span class="crayon-i">d</span>/<span class="crayon-i">passenger</span><span class="crayon-sy">.</span><span class="crayon-i">conf</span><span class="crayon-h"> </span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>passenger-install-apache2-moduleの部分が時間かかります。</p>
<h2>Apacheのhttpd.confの設定</h2>
<p>vim等で/var/httpd/conf/http.confの設定を行う。<br />
httpd.conf下部の</p>

		<div id="crayon-649540158f2e4323467031" 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;">
NameVirtualHost *:80</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-649540158f2e4323467031-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-649540158f2e4323467031-1"><span class="crayon-e ">NameVirtualHost *</span><span class="crayon-sy">:</span><span class="crayon-cn">80</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>が#でコメントアウトになっているので外す。<br />
次にhttpd.conf下部に</p>

		<div id="crayon-649540158f2e5999225673" 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;VirtualHost *:80&gt;
    ServerName xxx.yyy.zzz.ppp
    DocumentRoot /var/www/html/など
    RailsEnv development
    &lt;Directory "/var/www/html/など"&gt;
        Options -MultiViews
        AllowOverride All
    &lt;/Directory&gt;
&lt;/VirtualHost&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-649540158f2e5999225673-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158f2e5999225673-2">2</div><div class="crayon-num" data-line="crayon-649540158f2e5999225673-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158f2e5999225673-4">4</div><div class="crayon-num" data-line="crayon-649540158f2e5999225673-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158f2e5999225673-6">6</div><div class="crayon-num" data-line="crayon-649540158f2e5999225673-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158f2e5999225673-8">8</div><div class="crayon-num" data-line="crayon-649540158f2e5999225673-9">9</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-649540158f2e5999225673-1"><span class="crayon-h">&lt;</span><span class="crayon-e ">VirtualHost *</span><span class="crayon-sy">:</span><span class="crayon-cn">80</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158f2e5999225673-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">ServerName </span><span class="crayon-i">xxx</span><span class="crayon-sy">.</span><span class="crayon-i">yyy</span><span class="crayon-sy">.</span><span class="crayon-i">zzz</span><span class="crayon-sy">.</span><span class="crayon-e">ppp</span></div><div class="crayon-line" id="crayon-649540158f2e5999225673-3"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">DocumentRoot</span><span class="crayon-h"> </span>/<span class="crayon-t">var</span>/<span class="crayon-i">www</span>/<span class="crayon-i">html</span>/など</div><div class="crayon-line crayon-striped-line" id="crayon-649540158f2e5999225673-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">RailsEnv </span><span class="crayon-i">development</span></div><div class="crayon-line" id="crayon-649540158f2e5999225673-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">Directory</span><span class="crayon-h"> </span><span class="crayon-s">"/var/www/html/など"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158f2e5999225673-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">Options</span><span class="crayon-h"> </span>-<span class="crayon-e">MultiViews</span></div><div class="crayon-line" id="crayon-649540158f2e5999225673-7"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">AllowOverride </span><span class="crayon-i">All</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158f2e5999225673-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">Directory</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158f2e5999225673-9"><span class="crayon-h">&lt;</span>/<span class="crayon-i">VirtualHost</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を加える。プロジェクトのフォルダ/publicをDocumentRootにすることに注意。publicにしないとApacheのTest画面が表示される。<br />
Apacheの再起動。</p>

		<div id="crayon-649540158f2e6735872878" 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;">
service httpd restart</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-649540158f2e6735872878-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-649540158f2e6735872878-1"><span class="crayon-e">service </span><span class="crayon-e">httpd </span><span class="crayon-i">restart</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>以上で終わりです。どこかの記事でpassengerの設定が面倒と書いてあったのですが、意外とすんなりいけたように思います。自分の場合は、railsのインストールが一番手間取ったかもです。<br />
上記の構築は、サーバー上でもVagrantの環境でも同じです。</p>
<h3>参考</h3>
<p><a href ="http://news.netcraft.com/archives/category/web-server-survey/">Web Server Survey</a><br />
Webサーバーの市場シェア<br />
Apacheのシェアは現時点では４割弱らしいです。</p>

Railsの開発環境を作る（２）

cssのcalc()を使って、フッターを下部に配置する

CSS3のcolumn-countを知らなかったので使ってみた

何にでも使えるであろうナビゲーションバーをHTMLとCSSで作れるか試してみた

<p>通常gitで差分を表示するときは、下記のように縦に並べて差分が表示されるのですが、<br />
<a href="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-300x120.png" alt="スクリーンショット 2015-12-08 午後5.51.49" width="300" height="120" class="alignnone size-medium wp-image-8842" srcset="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-300x120.png 300w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-1024x408.png 1024w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-228x91.png 228w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
たまにGUIを使ったときのような差分の表示の仕方のように横に並べて表示したくなるときがあるので、vimdiffを使った表示の方法を記述します。</p>
<h2>設定</h2>
<p>gitには外部のツールでdiffを表示させるという設定ができるので、それを実行します。</p>

		<div id="crayon-649540158ea79633126610" 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;">
git config --global diff.tool vimdiff
git config --global difftool.prompt 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-649540158ea79633126610-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158ea79633126610-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-649540158ea79633126610-1"><span class="crayon-e">git </span><span class="crayon-i">config</span><span class="crayon-h"> </span>--<span class="crayon-m">global</span><span class="crayon-h"> </span><span class="crayon-i">diff</span><span class="crayon-sy">.</span><span class="crayon-e">tool </span><span class="crayon-e">vimdiff</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158ea79633126610-2"><span class="crayon-e">git </span><span class="crayon-i">config</span><span class="crayon-h"> </span>--<span class="crayon-m">global</span><span class="crayon-h"> </span><span class="crayon-i">difftool</span><span class="crayon-sy">.</span><span class="crayon-e">prompt </span><span class="crayon-t">false</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>使用方法</h2>
<p>通常git diffとしているところを、git difftoolと変更して使用します。<br />
git diff<br />
<a href="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-300x120.png" alt="スクリーンショット 2015-12-08 午後5.51.49" width="300" height="120" class="alignnone size-medium wp-image-8842" srcset="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-300x120.png 300w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-1024x408.png 1024w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-228x91.png 228w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
git difftool<br />
<a href="/uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452-300x165.png" alt="スクリーンショット 2015-12-08 午後5.52.36" width="300" height="165" class="alignnone size-medium wp-image-8843" srcset="/uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452-300x165.png 300w, /uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452-1024x565.png 1024w, /uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452-228x126.png 228w, /uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452.png 1915w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

medium_git-logo.jpg

small_git-logo.jpg

thumbnail_git-logo.jpg

git-logo.jpg

git diffをvimdiffで表示する

<p>和風なwebサイトの場合、縦書きのデザインをすると思います。<br />
以下のサイトなんかも縦書きレイアウトをデザインを取り入れています。<br />
グッと和風感がでますよね！！</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8838" src="/uploads-archive/2015/12/79fd808a494939fc6983e2199d1678181-851x1024.jpg" alt="" width="630" height="758" srcset="/uploads-archive/2015/12/79fd808a494939fc6983e2199d1678181-851x1024.jpg 851w, /uploads-archive/2015/12/79fd808a494939fc6983e2199d1678181-249x300.jpg 249w, /uploads-archive/2015/12/79fd808a494939fc6983e2199d1678181-228x274.jpg 228w, /uploads-archive/2015/12/79fd808a494939fc6983e2199d1678181.jpg 1151w" sizes="(max-width: 630px) 100vw, 630px" /><br />
<a class="link" href="http://www.miyama-sansou.com/" target="_blank">深山山荘オフィシャルサイト</a></p>
<p>縦書きの表現は、画像か１つずつ文字をspanかなんかで囲んでっていうのが定石だったのですが、CSS3で簡単に縦書きが出来るようになっています。<br />
(IEは独自の表現で出来るようです)</p>
<p>とりあえず、DEMOを作りましたので、そちらご覧ください。</p>
<p><a class="demo" href="/demo/abe/64/" target="_blank">DEMO</a></p>
<h2>解説</h2>
<p>基本的には本当に簡単です。</p>

		<div id="crayon-649540158e737118802378" 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;">
.test{
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode:vertical-rl;
}</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-649540158e737118802378-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158e737118802378-2">2</div><div class="crayon-num" data-line="crayon-649540158e737118802378-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158e737118802378-4">4</div><div class="crayon-num" data-line="crayon-649540158e737118802378-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-649540158e737118802378-1"><span class="crayon-k ">.test</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158e737118802378-2"><span class="crayon-h">	</span><span class="crayon-e ">writing-mode</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">vertical-rl</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158e737118802378-3"><span class="crayon-h">	</span><span class="crayon-e ">-ms-writing-mode</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">tb-rl</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158e737118802378-4"><span class="crayon-h">	</span><span class="crayon-e ">-webkit-writing-mode</span><span class="crayon-sy">:</span><span class="crayon-i ">vertical-rl</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158e737118802378-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>とするだけで縦書きになります。<br />
IEの場合は少し違うのでご注意を。<br />
上記の書き方だと、行は右から左へと流れます。</p>
<p>ちなみにIE9以上から対応しているようですが、<br />
僕の環境ではVirtualBoxのIE8でも確認出来たのですが、DeveloperToolなので信用しないほうがいいかもしれません。</p>
<h2>補足</h2>
<p>縦書きにした場合、真ん中に寄せるのは、<strong>text-align</strong>でも<strong>vertical-align</strong>でも無理っぽい感じでした。</p>
<p>marginをかけたい場合は画面上で見た通り、左側であれば<strong>margin-left</strong>、右側であれば<strong>margin-right</strong>、でOKでした。</p>

CSSだけで縦書きを表現する

<p>商品画像を作成する際にCG画像を作成する事がありました。</p>
<p>after effects CCに付属しているcinema4D liteでどこまでできるかやってみました。基本的にcinema4D liteは映像制作で用いるためのものなのですが、単純で尚且つ画質の高さを求められないのであればある程度使えるかなと、正規版を購入するとかなり高いので、liteでどこまで使えるのか試してみました。</p>
<p>結果を先に言ってしまうと、フォトリアルな画像の作成は難しいとう事が分かりました。そもそも、フォトリアルな画像作るために必須のGI（グローバルイルミネーション)が使えないという事でした。</p>
<p>cinema4Dのグレードから言えば、primeでさえもGIが最近のバージョンでやっと使えるようになったばかりという事で、無料のLiteでは、なかなかそこまでの機能を提供していないようです。</p>
<p>&nbsp;</p>
<p>liteではやはり無理という事で、broadcastのバージョンを使用して違いを見てます。</p>
<h3>GI（グローバルイルミネーション）なし</h3>
<p><a href="/uploads-archive/2015/12/11.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8814" src="/uploads-archive/2015/12/11.jpg" alt="1" width="640" height="431" srcset="/uploads-archive/2015/12/11.jpg 640w, /uploads-archive/2015/12/11-300x202.jpg 300w, /uploads-archive/2015/12/11-228x154.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<h3>GI（グローバルイルミネーション）あり</h3>
<p><a href="/uploads-archive/2015/12/31.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8818" src="/uploads-archive/2015/12/31.jpg" alt="3" width="640" height="434" srcset="/uploads-archive/2015/12/31.jpg 640w, /uploads-archive/2015/12/31-300x203.jpg 300w, /uploads-archive/2015/12/31-228x155.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>上下の画像を見比べてみるとオブジェクトの質感や影の感じから下の方がリアルに見えるのではないでしょうか。</p>
<p>実写との合成を見比べてみるとさらによくわかります。</p>
<h3>GI（グローバルイルミネーション）なし</h3>
<p><a href="/uploads-archive/2015/12/41.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8834" src="/uploads-archive/2015/12/41.jpg" alt="4" width="640" height="508" srcset="/uploads-archive/2015/12/41.jpg 640w, /uploads-archive/2015/12/41-300x238.jpg 300w, /uploads-archive/2015/12/41-228x181.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<h3>GI（グローバルイルミネーション）あり</h3>
<p><a href="/uploads-archive/2015/12/51.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8836" src="/uploads-archive/2015/12/51.jpg" alt="5" width="640" height="514" srcset="/uploads-archive/2015/12/51.jpg 640w, /uploads-archive/2015/12/51-300x241.jpg 300w, /uploads-archive/2015/12/51-228x183.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>GIは照明など光源から発生した光以外に、オブジェクト間の光の反射も計算するということなので、実写との合成では必須といっていいかもしれません。</p>
<p>ちなみ人間型のオブジェクトには光源が当たっていない状態です。</p>
<p><a href="/uploads-archive/2015/12/21.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8815" src="/uploads-archive/2015/12/21.jpg" alt="2" width="632" height="532" srcset="/uploads-archive/2015/12/21.jpg 632w, /uploads-archive/2015/12/21-300x253.jpg 300w, /uploads-archive/2015/12/21-228x192.jpg 228w" sizes="(max-width: 632px) 100vw, 632px" /></a></p>
<p>GIを使用する際にはレンダリング設定から特殊効果、グローバルイルミネーションを選択します。</p>
<p>細かい設定があり、適当にいじくりまわしてしまうとレンダリング時間が大幅に長くなったり、リアルさが欠如してしまったりするので、分からない場合はデフォルトで作業する事をオススメします。</p>
<p>&nbsp;</p>


GIでフォトリアルなCGを作る Cinema4Dliteでどこまでできるか

<p>画像加工の中でもWeb制作において<br />
使用頻度が高いであろうトリミングにフォーカスを当ててみました。</p>
<p>筆者自身はイラストレーターでもデザイナーでもないので<br />
あくまでデータの扱い方という側面で記載します。</p>
<h3>画像抽出におけるコツ</h3>
<div style="padding-left: 15px;">
  おおまかに分けると以下に集約されます。</p>
<ol>
<li>抽出したい画像の輪郭に対して内外の特徴を把握する</li>
<li>部分的に1が異なればパーツパーツに分けて捉える</li>
<li>内側と外側の特徴を差別化し、その差を作業レイヤーで強調する</li>
</ol>
<p>  文面では解りづらいと思うので<br />
  実例にて紹介していきます。
</p></div>
<h3>実例</h3>
<div style="padding-left: 15px;">
  今回はある程度トリミングのしやすい画像を選びました。<br />
  動物(モフモフ系)は毛の境が非常に高度なテクニックを要するので割愛です。</p>
<div id="attachment_8763" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/maneki5_pic1.jpg"><img aria-describedby="caption-attachment-8763" decoding="async" loading="lazy" src="/uploads-archive/2015/12/maneki5_pic1-300x200.jpg" alt="ターゲット元画像" width="300" height="200" class="size-medium wp-image-8763" srcset="/uploads-archive/2015/12/maneki5_pic1-300x200.jpg 300w, /uploads-archive/2015/12/maneki5_pic1.jpg 1024w, /uploads-archive/2015/12/maneki5_pic1-228x152.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8763" class="wp-caption-text">ターゲット元画像</p></div>
<p>  招き猫を抽出します。<br />
  背景はグレーのグラデーションがかかったホワイト系。ターゲットは金と黒。</p>
<p>  やることは「白はより白く、色味(金等)・黒はより濃くして差別化する」です。</p>
<p>  作業レイヤーを作って「自動選択」で大雑把に選択して選択範囲を2,3px縮小して反転。<br />
  その後、彩度をグッと上げると招き猫が怖い感じに強調されます。<br />
<div id="attachment_8773" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1.png"><img aria-describedby="caption-attachment-8773" decoding="async" loading="lazy" src="/uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-300x169.png" alt="色味を強調" width="300" height="169" class="size-medium wp-image-8773" srcset="/uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-300x169.png 300w, /uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-1024x576.png 1024w, /uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-228x128.png 228w, /uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8773" class="wp-caption-text">色味を強調</p></div></p>
<p>  ここでのポイントは「背景はほぼ無彩色」です。<br />
  なので、ある程度選択範囲の中に背景が入っていてもターゲット(だけ)の色が変わります。</p>
<p>  次に、色味のあるところを濃く(暗く)して背景と更に差を作りましょう。<br />
  選択範囲とレイヤーはそのままで、「特定色域の選択」にて「レッド」「マゼンタ」などのブラック要素を増やしましょう。<br />
  　※ 絶対値のラジオボタンをONにしておくのがコツです。</p>
<div id="attachment_8774" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41.png"><img aria-describedby="caption-attachment-8774" decoding="async" loading="lazy" src="/uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-300x169.png" alt="有彩色を濃くした" width="300" height="169" class="size-medium wp-image-8774" srcset="/uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-300x169.png 300w, /uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-1024x576.png 1024w, /uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-228x128.png 228w, /uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8774" class="wp-caption-text">有彩色を濃くした</p></div>
<p>  ズームアップしてみるとこんな感じまでなりました。<br />
<div id="attachment_8775" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71.png"><img aria-describedby="caption-attachment-8775" decoding="async" loading="lazy" src="/uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-300x169.png" alt="輪郭ズーム" width="300" height="169" class="size-medium wp-image-8775" srcset="/uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-300x169.png 300w, /uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-1024x576.png 1024w, /uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-228x128.png 228w, /uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8775" class="wp-caption-text">輪郭ズーム</p></div></p>
<p>  今度は逆に、背景のグレー寄りをホワイトよりにしましょう。<br />
  背景を自動選択でザックリ選択後、拡張2,3pxして「特定色域の選択」にて<br />
  ホワイト、グレーのブラック要素をマイナスします。さっきの逆です。<br />
<div id="attachment_8776" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921.png"><img aria-describedby="caption-attachment-8776" decoding="async" loading="lazy" src="/uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-300x169.png" alt="背景をよりホワイトに" width="300" height="169" class="size-medium wp-image-8776" srcset="/uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-300x169.png 300w, /uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-1024x576.png 1024w, /uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-228x128.png 228w, /uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8776" class="wp-caption-text">背景をよりホワイトに</p></div></p>
<p>  あとは最後の仕上げです。<br />
  輪郭部分を強調します。上述の方法を同じく範囲選択後、「アンシャープマスク」をかけます。<br />
  微調整は画像を見ながら、基本的に全ての設定値は「大きめ」で。<br />
<div id="attachment_8777" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1.png"><img aria-describedby="caption-attachment-8777" decoding="async" loading="lazy" src="/uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-300x169.png" alt="エッジ強調" width="300" height="169" class="size-medium wp-image-8777" srcset="/uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-300x169.png 300w, /uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-1024x576.png 1024w, /uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-228x128.png 228w, /uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8777" class="wp-caption-text">エッジ強調</p></div></p>
<p>  最後に背景を選択します。<br />
  適当に「自動選択」後、必要に応じてギザギザをごまかすために「輪郭を滑らかに」1-2px,<br />
  輪郭をぼかす 1-2px した後で「選択範囲を反転」し、作業用に作ったレイヤーは削除して切り抜くだけです！</p>
<div id="attachment_8778" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661.png"><img aria-describedby="caption-attachment-8778" decoding="async" loading="lazy" src="/uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-300x169.png" alt="切り抜かれた招き猫" width="300" height="169" class="size-medium wp-image-8778" srcset="/uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-300x169.png 300w, /uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-1024x576.png 1024w, /uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-228x128.png 228w, /uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8778" class="wp-caption-text">切り抜かれた招き猫</p></div>
<p>  <div id="attachment_8771" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/maneki5_pic1.png"><img aria-describedby="caption-attachment-8771" decoding="async" loading="lazy" src="/uploads-archive/2015/12/maneki5_pic1-300x200.png" alt="出来た画像" width="300" height="200" class="size-medium wp-image-8771" srcset="/uploads-archive/2015/12/maneki5_pic1-300x200.png 300w, /uploads-archive/2015/12/maneki5_pic1.png 1024w, /uploads-archive/2015/12/maneki5_pic1-228x152.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8771" class="wp-caption-text">出来た画像</p></div>
</div>
<h3>最後に</h3>
<div style="padding-left: 15px;">
  さまざまな画像があり、シーンに応じて使う技術は異なります。<br />
  似たような画像であれば「アクション」を使用することで<br />
  ボタン一つ＋微調整で済むでしょう。</p>
<p>  「クイックマスク」などを使わなくても出来てしまう<br />
  ちょっとした加工技術みっちょな紹介でした。
</p></div>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2016/01/06

2016/01/06

2016/01/06

2016/01/06

2016/01/06

2015/12/25

2015/12/25

2015/12/16

2015/12/16

2015/12/16

2015/12/16

2015/12/09

2015/12/09

2015/12/09

2015/12/09

2015/12/09

2015/12/08

2015/12/03