Squeak 4.4 で補完入力を出来るようにする(OCompletion)


 最近の開発環境ではコードの補完入力がされる事が多くなっています。 Smalltalk は長い名前が付けられている事も多いので同じく補完入力が出来ると便利です。そんな時に便利な OCompletion を導入してみましょう。

システムをアップデートする

 Workspace に次のように入力して “DoIt” してシステムをアップデートしておきます。

Utilities updateFromServer

設定クラスをダウンロードする

 まずデスクトップメニューを開き、”open…” を選択すると “open…” メニューが開くので “Monticello Browser” を選択します。
スクリーンショット 2014-01-25 21.05.20

“Monticello Browser” はパッケージ管理システムです。まず、リポジトリを追加します。”+Repository” ボタンを押します。
スクリーンショット 2014-01-25 21.05.41

 リポジトリタイプを聞いてくるので “HTTP” を選択します。
スクリーンショット 2014-01-25 21.06.02

 内容を

MCHttpRepository
	location: 'http://www.squeaksource.com/MetacelloRepository'
	user: 'squeak'
	password: 'squeak'

に書き換えて “Accept” ボタンを押します。
スクリーンショット 2014-01-25 21.06.48

OCompletion を設定する

 追加したリポジトリを選択して “Open” を押します。
スクリーンショット 2014-01-25 21.07.07

 リポジトリが開いたら左側のペインで “ConfigurationOfOCompletion” を探して選択し、右側のペインで一番上の行を選択して “Load” ボタンを押すとダウンロードが始まるので終わるのを待ちます。
スクリーンショット 2014-01-25 21.08.04

 終わったら Workspace から

(ConfigurationOfOCompletion project version: '1.4') load

と入力して “DoIt” するとロードが始まりますので、終わるのを待ちます。

 無事に終了したら Workspace などで入力をすると補完がされるようになっているはずです。上下キーで補完対象を選択し、Tab キーで残りの入力がされるようになっていたり、対になる括弧やクォーテーションが補完されるようになります。

Squeak から OpenGL を利用する


 最近は携帯機器でも 3D グラフィクスが楽しめるようになってきました。そうなるとやはり自分の手でも作ってみたくなる物です。そして出来れば自分の好きな開発環境で使う事が出来ればなお嬉しいものです。ということで、Squeak からでも OpenGL を簡単に扱う事が出来るので方法を紹介したいと思います。なお、環境としてはまっさらな Squeak 4.4 を MacOS X で動かしています。

OpenGL を使えるように拡張する

 実は拡張方法は Squeak 上に情報があります。 “Help” メニューから “Extending the system” を選択します。
Extending the system
 そうすると “How to extend the system” というウィンドウが表示されます。ここには様々なプログラムが書かれているので、(必要に応じて編集するなどして) “Do it” すればシステムを拡張することが出来ます。まずは FFI(Foreign function interface) の拡張を導入します。私は Mac を使っているので、Windows と Unix 向けの記述を削除して、下記のような状態にして “Do it” します。
FFI
 インストールが終わったら続けて OpenGL 拡張を導入します。下記の部分を選択して “Do it” します。
OpenGL
 これで Squeak から、OpenGL が使えるようになります。

サンプルを動かしてみる

 それでは、サンプルを動かして動作を確認してみましょう。 Workspace で 下記のコードを “Do it” してみましょう。

OpenGL example

 下のように赤い四角形が回転する Morph が表示されるはずです(速くて良く分からないかもしれません)。クリックすると終了します。
OpenGL example
 これで、Squeak でも 3D グラフィクスプログラムを楽しむことが出来ます。

Amber Smalltalk で Three.js を利用する


 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.jsloadDependencies でロードされているようなので、同じようにしてみます。追加した内容は次のようになりました。

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」に従って書いてみると次のようになります。
スクリーンショット 2013-11-22 22.09.55
 これを “Print it” や “Inspect it” するとオブジェクト生成されることを確認出来ます。