Cocoaはやっぱり!
はじめてのCocoaアプリ
とにかく始めてみよ〜

今回のテーマ

さて、Cocoaに興味を持ったあなたに、どんな感じでプログラムの作成ができるのか、Cocoaの開発環境はどうなっているのかをマウス片手に知ってもらおうというのが今回のテーマです。気軽にチャレンジしてみてください。

推奨環境 この解説は、以下の環境を前提に作成し、動作確認等を行っています。ご確認ください。

改版履歴

開発ツールの紹介

何はともあれ、開発用のツールを起動しなければ始まりません。「 /Developer/Applications/ 」フォルダをFinderで開いてください。いくつかのアプリケーションとフォルダがあると思います。この内の「 Xcode 」が開発ツールの親玉です。これをダブルクリックして起動してください。ユーザインターフェイスを作るときに欠かせないのが「 Interface Builder 」です。後程でてきます。この2つは、開発のときには、ほぼ必ず使用しますので、ドックに登録しておくとよいでしょう。

プロジェクトの作成

Xcodeを初めて起動したときは、初期設定を行うアシスタントが出てきますが、とりあえずはデフォルトのまま進んで問題ありません。アシスタントを完了したら、早速アプリケーションの開発を始めましょう。アプリケーションの開発でまず最初に行うのが「 プロジェクトの作成 」です。「 ファイル → 新規プロジェクト... 」メニューを選択しましょう。

すると、下図のような「 新規プロジェクト 」と書かれたアシスタントが起動します。ここでは、どのようなプログラムを作成するの欠の種類を選びます。「 Application → Cocoa Application 」を選んで…(1)、「 次へ 」ボタンをクリックします…(2)。

次の画面では、このプロジェクトに名前を付けます。今回のサンプルは「 簡易メモ帳 」ということで、プロジェクト名のところには「 Memo 」と入力します。その下の「 ディレクトリ 」の所にはプロジェクトを作成するフォルダの指定を書くことができます。デフォルトでは、ホームディレクトリの直下になりますが、変更したい場合は、直接タイプするか、右側の「 変更... 」ボタンをクリックして場所を選択します。その後、「 完了 」ボタンをクリックします。

すると、以下のようなプロジェクトウィンドウが表示されます。左側に表示されているのがグループ、iTunesでいうところのプレイリストのようなものと考えていただければよいでしょう。プロジェクトを構成するファイルなどを用途に応じてグループとして束ねているものです。右側は、選択しているグループの中身を表示します。

もうこの段階で、Cocoaアプリケーションが動かせる状態になっています。ツールバーにある「 ビルドして実行 」をクリックしてみましょう。アプリケーションがビルドされ、以下のようなアプリケーションが起動するはずです。まだ、何の機能もないアプリケーションですが、ウィンドウを動かしたり、サイズを変えたり、メニューを選んだりなどの、アプリケーション共通の動作はしてくれます。今後は、ここに色んな機能を盛りつけていきます。

ユーザインターフェイスの設計

プロジェクトウィンドウの中に「 MainMenu.nib 」というファイルがあります。これがユーザインターフェイスなどを定義しているファイルです。これをダブルクリックしてください。すると、ユーザインターフェイスを設計する「 Interface Builder 」が起動して、MainMenu.nibが開かれます。

先程、開いたMainMenu.nibファイルは、左下にあるドキュメントウィンドウに表示されています。このウィンドウには、MainMenu.nibファイルが含んでいる様々なインスタンスが表示されます。デザインウィンドウというのが先程実行したときに表示されたウィンドウで、ドキュメントウィンドウの中にあるWindowと書かれたものが、それに対応します。

右にあるパレットウィンドウというのが、ボタン/メニュー/ウィンドウなど様々なユーザインターフェイスの部品が用意されていて、これをデザインウィンドウなどにドラッグ&ドロップして配置していきます。まずは、メモを書き込むエリアを配置してみましょう。パレットウィンドウの左から3番目にテキスト関連の部品が用意されています。メモを編集するための部品を下図のように右側にある部品をデザインウィンドウにドロップします。Cocoaでは、このような部品をビュー(View)と呼びます。

この部品は、NSTextViewというクラスのビューで複数行のテキストを編集することのできるテキストエディタです。クラス名は今すぐ覚えなくても構いませんが、コーディングを始めるとクラス名は常に意識することになりますので、慣れる意味で書いておきます。ちなみに、「 NS 」というのは「 NeXTSTEP 」の略だと思われます。この、ビューをウィンドウの幅に広げます。ドラッグして、ウィンドウの左上に持っていくと、図のような位置で点線が表示されて、ビューがこの線に吸着するような動きをします。

部品の配置にはルールが決められていて、Apple Human Interface Guidelinesという文書にまとめられています。ただし、詳細なガイドラインを知らなくても、吸着に従って部品を配置しておけば、最低限のガイドラインをまもることができます。ただし、Apple Human Interface Guidelinesは、統一され、使いやすいソフトウェアを作るための様々な情報が書かれているので、読んでおくべきドキュメントです。

テスト実行してみよう

NSTextViewをウィンドウ全体に広げたら、「 File → Test Interface 」メニューを実行してみてください。現在のユーザインターフェイスをテストすることができます。

Interface Builderで作成した部分についての動作確認になりますが、ビューなどの属性を変更したときなどに実際にどのように動くかをすぐに確認することができます。この状態でも、日本語を含むテキストの入力や、メニューを使ったカット&ペースト、ドラッグ&ドロップによるテキスト編集などができますので、確認してみてください。

テスト中は、メニューバーの右側の方にテスト実行中を表すアイコンが表示されます。テストを終了するには、このアイコンをクリックするか、「 Interface Builder → Quit NewApplication 」メニューを選択します。

属性の変更

テスト実行を終了したら、今度はインフォパネルを使って属性の変更を行ってみましょう。ウィンドウの背景部分をクリックすると、インフォパネルの中身がウィンドウの属性を設定する状態に切り替わります。インフォパネルは、クリックしたものの属性を見たり変更したりするために使用します。ウィンドウのタイトルが「 Window 」になっていますので、これを「 MemoPad 」に変えてみましょう。「 Window Title : 」の項目のところに入力してリターンキーを押してください。これで変更されるはずです。

このような手順で様々なウィンドウやビューなどの属性を変えていくことができます。沢山の項目がありますが、いくつか見ていきましょう。「 Has Texture 」というチェックボックスは、iTunesなどのようなメタル状のデザインのウィンドウを作りたいときに指定します。「 Controls 」と書かれているところに右にある「 Miniaturize/Close/Resize 」というチェックボックスは、「 最小化ボタン/クローズボタン/最大化ボタンとウィンドウのリサイズ 」を使用可にするかどうかを選択します。色々と試してテスト実行してみてください。その他、必要なものについては、追って説明していきます。

オートサイズ

テスト実行してウィンドウのサイズを変えてみてください。以下のように、ウィンドウのサイズは変わるにもかかわらず、テキストビューはもとのサイズのままです。これは、ウィンドウのサイズに追従して変化してほしいところです。

これは、オートサイズという機能で実現できます。インフォパネルの上部にあるメニューから「 Size 」を選ぶとサイズに関する設定を行う画面に切り替わります。

その下半分にあるのがオートサイズの設定です。内側の四角形が自分自身で外側の四角形が親を表します。親というのは、この場合はウィンドウになります。四角形の中に線が6本あって、それらはクリックするとバネ状になったり直線上になったりします。直線の場合は距離を一定に保ち、バネ状の場合は伸縮します。図のようにすると、テキストビューは「ウィンドウとの距離を上下左右ともに一定に保ち、自分自身の幅と高さは伸縮する」ということを意味する設定になります。この状態でテスト実行すると、ウィンドウのリサイズに追従して以下のようになるはずです。