Storyboardを使って簡単にできるiOSアプリ開発HomeiOSアプリ開発入門Pythonでスクレイピングデザインの知識iOSエンジニアの独立ブログ「現役エンジニアが教えるアプリ開発」や「役に立つ技術」について発信しています。デザインiOSアプリ開発が簡単にできるStoryboard入門テクノロジー2018.11.6iOSアプリ開発が簡単にできるStoryboard入門iOSアプリを開発しようとXcodeをダウンロードしてプロジェクト作成までした。やってアプリを作れば良いのかわからない、Xcodeの使い方がよくわからないという方向けにStoryboardの使い方について紹介します。Storyboardを使えば、簡単にアプリの画面を設計することができるのでぜひ覚えてみてください。Storyboardとは何かiOSアプリを作る際、画面をグラフィカルに開発することができる機能としてStoryboardが提供されています。デザインなどを直感的に設定できるので初心者の方にオススメの機能です。簡単なアプリを作ってみる今回は、Storyboardを使って簡単なアプリを作ってみます。Projectを作成した段階では、Main.storyboardが用意されています。今回はこのStoryboard上で作っていきます。初期画面Main.storyboardには、ViewControllerという画面があらかじめ用意されています。デフォルトでは、ここが初期画面になります。試しに実行してみましょう。すると、アプリが起動してこの画面がされるようになっています。初期画面を変更してみましょう。初期画面を変更するには、新しい画面をStoryboard上に追加します。画面を追加するには、右上のホームボタンのようなボタンをクリックします。ポップアップが表示されたら「UINagigationController」と入力しましょう。NavigationControllerが表示されたら、Storyboard上にドラッグ&ドロップします。Storyboard上に設置できたら、初期画面を設置した画面に設定してみます。設置された画面のうち、左側の画面をクリックします。この画面は「UINavigationController」と呼ばれています。最初に設置されていた画面の左側に矢印がくっついていると思いますが、それをUINavigationControllerへ移動するとくっつきます。この矢印が初期画面をどれにするか決めています。それでは、起動してみましょう。初期画面が変わっていると思います。次は、UINavigationControllernのルートを変更します。UINavigationControllerの右側の画面を削除します。削除するには画面の上にある黄色いボタンをクリックしてdeleteキーを押します。UINavigationControllerをクリックするとXcode右側に詳細が表示されます。ここを「インスペクタ」と言います。インスペクタの上にあるタブの一番右をクリックします。controller」という項目があるので右側の+ボタンからドラッグすると矢印が出るので、ViewControllerの上で離します。すると、UINavigationControllerのルートをViewControllerに設定できます。最後に起動してみてください。起動直後の画面がViewControllerに変わっています。次に、UINavigationControllerを使ってViewControllerから画面遷移を実装します。ViewControllerにボタンを設置します。UINavigationControllerを設置した手順と同様に「UIButton」と検索して、ViewController上に設置してみてください。同様に新しい画面を設置します。今度は「UIViewController」を設置します。設置し終えたら、Controlを押した状態でUIButton上からドラッグすると矢印が出現します。それを設置したUIViewControllerへドラッグします。するとポップアップが表示されるので「show」を選択します。これで、画面遷移の設定が終わりです。起動して確認してみましょう。ボタンを押すと、次の画面へ遷移するようになりました。設置したUIを細かくプログラムする方法StoryboardでUIを作っていくと、細かなデザインを設定したりプログラムを使ってコントロールしたりしたいと思うことがあるかと思います。次の記事で細かくプログラムするための方法を紹介していますので参考にしてみてください。2018.11.12IBDesignable、IBInspectableを使ってStoryboardでデザインする方法iOSアプリ開発をStoryboardを使って開発している方も増えてきていると思います。Storyboardを使って開発することでアプリをグラフィカルに開発することができますよね。UIのパーツなどを実装していると、コードでもっと細かく調整してStoryboar...まとめ今回は、Storyboadを使った画面の作り方と画面遷移の方法を紹介しました。最初は使い方がわからないかと思いますが、使ってみると割と簡単に作れたかと思います。アプリ開発に慣れていきましょう。人気iOSアプリが作れるようになるおすすめの本8選アプリ開発にチャレンジできていなかったりアプリ開発に詰まってしまったり...プロフィールHiroG’sアカデミーのメンター、モバイルアプリのエンジニア。得意分野はアプリ開発、競泳。