【Swift/Xcode超入門】Storyboardファイルとプログラムファイルの関係

作成中

 

サトリク

この講座では、storyboardストーリーボードファイルと、プログラムファイルの関係性について解説していきたいと思います!

 

storyboardファイルと、プログラムファイルの関係性

storyboardファイル

storyboardファイルとは、〇〇.storyboardという名前のファイルのことをいいます。

プログラミングコードを書かずに(GUIで)、画面のレイアウトを作成できるファイルです。設計書みたいなイメージですね。

プロジェクトを作るとデフォルトで、Main.storyboardがあります。これが、Storyboardファイルです。

プログラムファイル

プログラムファイルとは、〇〇.swiftという名前のファイルのことをいいます。

このファイルは、プログラムコードを書くファイルです。

新規プロジェクトを作成すると、デフォルトで〇〇.swiftファイルは、以下の3つあります。

  • AppDelegate.swift
  • SceneDelegate.swift
  • ViewController.swift

3つありますが、初心者はViewController.swift意外いじることはありませんので、AppDelegate.swiftSceneDelegate.swift無視しましょう。

Storyboardとプログラムファイルの関係

基本的には、「プログラムファイル」と「storyboardの1つの画面」はセットです。

この考え方がアプリ開発において最も重要なことです。

では、セットになっていることを確認してみましょう。

STEP.1
デフォルトの状態

プロジェクト作成すると、デフォルトMain.storyboardの1つの画面とViewController.swiftが紐づいています。

STEP.2
確認方法

①画面のバーをクリック

(Show the Identity inspector)を選択

③Classのところに書かれているのが、その画面に紐づいているプログラムファイル

ViewControllerと書いているので、このMain.storyboardの1つの画面とViewController.swiftは紐づいているということがわかりました。

確認完了

プロジェクトを作成

まずは、プロジェクトを作成していきましょう。

STEP.1
Xcodeを起動

下のDockからXcodeを起動しましょう。

もうすでにXcodeを開いている方は、command + shift + 1を押しましょう。

STEP.1
新規作成

「Create a new Xcode project」を選択

STEP.2
テンプレート選択

①「App」を選択

②「Next」をクリック

STEP.3
プロジェクトの設定

①「Product Name」にFilesRelationshipと入力

②「Interface」でStoryboardを選択

③「Language」はSwiftを選択

④全てチェックなし

⑤「Next」をクリック

(そのほかは任意)

STEP.4
プロジェクトの保存

Practiceフォルダを選択しましょう。

完了
これで、プロジェクトの作成は完了です。

Storyboardでボタンを追加

では、Storyboardにボタンを追加した時の関係性について解説します。

Storyboardでボタンの名前を変更する

STEP.1
ボタンを配置

まず、Storyboardにボタンを追加します。

①右上のプラスボタンをクリック

②Buttonをボードの真ん中にドラッグ&ドロップ

これでボタンを配置できました。

STEP.2
ボタンの文字を変更

文字を変えてみましょう。わかりやすいようにFontサイズも大きくします。

①Buttonを選択

(Show the Attribute inspector)をクリック

③「Title」をボタンに変更、「Font」をSystem 30.0に変更

STEP.3
実行

①iPhone11に変更

②再生ボタンで実行

 

このように、カタカナでボタンと表示されるはずです。

完了

Storyboard上で、レイアウトを変えるのはとても簡単です。

しかし、処理によってボタンの名前を変更する時とかは、コード上で変えないといけません。

では次はコードで変更する方法を解説していきます。

コードでボタンの名前を変更する

では、コード上でButtonの名前を変えていきましょう。

STEP.1
2分割

まず、Storyboardのボタンとコードを紐づけるために、画面を2分割にします。

①ボードの上のバーをクリック

command + option + control + enterで2分割表示

②のショートカットキー打つと、選択しているボードと紐づいているプログラムファイルを2分割で表示します。

STEP.2
ボタンの紐付け

controlを押しながら、10行目と11行目の間にドラッグ&ドロップ

 

①「Name」にbuttonと入力

②「Connect」をクリック

STEP.3
タイトル3

16行目あたりに以下のコードを追加しましょう。

 

button.setTitle("ボタン", for: .normal)

この1行で、ボタンの名前をぼたんに変更しました。

STEP.4
実行

左上の再生ボタンを押すか、commaand + rで実行してみましょう。

 

このように、ひらがなのぼたんが表示されるはずです。

Storyboardでカタカナでボタンと書いて、コードでひらがなでぼたんと名前を変更しました。

しかし、実際に表示されているのは、コードで書いた名前です。

つまり、Storyboardで書いた名前をコードで上書きしたということになります。

完了

ここで伝えたいことは、2つあります。

  1. オブジェクトをコードで使いたいなら、紐付けなければならないということ。
  2. Storyboard、コード両方で編集すると、コードの方が表示されるということ。

これはアプリ開発において、基本的なことなので覚えておいてください。

Main.storyboardに画面を追加する

では、次は、Main.storyboardに画面を追加した時の関係性について解説します。

STEP.1
一旦閉じる

コード画面が邪魔なので、一旦閉じましょう。

STEP.2
画面追加

①プラスボタンをクリック

②ViewControllerをボードの横にドラッグ&ドロップ

STEP.3
プログラムファイルを追加

この状態だと、このボードのレイアウトをプログラムで変えることはできません。

なぜなら、プログラムファイルが紐づいていないからです。

1つの画面に対して、1つのプログラムファイルなので、この画面のプログラムファイルを作成しましょう。

 

command + nで新しいファイルを作成します。

 

①「Cocoa Touch Class」を選択

②「Next」をクリック

 

①「Subclass of:」をUIViewControllerに変更

②「Class」にNextViewControllerと入力

③「Next」をクリック

 

そのまま「Create」をクリック

 

これで、NextViewController.swiftというプログラムファイルの作成が完了しました。

STEP.4
Main.storyboardを選択

Main.storyboardを選択してください。

STEP.5
ボードとプログラムファイルの紐付け

①2つ目の画面のバーをクリック

(Show the Identity inspector)を選択

③「Class」でNextViewControllerを選択

これで2つ目の画面と、プログラムファイルが紐づきました。

STEP.6
2分割

①2つ目の画面のバーをクリック

command + option + control + enterで2分割表示にしましょう。

 

このように、2分割で表示されるはずです。

同じ手順を踏んでも、まれに以下のように、分割できない場合があります。

このような場合、Xcodeを再起動することによって修正できます。

①右上のバツをクリック

②「Stop Tasks」をクリック

これでXcodeを終了することができるので、もう一度Xcodeを開き直しましょう。そうするとコードが表示されるはずです。

これで、Main.storyboardの2つ目の画面と、NextViewController.swiftを紐づけることができました。

2つ目の画面のレイアウトをコードで編集したいときは、NextViewController.swiftにコードを書いていきます。

完了

このように、画面を追加したら、必ずプログラムファイルも追加しましょう。

もし、3つ目の画面を追加するなら、3つ目のプログラムファイルも追加しましょう。ということです。

 

まとめ

 

覚えること
  • 1画面と、ViewController.swiftは1つのセット

次の講座では、BMIを計算するアプリを作ってみたいと思います。

 

サトリク

このブログ(satorikublog)の筆者サトリクが、初心者の方に教えるサービスをはじめました。

気軽にご相談ください!

詳細はこちら

 

 

ゼロから学ぶiPhoneアプリ開発入門


もっとみる