iOS開発入門：ストーリーボードでログイン画面を作るチュートリアル

ストーリーボードとは

ストーリーボードは、iOS 5のリリース時に開発者向けに初めて導入された機能です。従来は画面ごとに個別のファイルでUIを設計する必要がありましたが、ストーリーボードを使えばその手間から解放されます。アプリ全体の構成をひとつのキャンバス上で俯瞰でき、各画面がどのように連携するのかも直感的に把握できるのが大きな魅力です。さらに「セグエ（Segue）」を利用することで、画面間の遷移方法を設定したり、遷移先へデータを受け渡したりすることが可能になります。本チュートリアルでは、実際にシンプルなログイン画面を作りながら、その使い方を学んでいきましょう。

準備：新規プロジェクトの作成

まずは新しいプロジェクトを作成します。テンプレートは「Single View Application」を選択し、言語はSwift、デバイスはUniversalに設定してください。プロジェクトを作成してストーリーボードを開くと、空のビューコントローラーのシーンが表示されているはずです。ビューコントローラーの左側にある矢印は、このコントローラーがアプリ起動時に最初に表示されるルートコントローラーであることを示しています。

入力欄の配置と設定

ユーザー名とパスワードの入力欄を追加するには、Xcode画面右下のユーティリティエリアからオブジェクトライブラリ（四角の中に丸があるアイコン）を選択し、Text Fieldを2つドラッグ＆ドロップでビュー上に配置します。サイドバーの属性インスペクターでは、フォントや配置など多くの重要なパラメータを指定できます。項目は数多くありますが、ほとんどは名前を見れば直感的に意味がわかるものばかりです。

今回特に重要なのは、「Placeholder（プレースホルダー）」と「Secure Text Entry（セキュアテキスト入力）」の2つの設定です。プレースホルダーにテキストを入れておけば、ユーザーに対して何を入力すべきかを事前に伝えられます。また、パスワード用のフィールドにはセキュアテキスト入力へチェックを入れましょう。これにより入力内容がマスクされ、画面にそのまま表示されなくなります。

ボタンの追加

続いて、画面遷移を引き起こすためのボタンを配置します。テキストフィールドと同じ要領で、オブジェクトライブラリからButtonをドラッグしてください。ボタンにタイトルを設定し、各オブジェクトを画面上で整列させると、以下のような見た目になります。

2つ目の画面を作成して接続する

最初の画面が完成したら、遷移先となるもう1つの画面を用意します。オブジェクトライブラリからView Controllerをドラッグし、ストーリーボード上に追加してください。

2つの画面を接続するには、次の手順を行います。

まず、Controlキーを押しながらボタンをクリックし、そのまま新しく追加した画面までドラッグします。次に、2つのビューの間に表示されるセグエを選択し、属性インスペクターでIdentifier（識別子）を設定します。ここでは例として「nextScreen」という名前を使用します。

アウトレットとアクションのコーディング

最後に、遷移先の画面にもラベルを1つ配置し、入力されたユーザー名を表示できるようにしましょう。ストーリーボード上の部品にプログラムからアクセスするには、それらを使用するクラス内にアウトレット（@IBOutlet）を作成しておく必要があります。

class FirstScreen: UIViewController {
@IBOutlet weak var username: UITextField!

@IBAction func loginButton(sender: AnyObject) {
performSegueWithIdentifier("nextScreen", sender: self)
}
}

class SecondScreen: UIViewController {
var user: String!
@IBOutlet weak var username: UILabel!

override func viewDidLoad() {
super.viewDidLoad()
username.text = user
}
}

コードを書いたら、各画面のConnections Inspector（接続インスペクター）を開き、ストーリーボード上のオブジェクトとアウトレット・アクションを必ず紐付けてください。定義したアウトレットが一覧に表示されるので、右側の丸い接続ポイントから目的のUI部品へドラッグして接続します。

prepareForSegueでデータを受け渡す

最後に実装するのは、最初の画面クラス内のprepareForSegueメソッドです。このメソッドをオーバーライドすることで、画面遷移が実行されるタイミングで、次のビューコントローラーへデータを渡せるようになります。

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if segue.identifier == "nextScreen" {
let destVC = segue.destinationViewController as! SecondScreen
destVC.user = self.username.text!
}
}

まとめ

これで、ストーリーボードを使った画面遷移の基本と、セグエを介した画面間のデータ受け渡しの方法を習得できました。この知識は、実用的なアプリを開発するうえで確かな土台となります。ぜひ自分のプロジェクトでもさまざまな画面構成に応用してみてください。それでは、Happy Programming！