ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/339/room ーーーーーーーーーーーーーーーーーーーーーーー

1. iOSアプリの画面デザイン・遷移を
驚くほど簡単にする
Storyboardの使い方
2014/01/30
関根元和

2. 自己紹介
•
名前：関根元和
•
iOSやAndroidアプリの開発をしています
•
ネットではCHEEBOWという名前でフリーウェア
を作ったり
•
週末は週末音楽家を名乗りライブアイドルへ楽曲提
供も

3. やること
•
Storyboardってなに？(10分)
•
画面について(15分)
•
実演(15分)
•
質疑応答(20分)

4. Storyboardってなに？

5. Storyboard
•
映画とか制作する時に使われる絵コンテのこと
•
iOSアプリでは、画面とそのつながりを描いたもの

6. Storybordでできること
•
画面のデザイン(Interface Builder)
•
画面遷移のデザイン
•
画面の関連づけ

7. Storyboardの画面

8. 画面
関連づけ
タブ

9. 関連づけ
画面遷移
画面
ナビゲーション

10. 画面遷移
•
push
•
modal
•
custom

11. push
•
ナビゲーションで使います
•
右から左に画面が出てくる

12. modal
•
ダイアログを出す時に使います
•
画面の下から上に画面が出てくる

13. custom
•
アニメーションを自由に設定できます
•
ただし、プログラミングが必要です！

14. 画面について

15. 画面
iOSアプリは、複数の画面で構成されています
例：連絡先アプリ

16. ビューコントローラ
•
ビューをコントロールするもの
•
基本的に1画面=1ビューコントローラ
•
もちろん例外はあります

17. ビュー
•
画面に表示されるものはすべてビュー
•
ボタンも、ラベルも、テーブルもすべてビューです

18. ビューコントローラの役割
•
ビューの内容を変えたり
•
ボタンやスイッチなどからのアクションを受け取っ
て処理したり
•
ビューとのやりとりをします
•
ビュー
ビューコントローラ

19. UIViewController
•
iOSのビューコントローラのクラス
•
これをベースにカスタマイズ(継承)して必要な
ビューコントローラを作ります
•
たとえば、MainViewControllerとか
DetailViewControllerとか

20. UIView
•
画面に表示するものはすべてUIViewです
•
ボタンやスイッチなどは、UIViewを継承した
UIControlがベースになっています。つまり、ボタ
ンも、スイッチもビューなのです

21. 継承？
•
オブジェクト指向の概念です
•
元となるクラスの機能を受け継いで新しいクラスを
作ることを継承と言います
•
UIViewを継承してできたUIControlを継承してでき
たUIButton
•
厳密にはNSObject →UIResponder→UIView→
UIControl→UIButtonですが

22. プログラマのすること
•
デザイナの作った画面ごとにUIViewControllerを
継承したオリジナルのビューコントローラを作成
•
ビューコントローラにUI部品や、画像などのビュー
を追加
•
ビューやそのアクション(ボタンが押されたとか)を
ソースコードとひも付け
•
コードを書いていきます

23. とは言うものの
•
実は、僕自身はStoryboardをほとんど使っていま
せん
•
画面遷移は自分でコードを書いています
•
Storyboardは手軽ですが、アプリによっては逆に
手間になることもあります
•
この辺の見極めは実は結構難しいかもしれません

24. 実演
•
これから実演を行います
•
Storyboardで画面遷移を実装してみます
•
実際にシミュレータで動きを確認してみます

25. まとめ
•
Storyboardを使って画面のデザイン、画面遷移を
作ることができる
•
1画面、1ビューコントローラが基本
•
ビューコントローラでビューをコントロールします

26. 質疑応答

27. 宿題
•
Xcodeをインストールして、Storyboardを体験し
てください