WDEF チュートリアル

もしまだ、ProcID プロパティの使用方法を説明したこのチュートリアルの第１部に目を通していなかったら、まずはそちらを読んでいただきたい。本稿では、変形ウィンドウの為のカスタム WDEF の使い方を説明する。

第１部で説明したとおり、WDEF とはウィンドウの外観とふるまい（いわゆる「ルック＆フィール」）を定義したコードの集まりである。システムは最初からある程度の WDEF を包有しており、大部分のニーズはこれでまかなえる。これらの WDEF の使用に関しては、第１部で述べた通りである。

我々にとって興味深いのは、WDEF リソースを自らのアプリケーションに組み込み、ウィンドウに変更を加えることができる点である。その為には、まずプロジェクトへのリソースの追加の方法を知る必要がある。もし既に知っていたら、次の章へ読み進んで結構だ。

リソースの追加

第一に、ResEdit を用意してほしい。これは Apple が提供するフリーのツールで、おそらくすでにハードディスクの中に存在するだろう。ResEdit は、少なくとも我々が必要な作業程度だったら、扱いはとても簡単である。（しかし自分が何をやっているのか理解していないと、システム全体を壊しかねないパワフルなツールであることは肝に銘じておくべきだ）

あるいは、代わりに resourcerer を使ってもよい。こちらは製品版のリソースエディタで、こちらを好んで使うプログラマもいる。本稿で行う作業には ResEdit で十分であるが、どちらのエディタを使っても基本的な作業工程は同じである。（スクリーンショットが違うだけである）

次に、実際の WDEF が必要である。普通は ResEdit ファイル（この場合はファイルをダブルクリックするだけでよい）か、サンプルアプリケーションの形で入手できるだろう。ResEdit のすごいところは、アプリケーションをあたかも書類のようにオープンできるところである。つまり、異なるリソースを含む書類として扱えるのだ。

ではまず、"resources" という名前（この名前でないと REALbasic が認識してくれない）の新しいファイルを ResEdit で作成（File メニューから New を選択）する。デスクトップなどの後で見つけやすい場所に保存したら、WDEF リソースをこのリソースファイルにコピーする。コピーした WDEF グループアイコンをダブルクリックすると、右のスクリーンショットのようになるはずだ。後で必要になるので、WDEF の ID 番号（第 1カラムの番号）を覚えておいてほしい。ファイルを保存して ResEdit を終了する。

その次に、プロジェクトファイルにこのリソースファイルをドロップする。テストの為に、デフォルトの空プロジェクト（REALbasic を起動したときのもの）を使う。この作業は書くほどのこともない、私の妹だってできることだ。さぁ、やってみてほしい。

問題なくできただろうか。もし REALbasic がファイルのドロップを受け付けてくれないのなら、おそらくファイル名を間違えていると思われる。正確に "resources" とすること。

ProcID の計算

WDEF を使用する前に、どの ProcID を使うかを決定しておかねばならない。その為に、まずリソース ID（最初の画像で第 1カラムになっている番号）が必要になる。

それから、バリエーション番号が必要である。多くの WDEF は描画できるフレームのバリエーションが複数（最高で 16）あったり、異なる描画方法をもつもの（後で Odo を使って取り上げる）もあるのだ。バリエーションがわからない場合は、まず 0 で試してみてほしい。

ProcID を算出する式は以下のようになる。

例えば、次のようになる。

アップルメニューの「計算機」を使えばいいだろう。

実際に試して見る前に必要な予備知識は以上である。次章では、ネット上で見つけたフリーの WDEF の使い方を解説する。

Mathias Ellert の Round Window WDEF

私はこの WDEF を AMUG の bbs-in-a-box cd-rom シリーズで見つけた。もしシェアウェアを作ったら、AMUG に送ってみると良い。次回の CD-ROM セットを割引で購入できる。私は 4 枚の CD-ROM をわずか 10ドルで購入したが、正価で購入しても決して高くないほど価値があるものだ。

Round WDEF はサンプルアプリケーションとして提供され、異なるバリエーションを確認できる。アップルメニューの「about...」を選択すれば、ある程度情報を得ることもできる。

全てのウィンドウは System 7 形式の外観を持つが、その形状が楕円形である（だから "Round Window WDEF" なんだろう）。この WDEF は WDEF 0（システムデフォルト）で使うことのできる全てのウィンドウスタイルを提供するが、いくつか制限もある。

第一に、当たり前のことだが、リサイズアイコンを持たない。それから zoom box もないし、ウィンドウシェードも出来ない。もちろん、直線でないのだから、ウィンドウの縁には「ジャギー」がみられる。けれども、こうしたことを除けば、System 7 のウィンドウとして扱えるのだ。アピアランスをサポートするバージョンがないのは残念ではあるが。タイトルバーが曲がっているバリエーションがあるため、タイトルはベースラインをずらして描画されるが、小さなウィンドウに長いタイトルを持つ場合に表示がおかしく見えるかもしれない。

ウィンドウの角に描画をすることはできない。表示されないからだ。もっとも、これはこの WDEF の特徴であって不具合の類ではないように思う。つまり、ウィンドウの形状に気を付けるのはプログラマの責任である。おさまらない部分は自動的にカットされる。

利用できる ProcID を下表に示した。

もし自分のアプリケーションでこの WDEF を使用する場合は、作者へのクレジットを表示する必要がある。例えばアバウト画面に "round windows by mathias ellert" と表示する。ライセンスフィーやその他の制限はない。

Ingemar Ragnemalm の ingis WDEF

もし Mac での Pascal プログラミングに関する知識があれば、このフレームワークを使って独自の WDEF 作成を試してみることが可能かもしれない。良くできたドキュメントと、4 つの異なったタイプのサンプル WDEF が付属する。無論、Pascal を知らないのならば、ソースコードを無視して、コンパイル済みの WDEF を使えばよい。

メインのサンプルアプリケーションは MacOS 8 （もしくはアピアランスライブラリをインストールした環境）では（サンプルとして）意味を為さない。"folder tabs" ウィンドウとコンフリクトする為だ。それは単なるムーバブルモーダルダイアログなので、間違えないように。

最初のサンプル WDEF は、簡単な楕円ウィンドウである。ちょうど Round Window WDEF の 'plain box' フレームに似ている。バリエーションはないが、もし本当にこのタイプのウィンドウが必要ならば、Mathias Ellert 氏のものを使うよりも 12Kb の節約ができる。

第二のサンプル（"simple" という名前）は、角が丸く、上部に青くて丸いタイトルバーをもつ。私はこれが好きではないが、もし使いたいなら次の点に注意されたい。このウィンドウスタイルではタイトルを表示できない（タイトルバーは常に空）し、zoom box も grow box も表示できず、ウィンドウシェードも不可能だ。上部に奇妙な青い物体があるだけである。

第三の WDEF はもっと興味深いものである。いくつかのバリエーションがあり、左に示したものはその一つだ。この WDEF のフレームには全てにこの黒い 'dot' があり、これはタイトルバーとして機能する。それから全てに、比較的太い縁と影がある。だが、形状は様々だ。

「タイトルバー」は close box・zoom box・grow box・ウィンドウタイトルを配置するには小さすぎる。けれども、ウィンドウ形状は非常に素晴らしい。ウィンドウ形状の殆どは多角形で、バリエーション番号がその角の数に対応している（最大 15）。

Ingemar Ragnemalm 氏（この WDEF の作者）は、この WDEF はフリーであり、製品ドキュメントにクレジット表記を入れてほしいと記している。もちろん、よろこんでそうすべきである。

Odo WDEF

今まで取り上げた WDEF はとりうる形状に制限があった。もちろん ingis フレームワークをつかって独自の WDEF を作ることは可能だが、少々面倒であることも事実だ。

ここで Odo の登場である。これは star trek: deep space 9 の不定形生物の名前からきていて（John Tsombakos 氏に感謝）、言うなれば WDEF の中の WDEF、WDEF の母、といったところだ。この WDEF を使えば、いかなる形状のものでも作り出せる。

Apple のロゴマークの形のウィンドウだってできるし、陰と陽の二つのウィンドウを作ることだって苦もないことだ（つまり不連続領域で間があいているようなものでも大丈夫）。一つの例として、私は猿の形状のウィンドウを用意した。私はディザー処理された形状のウィンドウを試してもみた。これは数千の 1 × 1 の大きさのピクセルが他の部分とは離れて存在することを意味するが、多くのメモリを要求し、牛のように遅くはあるけれども、ちゃんと動作した。

メモリ要求量が大きいことは別として、Odo のディスアドバンテージだと思える点は、システムアイテムを配置できないことだ。タイトルバー、クローズボタン、resize box、 もその他のものも、全部ない。また、（通常）再描画が遅く、ユーザがどうしたらいいか分からなくなるかもしれない。

ユーザ側に、やるべきことを理解してもらうよう気を付けるのはインタフェイスデザイナの仕事であり、そうしたことは REALbasic で直接に実装可能だ。上に示した星形ウィンドウは、あたかも通常のタイトルバーを持っているように見える。実は、タイトルバーは REALbasic の組み込み機能を使って描画しているのだ。close box、zoom box、window shade box に関しても同様である。

しかし、とりあえずはウィンドウの形状自体に注目しよう。用意すべきものは、ウィンドウの外観を定義した画像である。黒い部分がウィンドウの形状をあらわすような、単純な白黒画像を作成してほしい。もしウィンドウをリサイズしたいのならば、ベクトル画像を用意しなければならない。Odo はベクトル画像を適切に扱ってくれる。

読者諸兄は AppleWorks や MacDraw を使ってベクトル PICT を作成可能だ。その例を以下に示す。

訳注：AppleWorks はクラリスワークスのこと。

無論、黒で形状を塗りつぶす必要がある（細線で形取られたウィンドウを作成したい場合にはこの限りではない）。次に、そのピクチャをクリップボードにコピーし、ResEdit で resources ファイルにペーストする。（これに加えて、Odo WDEF をこのリソースファイルに追加しておかねばならないことは言うまでもない）

PICT リソースをダブルクリックすると、次のようなウィンドウが開くはずだ。

ここでリソース名を変更する必要がある。その為には、リソース情報ダイアログを開けばよい。目的のピクチャを選択し、Command + i のショートカットを押すと、次のようなダイアログが表示される。

他のフィールドは無視して、name フィールドに意味のわかりやすい名前を入力するだけでよい。そして、後の必要に備えて、今入力した名前を忘れずに。

ここまで出来たら、リソースファイルをプロジェクトにドロップする。（Odo WDEF をリソースファイルに組み込んであるかどうかを確認すること）

Odo を使うに当たって、以下の 2点を覚えておいてほしい。第一に、バリエーション 0 はREALbasic では動作しないようなので 1 を使わねばならないこと。つまり ProcID は 14577 (911 * 16 + 1) を使うことになる。バリエーション 5 と 9 を使いたいこともあるかもしれないが、私はどうやったらうまく動かせるか分からなかった。

訳注：原文作者の Sascha Leib 氏によるサンプル "Monkey" では、Odo WDEF のリソース ID が 32 になっているため、ProcID は 513 (32 * 16 + 1) になっている。使用の際には、適切な値を計算して下さい。

第二に、ウィンドウタイトルと形状を決定するためのピクチャのリソース名を同一にすること。ResEdit のリソース情報のフィールドに入力したものと同じものを入力するわけだ。

プロジェクトを保存し、Command-R を押して実行してみよう。もし動作しなかったら、ウィンドウタイトルの入力間違いか、ProcID の番号が間違っている筈である。

ウィンドウを開く時に謎のビープ音がなることがあるが、これは Odo が PICT リソースを扱う際に何らかの問題が生じたことを意味する。大概は、複雑すぎるか、あるいはまったくサイズ調整ができなかった場合に生じる。後者はビットマップ画像を使っている時に発生することがあるので、通常はベクトル画像を使うべきである。

ウィンドウをムーバブルにする

先に述べたように、Odo WDEF は close box やタイトルバーといったシステムアイテムをサポートしていない。したがって、そういったものは自分で実装する必要がある。close ボタンは読者各位が自分で実装できることと思う。無論、zoom box もだ。少々テクニックを要するのはウィンドウをムーバブルにすることだと思うので、必要ならば自分で拡張実装できるようなコードを紹介する。

最初に、ウィンドウに次のような 2つのプロパティを追加してほしい。

mouseClickedX as Integer
mouseClickedY as Integer

大きなプロジェクトの場合には、Private 宣言したいかもしれない。Private プロパティが何なのか分からない方は、当面気にしなくて良い。

次に、ウィンドウの MouseDown イベントに以下のコードを追加する。

Function MouseDown(X as Integer, Y as Integer) as Boolean
  self.mouseClickedX = X
  self.mouseClickedY = Y
  return true
End Function

これにより、ウィンドウ内でマウスクリックの生じた位置を保存する。この値は次に示す MouseDrag イベントで必要になる。

Sub MouseDrag(X as Integer, Y as Integer)
  self.left = self.left + X - self.mouseClickedX
  self.top = self.top + Y - self.mouseClickedY
End Sub

プロジェクトを実行すると、スクリーン上をドラッグ出来るようになっている筈だ。破線で囲まれた外形だけが動くのではなく、ウィンドウ全体が動くことに注意してほしい。PPC ベースのマシンならば、快適にできるだろう（PPC Mac の中でも一番遅い部類に入る私の古い Performa 5200 でもちゃんと動いた）。しかし、68k マシンではちょっと疑わしい。

他の方法として、Jakob Bock 氏の Drag Window プラグインを使うという方法もある。このプラグインを使えば、あらゆるウィンドウをドラッグで移動可能にできる。氏のサンプルを参考にしてほしい。http://home8.inet.tele.dk/jakobb/

もちろん、Gregory Lempert-kerr 氏（この WDEF の作者）の素晴らしい作品に感謝して、アプリケーションにはクレジットを入れるのを忘れずに。

その他の WDEF

ResEdit の使い方が分かったので、上に紹介したものとは別の WDEF を試してみたくなるかもしれない。私は様々なアプリケーションやシステム機能拡張から WDEF を取り出して、試してみた。システムクラッシュをもたらしたのはたった一つ（私がもっとも興味を持っていた一つである Apple DVD Player の楕円ウィンドウ）で、他のものでは、動作しないもの、REALbasic をクラッシュさせる（他のアプリケーションは無事）もの、それから、概ねうまく動作したもの、があった。けれども、上で紹介したフリーの WDEF と同じくらい興味深いものもあった。

製品版アプリケーションの WDEF を取り出すことは、たとえそれが個人使用にとどまるものであっても、ライセンスに抵触する可能性があることを含みおくべきである。さらに、それを公開しようとする場合には、なにはさておき著作権者に許可を得るべきである。場合によってはライセンスフィーを払う必要もあるだろう。

いくつかの興味深い WDEF を Church Windows のようなソフトウェアに見ることができる。右の図は 2つのよく知られたウィンドウスタイルを示している。VisualBasic ソフトウェアの移植時にどうだろうか。

おわりに

チュートリアルはこれで終わりである。私は今から泳ぎにでかける（ここフィンランドには素晴らしいビーチがあるのだ!）ので、読者各位が WDEF で作るであろうクールなアプリケーションを見る間がない。そこで、コンペティションを開こうと思う。今年のクリスマスまでに最もクールなインタフェイスデザインをもった作品を当方に送ってくれた人に、自家製フィンランド風 lakka マーマレード（英語では 'cloudberries' と呼ばれていると思う）を進呈する。掛け値なしに美味しいマーマレードなので、私を信じてほしい。仮に読者が南アメリカに住んでいようが、ちゃんと送付することをお約束する。

質問・ご意見・CD-ROM・現金・小切手・美しい女性・Web サーバスペース等がおありなら、あるいはヘルプが必要なら、私にお気軽に連絡してほしい。sascha.leib@tietovalta.fi or sascha.leib@uta.fi