Storyboardで画面遷移を学ぶ


## はじめに

この資料はスクー`はじめてのiOSアプリ開発② - 基本操作を覚えよう`の[第5回 (はじめてのiOSアプリ開発 - Twitterのタイムラインのベースを作ろう（ユーザーアクションイベント）)](https://schoo.jp/class/2714)の内容の写経です。

**授業を見ていない人でもなるべく分かるように書いていきます。**

## 前提

数回の授業を通してTwitterなアプリケーションを作っていきます。

**前回までの授業で、UIを作るためのツールであるStoryboardの使い方の基本を学んでいます。**

前回の続きなので[前回の記事](http://qiita.com/n0bisuke/items/1db96e50ccda7dcc3a69)を読んだ方が良いです。

## 今日やること

Twitterアプリケーションのログインロジックを作ります。

![](https://i.gyazo.com/51bc65f221d971915242b8906e550a15.png)
こんなやつです。

* UITableViewを利用してツイートを表示
* ユーザーごとにアイコンを表示
* ツイート内容は名前と発言
* 詳細画面

## 1. UI準備

### `Navigation Controller`を新規で追加します。
`Navigation Controller`を追加すると、`Navigation Controller`とつながった`Root View Controller`の二つのビューが追加されます。
![](https://i.gyazo.com/64dc66fa3848e9401ff0d97d2e82f31f.gif)

`もともとあったViewController`にボタンを追加して、テキストをログインに変更しておきます。

![](https://i.gyazo.com/efd02ddc59436929efdbc3c611d326d3.png)


### 起動時のViewを変更
第４回ではTableView側だけで作業したのでTableViewに起動の矢印が向いてましたが、今回は`Navigation Controller`に向けます。
![](https://i.gyazo.com/6b5a2a3381980ed0b23dab8b56f68616.gif)

### リレーションを変更

`Navigation Controller`から`Root View Controller`へのリレーションを`もともとあったViewController`に変更します。

`Navigation Controller`をクリックした際にインスペクタエリアに表示される![](https://i.gyazo.com/e45aef46e5752b5b77e51bee2cb8e4cd.png)のマークを選択して`Triggered Segues`の部分にある線を`もともとあったViewController`へドラッグアンドドロップで変更できます。
![](https://i.gyazo.com/c7ae466b268f0f3f9f527d01fbfb0666.gif)

## 2. ViewController.swiftにプログラムを書く

コピペでいけます。説明は授業内で。

```ViewController.swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet var loginButton: UIButton!
    var accountsList:[Dictionary<String,String>]?
    var tweets:[Dictionary<String, AnyObject>]?

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        accountsList = [["name":"Hiro"], ["name":"Account BBB"], ["name":"Account CCC"]]
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func tappedLoginButton(sender: AnyObject) {
        var accountSelectionSheet = UIAlertController()
        accountSelectionSheet.title = "Select Account"

        let selectAction =  { (var action: UIAlertAction!) -> Void in
            self.performSegueWithIdentifier("showTimelineViewController", sender: nil)
        }

        if let accounts:[Dictionary<String, String>] = accountsList{
            for account in accounts {
                let action = UIAlertAction(title: account["name"]!, style: .Default, handler: selectAction)
                accountSelectionSheet.addAction(action)
            }
        }

        let CanceledAction = UIAlertAction(title: "Cancel", style: .Cancel, handler: nil)
        accountSelectionSheet.addAction(CanceledAction)

        self.presentViewController(accountSelectionSheet, animated: true, completion: nil)
    }

}
```

## 3. イベントと処理を結びつける

ViewController.swiftに記述した`tappedLoginButton()`という関数を、ログインボタンを押したら実行するようにします。

Storyboardとソースコードの両方が見えるようにして下さい。
ログインボタンをコントロールキーを押しながら選択肢、ドラッグしてソースコードの`tappedLoginButton()`付近にドロップすれば繋がります。

![](https://i.gyazo.com/1fbfe403625786fd14ed39542156bb7d.gif)

### 途中経過確認
ここまででこんな感じです。

![](https://i.gyazo.com/b74e7c5995d7202fb8d5e6b404e40934.png)

## 4. ログインからTimeline表示まで

### `もともあったViewController`と`TimelineViewController`をつなげる

`もともあったViewController`をクリックし、インスペクタエリアの`manual`から`TimelineViewController`にドラッグアンドドロップ -> showを選択しましょう。
![](https://i.gyazo.com/b74916ac8d182ab57f287d0294ccffda.gif)

Storyboard Segueの項目の`Identifier`を`showTimelineViewController`に設定、`Segue`は`show (e.g. Push)`になっていることを確認しましょう。
![](https://i.gyazo.com/3cfaa8dd9415f418b982a2581fbfaf08.gif)

こんな感じになります。
![](https://i.gyazo.com/9e8917b18ee0e840a7c029c7e77993de.png)

#### 実行してみましょう

ログインボタン -> ユーザー選択 -> Timeline表示 ができると思います。
![](https://i.gyazo.com/d8fe8065c292dcb7af64be1d1c8301fe.gif)

## 5. Tweet詳細画面への遷移を作る
Timelineのリストを押したときに詳細画面に飛ぶようします。

### 新しくviewを追加
`TweetDetailViewController.swift`を追加します。
![](https://i.gyazo.com/2346230a39d86260adc5c893faa47dac.png)

StoryboardでもViewを追加します。

![](https://i.gyazo.com/432156657c882852602b60c529abdd91.gif)

追加したviewの名前は `TweetDetailViewController`にしましょう。

![](https://i.gyazo.com/54f413f7e32a659f167f06995e620e5a.png)

### TimelineからTweet詳細をつなげる

先ほどと同じように`TimelineViewController`をくりっくし、インスペクタエリアの`manual`から、今作ったばかりの`TweetDetailViewController`にドラッグアンドドロップ -> showを選択しましょう。

![](https://i.gyazo.com/2421d4ad787a69b8887befa1b4e0d773.gif)

Identifierには`showTweetDetailViewController`を入れます。

![](https://i.gyazo.com/5ac09e66e16b8b5da252c942a39191b6.png)

### 詳細ページにそれっぽいテキストを設置

![](https://i.gyazo.com/e08575bc8ffcef6df337c7f5bbfba84e.png)

## 6. 試してみる
ここまででうまくいっている場合、特に問題なく実行できます。
![](https://i.gyazo.com/e25ebba4c6ba611cd8c67fc6a3ce3d71.gif)

## まとめ

お疲れ様でした。

* Navigation Controllerを使っての画面遷移
* ボタンを押した際の処理を行うユーザーアクションについて触れました。