テクノロジー

iOSアプリ開発が簡単にできるStoryboard入門

iOSアプリを開発しようとXcodeをダウンロードしてプロジェクト作成までした。けれど、どうやってアプリを作れば良いのかわからない、Xcodeの使い方がよくわからないという方向けにStoryboardの使い方について紹介します。

Storyboardを使えば、簡単にアプリの画面を設計することができるのでぜひ覚えてみてください。

Storyboardとは何か

iOSアプリを作る際、画面をグラフィカルに開発することができる機能としてStoryboardが提供されています。このStoryboardでは、デバイスごとのレイアウト・確認、画面遷移、デザインなどを直感的に設定できるので初心者の方にオススメの機能です。

簡単なアプリを作ってみる

今回は、Storyboardを使って簡単なアプリを作ってみます。Xcode Projectを作成した段階では、Main.storyboardが用意されています。今回はこのStoryboard上で作っていきます。

初期画面

Main.storyboardには、ViewControllerという画面があらかじめ用意されています。デフォルトでは、ここが初期画面になります。試しに実行してみましょう。すると、アプリが起動してこの画面がされるようになっています。


では、初期画面を変更してみましょう。初期画面を変更するには、新しい画面をStoryboard上に追加します。
画面を追加するには、右上のホームボタンのようなボタンをクリックします。ポップアップが表示されたら「UINagigationController」と入力しましょう。


NavigationControllerが表示されたら、Storyboard上にドラッグ&ドロップします。


Storyboard上に設置できたら、初期画面を設置した画面に設定してみます。設置された画面のうち、左側の画面をクリックします。この画面は「UINavigationController」と呼ばれています。

最初に設置されていた画面の左側に矢印がくっついていると思いますが、それをUINavigationControllerへ移動するとくっつきます。この矢印が初期画面をどれにするか決めています。


それでは、起動してみましょう。初期画面が変わっていると思います。


次は、UINavigationControllernのルートを変更します。UINavigationControllerの右側の画面を削除します。削除するには画面の上にある黄色いボタンをクリックしてdeleteキーを押します。


UINavigationControllerをクリックするとXcode右側に詳細が表示されます。ここを「インスペクタ」と言います。
インスペクタの上にあるタブの一番右をクリックします。

その中に、「root view controller」という項目があるので右側の+ボタンからドラッグすると矢印が出るので、ViewControllerの上で離します。すると、UINavigationControllerのルートをViewControllerに設定できます。


最後に起動してみてください。起動直後の画面がViewControllerに変わっています。

画面遷移

次に、UINavigationControllerを使ってViewControllerから画面遷移を実装します。
まず、ViewControllerにボタンを設置します。UINavigationControllerを設置した手順と同様に「UIButton」と検索して、ViewController上に設置してみてください。


同様に新しい画面を設置します。今度は「UIViewController」を設置します。
設置し終えたら、Controlを押した状態でUIButton上からドラッグすると矢印が出現します。それを設置したUIViewControllerへドラッグします。


するとポップアップが表示されるので「show」を選択します。


これで、画面遷移の設定が終わりです。起動して確認してみましょう。ボタンを押すと、次の画面へ遷移するようになりました。

まとめ

今回は、Storyboadを使った画面の作り方と画面遷移の方法を紹介しました。
最初は使い方がわからないかと思いますが、使ってみると割と簡単に作れたかと思います。少しずつアプリ開発に慣れていきましょう。

Related post

  1. iOSアプリ開発

    Firebase iOSの解説・セットアップ編

    アプリを作る・サービスを立ち上げるといったとき、ほとんどの場合はDBや…

  2. iOSアプリ開発

    SwiftでJSONデータを使いやすくする!Codableの使い方

    APIからデータを取得する時、JSONでデータを受け取ることがあるかと…

  3. Pythonでスクレイピング

    スクレイピングでヘッダー情報を付与する方法とその目的

    今回は、前回試したスクリプトにヘッダー情報を加えたリクエストを投げれる…

  4. デザイン

    アンティーク風デザインに使える3つのフリー素材サイト

    ポスターや広告、カバー写真などの制作物を作成するとき、それらに使う画像…

  5. テクノロジー

    Appleの新しいMessagesで何ができるのか。

    WWDC 2016では数多くのセッションが行われました。WWDC 20…

  6. テクノロジー

    IBDesignable、IBInspectableを使ってStoryboardでデザインする方法

    iOSアプリ開発をStoryboardを使って開発している方も増えてき…

PAGE TOP