Google Wave Gadgetsでprocessing.js、最初の準備

Google Wave Proce55ing

　Google Wave Gadgets*1で、processing.jsを弄れるようにする準備のメモ。


って、いってもGadgetsは基本HTML+javascriptなので何の問題もなく使用出来ます。


　必要なものは

  • Waveアカウント
  • Webサーバ
    • 自前で用意
    • GoogleCodeのSVNを利用*2


　今回は以下のsample.xml及びprocessing.jsをhttp://.googlecode.com/svn/trunk/直下に配置したとして話しています。

こんな感じ＞＜

http://.googlecode.com/svn/trunk/sample.xml
http://.googlecode.com/svn/trunk/processing.js

以下sample.xmlです。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="processing example" width="600" height="600">
    <Require feature="wave" />
  </ModulePrefs>
  <Content type="html"><![CDATA[

<head>
  <title>Processing Sample</title>
  <script type="text/javascript" src="http://<your google code name>.googlecode.com/svn/trunk/processing.js"></script>
  <script type="text/javascript">
// ロードされた時に実行
window.onload = function() {
  // canvas 要素
  var canvas = document.getElementsByTagName('canvas')[0];
  // Processing のソースコード
  var code = "size(400, 400); noStroke(); fill(255, 0, 0, 255 * 0.5); ellipse(200, 150, 200, 200); fill(0, 255, 0, 255 * 0.5); ellipse(250, 250, 200, 200); fill(0, 0, 155, 255 * 0.5); ellipse(150, 250, 200, 200);";
  // Processing 関数を呼び出す
  Processing(canvas, code);
};
  </script>

</head>
 <body>
  <h1>Processing Sample</h1>
  <div>
   <canvas width="400" height="400"></canvas>
  </div>
 <h1>end</h1>
 </body>

]]>
  </Content>
</Module>

コード自体はブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記さんのサンプルそのものです。
で唯一の違いは以下のprocessing.jsのscriptタグでの読み込み部分です。

  <script type="text/javascript" src="http://<your google code name>.googlecode.com/svn/trunk/processing.js"></script>

sample.xmlとprocessing.jsは両方とも、同一階層なんんだから相対パスでもいけるかと思っていましたが、そこはWaveなのか駄目でした＞＜*3




最後にhttp://.googlecode.com/svn/trunk/sample.xmlのURLをWaveのGadgetsに追加してやれば、表示されます。

*1:実質はGoogle Gadgets + WaveAPIなんでGoogle Gadgetsでもいけるでしょうけどね＾＾

*2:http://code.google.com/intl/ja/apis/gadgets/docs/tools.html#Host

*3:おまじないのXML部分でなら相対でも大丈夫かなと想像