Three.jsでBoneをあつかう

<p>今回はUnityで作成したゲームをwebGLで書き出して（ビルドして）、ブラウザだけどゲームをプレイできるか挑戦してました。</p>
<p>その前にwebGLとは何ぞやという方の為に簡単に説明させて頂きます。</p>
<blockquote><p><b>WebGL</b> (Web Graphics Library) は、互換性がある Web ブラウザでプラグインを使用せずにインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API</p></blockquote>
<p>つまり、プレイするためのアプリやプレイヤーをインストールせず、ブラウザだけでゲーム等のグラフィックスを表示しプレイできてしまうという事です。上記にあるようにブラウザ上でグラフィックスを動かすためにJavaScriptが使われます。</p>
<h2>webGLが本格的に始動</h2>
<p>以前まではunityのbuild setteing からwebGLを選択する際に「webGL(プレビュー)」とありましたが、バージョン5以降になって、このプレビューが外れています。webGLに関する最近の記事を色々と検索してみたところ、どうやら本格的に利用できる状態になってきているみたいです。</p>
<p>ちなみにブラウザのサポート状況は以下の通り。</p>
<blockquote><p>■PC<br />
・Google Chrome 8 (8は要設定、9から標準で有効)<br />
・Internet Explorer 11<br />
・Mozilla Firefox 4<br />
・Opera 12[3] (12は要設定、15から標準で有効)<br />
・Safari 5.1 (5.1は要設定、8から標準で有効)</p>
<p>■モバイル<br />
・Android ブラウザ &#8211; Android 5.0 以降<br />
・BlackBerry 10<br />
・Firefox for Mobile (Maemoは1.0から, Androidは4から)<br />
・Google Chrome for Android 25 (※注意事項あり)<br />
・Internet Explorer Mobile 11<br />
・Opera Mobile 12 (Android のみ)<br />
・Safari 8 &#8211; iOS 8 以降。5〜7 は iAd の広告のみ対応。<br />
・Tizen 1.0</p>
<p>参照：wikipedia webGL</p></blockquote>
<h2>さっそくwebGLでビルドしてみる</h2>
<p>ビルドするゲームはterrainでフィールドと地形を作って、その上にキャラクターのプレハブからThird Personを置いただけのシーンを作成しました。</p>
<p>こんな感じです。</p>
<p><a href="/uploads-archive/2016/05/1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10765" src="/uploads-archive/2016/05/1.jpg" alt="1" width="640" height="405" srcset="/uploads-archive/2016/05/1.jpg 640w, /uploads-archive/2016/05/1-300x190.jpg 300w, /uploads-archive/2016/05/1-228x144.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>build setting でwebGLを選択してビルド開始</p>
<p><a href="/uploads-archive/2016/05/3-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10767" src="/uploads-archive/2016/05/3-1.jpg" alt="3" width="640" height="605" srcset="/uploads-archive/2016/05/3-1.jpg 640w, /uploads-archive/2016/05/3-1-300x284.jpg 300w, /uploads-archive/2016/05/3-1-228x216.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>この時に、webGLをビルドするためのモジュールをインストールしていない場合は「No <a class="keyword" href="http://d.hatena.ne.jp/keyword/WebGL">WebGL</a> module loaded」と出てくるので、unityのインストーラーでモジュールを追加して下さい。</p>
<p>案の定、私も最初にインストールする際にチェックを外していたのでwebGLのモジュールが入っていませんでした。</p>
<p><a class="demo" href="/demo/makabe/12/index.html">demo</a></p>


unityで作ったゲームをwebGLでビルドしてみる

nino-eye (1).jpg

Canvasで波のアニメーションを描画する

<p>クーポンコードの読み込みなど、<br />
WEBページの中からQRコードの読み取りを行いたい機会があるかもしれません。</p>
<p><a class="link" href="http://d.hatena.ne.jp/nakamura001/20141204/1417701203" target="_blank">Web上で QR コードを読むページ(QRコードリーダー)を作成しました &#8211; 強火で進め</a></p>
<p>↑こちらのサイトで、その方法についてご紹介いただいてましたので、<br />
紹介いたします。</p>
<p>&nbsp;</p>
<p>↓試しに作ってみたDEMO</p>
<p><a class="demo" href="/demo/ninomiya/103/">DEMO</a></p>
<p>JSのコードは、ほとんど紹介されていたサイトからお借りしています。</p>
<h2>仕組み</h2>
<p>大きく、以下の様な手順でQRコードの読み取りが進められています。</p>
<ol>
<li><a href="https://github.com/LazarSoft/jsqrcode">QRコード読み取りのJSライブラリ</a>と、<a href="http://d.hatena.ne.jp/shinichitomita/20120927/1348726674">iOSでのバグ回避のJS</a>を読み込み</li>
<li>ファイルフォームから画像の読み込み</li>
<li>フォームに読み込んだ画像をCanvasに表示して２値化(白黒に)</li>
<li>QRコード読み取りライブラリのAPIを利用してコードを解析し、結果を表示する</li>
</ol>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>大まかには、ファイルAPIとCanvasの連携で画像を読み込み・処理し、<br />
ライブラリで解析することで、コード内容の取得を実現しています。</p>
<p>具体的なコードの解説は、元のサイトの仕組みをそのまま利用させていただいているので、<br />
こちらでは省略させていただきます。</p>
<p>カメラからの読み取りの場合、<br />
QRコード以外の像が写り込んでいると、うまく解析できないようです。</p>
<p>どちらかと言えば、印刷物のQRコードの読み取り向けかもしれません。</p>


nino-eye.png

WEBページからQRコードを読み取る方法のご紹介

pushState() + AJaxでスムーズなコンテンツの遷移

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

<h2>HTMLでプレゼンテーションスライドを</h2>
<p>見慣れた方にとっては今更感が強いかもしれませんが、<br />
HTMLでプレゼンテーションのスライドが作成できるJavaScriptのライブラリーを使用してみたく記事にしてみました。</p>
<p><a class="demo" href="/demo/mizutani/03/reveal.js/index.html" target="_blank">デモ</a></p>
<p>使い方はデモに書きました。</p>
<h2>感想</h2>
<ul>
<li>ソフトウェアを使用するより早く作れた気がします。基本的に一つのソースをいじるだけなので、いろんなところをクリックしたりする必要がないのがいいですね。</li>
<li>ソースコードを使ったスライドを作りたいときは良いかもしれません。</li>
</ul>
<h2>参照</h2>
<ul>
<li><a href="http://lab.hakim.se/reveal-js/">reveal.js</a></li>
</ul>


HTMLでスライドを作る　reveal.jsを使ってみた

Canvasの複数の図形をprototypeで同時に扱う

Illustratorで書きだしたSVGの要素をCanvasでの記述に置き換えてみよう

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

nino-eye (2).jpg

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

<p>LaTeXという数式等を綺麗に記述してくれる組版システムがあるのですが、それをHTML内で使用できないのかと思い調べたところ、MathJaxというJavaScriptのライブラリがあったので紹介致します。</p>
<h2>使い方</h2>
<p>使い方はとても簡単で、下記のスクリプトをヘッダーに記載するだけで、HTML内でLaTeXの数式記述が可能になります。</p>

		<div id="crayon-649540158dd84417733683" 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">MathJax使用方法</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/x-mathjax-config"&gt;
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\$','\$']]}});
&lt;/script&gt;
&lt;script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"&gt;
&lt;/script&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-649540158dd84417733683-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158dd84417733683-2">2</div><div class="crayon-num" data-line="crayon-649540158dd84417733683-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158dd84417733683-4">4</div><div class="crayon-num" data-line="crayon-649540158dd84417733683-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158dd84417733683-6">6</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-649540158dd84417733683-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/x-mathjax-config"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158dd84417733683-2"><span class="crayon-i">MathJax</span><span class="crayon-sy">.</span><span class="crayon-i">Hub</span><span class="crayon-sy">.</span><span class="crayon-e">Config</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">tex2jax</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-i">inlineMath</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">[</span><span class="crayon-s">'$'</span><span class="crayon-sy">,</span><span class="crayon-s">'$'</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">'\$'</span><span class="crayon-sy">,</span><span class="crayon-s">'\$'</span><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><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158dd84417733683-3"><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158dd84417733683-4"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span></div><div class="crayon-line" id="crayon-649540158dd84417733683-5"><span class="crayon-e ">src</span>=<span class="crayon-s">"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158dd84417733683-6"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2>デモ</h2>
<p><a class="demo" href="/demo/mizutani/01/">デモ</a></p>
<h2>補足</h2>
<p>MathJax以外にも、jsLaTeXというjQueryを使用し、数式の画像を生成してくれるものも存在するようです。</p>
<h2>参考</h2>
<p><a href="https://www.mathjax.org/">MathJax</a><br />
<a href="http://blog.dreasgrech.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html">jsLaTeX</a></p>

MathJaxを利用して数式をページ内に記述する

nino-eye1 (1).jpg

JavaScriptでCSSを操作する方法

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

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #javascript

2016/07/06

2016/05/25

2016/05/23

2016/05/18

2016/04/27

2016/02/24

2016/02/03

2016/01/26

2016/01/20

2016/01/13

2016/01/06

2015/12/03

2015/11/25

2015/11/18

2015/11/11

2015/10/28

2015/10/20

2015/09/30