<p><a href="/designer/javascript%E3%81%A7%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%92%E7%B5%84%E3%82%80.html">前回</a>JavaScriptのprototypeを使ってオブジェクト指向のプログラムを組む方法についてご紹介しましたが、</p>
<p>今回は、実際にprototypeを使ってオブジェクトを作ってみました。</p>
<p>&nbsp;</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="/demo/ninomiya/92/">DEMO</a></p>
<p>&nbsp;</p>
<h2>作ってみたものの概要</h2>
<p></p>

		<div id="crayon-64954015905ed606463937" 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></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;">
//コンストラクトを定義
setBgImage = function (selector) {
    this.element = document.querySelector(selector);
    this.selector = selector;
    this.init(); //デフォルトで実行する関数の指定
};

//メソッドを定義
setBgImage.prototype = {
    getSrc: function() {
      return this.element.getAttribute('data-bgimg');
    },
    init: function() { //デフォルトで実行する関数の定義
      this.element.style.backgroundImage = "url(" + this.getSrc() + ")";
    }
};

//インスタンスの作成
var setBgImage1 = new setBgImage(".imageArea.first");
var setBgImage2 = new setBgImage(".imageArea.second");
var setBgImage3 = new setBgImage(".imageArea.last");

//各インスタンスでのメソッドの利用
setBgImage1.element.innerHTML = setBgImage1.getSrc();
setBgImage2.element.innerHTML = setBgImage2.selector;</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-64954015905ed606463937-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-2">2</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-4">4</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-6">6</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-8">8</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-10">10</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-12">12</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-14">14</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-16">16</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-18">18</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-20">20</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-22">22</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-24">24</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-25">25</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-64954015905ed606463937-1"><span class="crayon-c">//コンストラクトを定義</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-2"><span class="crayon-i">setBgImage</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">selector</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">element</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">querySelector</span><span class="crayon-sy">(</span><span class="crayon-i">selector</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">selector</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">selector</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">init</span><span class="crayon-sy">(</span><span class="crayon-sy">)</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-64954015905ed606463937-6"><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-8"><span class="crayon-c">//メソッドを定義</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-9"><span class="crayon-i">setBgImage</span><span class="crayon-sy">.</span><span class="crayon-i">prototype</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">getSrc</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">element</span><span class="crayon-sy">.</span><span class="crayon-e">getAttribute</span><span class="crayon-sy">(</span><span class="crayon-s">'data-bgimg'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">init</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </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-64954015905ed606463937-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">element</span><span class="crayon-sy">.</span><span class="crayon-i">style</span><span class="crayon-sy">.</span><span class="crayon-i">backgroundImage</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"url("</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">getSrc</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-s">")"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-16"><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-17">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-18"><span class="crayon-c">//インスタンスの作成</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-19"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">setBgImage1</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">setBgImage</span><span class="crayon-sy">(</span><span class="crayon-s">".imageArea.first"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-20"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">setBgImage2</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">setBgImage</span><span class="crayon-sy">(</span><span class="crayon-s">".imageArea.second"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-21"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">setBgImage3</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">setBgImage</span><span class="crayon-sy">(</span><span class="crayon-s">".imageArea.last"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-22">&nbsp;</div><div class="crayon-line" id="crayon-64954015905ed606463937-23"><span class="crayon-c">//各インスタンスでのメソッドの利用</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-24"><span class="crayon-i">setBgImage1</span><span class="crayon-sy">.</span><span class="crayon-i">element</span><span class="crayon-sy">.</span><span class="crayon-i">innerHTML</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">setBgImage1</span><span class="crayon-sy">.</span><span class="crayon-e">getSrc</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-25"><span class="crayon-i">setBgImage2</span><span class="crayon-sy">.</span><span class="crayon-i">element</span><span class="crayon-sy">.</span><span class="crayon-i">innerHTML</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">setBgImage2</span><span class="crayon-sy">.</span><span class="crayon-i">selector</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>今回作ってみたものは、CSSのセレクターの形式で指定された要素で、</p>
<p>data-bgimgで指定された画像をスタイルの背景画像に適用するというものです。</p>
<p>&nbsp;</p>
<p>無条件でインスタンス作成時に実行する関数はコンストラクタ内にinit()として実行しており、</p>
<p>その中で、スタイルを設定しています。</p>
<p>必要に応じてgetSrc()などを実行できるようにしています。</p>

JavaScriptのprototypeを使ったオブジェクトを作ってみよう

<p>マーケティングに動画を活用する動きは今年になってさらに活発になっています。</p>
<p>数年前まではとりあえず動画を作成するという段階にありましたが、去年あたりから何のためにどんな動画を作成するのかを重要視するべきとの声が強くなっているように感じます。この流れは必然であり、当たり前の事とも言えます。</p>
<h2>最近よく出てくる3Hって何？</h2>
<p>合わせて3Hという動画のカテゴリに対する呼ばれ方を良く聞くようになってきています（おそらくgoogleあたりが提唱しているのだと思いますが）。</p>
<p>この3Hとは「HERO」「HUB」「HELP」の頭文字で、簡単にいうと「HERO」はいわゆるバズる事を目指す動画でまずは多くの人にリーチして製品や企業、または試みなどを知ってもらう事を目的にした動画、「HUB」は製品や企業の良さを知ってもらい好きになってもらう為のイメージ戦略的な動画、「HELP」は製品の操作方法や詳細を説明する為の動画という事になります。</p>
<p>HEROに分類される動画は決して費用をかけたからと言ってウケるわけではなく、多くの人が興味を引く動画でなくてはいけません。「なんだこれは？」という感じで斬新である必要があります。</p>
<p>具体的には「物珍しい」「おどろき（ギャップ）」「心地よさ」など、本能的な部分に訴える動画を作る必要があるのです。</p>
<p>そこでHERO動画として、近頃増えてきた360°の動画は、少なからず「物珍しい」という点はクリアできているのではと思い、最近作成方法を色々と調べていました。</p>
<p>360度撮影可能なカメラがそこそこの値段で買えるようになったので、実写動画はかなり増えてきています。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/g6w6xkQeSHg" allowfullscreen="allowfullscreen"></iframe></p>
<p>しかし、物珍しさを求めるからには、まだアップされている数が少ない360°動画が適していると思いますのでCGを利用した動画の作成方法を調べてみました。</p>
<p>実写と違ってある程度、仕掛けを作りこみやすそうなところもCGで作成する魅力です。既にあるものとしては以下の様な動画が上がっています。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/6uG9vtckp1U" allowfullscreen="allowfullscreen"></iframe></p>
<h2>CINEMA４Dで360°動画を作成するには</h2>
<p>CG作成のソフトはCINEMA4Dを使用しているので、その方法をご紹介します。CINEMA４Dはafter　effectsとの連携がしやすいので実写とCGを合成した360°動画も作りやすいかもしれません。</p>
<p><a href="/uploads-archive/2016/01/1.jpg" rel="attachment wp-att-9162"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9162" src="/uploads-archive/2016/01/1.jpg" alt="1" width="640" height="551" srcset="/uploads-archive/2016/01/1.jpg 640w, /uploads-archive/2016/01/1-300x258.jpg 300w, /uploads-archive/2016/01/1-228x196.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="/uploads-archive/2016/01/3.jpg" rel="attachment wp-att-9191"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9191" src="/uploads-archive/2016/01/3.jpg" alt="3" width="640" height="430" srcset="/uploads-archive/2016/01/3.jpg 640w, /uploads-archive/2016/01/3-300x202.jpg 300w, /uploads-archive/2016/01/3-228x153.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>（上は通常のカメラ）</p>
<p>プラグインでVRAY　for C４Dを利用すると3D空間の中にRICOH THETAのような360°撮影可能なカメラを設置する事ができます。</p>
<p><a href="https://www.youtube.com/watch?v=Kcxn4ZeN0zg" rel="attachment wp-att-9163"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9163" src="/uploads-archive/2016/01/2.jpg" alt="2" width="640" height="413" srcset="/uploads-archive/2016/01/2.jpg 640w, /uploads-archive/2016/01/2-300x194.jpg 300w, /uploads-archive/2016/01/2-228x147.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>これを利用してレンダリングすれば360°動画を書き出すことができます。</p>
<p>実際にCINEMA4Dで作られた動画がこちらです。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/ZWXVszTvbyE" allowfullscreen="allowfullscreen"></iframe></p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/mcd6ifj9ntg" allowfullscreen="allowfullscreen"></iframe></p>


cinema4d と vrayで360°の世界を作る　物珍しいうちにhero動画として活用

<p>webデザインをする時はPhotoshop(CC)を使っており、ワイヤーフレームを自分で書くときもPhotoshopを使用しています。</p>
<p>最近、webデザインやアプリデザインをする場合は<a href="https://www.sketchapp.com/" target="_blank">Sketch</a>が着々と人気になっており、</p>
<p>ワイヤーフレームやモックアップを作る時は、</p>
<ul>
<li><a href="https://www.flinto.com/" target="_blank">Flinto</a></li>
<li><a href="http://www.pixate.com/" target="_blank">Pixate</a></li>
<li><a href="https://prottapp.com/ja/" target="_blank">Prott &#8211; Prototyping tool for Web iOS Android apps</a></li>
<li><a href="http://www.invisionapp.com/" target="_blank">InVision</a></li>
<li><a href="https://popapp.in/" target="_blank">POP</a></li>
<li><a href="https://moqups.com/" target="_blank">Moqups</a></li>
<li><a href="http://www.justinmind.com/" target="_blank">Justinmind</a></li>
<li><a href="http://frame.lab25.co.uk/" target="_blank">Frame</a></li>
</ul>
<p>といったいろいろなサービスが使われているようです。</p>
<p>非常に便利そうで使ってみたいのですが、有料のものが多く、なかなか使用することに踏みきれません。(どのサービスもトライアル期間がありますので試す事が可能です)</p>
<p>なので、photoshopでワイヤーフレームを作ってしまうという状況にあります。</p>
<p>上記に紹介しているようなサービスのように簡単にモックアップやワイヤーフレームを作りたいなぁと思っていた所、<br />
adobeであるモノを発見しました。</p>
<h2>Project Comet</h2>
<p>それがAdobeの「Project Comet」です。</p>
<p><a href="/uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5.png" rel="attachment wp-att-9119"><img decoding="async" loading="lazy" class="alignnone wp-image-9119" src="/uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5.png" alt="スクリーンショット 2016-01-12 14.28.24" width="640" height="449" srcset="/uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5.png 962w, /uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5-300x210.png 300w, /uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5-768x539.png 768w, /uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5-228x160.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html" target="_blank">User experience, prototyping and design app | Adobe Project Comet</a></p>
<p>ワイヤーフレームやモックアップが簡単に作れちゃいそうな雰囲気がしますね！</p>
<p>これが今年の早い段階で公開されるとのことでいつになるのかワクワクしております。<br />
そしてphotoshopCC利用者であれば無料になってくれないかなと淡い期待をしております笑</p>
<h2>Adode Comp</h2>
<p>スマホやタブレット限定になりますが、ワイヤーフレームやカンプを作るためのアプリ(iPhone)は既にあります。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-9118" src="/uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853.png" alt="スクリーンショット 2016-01-12 14.27.49" width="640" height="420" srcset="/uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853.png 1016w, /uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853-300x197.png 300w, /uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853-768x504.png 768w, /uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853-228x150.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2015/images/comp-marquee.jpg" target="_blank">Adobe Comp CC</a></p>
<p>こちらは無料のアプリで、直感的に作成出来るので慣れたら楽にどこにいても作成することができるかと思います。</p>
<p>これのPC版がProject Cometなのでしょうか？？</p>
<h2>Photoshop CCも進化している！</h2>
<p>photoshopも負けておりません。<br />
当初は写真加工のツールだったにもかかわらず、どんどんwebデザインするのに適した機能が追加されています。<br />
CCになることによって短いスパンで機能が追加されていくのが日に日に便利になっているような気がします。</p>
<p><a href="https://helpx.adobe.com/jp/photoshop/tutorials.html" target="_blank">Photoshop CCチュートリアル | Photoshop CCの使い方</a></p>
<p>なかでも2015年11月に追加された「デザインスペース」というものが良く、「UXやモバイルアプリのデザイン作業に適している」とのことで、ちょっとsketchとかに寄せているんじゃないかと思わせるようなものになっています。</p>
<p>ccをご使用している方ならこれは必見です！！</p>
<p><a href="https://helpx.adobe.com/jp/photoshop/how-to/design-space.html?set=photoshop--whats-new--2015-11" target="_blank">デザインスペース（プレビュー）の概要 | Adobe Photoshop CC tutorials</a></p>
<p>こちらのデザインスペースに関してはまだ別に取り上げて見たいと思います。</p>
<p>昔はAdobe一択で、最近他のツールが出て来て盛りあがってますが、まだまだAdobeもいいですね！<br />
僕は期待してます！</p>


webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！

<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でオブジェクト指向のプログラムを組む初歩の紹介

<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指定が効かなかったバグ

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で自動処理を活用してみよう！

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

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

<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だけで縦書きを表現する

nino-eye (2).jpg

マウスとタッチのイベントはHammer.jsが便利

CSSでボーダーのアニメーションを考えてみたけど・・・

<p>Photoshopのccを契約して月約1000円を支払って使用しておりますが、<br />
常に最新の機能が使えるので便利ですね！</p>
<p>今年の6月にCC2015がリリースされ、今使用している中で嬉しい機能を紹介したいと思います。</p>
<h2>レイヤースタイルの重ねがけ</h2>
<p>それは、レイヤースタイルの重ねがけです。</p>
<p>下の画像をご覧ください。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8547" src="/uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164.png" alt="スクリーンショット 2015-11-24 12.22.27" width="630" height="400" srcset="/uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164.png 861w, /uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164-300x190.png 300w, /uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164-228x145.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>レイヤースタイルを適用する際に出てくる画面ですが、<br />
「境界線」「シャドウ(内側)」「カラーオーバーレイ」「グラデーションオーバーレイ」「ドロップシャドウ」<br />
の横に「＋」があるのがわかりますでしょうか？</p>
<p>この「＋」がある項目は、追加することが出来るので重ねがけができるんです！！</p>
<p>例えば、境界線の場合ですがまずはシェイプを作って、<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-8550" src="/uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e.png" alt="スクリーンショット 2015-11-24 12.22.51" width="630" height="496" srcset="/uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e.png 745w, /uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e-300x236.png 300w, /uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e-228x180.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>レイヤースタイルのパネルを開き、境界線の横の「＋」を押します。<br />
すると、下に同じ境界線が追加されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8553" src="/uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23.png" alt="スクリーンショット 2015-11-24 12.23.42" width="630" height="398" srcset="/uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23.png 880w, /uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23-300x190.png 300w, /uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23-228x144.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>そして2つの境界線にそれぞれ設定すると、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8556" src="/uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd.png" alt="スクリーンショット 2015-11-24 12.27.58" width="630" height="401" srcset="/uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd.png 855w, /uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd-300x191.png 300w, /uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd-228x145.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8558" src="/uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a.png" alt="スクリーンショット 2015-11-24 14.34.20" width="630" height="521" srcset="/uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a.png 681w, /uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a-300x248.png 300w, /uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a-228x188.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>このようにひとつのシェイプに境界線を二重にすることができました！<br />
もっと重ねることもできます！</p>
<p>以前は、2つレイヤー用意したり、一度ラスタライズしたり等々やらなければなりませんでしたが、<br />
随分と簡単に設定できます。</p>
<p>ひとつ残念なのが、作ったPSDを他のverで開くと、境界線がまったくなくなってしまう点です。<br />
せめて最初の一つはそのままで・・・とは思いますが仕方ないですね。。。</p>
<p><a class="link" href="https://blogs.adobe.com/creativestation/photoshop_cc_2015">新登場、メジャーアップデート Photoshop CC 2015年リリース | Adobe Creative Station</a></p>


PhotoshopのCC2015ではレイヤースタイルの重ねがけが出来る！

nino-eye1 (1).jpg

JavaScriptでCSSを操作する方法

<p>「TTS」って聞いた事があるような無いような感じですが、「Text To Speech」の略でテキストを音声にして読み上げてくれるシステムを指します。他には「合成音声」と言ったり、スピーチシンセサイザーなんて呼ぶ場合もあるようです。</p>
<p>おそらくTTSで検索すると為替に関する用語にもあるらしく、そちらが多く表示されるので「Text To Speech」で検索した方がいいかもしれません。</p>
<p>TTSについては数年前くらいから、youtubeでナレーションとして使用されたり、地上波でもバラエティ番組のナレーションに使われたりしています。最近はよく利用されているので珍しくもなくなりましたが、海外向けの動画を制作する場合にナレーションって英語で入れたら親切だなと思いちょっと調べてみました。</p>
<p>TTSは特殊なソフトウェアが必要そうなイメージですが、実はgoogle翻訳を利用すると簡単にできます。</p>
<p><a class="demo" href="http://translate.google.com/translate_tts?tl=ja&amp;q=%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89">demo</a></p>
<p><a class="demo" href="http://translate.google.com/translate_tts?tl=en&amp;q=sterfield">demo</a></p>
<p>上のdemoから開けるページで右クリックをすればMP3の音声ファイルとして保存する事ができます。</p>
<p>「<strong>http://translate.google.com/translate_tts?tl=ja&amp;q=</strong>」こちらがそのURLになりますが、最後=の後に、しゃべらせたい言葉を入力すればＯＫです。滑らかなTTSが多くなってくると、逆にこのぎこちなさが良く感じてきたりもします。</p>
<p>ちなみ「<strong>tl=ja</strong>」の部分を<strong>「tl=en」</strong>に変えてあげれば英語に変更できます。</p>
<p><a href="http://soundoftext.com/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8507" src="/uploads-archive/2015/11/1.jpg" alt="1" width="640" height="341" srcset="/uploads-archive/2015/11/1.jpg 640w, /uploads-archive/2015/11/1-300x160.jpg 300w, /uploads-archive/2015/11/1-228x121.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="http://soundoftext.com/">http://soundoftext.com/</a></p>
<p>こちらのサイトはgoogle翻訳を使ったTTSを使いやすくしてくれています。若干日本語入力にバグがあるかもしれませんが。</p>
<p>&nbsp;</p>
<h2>テレ東のバレエティ番組のナレーションで使われているアレ</h2>
<p><a href="http://www.oddcast.com/home/demos/tts/tts_example.php"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8509" src="/uploads-archive/2015/11/2.jpg" alt="2" width="528" height="564" srcset="/uploads-archive/2015/11/2.jpg 528w, /uploads-archive/2015/11/2-281x300.jpg 281w, /uploads-archive/2015/11/2-228x244.jpg 228w" sizes="(max-width: 528px) 100vw, 528px" /></a></p>
<p>こちらはTexr-to-Speechのデモ画面です。LanguageをJapaneseにして、VoiceをShouに、Effectはnoneのままでテキストを入力してみてください。</p>
<p>バラエティ番組のナレーションをして使用されているTTSの声でしゃべらせる事ができます。知っている方は「あっ、聞いた事がある」と思うはずです。</p>
<p>このデモ画面にあるリンク先では、写真などから２Ｄまたは3Dのキャラクターを作り、しゃべらせるというサービスを提供しているようです。</p>
<p><a href="/uploads-archive/2015/11/3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8510" src="/uploads-archive/2015/11/3.jpg" alt="3" width="640" height="657" srcset="/uploads-archive/2015/11/3.jpg 640w, /uploads-archive/2015/11/3-292x300.jpg 292w, /uploads-archive/2015/11/3-228x234.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="http://www.sitepal.com/">http://www.sitepal.com/</a></p>
<h2>最新のTTSは感情も表現できる</h2>
<p>メガネメーカーのイメージが強いHOYAですが、意外にもグループ会社の中にはTTSのサービスを提供している会社があります、その名もHOYAサービス株式会社。こちらで提供しているのが<strong><a href="http://voicetext.jp/">VOICE TEXT</a></strong>というサービスです。</p>
<p>どうやら先ほど上で紹介したバラエティ番組のナレーションについてもHOYAサービスで開発されたようです。気になる方はこちらに詳しく書いてあります。<a href="http://voicetext.jp/show/">http://voicetext.jp/show/</a></p>
<p>VOICE TEXTのでもページを見てみると、話し方にかなり自然で聞き取りやすい印象を受けます。</p>
<p>さらに新しい取り組みとして公開されていたのは、なんと感情を表現できるというものです。</p>
<p><a href="http://voicetext.jp/voicetextlab/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8511" src="/uploads-archive/2015/11/4.jpg" alt="4" width="640" height="472" srcset="/uploads-archive/2015/11/4.jpg 640w, /uploads-archive/2015/11/4-300x221.jpg 300w, /uploads-archive/2015/11/4-228x168.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>まだ試作段階のようですが、デモページで実際に試してみると、確かに感情が伝わってきます。今後、開発がさらに進めば、本当の人間が話しているのか、TTSなのかわからなくなるかもしれません。</p>
<p>知り合いのナレーターさんとTTSについて話した事が以前ありましたが、かなり戦々恐々としていました。その方は独特の声をお持ちなのですが、一度声をサンプリングしてしまえば、自分がいなくてもナレーションができてしまうと言っていました。そうなると、有名なナレーターが声を一般に売るという時代が来るかもしれません。</p>
<p>ちょっと話が飛躍してしまいましたが、今後期待の持てる分野です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


意外と知らないTTSの世界

<p>facebookのいいねボタンをサイトに設置することはもうお決まりのようなパターンになっております。</p>
<p>お決まりのソースを手元に用意してありますが、たまにちゃんとfacebookdeveloperからコードを取得してくることがあります。</p>
<p>そこで、最新のコードをゲットして使用したら、<br />
お客さんに「いいねボタンを押したら変な風になる」を言われました。</p>
<p>今までは押すと、数字が触れてキャンセルできるよう✕マークが表示される感じでしたが、<br />
最新のものは、押すと、shareボタンみたいに、ボックスが表示されコメントを記入することが出来るようになっています。<br />
(URLがよろしくない場合や設定されてない場合、一度「確認」という表示に代わり、確認を押すと「いいね」か「キャンセル」を選択するようになってます)</p>
<p>そして、大きく変わったのは取得するコードが一択になったところです。<br />
下の画像を見ると、今までiframeとかなんやら選択出来たんですが、それがありません。</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-8461" src="/uploads-archive/2015/11/22ad233a73b61d62a6d557939a55f65d.png" alt="スクリーンショット 2015-11-17 14.29.38" width="626" height="464" /></p>
<p>facebookはどんどん仕様が新しくなっていきますね！</p>
<h2>バージョンの注意</h2>
<p>今までのいいねボタンですと、そのうち使えなくなってしまうので注意が必要です！</p>
<p>facebookのバージョン管理のルールでは、<br />
バージョンが次のバージョンが出てから2年後に期限が切れてしまうようです。</p>
<blockquote><p>2014年4月30日にAPIバージョン2.0がリリースされ、2014年5月30日にAPIバージョン2.1がリリースされる場合、v2.1のリリースから2年後の2016年5月30日にv2.0の期限が切れます。</p></blockquote>
<p>詳しくは下記URLで。<br />
<a href="https://developers.facebook.com/docs/apps/versions?locale=ja_JP" target="_blank">Facebook Platform Versioning &#8211; App Development</a></p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-8463" src="/uploads-archive/2015/11/0957865e9e0ce58822f517120483a768.png" alt="スクリーンショット 2015-11-17 14.38.50" width="633" height="231" /></p>
<p>やっかいなことにバージョンは勝手に判断してもらえるものではなく、指定していないとダメらしく、<br />
バージョン指定がないと、ver1と判断されてしまいます(たぶん。。。)</p>
<p>なのでまだ今のままのいいねボタンがいいという人は、取り急ぎバージョン指定をすることをお薦めします！！</p>
<p>弊社サイトで仕様していたコードを以下に貼ります。<br />
hrefのところはwordpressのタグのままなので任意のものに変更してください。</p>
<p>以前の場合、</p>

		<div id="crayon-649540158d554162522802" 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;iframe src="http://www.facebook.com/plugins/like.php?href=&lt;?php the_permalink(); ?&gt;&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;height=21&amp;amp;width=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:105px;" allowtransparency="true"&gt;&lt;/iframe&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-649540158d554162522802-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-649540158d554162522802-1"><span class="crayon-r ">&lt;iframe </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"http://www.facebook.com/plugins/like.php?href=<span class="crayon-ta">&lt;?php</span><span class="crayon-h"> </span><span class="crayon-e">the_permalink</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-ta">?&gt;</span>&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;height=21&amp;amp;width=90"</span><span class="crayon-h"> </span><span class="crayon-e ">scrolling</span>=<span class="crayon-s ">"no"</span><span class="crayon-h"> </span><span class="crayon-e ">frameborder</span>=<span class="crayon-s ">"0"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"border:none; overflow:hidden; height:21px; width:105px;"</span><span class="crayon-h"> </span><span class="crayon-e ">allowtransparency</span>=<span class="crayon-s ">"true"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/iframe&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>バージョンを記入した場合、</p>

		<div id="crayon-649540158d559904714560" 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;iframe src="http://www.facebook.com/v2.0/plugins/like.php?href=&lt;?php the_permalink(); ?&gt;&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;height=21&amp;amp;width=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:105px;" allowtransparency="true"&gt;&lt;/iframe&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-649540158d559904714560-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-649540158d559904714560-1"><span class="crayon-r ">&lt;iframe </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"http://www.facebook.com/v2.0/plugins/like.php?href=<span class="crayon-ta">&lt;?php</span><span class="crayon-h"> </span><span class="crayon-e">the_permalink</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-ta">?&gt;</span>&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;height=21&amp;amp;width=90"</span><span class="crayon-h"> </span><span class="crayon-e ">scrolling</span>=<span class="crayon-s ">"no"</span><span class="crayon-h"> </span><span class="crayon-e ">frameborder</span>=<span class="crayon-s ">"0"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"border:none; overflow:hidden; height:21px; width:105px;"</span><span class="crayon-h"> </span><span class="crayon-e ">allowtransparency</span>=<span class="crayon-s ">"true"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/iframe&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ちなみに、弊社のサイトでは最新のコードを貼り付けているので、ぜひ押してみてください！<br />
(とはいえ、「確認」という表示に変わるかと思いますが・・・)</p>

facebookのいいねボタンの挙動が変わった(version2.5)

<p>私の場合、CSSの色の指定はほとんどの場合&#8221;#f6f6f6&#8243;のような16進数による指定を行っています。</p>
<p>jQueryでも、cssやanimateで色の指定をする場合、16進数により指定しています。</p>
<p>また、IllustratorでSVGを書き出した場合、fillやstrokeのような色の指定は16進数により行われています。</p>
<p>&nbsp;</p>
<p>通常はこのことになんの問題もないのですが、</p>
<p>アニメーションをjQueryで実装する場合に、色の計算を直接しなくてはならない場合、</p>
<p>16進数の指定のままでは扱いにくいため、rgb形式に変換する必要があります。</p>
<p>&nbsp;</p>
<p>最新のブラウザの多くでは、</p>
<p>インラインSVG内の要素のアニメーションの手段としてCSS3のtransitionやanimationを使うことができます。</p>
<p>しかしながらIEでは、SVG内の要素にCSSでアニメーションの指定をしても、動作させることができません。</p>
<p>そのため、jQueryなどを使い、</p>
<p>色の計算を直接行うことで、SVGのアニメーションを実装しなくてはならない場合があります。</p>
<p>&nbsp;</p>
<p>そんなときに役立つのが、</p>
<p>rgbcolor.jsというJavaScriptのプラグインです。</p>
<p>&nbsp;</p>
<p>↓公式サイト</p>
<p><a class="link" href="http://www.phpied.com/rgb-color-parser-in-javascript/" target="_blank">RGB color parser in JavaScript / Stoyan&#8217;s phpied.com</a></p>
<p>&nbsp;</p>
<p>使い方は↓こちらのサイトでわかりやすい説明をされています。</p>
<p><a class="link" href="http://mementoo.info/archives/1792" target="_blank">【javascript】RGB⇔カラーコード変換ライブラリ</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>こちらを使えば、</p>

		<div id="crayon-649540158d340532991159" 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;">
var color = new RGBColor("#DFB73A");</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-649540158d340532991159-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-649540158d340532991159-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">color</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">RGBColor</span><span class="crayon-sy">(</span><span class="crayon-s">"#DFB73A"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>や</p>

		<div id="crayon-649540158d344852701717" 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;">
var color = new RGBColor("rgb(255, 0, 255)");</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-649540158d344852701717-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-649540158d344852701717-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">color</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">RGBColor</span><span class="crayon-sy">(</span><span class="crayon-s">"rgb(255, 0, 255)"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のように色を任意の形式で指定することで、</p>

		<div id="crayon-649540158d346535510359" 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;">
var red = color.r; //rgbの赤色を取得
var green = color.g; //rgbの緑色を取得
var blue = color.b; //rgbの青色を取得
var rgb = color.toRGB(); //rgb形式に変換
var hex = color.toHex(); //16進数形式で取得</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-649540158d346535510359-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158d346535510359-2">2</div><div class="crayon-num" data-line="crayon-649540158d346535510359-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158d346535510359-4">4</div><div class="crayon-num" data-line="crayon-649540158d346535510359-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-649540158d346535510359-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">red</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">.</span><span class="crayon-i">r</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//rgbの赤色を取得</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158d346535510359-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">green</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">.</span><span class="crayon-i">g</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//rgbの緑色を取得</span></div><div class="crayon-line" id="crayon-649540158d346535510359-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">blue</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">.</span><span class="crayon-i">b</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//rgbの青色を取得</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158d346535510359-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">rgb</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">.</span><span class="crayon-e">toRGB</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//rgb形式に変換</span></div><div class="crayon-line" id="crayon-649540158d346535510359-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">hex</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">.</span><span class="crayon-e">toHex</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//16進数形式で取得</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>上記のように柔軟に色の情報を変換・取得することができます。</p>
<p>&nbsp;</p>
<p>↓こちらはそれを応用してSVGのアニメーションを実装してみたDEMOです。</p>
<p><a class="demo" href="/demo/ninomiya/89/">DEMO</a></p>
<p>&nbsp;</p>
<p>用途は幅広いと思いますので、是非ご利用下さい。</p>

rgbcolor.jsで16進数⇔rgb()の色の変換を簡単にできる

<p>完全に自分のためなのだが、データをカラム数を指定してテーブルにしてくれるツールを作った。</p>
<p><a class="demo" href="/demo/hoshino/60/" target="_blank">デモ</a></p>
<p>&nbsp;</p>
<p>ライティングをしていてとりあえずリスト化したあとに</p>
<p>ワイヤーなどにするとき表組みしたい時がしばしばある。</p>
<p>HTMLはそのまま使えるし、プレビューをコピーすればExcelに貼り付けることもできるようになっている。</p>
<p>&nbsp;</p>
<p>例えばLaunchCartの機能一覧をメモして5カラムの表にすると</p>
<div style="height: 200px; overflow: scroll;">リッチテキストエディタ<br />
拡張フィールド<br />
SKU<br />
レビュー<br />
多階層カテゴリ<br />
お気に入り<br />
CSV登録<br />
棚卸し<br />
カスタマイズ帳票<br />
カスタマイズ注文CSV<br />
追跡番号<br />
ブログ・ニュース<br />
リソース管理<br />
スマホ対応<br />
フューチャーフォン対応<br />
休業日カレンダー<br />
配送指定日時自動計算<br />
売上分析<br />
管理者権限管理<br />
テンプレートエンジン<br />
非会員購入<br />
分割・リボ払い<br />
電話注文<br />
ギフト<br />
オプション商品<br />
同梱・別送<br />
複数配送先<br />
送料設定<br />
お届け先管理<br />
倉庫連携<br />
ポイント管理<br />
アンケート<br />
メルマガ<br />
コンバージョンタグ<br />
アフィリエイトタグ<br />
クーポンコード発行<br />
シリアルコード発行<br />
カスタム検索<br />
会員ランク<br />
メールテンプレート<br />
インポート・エクスポート<br />
決済手数料<br />
会員登録情報追加<br />
決済金額指定<br />
注文編集<br />
注文ステータス管理</div>
<p style="text-align: center; font-size: 2em;">↓</p>
<table>
<tbody>
<tr>
<td>リッチテキストエディタ</td>
<td>拡張フィールド</td>
<td>SKU</td>
<td>レビュー</td>
<td>多階層カテゴリ</td>
</tr>
<tr>
<td>お気に入り</td>
<td>CSV登録</td>
<td>棚卸し</td>
<td>カスタマイズ帳票</td>
<td>カスタマイズ注文CSV</td>
</tr>
<tr>
<td>追跡番号</td>
<td>ブログ・ニュース</td>
<td>リソース管理</td>
<td>スマホ対応</td>
<td>フューチャーフォン対応</td>
</tr>
<tr>
<td>休業日カレンダー</td>
<td>配送指定日時自動計算</td>
<td>売上分析</td>
<td>管理者権限管理</td>
<td>テンプレートエンジン</td>
</tr>
<tr>
<td>非会員購入</td>
<td>分割・リボ払い</td>
<td>電話注文</td>
<td>ギフト</td>
<td>オプション商品</td>
</tr>
<tr>
<td>同梱・別送</td>
<td>複数配送先</td>
<td>送料設定</td>
<td>お届け先管理</td>
<td>倉庫連携</td>
</tr>
<tr>
<td>ポイント管理</td>
<td>アンケート</td>
<td>メルマガ</td>
<td>コンバージョンタグ</td>
<td>アフィリエイトタグ</td>
</tr>
<tr>
<td>クーポンコード発行</td>
<td>シリアルコード発行</td>
<td>カスタム検索</td>
<td>会員ランク</td>
<td>メールテンプレート</td>
</tr>
<tr>
<td>インポート・エクスポート</td>
<td>決済手数料</td>
<td>会員登録情報追加</td>
<td>決済金額指定</td>
<td>注文編集</td>
</tr>
<tr>
<td>注文ステータス管理</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2016/01/13

2016/01/13

2016/01/12

2016/01/06

2016/01/06

2015/12/16

2015/12/16

2015/12/16

2015/12/09

2015/12/09

2015/12/03

2015/12/03

2015/11/24

2015/11/18

2015/11/18

2015/11/17

2015/11/11

2015/11/06