86
iPhone輪講 第3回 Lesson6&Lesson7&Lesson8

Cocoa Pro03

Embed Size (px)

Citation preview

Page 1: Cocoa Pro03

iPhone輪講第3回

Lesson6&Lesson7&Lesson8

Page 2: Cocoa Pro03

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

Page 3: Cocoa Pro03

MVCアーキテクチャとは

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

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

それがMVCアーキテクチャ

Page 4: Cocoa Pro03

モデル

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

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

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

Page 5: Cocoa Pro03

ビュー

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

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

Page 6: Cocoa Pro03

ビューの仕事

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

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

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

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

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

Page 7: Cocoa Pro03

コントローラ

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

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

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

Page 8: Cocoa Pro03

iTunesをMVCでデザインする

iTunesが扱うデータは曲

これをモデルにする

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

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

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

Track

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

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

Trackクラス

Page 9: Cocoa Pro03

iTunesのビュー

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

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

Page 10: Cocoa Pro03

iTunesのビュー

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

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

Page 11: Cocoa Pro03

iTunesのビュー

テーブルビュー

Page 12: Cocoa Pro03

iTunesのビュー

ブラウザビュー

Page 13: Cocoa Pro03

iTunesのビュー

Over Flowビュー

Page 14: Cocoa Pro03

iTunesのコントローラ

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

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

これをTableControllerとする

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

Page 15: Cocoa Pro03

iTunesのMVCデザイン

ビュー

コントローラ

モデル

TableController BrowserController CoverFlowController

Track

Page 16: Cocoa Pro03

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

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

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

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

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

Page 17: Cocoa Pro03

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

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

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

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

Page 18: Cocoa Pro03

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

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

Page 19: Cocoa Pro03

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

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

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

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

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

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

Page 20: Cocoa Pro03

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

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

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

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

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

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

Page 21: Cocoa Pro03

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

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

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

Page 22: Cocoa Pro03

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

iTunesを例で考える

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

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

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

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

Page 23: Cocoa Pro03

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

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

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

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

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

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

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

Page 24: Cocoa Pro03

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

Page 25: Cocoa Pro03

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

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

Page 26: Cocoa Pro03

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

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

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

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

ビュー

コントローラ

モデル

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

Page 27: Cocoa Pro03

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

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

アウトレット(outlet)は「コンセント」の意味

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

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

Page 28: Cocoa Pro03

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

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

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

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

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

Page 29: Cocoa Pro03

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

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

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

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

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

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

Page 30: Cocoa Pro03

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

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

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

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

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

Page 31: Cocoa Pro03

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

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

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

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

Page 32: Cocoa Pro03

アクションとは

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

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

Page 33: Cocoa Pro03

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

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

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

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

Page 34: Cocoa Pro03

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

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

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

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

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

Page 35: Cocoa Pro03

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

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

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

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

Page 36: Cocoa Pro03

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

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

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

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

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

Page 37: Cocoa Pro03

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

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

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

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

Page 38: Cocoa Pro03

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

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

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

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

アクションを呼び出す

Page 39: Cocoa Pro03

アクションはメソッド

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

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

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

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

Page 40: Cocoa Pro03

アウトレットの接続

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

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

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

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

Page 41: Cocoa Pro03

アウトレットの接続

Page 42: Cocoa Pro03

アウトレットの接続

Page 43: Cocoa Pro03

アウトレットの接続

インスタンスを選択

Page 44: Cocoa Pro03

アウトレットの接続

Page 45: Cocoa Pro03

アウトレットの接続

Page 46: Cocoa Pro03

アウトレットの接続

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

Page 47: Cocoa Pro03

アウトレットの接続

Page 48: Cocoa Pro03

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

Page 49: Cocoa Pro03

アウトレットの接続

Page 50: Cocoa Pro03

アウトレットの接続

Page 51: Cocoa Pro03

アウトレットの接続

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

アウトレットを選択

Page 52: Cocoa Pro03

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

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

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

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

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

Page 53: Cocoa Pro03

アクションの接続

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

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

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

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

Page 54: Cocoa Pro03

アクションの接続

Page 55: Cocoa Pro03

アクションの接続

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

Page 56: Cocoa Pro03

アクションの接続

Page 57: Cocoa Pro03

アクションの接続

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

Page 58: Cocoa Pro03

アクションの接続

Page 59: Cocoa Pro03

アクションの接続

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

Page 60: Cocoa Pro03

アクションの接続

Page 61: Cocoa Pro03

アクションの接続

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

Page 62: Cocoa Pro03

アクションの接続

Page 63: Cocoa Pro03

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

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

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

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

Page 64: Cocoa Pro03

接続の確認

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

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

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

Page 65: Cocoa Pro03

接続の確認

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

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

空の丸は未接続

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

Page 66: Cocoa Pro03

Lesson8チュートリアル:

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

Page 67: Cocoa Pro03

Command Line Utility カテゴリ

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

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

Page 68: Cocoa Pro03

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

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

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

1. Xcodeを起動する

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

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

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

Page 69: Cocoa Pro03

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

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

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

1. Xcodeを起動する

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

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

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

Page 70: Cocoa Pro03

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

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

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

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

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

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

Page 71: Cocoa Pro03

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

main.cを開く

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

Page 72: Cocoa Pro03

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

main.cを編集する

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

Page 73: Cocoa Pro03

実行結果

Page 74: Cocoa Pro03

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

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

1. Xcdeを起動する

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

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

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

Page 75: Cocoa Pro03

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

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

1. Xcdeを起動する

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

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

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

Page 76: Cocoa Pro03

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

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

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

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

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

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

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

Page 77: Cocoa Pro03

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

クラスファイルの作成

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

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

Page 78: Cocoa Pro03

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

クラスファイルの作成

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

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

Page 79: Cocoa Pro03

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

クラスを作成する

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

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

Page 80: Cocoa Pro03

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

クラスを作成する

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

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

Page 81: Cocoa Pro03

MyObject.hとMyObject.mの内容

MyObject.h MyObject.m

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

Page 82: Cocoa Pro03

クラスの編集

MyObject.hの編集

Page 83: Cocoa Pro03

クラスの編集

MyObject.mの編集

Page 84: Cocoa Pro03

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

Page 85: Cocoa Pro03

実行結果

Page 86: Cocoa Pro03

おわり