2007-12-25

http://research.sun.com/projects/lively/

Lively Kernel は Web ブラウザ上に Squeak 開発環境のような物を作る試みです。現在 Safari 3.0 (と一応 Firefox) しか対応してませんが、Kernel と言う名前は、根本の部分はコンパクトでどこでも動く物を目指しています。Lively Kernel は、それだけで自己完結的何でも出来るシステムですが、ここでは思いっきり趣旨から離れて、単に javascript から画像表示ライブラリとして使う方法を示します。

Lively Kernel を利用する最低限の XHTML を下に貼ります。

http://research.sun.com/projects/lively/LivelyKernel-SourceCode-0.7.zip を展開したディレクトリの横にこの xhtml を置くと時計が表示されます。
最低限という割りには複雑に見えますが、実際ほとんどスクリプトのロードです。
main.delay() の delay はちょっと待ってから関数を呼ぶ prototype.js の関数ですが、普通に main() とやっても一応動きます。
Lively Kernel はグローバル変数 Canvas (id="canvas" の svg) をキャンバスとみなします。複数のキャンバスを画面に表示出来るかも知れませんがまだやってません。

http://languagegame.org/tmp/jstile/exp/lively.xhtml (実行例)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html debug="true" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Minimal Lively Kernel</title>
  </head>

<body topmargin="0" leftmargin="0">
  <!-- these scripts need the xhtml context -->
  <script src="LivelyKernel-SourceCode-0.7/firebug/firebug.js"/>
  <script src="LivelyKernel-SourceCode-0.7/prototype.js"/>  
  <script src="LivelyKernel-SourceCode-0.7/fontinfo.js"/> 

<div>  
<svg id="canvas"
     width="600" height="200" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:lively="http://www.experimentalstuff.com/Lively"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:xhtml="http://www.w3.org/1999/xhtml"
     xmlns:D="DAV"
     xml:space="preserve"
     zoomAndPan="disable">

<defs id="Defaults">
<script type="text/ecmascript" xlink:href="LivelyKernel-SourceCode-0.7/defaultconfig.js"/>
<script type="text/ecmascript" xlink:href="LivelyKernel-SourceCode-0.7/Core.js"/>
<script type="text/ecmascript" xlink:href="LivelyKernel-SourceCode-0.7/svgtext-compat.js"/>
<script type="text/ecmascript" xlink:href="LivelyKernel-SourceCode-0.7/Text.js"/>
<script type="text/ecmascript" xlink:href="LivelyKernel-SourceCode-0.7/Network.js"/>
<script type="text/ecmascript" xlink:href="LivelyKernel-SourceCode-0.7/Widgets.js"/>
<script type="text/ecmascript" xlink:href="LivelyKernel-SourceCode-0.7/Storage.js"/>
<script type="text/ecmascript" xlink:href="LivelyKernel-SourceCode-0.7/Tools.js"/>
<script type="text/ecmascript" xlink:href="LivelyKernel-SourceCode-0.7/Examples.js"/>
</defs>

</svg>
</div>
<script>
function main() {
  var world = WorldMorph(Canvas);
  WorldMorph.setCurrent(world);
  world.displayWorldOn(Canvas);

  var widget = ClockMorph(pt(60, 60), 50);
  world.addMorph(widget);
  widget.startSteppingScripts();
}
main.delay(0.05);
</script>

</body>
</html>

感想

SVG を直接触らないで Lively Kernel を使う事の利点は、Squeak の Morphic と同じようにオブジェクトを直に触る事が出来て、さらにそのツール群も Lively Kernel で出来ているという点です。しかし正直この遅さに腰が引けています。初期の Smalltalk もこんな感じだったのかな？作者のダン・インガルスはこの遅さも未来になれば何とかなるという勘を持ってやってるのでしょう。

この実験の目的は、ブラウザ上に実用的な etoys を作るにあたって画像の表示方法を探す事です(DOM ではローテーションが出来ないので)。Lively Kernel はその第一候補ですが、Lively Kernel の開発ツールを使わないのであれば、SVG を直接弄くっても良いかもと思っています。ちなみにアレックスの OMeta のデモでは Canvas を使っています。Canvas と SVG のどっちが良いのかはいまいち良く分かりません。

言語ゲーム

とあるエンジニアが嘘ばかり書く日記

Lively Kernel で遊ぶ

感想