LoginSignup
9

More than 5 years have passed since last update.

OS X アプリでStoryboardとSegueを利用する(概略)

Last updated at Posted at 2016-03-29

Storyboardとは

StoryboardはiOS向けの画面の遷移をグラフィカルに指定できる画面遷移エディタのようなもので、これを作るだけで画面遷移が可能になるためプログラミングが不要(あるいはごくわずか)になる優れものです。
iOS専用のように思われてますが、実はOS Xアプリでも使えます。

OS X での使いどころは?

ウインドウの表示(show)、ポップオーバー(popover)や、モーダル(modal)という既定のアクションがあり、これらを使用するとノーコーディングでこれらを行うことが可能です。(もちろん値の受け渡しなどでコーディングは必要になります)

しかし、一番の使いどころは画面遷移ではありません。
ひとつのウインドウに複数のビューを表示する場合、各ビューをNSViewContollerで管理し、-awakeFromNibなどで一つのウインドウに配置するということをやったことがないでしょうか?
これこそが、OS XでのStoryboardの使いどころです。
Storyboardを使えばビューの配置のために一切のコードを書く必要がなくなります。

複数のビューを一つのウインドウ(ビュー)に配置する

まず、Storyboardを作りましょう。
新規作成パネルからStoryboardを選ぶだけです。
スクリーンショット 2016-03-29 20.24.04.png

対象となるNSWindwControllerを配置します。通常のIBでの操作と同じで右のリストからドロップするだけです。
スクリーンショット 2016-03-29 20.24.53.png

IBとは違いNSWindowとそのContentViewControllerが関連付いた形で配置されます。
スクリーンショット 2016-03-29 20.25.59.png

では、複数のビューを配置しましょう。今までですと、ここにダミーのカスタムビューを配置していたと思いますが、StoryboardではContainerViewという特別なビューを使用します。
配置自体は通常のアイテムと同じです。
スクリーンショット 2016-03-29 20.26.19.png

ContainerViewを配置すると、自動的にNSViewControllerが配置され関連付けられます。
このNSViewControllerが持つViewがウインドウが開かれたとき自動的に対応したContainerViewの位置に配置されます。

スクリーンショット 2016-03-29 20.38.21.png
Storyboardでの配置例

スクリーンショット 2016-03-29 20.50.05.png
上の配置例を実行したところ

コードは一切必要ありません。

もちろん、対象がウインドウではなくビューの場合も、方法は同様です。
NSWindowControllerの代わりにNSViewControllerを配置して、そのビューにContanerViewを配置していくだけです。

恐ろしく簡単です。

Outlet接続やCocoaBindingsなどに注意

ひとつのStoryboardにすべてのNSViewControllerが見えますが、Outlet接続などは今まで通りNSViewControllerごとになります。
NSViewControllerを超えてのOutlet接続などはできません。

じゃあ、セグエって何?

英語の意味はよく分かりませんが、機能としてはビューの遷移時の動作をカプセル化したものです。(突っ込み歓迎)

ウインドウを表示するときにフェードイン+ズームインではなくほかのアニメーションで表示させたいというときにカスタムセグエを作成し、表示動作を定義すれば、そのセグエをStoryboardで指定するだけで思い通りの遷移が可能となります。

また、ウインドウ内でビューの切り替えは既定のアクションではできませんが、カスタムセグエを用意することでStoryboard上で指定が可能になります。

まとめ

僕自身「どうせStoryboardってiOS専用なんでしょ? プンスカ」といままで食わず嫌いでしたが、かなり使えます。
画面遷移以外でも使えるということを知ったのがすごく大きいです。
これからは積極的に使っていくつもりです。

時間があれば実践編を書きたい。

4月3日追記:
実践編を投稿しました
OS X アプリでStoryboardとSegueを利用する ビューを切り替える編

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9