2021趣味の開発や仕事で書いた、ちょっとしたコマンドやマクロなどを気軽にストックするためのWEBサービスを作りたいなと思っていたので、作ることにしました。勉強もかねてFlutterとFirebaseを使ってみることにしました。作成したWEBサービスの動作イメージです。Webサービスの動作イメージなぜ、Flutter?一時はJavaScriptに完敗だったFlutter(DART言語)が、息を吹き返したところが気になり、試しに使ってみたくて手を出すことにしました。RFWを乗っけてバックエンドサービスを開発しています。自由度が高い反面、OS環境構築から始まり、Dockerインストール、ドメインやSSLなどの付帯作業に色々と時間もかかる点が少しネックでした。リリースしてもサーバの管理は必要になり、利用者が増えればスケーリングなどの対応が必要になってきます。」を利用してみることにしました。今回の開発はGoogleに全乗っかりです。最近耳にするサーバレス開発ですね。注意:まだFIrebaseのFlutterサポートはベストエフォートのようです。ベースでサポートしています。同等のすべての機能をご利用いただけない場合があります。https://firebase.google.com/docs/flutter/setup?hl=ja&platform=androidでも気にせずやっていきます。実際、動くアプリが作れました。Firebaseの利用Googleのアカウントがあれば、すぐに始められます。注意点としては、途中で「リージョン(地域)」の選択がありますが、これは一度選ぶと変更ができなくなります。利用ユーザが日本メインなら、東京リージョン(ASIA-NORTHEAST1)で良いと思います。「プロジェクトを作成」を押して次に進みます。プロジェクト名をつけて「続行」します。Googleアナリティクスは有効にしておきます。アカウントを選択し、「プロジェクトを作成」を進めます。プロジェクトが作成できました。Firebaseの利用機能を選定Firebaseが提供する機能が多いため、必要そうな機能にあたりを付けてみます。本来はアプリの仕様が決めてからですが、雰囲気で選びます。ログイン機能は実装しようと思います。画像データはこっちに保存っぽいですが今回は使いません。方が複雑なデータ構造で保存できるようなので、こっちは使いません。ユーザへのお知らせ機能は不要。ここにロジックを記載します。ここに出来上がったアプリをデプロイ予定。次にFlutterを使った開発の準備をしていきます。設定と構成Flutterのプロジェクトを作成するためには、FlutterのSDKが必要になります。以下のサイトからダウンロードできます。」では、このSDKのバージョンと一致させる必要があります。後でやるので今は大丈夫です。)https://flutter.dev/docs/get-started/install利用しているOSに合わせてSDKのインストールを行います。Codeに「Flutter拡張機能」は適用した方がよいです。エディタープラグインの1つを使用することをお勧めします。これらのプラグインは、コードの補完、構文の強調表示、ウィジェットの編集支援、実行とデバッグのサポートなどを提供します。https://flutter.dev/docs/get-started/editor?tab=vscodeVSCodeを起動します。Extensions:InstallExtensions]を選択します。これにより、必要なDartプラグインもインストールされます。Codeで新しいプロジェクトの作成https://flutter.dev/docs/development/tools/vs-codeFlutterスターターアプリテンプレートから新しいFlutterプロジェクトを作成します。PMacOSの上))。Projectコマンドを選択し、を押しEnterます。希望のプロジェクト名を入力します。プロジェクトの場所を選択します。プロジェクトを作成する場所を選択します。フォルダを選択すると、雛形のフォルダが自動で作成されます。ディレクトリ構成(アプリ内の役割分担、アーキテクチャ)ディレクトリ構成は、以下の記事を参考にさせて頂きました。メイン(起動プログラム)のファイルです。Widgetを継承して作成することで、UIとロジックの分離を図る。BlocやViewModelと呼ばれる層で、処理とステート(状態)を持つ。外部データインタフェース。modelが外からデータを取得時に利用。外部リソースへのデータ取得。アプリケーション内で扱われるオブジェクト群です。APIやDBなど外部リソースから取得したJSONなどのデータを、適切なオブジェクトへと変換します。firebaseとのやり取りや、メッセージ管理など。ユーティリティ的な処理を集約する。AuthenticationFlutterでのFirebase利用の手始めに、FlutterからFirebaseの認証機能を呼び出してみます。実装については、以下のサイトを参考にさせていただきました。https://www.flutter-study.dev/firebase/authentication認証機能を有効にするまずは、Firebaseの認証機能を有効にします。プロバイダの一覧から、メール/パスワードを選択します。「有効にする」ラジオボタンをオンにします。Firebaseにアプリを追加Flutterでアプリを作成する前に、Firebaseにアプリを追加します。これにより、Firebase利用のためのスクリプトが生成されます。Flutterのindex.htmlに張り付けることでFirebaseを利用することができるようになります。アプリの追加SDKの設定と構成で「CDN」をチェックします。Firebaseを呼び出すために必要な設定用のスクリプトが表示されます。index.htmlへスクリプト貼り付けFlutterで生成したindex.htmlに張り付けます。SDKのバージョンは一致させます。Authentication用ライブラリをインストールpubspec.yamlに以下を追記します。VSCodeであれば保存と同時にインストールが実行されました。実装については以下のサイトを参考にさせて頂きました。なった点や、UserCredentialが利用不可になった点は変更しました。https://qiita.com/smiler5617/items/b004debc847ffed4e3af画面は以下の4つを作成していきます。アカウント登録画面を実装もし以下のエラーが発生する場合は、DARTのSDKのバージョンとFLutterのバージョンが不一致の可能性があります。'dart.global.firebase.storagehttps://stackoverflow.com/questions/57242045/flutter-web-tried-to-call-a-non-function-such-as-null-dart-global-firebase-sメイン(プログラムの開始)Flutterはmain.dartのmin()から開始されます。由緒正しいC言語の系列の雰囲気を醸しています。あるように、起動後は「ログイン画面」が表示されることになります。次にログイン画面です。アカウントが未登録の場合に「アカウントを作成する」ボタンを押すことで、先ほどの「アカウント登録画面」へ遷移します。アカウントが登録済みの場合は、ログインを押すことで、そのユーザのホーム画面に遷移します。login.dart上記のログイン画面のソースです。ボタンクリック後にアカウント作成用の画面の遷移する。}}Registration(アカウント登録)ユーザ登録画面です。ログイン画面の「アカウントを作成する」から遷移します。registration.dart上記画面を表示しているFlutterソースです。'パスワードは8文字以上です。Firestoreデータの取得と登録を行うために、pubspec.yamlに「cloud_firestore」を追加します。Codeであれば、保存と同時にライブラリがインストールされます。cloud_firestoreを追加データモデルの検討データモデルを検討します。以下の記事が参考になりました。https://qiita.com/TakeshiNickOsanai/items/a2dc728d3b854d6c2d76今回は、ユーザごとにコードをコードメモを作っていくので、コレクションはusersにします。{documentId}挙動としては以下の通りです。コレクション[users]は初期状態で存在するドキュメントは、Google認証が通ったユーザーのIDごとに自動で決定される各ユーザーのコードメモデータは、サブコレクション[codes]内に保存される[codes]内に、任意のIDを持ったドキュメントが自動生成されるcodesには以下のデータが保存されるタイトル概要コードタグカテゴリいいね非公開フラグ作成日時コピー元コードIDentity上記のデータを格納するエンティティとして「Code」クラスを定義します。Map(json形式)で処理を行うことが多いため、あらかじめMapからCodeに変換するための処理は、その逆のCodeをMapに変換する処理を作成しておきます。};}daoデータをFirebaseに格納する処理を記載しています。このクラスがFirebaseとのやり取りを引き受ける処理になります。CRUD処理(Create/Read/Update/Delete)や、利用頻度の高い処理を実装します。}}repository(リポジトリ)DAOの処理をFutureを使って非同期処理として定義します。id);}modelmodelクラスの中で、repository(Firebaseとのやり取りはDAOが実施)を使ってデータを取得します。}}一覧画面(ホーム)の作成ベースとなるモデルの検討は完了しましたので、ここからはログイン後に表示される画面(UI)の実装に移っていきたいと思います。Home(一覧画面)ログインしたユーザに紐づくデータを一覧で表示するための画面です。ユーザが登録したCode情報は、ListViewを使って一覧で表示します。この時、1行を「CordRowView」Widgetにして、可読性と保守性を向上される工夫をしています。新しいコードを「登録」する機能を「floatingActionButton」に実装します。実際の処理は「CordDetailView」(後述にて説明)に記載します。インスタンスにおける処理。イベントを用意します。「参照」は行をタップ(Tap)することで詳細情報を表示する機能です。「編集」は画面上の編集ボタンを押すことで、登録済みのデータを更新する機能です。「削除」は画面上の削除ボタンを押すことで、該当行のデータをFirebase上からも削除する機能です。}}登録/参照/更新用のWidget(CordDetailView)画面上に参照モード/編集モード(editflag)を持たせることでで1つのWidgetに機能を集約しています。ボタンクリック後にデータを登録して、一覧画面へ戻る。}}本番環境(Firebaseのホスティング)へのデプロイ作成したWEBサービスを公開する手順です。CLIの準備アプリケーションのビルドGitHubにソースをPushfirebaseのデプロイFirebaseのCLIをインストール最終的なデプロイはFirebaseのdeployコマンドを実行するため、CLIをインストールします。npmを使ってインストールを行うため、node.jsのインストールが前提になります。コマンドを実行してインストールを行います。firebase-tools次に、CLIでログインを行います。今回作成したアプリのルートフォルダへ移動し、以下のコマンドを実行します。loginGoogleの認証画面が表示されるので、認証を行います。認証に成功すると、以下の画面が表示されます。ここまでで、firebaseのCLIツールの準備は完了です。次に、firebaseの初期化を行っていきます。基本的には聞かれたとおり(デフォルト値)が提示されるので、Yesを選択して進めていきます。init途中、Githubとの認証を求められるます。認証画面が表示さるので、認証を行います。認証に成功すると、後続の処理が進みます。workflowを聞かれるのですが、正しい「user/repository」を入力する必要があります。ビルドの実行ビルドのコマンドを実行することで、WEB用のアプリケーションがbuildフォルダ配下に作成されます。GitHubへのPushgitコマンドを実行して、資材をPushします。最後にデプロイの実行です。URL」にアクセスすると、作成したWEBアプリを確認できます。FlutterとFirebaseを使ったため、つまづく点はありましたが一連の流れを経験すれば、開発スピードは上がると思いますし、WEBサービスのプロトタイプ作成にも有効な手段だと感じました。実際にアプリがスケールアウトした場合に、運用コストがどのくらいかかるかは今回見ていませんが、個人サービス程度の規模であれば、全然問題ないと感じました。<おまけ>Flutterで実装時に調べたメモWidgetってなに?UIを構築しているパーツのこと。様々なWidgetを組み合わせることで複雑なUIを構築する。?ボタンを押したら表示する値を変更したり、データを元にWidgetを表示したい場合に使うWidget。UIを作るFlutterで状態管理といえば、上記のUIがもつStateを管理すること。状態管理が大変...→Providerを使います。pubspec.yamlに追加します。利用するdartファイルの冒頭で、importします。'package:provider/provider.dart';画面遷移ってどうやるの?Navigatorを使います。Flutterでは画面遷移の過去履歴がNavigatorを通して蓄積されます。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。WordPress.。