- My First Browser-
戻る、進む、再読み込みボタンを付ける

ブラウザにはかかせない、戻る、進む、再読み込みボタン。これらのボタンを付けて みよう。

7.1 WebView のアクション

3 章で、WebView はアクションメソッドを実装している、って説明したよね。この アクションメソッドを使うと、Interface Builder でアクションを接続できる。これら のうち、goBack:、goForward:、reload: を使うと、戻る、進む、再読み込みを実 装できるんだ。

- (IBAction)goBack:(id)sender;
- (IBAction)goForward:(id)sender;
- (IBAction)reload:(id)sender;

7.2 実装

では、実装の説明を。

■ボタンの追加

1. ボタンのための画像を用意する。戻る、進む、再読み込み用の画像を作ろう。ここ では、かなり簡単なものを作ってみた。

図7-1 ボタンの画像

再読み込みは、円形の矢印のものが多いけど、とりあえず'R' の文字で代用してみ た。

2. 画像をプロジェクトに追加する。まず、画像をプロジェクトのフォルダの中の適当 な位置に置こう。そして、Project Builder の「プロジェクト」→「ファイルを追加 ﾉ」メニューを選ぶ。そうするとオープンダイアログが開くので、画像ファイルを追加 しよう。追加したファイルは、Resources グループの下に置く。

図7-2 画像の追加

直接、Finder からドラッグしてもいいよ。

3. MyDocument.nib を開く。MyDocument.nib をダブルクリックして開いてくれ。 そして、Interface Builder に移ろう。

4. ボタンを追加する。戻る、進む、再読み込み用の3 つのボタンを追加しよう。ここ では、URL テキストフィールドを小さくして、左上に追加した。

図7-3 ウィンドウのレイアウト

5. ボタンに画像を設定する。nib ウィンドウのImages タブに移動してくれ。そこに は、プロジェクトに追加した画像ファイルがあるはずだ。これを、ボタンにドラッグし て設定しよう。

図7-4 画像の設定

6. ボタンのアクションを設定する。ボタンを選択して、Ctrl キーを押しながらドラッ グしてくれ。線が伸びてくるので、これをWebView につなげよう。すると、関連づ けるWebView のアクションの一覧が出てくるはずだ。ここから、それぞれ、 goBack:、goForward:、reload: を選択しよう。

この段階で、ビルドして実行してみてくれ。これだけで、ボタンは動作するはずだ。

■メニューの作成

ボタンだけだとつまらないので、メニューも追加してみよう。「Go」メニューを追 加して、「Back」、「Forward」、「Reload」というアイテムを作ってみる。

7. MainMenu.nib を開く。プロジェクトから、MainMenu.nib をダブルクリックして 開いてくれ。そして、再びInterface Builder へ。

8. メニューを追加する。まず、MainMenu を開いておこう。メニューバーが表示され るはず。そこに、パレットのメニューの部品から、「Submenu」をドラッグして追加 しよう。Edit とWindow の間に入れる。そして、「Go」という名前に変更する。

次に、メニューにアイテムを追加する。こんな感じにしてみてくれ。

図7-5 Go メニューの追加

9. First Responder にアクションを追加する。このnib ファイルにはWebView のイ ンスタンスがないので、メニューのアクションを直接つなげることができない。だか ら、First Responder にアクションを追加して、そちらに投げることにしよう。First Responder に投げれたアクションは、レスポンダ・チェインによって処理される。

Classes タブに移動して、First Responder を選択してくれ。NSObject のサブク ラスになっているでしょ。インスペクタパネルを表示して、アクションを追加しよう。 goBack:、goForward:、reload: といったアクションを追加する。つまり、 WebView のアクションと同じものだよ。

図7-6 FirstResponder のアクション

10. アクションをつなげる。Instances タブにもどってくれ。メニューのアイテムを選 択して、Ctrl キーを押しながらドラッグする。出てきた線を、今度はFirst Responder につなげるんだ。そして、それぞれ対応するアクションに「Connect」し よう。さっき追加した、goBack:、goForward:、reload: にね。

ここまでできたら、セーブしてProject Builder に戻るぜ。

■ソースコードの編集

メニューから呼び出されたアクションは、レスポンダ・チェインによって処理される んだ。だから、WebView がファースト・レスポンダになっているときは、問題ない。 WebView によって処理される。そうでないときは、誰か他のクラスが処理してやる必 要がある。そこで、MyDocument クラスに処理するためのメソッドを追加してやろ う。

11. MyDocument.m を編集する。このクラスにさきほど追加した3 つのアクショ ン、goBack:、goForward:、reload: のためのメソッドを実装するんだ。処理の 中身は簡単で、それぞれ対応するWebView のメソッドを呼ぶだけだ。

- (void)goBack:(id)sender
{
    // WebView の前の画面に戻ります
    [webView goBack:sender];
}

- (void)goForward:(id)sender
{
    // WebView の次の画面に進みます
    [webView goForward:sender];
}

- (void)reload:(id)sender
{
    // WebView を再読み込みします
    [webView reload:sender];
}

これだけで、完了。

12. ビルドして実行する。ボタンと同じように、メニューからの呼び出しも動作するこ とを確認してくれ。

図7-7 MyFirstBrowser4 動作図

■ここまでのプロジェクト：
MyFirstBrowser3.dmg