はてなブログでProcessing.jsを実行するテスト

startボタンを押してください。


/*
  Andor Salga
  Spyro
  Processing compliant
*/

int SIZE = 80;

void setup(){
  size(200, 200);
  background(0);
  smooth();
}

void draw(){

  // clear background with alpha
  noStroke();
  fill(0, 3);
  rect(0, 0, width, height);

  noFill();
  stroke(255, 0, 0, 25);
  strokeWeight(3);
  
  translate(width/2.0, height/2.0);
  translate(0.0f, sin(frameCount/20.0) * 30.0);
  rotate(frameCount/100.0);
  translate( 
    cos(frameCount/20.0) * 20.0, 
    sin(frameCount/30.0) * 20.0);
  rect(-SIZE/2, -SIZE/2, SIZE, SIZE);
}

コードはこちらのSpyroを拝借しました。

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

以下ははてな記法モードの場合。WISYSIGの場合は知らない。

まずこんなふうにボタンとcanvasを作る。

<button onclick="start_foobar20111207()">start</button>
<button onclick="stop_foobar20111207()">stop</button>
<canvas id="processing-foobar20111207" style="display:none;"></canvas>

ブログの複数ページを同時に表示することも考えてidをユニークなものにしてある。

次に、スクリプトを追加。一番最初の > と一番最後の < がポイント。これがないと余計な <br> が追加されてしまうため。

><script>
this.start_foobar20111207 = function start(){
  if (!window.Processing){
    var script = document.createElement('script');
    script.src = 'http://processingjs.org/js/processing.min.js';
    script.onload = start;
    document.body.appendChild(script);
    return;
  }
  var canv = document.getElementById('processing-foobar20111207');
  if (canv.style.display == 'none') canv.style.display = 'inline';
  var src = document.getElementById('processing-src-foobar20111207').textContent;
  new Processing(canv, src);
}
this.stop_foobar20111207 = function stop(){
  if (!window.Processing) return;
  var p = Processing.getInstanceById('processing-foobar20111207');
  if (p) p.exit();
}
</script><

Processing.jsは配布元のを使ってるけど、本来なら自分でホストしたほうがいいと思う…しかしgistとかに置くとMIMEタイプがtext/javascriptになってなくて、IEで動かない。どっかいいホスティングないだろうか。processingjs.orgが消滅しちゃったら、このブログに任意のスクリプトを埋めこまれてしまう可能性がある。しかしjsfiddleとかもprocessingjs.orgから直接使ってるんだよなー。

最後に、Processingのソースを書く。ここでも一番最初の > と一番最後の < が重要。

><div id="processing-src-foobar20111207">
>|
そーす
|<
</div><

<!--または-->

><script type="text/processing" id="processing-src-foobar20111207">
そーす
</script><

<!--または-->

><textarea id="processing-src-foobar20111207">
そーす
</textarea><

pre記法でもスーパーpre記法でもいいけど、ちゃんとシンタックスハイライトしてくれる言語は無いみたい。javascriptがけっこう良い感じだけど、各行がspanになって、textContentで取得すると改行が消えてしまうので、一行コメントが使えなくなってしまう。良い方法を模索中。