WordPressでProcessing.jsを動かす方法について書いてみたいと思います。
Processing.js本家も推してる、PostsやPagesの中でまんまProcessingのコードを書けるPlug-inもあります
が、今回はそういう話ではなくて、普通にpjsファイルを用意してWP内で使う方法。
何はともあれ、WPサイト内でProcessing.jsを動作させるためにprocesing.min.jsファイルをFTPでサーバにアップしてください(http://exsample.com/procesing.min.jsなど、お好きな場所に)。
アップしたら、WPで現在使用してるテーマのheader.phpをEditorで開いて、<head>タグ内に次のように記述します。
<script src="http://exsample.com/procesing.min.js"></script>
これで、WPサイトのどのページでもProcessing.jsを動かすことができるようになります。
さて、今回はサンプルとして四角がくるくる回る単純なSketch(pjsファイル)を用意しました。
ソースコードはこちら。
当然Sketch(pjsファイル)もWPから参照できる場所にFTPしておいてください。
用意したSketch(pjsファイル)をPost/Pages内で動かすのにはHTML5の<canvas>タグを書き込む必要がありますが、現バージョンWordPress 3.1.3では標準サポートされていないようなので、HTML5特有のタグを有効にするPlug-inをインストールする必要があります。
ものすごく単純なPlug-inですが、素晴らしい作品です。このHTML5ifyをインストールするとCanvas以外にもAudioなどの HTML5タグをPosts/Pagesの中で使えるようになります。
ここまで来たらあとは単純で、<canvas>タグでSketch(pjsファイル)を呼び出すだけです。
HTML Sample
<canvas datasrc="http://basicwerk.com/processing/rotateRect.pjs" width="400" height="400"></canvas>
なお、header.phpやsidebar.phpなんかに直接Canvasを埋め込む場合は、上記のPlug-in(nordahl.me/products/HTML5ify/)は必要ありません。
このサイトを例にとると、header.phpに丸が行ったり来たりするProcessing.jsのSketchを埋め込んでいます。
ひとつだけ注意点があるとすれば、<canvas>タグのCSSでZ座標を一つ下げて背景オブジェクトとして描画してあげることでしょうか。
CSS Sample
/* 背景Canvas */
canvas.クラス名 {
position:absolute;
z-index:-1; /* ←この部分で背景に */
width: auto;
height: auto;
}
背景にしたい<canvas>タグに上記のClassを指定してあげれば、マウスクリックでCanvasがアクティブになってしまうのを回避できます。
しかし、その代償として、Sketch内でmousePressed()などのマウスアクションをトリガーとしたイベントが無効になってしまうので併せて注意が必要です。
