libro
www.tuyano.com
JavaScript/Ajaxライブラリ入門

Processing.jsによるHTML5 Canvasグラフィック (1/5)

作成:2010-04-26 16:15
更新:2010-12-12 21:06

■Procesing.jsを使ってみる

Processing.jsは、HTML5に用意されている<Canvas>タグを利用したグラフィックの描画を行うためのライブラリです。作っているのは、jQueryの作者でもあるJohn Resigさんです。

HTML5の機能というと、「まだ普通のブラウザじゃ使えないのでは？」と思うかも知れません。が、それは違います。HTML5の機能は、部分的にですが既に多くのブラウザで実装されつつあります。特に、グラフィックを利用するための<Canvas>タグは、Firefox、Chrome、Safariといった主なブラウザの最新版で既に実装済みなのです。――え、IE？　だから、「主なブラウザでは」ですってば。マイナーなブラウザでは、まだ未対応なんですよ。そのへんは理解してくださいね。

さて、このライブラリは以下のサイトにて配布されています。

http://processingjs.org/

このサイトからスクリプトをダウンロードし、配置して利用します。これを書いている2010年12月現在、Processing-1.0.0-min.jsというものが最新版としてアップされていますので、これを利用して説明を行います。

このファイルをダウンロードし、使用したいWebページのHTMLファイルと同じ場所にコピーしましょう。そして、以下のようなタグを用意してライブラリをロードします。
<script type="text/javascript" src="processing-1.0.0.min.js"></script>
これでProcessing.jsは使える状態になります。実に単純ですね！　ただし、これだけではまだ実際にグラフィックを描画することはできません。他にも準備をしておくことがあります。

Processing.jsは、基本的に「表示するHTMLファイル」と「実行するスクリプトファイル」の２つのファイルから構成されます。ですから、この２つのファイルを用意しておく必要があります。

またProcessing.jsでの表示は、HTML5より新たに使えるようになった<canvas>タグを使いますので、HTMLにこの<canvas>タグを用意する必要があります。これは、
<canvas data-src="スクリプトファイル"></canvas>
このような形で用意します。data-srcという属性に、スクリプトファイルを指定すると、それを読み込んでこの<canvas>タグに描画を行うようになっているのです。

例として、簡単な描画のサンプルを下に掲載しておきます。ここでは、sample.pjsというスクリプトファイルをHTMLファイルと同じ場所に作成し、そこに実行する処理を記述してあります。Processing.jsのスクリプトファイルは、このように「.pjs」という拡張子で保存します。

ここで実行しているのは、Processingのスクリプトです。――実をいえば、このProcessingというのは、「JavaScriptでグラフィックを描く」ライブラリ、ではありません。これは、JavaScriptで書かれた「グラフィックを描くための、Processingという言語」なのです。

Processingは、「http://www.processing.org/」というサイトで公開されている、イメージを描画したりアニメーションをするための専用プログラミング言語です。これを、HTML5のCanvasを利用し、JavaScriptを使って実装したのが、Processing.jsというわけです。

つまり、ここで実行したのは、「Processingという言語で書いた処理」だったのです。まぁ、Processingというのは基本的にJavaScriptにかなり近いものですので、「JavaScriptで、ちょっとだけProcessingの書き方に注意して書く」というぐらいに考えておけば大丈夫でしょう。そんなに「独自の言語」ということを意識しなくとも使いこなせるはずですよ。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※HTMLファイルのソースコード

<!DOCTYPE html>
	<head>
		<meta charset="utf-8" />
		<title>Sample Page</title>
		<script type="text/javascript" src="./processing-1.0.0.min.js"></script>
	</head>
	<body onload="init();">
		<h1>サンプル</h1>
		<canvas data-src="./sample.pjs"></canvas>
	</body>
</html>


※sample.pjsファイルのスクリプト


size(250, 250);
background(50);
strokeWeight(10);
fill(255,127,0);
stroke(0,127,255);
rect(50,50,100,100);
fill(255,127,255);
stroke(127,255,127);
ellipse(100,100,50,50);
※関連コンテンツ

「JavaScript/Ajaxライブラリ入門」に戻る