<p>CINEMA4DのCモーションを使用すると簡単にキャラクタに歩行させる事ができるという内容を以前に書きましたが、今回もCモーションについてです。</p>
<h2>キャラクタに登山をさせる　Cモーション</h2>
<p>キャラクタを設定した後にCモーションを追加して、オブジェクトタブの歩行を「直進」にするとキャラクタが歩いてくれるというのは前回までと同じですが、</p>
<p>「直進」を選択すると「経路」というタブが表示されます。</p>
<p><a href="/uploads-archive/2016/03/3-1.jpg" rel="attachment wp-att-9872"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9872" src="/uploads-archive/2016/03/3-1.jpg" alt="3" width="640" height="332" srcset="/uploads-archive/2016/03/3-1.jpg 640w, /uploads-archive/2016/03/3-1-300x156.jpg 300w, /uploads-archive/2016/03/3-1-228x118.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>この経路タブの「サーフェス」に、キャラクタに上を歩かせたいオブジェクトをリンクしてあげると、この単純な作業だけで地形などの表面を歩いてくれます。</p>
<p><a href="/uploads-archive/2016/03/2-1.jpg" rel="attachment wp-att-9871"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9871" src="/uploads-archive/2016/03/2-1.jpg" alt="2" width="640" height="304" srcset="/uploads-archive/2016/03/2-1.jpg 640w, /uploads-archive/2016/03/2-1-300x143.jpg 300w, /uploads-archive/2016/03/2-1-228x108.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>地形オブジェクトをサーフェスにリンクさせたアニメーションがこちらになります。</p>
<div style="width: 720px;" class="wp-video">
<video class="wp-video-shortcode" id="video-9835-1" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/climb1.mp4?_=1" /><a href="/uploads-archive/2016/03/climb1.mp4">/uploads-archive/2016/03/climb1.mp4</a></video></div>
<p>キャラクタがオブジェクトに沈んでしまっている部分がある場合はオフセットを調節する事で回避できます。</p>
<p>ハブを整列にチェックを入れるとオブジェクトの角度に沿って進み、ターゲットを整列にチェックを入れると足が表面の形に合わせて着地してくれます。</p>
<h2>キャラクタをパスに沿って歩かせる　Cモーション</h2>
<p>オブジェクトタブの歩行から「パス」を選択して、パスにスプラインを指定すると、スプラインに沿って歩いてくれます。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2016/03/4-1.jpg" rel="attachment wp-att-9873"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9873" src="/uploads-archive/2016/03/4-1.jpg" alt="4" width="640" height="209" srcset="/uploads-archive/2016/03/4-1.jpg 640w, /uploads-archive/2016/03/4-1-300x98.jpg 300w, /uploads-archive/2016/03/4-1-228x74.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-9835-2" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/climb2.mp4?_=2" /><a href="/uploads-archive/2016/03/climb2.mp4">/uploads-archive/2016/03/climb2.mp4</a></video></div>
<p>&nbsp;</p>
<p>サーフェスとして指定できるのはオブジェクトであれば、調整は色々と必要になりますが、おそらく何でもOKなはずです。</p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-9835-3" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/climb3.mp4?_=3" /><a href="/uploads-archive/2016/03/climb3.mp4">/uploads-archive/2016/03/climb3.mp4</a></video></div>

CINEMA4D　Cmotion　オブジェクトの表面をキャラクタに歩かせる

<p>デザインをする上で、遠近法が助けになることは少なくありません。<br />
遠近法といえば、一点透視図法や二点透視図法で有名な幾何学遠近法が真っ先に思い浮かぶ方は多いと思いますが、<br />
遠近法は他にもいろいろ存在します。</p>
<p>いろいろな遠近法について、<a href="http://blog.livedoor.jp/kokinora/archives/1008065272.html" target="_blank">説明くださっているサイト</a>がありましたので、<br />
そちらを参考に、遠近法を試してみました。</p>
<p>&nbsp;</p>
<h2>重畳遠近法</h2>
<p><a href="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg" rel="attachment wp-att-9845"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9845" src="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg" alt="重畳遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg 656w, /uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773-300x220.jpg 300w, /uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>最もシンプルな遠近法です。<br />
２つ以上のものが重なっているとき、前よりも後ろの物のほうが遠くに見えるという遠近法です。</p>
<h2>上下遠近法</h2>
<p><a href="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg" rel="attachment wp-att-9847"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9847" src="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg" alt="上下遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg 656w, /uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2-300x220.jpg 300w, /uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>水平線に向かって、上にあるものほど遠くに見えるという遠近法です。</p>
<h2>大小遠近法</h2>
<p><a href="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg" rel="attachment wp-att-9849"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9849" src="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg" alt="大小遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg 656w, /uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993-300x220.jpg 300w, /uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>大きなものほど近く、小さなものほど遠くに見えるという遠近法です。</p>
<h2>空気遠近法</h2>
<p><a href="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg" rel="attachment wp-att-9844"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9844" src="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg" alt="空気遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg 656w, /uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2-300x220.jpg 300w, /uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>遠くのものは大気の影響で霞んでいくことから、<br />
彩度、コントラストが弱いものほど遠くに見えるという遠近法です。</p>
<h2>色彩遠近法</h2>
<p><a href="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg" rel="attachment wp-att-9848"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9848" src="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg" alt="色彩遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg 656w, /uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42-300x220.jpg 300w, /uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>色彩が寒色系に近づくほど遠く、暖色系に近づくほど近くに見えるという遠近法です。</p>
<h2>消失遠近法</h2>
<p><a href="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg" rel="attachment wp-att-9846"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9846" src="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg" alt="消失遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg 656w, /uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1-300x220.jpg 300w, /uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>焦点に由来する遠近法で、<br />
焦点がぼやけたところほど遠くに見えるという遠近法です。</p>
<h2>幾何学遠近法(透視図法)</h2>
<p><a href="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg" rel="attachment wp-att-9843"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9843" src="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg" alt="幾何学遠近法(透視図法)" width="656" height="480" srcset="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg 656w, /uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548-300x220.jpg 300w, /uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg" rel="attachment wp-att-9864"><img decoding="async" class="alignnone wp-image-9890 size-full" src="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg" alt="" width="100%" srcset="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg 656w, /uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1-300x220.jpg 300w, /uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>一番有名な遠近法ですが、一番難易度の高い遠近法です。<br />
消失点に近いものほど小さく、遠く見えるというもので、<br />
一点透視図法、二点透視図法、三点透視図法などがあります。</p>
<p>&nbsp;</p>
<p>思っていた以上に多くの遠近法があることを知ることができました。<br />
必要に応じて使い分けたり、デザインのヒントにしていきたいです。</p>
<h2>参考サイト</h2>
<p><a class="link" href="http://blog.livedoor.jp/kokinora/archives/1008065272.html" target="_blank">遠近法について知っておこう ー概要ー : ノラの絵画の時間</a></p>


small_db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

thumbnail_db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

いろんな遠近法

<h2>vimのデフォルトの終了・保存方法</h2>
<p>vimの終了・保存方法といえば、<br />
:q + Enter（終了）<br />
:q! + Enter（編集したけど保存せず終了）<br />
:w + Enter（保存）<br />
:wq + Enter（保存して終了）<br />
などですが、私はタイピングスピードがそこまで早くないのと、楽をしたいということがあって、<br />
終了・保存方法を変更しました。</p>
<h2>終了・保存方法を変えてみた</h2>
<p>変更方法<br />
.vimrcに下記を記載し、vimのキーマッピングを変更する。</p>

		<div id="crayon-6495402639ad9460699748" 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">.vimrc</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;">
nmap s :w!&lt;CR&gt;
nmap q :q&lt;CR&gt;
nmap &lt;S-q&gt; :q!&lt;CR&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-6495402639ad9460699748-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402639ad9460699748-2">2</div><div class="crayon-num" data-line="crayon-6495402639ad9460699748-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-6495402639ad9460699748-1"><span class="crayon-i">nmap</span><span class="crayon-h"> </span><span class="crayon-i">s</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">w</span><span class="crayon-sy">!</span><span class="crayon-h">&lt;</span><span class="crayon-i">CR</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402639ad9460699748-2"><span class="crayon-i">nmap</span><span class="crayon-h"> </span><span class="crayon-i">q</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">q</span><span class="crayon-h">&lt;</span><span class="crayon-i">CR</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-6495402639ad9460699748-3"><span class="crayon-i">nmap</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-i">S</span>-<span class="crayon-i">q</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">q</span><span class="crayon-sy">!</span><span class="crayon-h">&lt;</span><span class="crayon-i">CR</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>この記載により、vimの終了・保存方法は、<br />
q（終了）<br />
Shift+q（編集したけど保存せず終了）<br />
s（保存）<br />
sq（保存して終了）<br />
に変更されます。</p>
<h2>所感</h2>
<p>とても地味な変更なのですが、元来の保存を行う場合、「Shift + : + w + Enter」「Shift + : + w + q + Enter」といったように4、５回キーを打たなければなりませんが、<br />
設定の変更により、「s」「sq」キーを1、２回だけ打つだけに変わり、タイプミスの多い私にとって、大分楽になりました。</p>

vimの終了・保存方法を変更する

<p>デザインでイラストを入れたり、絵を描いたりするとき、<br />
質感を出来るだけ短時間で出すことが求められる機会は多いと思います。</p>
<p>この質感を出す上で、一つのポイントとなることがあるのが、<br />
目が見ている色と、脳が見ている色にはズレが出てくることがあることを意識することです。</p>
<p>今回はその中でも影と色の関係についての、基本的な部分についてご紹介いたします。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2016/03/shadow-color_2.jpg" rel="attachment wp-att-9782"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9782" src="/uploads-archive/2016/03/shadow-color_2.jpg" alt="shadow-color_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color_2.jpg 656w, /uploads-archive/2016/03/shadow-color_2-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color_2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>↑こちらのいらすとの、下にある白黒のチェックですが、<br />
円柱の影になっている箇所は、実際には↓のように、影になっていない黒の部分よりも暗い色なのですが、<br />
白として認識できると思います。</p>
<p><a href="/uploads-archive/2016/03/shadow-color.jpg" rel="attachment wp-att-9783"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9783" src="/uploads-archive/2016/03/shadow-color.jpg" alt="shadow-color" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color.jpg 656w, /uploads-archive/2016/03/shadow-color-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>実際は暗い色なのですが、<br />
影と色の関係から、脳が再処理を行ってくれるため、<br />
影になった部分も白としてみることができます。</p>
<p>&nbsp;</p>
<p>もうひとつですが、</p>
<p><a href="/uploads-archive/2016/03/shadow-color02.jpg" rel="attachment wp-att-9785"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9785" src="/uploads-archive/2016/03/shadow-color02.jpg" alt="shadow-color02" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02.jpg 656w, /uploads-archive/2016/03/shadow-color02-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>こちらのような立方体があった場合、<br />
一つ一つの面が一色で構成されていると見ることができます。</p>
<p>しかし、実際には下のイラストのように床からの反射光で、側面はグラデーションになっています。</p>
<p><a href="/uploads-archive/2016/03/shadow-color02_2-1.jpg" rel="attachment wp-att-9802"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9802" src="/uploads-archive/2016/03/shadow-color02_2-1.jpg" alt="shadow-color02_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02_2-1.jpg 656w, /uploads-archive/2016/03/shadow-color02_2-1-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02_2-1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>しかし、脳はこの反射光を省いた状態を計算して、<br />
一面が一色になっていると認識します。</p>
<p>日常で生活する場合、<br />
この脳の働きが、色や影の実際の状態を知る手助けになりますが、</p>
<p>デザインをしたり絵を描いたりする場合は、<br />
脳が省いた情報を再現することが、質感を高める場合が多くなります。</p>
<p>こちらのことを意識することで、<br />
作品の作り込みやアイディアを増やすヒントにしていきたいです。</p>
<p>&nbsp;</p>
<h2>参考文献</h2>
<p><a class="link" href="http://www.amazon.co.jp/dp/4862461530" target="_blank">カラー&amp;ライト ~リアリズムのための色彩と光の描き方 2012/1/30 ジェームス・ガーニー(James Gurney) (著)</a></p>


目が見る色と頭が見る色

<p>前回に引き続きCINEMA4Dの機能紹介です。</p>
<p>実写映像とCGを合成する際にAfter effectsなどを使ってもトラッキングができますが、CINEMA４D内で行うとカメラ位置など同時も読み込んでくれるので作業工程がかなり簡単です。</p>
<h2>動画を読み込む</h2>
<p>まずはトラッキングする動画を読み込みます。</p>
<p><a href="/uploads-archive/2016/03/1.jpg" rel="attachment wp-att-9770"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9770" src="/uploads-archive/2016/03/1.jpg" alt="1" width="640" height="486" srcset="/uploads-archive/2016/03/1.jpg 640w, /uploads-archive/2016/03/1-300x228.jpg 300w, /uploads-archive/2016/03/1-228x173.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>モーショントラッカーから「フル３D解析」を選択して、トラッキングする動画を開きます。</p>
<p><a href="/uploads-archive/2016/03/2.jpg" rel="attachment wp-att-9771"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9771" src="/uploads-archive/2016/03/2.jpg" alt="2" width="640" height="290" srcset="/uploads-archive/2016/03/2.jpg 640w, /uploads-archive/2016/03/2-300x136.jpg 300w, /uploads-archive/2016/03/2-228x103.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>読込み中は画面のいちばん左下にゲージが表示されます。読み込む動画の尺などにもよりますが結構時間がかかるかもしれません。</p>
<p>ちなみにAVCHDは読込んでくれませんでした。</p>
<p><a href="/uploads-archive/2016/03/3.jpg" rel="attachment wp-att-9773"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9773" src="/uploads-archive/2016/03/3.jpg" alt="3" width="640" height="426" srcset="/uploads-archive/2016/03/3.jpg 640w, /uploads-archive/2016/03/3-300x200.jpg 300w, /uploads-archive/2016/03/3-228x152.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="/uploads-archive/2016/03/5.jpg" rel="attachment wp-att-9775"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9775" src="/uploads-archive/2016/03/5.jpg" alt="5" width="640" height="497" srcset="/uploads-archive/2016/03/5.jpg 640w, /uploads-archive/2016/03/5-300x233.jpg 300w, /uploads-archive/2016/03/5-228x177.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>読込みが完了するとトラッカーと解析済みのカメラが出来上がります。</p>
<p><a href="/uploads-archive/2016/03/4.jpg" rel="attachment wp-att-9774"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9774" src="/uploads-archive/2016/03/4.jpg" alt="4" width="640" height="199" srcset="/uploads-archive/2016/03/4.jpg 640w, /uploads-archive/2016/03/4-300x93.jpg 300w, /uploads-archive/2016/03/4-228x71.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>この時に背景オブジェクトを作成をクリックすると読込んだ動画の背景を同時に作成してくれるので便利です。</p>
<h2>軸を調整する</h2>
<p>マーカーの位置を見てみるとXYZ軸と多少ずれてしまっていますので、これを調整していきます。</p>
<p>まずは中心点（X=０,Y=０,Z=０)がカメラ位置になってしまっているので、中心点を調整します。</p>
<p><a href="/uploads-archive/2016/03/6.jpg" rel="attachment wp-att-9778"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9778" src="/uploads-archive/2016/03/6.jpg" alt="6" width="510" height="555" srcset="/uploads-archive/2016/03/6.jpg 510w, /uploads-archive/2016/03/6-276x300.jpg 276w, /uploads-archive/2016/03/6-228x248.jpg 228w" sizes="(max-width: 510px) 100vw, 510px" /></a></p>
<p>モーショントラッカーからコンストレイントを選び「位置コンストレイントを作成」をクリックします。</p>
<p>次に動画を見ながら安定していそうなマーカーを探してクリックします。するとそのマーカーが座標の中心点に切り替わってくれます。</p>
<p><a href="/uploads-archive/2016/03/7.jpg" rel="attachment wp-att-9781"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9781" src="/uploads-archive/2016/03/7.jpg" alt="7" width="640" height="446" srcset="/uploads-archive/2016/03/7.jpg 640w, /uploads-archive/2016/03/7-300x209.jpg 300w, /uploads-archive/2016/03/7-228x159.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>続いてY軸０の位置がずれているので調整します。</p>
<p><a href="/uploads-archive/2016/03/8.jpg" rel="attachment wp-att-9787"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9787" src="/uploads-archive/2016/03/8.jpg" alt="8" width="537" height="525" srcset="/uploads-archive/2016/03/8.jpg 537w, /uploads-archive/2016/03/8-300x293.jpg 300w, /uploads-archive/2016/03/8-228x223.jpg 228w" sizes="(max-width: 537px) 100vw, 537px" /></a></p>
<p>「平面コンストレイントを作成」をクリックし、Y軸が０になるマーカーを３つ選択します。</p>
<p><a href="/uploads-archive/2016/03/9.jpg" rel="attachment wp-att-9788"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9788" src="/uploads-archive/2016/03/9.jpg" alt="9" width="640" height="350" srcset="/uploads-archive/2016/03/9.jpg 640w, /uploads-archive/2016/03/9-300x164.jpg 300w, /uploads-archive/2016/03/9-228x125.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>平面コンストレイントを選択した状態で軸をYに変更すれば、先ほど選択した3点からなる面をY=０と認識してくれます。</p>
<p><a href="/uploads-archive/2016/03/10.jpg" rel="attachment wp-att-9789"><img decoding="async" loading="lazy" class="alignnone wp-image-9789" src="/uploads-archive/2016/03/10.jpg" alt="10" width="373" height="249" srcset="/uploads-archive/2016/03/10.jpg 640w, /uploads-archive/2016/03/10-300x200.jpg 300w, /uploads-archive/2016/03/10-228x152.jpg 228w" sizes="(max-width: 373px) 100vw, 373px" /></a></p>
<p>同様に垂直方向の軸を調整します。「ベクトルコンストレイントを作成」をクリックして、垂直になるマーカー2点を選択します。</p>
<p><a href="/uploads-archive/2016/03/11.jpg" rel="attachment wp-att-9790"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9790" src="/uploads-archive/2016/03/11.jpg" alt="11" width="411" height="525" srcset="/uploads-archive/2016/03/11.jpg 411w, /uploads-archive/2016/03/11-235x300.jpg 235w, /uploads-archive/2016/03/11-228x291.jpg 228w" sizes="(max-width: 411px) 100vw, 411px" /></a></p>
<p>今回も軸をYに変更します。</p>
<p><a href="/uploads-archive/2016/03/13.jpg" rel="attachment wp-att-9794"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9794" src="/uploads-archive/2016/03/13.jpg" alt="13" width="339" height="204" srcset="/uploads-archive/2016/03/13.jpg 339w, /uploads-archive/2016/03/13-300x181.jpg 300w, /uploads-archive/2016/03/13-228x137.jpg 228w" sizes="(max-width: 339px) 100vw, 339px" /></a></p>
<p>以上で位置の調整は完了です。</p>
<h2>オブジェクトを配置する</h2>
<p><a href="/uploads-archive/2016/03/14.jpg" rel="attachment wp-att-9795"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9795" src="/uploads-archive/2016/03/14.jpg" alt="14" width="640" height="438" srcset="/uploads-archive/2016/03/14.jpg 640w, /uploads-archive/2016/03/14-300x205.jpg 300w, /uploads-archive/2016/03/14-228x156.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>実写と合成したオブジェクトをそれぞれ配置して、後はレンダリングするだけです。</p>
<p>出来上がった動画がこちらです。</p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-9769-3" width="720" height="414" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/test_2_up.mp4?_=3" /><a href="/uploads-archive/2016/03/test_2_up.mp4">/uploads-archive/2016/03/test_2_up.mp4</a></video></div>
<p>今回はレンダリング時間軽減のためにライティングなどを全く行わず、かなり簡素な感じですが読込んだ動画を背景にしてGIを使用すれば実際に存在しているような質感を出す事ができます。</p>
<p>&nbsp;</p>


CINEMA4D モーショントラッカーを使用した実写合成

<p>横幅によってフォントサイズの調整と、文字長を自動で省略シてくれるjQueryプラグイン&#8221;Jquery-quickfit&#8221; が良さそうだったので使ってみた。</p>
<p><a href="http://chunksnbits.github.io/jquery-quickfit/" target="_blank">http://chunksnbits.github.io/jquery-quickfit/</a></p>
<p>&nbsp;</p>
<p>デモはこちら</p>
<p><a href="/demo/hoshino/63/index.html" target="_blank" class="demo">Demo</a></p>
<p>&nbsp;</p>
<h2>設置方法</h2>
<p>JS</p>

		<div id="crayon-6495401591e2a233328404" 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;">
$( window ).on( "resize", function()
{
	$( "#quickfit-a" ).quickfit( { max: 40, min: 16, truncate: false } );
	$( "#quickfit-b" ).quickfit( { max: 40, min: 20, truncate: true } );        
});</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-6495401591e2a233328404-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2a233328404-2">2</div><div class="crayon-num" data-line="crayon-6495401591e2a233328404-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2a233328404-4">4</div><div class="crayon-num" data-line="crayon-6495401591e2a233328404-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-6495401591e2a233328404-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">window</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">on</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">"resize"</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></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2a233328404-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401591e2a233328404-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">"#quickfit-a"</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">quickfit</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">max</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">40</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">min</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">16</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">truncate</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2a233328404-4"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">"#quickfit-b"</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">quickfit</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">max</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">40</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">min</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">truncate</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-6495401591e2a233328404-5"><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>HTML</p>

		<div id="crayon-6495401591e2e985673947" 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 id="quickfit-a"&gt;
フォントサイズ最大:40、最小:16。文字省略:無し
&lt;/div&gt;

&lt;div id="quickfit-b"&gt;
フォントサイズ最大:40、最小:20。文字省略:有り
&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-6495401591e2e985673947-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2e985673947-2">2</div><div class="crayon-num" data-line="crayon-6495401591e2e985673947-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2e985673947-4">4</div><div class="crayon-num" data-line="crayon-6495401591e2e985673947-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2e985673947-6">6</div><div class="crayon-num" data-line="crayon-6495401591e2e985673947-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-6495401591e2e985673947-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"quickfit-a"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2e985673947-2"><span class="crayon-i ">フォントサイズ最大:40、最小:16。文字省略:無し</span></div><div class="crayon-line" id="crayon-6495401591e2e985673947-3"><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2e985673947-4">&nbsp;</div><div class="crayon-line" id="crayon-6495401591e2e985673947-5"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"quickfit-b"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2e985673947-6"><span class="crayon-i ">フォントサイズ最大:40、最小:20。文字省略:有り</span></div><div class="crayon-line" id="crayon-6495401591e2e985673947-7"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>パラメータ</p>
<table>
<tbody>
<tr>
<td>キー名</td>
<td>データ型</td>
<td>内容</td>
</tr>
<tr>
<td>max</td>
<td>数値</td>
<td>親要素の幅によってフォントサイズが大きくなる中で、許容する最大のフォントサイズ</td>
</tr>
<tr>
<td>min</td>
<td>数値</td>
<td>親要素の幅によってフォントサイズが小さくなる中で、許容する最小のフォントサイズ</td>
</tr>
<tr>
<td>truncate</td>
<td>bool</td>
<td>親要素をはみ出してしまう場合、文字を切ることを許容するかどうか</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>レスポンシブでのコーディングの時などで便利そうだ</p>

【jQuery】幅によって自動でテキストを省略してくれるプラグイン

<p>まず、AMPって聞き慣れないですよね。</p>
<p>購読しているRSSの中で、AMPについての言及がよくされていましたが、まだ実施前だしいいか〜なんて思っていたのですが、去る2016年2月24日に日本でも若干前倒しで実装がされたようですので、本サイトも対応してみました。</p>
<h2>AMPについて</h2>
<p>まず、AMPとは、Accelerated Mobile Pagesの略で、スマートフォンから閲覧するページを高速化させましょうプロジェクトで、原則HTML＋CSSで遅くなるJSは禁止というAMPフレームワークを作ったので準拠して下さいというのが超簡単な解釈です。</p>
<p>オフィシャルのページは<a href="https://googleblog.blogspot.jp/2015/10/introducing-accelerated-mobile-pages.html" target="_blank">こちら</a>で詳しく知りたい方は、海外SEO情報ブログさんの<a href="https://www.suzukikenichi.com/blog/accelerated-mobile-pages-amp/" target="_blank">こちら</a>の記事が詳しく解説されています。</p>
<h2>AMPに対応するためのWordpressプラグイン</h2>
<p>この情報も海外SEO情報ブログさんの<a href="https://www.suzukikenichi.com/blog/how-to-make-your-wordpress-blog-amp-ready/" target="_blank">記事</a>を参考にさせて頂きました。</p>
<h3>AMP</h3>
<p>一つ目はその名もAMP。</p>
<p>プラグインの検索画面でAMPと入力すると一番上に出てきます。</p>
<p>こちらを有効化します。</p>
<p><a href="/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html">/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html</a></p>
<p>日本語URLにしたことを後悔しつつも、要は末尾に/ampをつけることでAMP対応のページを表示してくれます。</p>
<p><a href="/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html/amp">/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html/amp</a></p>
<p>私達で用意したスタイルが反映されていないページが登場します。</p>
<p><a href="/officer/%e6%9c%ac%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92amp%e5%af%be%e5%bf%9c%e3%81%95%e3%81%9b%e3%81%be.html/attachment/developer_tools_-_http___sterfield_co_jp" rel="attachment wp-att-9760"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9760" src="/uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-300x47.png" alt="Developer_Tools_-_http___sterfield_co_jp" width="300" height="47" srcset="/uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-300x47.png 300w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-768x121.png 768w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-1024x161.png 1024w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-228x36.png 228w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp.png 1528w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>要素の検証からもAMPに対応出来ていることが分かります。</p>
<h3>Facebook Instant Articles &amp; Google AMP Pages by PageFrog</h3>
<p>ここからスタイルをあてていくのが、このプラグインになります。</p>
<p><a href="/officer/%e6%9c%ac%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92amp%e5%af%be%e5%bf%9c%e3%81%95%e3%81%9b%e3%81%be.html/attachment/styling_pagefrog" rel="attachment wp-att-9761"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9761" src="/uploads-archive/2016/03/Styling_PageFrog-300x194.png" alt="Styling_PageFrog" width="300" height="194" srcset="/uploads-archive/2016/03/Styling_PageFrog-300x194.png 300w, /uploads-archive/2016/03/Styling_PageFrog-768x495.png 768w, /uploads-archive/2016/03/Styling_PageFrog-1024x660.png 1024w, /uploads-archive/2016/03/Styling_PageFrog-228x147.png 228w, /uploads-archive/2016/03/Styling_PageFrog.png 1293w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>素の状態ではロゴととにかくページを早く表示することだけのページです。</p>
<p>設定出来る項目も最低限という感じでこれ以上は、プラグインファイルを直接編集しないといけないとのことです。</p>


スターフィールドホームページをAMP対応

<p>UIという文字を頻繁に見かけるようになり、ワイヤーフレームやモックアップを制作するツールが多く生まれてきています。</p>
<p>以前、下記記事にてツールを紹介しましたが（すごい簡単にですが）<br />
<a href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84.html" target="blank">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a><br />
(cometはまだ動きがないようですね・・・)</p>
<p>こういったツールではなく、素材として制作を提供してくれるサイト、ブログがあります。<br />
しかもフリーで！！<br />
その中でいいと思った3つをご紹介します。</p>
<h3>ChatアプリのUIテンプレート</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg" alt="Free Chat UI kit for Photoshop and Sketch  InVision" width="640"  class="alignnone size-large wp-image-9747" srcset="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg 1024w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-300x199.jpg 300w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-768x508.jpg 768w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-228x151.jpg 228w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision.jpg 1109w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Chatアプリの制作に役にたちそうなkitです。そのままでもいい感じなのですが、これを元に制作していくと良さそうです。</p>
<p>photoshopかsketchか選択してダウンロードできます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png" alt="スクリーンショット 2016-03-01 12.33.46" width="640" class="alignnone size-large wp-image-9748" srcset="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png 1024w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-300x209.png 300w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-768x534.png 768w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-228x159.png 228w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82.png 1088w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>デザインに使わなくて、どういったページが必要かを把握するだけでも十分良さそうです！<br />
こんなのがフリーだなんてどうかしてますね、すごいな・・・invision。</p>
<p><a href="http://www.invisionapp.com/chat" target="_blank" class="link">Free Chat UI kit for Photoshop and Sketch | InVision</a></p>
<h3>ワイヤーフレーム、フローチャートを作れるKIT</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg" alt="UI Tiles- Website Flowcharts" width="640" class="alignnone size-large wp-image-9749" srcset="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg 1024w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-300x201.jpg 300w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-768x515.jpg 768w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-228x153.jpg 228w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>これはデザイナーはもちろん、ディレクターにも良いと思います！<br />
こちらも凄まじい種類のページテンプレートが用意してあり、PNG,AI,PSD,SKETCH形式のものがダウンロードできます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png" alt="スクリーンショット 2016-03-01 12.49.02" width="400"  class="alignnone size-full wp-image-9751" srcset="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png 639w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-260x300.png 260w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-228x263.png 228w" sizes="(max-width: 639px) 100vw, 639px" /></p>
<p><a href="https://pixelbuddha.net/ui-tiles/" target="_blank" class="link">UI Tiles: Website Flowcharts</a></p>
<h3>高品質なECサイトのUIテンプレート</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg" alt="Portland UI Kit Free Sample  Craftwork – Thoroughly Handpicked UI Freebies" width="640" class="alignnone size-large wp-image-9750" srcset="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg 1024w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-300x201.jpg 300w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-768x515.jpg 768w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-228x153.jpg 228w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>こちらは無料ではTOPページのみになりますが参考になります。</p>
<p><a href="http://getcraftwork.com/portland-ui-kit/" target="_blank" class="link">Portland UI Kit Free Sample | Craftwork – Thoroughly Handpicked UI Freebies</a></p>
<p>というかここのサイトがすごい。。。</p>
<p><a href="http://getcraftwork.com/ui-kits/" target="_blank" class="link">UI Kits | Craftwork – Thoroughly Handpicked UI Freebies</a></p>
<p>こういうの活かしながらより良いサイト制作に勤しみたいと思います。</p>


UIデザイン制作にすごい役立ちそうなフリー素材３つ

<p>CINEMA4DにはCモーションという、簡単にキャラクターに動きをつけるためのツールが存在します。</p>
<p>今回はその方法をご説明します。</p>
<p>まずはキャラクタの作り方です。今回は事前にオブジェクトができるところから説明させて頂きます。</p>
<p>キャラクタから「キャラクタ」を選択します。</p>
<p><a href="/uploads-archive/2016/02/1-2.jpg" rel="attachment wp-att-9713"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9713" src="/uploads-archive/2016/02/1-2.jpg" alt="1" width="640" height="465" srcset="/uploads-archive/2016/02/1-2.jpg 640w, /uploads-archive/2016/02/1-2-300x218.jpg 300w, /uploads-archive/2016/02/1-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>人間や動物など数種類ある中から、該当する物を選択して、ルートから骨組みを構築していきます。</p>
<p>ここまでは「ビルド」で行う作業になります。</p>
<p><a href="/uploads-archive/2016/02/2-3.jpg" rel="attachment wp-att-9714"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9714" src="/uploads-archive/2016/02/2-3.jpg" alt="2" width="640" height="465" srcset="/uploads-archive/2016/02/2-3.jpg 640w, /uploads-archive/2016/02/2-3-300x218.jpg 300w, /uploads-archive/2016/02/2-3-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>次に「調整」でポイント（関節にあたるもの）の位置を決定します。</p>
<p>３Dでは色んな方向から確認しておかないとずれてしまっている事があるので要注意です。</p>
<p><a href="/uploads-archive/2016/02/3-2.jpg" rel="attachment wp-att-9715"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9715" src="/uploads-archive/2016/02/3-2.jpg" alt="3" width="640" height="465" srcset="/uploads-archive/2016/02/3-2.jpg 640w, /uploads-archive/2016/02/3-2-300x218.jpg 300w, /uploads-archive/2016/02/3-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>調整が済んだら次に、メッシュとなるオブジェクトをバインドします。</p>
<p>これは非常に簡単で、バインドしたいオブジェクトをドラッグ＆ドロップするだけで完了です。</p>
<p>このとき、同時にスキンが生成されます。</p>
<p><a href="/uploads-archive/2016/02/4-2.jpg" rel="attachment wp-att-9716"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9716" src="/uploads-archive/2016/02/4-2.jpg" alt="4" width="640" height="465" srcset="/uploads-archive/2016/02/4-2.jpg 640w, /uploads-archive/2016/02/4-2-300x218.jpg 300w, /uploads-archive/2016/02/4-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>次にいよいよ動きをつけて行きます。</p>
<p>アニメートから「歩行を追加」をクリックするとCモーションが追加されます。</p>
<p>Cモーションの歩行から「直進」に変更すると足踏みから歩き出してくれます。</p>
<p><a href="/uploads-archive/2016/02/5-2.jpg" rel="attachment wp-att-9717"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9717" src="/uploads-archive/2016/02/5-2.jpg" alt="5" width="640" height="465" srcset="/uploads-archive/2016/02/5-2.jpg 640w, /uploads-archive/2016/02/5-2-300x218.jpg 300w, /uploads-archive/2016/02/5-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>出来上がりはこんな感じになります。</p>
<div style="width: 1920px;" class="wp-video"><video class="wp-video-shortcode" id="video-9712-2" width="1920" height="1080" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/02/test_1.mp4?_=2" /><a href="/uploads-archive/2016/02/test_1.mp4">/uploads-archive/2016/02/test_1.mp4</a></video></div>


CINEMA4D Cモーションを使って簡単にキャラクターを動かす

【Canvas】円でぼかしのような視覚効果

<p>Chromeの拡張機能の紹介です。</p>
<p>Chromeのデフォルトのダッシュボードを海外のweb,デザイン系のブログ・ギャラリーサイトのフィードを表示しちゃう機能です。</p>
<p><a class="link" href="https://chrome.google.com/webstore/detail/panda-4-news-inspiration/haafibkemckmbknhfkiiniobjpgkebko" target="_blank">Panda</a></p>
<p>通常のダッシュボードは、<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-9688" src="/uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-1024x634.png" alt="スクリーンショット 2016-02-23 16.10.54" width="630" height="390" srcset="/uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-1024x634.png 1024w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-300x186.png 300w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-768x476.png 768w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-228x141.png 228w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b.png 1027w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こんな感じのgoogleのページだと思うのですが、</p>
<p>この拡張機能をインストールして有効化させたら、<br />
以下のようなページがデフォルトとして表示されるようになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9693" src="/uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-1024x694.png" alt="スクリーンショット 2016-02-23 16.17.37" width="630" height="427" srcset="/uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-1024x694.png 1024w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-300x203.png 300w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-768x520.png 768w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-228x154.png 228w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017.png 1104w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>初期はこんな感じで、左側がニュースのリスト、右側がギャラリーというレイアウトなのですが、<br />
以下のように変更もできます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9694" src="/uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-1024x690.png" alt="スクリーンショット 2016-02-23 16.19.12" width="630" height="425" srcset="/uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-1024x690.png 1024w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-300x202.png 300w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-768x518.png 768w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-228x154.png 228w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d.png 1104w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>有名なサイトばかり揃っており、自分で選択もできるので非常に良いです。</p>
<p>忙しいとサイトを見に行くことを忘れてしまうこともあると思いますが、<br />
これがあれば自然に目に入ってくる可能性が高いのでおすすめです!!</p>
<p>これの日本verが欲しいな・・・</p>


デザイナー必須!?のChromeのエクステンション「Panda」

<h2>検索ソートの種類</h2>
<p>検索結果のソートには様々なものがありますが、まとめると以下のような一覧になる気がしています。</p>
<ul>
<li>関連度 relevancy, relevance
</li>
<li>人気順（売れ筋順、ランキング順）top selling
</li>
<li>新着順、発売日順 new arrivals
</li>
<li>商品名順 昇順 あ→わ name a-z
</li>
<li>商品名順 降順 わ→あ name z-a
</li>
<li>重量 軽い順 heaviest
</li>
<li>重量 重い順 lightest
</li>
<li>評価順 top rated, avg. cusotmer review
</li>
<li>評価件数の多い順
</li>
<li>価格の低い順 price low to high
</li>
<li>価格の高い順 price high to low
</li>
<li>発売中 On Sale Now
</li>
<li>ポイント率 point rate
</li>
<li>お気に入りの数
</li>
<li>よく見られている順
</li>
</ul>
<h2>所感</h2>
<p>ECサイトにおいて上記のソートをすべて網羅しているサイトは少ないですが、用意されているといざというときに便利な気がしています。<br />
特に、海外配送においては、重量は配送量等に関わってくるので、重量でソートできると便利な気がしています。</p>


検索結果のソートについて考える

<h3>マウスジェスチャー機能とは？</h3>
<div style="padding-left: 15px;">
  マウスのクリックや上下左右の動きによって<br />
  各アプリケーションの機能を割り当てることです。<br />
  (主にブラウザ、ファイラーで使われます)</div>
<h3>ブラウザの動作をマウスジェスチャーで楽に！</h3>
<div style="padding-left: 15px;">
  今回はChromeのストアが提供している<br />
  「CrxMouse」<br />
  をChromeにインストールしてみました。</p>
<p>  <a haref="https://chrome.google.com/webstore/detail/crxmouse/jlgkpaicikihijadgifklkbpdajbkhjo/related?utm_source=chrome-ntp-icon">こちら</a>のページへ遷移して<br />
  右上の「無料＋」を押下してインストールするだけです。<br />
  Chromeの再起動は必要ありません。<br />
  「設定」＞「拡張機能」のCrxMouseの有効チェックをONにします。</p>
<p>  デフォルトの状態だけでも、それなりに色々出来ます。</p>
<p>  「↓→」：タブを閉じる<br />
  「↑←」：左のタブへ移動<br />
  「↑→」：右のタブへ移動<br />
  「↑↓」：再読み込み</p>
<p>  などなど。。</p>
<p>  自分の良く使う機能だけを登録して<br />
  自分だけの軽快なブラウジングを実現してみましょう！！</p></div>
<h3>参考：カスタマイズ例</h3>
<div style="padding-left: 15px;">
  例えば「→↓→」で「右側のタブ全てを閉じる」を設定します。</p>
<p>  拡張機能のアドオン一覧からCrxMouse下にある「オプション」押下。<br />
  「Mouse Gestures」の下部にある「Edit Gestures」が登録済みのジェスチャーです。</p>
<p>  登録済みのジェスチャはActionのプルダウンメニューを変更するだけ。</p>
<p>  今回の「→↓→」のジェスチャは未登録なので<br />
  ページ真ん中あたりにある「Add new」を押下します。</p>
<p>  すると画面がグレーアウトします。<br />
  この状態で右クリックを押したまま「→↓→」となぞります。</p>
<p>  画面上部に「→↓→」と表示されたら<br />
  Actionの中から「Close all tabs on the right」を選択し、Save押下。</p>
<p>  これだけです。</p></div>
<p>参考：<br />
<a href="/blog/other/it%e6%a5%ad%e7%95%8c/%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b8%e3%83%b3%e3%82%b0%e3%81%a7web%e5%b7%a1%e5%9b%9e%e3%82%92%e3%81%93%e3%81%aa%e3%81%99.html">viChrome</a></p>


マウスジェスチャーを活用してみよう

<p>フリーランスになりたい！</p>
<p>というわけではないですが、このサイトに掲載されているツールはフリーランスに限らず、<br />
普通に便利なツールが載っています。</p>
<p>カラー関連、アイコン関連、フォント関連、写真関連、等々多くのサイトが一覧にまとめられています。</p>
<p>写真関連のサイトが多いですね〜</p>
<p><a href="https://www.hellobonsai.com/best-freelance-tools" class="link" target="_blank">Best Tools for Freelance Designers and Developers | Bonsai</a></p>
<p>以前、デザイナー向けツールのサイトの紹介もしていました。</p>
<p><a href="/designer/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%8a%e3%83%bc%e5%90%91%e3%81%91%e3%83%95%e3%83%aa%e3%83%bc%ef%bc%86%e6%9c%89%e6%96%99%e7%b4%a0%e6%9d%90%e3%81%be%e3%81%a8%e3%82%81%e3%82%b5%e3%82%a4%e3%83%88%e3%80%8cma.html" target="_blank" class="link">デザイナー向けフリー＆有料素材まとめサイト「Makerbook」 | スターフィールド株式会社</a></p>


フリーランスのデザイナー＆プログラマーにとって便利なツールのご紹介

<p>私は結構アナログ人間なところがあり、紙に書いてしまう癖があります。<br />
「あ！あとで見よう！」と思ってブックマークに登録しますが、どんどん詰まっていくと見づらくて見なくなっているサイトもしばしば。（整理しろという文句はまた今度聞きます）<br />
そんな私にピッタリの気になるページやテキスト、動画や画像なんかを残しておく時に便利なChrome拡張を見つけたので使用してみました。</p>
<p>その名も『DashNotes』<br />
こういった記録アプリに関しては、Evernoteとかが有名だと思うのですが、私的にはこっちの方が簡単でシンプルで使いやすいです。</p>
<h2>気になったテキストを選択して右クリックでペタリ</h2>
<p>DashNotesは、気になったテキストや動画・画像などを新しいタブとしてストックする事が出来ます。<br />
イメージ的には、付箋でぺたりと貼ったような感じです。</p>
<h3>右クリックメニューからコンテンツを保存し、新しいタブを作成します。</h3>
<p><a href="/uploads-archive/2016/02/dashnotes_1.jpg" rel="attachment wp-att-9583"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_1.jpg" alt="dashnotes_1" width="600" height="249" class="alignnone size-full wp-image-9583" srcset="/uploads-archive/2016/02/dashnotes_1.jpg 600w, /uploads-archive/2016/02/dashnotes_1-300x125.jpg 300w, /uploads-archive/2016/02/dashnotes_1-228x95.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>選択したコンテンツを画像の赤丸で囲っているコンテキストメニューを選ぶだけでOKです(*´▽｀*)簡単♥<br />
ちなみに動画に関しては、HTML5プレイヤーを使用しているものであれば動画プレイヤーごと保存しておくことが可能。<br />
ただし、外部サイトでの埋め込み再生を禁止している動画に関しては再生が出来ませんので【Youtubeで再生する】から画面遷移する必要がありますのでご注意下さい。</p>
<h3>どんどん新しい情報をペタリ</h3>
<p><a href="/uploads-archive/2016/02/dashnotes_2.jpg" rel="attachment wp-att-9584"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_2.jpg" alt="dashnotes_2" width="800" height="415" class="alignnone size-full wp-image-9584" srcset="/uploads-archive/2016/02/dashnotes_2.jpg 800w, /uploads-archive/2016/02/dashnotes_2-300x156.jpg 300w, /uploads-archive/2016/02/dashnotes_2-768x398.jpg 768w, /uploads-archive/2016/02/dashnotes_2-228x118.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a></p>
<p>画像はテキストリンクのみとなっていますが、テキストでメモしておけば後日見たい情報をすぐに見つける事ができますよね。<br />
忘れちゃっていた時でも、すぐに確認が出来るので忘れやすい私には本当ありがたいです。</p>
<p>左上にある「＋」からただのメモを残しておくことも可能。<br />
<a href="/uploads-archive/2016/02/dashnotes_1_01.jpg" rel="attachment wp-att-9590"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_1_01.jpg" alt="dashnotes_1_01" width="800" height="415" class="alignnone size-full wp-image-9590" srcset="/uploads-archive/2016/02/dashnotes_1_01.jpg 800w, /uploads-archive/2016/02/dashnotes_1_01-300x156.jpg 300w, /uploads-archive/2016/02/dashnotes_1_01-768x398.jpg 768w, /uploads-archive/2016/02/dashnotes_1_01-228x118.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a><br />
<a href="/uploads-archive/2016/02/dashnotes_1_02.jpg" rel="attachment wp-att-9589"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_1_02.jpg" alt="dashnotes_1_02" width="800" height="416" class="alignnone size-full wp-image-9589" srcset="/uploads-archive/2016/02/dashnotes_1_02.jpg 800w, /uploads-archive/2016/02/dashnotes_1_02-300x156.jpg 300w, /uploads-archive/2016/02/dashnotes_1_02-768x399.jpg 768w, /uploads-archive/2016/02/dashnotes_1_02-228x119.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a></p>
<h3>なんかすっごいおしゃれ</h3>
<p><a href="/uploads-archive/2016/02/dashnotes_0_01.jpg" rel="attachment wp-att-9587"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_0_01.jpg" alt="dashnotes_0_01" width="800" height="412" class="alignnone size-full wp-image-9587" srcset="/uploads-archive/2016/02/dashnotes_0_01.jpg 800w, /uploads-archive/2016/02/dashnotes_0_01-300x155.jpg 300w, /uploads-archive/2016/02/dashnotes_0_01-768x396.jpg 768w, /uploads-archive/2016/02/dashnotes_0_01-228x117.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a><br />
<a href="/uploads-archive/2016/02/dashnotes_0_02.jpg" rel="attachment wp-att-9586"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_0_02.jpg" alt="dashnotes_0_02" width="800" height="416" class="alignnone size-full wp-image-9586" srcset="/uploads-archive/2016/02/dashnotes_0_02.jpg 800w, /uploads-archive/2016/02/dashnotes_0_02-300x156.jpg 300w, /uploads-archive/2016/02/dashnotes_0_02-768x399.jpg 768w, /uploads-archive/2016/02/dashnotes_0_02-228x119.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a><br />
<a href="/uploads-archive/2016/02/dashnotes_0.jpg" rel="attachment wp-att-9585"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_0.jpg" alt="dashnotes_0" width="800" height="418" class="alignnone size-full wp-image-9585" srcset="/uploads-archive/2016/02/dashnotes_0.jpg 800w, /uploads-archive/2016/02/dashnotes_0-300x157.jpg 300w, /uploads-archive/2016/02/dashnotes_0-768x401.jpg 768w, /uploads-archive/2016/02/dashnotes_0-228x119.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a></p>
<p>これは、何も貼り付けていない状態のDashNotesです。<br />
新しいタブを開く度に画像が変更されます。なんだかとってもオシャンティです。<br />
あと右上の秒数カウント付きの時計が地味に嬉しいです。</p>
<p>試しに使ってみたい方は、無料ですので<a href="https://chrome.google.com/webstore/detail/dashnotes/akejfagjhbihofnhibbkdlhmoflckfdk">DashNotes</a>から拡張機能をインストールしてみてください。<br />
もし消したい場合には、google設定から「拡張機能を無効にする」で解除されますよ～。</p>


画像やページを残しておけるChrome拡張「DashNotes」

<p>個人的に、ドキュメントをきれいに作りたいときはillustratorを使っており、</p>
<p>レイアウトや色使いが自由にできるので満足しているのだが、ページ番号をふれない、という大きな問題がある。</p>
<p>数ページのドキュメントであれば手動でふればよいのだが、数十ページともなるとページ番号無しでいいかと妥協してしまう。</p>
<p>この度100ページ超えの資料を作る機会があり、同じ状況に直面。</p>
<p>今回はページ番号をふらなければまずかったので、良い方法が無いか調べてみた。</p>
<p>&nbsp;</p>
<p>結果として、illustratorにページ番号をふる機能は無く、プラグインを作るしか無いという結論に至った。</p>
<p>&nbsp;</p>
<p>illustratorのプラグインについて</p>
<p>言語の仕様としてはjavascriotで作成できるらしい</p>
<p>activeDocumentやlayerなどといったillustrator独自のオブジェクトがあり、これらをjsで操作できるようだ</p>
<p>ちょっとバージョンは古いが、以下のサイトが非常に参考になった</p>
<p><a href="http://www.openspc2.org/book/IllustratorCS4/" target="_blank">http://www.openspc2.org/book/IllustratorCS4/</a></p>
<p>&nbsp;</p>
<p>自分がやった処理は</p>
<ol>
<li>全てのレイヤーを順番に開く</li>
<li>非表示のレイヤーは強制的に表示させる</li>
<li>指定した場所にページ番号を表示させる</li>
<li>全レイヤーに実行したら完了</li>
</ol>
<p>という流れ</p>
<p>具体的には以下のように書いてみた</p>

		<div id="crayon-6495401591a07201117057" 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 layerCount = activeDocument.layers.length;
	for (var i = 0; i &lt; layerCount; i++ ) 
	{
		var targetLayer = activeDocument.layers[i];

		if( !targetLayer.visible ) targetLayer.visible = true;

		textObj = targetLayer.textFrames.add();
		textObj.contents = layerCount - i;

		textObj.position = [x座標, y座標];
	}

	alert("完了しました");
})();</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-6495401591a07201117057-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-2">2</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-4">4</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-6">6</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-8">8</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-10">10</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-12">12</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-14">14</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-16">16</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-6495401591a07201117057-1"><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-6495401591a07201117057-2"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">layerCount</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">activeDocument</span><span class="crayon-sy">.</span><span class="crayon-i">layers</span><span class="crayon-sy">.</span><span class="crayon-i">length</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401591a07201117057-3"><span class="crayon-h">	</span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-i">layerCount</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">i</span>++<span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591a07201117057-4"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401591a07201117057-5"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">targetLayer</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">activeDocument</span><span class="crayon-sy">.</span><span class="crayon-i">layers</span><span class="crayon-sy">[</span><span class="crayon-i">i</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591a07201117057-6">&nbsp;</div><div class="crayon-line" id="crayon-6495401591a07201117057-7"><span class="crayon-h">		</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">!</span><span class="crayon-i">targetLayer</span><span class="crayon-sy">.</span><span class="crayon-i">visible</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i">targetLayer</span><span class="crayon-sy">.</span><span class="crayon-i">visible</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591a07201117057-8">&nbsp;</div><div class="crayon-line" id="crayon-6495401591a07201117057-9"><span class="crayon-h">		</span><span class="crayon-i">textObj</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">targetLayer</span><span class="crayon-sy">.</span><span class="crayon-i">textFrames</span><span class="crayon-sy">.</span><span class="crayon-e">add</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-6495401591a07201117057-10"><span class="crayon-h">		</span><span class="crayon-i">textObj</span><span class="crayon-sy">.</span><span class="crayon-i">contents</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">layerCount</span><span class="crayon-h"> </span>-<span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401591a07201117057-11">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-6495401591a07201117057-12"><span class="crayon-h">		</span><span class="crayon-i">textObj</span><span class="crayon-sy">.</span><span class="crayon-i">position</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-i">x</span>座標<span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">y</span>座標<span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401591a07201117057-13"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591a07201117057-14">&nbsp;</div><div class="crayon-line" id="crayon-6495401591a07201117057-15"><span class="crayon-h">	</span><span class="crayon-r">alert</span><span class="crayon-sy">(</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-6495401591a07201117057-16"><span class="crayon-sy">}</span><span class="crayon-sy">)</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>以下は実際にaiで実行してpdf化したもの</p>
<p><a href="/uploads-archive/2016/02/1-7.pdf" rel="">サンプルPDF</a></p>
<p>&nbsp;</p>
<p>未だ理解が浅いが、jsでとっかかりやすいし便利そうなので、機会があれば今後も使ってみたい</p>

【illustrator】レイヤーに自動でページ番号を付ける方法

thumbnail_nadeshiko (1).jpg

nadeshiko (1).jpg

プログラムと言う&#8221;言語&#8221;

<p><a href="/blog/product/javascript/reveal-js%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F.html">先週のブログ</a>に引き続き、プレゼンがテーマです。</p>
<p>先日<a href="http://scalamatsuri.org/">ScalaMatsuri 2016</a>というカンファレンスに参加したのですが、<br />
そこで登壇された方が、Scalaのreplを使ったプレゼンテーションをしていて、<br />
私も使用してみたい！と思い、ブログにしてみました。<br />
<small>（※replとは、read-eval-print-loopの略で、対話型実行環境のこと。）</small></p>
<h2>使い方</h2>
<p>下記を参考にしました。<br />
<a href="https://github.com/marconilanna/REPLesent">marconilanna/REPLesent</a><br />
ここで会社では簡単なデモを紹介しましたが、上のgithubにデモ動画が上がっています。下のやつでも確認できます。<br />
<script type="text/javascript" src="https://asciinema.org/a/16690.js" id="asciicast-16690" async></script></p>
<h2>所感</h2>
<h4>メリット</h4>
<ul>
<li>
  スライドの途中にScalaのプログラムを走らせることができる。
  </li>
<li>
  テキストファイルをいじるだけなので、簡単
  </li>
<li>
  絵文字が使える。
  </li>
</ul>
<h4>デメリット</h4>
<ul>
<li>
  日本語を使用すると若干レイアウトが崩れる
  </li>
</ul>
<h2>まとめ</h2>
<p>使用する機会がなさそうですが、いつか使用してみたいです。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2016/03/09

2016/03/09

2016/03/02

2016/03/02

2016/03/02

2016/03/02

2016/03/02

2016/03/01

2016/02/24

2016/02/24

2016/02/24

2016/02/17

2016/02/17

2016/02/17

2016/02/17

2016/02/16

2016/02/10

2016/02/10