[iOS 9] ノンコーディングで Storyboard を分割できる Storyboard Reference

123件のシェア(ちょっぴり話題の記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは、モバイルアプリサービス部の荒川です。

この記事では、Xcode 7 から追加されたUIコンポーネントの1つ Storyboard Reference について紹介します。

iOS アプリ開発で UI の作成に Storyboard を使用している方を、主な対象読者とします。

Storyboard・Segue と聞いて何かわからないと言う方は、 [iOS]これからiOSアプリを作る方向け Storyboardで画面遷移を作る を参考にして下さい。

iPhone アプリ開発では、使用する言語(Objective-C・Swift)に関わらず、一般的なUIコンポーネントであれば Storyboard で作成することが可能です。コードでも UI を作成することはもちろん可能ですが、ViewController クラスが肥大化し、冗長なコードとなりやすいので、Storyboard を使用することを強くオススメします。

今回作成するサンプルプロジェクトは、GitHub で公開しております。実装が気になった方は参考にして下さい。

Storyboard Reference とは

Storyboard Reference は、待ち望んでいた方が多いと思われる新UIコンポーネントの1つです。GUI 上で Storyboard の分割が行えます。Segue の接続、参照する Storyboard の追加を行うだけで利用することができます。

筆者の執筆時の開発環境は以下のとおりです。

開発環境

  • Xcode 7.0
  • Deployment Target iOS 9.0

Storyboard Reference は非常に便利な機能ですが、 Xcode 7 以降かつ、iOS 9 以降でしか全ての機能を利用できません。Deployment Target が iOS 8.0 などでは、Relationship Segue ではビルドエラーとなります。

e.g.) Deployment Target 8.0 で TabBarController に ViewControllers Segue で接続した場合

storyboardreference11

以下の使用方法であれば iOS 8でも利用が可能 です。

OK

  • Trigger Segue
    • Push / Modal の遷移先を Storyboard References に設定
  • Embed Segue
    • ContainerView の 参照先を Storyboard References に設定

NG

  • Relationship Segue
    • TabBarController の 子ViewController を Storyboard References に設定
    • NavigationController の 子ViewController を Storyboard References に設定

Storyboard Reference の何が良いのか

Storyboard Reference を使わないとなるとどうなるのでしょうか。弊社横山の記事「[iOS] チーム開発するなら Storyboard を分割セヨ」をご覧になって頂くとわかりやすいです。

上記に書かれているコンフリクトのリスクが大幅に軽減され、Storyboard の分割がさらに簡単に、 ノンコーディング で行えるようになります。これによって Storyboard の再利用性が、意識しなくても非常に高くなるかと思います。複数の画面から同一の Storyboard(フロー)に遷移させたい場合は、有効な機能となります。

Storyboard Reference の実装方法

今回は、TabBarController の 「Relationship Segue」で接続されている ViewController 群を、タブ毎の Storyboard に分割します。

実装手順

  1. 参照したい Storyboard の追加
  2. Storyboard Reference コンポーネントを配置し参照を追加
  3. Storyboard Reference へ Segue を接続
  4. 分割された Storyboard の実装

上記の順番に実装していきましょう。

1. 参照したい Storyboard の追加

まずは必要なタブ数分の Storyboard を作成します。

プロジェクトナビゲーターの任意の箇所で右クリックし 「New File...」を選択します。もしプロジェクトナビゲーターが表示されていなければ Command + 1で出てきます。グループ(フォルダアイコン)を選択して Command + Nでファイルの追加も行えます。

storyboardreference00

4つのタブ「A・B・C・D」の Storyboard を追加します。

storyboardreference01

2. Storyboard Reference コンポーネントを配置し参照を追加

Main.Storyboard のコンポーネントを以下の様に配置します。

storyboardreference02

配置した Storyboard Reference に参照を追加します。

storyboardreference03

参照を追加した Storyboard Reference コンポーネントをダブルクリックすると、参照先の Storyboard へ遷移することができます。 プロジェクトナビゲーターで参照先の Storyboarod の名前を探す必要がないので、知っておくと良いでしょう。

3. Storyboard Reference へ Segue を接続

Storyboard Reference に Segue を接続します。

storyboardreference04

storyboardreference05

全ての Storyboard Reference に Segue を接続して下さい。

storyboardreference06

4. 分割された Storyboard の実装

先ほど作成した A.Storyboard に ViewController を配置し、「Is Initial View Controller」にチェックします。

storyboardreference07

配置した ViewController は TabBarController に接続される想定なので、 TabBarItem を追加します。

storyboardreference08

B, C, D, Storyboard も同様にコンポーネントを配置して下さい。

実装後、実行すると以下のようになります。

storyboardreference09

一般的な TabBarController の Storyboard の分割がノンコーディングで行えました。

考察

UIコンポーネントの不具合は、実行時エラーが起きるまでは確認ができないもの という認識が今までは強かったですが、この Storyboard Reference は参照先の Storyboard が存在しなければビルドエラーを出してくれます。

storyboardreference10

これによって、Storyboard 名の文字列指定を間違えて(Storyboard 名でスペルミス等が起きていると、たまにハマる)インスタンス生成が行えずに、無駄にデバッグ時間を費やしてしまうことを回避できます。そのため、従来のUIコンポーネントと比較して、より高機能かつ安全なコンポーネントであると感じました。

まとめ

今回紹介した Storyboard Reference は iOS 8 以降がサポート対象であれば、すぐにでも使えるコンポーネントとなっています。今後、スタンダードなコンポーネントとなることは間違いありませんので、今から抑えておくと良いでしょう。