こんにちは、@Yuuです。
iPhoneアプリを作る際に画面遷移は必ずと言っていいほど使う機能ですよね。
皆さんは遷移先の画面で、前にいた画面が見える状態で遷移先の画面を表示したい、ということはないでしょうか？

例に示すと以下のような感じです。

左側がメイン画面で、右側がサイドバーを表示した画面です。
サイドバーを表示というボタンを押すとメイン画面が見える状態でサイドバー画面が表示されるようにしています。
今回はこのような画面を作る方法を、ご紹介します。

やりたいこと

今回は先ほどのイメージ画像のようなものを作ろうと思います。

ファイルの作成

まずファイルを作成していきましょう。
New Projectを選択し、「Single View Application」を選択。

今回僕は「SidebarSample」というファイル名にしますが、
ここは好きな名前にして頂いて大丈夫です。

下記イメージのようなファイルが作成されました！

メイン画面の作成

メイン画面から作成していきます。
メイン画面の完成イメージは以下のようになります。


真ん中にイメージが配置してあり、その下にサイドバーを表示するためのボタンが置いてあるだけのシンプルなものです。

では、作成していきましょう。
storyboardからView Controllerのサイズを変更します。
今回はiPhone6の4.7インチに変更します。
そしてimage viewを配置します。

image viewには何か適当に画像を設定しておいて下さい。
設定しなくても動作に問題はないのですが、その方が分かりやすいかと思います。
僕は今回猫の画像を貼り付けてみました！ミャー！(ΦωΦ)

最後にButtonを配置します。
ここではボタンのテキストを"サイドバーを表示"に変更します。

次にサイドバーの画面を作成します。

サイドバー画面の作成

新規ファイルを作成します。
cmd + Nもしくは、メニューバーのFile -> New -> File...の順番に選んで下さい。
iOSのSourceからCocoa Touch Classを選択します。

Class名には「SideBarViewController」と僕は付けましたが、ここも皆さんの好きな名前で構いません。
また、SubclassはUIViewControllerにし、「XIB fileを作る」というチェックマークには、チェックをつけないで下さい。

SideBarViewController.swiftファイルが出来ていればOKですヽ(•̀ω•́ )ゝ✧

viewControllerをstoryboardに配置し、こちらも画面サイズをiPhone6の4.7インチに変更します。
またCustom ClassのClass名を「SideBarViewController」に変更します。（SideBarViewControllerではないファイル名を付けた方はそのviewControllerの名前を選択して下さい）

サイドバーに見立てたviewを設置します。
viewは透過する背景色に設定して下さい。
背景色を変更する方法は、Viewを選択した状態で、
Background → Other... で背景色を変更することが出来ます。
今回僕は、Hex値で"0000FF"のOpacity"30%"に設定しました。
ベタ塗りの青いサイドバーなんて中々ないと思いますが、そこはあまり突っ込まない方向でお願いします。(・ω<)

それとSideBarViewControllerに最初から設定されている、画面全体を覆っているViewがあります。
そのViewには初期値で背景色に白が設定されています。
この状態だと、下の画面が透けて見えるようにならないので、このViewの背景色を透明にします。

SideBarの仕上げとして、Main画面に戻るためのButtonを配置します。
ボタンのテキストは"メイン画面に戻る"に変更します。

僕は分かりやすくするためにButtonのテキストカラーを白に変更しましたが、ここは自由に設定して下さい。

これで2つの画面が出来ました。
次に画面を遷移した際の設定を行っていきたいと思います。

画面遷移の設定

2つの画面が出来たところで、メイン画面からサイドバーに遷移するためのSegueの設定をStoryboardを使用して設定します。
メイン画面の"サイドバーを表示"というボタンの上で、Controlキーを押しながら、SideBar画面の方にマウスをドラッグ。
すると青い線でSideBarViewControllerに接続した後、Action Segueという画面が表示されたかと思います。

このAction Segueの中から今回はShowを選択して下さい。
Segueを選択した後、以下のようになっていればOKです。

次にViewController.swiftにサイドバー画面から戻るためのunwindSegueを記述します。
ViewControllerクラス内に以下の一文を追加して下さい。

unwind Segueの記述が終わったら、今度はstoryboardに戻って、サイドバー画面からメイン画面に戻れるようにしましょう。
先程のSegueと同じ要領で、サイドバー画面の"メイン画面に戻る"ボタンから下記イメージの四角で囲ってある部分まで、controlキーを押しながらマウスをドラッグして下さい。

そして、そこで「returnMainView:」を選択して下さい。
これでメイン画面とサイドバー画面を行き来することが出来るようになりました。

ここまで出来たら一旦表示してみましょう。
この状態でサイドバー画面を表示してみると・・

(;ﾟдﾟ)真っ黒だー！
遷移先画面の設定を行わないと、せっかく背景が透明になるように設定したのに、
このように背景が真っ黒になってしまいます。

そこで、SideBarViewControllerの設定を変更します。

storyboardより、SideBarViewControllerを選択し、
Utilities → Presentationから"Over Current Context"を選択します。
これでもう1度実行すると

無事サイドバーの表示が完了しました！(๑•̀ㅂ•́)و✧

あとがき

まだアプリ開発が分かっていなかった頃は、遷移先画面を今回のように透明に表示するためには、コード内で"Over Current Context"の記述が必要なんだと思っていました。
でもちゃんとstoryboardだけでも設定出来るんですね。
いやぁまだまだstoryboardだけでも奥が深そうだ。

ではでは
今回はこの辺で！ヽ(•̀ω•́ )ゝ✧