1. Ralph E. Johnson, Documenting Frameworks using Patterns OOPSLA ’92 2006 年 1 月 26 日 発表者 : 佐藤匡剛 [email_address]

8. パターンの具体例 ～ 描画ツールフレームワーク HotDraw のパターン ～ パターン 4 ： Complex Figures 図形には、視覚表現とともに内部構造をもつものがある。例えば、別の図形として表示されるような属性をもつものなどだ。こうした図形を、単純な図形の組み合わせで作成できるようにしたい。 PERT イベントのような複雑な図形は、より単純な図形から構成されていると考えられる。例えば、 PERT イベントは長方形に、タイトル、期間、終了日の文字図形が組み合わせられたものだ。 PERT イベントのような複雑な図形（ complex figures ）は、 CompositeFigure のサブクラスとする。（つづく）

9. CompositeFigure は、他の図形を構成要素としてもつような図形で、それらを描画することで、自身を描画する。この図形は、構成要素の境界領域とは独立に自らの境界領域をもち、その中に含まれる構成要素だけを描画する。選択ツールとテキストツールによって構成要素を操作するには、左の Shift キーを押す。必要ならば、構成要素を直接操作する独自ツールを作ってもよい。 ... （以降省略） 複雑な図形は CompositeFigure のサブクラスとし、その一側面を表示する図形をその構成要素とする。 構成要素間に制約条件を課したいときは、 Constraints (5) を参照せよ。

21. 付録 : HotDraw の文書化 （論文図3より）

22. パターンの全体構造

23. パターン 1: Semantic Graphic Editors HotDraw は構造化された描画エディタのためのフレークワークである。回路図や見取り図、楽譜、プログラム設計図といった、専門的な二次元の図を描くためのエディタを構築するのに使うことができる。図の要素間には制約をつけることができ、ユーザのコマンドに応答することができる。また、アニメーションを走らせることもできる。エディタは一個のアプリケーションでもよいし、大きなシステムに組み込むこともできる。 [... 詳細な説明 ...] HotDraw を使って描画エディタを設計するには、まず図を構成する最小要素を列挙せよ。各要素は、 Figure のサブクラスとなる。図がアニメーションをする必要があるかを決めよ。パレットに載せるツールを列挙し、 DrawingEditor のサブクラスに tools メソッドを定義せよ。 tools メソッドは、パレットを構成するツールの配列を返すようにする。 Figure のサブクラスを作るには、 Defining drawing elements (2) を見よ。図をアニメーションさせるには、 Animating drawings (9) を見よ。描画エディタを大きなツールに組み込むには、 Embedding a drawing in another tool (7) を見よ。ツールをパレットに載せるには、 Tools (8) を見よ。

24. パターン 2: Defining Drawing Elements 図に含められる基本図形には、無限の種類が考えられる。そのため、アプリケーションごとに新しい図形を作成できる仕組みが必要である。 [... 詳細な説明 ...] HotDraw アプリケーションの描画要素はすべて Figure のサブクラスであり、 displayOn: 、 origin 、 extent 、 translateBy: を実装しなければならない。そのほか、 Figure のサブクラスはアプリケーションの必要に応じて好きなメソッドを実装できる。 displayOn: を記述するには、 [ParcPlace 90] を見よ。ユーザが図形のサイズや色を変更できるようにするには、 Changing drawing element attributes (3) を見よ。 PERT イベントのような複雑な図形の実装方法を知るには、 Complex Figures (4) を見よ。異なる図形間に制約条件を課すには、 Constraints (5) を見よ。

25. パターン 3: Changing drawing element attributes 図形の属性を編集するには、少なくとも 3 つの方法がある。ハンドルによる方法、ポップアップメニューによる方法、特定のツールによる方法である。どの方法が適切かは、ケースに応じて変わる。 [... 詳細な説明 ...] 編集したい描画要素の属性を列挙せよ。各属性について、ハンドル、メニュー、ツールのどれを使って編集するかを決めよ。そして、 handles メソッド、 menu メソッド、または描画エディタのツール一覧を更新せよ。 新しい種類のハンドルを作るには、 Handles (6) を見よ。新しい種類のツールを作るには、 Tools (8) を見よ。

26. パターン4: Complex Figures 図形には、視覚表現とともに内部構造をもつものがある。例えば、別の図形として表示されるような属性をもつものなどだ。こうした図形を、単純な図形の組み合わせで作成できるようにしたい。 [... 詳細な説明 ...] 複雑な図形は CompositeFigure のサブクラスとし、その一側面を表示する図形をその構成要素とする。 構成要素間に制約条件を課したいときは、 Constraints (5) を参照せよ。

27. パターン5: Constraints ある図形の属性が、別の図形の属性に作用することがある。たとえば、図 1 （論文）の PERT チャートエディタの中で、イベントの開始日は、それに先行する（つまり接続している）全イベントの終了日の最大値として与えられる。別の例では、イベント間を繋ぐ線の終端点は、そのイベントの位置に依存する。ハンドルも、それが取り付けられている図形に依存している。 [... 詳細な説明 ...] 描画の中にある制約は、すべて制約オブジェクトとして表現する。 図形間に線を繋いだときに自動的に制約が付与されるようにするには、 Adding Lines (10) を見よ。

28. パターン 6: Making new kinds of handles ハンドルによって振舞は変わる。図形のサイズを変更するハンドルもあれば、色を変更するハンドルもあるし、新しい線を生成するハンドルもある。一般的に、あらゆる操作をハンドルを使って実行することができるだろう。さらに、ハンドルは図形の好きな部分に取り付けることができ、図形が動くと一緒に動く。こうしたことから、ハンドルはなんらかの形でパラメータ化されなくてはならない。 [... 詳細な説明 ...] ドラッグによってひとつの図形の一面だけを変更するハンドラは、 TrackHandle インスタンスとする。ドラッグによって複数選択された図形の一面を変更するハンドラは、 SelectionTrackHandle インスタンスとする。ある図形から別の図形へ伸びる線を生成するハンドラは、 ConnectionHandle インスタンスとする。それ以外の機能を実現するハンドルを作るには、 Handle のサブクラスを作成する。 ConnectionHandle を生成するには、 Adding lines (10) を見よ。

29. パターン 7: Embedding a drawing in another program テキスト窓やボタン、リストなどを含んだ複雑なユーザインタフェースの中に、描画が組み込まれることがある。 HotDraw は Smalltalk-80 の MVC フレームワークの上に構築されており、複雑なアプリケーションの中に組み込めるようになっていなくてはならない。 [... 詳細な説明 ...] 複雑なアプリケーションの描画部分を構築するには、 DrawingView をアプリケーションビューの部分ビューとし、 DrawingView に対しては、 DrawingEditor のプロトコルに応答するモデルを渡せ。 DrawingEditor のプロトコルとは、 currentTool 、 menu 、 drawing 、 drawing: メソッドを実装することをさす。

30. パターン8: Tools ツールとは、描画に対するユーザインタフェースのモードのことを表す。パレットからツールを選ぶことで、ユーザは図形を操作したり、新しい図形を作ったり、一図形や全体に対してなんらかの操作を実行したりできる。パレットにどういったツールのセットを載せるかを設計するのが、 HotDraw ベースのエディタを設計する際の重要な仕事のひとつである。 [... 詳細な説明 ...] DrawingEditor の tools メソッドがパレットに載せるツールを定義する。このメソッドは、順序付けられたツールのコレクションを返す。ツールは、 Tool のサブクラスのインスタンスである。

31. パターン9: Animating drawings 制約、ハンドル、ツールでは、描画をユーザに対して反応させることができるが、描画そのものに生命を与えることはできない。アニメーションを行なうには、描画内のすべての図形を指揮する制御オブジェクトが必要になる。 [... 詳細な説明 ...] 描画にアニメーションを行なわせるには、描画を表すサブクラスに step メソッドを定義せよ。このメソッドは、アニメーションの次のステップを実行するものである。

32. パターン10: Adding lines 図形を接続するときに、よく線が使われる。こうした接続には、たとえば他のアクションの副産物として生成された線など、なんのセマンティクスももたないものもある。この場合は、線を削除したり移動させたりしても、他の図形に影響を与えることはない。その一方で、線を加える結果として新たな制約が発生したり、新たな図形が生成されることもある。 [... 詳細な説明 ...] 線を生成して図形を接続するには、ユーザは一方の図形の ConnectionHandle を押さえるようにする。 ConnectionHandle をパラメータ化することで、 2 つの図形を繋いだときに他のアクションも実行させられるようにする。こうすることで、制約を付加したり、接続が許されるかをテストしたりできるようになる。