Flutterでアプリを作るとき、これさえ書いとけば動くコードを展開しておく

Swift一筋で行きたいと思いながらも、最近になってFlutterでアプリを作成したいと感じるbangです。
今回は「Flutterでまずこれを書けばアプリとして起動できます」というコードをTrelloではなくブログに書いてみようと思います。
 
完成図

本題のコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterHajimeniKakuYatu',
      home: Scaffold(
        appBar: AppBar(
          title: Text('タイトルバーネーム'),
        ),
        body: Text(
          'テキストスタイル',
          style: TextStyle(fontSize: 30),
        ),
      ),
    );
  }
}

FlutterでアプリをCreateするときいつもコメントアウトを消していたので、とりあえずこのコードをコピペしてから開発に入ります。
今後もっと型として上手く使えるようにします。

最近公開された記事で GoogleがFuchsiaプロジェクトを公開したそうで
Flutterはこの新しいOS向けに開発されたと知りさらに需要が高まるのではなかろうか

www.itmedia.co.jp

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からデータを取得するコードを記述していきます。

お疲れ様でした。

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

やること

前回の続きです。

今回は「FIrebase RealtimeDatabse」との連携準備をします。

Firebase側の初期手順については 以下の記事で紹介していますので、 若干省略した形で説明します。

umetaberu.hatenablog.com

環境

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連携準備

この手順に入る前の前提条件は以下のふたつです。サイト上部にこちらの手順については説明していますのでまだ実施していなければそちらから実施しましょう。

・Firebaeのサイト側の初期手順が完了してい事(idの割り振り)

・xcodeの初期化コードを記述している事。(Appdelegate.swiftへの記述)

上記が完了したらFirebaseのライブラリを使用できるようにしたいので、「CocoaPods」のインストールに入りたいと思います。

「CocoaPods」ってなんだ？ってなった人に向けて、一言で言うとライブラリ管理ツールです。

外部から使いたい機能を実装したい時に一つのファイルにライブラリを記述しておけば使用できるようになります。

設定手順は以下の二つのコマンドを打ち込むと使えるようになります。

「CocoaPods」のインストール

sudo gem install cocoapods

セットアップ的なコマンド

pod setup

これで「CocoaPods」初期手順は完了です。

エラーが出ちゃった場合はネットで調べるとよく出てきますので問題ありません。

エラー対処方法の記事も余裕があればまとめようと思います。

それでは本題に戻りましょう。

ターミナル を開いていますか？まずは自分が作成したプロジェクトに移動しましょう。

ちなみに画面上部の「BMI_APP」をD&Dでターミナル に持ってくる事でパスがコピーされます。

「ls」で一応場所を確認しておきます。

プロジェクトフォルダ配下であることを確認できたら「pod init」と入力してください。

open "フォルダパス"　でプロジェクトフォルダに移動できます。

「Podfile」が出来ていると思います。

Podfileを開いたら、下記画像の通り、「pod 'FIrebase/Database'」と入力しましょう。

cmd + s　で保存してからPodfileを閉じるとターミナルに戻り、「pod install」でライブラリをインストールします。

エラーが出なければ以下の画像のようになります。

完了したらターミナル を閉じましょう。

プロジェクトフォルダ配下に戻りましょう。

今まで使っていた青いアイコンではなく、白いアイコンの「xcworkspace」と言うファイルが出来ていると思いますので、これからはこちらをダブルクリックして編集していきましょう。

これでFirebase連携手順は完了です。

今回は前提条件としておりましたが、初期コードの記述とFIrebase側の設定を忘れない事。

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

やること

前回の続きです。

今回は画面周りを秒速で完成させましょう！

環境

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 完成・動作確認　追記

画面周りを作成する

「Main.storyboard」を表示させましょう。

前回少しやりましたが、

オブジェクトライブラリは「cmd + shift + L」で表示できます。

ラベルを使いたい時は「cmd + shift + L」の後「label」と入力すると出てきます。

出てきたらD&D(ドラッグアンドドロップ)で配置します。

あ、ちなみにボタンから「オブジェクトライブラリ」も出せます。

「+」から表示できます。

ロゴのデザインはどこか適当に拾ってきたものですがどのサイトだったか忘れてしまいました(汗)

このデザインについてはWebで「文字デザイン　変換」などで調べれば出てきますのでググってください。

文字フォントは右サイドの「Font」で変更可能です。

コードで編集もできますが、今回はこちらから編集していきたいと思います。

ボタンは「button」で表示されます。

ここで、背景色も変えていきましょう。画面をタップすると右側にサイドバーが出てくると思いますが、そちらの「BackGround」で背景色は変更可能です。

前回私が作成した時はオレンジ色でしたが、今回は緑色にしてみました。

アプリ起動後の画面のそれぞれのサイズはこんな感じです。

ロゴの「BMIChecker」のフォントサイズ：66

ボタン「BMIを見る」・「BMIを登録する」のフォントサイズ：23

ボタンのテキストカラー：white

次にBMI登録画面を作成します。

新しく画面を作成したい時は、オブジェクトライブラリで「 ViewController」と入力しましょう。

実際、「viewc」くらい入力するとでます。

これを２つ追加します。

「Firebaseから参照する画面」と「Firebaseへ登録する画面」を作成するためです。

「Firebaseへ登録する画面」についてはこんな感じ。

 はい。この白いやつは「テキストフィールド」と言われていて文字入力をする時に使用します。「textfeild」と入力すると出てきます。

 続いて、「Firebaseから参照する画面」について。

こちらも登録画面とほとんど変わりませんので、コピペしましょう。

「shiftキー」を押下しながらクリックしていくと複数選択できます。

コピペ後の画面がこちら。以下は完成品からコピペしたので既に「Firebaseから参照する画面」の状態です。

全体図はこんな感じになりました。

忘れてましたが、「BMIChecker」とその下のメッセージの色も白色に変えておきましょう。

以上、画面周り完成です。

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

やること

プログラミング学習の初めの時期といったらBMI計算アプリの作成はもはや登竜門のようなもの。(どうかな)

今回はシンプルにBMIを計算してFirebaseに登録するIOSアプリを作成します。

携

環境

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 完成・動作確認　追記

完成イメージ図

 1.まずは画面周りから作成

UIから作成していきます。

xcodeからプロジェクトを作成します。

「Create a new Xcode project」を押下します。

次にAppを選択します。

 「ProductName」には任意のアプリ名を入れましょう。

今回はBMIの計算アプリを作成するので、「BMI_APP」という名前にします。

「General」画面が表示されたら今回のアプリは横画面を使用しないかつタブレットを使わないためチェックを外します。

 出来たら早速Main.storyboardに写りましょう！ 

と言いたいところですが、

その前にここでどのような完成図になるのか把握するため、全体図を載せておきます。

全体図が掴めたら画面周りを作成しましょう。 

 操作方法として

cmd + shift + L　でオブジェクトライブラリを表示させることができます。

文字列はLabel

ボタンはbuttonと入力すると出てきます。

こんな感じで次回は画面作成していきます。

 

Firebaseとアプリを紐付ける

目的 

Xcodeで作成したSwiftアプリとFirebaseの連携

環境

Xcode: ver12.0.1

Swift5

MacOS: MacOS Catalina 10.15.7

目次

1. プロジェクト名を記入する
2. Googleアナリティクス
3. プロジェクト作成
4. IOSボタンを押下する
5. Bundle Identiferをコピペ
6. 設定ファイルのダウンロード
7. 初期処理コードを追加

まずはネットで「Firebase」と検索しましょう。

このような画面が出てきたら「プロジェクトを追加」ボタンを押します。

 

1.プロジェクト名を記入する

なんでも良いのでプロジェクト名を記入します。xcodeで作成したアプリ名などが無難ですかね。

2.Googleアナリティクス

下図のような画面が表示されたら、Googleアナリティクスを使う場合はトグルをオンにする。

今回はオフにして次に進みます。

プロジェクトを作成中...

完了！

4.IOSボタンを押下する

今回はIOSアプリとの連携のため、IOSボタンを押下する

下図の画面が表示されたら、

Xcodeで作成したアプリを開いときましょう。

5.bundle identiferをコピー

xcodeを開いて「Bundle Identifer」をコピーしましょう。

コピーしたらIOSバンドルIDの蘭にペーストします。

アプリのニックネームは未記入でも大丈夫です。アプリの登録ボタンを押下しましょう。

6.設定ファイルのダウンロード

GoogleService-Info.plistをプロジェクトフォルダに格納します。

 あとは画面の指示に従って次へ進みましょう。

ここまできたらFirebase側の設定は完了です。

コンソールに進むを押下しましょう。

 7.初期処理コードを追加

Xcode側に戻って初期設定コードを書きます。

AppDelegate.swiftに「FirebaseApp.configure()」を記入してください。

これで連携は完了になります。

お疲れ様でした。