知に至る病

お勉強したことを忘れないように書き留めています。

はてなブログで Processing.js を実行する方法

Processing.js はブラウザ上で Processing のプログラムを実行できるようにする JavaScript ライブラリです。 このライブラリを利用すれば,はてなブログの記事内に直接 Processing のコードを記述して実行することができます。

はてなブログにスケッチを埋め込んで実行する方法ですが,Markdown モードの場合は公式サイトのチュートリアルにある内容そのままで大丈夫でした。 記事の編集画面で以下のように記述すれば問題なく実行できます。

<script type="text/javascript" src="processing.min.js"></script>
<script type="text/processing" data-processing-target="processing-canvas">

    /* ここにコードを書く */

</script>
<canvas id="processing-canvas"></canvas>

スケッチを公開するなら OpenProcessing などのサイトを利用した方がよい気もしますが, こんなこともできるよということで手順について簡単に説明してみたいと思います。 ここで紹介する方法は,はてなブログに限らず,他のブログサービスを利用する場合や自分で Web ページを作成する場合にも適用できるはずです。

手順の説明

はてなブログで Processing.js を実行したい場合も,一般的な Web ページで実行する場合とまったく変わりません。 以下のような手順で比較的簡単に Processing.js を実行することができます。

  1. processing.min.js を読み込む。
  2. 描画先の canvas 要素を用意する。
  3. Processing のコードを記述する。

processing.min.js を読み込む

まずは Processing.js の本体を用意します。 公式サイトのダウンロードページから processing.min.js の最新版を入手してください。 実際のファイル名は processing-1.0.0.min.js のようにバージョン番号が入ったものになります。

本体の JavaScript ファイルが用意できたら,それを読み込む記述を追加します。 記事の編集画面で script 要素を追加し,src 属性にダウンロードした processing.min.js の URI を指定してください。

<script type="text/javascript" src="processing.min.js"></script>

はてなブログにはファイルをアップロードする機能はありませんので,processing.min.js は自分でホスティングする必要があります。

描画先の canvas 要素を用意する

スケッチの描画先となる canvas 要素を用意します。 この後で追加する script 要素から参照できるように id 属性を指定しておいてください。 例では単純な id をつけていますが,ブログでは 1 ページに複数の記事が表示されることもありますので,絶対に重複しないような工夫をした方がよいと思います。

<canvas id="processing-canvas"></canvas>

後で説明しますが,id をつけずに済ませる方法もあります。 スケッチをたくさん公開する予定ならば,そちらの方が楽かもしれません。

Processing のコードを記述する

Processing のコードを書くための script 要素を追加します。 type 属性を text/processing または application/processing とし,data-processing-target 属性に描画先の canvas 要素の id を指定します。

<script type="text/processing" data-processing-target="processing-canvas">
    /* ここにコードを書く */
</script>

script 要素の type 属性に未知の値が指定されている場合,多くのブラウザは script 要素を無視します。 そのことを利用して script 要素に Processing のコードを直接書けるようにしています。 processing.min.js の中身を覗いてみると,type 属性の値をもとに Processing のコードかどうかを判定して実行していることがわかります。

なお,コードを書く script 要素を canvas 要素の直前に置けば data-processing-target を指定しなくても大丈夫です。 しかし,Markdown モードでは canvas 要素が自動的に p 要素に入れられてしまうため,そのままではうまくいきません。 以下のように script 要素と canvas 要素を div 要素に入れてやることでこの問題を回避できます。

<div>
    <script type="text/processing">
        /* ここにコードを書く */
    </script>
    <canvas></canvas>
</div>

Processing の記事をたくさん投稿するなど,描画先の canvas 要素に一意な id をつけるのが面倒だという場合は,こちらの方法が楽かもしれません。

スケッチファイルを参照する場合

script 要素を使って直接記事にコードを埋め込む以外に,外部のスケッチファイルを参照することもできます。 公式サイトのチュートリアルでは,むしろこちらのほうが推奨されていました。

外部の *.pde ファイル(拡張子は *.pjs を使用する場合もあるようです)を読み込ませたい場合は,canvas 要素の data-processing-sources 属性でファイルを指定します。 この場合は canvas 要素に id 属性をつけなくても構いません。

<canvas data-processing-sources="sample.pde"></canvas>

この方法は環境によっては Same-Origin Policy 違反で実行することができないこともあるようです。 たとえば,Chrome ではローカル環境では実行することができませんでしたし, はてなブログから gist に置いたコードを読み込ませようとしてもエラーとなりました。

ソースコード

おまけとして冒頭のデモで使用したソースコードを掲載します。 ボールが色を変えながら回転するだけの単純なサンプルです。

参考資料