[iOS] Storyboardを使ってみよう!

本記事では、Xcodeの基本的なセットアップ手順Storyboardを使用した画像表示アプリの作成手順、Swift言語の基本について解説します。さらに、実機テストの重要性やデバッグ方法についても解説します。

【参考にした講座】

iOS & Swift – The Complete iOS App Development Bootcamp (Udemy)
 (Section2) Xcode Storyboards and Interface Builder
(Section3) Xcode Storyboards and Interface Builder Challenge

アプリの開発環境
  • Xcode: Version 14.2
  • macOS: Venture: Version 13.2.1
  • iOS: 16.4
目次

【初心者向け】Storyboardを使った画像表示アプリの作成手順解説

この章では、初心者向けにStoryboardを使用して画像を表示するアプリの作成手順を解説します。

StoryboardXcodeのビジュアルエディタであり、画面のレイアウトや遷移を直感的に設計することができます。

以下の手順に従って、画像表示アプリの作成を始めましょう。

「I am Richi」アプリについて

皆さん、「I am Richi」という名前のアプリの存在をご存知でしょうか?

I Am Richアプリ
  • アーミン・ハインリッヒという人が作ったアプリ
  • 価格は、なんと!999.99ドルという高額なアプリ
  • 画面に赤いルビーが1つ表示されるだけのシンプルなアプリ

このアプリは、結局8人くらいの人に買われたそうです。
購入者の中には、冗談だと思い、何が起こるかわからないと購入した人もいるようです。

それでも、999.99ドル×8人=7,999.92ドル(約100万円)。
Appleが30%カットした後でも、約5,600ドル(約70万円)の利益を手にしているのです。

嘘のような、本当にあった話です。

Xcodeプロジェクトの作成

Xcodeのインストールが未了の方は、次の記事のこちらのページを確認ください。

あわせて読みたい
STEP
Xcodeを開きましょう

Xcodeを開くと、ウエルカムスクリーンが表示されます。

もし、このウエルカムスクリーンが表示されない場合は、このチェックボックスが無効になっているかもしれません。

この場合は、「ファイル」→「新規作成」→「新規プロジェクト」でも全く同じことができます。

STEP
Xcodeのプロジェクトに必要なテンプレートを選択しよう

「iOS」→「App」→「Next」を選択し、次に進みます。

STEP
プロジェクトの基本情報の入力

「Choose option for your new project」の画面に以下のように入力します。

Choose option for your new project
  • Product Name: アプリの名前
    →「I am Richi」と入力
  • Organization Identifier: 他の組織(または個人)と被らないIDを指定する必要があります。
    ドメインあるいはメールアドレスを逆に表記したものを入力します。
    →「com.ios-pro」と入力
  • Interface: 「SwiftUI」と「StoryBoard」のどちらかを選択します。
    →「StoryBoard」と入力
  • Language: 「Swift」と「Object-C」のどちらかを選択します。
    →「Swift」と入力
STEP
Xcodeのプロジェクトを生成し保存しよう

保存場所は、デスクトップ、あるいは、その他の好きな場所に保存しましょう。

Xcodeの概要について確認しよう

View、ViewController、およびStoryboardの役割と関係性

この章では、iOSアプリ開発における基本要素であるViewViewController、およびStoryboardの役割と関係性について説明します。

  1. View:
    ViewはiOSアプリのユーザーインターフェース(UI)の要素を表すオブジェクトです。ボタンテキストフィールドラベルなど、ユーザーが操作できる要素はすべてViewとして表現されます。Viewはユーザーに情報を表示したり、ユーザーの入力を受け付けたりする役割を持ちます。
  2. ViewController:
    ViewControllerはアプリケーションのロジックとViewの間の仲介役です。Viewの表示や制御ロジックを担当し、ユーザーのアクションに応じて適切な処理を行います。ViewControllerはViewを管理し、Viewとの間でデータやイベントのやり取りを行います。
  3. Storyboard: StoryboardはXcodeのビジュアルエディタで、アプリの画面遷移やUIのレイアウトを視覚的に設計するためのツールです。Storyboard上でViewViewControllerを配置し、それらの間の接続や遷移を定義することができます。Storyboardを使用することで、アプリの画面遷移やUIのデザインを簡単に管理することができます。

これらの要素と役割を理解することで、iOSアプリの開発において適切なViewの作成やViewControllerの設計、Storyboardの活用が可能になります。

Xcodeの基本的な設定

STEP
Generalタブの設定をしよう

Generalタブに以下の内容を確認し、設定します。

Generalタブの設定
  • Destination: アプリを使用するデバイスを設定します。
    →「iPhone」「iPad」「iMac」を設定します。
  • Minimum Deployments: ターゲットとするiOSの最小バージョンを設定します。
    →例)iOS13を選択した場合、iOS13以上であれば、誰でもアプリをダウンロードして使用できます。
    逆に、それより低い場合は、アクセスができないことになります。
  • Deployment info: デバイスの向き、ステータスバーの色を選択します。
    →例)携帯電話を回転した時に、アプリも一緒に回転して、上下左右に表示されるようにしたい場合は、全てにチェック入れます。
    しかし、縦向きだけ、あるいは横向きだけに限定したい場合は、必要なものを選択します。
STEP
Xcodeのレイアウトを見てみよう

Xcodeのレイアウトの基本的なところを4つのエリアに分割して説明します。

Xcodeのレイアウト
  • エリア1: 黄色で囲まれた上部に位置する部分。
    アプリのステータス、再生、停止、実行ボタンなどがあります。
  • エリア2: 青色で囲まれた左に位置する部分。
    複数のタブバーがあるが、最も重要なものは一番左にあるプロジクトナビゲーター。
    プロジクトナビゲーターをクリックすることで表示される各種ファイルの階層図と
    プロジェクトの保存先をFinderで表示したリストが対応していることが確認できる。
  • エリア3: 中心部に位置する部分。アプリの大部分を設計する場所。
    ここでは、ラベルやボタンなど、iOSのコンポーネントにアクセスし、画面上にドラッグ&ドロップするだけで、さまざまなコンポーネントを利用することができる。
  • エリア4: 緑色で囲まれた右に位置する部分。インスペクターエリア。
    デザインやコードの特定の事象(色、位置など)を設定できる。
    例)青いLabelを画面中心部に置いてみました。Labelの位置が x:118, y:279であることが確認できる。もちろん、インスペクターエリアで数値を変更すれば、これに対応して表示されているLabelの位置も変更される。
        

Main.storyboardの作成

STEP
タイトル「I Am Rich」を作成しよう
I Am Richを表示
  1. Main.StoryBoardを開く
  2. ライブラリからラベルを選択し、画面上にDrop&Dragする。
  3. インスペクタエリアから「I Am Rich」と入力、フォントサイズ40、フォント色WhiteColorに設定。
  4. 背景色を外部サイト「Color Hunt」で見つけたお気に入りの「#3E54AC」に設定した。
    手順は下図に示します。
    1.View(背景)を選択
    2.インスペクタエリアで「Background」→「Custom」を選択
    3.Colorsが表紙されるので、RGB Slidersを選択
    4.「Color Hunt」に好きな色のColorコードをコピーし、「Hex Color」にペースト
    5.背景色がお気に入りの色になりました。
STEP
画面にダイヤモンドの画像を表示しよう
ダイヤモンドの画像を表示
  1. ライブラリからImageViewを選択し、画面に配置(サイズ270×270)
  2. Assets.xcassetsに、diamond画像(1x)をドロップしたが、2x,3xの画像がない。
  3. 外部サイト「App Icon Generator」で画像を生成
    「Image Sets」タブを設定、「iOS」をチェックし、「Generate」
  4. 生成した画像を、Assets.xcassetsにドロップ。1x,2x,3x全ての画像が設定された。
  5. インスペクタエリアでimageの中から、先ほど作成した画像の名称「diamond」を選択
  6. 画面にダイヤモンドの画像が表示された。

アプリのアイコン作成

外部サイト「App Icon Generator」を利用して、アプリのアイコン画像を作成しましょう。

アプリのアイコン画像を設定
  • 外部サイト「App Icon Generator」で画像を生成
    「App Icon」タブを設定、「iPhone」「iPad」をチェックし、「Generate」をクリック
  • ダウンロードされた画像が保存されているフォルダ名「AppIcon.appiconset」と同じ名前のフォルダがXcodeを保存したフォルダにもある。「AppIcon.appiconset」フォルダを上書きする。
  • アプリのアイコン画像が設定された。

シミュレータと実機テストについて

iOSアプリのテストには、シミュレータ実機テストの2つの方法があります。

シミュレータはコンピュータ上で実行される仮想的なiOSデバイスでアプリをテストする方法。
実機テストは実際のiOSデバイス上でアプリをテストする方法です。

シミュレータについて

シミュレータはXcodeに組み込まれており、開発者がコンピュータ上で仮想的なiOSデバイスをシミュレートしてアプリをテストすることができます。

シミュレータの利点と適用範囲
  • コンピュータ上でテストできるため、物理的なデバイスを持っていなくても開発が進められます
  • デバッグやUIの確認などの基本的なテストには十分な機能を提供します。
  • シミュレートされた環境により、異なるデバイスやiOSバージョンでのテストが可能です。
シュミレータのテスト

iPhone14のシュミレータを指定し、実行ボタンをクリックすると、iPhone14のシュミレータが起動し、「I Am Rich」と記載されたアプリが起動するのを確認できた。

実機テストについて

実機テストは、実際のiOSデバイス上でアプリをテストすることです。以下は実機テストの重要性とメリットです。

実機テストの重要性とメリット

実機テストは開発者にとって重要なステップであり、シミュレータだけでのテストでは不十分な場合があります。可能な限り実際のデバイスでのテストを行うことで、アプリの品質とユーザーエクスペリエンスを向上させることができます。

  • ユーザーの実際の環境での動作を確認することができます。シミュレータでは再現しきれないハードウェアやネットワークの挙動を確認できます。
  • パフォーマンスやレスポンスの問題を特定しやすくなります。実際のデバイスでの動作はシミュレータと異なることがあります。
  • ユーザー体験を正確に評価することができます。実機での操作性やデザインの確認は重要です。

次に、iPhone実機テストの手順とデバッグ方法について解説します。

iPhoneの実機テストの手順とデバッグ方法

この記事では、iPhoneの無料アカウントを使用して、開発中のアプリを実際のデバイスでテストおよびデバッグする方法について詳しく説明します。

STEP
Apple Developer Programに登録

まず最初に、Apple Developer Programに無料で登録します。このプログラムに登録することで、アプリを実際のデバイスでテストするための証明書やプロビジョニングプロファイルを作成できます。

STEP
Xcodeの設定

Xcodeを開き、プロジェクトの設定を変更します。Bundle Identifierを一意の識別子に設定し、Signing & CapabilitiesセクションでTeamを選択します。これにより、開発者アカウントの情報がプロジェクトに関連付けられます。

STEP
実機の接続

開発中のiPhoneをMacに接続します。Lightningケーブルを使用して、iPhoneとMacを接続しましょう。接続後、XcodeのデバイスセレクターにiPhoneが表示されます。

STEP
ビルドと実行

Xcodeでビルドを実行し、開発中のアプリをiPhoneにインストールします。ビルドが成功すると、アプリがiPhoneのホーム画面に表示されます。

実機を指定(シュミレータの時は、iPhone14)し、実行ボタンをクリックすると、実機にアプリが転送(シュミレータの時は、iPhone14のシュミレータが起動)され、「I Am Rich」と記載されたアプリが出現しました。

STEP
アプリの信頼設定

初回起動時、iPhoneは開発元が信頼できるか確認します。iPhoneの「設定」アプリに移動し、「一般」>「デバイス管理」で開発元を選択し、「信頼する」オプションを選択します。

STEP
テストとデバッグ

アプリを実行し、開発中の機能や挙動をテストします。Xcodeのデバッグナビゲーターやコンソールを使用して、エラーや警告メッセージを確認します。

iPhoneの無料アカウントを使用して実機テストとデバッグを行うことは、開発中のアプリを実際の環境で評価し、問題を発見して修正するための重要な手段です。Xcodeの統合開発環境を活用しながら、アプリの動作を実機で確認し、最良のユーザーエクスペリエンスを提供できるよう努めましょう。

もし、余力があれば、練習問題として「I am Poor」というアプリ作成もチャレンジしてみましょう。

確認問題

確認問題1:「I am Poor」アプリの作成

STEP
Xcodeプロジェクトの作成

I Am Poorという名前の新しいXcodeプロジェクトを作成します。

STEP
Main.storyboardの作成
スマホ画面にラベルを追加
  • ライブラリを使用して、ラベルをMain.storyboardのキャンバスにドラッグ アンド ドロップします。
  • ラベルテキストを「I Am Poor」に設定します。
  • ラベルのフォント、サイズ、色をお気に入りのデザインに変更します。
  • ラベルのサイズを変更し、適切な場所にラベルを配置します。
イメージビューをストーリーボードに追加
  • ライブラリから、イメージビューをキャンバスにドロップします。
  • イメージビューに「I Am Poor」に合う画像をインターネットから入手し、表示する。
  • イメージビューのサイズと位置をカスタマイズする。
STEP
アプリのアイコン作成
アプリのアイコンを追加
  • イメージビューに設定した画像を「App Icon Generator」にドロップします。
  • App Iconを選択します。
  • 対象のデバイス(iPhone, iPad)を選択します。
  • Generateをクリックし画像を生成します。
  • 次のAをBに置き換えます。
    A:ダウンロードしたデータが格納されている「AppIcon.appiconset」フォルダ
    B:I Am Poorが保存されているフォルダの中にある「AppIcon.appiconset」フォルダ
  • Assets.xcassetsにアプリのアイコンが保存されたことを確認します。
STEP
アプリを動かしてみよう
アプリの実行
  • アプリの実行前にデザインをチェックする。
  • Xcodeのバージョン、iOSのバージョンが最新であることを確認する。
  • 無料のApple開発者アカウントでサインインしているか確認する。
  • 接続先のデバイスを実機(iPhone)に設定する。
  • MacとiPhoneをケーブルで接続する。
  • Xcodeの実行ボタンをクリックする。
  • あなたのiPhoneにアプリが転送され、アプリの起動が確認できれば完成です。

確認問題2:UIボタンをクリックしてテキストを変更するコードを作成

UIボタンをクリックしてテキストを変更するコードを紹介します。

import UIKit

class ViewController: UIViewController {
    
    var myLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let width = view.frame.size.width
        let height = view.frame.size.height
        
        myLabel.text = "Test Label"
        myLabel.textAlignment = .center
        myLabel.frame = 
            CGRect(x: width * 0.5 - width * 0.8 / 2, 
                   y: height * 0.5 - 50/2, 
                   width: width * 0.8, height: 50)
        view.addSubview(myLabel)
        
        let myButton = UIButton()
        myButton.setTitle("My Button", for: UIControl.State.normal)
        myButton.setTitleColor(UIColor.blue, for: UIControl.State.normal)
        myButton.frame = 
            CGRect(x: width * 0.5 - 100, 
                   y: height * 0.6, 
                   width: 200, height: 100)
        view.addSubview(myButton)
        
        myButton.addTarget(self, action: #selector(ViewController.myAction), 
            for: UIControl.Event.touchUpInside)    
    }
    
    @objc func myAction() {
        myLabel.text = "Tapped"
    }
}

このコードは、UILabelUIButtonを含むシンプルなiOSアプリの画面を作成しています。コードの詳細を解説しましょう。

  1. まず、UIKitフレームワークをインポートしています。UIKitはiOSアプリ開発に必要な機能を提供します。
  2. ViewController クラスは、UIViewControllerを継承しています。これはiOSアプリ開発において画面の制御を行うための基本的なクラスです。
UILabel
  1. myLabel というUILabelのインスタンスを定義しています。UILabelはテキストを表示するためのUIコンポーネントです。
  2. viewDidLoad メソッドは、画面がロードされた後に自動的に呼び出される特別なメソッドです。このメソッド内で画面の初期化を行います。
  3. view.frame.size.widthview.frame.size.height を使って、画面の幅と高さを取得しています。
  4. myLabel のテキストを “Test Label” に設定し、文字の配置を中央寄せに設定しています。そして、画面の中央に表示されるように、適切な位置とサイズを計算しています
  5. view.addSubview(myLabel) を使って、作成した myLabel を画面に追加しています。
UIButton
  1. myButton というUIButtonのインスタンスを定義しています。UIButtonはユーザーとのインタラクションを処理するためのボタンです。
  2. myButton のテキストを “My Button” に設定し、文字の色を青に設定しています。そして、画面の中央下部に位置するように、適切な位置とサイズを計算しています。
  3. view.addSubview(myButton) を使って、作成した myButton を画面に追加しています。
  4. myButtonaddTarget を使って、ボタンがタップされた時に myAction メソッドを呼び出すように設定しています。
  5. @objc func myAction()myButton がタップされた時に実行されるメソッドです。このメソッドでは、myLabel のテキストを “Tapped” に変更しています。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次