Flutterのサード・ステップ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>Flutter]]
--[[Flutterのファースト・ステップ]]
--[[Flutterのセカンド・ステップ]]
--Flutterのサード・ステップ
--[[Flutterの4thステップ]]
--[[Flutterの5thステップ]]
*目次 [#v04cf1e9]
#contents
*概要 [#x84d2ef3]
[[Flutter]] の step by step(其の三)。
*手順1:[[プッシュ通知]] [#p7b4ca10]
[[CIBAのAD>https://techinfoofmicrosofttech.osscons.jp/ind...
**[[mBaaS]]選定 [#zd22e05a]
-色々なプラグインがあるが、~
使うと[[mBaaS]]にロックインされる。
-[[FCM>Android (FCM)]]は実質デファクトなので~
ロックインの影響も少ない。
-以下は、[[FCM>Android (FCM)]]での設定手順。
**設定手順 [#l06e8a86]
***準備(iOSのみ) [#d438a17d]
-[[APNs>iOS (APNs)]]入手
-[[APNs>iOS (APNs)]]認証キー、または[[APNs>iOS (APNs)]]証...
***[[FCM>Android (FCM)]]関連の設定 [#f3a52b61]
-[[Firebaseにログイン>#y7a528d1]]
-[[プロジェクトの作成>#l37768a2]]
-[[FCMへアプリを登録>#x8599532]]
-[[ファイルのダウンロード>#iaf16f27]]
-[[設定と実装>#cd6cf047]]
--[[ビルド・プロセスへの組込>#y3988af9]]
--[[プッシュ通知のコード実装>#a7a9f6e1]]
**[[Firebaseにログイン>Android (FCM)#k71a6dd8]] [#y7a528d1]
**[[プロジェクトの作成>Android (FCM)#sa05a1ad]] [#l37768a2]
**[[FCMへアプリを登録>Android (FCM)#u8f35bcd]] [#o625048d]
**[[ファイルのダウンロード>Android (FCM)#h236aa91]] [#f3b...
**設定と実装 [#cd6cf047]
-以下については、[[参考>#ved7091a]]の「ZUMA Lab」が参考に...
-若しくは、以下のコミット・ログを参照。
>https://github.com/OpenTouryoProject/SampleProgram/commi...
***[[ビルド・プロセスへの組込>Android (FCM)#v1a2d3ea]] [#...
Android、iOS、其々のプラットフォームに向けて、
-[[前述のダウンロード・ファイル>#iaf16f27]]をビルド・プロ...
-メイク・ファイル的なものを一部、手修正する。
***パッケージのインストール [#hb8bfd11]
firebase_messaging[[パッケージを追加する必要がある。>Flut...
-firebase_messaging | Flutter Package~
https://pub.dev/packages/firebase_messaging/install
import 'package:firebase_messaging/firebase_messaging.da...
***[[プッシュ通知のコード実装>Android (FCM)#uf6bbe9e]] [#...
-デバイスの登録
--デバイスIDを取得し、
--サーバに送信して登録
-送信・受信
--送信~
[[サーバから送信>Android (FCM)#e29bc61e]]
--受信~
プッシュ通知の受信。
**参考 [#ved7091a]
***Qiita [#kedd4899]
-【Flutter】FCMで初めてのプッシュ通知 2020年12月版~
https://qiita.com/yana1316/items/9bd3806efc9cbdddcba9
-FlutterでFCMを使ってプッシュ通知を受け取る~
https://qiita.com/0maru/items/2b438a4c4fc87b7e10f9
-FulutterでGoogleService-Info.plist(google-services.json)...
https://qiita.com/yana1316/items/314fbe3eb8d4a95ea78c
***FlutterFire [#bd8e3bde]
-Firebase Cloud Messaging~
https://firebase.flutter.dev/docs/messaging/overview/
-FCM via APNs Integration~
https://firebase.flutter.dev/docs/messaging/apple-integra...
***その他 [#pdc8a5bb]
-FlutterでFCMを使ったプッシュ通知の実装方法 (Android) - ...
https://takelg.com/flutter_push_notification_android/
-Flutter初心者がFCMを使ってプッシュ通知を受け取る | ZUMA ...
--〜設定編〜(2021/3/22版)~
https://zuma-lab.com/posts/flutter-fcm-push-notify-settings
--〜アプリ実装編〜(2021/3/22版)~
https://zuma-lab.com/posts/flutter-fcm-push-notify-develo...
-FirebaseCloudMessaging(FCM)を使って、~
Flutterでプッシュ通知を実装するまとめ|うぇるち|note~
https://note.com/welchi/n/n649728c5574d
-FlutterでFCMを使ったプッシュ通知を実装してみた | Develop...
https://dev.classmethod.jp/articles/flutter_fcm_push1/
-【Flutter】FCMでプッシュ通知を送る際のOS毎の注意点~
https://zenn.dev/shunyaendoh1215/articles/1d66e2612d23254...
*手順2:全体構成の見直し [#dd29a972]
サイズも増えて来たので、この辺りで、アプリの全体構成を見...
**[[MaterialApp>#z4e1bf0b]]と[[Scaffold>#cd3cecf6]] [#w67...
***MaterialApp [#z4e1bf0b]
-全体を構成する。
-app.dartのWidget buildメソッドでreturnされる。
***Scaffold [#cd3cecf6]
-Pageを構成する。
-PageのWidgetのWidget buildメソッドでreturnされる。
**フォルダ構成 [#jad39c19]
***main.dart [#z29eb407]
-runAppする。
-その他、初期設定等。
***common [#u6459cfd]
ButtonやView等のWidgetクラスを配置
***components [#d897b5be]
PageのWidgetクラスを配置
-app.dart
--runAppするApp。
--MaterialApp を返す。
-importer.dart
--componentで使用されるライブラリをexportし、
export 'package:flutter/material.dart';
--componentでimporter.dartをimportする。
import '../importer.dart';
-Page毎のファイル or ディレクトリ~
ディレクトリの場合、[[common>#u6459cfd]]でないWidgetクラ...
***configs [#vc2278c4]
-グローバルな変数/定数クラスを配置
-または、[[services>#o8aca8f8]]のシングルトン化
***helpers [#u4ee8972]
staticな関数クラスを配置
***models [#mabbc1fc]
モデルクラスを配置
***routes [#o3100da8]
-ルーティングの設定クラスを配置
-fluro の configureなど。
***services [#o8aca8f8]
-サービス・クラスを配置
-[[configs>#vc2278c4]]でシングルトン化
***[[クリーン・アーキテクチャ]]系 [#cea4600b]
以下のようなモノがあってもイイが、~
-Interactor(業務ロジック)
-Repository(DBアクセス)
WebAPIのクライアントに終始するようなケースでは不要か。
**画面分割 [#te4bcc17]
→ [[components>#d897b5be]]
***runAppするApp。 [#i1912042]
app.dartのWidget buildメソッドで[[MaterialApp>#z4e1bf0b]]...
***Page毎のWidget [#zd4bb904]
PageのWidgetのWidget buildメソッドで[[Scaffold>#cd3cecf6]...
**部品化 [#q43b5842]
***Widget [#eb143275]
→ [[common>#u6459cfd]]
***自作クラス [#qf215cf6]
パッケージ / プラグイン化(≒個別にプロジェクト化)しない~
自作クラスは、[[configs>#vc2278c4]]、[[helpers>#u4ee8972]...
**参考 [#f5c54b43]
-[[Flutterで本格的にアプリを書き始める前にやること > ディ...
-【Flutter入門】100画面を超える規模のアプリ~
を開発してみた感想 | 東京のアプリ開発会社~
https://pentagon.tokyo/app/2937/
-FlutterのUIウィジェットを理解するための~
基本を知ろう! (1/3):CodeZine(コードジン)~
https://codezine.jp/article/detail/13329
***Qiita [#od9473f9]
-管理しやすい(と思う)Flutterプロジェクトのディレクトリ構造~
https://qiita.com/tanakeiQ/items/2c4a7fcb8e95b9aa55ad
-(日本語訳)
--Flutter - Create Library Packages~
https://qiita.com/jugyo/items/21605821117ab0285de5
--Flutter - Developing Packages & Plugins~
https://qiita.com/jugyo/items/9f678123533ffd8b39cd
*[[参考>Flutter#a9ed99c8]] [#uf568e02]
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>Flutter]]
--[[Flutterのファースト・ステップ]]
--[[Flutterのセカンド・ステップ]]
--Flutterのサード・ステップ
--[[Flutterの4thステップ]]
--[[Flutterの5thステップ]]
*目次 [#v04cf1e9]
#contents
*概要 [#x84d2ef3]
[[Flutter]] の step by step(其の三)。
*手順1:[[プッシュ通知]] [#p7b4ca10]
[[CIBAのAD>https://techinfoofmicrosofttech.osscons.jp/ind...
**[[mBaaS]]選定 [#zd22e05a]
-色々なプラグインがあるが、~
使うと[[mBaaS]]にロックインされる。
-[[FCM>Android (FCM)]]は実質デファクトなので~
ロックインの影響も少ない。
-以下は、[[FCM>Android (FCM)]]での設定手順。
**設定手順 [#l06e8a86]
***準備(iOSのみ) [#d438a17d]
-[[APNs>iOS (APNs)]]入手
-[[APNs>iOS (APNs)]]認証キー、または[[APNs>iOS (APNs)]]証...
***[[FCM>Android (FCM)]]関連の設定 [#f3a52b61]
-[[Firebaseにログイン>#y7a528d1]]
-[[プロジェクトの作成>#l37768a2]]
-[[FCMへアプリを登録>#x8599532]]
-[[ファイルのダウンロード>#iaf16f27]]
-[[設定と実装>#cd6cf047]]
--[[ビルド・プロセスへの組込>#y3988af9]]
--[[プッシュ通知のコード実装>#a7a9f6e1]]
**[[Firebaseにログイン>Android (FCM)#k71a6dd8]] [#y7a528d1]
**[[プロジェクトの作成>Android (FCM)#sa05a1ad]] [#l37768a2]
**[[FCMへアプリを登録>Android (FCM)#u8f35bcd]] [#o625048d]
**[[ファイルのダウンロード>Android (FCM)#h236aa91]] [#f3b...
**設定と実装 [#cd6cf047]
-以下については、[[参考>#ved7091a]]の「ZUMA Lab」が参考に...
-若しくは、以下のコミット・ログを参照。
>https://github.com/OpenTouryoProject/SampleProgram/commi...
***[[ビルド・プロセスへの組込>Android (FCM)#v1a2d3ea]] [#...
Android、iOS、其々のプラットフォームに向けて、
-[[前述のダウンロード・ファイル>#iaf16f27]]をビルド・プロ...
-メイク・ファイル的なものを一部、手修正する。
***パッケージのインストール [#hb8bfd11]
firebase_messaging[[パッケージを追加する必要がある。>Flut...
-firebase_messaging | Flutter Package~
https://pub.dev/packages/firebase_messaging/install
import 'package:firebase_messaging/firebase_messaging.da...
***[[プッシュ通知のコード実装>Android (FCM)#uf6bbe9e]] [#...
-デバイスの登録
--デバイスIDを取得し、
--サーバに送信して登録
-送信・受信
--送信~
[[サーバから送信>Android (FCM)#e29bc61e]]
--受信~
プッシュ通知の受信。
**参考 [#ved7091a]
***Qiita [#kedd4899]
-【Flutter】FCMで初めてのプッシュ通知 2020年12月版~
https://qiita.com/yana1316/items/9bd3806efc9cbdddcba9
-FlutterでFCMを使ってプッシュ通知を受け取る~
https://qiita.com/0maru/items/2b438a4c4fc87b7e10f9
-FulutterでGoogleService-Info.plist(google-services.json)...
https://qiita.com/yana1316/items/314fbe3eb8d4a95ea78c
***FlutterFire [#bd8e3bde]
-Firebase Cloud Messaging~
https://firebase.flutter.dev/docs/messaging/overview/
-FCM via APNs Integration~
https://firebase.flutter.dev/docs/messaging/apple-integra...
***その他 [#pdc8a5bb]
-FlutterでFCMを使ったプッシュ通知の実装方法 (Android) - ...
https://takelg.com/flutter_push_notification_android/
-Flutter初心者がFCMを使ってプッシュ通知を受け取る | ZUMA ...
--〜設定編〜(2021/3/22版)~
https://zuma-lab.com/posts/flutter-fcm-push-notify-settings
--〜アプリ実装編〜(2021/3/22版)~
https://zuma-lab.com/posts/flutter-fcm-push-notify-develo...
-FirebaseCloudMessaging(FCM)を使って、~
Flutterでプッシュ通知を実装するまとめ|うぇるち|note~
https://note.com/welchi/n/n649728c5574d
-FlutterでFCMを使ったプッシュ通知を実装してみた | Develop...
https://dev.classmethod.jp/articles/flutter_fcm_push1/
-【Flutter】FCMでプッシュ通知を送る際のOS毎の注意点~
https://zenn.dev/shunyaendoh1215/articles/1d66e2612d23254...
*手順2:全体構成の見直し [#dd29a972]
サイズも増えて来たので、この辺りで、アプリの全体構成を見...
**[[MaterialApp>#z4e1bf0b]]と[[Scaffold>#cd3cecf6]] [#w67...
***MaterialApp [#z4e1bf0b]
-全体を構成する。
-app.dartのWidget buildメソッドでreturnされる。
***Scaffold [#cd3cecf6]
-Pageを構成する。
-PageのWidgetのWidget buildメソッドでreturnされる。
**フォルダ構成 [#jad39c19]
***main.dart [#z29eb407]
-runAppする。
-その他、初期設定等。
***common [#u6459cfd]
ButtonやView等のWidgetクラスを配置
***components [#d897b5be]
PageのWidgetクラスを配置
-app.dart
--runAppするApp。
--MaterialApp を返す。
-importer.dart
--componentで使用されるライブラリをexportし、
export 'package:flutter/material.dart';
--componentでimporter.dartをimportする。
import '../importer.dart';
-Page毎のファイル or ディレクトリ~
ディレクトリの場合、[[common>#u6459cfd]]でないWidgetクラ...
***configs [#vc2278c4]
-グローバルな変数/定数クラスを配置
-または、[[services>#o8aca8f8]]のシングルトン化
***helpers [#u4ee8972]
staticな関数クラスを配置
***models [#mabbc1fc]
モデルクラスを配置
***routes [#o3100da8]
-ルーティングの設定クラスを配置
-fluro の configureなど。
***services [#o8aca8f8]
-サービス・クラスを配置
-[[configs>#vc2278c4]]でシングルトン化
***[[クリーン・アーキテクチャ]]系 [#cea4600b]
以下のようなモノがあってもイイが、~
-Interactor(業務ロジック)
-Repository(DBアクセス)
WebAPIのクライアントに終始するようなケースでは不要か。
**画面分割 [#te4bcc17]
→ [[components>#d897b5be]]
***runAppするApp。 [#i1912042]
app.dartのWidget buildメソッドで[[MaterialApp>#z4e1bf0b]]...
***Page毎のWidget [#zd4bb904]
PageのWidgetのWidget buildメソッドで[[Scaffold>#cd3cecf6]...
**部品化 [#q43b5842]
***Widget [#eb143275]
→ [[common>#u6459cfd]]
***自作クラス [#qf215cf6]
パッケージ / プラグイン化(≒個別にプロジェクト化)しない~
自作クラスは、[[configs>#vc2278c4]]、[[helpers>#u4ee8972]...
**参考 [#f5c54b43]
-[[Flutterで本格的にアプリを書き始める前にやること > ディ...
-【Flutter入門】100画面を超える規模のアプリ~
を開発してみた感想 | 東京のアプリ開発会社~
https://pentagon.tokyo/app/2937/
-FlutterのUIウィジェットを理解するための~
基本を知ろう! (1/3):CodeZine(コードジン)~
https://codezine.jp/article/detail/13329
***Qiita [#od9473f9]
-管理しやすい(と思う)Flutterプロジェクトのディレクトリ構造~
https://qiita.com/tanakeiQ/items/2c4a7fcb8e95b9aa55ad
-(日本語訳)
--Flutter - Create Library Packages~
https://qiita.com/jugyo/items/21605821117ab0285de5
--Flutter - Developing Packages & Plugins~
https://qiita.com/jugyo/items/9f678123533ffd8b39cd
*[[参考>Flutter#a9ed99c8]] [#uf568e02]
ページ名: