このページは「iPhoneプログラミング入門」(工学社刊、ISBN 978-4-7775-1541-7)を読んで、もっと先へ進んでみたいと思った人への説明です。

次へ->
「次の一歩」一覧へ

最も簡単なナビゲーションの作り方1

ナビゲーションとは

なぜ「テーブルを勉強したからナビゲーションが作れる」のか

1最も簡単なテーブルの作り方」で、とにかくテーブルを作ってみたことで、「ナビゲーション」のプログラムを勉強できるようになりました。
「ナビゲーション」とは、ある画面から別の画面への移動を促す「リンク」や「ボタン」です。iPhoneアプリケーションでは「ボタン」です。たとえば「Back」と書いてあるボタンをクリックすれば、ひとつ前の画面に戻るというものです。
でも、なぜ「テーブルを作ったので、ナビゲーションが作れるようになった」のか?と思うのは当然です。
その通り、iPhoneプログラミングとしては、「テーブル」を作らないと「ナビゲーション」が作れないなどということはありません。両者は独立したアプリケーションの機能です。
しかし、Xcodeの「テンプレート」で「ナビゲーション・ベースのアプリケーション」を選ぶと、テンプレートには、「テーブル」がついてくるのです。このテンプレートを使って「ラクにナビゲーションを作る」ためには、「かなり苦労してテーブルを理解する」必要があったのだ、というわけです。いや、それほど苦労してでも、このテンプレートからナビゲーションを作った方が、最初は絶対ラクなのです。

iPhoneで「ビューの移動」に「ナビゲーション」は不可欠

「ナビゲーション」というと、Webページなどでボタンや画像をクリックして目的のページへ移動するしくみを連想しますが、あれは結局は「HTMLタグ」をうまく書けば実現します。しかし、iPhoneの場合、「ページ」はビュー、すなわち「UIViewクラス」のオブジェクトです。そして、ビューからビューへの移動は「UINavigationController」というクラスのオブジェクトに「pushViewController:animated:」というメソッドを使うことによって行われます。「animated:」は「pushViewController:」メソッドについて、アニメーション効果をつけるかどうかを指定するオマケのメソッドです。大事なのはViewControllerをpushすることなので、「pushViewController:...」 と記すことにします。

iPhoneには確かに、上や下に「ナビゲーション・バー」を置いて、そのバー上のボタンをクリックしてビューを切り替えるしくみが派手にあります。それに「ナビゲーションコントローラ」が必要なのはすぐに想像がつくと思います。
しかし、「ナビゲーション・バー」を触らずに、ボタンやテーブルのセルなどをクリックしてビューを切り替える場合でも、「ナビゲーションコントローラ」の「pushViewController:...」メソッドが必要なのです。そこが大事なところです。

本記事で作成するナビゲーション

本記事で作るのは、至極簡単な、まさに動作確認だけの意味を持つアプリケーションです。
1最も簡単なテーブルの作り方」で作ったようなテーブルで、「Red」を選ぶと、背景色が赤い別のビューへ移動します。「Green」を選ぶと、背景色が緑の別のビューへ移動します。
色つきのビューの上部には「Back」ボタンがあり、それをクリックすると元のテーブルに戻ります。
なお、これらの色つきのビューは、それぞれ背景色が決まっている別のビューです。ひとつのビューの背景色という属性が変わっているわけではありません。
図1 テーブルの「Red」をクリックした移動先のビュー

「ナビゲーション・ベース」のアプリケーションを作る

「ナビゲーションベース」のテンプレートを選ぶ

では、新規プロジェクトを作成しましょう。初めて、「Navigation-based Application(ナビゲーションベースのアプリケーション)というテンプレートを選びます。
プロジェクト名(アプリケーション名にもなる)は「FirstNav」にします。

どんなテンプレートなのか

プロジェクトが作成されたら、まずそのまま「ビルドと実行」を行い、どこまでが作成されたテンプレートなのかを見届けましょう。
結果は、あまり喜べるものではありませんね。
これまで使ってきた「ウィンドウ・ベース」や「ビュー・ベース」のテンプレートとは明らかに違うのは、上部にある灰色の「バー」です。
また、その下にあるのは薄く罫線の引かれた「テーブル」です。
しかし、テーブルはカラッポです。テーブルにしろ、「灰色のバー」にしろ、どこをクリックしても何も起こりません。

とにかくテーブルの中味を書いてやろう

もし、「テーブル」について何も知らなければ、我々はここで完全に途方に暮れたことでしょう。しかし、今はとにかくこのテーブルの中味を埋めてやろう、という方針が立ちます。やってみましょう。

テーブルを記述するのはRootViewController

テーブルの中味を埋めるには、どのファイルを編集すればいいのでしょうか。Xcode上でFirstNavプロジェクトの中味を調べてみましょう。
作成されたファイルは案外少なく、「FirstNavAppDelegate」クラスの定義ファイルの他には、「RootViewController」というクラスの定義ファイルしかありません。
そこで、これを開いてみましょう。
まず、「RootViewController.h」を開きます。

書籍では事前にあっちこっちのファイルを調べたというのに、今回はロクに調べずにいきなり編集かい

と思うかも知れません。そうです。今回初めて使う「ナビゲーションベースのテンプレート」は大変妙な構造になっていますので、いきなり調べると「これ何?」「何でこうなの?」と不安ばかりが募ることになります。「知らぬが仏」というところです。

RootViewController.hは確認だけ

RootViewController.hを開くと、リスト1のようになっているでしょう。
リスト1 自動記入されたRootViewController.h
#import 

@interface RootViewController : UITableViewController {
}

@end
UITableViewControllerクラスが実装されています。「UITableViewDelegate」と「UITableDataSource」のプロトコルを実装したUIViewControllerクラスのことですね。
ヘッダ・ファイルはこのままでOKです。本記事で作成するテーブルの中味は、やっぱり簡単な固定文字列だからです。
なんと、「1最も簡単なテーブルの作り方」でアプリケーションで定義したプロパティ「theTableView」のようなプロパティも定義する必要がありません。すでに、「UITableViewController」クラスのプロパティとして最初っから定義されているからなのです。大変ラクですね。
だったら、今まで使ってきたビューベースのアプリケーションで「UIViewController」クラスを継承するという記述を「消して」、「TableViewController」クラスを継承するように書き換えれば良いじゃないか、と思うでしょう。まぁ、それで大丈夫だと思います。でも、筆者はあまり既存のテンプレートの記述を「消す」のは好きではありません。「消した」ことによるどんな「あるはずのものがないことによるエラー」が生じるかわかったものではないのです。そこで、「UIViewController」クラスを継承するという記述に、さらにテーブル関係のプロトコルを「書き加える」方法にしたのです。

RootViewController.mに自動記入されている「テーブル関係のメソッド」

次に、実装ファイルRootViewController.mを開いてみましょう。
こちらは、さらに「テーブル関係のメソッド」が自動記入されていることがわかります。以下のメソッドを確認してみてください。 では、RootViewController.mの中味を書き足していくことにします。
RootViewController.mの中味を書き足して、テーブルを表示させます