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

現在のTinyViewは、写真のポートレイトの様な形で画像表示を行っています(fig.01)。

[fig.01] 現在のTinyViewの画像表示はポートレイト
（サンプル画像は、ゆきみだいふくさんのご好意により、使用させていただいています。）

これはこれで可愛いのですが、画像表示ソフトは、画像をウィンドウ一杯に表示し、はみ出した部分はスクロールバーを操作することによって見れるようにするのが普通です（必ずしもそうではありませんが、このタイプが一番多いでしょう）。そこで、今回から数回に分けて、画像表示に手を入れ、スクロールバー付きの表示を実現して行くことにします。

自分で画像を表示してみよう（前編）

今まで、画像の表示はNSImageViewにまかせていました。そのままNSImageViewにまかせておいても、スクロールバーの付いたウィンドウを実現することは出来ますが、細かい制御がし辛いですし、新しいことを覚えるためにも、ここは自分で描画部分を組んでみましょう。いつもの様にTinyView.pbproj(もしくはTinyView.xcode)を開いて下さい。そして、MainMenu.nibをダブルクリックして、Interface Builderを開いて下さい。まずは、今まで使っていたNSImageViewを削除し、NSViewに入れ替えます。デザインウィンドウでNSImageViewを選択し、削除して下さい(fig.02)。

[fig.02] NSImageViewを削除

削除したら、ツールパレットからNSView（CustomViewと書いてあるのがそうです。）をデザインウィンドウにドラッグ&ドロップして下さい(fig.03)。

[fig.03] CustomViewをデザインウィンドウにドラッグ&ドロップ

ドラッグ&ドロップしたら、ガイドに合わせて配置して下さい(fig.04)。

[fig.04] ガイド（点線）に合わせて配置する

配置したら、先ほどNSImageViewを削除した時に切れてしまったOutletをつなぎ直しましょう(fig.05)。

[fig.05] File's OwnerのOutletにCustomViewを接続

つなぎ方の詳細は、第9回で説明していますので、忘れてしまった方は、そちらを参照して下さい。

さて、これで今までNSImageViewクラスのインスタンスがあった位置に、NSViewクラスのインスタンスが配置されました。ここでNSViewのリファレンスを見て下さい。一番最初に NSView is an abstract class that defines the basic drawing, と書いてあります。つまり、NSViewは抽象クラスですから、これだけでは何も出来ません。必ず継承して、必要なメソッドをオーバライドする必要があります。では、これを行うためにProject Builder（もしくはXcode）に戻って下さい。「グループとファイル」の中から「Classes」グループを選び、ファイルメニューから「新規ファイル...」を選んで下さい(fig.06)。

[fig.06] Classesグループを選んでからファイルメニューの「新規ファイル...」を選択

なお、「Classes」グループを選ぶのは、この中にファイルが出来て欲しいからです。これをやらずに、他の場所にファイルが出来てしまっても、ドラッグして移動すれば、別に問題ありません。「新規ファイル...」を選ぶと、アシスタントパネルが現れます。今回は、NSViewのサブクラスを作成しますので、「Objective-C NSView subclass」を選んで下さい(fig.07)。

[fig.07] Objective-C NSView subclassを選んで、次へ

選んだら、「次へ」ボタンを押します。すると、ファイル名を入れる画面になりますので、「MyImageView.m」というファイル名を入れて下さい(fig.08)。

[fig.08] ファイル名を入れて、ターゲットを確認する

この時、現在使用しているターゲットにチェックが入っていることを確認し、入っていなかったら入れて下さい（通常は確認しなくても入っているはずですが、第26回で従来のターゲットをXcodeネイティブに変換し、ターゲットが二つある場合は、入っていない可能性があります。この場合は、ビルドするのがどちらのターゲットなのかも、意識する必要があります。）。以上のことを行ったら、「完了」ボタンを押して下さい。MyImageView.hとMyImageView.mの二つのファイルが生成されます(fig.09)。

[fig.09] 二つのファイルが生成される

中身を見てみましょう。MyImageView.mは、以下の様になっているはずです。

#import "MyImageView.h"

@implementation MyImageView

- (id)initWithFrame:(NSRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code here.
    }
    return self;
}

- (void)drawRect:(NSRect)rect {
    // Drawing code here.
}

@end

コメントを読めば分かりますが、Drawing code here.と書いてある所で描画を行えば良いわけです。この続きは次回です。

前頁目次次頁