FirebaseにBMIデータを登録するIOSアプリを作る(part4)

やること

前回の続きです。

今回はコードと画面UIの紐付けを行なっていきたいと思います。

環境

Xcode: ver12.0.1

Swift5

MacOS: MacOS Catalina 10.15.7

目次
Part1. 全体図を把握するのとプロジェクト作成まで
Part2. 画面周りを作成する
Part3. Firebase連携準備
Part.4 コードと画面を接続させる

Part.5 Firebaseへデータを登録する

　Part.5-1 ボタンとラベルをコードと紐付ける　追記

　Part.5-2 データ登録処理①　追記

　Part.5-3 データ登録処理②　追記

Part.6 Firebaseからデータを取得する　追記

　Part.6-1 ボタンとラベルをコードと紐付ける(Get編)　追記

　Part.6-2 データ取得処理①　追記

Part.7 完成・動作確認　追記

コードと画面を接続させる

この手順に入る前の前提条件としては

・画面配置が完了している

・Firebaseとの連携初期手順が完了している

以上です。

では早速紐付けていきましょう。 

Main.storyboardを表示させてください。

この状態で「Ctrl + option + command + Enter」を押下すると、、、

このように上手くいくと、画面側とコード側の二つに分かれました。

たまに上手くいかない場合がありますが、 

そんな時はこのボタンを押下すると良いでしょう。

すると、画面分割されます。あとは画面領域をクリックしてから左側の「Main.storyboard」をクリックすると片方だけUI画面が表示されます。

同じ方法で片方クリックしてからViewControllerをクリックすると片方がコード画面になります。

それでは始めましょう。

まず、画面は３つあります。

・アプリ起動後の画面「ViewController」

・Firebaseからデータを取得する画面「GetViewController」

・Firebaseにデータを送信するための画面「PostViewController」

それぞれ１画面につきコードを記述するファイルが必要です。

なので、「GetViewController」と「PostViewController」にはまだコードを記述するファイルがないためファイルを作成します。

「Cocoa Touch Class」を選択します。

送信側は「PostViewController」としましょう。その後は「create」でコードファイルの作成は完了です。 

次に「Main.storyboard」を開きます。

あらかじめ作成された「Firebaseにデータを送信するための画面」にフォーカスします。

まず、①あたりをクリックします。

右側に情報が出てくると思います。

次に「Class」のプルダウンをクリックします。

先ほど作成した「PostViewController」を選択すると、UIとの紐付けが完了します。

選択したら必ずEnterを押下する事を忘れないでください。

でなければ正しく紐付けされないからです。

Firebaseからデータを参照する方の画面も同じようにして紐づけていきます。

これで画面とコードの連携は完了です。

次回はいよいよFirebaseからデータを取得するコードを記述していきます。

お疲れ様でした。