前回の例のように 、Imege Kitを利用すれば、割と簡単な記述のみで画像ファイルに対する高度な操作が実装できることが理解できます。今回からは、実際に「しんぶんし3」にIKImageBrowserViewクラスを実装していく作業に入ります。
まず最初に行うべきことは、Interface Builderを使い、ドキュメント用nibファイル（今回はMyDocument.nib）のウィンドウオブジェクトに「ImageBrowser View」を配置する作業です。ところで、もし現在「Xcode 3.0 Developer Tools」を利用されているのなら、これに付属するInterface Builder 3.0には幾つものバグがありますので注意が必要です。特に、Carbonのnibファイルを編集する時には大きな問題が発生する事があります。現在「Xcode 3.1 Developer Tools」がADCメンバーサイトからダウンロードできますので、可能であるなら、それに付属しているInterface Builder 3.1の方を利用した方が安全だと思われます。
では、ImageBrowser Viewをドラッグ＆ドロップでウィンドウ上へと配置してみます。 ユーザインターフェースに用いる部品（コントロールやビューなど）は、Libraryウィンドウにまとめられています。その上部には、インターフェースの部品（プラグイン）をカテゴリーごとにまとめたグループが一覧されており、それを切り替えることで内容を表示できます。ImageBrowser Viewの居場所は、多くの部品が登録されている「Cocoa」の中ではなく「Image Kit」の方ですので注意してください。今のところ「Image Kit」から選択できるビューはImageBrowser View（IKImageBrowserView）と、前回その使い方を解説したImageView（IKImageView）の2種類のみです。
さて、ImageBrowser Viewを、ド〜ンとウィンドウいっぱいに配置したいところなのですが、ちょっと待ってください。ドキュメントウィンドウのレイアウトを考えてみると、その右半分には、ImageBrowserで選択された画像を表示させるエリアが必要です。そして、将来的には、それと同じ場所に「対称処理をした画像」を表示させることになります。ですから、先んじて「Vertical Split View」（NSSplitView）を用意しておいて、その右側の「Custam View」と表示されているエリアにはImageViewを、左側のエリアの方にはImageBrowserを配置することにします。この作業により、どちらのビューもSplit Viewのサブビューとなります。
この状態で、Split Viewの真ん中の柱（?）をつまんで左右に動かしてみると、それに連動して中の2つのビューは拡大＆縮小（延び縮み）しません。中の2つのビューサイズが、スーパービュー（Split View）のサイズ変更と連動するように、Inspectorダイアログのサイズ設定（左から3番目の物差しアイコン）で調整する必要があります。真ん中に表示される「Autoresizing設定」の矢印とH表示を、すべてON（赤色）とします。この時、その右側で動いているアニメーションにより実際の挙動が確認できますが、中の赤色の矩形が外枠に追随するような動きであればOKです。ウィンドウとSplit View自身とのサイズ関係を保つのにも、上記とまったく同じ処置が必要ですので御注意ください。
次は、ImageBrowser Viewの各アトリビュート（オプション）の設定です。こちらの作業はInspectorダイアログの一番左のアイコンで行います。まずImageBrowser Viewを一回クリックすると、そのスーパービューであるScroll Viewが選択されます。まずはこの状態で、アトリビュートの「Show Horizontal Scroll」のチェックが外れていることを確認してください。現状のImageBrowserでは、並べた画像の横スクロールはできませんので、このアトリビュートはONにしても意味がないのです。可能なのは縦スクロールだけですので、「 Show Vertical Scroll」の方は、ちゃんとチェックが入っていることを確認してください。
先ほどと同じ場所をもう一度クリックすると、今度はImageBrowser Viewの方が選択されます。現在選択されているビューの種類は、Inspectorダイアログのタイトルで確認できますので、間違えないようにしましょう。ここには、「Style」「Allows」「Display」「Zoom」といった幾つかのアトリビュートが用意されていますが、それぞれの詳細について後述したいと思います。例えば、 Styleの「Shadowed」「Outlined」「Titled」などのチェックボックスのON/OFFを試してみてください。ウィンドウ上でImageBrowserのテンポラリー表示がその設定の指示通りに変化することを確認することができます。
続いて、File's Owner（ MyDocumentオブジェクト）と各種オブジェクトのコネクション（連結）を実現します。こちらの作業は、Inspectorダイアログの右から2番目の矢印アイコンで行います。ImageBrowserのOutletの「DataSource」と「delegate」を File's Ownerと連結します。こうした仕組みは、以前に解説したTable Viewとほとんど同じです。また、ソースコード側（MyDocument.h）には、以下の２つのインスタンス変数を定義しておき、それぞれにImageBrowser ViewとImageViewを連結させます。
IBOutlet id imageBrowser;
IBOutlet id imageView;
最後に、ImageBrowserに表示させる画像サイズを変更するためのスライダーコントロールと、そこへの「画像登録」を実行するためのボタンコントロールを配置します。両コントロールには、それぞれzoomImage:とaddImage:というアクション・メソッドを割り付けておきます。この時、ソースコード（MyDocument.h）のクラス定義の方に、先んじて両メソッドを記述しておかないと、File's Owner（MyDocumentオブジェクト）側に連結すべきアクションが表示されませんので注意してください。