第2章　Xcode を使ってみましょう
ホーム		メール
目次		< 前ページ 次ページ >

ドキュメントベースドアプリケーション

超シンプルなWebブラウザ MyBrowser の作成

　ドキュメントベースドアプリケーションはメインウィンドウをいくつでも開けるアプリケーションのことです。この節では簡単なWebブラウザを作ります。まず新規プロジェクトを作りましょう。

　Xcodeの「ファイル」メニューから「新規プロジェクト...」を選び「新規プロジェクト」ウィンドウを開きます。そして左ペインで「Mac OS X」の「Application」を、右ペインで「Cocoa Application」を選択して「オプション」の“Create document-based application”にチェックを入れます。設定が完了しましたら「選択...」ボタンをクリックしてください。

図 新規プロジェクト - Cocoa Document-based Application

　次に現れる「保存ダイアログシート」で名前を“MyBrowser”にしてください。保存場所を決めて「保存」をクリックすると「MyBrowserプロジェクト」ウィンドウが現れます。

図 MyBrowserプロジェクトウィンドウ1

　今回は各ファイルの説明は省きます。ドキュメントベースドアプリケーションについては本書の後半でもう一度作成いたします。各ファイルの説明はその時にすることにいたします。

　左ペインで“Frameworks”フォルダを選択してください。すると右ペインにこのプロジェクトに含まれている“framework”だけが表示されます。

図 MyBrowserプロジェクトウィンドウ2

　この節ではWebブラウザを作成しますので“WebKit.framework”というものが必要になります。左ペインの「Frameworks」を選択しまま“プロジェクト”メニューの“プロジェクトに追加...”を選びます。

図 プロジェクト - プロジェクトに追加...

　次に現れるダイアログシートで起動ディスク→“システム”→“ライブラリ”→“Frameworks”と進み“WebKit.framework”を選択して“追加”ボタンをクリックしてください。

図 WebKitレームワークの追加1

　次に表示される確認ダイアログではすべてをデフォルトのまま再び“追加”ボタンをクリックします。

図 WebKitフレームワークの追加2

　MyBrowserプロジェクトウィンドウの「Frameworks」に「WebKit.framework」が追加されます。

図 MyBrowserプロジェクトウィンドウ3

ガベージコレクションの設定

　今回もコーディングを一切行いません。少し不安なのでガベージコレクションを採用することにいたします。ガベージコレクションについては後の章で説明いたしますが、メモリ管理をプログラマが気にする事なく、すべて自動で行ってくれる仕組みで、Objective-C 2.0から採用された新しい機能です。 　左ペインの“ターゲット”の“ディスクロージャー”▶をクリックして開き“MyBrowser”を選択しツールバーの“情報”をクリックします。

図 ガベージコレクションの設定1

　情報ウィンドウが表示されましたら“ビルド”タブを選択します。そして下のペインを次の図のように下にスクロールして“Objective-C ガベージコレクション”を“必須”に変更します。これでガベージコレクションと呼ばれるメモリ自動管理システムが機能するようになり、メモリ管理に関するコードを一切記述する必要がなくなります。メモリ管理に関するコーディングの必要がなくなります。

図 ガベージコレクションの設定2

　“Debug”だけでなく“Release”も同じ設定にしておきましょう。左上の“構成：”ポップアップメニューから「Release」を選んで、先ほどと同じように「Objective-C ガベージコレクション」を「必須」に変更してください。設定が終わりましたら情報ウィンドウは閉じておいてください。

図 ガベージコレクションの設定3

■ ターゲット

　Xcodeでは“ターゲット”（ビルド対象）を複数設定しておくことができます。そしてターゲットごとにビルド方法を変えておくことができます。このターゲットとして代表的なものがDebugとReleaseです。この2つはデフォルトで用意されていますが、ここではその違いについて簡単に説明いたします。

Debug

　コードに間違いがないかどうかを一行ずつチェックしていくソフトウェアを“デバッガ”と呼びます。Cocoaフレームワークにおいてこのデバッガを正常に動作させるためには“オプティマイズ”（“最適化”：後ほど説明いたします）を行わないようにしてコンパイルしなければなりません。このオプティマイズを行わないようにしてデバッガを正常に動作させるモードがDebugターゲットです。またDebugターゲットにはオプティマイズを行わないことでコンパイル時間が短くなるというという副産物もあります。なおMac OS X 10.3 まで採用されていたゼロリンクと呼ばれるリンクを行わないコンパイル機能は現在では実質上廃止されています。したがってDebugターゲットでコンパイルした実行ファイルでもほかのMacで動作させることができます。しかしオプティマイズを行っていないのでReleaseターゲットでコンパイルしたものに比べると実行速度は劣ることになります。

Release

　コンパイル時にオプティマイズ（最適化）を行います。その結果、コンパイルされたソフトウェアの実行速度は向上することになります。しかしコンパイルにかかる時間は逆に増えることになります。またオプティマイズを行うことによってデバッガがまともに動作しないというデメリットもあります。

　これらのメリットとデメリットを考慮すると、開発時にはDebugターゲットでビルドして、配布時（リリース時）にはReleaseターゲットでビルドするというのが通常の方法だと言えます。

オプティマイズ（最適化）

　たとえばコードのなかに、いかなる場合も結果が1となる実行式があったとします。これはプログラマがうっかりとそう記述した場合と、可読性を向上させるために1という結果になる過程をコードとして残しておいた場合の2通りのケースが考えられます。どちらにしてもいかなる場合も1になると分かった時点でコンパイラはその実行式をただの1という数値に置き換えます。この置き換えによって無駄な実行式にかかるCPUの負荷が減らせます。このようにしてソフトウェアの実行速度を改善していくことをオプティマイズ（最適化）と呼びます。

ユーザインターフェースの作成

　ではMyBrowserの“UI”（ユーザインタフェース）を作成していきます。MyBrowserプロジェクトウィンドウで“MyDocument.xib”をダブルクリックしてください。

　なおxibファイルに素早くアクセスするにはプロジェクトウィンドウ左側の「グループとファイル」ペインの1番下の“Interface Builderファイル”フォルダを選択すると右側の「ファイル名」ペインにはxibファイルだけが表示されます。

図 Interface Builderファイル

　では「MyDocument.xib」をダブルクリックして次の手順で作業をすすめてください。

1. Interface Builderが起動しましたら“ドキュメントウィンドウ”（メインウィンドウ）の“Your Document Contents here”という文字列を選択して削除します。削除は”Edit“メニューの”Delete“を選ぶかキーボードの”delete“キーを押します。
   
   図 MyDocument.xib起動画面
   
   
   
2. メインウィンドウのタイトルバーあたりをクリックしてインスペクタパネルがWindowを指すようにします。その状態でインスペクタパネルのAttributesタブを選択します。インスペクタパネルのタイトルが「Window Attributes」になっていることを確認してください。
   
   
3. Window Attributesの“Appearance”グループで“Textured”にチェックを入れます。ここにチェックを入れるとウィンドウがメタル調に変わります。なおドキュメントベースドアプリケーションの場合にはメインウィンドウのタイトルはデフォルトで“Window”になります。ドキュメントベースドアプリケーションの場合は複数のウィンドウごとにタイトルが変わるため、ここはデフォルトのままにしておきます。
   
   図 Textured
   
   
4. Text Field
   　ライブラリパネルのObjectsタブが選ばれていることを確認します（デフォルトでObjectsタブが選ばれているはずです）。次にLibraryプルダウンメニューを開いてLibrary→Cocoa→Views & Cellsを選択します。そして下のペインのなかから“Text Field”を探してください。
   　なお“Text Field Cell”というものも存在しますので間違わないように注意してください。
   
   
5. Text Fieldをメインウィンドウまでドラッグします。ガイドラインが現れましたらそれにあわせて図のようにウィンドウに配置（ドロップ）します。
   
   図 Text Fieldレイアウト1
   
   
6. テキストフィールドの右端も次の図のようにガイドラインに沿うように伸ばします。
   
   図 Text Fieldレイアウト2
   
   
7. テキストフィールドが選択された状態でインスペクタパネル左端のAttributesタブを選びます。
   
   
8. インスペクタパネルのタイトルがText Field Attributesになっていることを確認してから“Focus Ring”をNoneにします。
   
   図 Text Field Attributes
   
   
   
   　このFocus RingについてはNoneやほかの選択肢を選んでSimulatorで確認してみてください。違いが分かると思います。None（なし）にするかどうかは好みの問題だと言えます。
   
   
9. Text Fieldインスペクタパネルを左から3番目のSizeタブに切り替えてAutosizingを次の図のように設定します。
   
   図 Text Field Size
   
   
   
   　このAutosizingの設定はウィンドウの大きさが変わった場合テキストフィールドとウィンドウの左辺・上辺・右辺の距離は現在の距離を維持し。テキストフィールド自身はヨコの大きさは可変でタテの大きさは不変という設定になります。これについても色々と設定を変えてSimulatorでテストしてみると良いでしょう。
   
   
10. ライブラリパネルのLibraryから“Web Kit”を選択すると“Web View”が現れます。
    
    図 Library - Web Kit - Web View
    
    
    
11. Web Viewをメインウィンドウへドラッグ&ドロップして次の図のように左右と下はウィンドウ一杯まで広げて配置いたします。上辺はText Viewを選択した状態でマウスポインタをWeb Viewの上にのせます。そしてoptionキーを押すとテキストフィールドとウィンドウの左辺と右辺との距離、テキストビューとウェブビューとの距離が表示されます。それぞれの値を図のようにしてください。
    
    図 Web Viewレイアウト
    
    
    

    【Xcode 3.1の場合は】
    
    　「Web View」を選択して「Text View」にマウスポインタをのせてoptionキーを押します。
    
    図 Web View レイアウト Xcode 3.1
    

    
    
12. インスペクタパネルを Web View Sizeに切り替えて Autosizingを次の図のように設定いたします。
    
    図 Web View Size
    
    
    

    この設定の場合は“Web View”の大きさはウィンドウの大きさに完全に追従することになります。

    
    
13. ライブラリパネルでLibrary→Cocoa→Views & Cellsを選択して下のペインで“Horizontal Line”（水平線）を探します。
    
    図 Horizontal Lineライブラリパネル
    
    
    
14. Horizontal Lineを図. Lineレイアウト1および2を参照してメインウィンドウに配置してください。高さは Web View上端の1ピクセル上にします。左右はウィンドウ一杯まで広げてください。
    
    図 Lineレイアウト1
    
    
    
15. Text Viewを選択してマウスポインタをLineの上にのせます。そしてoptionキーを押すと各アイテムまでの距離がピクセル単位で表示されます。今度はLineまでの距離も20 ピクセルになるようにします。距離の調整はLineを選択してキーボードの上下の矢印キーで1ピクセルずつ移動できます。
    
    図 Lineレイアウト2
    
    
    

    【Xcode 3.1の場合は】
    
    　「Line」を選択してマウスポインタをテキストフィールドの上にのせてoptionキーを押します。
    
    図 Lineレイアウト2 Xcode 3.1
    

    
    
16. LineはBoxに所属しています。配置したLineを選択してインスペクタパネルで Box Sizeを表示させます。Autosizingを次の図のように設定します。設定の意味はもう分かっていただけると思います。
    
    図 Line Size
    

アクションの接続

　テキストフィールドを選択してから Control + ドラッグ、もしくは右クリック + ドラッグでテキストフィールドから Web View に向かって接続線を引きます。

図 アクションの接続1

　Web View の中でマウスボタンを離すと（リリース、もしくはドロップすると）接続先の一覧が表示されます。そして一覧の中から“takeStringURLFrom:”をクリックします。

図. アクションの接続2

　以上の作業を“アクションの接続”もしくは“ターゲットアクションの接続”と呼びます。ターゲットアクションについては第5章「デザインパターン」の章で説明いたします。

完成

　お疲れ様でした。これで作業はすべて終了いたしました。MyDocument.xibファイルを保存して閉じてください。Interface Builderも終了して頂いて構いません。

ビルドと実行

　XcodeのMyBrowserプロジェクトウィントウの「ビルドと実行ボタンをクリックします。

図 MyBrowser

　おめでとうございます。完成です。
テキストフィールドにURLを入力し「enter」キーを押してください。入力するURLは省略したURLではなく http:// から始まる正式なURLを入力してください。URLの終わりは「 / 」で終わるか「ファイル名.html もしくは.cgi .rb .py」になります。ウィンドウの大きさは自由にリサイズできます。また「File」メニューの“New”もしくは“コマンド + N” で新しいウィンドウをいくつでも表示できます。当然ウィンドウごとに違うサイトを表示できます。

図 Here we go!

Copyright 2006 - 2010 viva Cocoa. All Rights Reserved.