Cocoaでいこう！ Macらしく 第3回
Yoshiki(DreamField)
この記事は、MOSAが発行するデベロッパ向けのデジタルマガジンMOSADeN 第62号(2003年4月15日発行)に掲載された記事です。2〜3ヶ月遅れで、ここに掲載して行きます。

今回は前回の続きです。前回の記事を参考にして、Project Builderを起動し、Interface Builderを起動する所まで行って下さい（一度行った環境設定の変更は、再度行う必要はありません。）。

ウィンドウをデザインしよう（後編）

それではさっそくウィンドウに画像を表示する場所を作りましょう。デザインウィンドウを選択して下さい。その上に乗っている、「Youre document contents here」という文字列は必要無いので、削除します。ここでの操作は、一般的なDraw系ソフトといっしょです。マウスで選択した後に、Cutするなり、Deleteするなりしてください。続きまして、パレットウィンドウを選択して、上に並んでいるアイコンから「Other Cocoa Views」をクリックしてください(fig.13)。

ProjectBuilderのアイコン
[fig.13] Other Cocoa Views

表示されたパーツの中で、山の絵が入っている写真の額縁のようなパーツが、イメージを表示できるNSImageViewです(fig.14)。

ProjectBuilderのアイコン
[fig.14] NSImageView

これをデザインウィンドウにドラッグ&ドロップして下さい(fig.15)。

ProjectBuilderのアイコン
[fig.15] NSImageViewをWindowにドラッグ&ドロップ

点線でガイドが表示されますので、左上をそれに合わせると良いでしょう。このガイドに合わせなくてもプログラム上、支障はありませんが、これに合わせておけば自動的にAquaのガイドライン通りの間隔になるので便利です。左上を合わせましたら、今度はNSImageViewの右下をドラッグして、同じようにウィンドウの右下に合わせます(fig.16)。

ProjectBuilderのアイコン
[fig.16] NSImageViewをWindowのサイズに合わせてリサイズ

それでは、ここで簡単な動作確認をしてみましょう。「File」メニューから「Test Interface」を選んで下さい。こうすると、配置したパーツを実際に操作してみることが出来ます。ただし、今回は操作出来るパーツは乗せていませんから、ウィンドウのリサイズを行ってみましょう。ちゃんど動作しましたでしょうか。残念ながら、NSImageViewのサイズが変わらないので、ウィンドウのリサイズについて来ないことが分かります(fig.17)。

ProjectBuilderのアイコン
[fig.17] ウィンドウのリサイズを行ってもNSImageViewのサイズは変わらない

テストを終了して、これを何とかしましょう。テストの終了は、いささか奇妙ですが、「Interface Builder」メニューの「Quit Interface Builder」を選ぶことにより行えます。つまり、Interface Builderの終了とまったく同じ操作です。

Test Interfaceを終了したら、NSImageViewを選択し、「Tools」メニューから「Show Info」を選んで下さい。「NSImageView Info」という名前のInfoウィンドウが表示されます(fig.18)。

ProjectBuilderのアイコン
[fig.18] Infoウィンドウ

ここで色々なAttributesをセット出来るのですが、今回はここには手を付けずにポップアップボタンを「Size」に切り替えて下さい(fig.19)。

ProjectBuilderのアイコン
[fig.19] Sizeの設定に切り替え

「Size」に切り替えますと、Autosizingという項目が現れますので、内側の枠の縦線と横線をクリックして、バネの形にします(fig.20)。

ProjectBuilderのアイコン
[fig.20] NSImageViewのSuperViewに対する挙動の設定

この枠は自分のViewを表しており、この様に内側がバネになっていると、Super Viewのリサイズに追従して拡大縮小するようになります。なお、外側もバネに出来ます。例えば外側だけ全部バネにすると、自分のサイズは固定で、常に中央に位置するようになります。どういう組み合わせで、どんな動きになるのかは、後で各自色々と試してみて下さい。

それでは、もう一度「Test Interface」でテストしてみましょう。今度はウィンドウのリサイズに合わせて NSImageView もリサイズしたと思います。

では、実際にプログラムを動作させてみましょう。今まで同様、Project Builderで「ビルドと実行」ボタンをクリックして下さい。この時、Interface Builderで保存を行っていなかった場合は、保存するかどうか聞いてきますので保存を行うようにしてください。TinyViewが起動したら、今度は枠付きのウィンドウが表示されたはずです(fig.21)。

ProjectBuilderのアイコン
[fig.21] イメージを表示する枠が付いたTinyView

ウィンドウをリサイズすると、ちゃんと枠も付いて来ることを確認して下さい。これでイメージを表示する準備が整いました。

では、今日はここまでとしまして、次からは画像ファイルの読み込みに手を付けて行くことにします。

前頁目次次頁