Cocoa Pro03

iPhone輪講第３回

Lesson6&Lesson7&Lesson8

Lesson6モデル・ビュー・コントローラ　アーキテクチャ

MVCアーキテクチャとは

MVC（Model View Controller）アーキテクチャは、アプリケーションを作るときどこから作っていけばよいのかという疑問に答えてくれるもの

アプリケーションを作るときはあらかじめどういったクラスを作るのか、どういった機能をどのクラスに割り振るのかという指針が必要

それがMVCアーキテクチャ

モデル

モデルはアプリケーションのデータを表すためのクラス

モデルクラスの中身はテキスト

仕事としてはファイルへの保存、及び読み込み

ビュー

ビューはアプリケーションの外観にあたる

ウィンドウ、ボタン、スライダー、スクロールバーなど

ビューの仕事

ユーザに見えるようにデータを表示する

テキストフィールドにはテキストを表示する、テーブルにはデータを並べるなど

ユーザからの操作を受け付ける

ユーザはマウスやキーボードを介してビューを操作する

ボタンはクリックする、テキストビューには文字を打ち込むなど

コントローラ

コントローラはモデルとビューをつなぐもの

モデルはアプリケーションのデータ、ビューはそのデータを表示するもの、その間に位置してデータをやり取りするものが必要になる

それがコントローラ。モデルとビューの両方にアクセスする

iTunesをMVCでデザインする

iTunesが扱うデータは曲

これをモデルにする

曲を表すクラスとしてTrackクラスを作る

Trackクラスは曲データを管理する

曲名、アーティスト名、アルバム名、再生時間など

Track

{ 曲名、アーティスト名、アルバム名、再生時間、

アルバムがリリースされた年… }

Trackクラス

iTunesのビュー

iTunesのビューはiTunesのユーザインタフェース

モデルとしてTrackクラスを定義したのでそれに対するビューという観点でみていく

iTunesのビュー

iTunesにはTrackをテーブルで表示するビュー、ブラウザスタイルで表示するビュー、アルバムのカバーを並べるCover Flowで表示するビューがある

これらを実現する為の部品がビューのクラスとなる

iTunesのビュー

テーブルビュー

iTunesのビュー

ブラウザビュー

iTunesのビュー

Over Flowビュー

iTunesのコントローラ

iTunesのコントローラはTrackクラスと様々なスタイルのビューの間に位置する

テーブルスタイルのビューでは、ユーザの絞り込み条件にあった曲をテーブルは位置して並べることになる

これをTableControllerとする

同様にブラウザスタイルの為のコントローラをBrowserControllerCover Flowの為のコントローラをCoverControllerとする

iTunesのMVCデザイン

ビュー

コントローラ

モデル

TableController BrowserController CoverFlowController

Track

MVCに基づくアプリケーションの作り方

ビューはCocoaが提供してくれている

アプリケーションを作るとき、ビューを作る必要はない

Interface Builderでユーザインタフェースをデザインするときパレットにあった部品

それがCocoaが提供するビュー

MVCに基づくアプリケーションの作り方

Cocoaが用意していないタイプのビュー

iTunesでいうとCover Flowを実現するようなビュー

Cocoaのビューの流儀に則って自分で作る

ビューとモデルは互いに独立

「独立」とはビューはビューだけで、モデルはモデルだけで動くようにするということ

ビューとモデルは互いに独立ビューの場合

ビューはCocoaで提供されている

あらゆるアプリケーションで使われる

特定のアプリケーションの為にデザインされているのではなく、汎用的に利用できるようになっている

こういったものを独立して動くという

いろいろなところで利用できるので再利用性が高いともいう

ビューとモデルは互いに独立モデルの場合

モデルはデータの形だけみて設計する

どういうビューで表示させるかなどは考えないようにする

iTunesの場合テーブル、ブラウザ、Cover Flowというどのビューの形を使用しても、モデルは同じにしたい

モデルはビューから独立した形でデザインする

モデルの再利用性も高まる

アプリケーション特有の機能を受け持つのがコントローラ

ビューとモデルはそれぞれ独立していて、再利用性が高い

アプリケーション特有の機能はコントローラに入れる

アプリケーション特有の機能を受け持つのがコントローラ

iTunesを例で考える

モデルであるTrackは曲情報を持っている

ビューであるテーブルビューはデータをテーブルに表示することができる

Trackをどのようにテーブルに並べるかという仕事を受け持つクラスが必要

これを受け持つのがコントローラであるTableController

モデルとコントローラのクラスを作る

アプリケーションを作るときはモデルとコントローラの為のクラスを作る

アプリケーションで扱うデータを定義する

iTunesなら曲情報、テキストエディタならテキストデータなどを管理するモデルクラスをデザインする

モデルが決まったら、Cocoaの提供するビューを使いユーザインタフェースをデザインする

モデルとビューをつなぐ為にコントローラクラスを作る

コントローラクラスの実装がプログラミングの中心となる

Lesson7アウトレットとアクション

ビューとコントローラのやり取り

モデルはアプリケーションのデータ、ビューはデータの表示、コントローラはモデルとビューの間に位置するもの

ビューとコントローラのやり取り

コントローラの仕事は２種類に分けることができる

1. モデルからデータを取得してビューに設定する

2. ユーザがビューを操作したときにビューからの通知を受けて、モデルの値を変更する

ビュー

コントローラ

モデル

値の設定 ユーザからの操作

アウトレットとアクション

アウトレットはコンセントの穴

アウトレット（outlet）は「コンセント」の意味

電気をつなぐとき本体から電源ケーブルをコンセントに差し込む

その感覚でビューとコントローラの間に関連を作る

コントローラはアウトレットを使ってビューにアクセス

アウトレットはコントローラにつける

コントローラの仕事の一つはビューに値を設定すること

その為にアウトレットを経由してビューへアクセスできるようにしている

コントローラがアクセスする必要があるビューの分だけアウトレットを作ることになる

コントローラはアウトレットを使ってビューにアクセス

アウトレットはコントローラにつける

コントローラの仕事の一つはビューに値を設定すること

その為にアウトレットを経由してビューへアクセスできるようにしている

コントローラがアクセスする必要があるビューの分だけアウトレットを作ることになる

新しいビューオブジェクトを追加したらアウトレットも追加する

コントローラはアウトレットを使ってビューにアクセス

アウトレットはコントローラにつける

コントローラの仕事の一つはビューに値を設定すること

その為にアウトレットを経由してビューへアクセスできるようにしている

コントローラがアクセスする必要があるビューの分だけアウトレットを作ることになる

アウトレットはインスタンス変数

アウトレットを追加すると、コントローラクラスにはインスタンス変数として追加される

Hello Worldを作ったときのコントローラクラスのファイルAppController.hを開く

IBoutletで始まる文が、アウトレットの為のインスタンス変数

アクションとは

アウトレットがビューを参照するのに対して、アクションはビューからの通知を受け付けるもの

これでユーザの操作に対応する処理を行うことができる

アクションの登録、発生、呼び出し

まずビューにアクションを登録する

ユーザからの操作があると、登録したアクションが呼び出される

ユーザの操作に対応する処理を行うことができる

アクションの登録、発生、呼び出し

まずビューにアクションを登録する

ユーザからの操作があると、登録したアクションが呼び出される

ユーザの操作に対応する処理を行うことができる

1.ビューにアクションを登録する

アクションの登録、発生、呼び出し

まずビューにアクションを登録する

ユーザからの操作があると、登録したアクションが呼び出される

ユーザの操作に対応する処理を行うことができる

アクションの登録、発生、呼び出し

まずビューにアクションを登録する

ユーザからの操作があると、登録したアクションが呼び出される

ユーザの操作に対応する処理を行うことができる

2.ユーザがボタンをクリックする

アクションの登録、発生、呼び出し

まずビューにアクションを登録する

ユーザからの操作があると、登録したアクションが呼び出される

ユーザの操作に対応する処理を行うことができる

アクションの登録、発生、呼び出し

まずビューにアクションを登録する

ユーザからの操作があると、登録したアクションが呼び出される

ユーザの操作に対応する処理を行うことができる 3.登録している

アクションを呼び出す

アクションはメソッド

アクションの実態はメソッド

Hello Worldを作ったときのコントローラクラスのファイルAppController.hを開く

IBActionで始まる文がアクションの為のメソッド

Sayボタンを押すとメソッドが呼び出される

アウトレットの接続

アウトレットを持っているインスタンスを選択する

コントロールキーを押しながらドラッグすると線が延びてくる

この線を接続先に持っていき、ターゲットとなるユーザインタフェース上でドロップする

アウトレットを表示する黒いウィンドウが開くので、接続するアウトレットを選択する

アウトレットの接続

アウトレットの接続

アウトレットの接続

インスタンスを選択

アウトレットの接続

アウトレットの接続

アウトレットの接続

コントロールを押しながらドラッグ

アウトレットの接続

アウトレットの接続選択先の上でドロップ

アウトレットの接続

アウトレットの接続

アウトレットの接続

黒いウィンドウが開くので、

アウトレットを選択

ウィンドウをアウトレットに接続

接続できる対象はウィンドウ上の部品だけでない

ウィンドウそのものをつなぐこともでき、他のインスタンス化したオブジェクトも接続できる

xibウィンドウ上にあるインスタンスならどれでも接続できる

ウィンドウをアウトレットに接続

アクションの接続

アクションを送るユーザインタフェースを選択

コントロールキーを押しながらドラッグ

アクションを送るインスタンスの上でドロップ

アクションを表示する黒いウィンドウが開くので、そこからアクションを選択する

アクションの接続

アクションの接続

ユーザインタフェースを選択

アクションの接続

アクションの接続

コントロールキーを押しながらドラッグ

アクションの接続

アクションの接続

インスタンスの上でドロップ

アクションの接続

アクションの接続

黒いウィンドウが開くので、アクションを選択

アクションの接続

メニューからのアクションの接続

アクションはメニューからも接続できる

メニューを選択すると、そのアクションが呼び出されることになる

メニューからのアクション接続

接続の確認

アウトレットとアクションの接続の確認をする

対象となるインスタンスをコントロールキーを押しながらクリック

黒いウィンドウに接続可能な項目と、現在の接続状況一覧が表示される

接続の確認

黒いウィンドウの右端の丸が接続状況を表している

白で塗りつぶされた丸は、接続されている

空の丸は未接続

バツボタンをクリックすれば接続が解除される

Lesson8チュートリアル：

文法の実験のためのプロジェクト

Command Line Utility カテゴリ

コマンドラインのアプリケーションを作る為のテンプレート

C言語やのためのテンプレートや、Cocoaのクラスの実験をしたいときの為のテンプレートなどがある

C言語実験の為のプロジェクト作成

C言語のための実験環境を作る

「Standard Tool」というテンプレートを利用する

1. Xcodeを起動する

2. プロジェクトを作成する

[ファイル]→[新規プロジェクト...]メニューを選択

Command Line Utilityカテゴリの下のStandard Toolを選択

C言語実験の為のプロジェクト作成

C言語のための実験環境を作る

「Standard Tool」というテンプレートを利用する

1. Xcodeを起動する

2. プロジェクトを作成する

[ファイル]→[新規プロジェクト...]メニューを選択

Command Line Utilityカテゴリの下のStandard Toolを選択

C言語実験の為のプロジェクト作成

C言語の為の実験環境を作る

3. プロジェクト名は「C Test」としておき、適当な場所に保存

これでプロジェクト作成は完了

プロジェクトに登録されているファイルを確認

main.cがC言語を書く為のファイル

C言語実験の為のプロジェクト作成

main.cを開く

// insert code here...というところにコードを追加していく

C言語実験の為のプロジェクト作成

main.cを編集する

囲まれた部分が追加された行

実行結果

Objective-Cの実験のためのプロジェクト作成

Objective-Cの為の実験環境を作る

1. Xcdeを起動する

2. プロジェクトを作成する

[ファイル]→[新規プロジェクト...]メニューを選択

Command Line Utilityカテゴリの下のFoundation Toolを選択

Objective-Cの実験のためのプロジェクト作成

Objective-Cの為の実験環境を作る

1. Xcdeを起動する

2. プロジェクトを作成する

[ファイル]→[新規プロジェクト...]メニューを選択

Command Line Utilityカテゴリの下のFoundation Toolを選択

Objective-Cの実験のためのプロジェクト作成

Objective-Cの為の実験環境を作る

3. プロジェクト名は「ObjC Test」としておき、適当な場所に保存

完了ボタンを押してプロジェクト作成は完了

プロジェクトに登録されているファイルを確認

C言語では.cという拡張子がコードを書く為のファイル

Objective-Cでは.mがコードを書く為のファイル

Objective-Cの実験のためのプロジェクト作成

クラスファイルの作成

1. ファイル→新規ファイルメニューを選択

2. Cocoaのカテゴリ下にある「Objective-C class」のテンプレートを選択

Objective-Cの実験のためのプロジェクト作成

クラスファイルの作成

1. ファイル→新規ファイルメニューを選択

2. Cocoaのカテゴリ下にある「Objective-C class」のテンプレートを選択

Objective-Cの実験のためのプロジェクト作成

クラスを作成する

3. ファイル名は「MyObject.m」とする

「同時に”MyObject.h”も作成する」のチェックボックスもオンにしておく

Objective-Cの実験のためのプロジェクト作成

クラスを作成する

3. ファイル名は「MyObject.m」とする

「同時に”MyObject.h”も作成する」のチェックボックスもオンにしておく

MyObject.hとMyObject.mの内容

MyObject.h MyObject.m

これがObjective-Cでのクラス宣言と実装になる

クラスの編集

MyObject.hの編集

クラスの編集

MyObject.mの編集

クラスの編集MyObject.mの編集

実行結果

おわり