はじめに

前回はsegueを使った画面遷移の方法とパラメータの受け渡しについて投稿しました。
画面遷移編２：https://qiita.com/euJcIKfcqwnzDui/items/679b1cd30694519f4916#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB

前回の説明で「画面遷移の方式はいくつかある」というように説明しました。
今回はそのそれぞれの方式について説明します。

前提

その前にアプリのUI、画面設計において覚えておいてほしいことがあります。
UI、または画面の目的は原則として１つにするということです。

世の中に出回っているアプリを思い出してみるとわかるかもしれませんが、例えばボタンの場合、保存、削除、検索など１つのボタンが担う役割は基本的に１つです。
「このボタンは保存も削除も検索もできるボタン」ということにはなり得ません。

画面についても同じことが言えます。
画面の場合はもう少し大きな機能ベースになります。
例えばログイン機能、カメラ撮影機能、動画の再生機能など。
この大きな機能については、どこまでを１機能として捉えるか人によって若干変わるかもしれませんし例外もあります。
ですが１画面に対して１機能が基本だということは覚えておきましょう。

さらにいうとアプリが提供する機能も１つに限定すべきというのが本来の思想でもあります。
例えばiOSの標準アプリの場合、カメラと写真アプリはそれぞれ別アプリとして提供されています。
これはカメラで撮影する機能と写真を管理する機能は別機能として考えられているためです。
Googleアプリについても「Googleサービス」というまとまったアプリではなく、メール、ドライブ、カレンダーなどそれぞれの機能別でリリースされています。

実際のところ複数の機能を提供してしまっているアプリは多く存在しますが原則として１アプリ１機能と認識しておいてください。

画面遷移の種類

少し話が逸れましたがアプリ内において各画面は提供する機能は異なります。
同じ「機能」というものではありますが、それぞれアプリ内での立ち位置が異なりその目的に合わせた画面遷移をさせるのが望ましいとされています。

どういうときにどのような遷移を使った方がいいのかはAppleがHuman Interface Guidelinesで説明しています。
こちらにも一度目を通すことをおすすめします。
Apple Human Interface Guidelines - Modality -
Apple Human Interface Guidelines - Navigation -

この画面遷移の方式は大きく３種類あります。
アニメーションの仕方もそれぞれ異なります。

モーダル

これは前回説明した方式です。

このような下からにゅっと出てくるアニメーションで表現されます。

モーダルで開かれた画面はモーダル画面やモーダルウィンドウと言います。
modalは「モードを持つ」という意味で、アプリ機能の主軸とは違う一時的な処理をさせたい時などに使います。
モードが切り替わるというようなイメージでしょうか。
Apple Human Interface Guidelinesでは** Modality**と紹介されています。

iPhoneのAppStoreではアカウント表示に使われています。
AppStoreはアプリの入手するためのアプリです。
アカウント情報やログインはアプリに必要な機能ではありますが、「アプリを入手する」というメイン機能とは違います。

このようにアプリのメインタスクではなくサブタスクを行う場合はモーダルで画面を表示します。

プッシュ

最もよく見る遷移方式です。
右から画面がスライドしてくるアニメーションで表現されます。

プッシュは詳細が画面を表示する際に使用します。
AppStoreの場合はじめ多くアプリが表示されていますが、その１つをタップすると対象のアプリの詳細な画面が表示されています。
さらにその中からバージョン情報などをタップするとバージョン履歴が表示されるという構成になります。

最もイメージしやすいのはiOS標準の設定アプリです。
複数の項目があり→詳細→詳細と遷移していきます。

Apple Human Interface GuidelinesではHierarchical Navigationと紹介されています。
Hierarchicalとあるように根本となるルート画面があり、そこから階層構造になっています。

タブ

最後はタブによる画面遷移です。
「タブ」とあるように画面最下部に表示されているタブをタップすると画面が切り替わるあれです。
基本的にアニメーションはなく即切り替わります。

タブは異なるカテゴリ間の遷移です。目的の画面の検索方法とでもいいましょうか？
とはいえ入りとなるカテゴリは別ですが、全て同じ目的に行き着きます。

AppStoreでは[Today]、[ゲーム]、[App]、[Arcade]、[検索]というタブがあります。
ですが結局のところ目当てのアプリを見つけやすくしているだけで、どのタブからもアプリの画面にたどり着きます。

Apple Human Interface GuidelinesではFlat Navigationと紹介されています。
Flat、つまりは並列です。
基本的に互いに影響は与え合わずそれぞれのタブがそれぞれルートとなる画面を持ちます。
AppStoreを見ればわかりますがそれぞれのルート画面からプッシュで遷移していくことも可能です。

最後に

今回はiOSアプリの画面遷移の方式について紹介しました。
いつどの画面遷移を採用するのか、今はその概要さえ押さえられていれば大丈夫です。

実際のところHuman Interface Guidelinesに書かれてはいるのですが、そこまで詳細ではないのでアプリによって多少違いがあります。
よくタブの１つにマイページタブを置くアプリを見ますが、本来はモーダルの役割ではないかなとも思ったりもします。
(あくまで私見ですのであしからず。。。)

現場ではAndroidアプリも一緒に開発することが多いのですがAndroidにはAndroidの思想があり、どちらを採用するのかを話し合って決めます。
なので結局開発チームに依るところも多いので基本はこんな感じという認識でいてください。

次回はプッシュ、タブ遷移の実装方法について説明します。
画面遷移編３：https://qiita.com/euJcIKfcqwnzDui/items/c0c0ccbd8d301b96d8b7

本連載ではプログラミング未経験からiOSアプリ開発が行えるようになることを目的としています。
今までの投稿をまとめていますのでこちらもご覧ください。
http://naoyalog.com/

参考文献

Human Interface Guidelines
- https://developer.apple.com/design/human-interface-guidelines/
iOSにおける3つの画面遷移を知る
- https://medium.com/@shiba1014/ios%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B3%E3%81%A4%E3%81%AE%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E3%82%92%E7%9F%A5%E3%82%8B-1e6d55a620ac
【iOS】画面遷移方法まとめ
- https://qiita.com/st43/items/54baed2ac374ac969100