第01講 My Very First App
印刷を御希望の方はページ一番下の「印刷用ページ」より印刷してくださいね。
PDFファイルとして保存したい場合も「印刷用ページ」より保存できます。
見出しに「★」マークがついた箇所は説明動画がございます。
★第1講のポイント
【動画】第1講のポイント
※動画画面の右下のアイコンをクリックすると全画面表示になります
- MacにiOSアプリの開発環境を構築し、Xcodeの使い方に慣れる。
- iOSアプリの基本的な仕組み、ボタンや文字列の表示方法を学ぶ。
はじめに
RainbowApps「iOSマスターコース」へ、ようこそ！今日からあなたもiOSアプリ開発者の仲間入りとなります。具体的なアプリ開発の解説に入る前に、このコースの全体的な説明と目標について説明します。
このコースは全20講の講義を通して、プログラミングの基礎から、よく使われるiOSアプリの機能を実装するスキルまでを一通りカバーし、初心者でもある程度のアプリ開発を行うスキルがつくよう、設計されています。各講それぞれ、1つの独立したデモアプリを製作し、修了時には20個のアプリを完成させることができます。
まず、最初の5講はプログラミングの基礎を習得することに重点が置かれています。ご存知の方も多い方と思いますが、iOSアプリはObjective-Cという言語を使用して記述されています。Objective-Cはアップル社がC言語をペースに開発した言語で、主にMac OS XやiOSのアプリ制作に利用されています。最初の5講の大きな目標は、このObjective-Cを学ぶとともに、アプリ開発に使うツールであるXcodeの使い方に慣れ、よく使われる基礎的なプログラミングテクニックを習得することとなります。
基礎を習得した後の後半15講は、iOS SDK（Apple社が提供するiOSアプリの開発ツールキット）が提供するフレームワーク（アプリの基本機能を提供する基盤）の使い方を重点的に学びます。このフレームワークを有効に活用することによって、iOSの特徴とされる、高度なユーザーインタフェースを自分のアプリに簡単に取り入れることができます。また、iPhoneやiPadが装備するカメラや様々なセンサーのデータに取得することができます。オリジナルアプリを製作する際は、これらフレームワークを独自に組み合わせることによって、必要な機能を実装したり、今までにない新たな経験を生み出したりすることになります。後半15講では、これらの基本的な使い方を学び、その活用方法を学ぶことが大きな目標となります。
iOSアプリ開発やプログラミングは、スポーツと共通している部分があります。野球やテニスなどのスポーツでは、練習量がスキル上達に直結するように、プログラミングでも「練習」することで、より早くスキルを上達させることができます。慣れるまでは、苦労することもあるかと思いますが、ここに書かれている内容を一度やって満足するのではなく、別々に解説されている機能や内容を組み合わせたり、自分流にアレンジしたりと、積極的に手を動かすことをおすすめします。そうすることで、自分のアイデアをアプリ上で具現化する上で最も重要となる「応用力」を養うことができるでしょう。
また、「わからないこと」や「解決できない問題」に遭遇した場合は、テキストの内容をおさらいすることも有効ですが、積極的にウェブで検索することも一層有効です。ウェブ上は世界中のアプリ開発者が集う空間でもあり、効果的なプログラミングテクニックから、それぞれが遭遇した問題やその解決方法まで、様々な情報がやり取りされています。これらをぜひ有効活用してみてください。
それでは、早速、アプリ開発を始めていきましょう！
My Very First Appの作成
このセクションでは、Xcodeの使い方を解説するとおもに、「とりあえず、動くアプリ」を制作します。今回製作するアプリは、その名も「My Very First App」。画面上のボタン押すことによって、「祝！初アプリ！」の文字列が表示されたり、消えたりするアプリです。
★Xcodeの起動と新規プロジェクトの作成
【動画】Xcodeの起動
※画面右下のアイコンをクリックすると全画面表示になります
Xcodeとは、iOSアプリ開発に必要なすべてのツールがひとまとめになったソフトウェアです。まず、Xcodeを起動します。「アプリケーション」フォルダにある「Xcode」のアイコンをダブルクリックします。
※今後の利便性のためにも、このタイミングでDockにも追加しましょう。
【動画】新規プロジェクトの作成
※画面右下のアイコンをクリックすると全画面表示になります
次に、新規アプリケーションを作成します。起動画面の「Create a new Xcode Project」と書かれたボタンをクリックしましょう。
作りたいアプリのテンプレートを選択します。今回は最もシンプルな「Single View Application」というテンプレートを利用します。
テンプレートを選択後、作りたいアプリに応じて、設定を施します。「Product Name」はこのプロジェクトの名前、「Company Identifier」と「Bundle Identifier」はそれぞれ、App IDに紐付く値となります。アプリを実機上動作させる場合、必ず、プロビジョニングプロファイルに紐付くApp IDと一致する値を入力してください。今回は以下のように設定します。
| Product Name |
MyVeryFirstApp |
| Oganization Name |
任意（"RainbowApps"など自分が所属している組織の名前を入れる） |
| Company Identifier |
com.rainbowapps |
| Class Prefix |
（未入力） |
Devices
|
iPhone |
Use Storyboard
|
チェックを入れる |
Use Automatic Reference Counting
|
チェックを入れる |
| Include Unit Tests |
チェックを入れる |
本テキストに沿って作成するアプリは、今後必ずCompany Identifierに「com.rainbowapps」と入力し、「Use Storyboard」、「Use Automatic Reference Counting」、「Include Unit Tests」すべてにチェックを入れるようにしてください。
「Next」をクリックし、プロジェクトフォルダを保存する場所を指定してください。通常、1つのプロジェクトは1つのフォルダとしてまとめられます。以下にその基本的な構成（Xcodeのバージョン等によって、若干異なる場合もあり）を記します。これらの中で、赤字で記されたファイルは、重要的に編集するファイルです。なお、App DelegateやView Controller、Storyboardについての詳細は後述します。
★Xcodeの画面構成と用語
【動画】Xcodeの画面構成と用語
※画面右下のアイコンをクリックすると全画面表示になります
これまでの手順で、iOSアプリを作成するための「土台」が整ったことになります。ここで、Xcodeというソフトウェアの基本的な画面構成と頻出用語について説明します。
まず、Xcodeを起動すると以下のような画面が表示されます。大きく分けて、5つのエリアに別れており、上部によく使うボタンが配置されています。
＜Xcode画面の各部分の名称及び内容＞
| ナビゲーターエリア |
主に、編集するファイルを選択します。 |
| エディターエリア |
選ばれたファイルに応じて、適切な編集画面が表示されます。 |
| デバッガーエリア |
プログラム実行時の様々なデバッグメッセージが表示されます。 |
| ライブラリーエリア |
iOS SDKに標準で備わっているボタンやリスト等のオブジェクト、さらには、独自に追加した画像素材等を選択します。 |
| インスペクターエリア |
選択されたファイルやオブジェクトの設定の変更や確認を行います。 |
★アプリの実装
いよいよ、本格的なアプリの実装を行なっていきます。今回制作するアプリの画面上には、「祝！初アプリ！」という文字列と、ボタンを配置します。このボタンを押すと、文字列が消えたり、表示されたりするという、ごく単純なアプリです。アプリの実装は主に、次の段階に区別することができます。
- 外部から素材（背景画像・アプリのアイコン）を取り込み（インポート）
- アプリの設定（アイコンやタイトル等の定義）
- アプリ画面のデザイン（画面上にボタンと文字列の配置）
- コードの記述（ボタンを押した時の処理など）
- コード上の処理とUIオブジェクトとの紐付け
この手順は、どのようなアプリを作るにあたっても共通となります。これらの手順も一度で覚える必要ありませんが、使っていくうちに慣れるようにしましょう。それでは、順を追って作業を進めましょう。
★外部素材のインポート
【動画】外部素材のインポート
※画面右下のアイコンをクリックすると全画面表示になります
まず、下記リンクから今回のアプリで使用する背景画像とアプリのアイコン画像を取り込みます。
ナビゲーターエリアの上部にある「MyVeryFirstApp」を右クリックし、「Add Files to “MyVeryFirstApp”…」をクリックします。
次に、取り込みたいファイルを選択します。ダウンロードフォルダの中に、今回使用する背景画像とアイコンのファイルが入っているので、それらを選択します。外部からファイルを取り込む際、必ず、「Copy items into destination group’s folder (if needed)」にチェックが入っていることを確認します。選択が完了したら、「Add」をクリックします。
外部ファイルを取り込む際、ファイルの形式に注意を払う必要があります。例えば、アプリ上で使用する画像は、基本的にすべて「PNG形式」でないといけません。画像以外でも、ファイルの種類ごとに、利用できる形式に制限がある場合があるので、インポートする際に確認するようにしましょう。
★アプリの設定
【動画】アプリの設定
※画面右下のアイコンをクリックすると全画面表示になります
アプリの全体的な設定を施していきたいと思います。ここで言う「設定」とは、アプリのアイコンやタイトルを定義したり、アプリの動作時のオプションを選択したりすることを指します。
最初は、アイコンから設定したいと思います。アプリのアイコンは、ホーム画面上に表示されるアプリ起動ボタンの画像を示します。ユーザーの興味を引かせるために、アイコン画像はシンプルでエレガントなデザインを心がけましょう。
設定を行う前に、アイコン画像については、いくつか注意する点があります。当然、画像の形式は「PNG形式」でなくてはいけないのですが、アイコンの場合、その大きさにも制約があります。アイコンにはいくつか種類があり、それぞれが必要とするサイズを以下にまとめます。
| iPhone用アイコン |
57 x 57 px |
| iPhone（Retina Display）用アイコン |
114 x 114 px |
| iPad用アイコン |
72 x 72 px |
| iPad（Retina）用アイコン |
144 x 144 px |
それでは、実際の設定作業を行います。今回は簡略化のため、114 x 114 pxのiPhone（Retina Display）用のアイコン1つのみを設定します。ですが、今後自分のアプリを作成する場合は、対応デバイスに応じて、それぞれのアイコンを設定されることをお勧めします。
まずは、ナビゲーターエリアから、プロジェクトを選択します。今回の場合は、「MyVeryFirstApp」をクリックします。この時、エディターエリアには、以下のような画面が表示されます。これは、Project Editorと呼ばれ、プロジェクト全体の設定の確認、および変更ができます。アイコンの設定もこの画面から行います。
Media Libraryから、「icon.png」を「App Icons」以下の「Retina Display」と書かれているボックスにドラッグ＆ドロップしてください。アイコンを設定後、制作作業はすべて完了となります。
次に、サポートするDevice Orientation（デバイスの向き）に関する設定を行っていきます。iOSアプリの中には、デバイスを回転させると同時に、画面の向きも回転させたり、向きに応じて全く新しい画面を表示させたりするものがあります。ここでは、自分の作るアプリがどの「向き」をサポートするかの設定を行います。
実際の設定は、アイコンの設定欄の一つ上の「Supported Device Orientations」で行います。自分のアプリがサポートする「向き」のボタンを選択して下さい。今回の場合、時の横向きや上下逆さ向きの画面は用意しません。したがって、「Portrait」以外のボタンは選択を解除してください。
最後に、タイトルの設定を行っていきます。どのようなアプリでも、テンプレートからアプリを作成する場合、アプリのタイトル表示（アイコンの下に表示される文字列）はデフォルトでプロジェクト名と同等となります。すなわち、今回の場合は「MyVeryFirstApp」がそのままタイトル表示となります。しかし、ユーザーから見た場合、これでは少々見辛いので、一目でわかるものに変えていきます。
iOSアプリの場合、アプリのタイトル表示の長さに特に制限はありません。しかし、長すぎるとアプリのアイコンの下部に収まりきらず、「MyVe….stApp」というように、省略した状態で表示されてしまいます。これでは、見栄えもあまり良いとは言えません。通常、タイトル表示を半角13文字（全角6文字）以内に収めると、省略されずに全てアイコンの下に表示されます。そこで、今回は表示するタイトル名を「First App」（空白を含め、半角9文字）とします。
タイトル表示を変更するためには、アイコンの設定同様、Project Editorを利用します。まず、Project Editorの「Info」タブを選択します。そうすると、アプリの各種設定値の一覧が表示されます。その中から、「Bundle display name」と書かれたキーを探し、その値をダブルクリックします。値のテキストが編集可能になるので、「My First App」と書き換え、returnキーを押します。
★アプリ画面のデザイン
【動画】アプリ画面のデザイン
※画面右下のアイコンをクリックすると全画面表示になります
何よりも見た目から、ということで、アプリ画面のデザインを行なっていきます。以下の手順に従って、ボタンとラベル（文字列）の配置を行い、アイコンファイルを設定して下さい。ナビゲーターエリアから、「MainStoryboard.storyboard」を選択します。そうすると、以下のようなInterface Builderが表示されます。この中央の画面が、アプリの画面と考えて下さい。この白い部分に背景画像やボタン、ラベルをセットしていきます。
ライブラリーエリアを、Media Libraryに切り替え、先ほどインポートした素材が表示されていることを確認してください。今後、外部から取り入れた素材をインターフェースに取り入れる際、ここから参照します。
次に背景画像をセットします。Media Libraryのリストからearth.pngをInterface Builder上にドラッグ＆ドロップし、配置する位置を調整して下さい。
ライブラリーエリアを、Object Libraryに切り替え、「Label」オブジェクトを画面上に配置してください。この「Label」オブジェクトとは、アプリ画面上で文字列を扱うための「箱」のようなものです。Object Libraryには、他にも有用なユーザーインターフェースオブジェクト（アプリ画面上で使う事ができるボタンなど）がXcodeの中であらかじめ用意されています。今後、それらを適宜使っていくので、画面上への追加の仕方を覚えておいて下さい。
配置直後のLabelはもともとの設定で「黒」です。少々見辛いかと思うので、フォントの色を「白」にし、サイズを少し大きくしましょう。フォントを調整するには、Labelを選択した上で、インスペクターエリアを「Attributes Inspector」に変更します。このインスペクターから、当該ラベルのフォントなどを変更することが可能です。このように、インスペクターを用いて、オブジェクトやファイルの設定や属性を変更することができます。
画面上に配置された、ラベルオブジェクトをダブルクリックして、文字を「祝！初アプリ！」に書き換えます。このように、インターフェース上のテキストはダブルクリックすることによって、編集することができます。一方で、ここで書き換えた内容はあくまで、起動時に表示される初期値であり、コード上の処理によって、動的に書き換えることもできます。そのやり方は今後、取り扱っていきます。
ラベル同様に、今度はObject Libraryから「Round Rect Button」オブジェクトを画面上に配置し、そのテキストを「ボタン」と書き換えます。
ここまでの作業で、アプリ画面のデザインは完了となります。以下のような画面ができていれば、成功です。完了後、必ず保存してください。
★コードの記述
【動画】コードの記述
※画面右下のアイコンをクリックすると全画面表示になります
アプリ画面のデザインが完了したら、次はコードの記述を行います。前述した通り、iOSアプリはObjective-Cという言語を用いて、記述されています。このObjective-Cは、C言語をベースにApple社がアレンジしたオブジェクト指向型の言語であり、C言語のコードもそのまま活用できます。このあたりの詳しい説明は今後行なっていきますが、とりあえず今回は難しいことは何も考えずに、コードを記述してみてください。
今回、改変するコードのファイルは1つだけです。ナビゲーターエリアから、「ViewController.m」を選択し、以下のように書き換えます。編集した後はしっかり保存しましょう。
ViewController.m
|
@implementation ViewController{
//ラベル用のインスタンス
IBOutlet UILabel *myLabel;
//ボタン用のインスタンス
IBOutlet UIButton *myButton;
}
//ボタンが押されたときの処理
-(IBAction) buttonPushed{
//myLabelが「表示」の場合は「非常時」に、「非表示」の場合は「表示」に
if(myLabel.isHidden == NO){
[myLabel setHidden:YES];
} else {
[myLabel setHidden:NO];
}
}
|
このコードにある、「myLabel」とは、UILabelクラスのインスタンスです。メソッド同様、クラスやインスタンスの詳細も今後、随時解説していきます。現段階では、「myLabel」は画面上のLabelと密接に関係しあい、そのコントロールをコード側から行うものと考えてください。一方で、コード上の「myButton」は、UIButtonクラスのインスタンスです。「myLabel」と同様、現時点では、画面上のボタンと連携しながら制御を行うものと考えてください。
さらに、ここにある「IBAction」とは、メソッドの型（返り値）を示すものです。この場合は、「buttonPushed」というメソッド（処理）がUIオブジェクト上で発生するイベント（ボタンを押す、選択肢を変更する、など）に付随するものだということを明示しています。
「//」で始まる行は「コメント」と呼ばれる行です。このコメントは人間がコードを読む際に、コードの説明のメモ書き等を残せる仕組みとなっています。コンピュータ（iOSデバイス）は、プログラムを実行する際、全てのコメントを無視するため、コードの動作に影響を及ぼすことなく、コードの説明を記述することが可能となっています。自分でコードを記述する際、コメントを積極的に活用し、誰にとっても理解しやすいコードを目指しましょう。
★コード上の処理とUIオブジェクトとの紐付け
【動画】コード上の処理とUIオブジェクトとの紐付け
※画面右下のアイコンをクリックすると全画面表示になります
コード上の記述を終えたら、いよいよ、その処理とUIオブジェクトを紐付けします。つまり、「○○というボタンが押されたら、コード上の☓☓という処理を実行する」という指示を、アプリに与えます。
ちなみに、ここで言う「コード上の処理」とは、正しくは「メソッド」と呼ばれています。メソッドに関する解説は、今後行いますので、とりあえず今は、「コード上に処理の内容を示したもの」と考えて下さい。
それでは、実際に作業を行いましょう。今回のアプリでは、ユーザーの操作によって、以下の２つの「動き」が発生します。このようなユーザーの操作に対するアプリの「動き」の関係を、インタラクションといいます。
- ボタンを押したら、「祝！初アプリ！」が消える
- 再度ボタンを押したら、「祝！初アプリ！」が表示される
これらを勘案し、まずは、ボタンが押された時のイベントと、その時に呼び出される処理を結び付けます。MainStoryboard.storyboardを開き、ボタンを右クリックします。そうすると、以下のような画面が表示されます。
このリスト中の「Touch Up Inside」に着目し、その欄の右側にある円をクリックします。クリックしたまま、カーソルを左側にある「View Controller Scene」以下にある、「View Controller」へ動かし、ドラッグ＆ドロップします。
その後、表示されるリストの中から、「buttonPushed」を選択します。この「buttonPushed」は、先程記述したコード中の「buttonPushed」と対応しています。「Touch Up Inside」というのは、ボタンが押されて、指が離れる動きを検知する仕組みなので、この段階で、「ボタンが押された」というイベントが検知された場合、「buttonPushed」という処理（メソッド）が実行されるということになります。なお、ここで、「buttonPushed」が表示されない場合はしっかり「ViewController.m」が保存されていることを確認してください。
紐付けが終わったら、再度ボタンを右クリックし、Touch Up InsideとbuttonPushedが関連付いていることを確認してください。
次に、ラベルについて考えていきましょう。紐付け作業を行う前に、まず、コードを見てください。先ほど記述したコードに、以下のような部分があったかと思います。
ViewController.m
|
if(myLabel.isHidden == NO){
[myLabel setHidden:YES];
} else {
[myLabel setHidden:NO];
}
|
上記の、「myLabel setHidden:YES」という記述は、「myLabelというラベルを非表示にせよ」という処理を意味しています。同様に、「myLabel setHidden:NO」という記述は、「myLabelというラベルを表示にせよ」という処理になります。
そこでここにある「myLabel」と、画面上のラベルを紐付けたいと思います。ボタンの時と同様に、ラベルオブジェクトを右クリックし、「New Referencing Outlet」の欄にある円とクリックしながら、「View Controller」にドラッグ＆ドロップして下さい。
その後、表示されるリストから、「myLabel」を選択することによって、「祝！初アプリ！」と書かれたラベルと、「myLabel」が関連付けられ、コードから表示・非表示を制御できるようになります。
ここまでの作業で、「ラベル表示中にボタンを押す」→「ラベルを非表示」という処理が可能になります。また、その逆も然りです。故に、ボタンによってラベルの状態を制御するというインタラクションが実現したことになります。
★My Very First Appのビルドと実行
【動画】アプリのビルドと実行
※画面右下のアイコンをクリックすると全画面表示になります
ここまでの内容で、開発環境構築からXcodeの基本的な使い方を学びながら、My Very First Appの制作を完了しました。いよいよ、作ったアプリを動かすところまでやっきました。このセクションでは、アプリのビルド、及び実行方法を解説します。
ビルドとは？
プログラミングの経験がある方はご存知かと思いますが、アプリは作成したら、すぐに実行できるわけではありません。実行する前にソースをビルド（コンパイル）する必要があります。
昨今のコンピュータは、実に様々な使い方ができるため、「物凄く頭がいい」と思われるかもしれません。しかし、実は、コンピュータはあくまで、人間の命令した通りにしか動けないのです。プログラム（アプリ）のソースコードを「命令書」に例えるなら、ビルドとは、「人間の理解できる命令書を、コンピュータ（iPhoneなど）が理解できる機械語に翻訳する作業」に値します。ソースコードをビルドすることで、初めてアプリがiOSデバイス上で動くようになるのです。
Xcodeを用いたビルドと実行
Xcodeでは、ソースコードを記述したり、インターフェースをデザインしたりすることができる以外に、作成したものをビルドし、さらには実行するという機能を備えています。ここでは、シミュレーター上での実行と、実機上での実行、それぞれの場合に併せて、その手法を解説します。
シミュレーター上でのビルドと実行
まず、シミュレーター上でのビルドと実行の手法を説明します。画面上部にある実行環境の設定（Schema）が「MyVeryFirstApp > iPhone 6.0 Simulator」になっていることを確認します。
その後、「Run」ボタンを押します。通常はこの操作によって、自動的にアプリがビルドされ、実行されます。しばらくすると、iOSシミュレーターが立ち上がり、My Very First Appが起動します。ソースの大きさや使っているPCの仕様によって、多少ビルドと実行に時間がかかる場合もあります。
無事に起動した方、おめでとうございます！初めてのiOSアプリの完成の瞬間です！
起動後、ボタンを押すと、正常に「祝！初アプリ！」の文字列が消えることを確認してください。また、ホームボタンを押し、ホーム画面上にアプリのアイコンが表示されていることも確認してください。
シミュレーターは便利である一方、センサーやカメラを利用できない、物理的な動き（iPhoneを振るなど）を反映することができないなど、様々な制約があります。アプリの種類にもよりますが、特に事情が無い限り、実機上でビルドと実行を行うことをお勧めします。
実機上でのビルドと実行
次に、iPhoneの実機上で実行してみましょう。まず、実機をUSBケーブルでPCと接続します。正常に認識されると、画面上部にある実行環境の設定（Schema）に以下のような選択肢が追加されます。設定が「MyVeryFirstApp > 【所有者の】iPhone」になっていることを確認します。
また、Project EditorのBuild Settingsで、正しいプロビジョニングプロファイルが選択されていることも確認して下さい。通常、自動的に冒頭で登録したプロファイルが自動的に選択されているはずです。もし、正しいものが選択されていない場合は、適宜修正してください。
その後、「Run」ボタンを押します。ここで、プロビジョニング手続きの一部にでも不都合があると、ビルドと実行が失敗してしまいます。この段階で、プロビジョニングエラーが発生し、失敗する場合は、再度プロビジョニングのプロセスに間違いが無いかを見直して下さい。全てが正常にビルドされると、自動的に本体に転送され、実行されます。以下に正常に実行されたときのイメージを示します。
★iOSアプリの基本的な仕組みと構成
【動画】iOSアプリの基本的な仕組みと構成の解説
※画面右下のアイコンをクリックすると全画面表示になります
無事、シミュレーターや実機でアプリを動作させることに成功した方、本当にお疲れ様でした。最後に、教取り扱ったコードを元に、iOSアプリの基本的な仕組みと構成を解説します。
iOSアプリプロジェクトの構成
iOSアプリを構成する主なコンポーネントとしては、App DelegateやView Controller、Storyboardが挙げられます。
App Delegateとは
App Delegateは、いわば、「連絡役」として、iOS本体とアプリの間に立って、イベント（ホームボタンが押された、デバイスがスリープした、など）の発生の通知に使用されます。また、アプリの中でも、様々なクラス（画面・部品等）が互いにイベント（入力を受け取った、アイテムが選択された、など）の発生を通知しあう用途でも使われます。このように、イベントの発生を通知することを、「Delegate通知する」と表現することが多いので、覚えておいてください。
View Controllerとは
View Controllerは、それぞれの「画面の管理人」です。基本的には、画面1つに対して、1つのView Controllerが対になっており、それぞれの画面内における処理などを受け持っています。My Very First Appの場合は画面が1つしかないため、View Controllerも1つです。ですが、複数の画面を持つアプリの場合、一部の例外を除き、基本的には画面の数だけView Controllerが必要となります。
Storyboardとは
Storyboardは、各画面の「設計図」のようなものです。各画面において、どの場所にどのようなオブジェクト（ボタンやラベル）を配置するかを管理しています。また、アプリに複数の画面がある場合、それぞれの遷移の手法等も管理しています。
iOSアプリ上の画面を作りあげるためには、以下の手法があります。
- Storyboardを使う（iOS 5 SDKから新規登場）
- XIBファイルを使う（iOS 4 SDK以前の主流）
- Objective-CのUI描画コードを、直接View Controllerに記述する
これらのうち、最も手軽なのはStoryboardを用いる手法ですが、XIBファイルを使う手法も依然として多く用いられています。また、状況次第では直接描画コードをソースに記述しなくてはいけない場合もあります。iOSマスターコースでは、後半戦でXIBファイルや描画コードを用いたUI画面構築も取り扱うので、ご安心ください。
以下にApp DelegateとView Controller、Storyboardの相関関係をまとめます。App Delegateは全体のコーディネーションを行い、View Controller同士を管理します。View ControllerはStoryboardと密接に連携を取りながら、ユーザーからの入力を元に処理を行ったり、処理結果を画面表示に反映したりと、ユーザーインタラクションの重要部分を担っています。
★プログラムコード
【動画】プログラムコードについて解説
※画面右下のアイコンをクリックすると全画面表示になります
iOSアプリの構成コンポーネントの中でも、AppDelegateとView ControllerはObjective-Cで記述されます。ここでは、AppDelegateのコードの中身を解説します。
インターフェースファイル（.hファイル）
インターフェースファイル（.hファイル）は、主に、そのコードに登場する「登場人物」のようなものを予め宣言しておく用途で使用されます。宣言すべき「登場人物」は今後説明していきますが、現段階では、「登場人部の登場を宣言するもの」として認識しておいてください。
一方で、実装ファイル（.mファイル）は「台本」のような役割を担っています。各々の登場人物が何を考え、どのように動き、何を話すべきかと記しています。
インターフェースファイルと実装ファイルは常に対になっており、どちらか一方を欠かすことはできません。参考までに、そのつながりは、実装ファイルがインターフェースファイルをimportすることによって成立しています。その記述は実装ファイルの最初になされています。
AppDelegate.m
★App Delegateインターフェースファイル
【動画】AppDelegateインターフェースファイルの解説
※画面右下のアイコンをクリックすると全画面表示になります
インターフェースファイルで前述したとおり、「登場人物」の立ち位置（役割）の定義を行うために使われます。以下にMy Very First AppのApp Delegateのインターフェースファイルを示します。
AppDelegate.h
|
#import <UIKit/UIKit.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (strong, nonatomic) UIWindow *window;
@end
|
今回は、テンプレートのデフォルト状態から改変する必要がありませんでしたが、念のため、その役割を簡単に解説します。
まず、インターフェースファイルにおける「登場人物」の宣言は、「@interface」と「@end」の間にすべて記述します。ソースからも見て取れるように、このファイルは「AppDelegate」のインターフェースファイルとなっていることがわかります。
「＠property」からはじまる行が、ある登場人物「window」の立ち位置（性質）のようなものを宣言しています。これはプロパティーの設定と呼ばれ、登場人物が外部と連携するためには必須となります。プロパティーの設定については、今後よく扱っていきますが、現段階では、そのようなものが存在するということが認識できていれば大丈夫です。
★App Delegate実装ファイル
【動画】AppDelegate実装ファイルについて解説
※画面右下のアイコンをクリックすると全画面表示になります
App Delegateの実装ファイルですが、前述したとおり、登場人物のやるべき事が書かれています。さらに、iOS本体とアプリの橋渡し役となるにあたり、スリープ時の処理、再開時処理等が記述されています。以下にApp Delegateの実装ファイルを省略したものを示します。実際には、自分のXcodeの画面上にあるソースコードを見ながら、後述の解説を読んで下さい。
AppDelegate.m
| #import "AppDelegate.h"
@implementation AppDelegate
@synthesize window = _window;
-(BOOL)application: didFinishLaunchingWithOptions{
}
-(void)applicationWillResignActive{
}
-(void)applicationDidEnterBackground{
}
-(void)applicationWillEnterForeground{
}
-(void)applicationDidBecomeActive{
}
-(void)applicationWillTerminate{
}
@end
|
インターフェースファイル同様、「@implementation」と「@end」の間にすべての内容を記述する必要があります。この中で、「applicationWillResignActive」や「applicationDidBecomeActive」などの処理（メソッド）はデバイスがスリープ状態に入るとき、またはアクティブ状態に戻るときに呼ばれるものです。さらに、「applicationDidEnterBackground」や「applicationDidBecomeActive」は、アプリがバックグラウンドに回っとき（一度ホーム画面に戻った時など）やフォアグランド（前面にアプリ画面がある状態）に戻った時に呼ばれます。最後に、「applicationWillTerminate」はアプリが終了する直前に呼ばれます。
これら処理のなかに、独自の命令を仕込むことによって、スリープ時も現在地を取得し続けることや、終了前に状態を保存することができるようになります。
最初はよく理解できないかもしれませんが、いずれアプリ開発の経験を積むうちに必然的にこれらは理解できるようになりますので、安心してください。
★View Controllerのプログラムコードの構成
【動画】ViewControllerプログラムコードの構成の解説
※画面右下のアイコンをクリックすると全画面表示になります
ここでは、View Controllerのプログラムコードの解説を行います。View ControllerもApp Delegate同様、インターフェースファイルと実装ファイルの対によって成り立っています。その関係性はApp Delegateの場合と全く同じなので、関係性に関する解説は割愛します。
View Controllerインターフェースファイル
App Delegateのソースコード同様、My Very First Appでは、View Controllerのインターフェースファイルもデフォルトのまま、アプリを制作しました。今後、様々な機能を実装したアプリを作っていく段階で、View Controllerのインターフェースファイルで予め宣言すべき内容を、その都度紹介していきます。
View Controller実装ファイル
View Controllerの実装ファイルは、My Very First Appを作成する上で、唯一編集したソースコードでしたね。追記した部分以外でも、何点か重要部分があるので、それらの概略を以下に示します。
ViewController.m
| -(void)viewDidLoad
-(void)viewDidUnload
-(void)viewWillAppear
-(void)viewDidAppear
-(void)viewWillDisappear
-(void)viewDidDisappear
|
これらは、主に、画面が初めて登場するとき、および、消えるときに呼ばれる処理（メソッド）です。これらを活用することによって、画面が登場したときにデータを読み込んだり、アニメーションを用いた画面遷移を実現したりできます。さらに、デバイスの向きに応じて、画面の内容を回転させたり、違う画面を表示させたりもできます。
今回はこれらを活用していませんが、今後のアプリ開発では必ず使う部分なので、この概念だけ、頭の片隅において下さい。
まとめ
第１講では、iOSアプリを開発するための環境づくりから、Xcodeの使い方の解説、さらには、簡単なアプリ作成と実行を行いました。初めて聞く用語の連続や、使い慣れないソフトウェアの使用などで、わからないことも多くあったと思いますが、今回の目標は「学ぶ」というより「慣れる」ことなので、あまり不安に思わないで下さい。復習する際も、「とにかく使って慣れる」ことに重点をおいて行うことをお勧めします。
