【コラム】

プログラミング未経験者のための「iPhoneアプリの作り方」

3 複数画面のアプリを作る(1) - Segueを理解する

システムサポート
 

3/5

iPhoneアプリ開発の基本をおさらい

前回のプログラムは無事に完成しただろうか? まずは前回解説したiPhoneアプリの基本的な開発方法について簡単に振り返っておこう。

一般的なiPhoneアプリの開発では、画面デザインにXcodeのstoryboardを使う。storyboardを使うと、GUIでデザインパーツを自由に配置できる。プログラミング未経験者でも抵抗なくデザイン作業を行えるはずだ。

次に、storyboardとプログラムを紐付ける。1つ1つの画面デザインとプログラムを紐づけ、どこのプログラムがどの画面を記述したものかを定義する。

最後にプログラムの中身を記述すればアプリが完成する。

前回は、この一連の流れを「Hello World」というプログラムを作りながら解説した。計算機やストップウォッチなど、情報を表示するだけの簡単なアプリなら同様の手順で作成することができるだろう。

プログラムのまとめ

複数画面で構成されるアプリの作り方

Hello Worldのような単一画面のアプリでは、やはりできることは限られる。実際、App Storeに公開されているアプリのほとんどは複数の画面で構成されたものだ。そこで、今回からは複数画面のアプリを作っていこう。

複数の画面を扱う場合、「画面遷移」(画面の切替処理)を定義する必要がある。Xcodeでは、この画面遷移もstoryboardで作成することができる。storyboardでは、1つ1つの画面を「Scene(シーン)」と呼び、画面と画面の接続や遷移する際の演出を管理するものを「Segue(セグエ)」と呼ぶ。iOSでは、画面遷移用の演出が多く提供されているので、初級者でも作っていて楽しいはずだ。

Segue(セグエ)とScene(シーン)

では、セグエにはどういったものがあるのか。以下、主なSegueを3つほど紹介しよう。

push segue - 階層構造のリストに最適

まずは、push segue (プッシュ セグエ)である。push segueは、リスト表示の画面遷移に使用する。例えば、下図の「カテゴリの設定」→「お客様」→「XXX」のように階層構造を表現することができる。

push segue(プッシュ セグエ)での画面遷移

modal segue - 画面全体の切り替え向け

次に、modal segue (モーダル セグエ)である。modal segueは、画面全体を切り替える場合に使用するSegueだ。カメラや写真など、画面全体に表示させたい場合に最適だ。

modal segue(モーダル セグエ)での画面遷移

popover segue - 画面全体の切り替え向け

そしてpopover segue(ポップオーバー セグエ)。こちらはiPad専用のSegueになる。iPadの画面の大きさを利用して、前の画面を表示させたまま、新たな画面を重ねて表示することができる。

popover segue(ポップオーバー セグエ)での画面遷移

このように、Xcodeには、さまざまなSegueが用意されている。複数画面アプリを作る際は最適なSegueを選択して欲しい。

画面遷移を作る準備(push segueを使ったアプリ)

そろそろ実際にプログラムを作ってみよう。

今回はサンプルプログラムとして、push segueを使ったリスト表示アプリを作成する。push segueアプリの作成は難しくないが、手順が多いため、今回は事前準備にとどめる。

まず、前回と同様にプロジェクトを作成する。ただし、今回は単一画面ではないため、「Single View Application」ではなく、「Empty Application」を選択する。

テンプレートの選択

次に、プロジェクトファイルの名前を決める。ここでは仮に、Project Nameを「Sample Screen」とし、Organization NameとCompany Identifierは「STS」と入力しよう(名前は自由に決められる)。入力が終わったら、「Next」をクリックする。続いて、ファイルの保存場所を指定し、「Create」をクリックする。

プログラム作成画面が表示されたら、メニューから「File」の「New」の「File…」を選択する。

ファイルの新規作成

続いて、左のメニューの「User Interface」を選択し、「Storyboard」を選択する。

Storyboardの追加

さらに、「Device Family」が表示されたら、「iPhone」を選択し、「Next」をクリックする。最後に、「Save As」に、ここでは「SampleScreen」と入力し(名前は自由に決められる)、「Create」をクリックする。

これで空のstoryboardが表示されるはずだ。

空のStoryboardの追加

ここからは、リスト表示用の画面を追加していこう。

まず、さきほど追加したstoryboardの有効化を行う。ナビゲーターエリアのプロジェクトファイルを選択し、「Summary」の「iPhone /iPad Deployment Info」の「Main Storyboard」に、「SampleScreen」を設定する。

Storyboardの有効化

次に、ナビゲーターエリアでstoryboardを選択し、ライブラリペインのNavigation Controllerをドラッグで配置する。

リスト画面の作成

これで1つ目のリスト画面の配置が完了だ。

リスト画面

しかし、このままではリスト画面は表示されず、Empty Applicationで初めから用意されている画面が表示されてしまう。そこで、ナビゲーターエリアにてAppDelegate.mを選択し、以下のように「//」を追加して(以下の//で始める行の1行目、3行目、4行目に追加している)、無効化してしまおう。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    // self.window.backgroundColor = [UIColor whiteColor];
    // [self.window makeKeyAndVisible];
    return YES;
}

これで画面遷移を作る準備が整った。しかし、この段階で実行しても空のリストが表示されるだけだ。次回はいよいよ本格的に画面遷移処理を作りこんでいく。

執筆者紹介

福島 賢治(FUKUSHIMA Kenji)


株式会社システムサポート 大阪支店 ビジネス推進課所属。コンシューマ向けゲーム会社を経て、現職。組み込み開発、Web開発やインフラ構築などに携わり、iOS系では自社アプリ「猫と学ぶ旅行英語 Lite(e-messe kanazawa 2011優良企画案賞)」の企画・開発にも携わる。

現在は、自社アプリ「マッププランニング」の開発を担当。また、iPadアプリ作成をテーマとした高校生向け教材も作成し、2012年関西大学高等部2013年岸和田高校へ提供した

3/5

インデックス

連載目次
第5回 iPhoneとiPadの違い
第4回 複数画面のアプリを作る(2) - Segueで実装する
第3回 複数画面のアプリを作る(1) - Segueを理解する
第2回 簡単なプログラムを作る - storyboardの便利な使い方
第1回 iPhoneアプリの仕組みを学ぶ


転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

[実力試し]HTML5 認定試験 Lv2 想定問題 (10) 関数の定義方法
[07:30 9/26] 企業IT
松坂屋上野店で秋の行楽グルメフェア--魚屋の"おにぎらず"や浅草今半弁当も
[07:30 9/26] 趣味
東京都内をアートで埋め尽くす! 街がギャラリーになるアートと音楽の祭典
[07:30 9/26] 趣味
ブラッド・ピット、長男と大げんか - アンジーが離婚決断する原因に?
[07:18 9/26] エンタメ
“M字開脚”インリンは今…『深イイ話』で密着取材
[06:00 9/26] エンタメ

求人情報