これは RuntimeRevolution 1.1.1 のヘルプにある文書を邦訳したものです。この文書の文責はUDIにあり、またUDIはこの文書についての一切の債務を負いません。 間違いがありましたら eudio@chabashira.co.jp までお知らせ下さい。この文書は必要と思われる時に適宜アップデートされます。

Help -> Tutorials -> The Geometry Manager


1. Before you start
始める前に

 このチュートリアルを始める前に、最初のチュートリアル Getting Started で、Revolution を使ったアプリケーション作成の基本を学んでおきなさい。各ツールの使い方とオブジェクトの作り方、そしてスクリプトの書き方は必須である。

 このチュートリアルを始める前に、前のチュートリアルで使った "Hello World" スタックを開いておきなさい。

 ティップス: 分からない用語があったらマウスポインタを当てなさい。もし用語の色が変われば、それをクリックして用語辞書を見ることが出来る。

 各ステップが終了したら、このウィンドウの右下にある右向き矢印ボタンをクリックして、次のステップに進みなさい。


2. Introducing the Geometry Manager
Geometry Manager とは

 "Hello World" スタックを使う時、スタックウィンドウをリサイズしても、その中身がそれに合わせてリサイズされないことに気が付いただろう。 Revolution は ユーザーがスタックをリサイズした時に自動的に resizeStack メッセージを送って来るので、resizeStack ハンドラの中で全てのオブジェクトの位置やサイズを調整することは出来る。

 しかしもっと良い方法がある。 Revolution の Geometry Manager(ジオメトリーマネージャ)である。 Geometry Manager を使えば、ウィンドウのサイズに合わせて、自動的にオブジェクトのサイズや位置を変更することが出来る。

 このチュートリアルでは Geometry Manager を使って、"My World" グラフィックが自動的にスタックウィンドウに合わせてリサイズし、"Show Me!" ボタン、"Reset" ボタン、"My Field" フィールドが自動的に位置を調整するよう、"Hello World" スタックを作り替える。


3. Setting automatic scaling
自動スケールの設定

 ここでは Geometry Manager を使って、"Hello World" スタックの青い "My World" グラフィックが自動的にリサイズするように設定する。

 まず Browse ツールで "Show Me!" ボタンをクリックして、"My World" グラフィックが見える状態にする。そして Pointer ツールでグラフィクをクリックして選択する。

 グラフィックが選択された状態で Tools メニューから "Geometry Manager" を選ぶ。すると Geometry Manager パレットが開く。次に Scaling タブの上部にある "Scale when stack is resized" チェックボックスをチェックする。これによって選択されているオブジェクトにスケーリングオプションが付けられる。

 デフォルトでは Geometry Manager は、ウィンドウサイズに合わせてオブジェクトをリサイズする。例えばスタックの高さを2倍にすれば、オブジェクトの高さも2倍にリサイズされる。ここではもうちょっとスタックにふさわしい設定に変えてみよう....


4. Changing the scaling options
スケーリングオプションの設定を変える

 まず Geometry Manager の Top メニューから "Don't Move" を選ぶ。これはウィンドウのリサイズに合わせてグラフィックの他の部分が移動しても、Top は現在の位置に維持される、という意味である。

 Right メニューと Left メニューは "Card" にセットする。これでスタックウィンドウがリサイズされた時、グラフィックの Right と Left は自由に動く。デフォルトではグラフィックの端とスタックウィンドウの端はパーセントで管理されている。例えば、ウィンドウの幅が 200 ピクセルで、グラフィックの右端がスタックウィンドウの端から 20 ピクセル(つまり 10% )離れているとしよう。もしスタックの幅を 500 ピクセルにすると、グラフィックの右端はウィンドウの端から 50 ピクセルになる。


 このスタックでは、パーセンテージではなく、ウィンドウの端から一定の距離に保たれるようにセットしたい。さあやってみよう....


5. Pinning the graphic to a window edge
グラフィックをウィンドウの端に留める

 まず "Bottom" メニューで "Card" を選ぶ。或いはその横の Bottom と書かれた文字をクリックするだけでも良い。 Bottom メニューがアクティブになって、Scaling タブの下にあるオプションを使って、グラフィックの Bottom に対する設定が出来る状態になった。

 "Keep Edge" オプションを選択して、その右にあるメニューから "Bottom" を選択する。これでスタックウィンドウがリサイズされた時、グラフィックの Bottom がウィンドウの Bottom にピン留めされる。

 それから "Keep Edge" ボックスに -60 を入力する。(正の数なら下、負の数なら上。つまり -60 は「ウィンドウの端から 60 ピクセル上を維持」という意味になる)

 オプションをひとつセットしたので、スタックウィンドウをリサイズしてその効果を試そう。ウィンドウをリサイズしてみると、"My World" グラフィックもリサイズされる。


6. Automatically positioning a button
ボタンの位置を自動調整する

 スタックウィンドウをリサイズした時、"Show Me!" ボタンや "Reset" ボタンが見えなくなるまでウィンドウを小さく出来てしまうことに気が付いただろう。この状態は、Geometry Manager の Positioning オプションを使って修正することが出来る。

 まず "Show Me!" ボタンを選択する。( Geometry Manager はこのボタンのジオメトリー設定を変更する) このボタンにジオメトリーオプションを設定するために、Positioning タブをクリックして "Move when stack is resized" チェックボックスにチェックを入れる。

 デフォルトでは Geometry Manager は、オブジェクトの位置をウィンドウサイズに合わせて変更する。例えばウィンドウの左右の真ん中にオブジェクトがあった場合、Geometry Manager はウィンドウがリサイズされた時に、そのオブジェクトの位置を真ん中に保つ。この設定を変えてみよう....


7. Changing the positioning options
positioning オプションの設定を変える

 positioning オプションは先ほど使った scaling と良く似ている。まず "Vertical" メニューで "Card" を選択する。或いは単に "Vertical" 文字列をクリックするだけでも良い。これで Vertical メニューがアクティブになり、Positioning タブの下部にあるオプションを使って、ボタンのVertical(垂直位置)の設定をすることが出来る。

 次に "Keep Center" オプションを選択し、その右にあるメニューから "Bottom" を選ぶ。 Geometry Manager は自動的にウィンドウの下端からボタンまでの現在の距離を調べて、それをボックスに書き込む。これでスタックウィンドウの下端からボタンまでの距離が、常に現在と同じに保たれるように設定された。

 ティップス: positioning オプションを設定したあとにボタンを移動してスタックウィンドウをリサイズすると、Geometry Manager によってボタンが先ほどの位置に移動される。


8. Positioning other objects
他のオブジェクトの位置調整

 "Reset" ボタンと "My Field" フィールドにも今と同じ作業をやってみよう。

 まず "Reset" ボタンをクリックして、Positioning タブの "Move when stack is resized" チェックボックスをチェックする。それから "Vertical" ラベルをクリックして Geometry Manager の下の方にある "Keep Center" を選び、その横にあるメニューから "Bottom" を選択する。

 "Reset" ボタンの作業が終わったら "My Field" を選択して同じ事を繰り返す。

 次は、オブジェクトの移動に制限を付ける....


9. Setting constraint options
制限オプション

 これでオブジェクトが自動的に移動(やリサイズ)をするようになった。しかしその結果、テキストを読めなくなるほどオブジェクトが小さくなったり、或いは他のオブジェクトを隠してしまうことがある。 Geometry Manager の constraint(制限)オプションは、移動やリサイズに制限を加えるものである。

 スタックウィンドウの幅を狭くすると、"Reset" ボタンが "Show me!" ボタンの上に被ってしまう。またスタックウィンドウの幅を広げると、ボタン同士が離れてボタンの関係がぼやけてしまう。これを防ぐためにボタン移動に制限を儲けて、ボタンがそれを越えて移動できないようにする。

 まず "Reset" ボタンを選択する。(すると Geometry Manager はこのボタンのジオメトリー設定を表示する) Geometry Manager 上部にある Constraints タブをクリックして、constraint オプションを表示させる。


10. Constraining the button
ボタンの制限

 ボタンの移動を制限するために、下部にある "Positioning constraints" オプションを設定する。 "Min left" ボックスに "100" を入れ、"Max right" に "400" を入れる。

 これはボタンが自動的に移動するときに、ウィンドウの左端から 100 ピクセル以内には入ることが出来ないという設定である。これは "Show me!" ボタンのために空けてある。また "Reset" ボタンの右端はウィンドウの右端から 400 ピクセル以上離れることが出来ない。これは2つのボタンが遠くに離れてしまわないためである。(もしあなたのボタンの幅が普通より広い、或いは狭かったら、これらの数字を調整して使いなさい)

 スタックウィンドウをリサイズしてみて、これらのオプションの効果を見てみよう。これらの制限の働きを理解するために、違う値を入れてテストしてみなさい。


11. Constraining the window size
ウィンドウサイズの制限

 スタックウィンドウをリサイズしていると、オブジェクトが見えなくなるほど小さく出来てしまうことに気が付くだろう。各ウィンドウのリサイズに制限を設けて、これを防ぐことが出来る。

 このオプションは Geometry Manager ではなく、Properties パレットにある。なぜならこれは各オブジェクトのプロパティではなく、スタックウィンドウ自身のプロパティだからである。


12. Setting minimum window sizes
ウィンドウの最小サイズの設定

 まず Object メニューから "Stack Properties" を選択する。これでスタックのプロパティが表示される。

 パレット上部の左側の Stack タブをクリックする。 "Resizing" と書かれたセクションに、スタックの最大/最小高が表示されている。デフォルトでは最小幅と最小高は 32 ピクセルである。ウィンドウを小さく出来なくするために、この数値を大きくする。

 "Min Width" ボックスに "255" を入れ、"Min Height" に 175 を入れる。(或いは好みの数値を入れても良い) スタックウィンドウをリサイズしてみると、小さくしようとした時に制限がかかることに気が付くだろう。


13. Whatユs next?
さて次は?

 このチュートリアルでは Geometry Manager の基本的な機能を紹介した。他のオブジェクトからの距離を保ちつつオブジェクトの位置調整やリサイズを自動的に行わせたり、またフィールドが文字よりも小さくならないよう制限することも出来る。 Geometry Manager のオプションを調べて、あなたのスタックに役立つ機能を見つけよう。

 ティップス: Geometry Manager を使ったスタックからスタンドアローンアプリケーションを作る時は、必ず Revolution のカスタムライブラリを含めなければならない。このライブラリを含めるには、Distribution Builder ウィンドウで Resources タブをクリックして、"Geometry Libraries" チェックボックスにチェックを入れる。

 ウィンドウの下部にある "Tutorials" ボタンをクリックして、チュートリアルのリストに戻りなさい。


邦訳/文責:UDI
2002.11.21
2003.01.10

inserted by FC2 system