Check

Tweet

　Amber Smalltalk (以下、Amber)は Web ブラウザから利用出来る Smalltalk 処理系です。Smalltalk でクライアントサイドの Web アプリを作れるのは嬉しい事です。

　Amber そのものについての説明は他のサイト等に譲るとして、今回は Amber の特徴の一つとして JavaScript のオブジェクトメソッドを透過的に評価出来るという点に注目して、Three.js を使うことに挑戦してみました。

Amber を始める

　Web サイトでのデモでは、雰囲気を味わうには十分ですが、変更の保存などが出来ません。実際に開発を進めるためには手元の環境に導入する必要があります。
　といっても、ローカル環境への導入は非常に簡単です。内部で Node.js を利用しているので、インストールしておきます。次に GitHub などから Amber 自体を入手します。ホームページの Download にあるアーカイブを落とした方が簡単です。そうしたら "./bin/server" を実行し、サーバーを起動したらブラウザから "http://localhost:4000/index.html" を叩くだけです。
　これで、変更の保存も出来るようになりました。ちなみに "http://localhost:4000/helios.html" とすると新しい IDE が立ち上がりますが、挙動が違うようですので今回は使わない事にしました。

JavaScript ライブラリとして Three.js を追加する

　Amber ではおなじみの JavaScript ライブラリとしてデフォルトで jQuery が導入されています。それを参考にすれば Three.js も導入出来そうです。
　まずはここから Three.js を入手して "js/lib/Three.js" に移動します。
　次に Three.js を Amber からロード出来るようにしてみます。jQuery がどこからロードされているか調べてみると js/amber.js の loadDependencies でロードされているようなので、同じようにしてみます。追加した内容は次のようになりました。

function loadDependencies() {
  if (typeof jQuery == 'undefined') {
    addJSToLoad('js/lib/jQuery/jquery-1.8.2.min.js');
  }
 
  if ((typeof jQuery == 'undefined') || (typeof jQuery.ui == 'undefined')) {
    addJSToLoad('js/lib/jQuery/jquery-ui-1.8.16.custom.min.js');
  }
 
  if (typeof THREE == 'undefined') {
    addJSToLoad('js/lib/Three.js/three.min.js');
  }
}

　これでページを再読み込みして、コンソールにはエラーが出ていないことを確認し、THREE オブジェクトが存在することを確認出来れば OK です。

Amber から Three.js オブジェクトが使える事を確認する

　いよいよ Amber から Three.js を使ってみます。
　Workspace で「JavaScript ⇒ Smalltalk」に従って書いてみると次のようになります。

　これを “Print it” や “Inspect it” するとオブジェクト生成されることを確認出来ます。