自動再生
オートコンプリート
1つ前のレクチャー
このレクチャーを完了し次に進む
Flutter中級編3【質問対応無し版】
【本編・第1章】オープニング
001: 【重要・必ずご一読願います】この講座のスライド解説資料と受講に際してのご留意事項について
002: オープニング(本講座で作るアプリと習得できるスキルのご紹介「瞑想アプリ:Meditation」)+講座内容に不具合があることを発見された場合+講座内容にご満足頂けなかった場合の返金方法について) (11:54)
003: 【解説】なぜ今回の課題アプリを「瞑想アプリ」にしたのか(瞑想の効能について) (2:19)
004: 【解説】現在のAndroid Studio最新版と講義動画の見え方の違いについて (5:40)
005: <資料>今回作るアプリの設計図(瞑想アプリ)
006: 今回作るアプリ(瞑想アプリ)の設計図を書こう (10:47)
【本編・第2章】アプリアイコン・ランチャースクリーンを設定しよう
007: Android Studioで今回作るアプリのプロジェクトを作ろう (3:46)
008: <資料>今回のアプリで使うリソース(画像・音)
009: 今回のアプリで使うリソースをプロジェクトに取り込もう (2:08)
010: 「flutter_launcher_icons」パッケージを使ってアプリアイコンを作ろう(アプリアイコンの作り方4ステップ) (9:29)
011: ランチャースクリーンを作ろう(Android) (3:57)
012: [macのみ]ランチャースクリーンを作ろう(iOS) (3:14)
013: アプリ全体に共通する部分の実装をしよう (3:50)
【本編・第3章】ローカライゼーション(多言語設定)をしよう
014: 多言語設定用のプラグイン「Flutter Intl」を入れよう(Android Studio) (2:22)
015: 「Flutter Intl」プラグインの初期化処理をしよう(Android Studio) (1:24)
016: 「flutter_localizations」パッケージのインストールをしよう (1:33)
017: 「flutter_localizations」パッケージの初期化コードの実装をしよう (3:07)
018: <資料>次のレクチャーで使う英語・日本語の文字列リソースファイル(ARBファイル)
019: 文字列リソースファイル(Arbファイル)の設定をしよう (4:34)
020: [Macのみ]iOS端末で多言語表示のために必要な設定をしよう(Xcode) (1:45)
【本編・第4章】イントロ画面を作ろう
021: 設計の仕組みを構築しよう(①:ViewModel層・Model層のクラスファイル作成) (5:16)
022: 設計の仕組みを構築しよう(②:DIの仕組みの設定) (6:23)
023: 【解説】イントロ画面の作り方4ステップ (5:36)
024: イントロ画面を簡単に作れるパッケージに「intro_slider」をインストールしてイントロ画面(IntroScreen)の大枠を実装しよう (2:14)
025: イントロ画面に表示するスライド画面を実装しよう (6:04)
026: イントロ画面が終了したらホーム画面に遷移する処理を実装しよう (1:44)
026-2: 【該当者のみ】「intro_slider」バージョン3.xから4.xへの破壊的変更対応 (1:38)
027: 【解説】画面下から登場するダイアログ(ModalBottomSheet)の作り方 (5:05)
028: 「showModalBottomSheet」メソッドを使ってダイアログを表示させるトップレベル関数を作ろう (4:36)
029: イントロ画面のスキップを選択させるダイアログ画面(SkipIntroDialog)を実装して表示させよう (7:23)
030: イントロ画面のスキップを設定する処理を設計の仕組みを使って外注しよう (5:07)
031: 「shared_preferences」パッケージを使って、イントロ画面をスキップする設定を永続化させよう (3:40)
031-2: 【解説】「shared_preferences」パッケージで永続化させたデータの保存場所 (4:18)
032: 「FutureBuilder」を使ってアプリ起動時にイントロ画面をスキップするかどうかを判定する処理を実装しよう (5:47)
【本編・第5章】瞑想画面のヘッダー部分と初期設定の実装をしよう
033: Dartでデータクラスを作るための「Dart Data Class」プラグインをインストールしよう(Android Studio) (3:27)
034: 【解説】Dart Data Classプラグイン使用上の注意点 (5:56)
035: <資料>モデルクラス(Level/MeisoTheme)を作るために必要なID情報のコードスニペット
036: 瞑想の設定で使うデータを格納する3つのモデルクラスを作成しよう(①:レベル) (4:18)
037: 瞑想の設定で使うデータを格納する3つのモデルクラスを作成しよう(②:テーマ) (3:21)
038: 瞑想の設定で使うデータを格納する3つのモデルクラスを作成しよう(③:時間) (1:44)
039: ユーザーの設定データを格納するモデルクラス(UserSettings)を作成しよう (2:25)
040: <資料>次のレクチャーで使うコードスニペット(HomeScreen#setLevels/setThemes/setTimes)
041: ホーム画面起動時に瞑想の設定で使うデータをセットしよう (6:46)
042: 瞑想の設定データをロードする処理を設計の仕組みを使って外注しよう (2:44)
043: 「shared_preferences」パッケージを使って瞑想の設定データを取得しよう (3:19)
044: 設定データの取得を受けて瞑想の残り時間を設定しよう(「mm:ss」フォーマットに変換) (7:54)
045: 「Stack」を使ってホーム画面の大枠を実装しよう (6:27)
046: 【解説】「Selector」とは(Consumerとの違い) (5:59)
047: 「Selector」を使って瞑想の設定データの更新だけを監視できるようにしよう (5:30)
048: 線形グラデーションを施した背景画像を実装しよう(DecoratedBackground) (5:05)
049: ヘッダー部分(HeaderPart)の大枠を実装しよう (4:43)
050: 「font_awesome_flutter」を使ってヘッダー部分の各アイテムのアイコン部分を実装しよう (4:47)
051: 「Selector」を使ってヘッダー部分の各アイテムのテキスト表示部分を実装しよう(「context.select」の違い) (6:48)
052: タッチフィードバック(Ripple)がついたアイコンをカスタムウィジェットで実装しよう (5:21)
053: 「Selector」を使って瞑想中は設定が変更できないように制御する処理を実装しよう (6:12)
054: 瞑想の各設定ダイアログを表示する処理を実装しよう (4:14)
055: レベルを設定するダイアログ画面を実装しよう(LevelSettingDialog) (6:25)
056: レベルを設定する処理を実装しよう (3:32)
057: 時間を設定するダイアログ画面を実装しよう(TimeSettingDialog) (7:26)
058: 時間を設定する処理を実装しよう (4:20)
059: テーマを設定するダイアログ画面を実装しよう(ThemeSettingDialog) (8:10)
060: 「Stack」と「Positioned」を使ってテーマ設定ダイアログを閉じる処理を実装しよう (2:51)
061: テーマを設定する処理を実装しよう (3:17)
【本編・第6章】瞑想画面のその他のパーツ部分を実装しよう
062: ステータス表示部分(StatusDisplayPart)の大枠と上段部分を実装しよう (6:09)
063: ステータス表示部分の下段部分を実装しよう (4:05)
064: 「Selector」を使ってステータス表示部分のリビルドを抑制させよう (3:36)
065: プレイボタン表示部分(PlayButtonsPart)の大きいボタンを実装しよう (5:37)
066: プレイボタン表示部分(PlayButtonsPart)の小さいボタンを実装しよう (3:44)
067: プレイボタンを押したときにViewModelに外注する処理を実装しよう (3:00)
068: 【解説】「Slider」の使い方 (3:02)
069: 「Slider」を使って音量調節スライダー部分(VolumeSliderPart)を実装しよう (5:57)
070: 【解説】「FloatingActionButton(FAB)」を複数表示できる「SpeedDial」の使い方 (3:51)
071: 「flutter_speed_dial」パッケージを使って複数FAB部分(SpeedDialPart)を実装しよう (7:19)
【本編・第7章】瞑想のロジック部分の実装をしよう
072: 【解説】瞑想のロジックはどのようになっているのか (3:57)
073: 瞑想開始前のカウントダウン処理を実装しよう (7:33)
074: 開始前カウントダウン終了時にBGMを準備する処理を設計の仕組みを使って外注しよう (7:08)
075: 【解説】「just_audio」パッケージを使った音(BGM・効果音)の流し方 (8:52)
076: 音(BGM・効果音)を準備する処理を実装しよう (6:58)
077: 呼吸サイクルに合うように瞑想時間を調整する処理を実装しよう (6:45)
078: 音(BGM・効果音)を開始する処理を実装しよう (3:04)
079: 瞑想のステータスを判定する処理を実装しよう(①:2種類のステータスの場合分け) (4:25)
080: 瞑想のステータスを判定する処理を実装しよう(②:ステータス判定ロジックの実装) (7:55)
081: 【解説】Timer.periodic内でのcancel処理の注意点(キャンセルされてもすでに発動されているコールバック関数は最後まで実行される) (4:32)
082: 瞑想の一時停止・再開・リセットする処理を実装しよう (7:11)
083: 瞑想稼働中のタイマー二重で走らないようにするための仕組みを実装しよう (5:52)
084: 瞑想終了時の処理(タイマー・BGM終了+効果音)を実装しよう (4:39)
085: 音量を調整する処理を実装しよう (3:27)
086: BGMと効果音のインスタンスを破棄する処理を実装しよう (2:07)
【本編・第8章】アプリ内広告(Admob)表示処理を実装しよう
088: 【解説】Admob・Google Mobile Adsとは (6:14)
089: 【解説】Flutterで広告(Admob)を表示させる方法(①:準備部分) (7:09)
090: 【解説】Flutterで広告(Admob)を表示させる方法(②:広告の表示と破棄) (9:17)
091: 【Android】Google Mobile Ads SDKの使用条件を確認しよう (7:57)
091-2: APIレベル31(Android12)をターゲットとした場合に必要なマニフェストファイルの設定をしよう (3:51)
092: 【iOS(Macのみ)】Google Mobile Ads SDKの使用条件を確認しよう (1:24)
093: Abmobのアカウントを開いてAndroidアプリと広告を登録してIDを取得しよう (4:17)
094: [Macのみ]AbmobのアカウントにiOSアプリと広告を登録してIDを取得しよう (1:28)
095: 「google_mobile_ads」のパッケージをインストールしよう (0:46)
096: マニフェストファイル(Android)とInfo.plistファイル(iOS)に必要な設定をしよう (6:53)
096-2: 【解説:iOSのみ】ATT(App Tracking Transparency)とSKAdNetworkとは (7:18)
096-2-2: 【解説:Android】Google Play Console上の「広告ID」とは(Admobの広告IDとは異なるので注意) (4:12)
096-3: 【解説】「app-ads.txt」ファイルとは (2:39)
096-4: 【+α:アプリをリリースする場合のみ必要】アプリの「app-ads.txt」ファイルの設定をしよう (5:59)
096-5: 【+α:Androidのみ】独自ドメイン使用時の注意点(「Package name must be a '.'-separated identifier list」の対処法) (4:34)
097: 広告表示を管理するAdManagerクラスにアプリ・広告IDをstaticプロパティとして設定しよう (5:30)
098: 「Google Mobile Ads SDK」の初期化処理を実装しよう (3:06)
098-2: [Android]ANR回避のためのマニフェストファイルの設定をしよう(Admob初期化と広告の読み込みの最適化) (9:29)
099: バナー広告の初期化と破棄の処理を実装しよう (4:49)
100: バナー広告をロードして表示させる処理を実装しよう (8:15)
101: 【解説】バナー広告における禁止事項と推奨事項(Admob) (4:35)
101-2: 【解説】ポリシー違反回避のためのテストデバイスの登録方法 (4:16)
101-3: [Android]Admob管理画面からテストデバイスを登録しよう(実機のみ) (3:16)
101-4: [iOS:Macのみ]Admob管理画面からテストデバイスを登録しよう(実機のみ) (3:55)
101-5: 開発中のアプリでテストデバイスを登録するコードを実装しよう(実機のみ) (4:58)
102: バナー広告表示に伴うViewの修正をしよう (5:06)
103: 全画面広告の初期化(広告のロード含む)と破棄の処理を実装しよう (6:45)
104: 全画面広告を表示させる処理を実装しよう (12:27)
104-2: 【解説】全画面広告における禁止事項と推奨事項(Admob) (6:05)
104-3: [Macのみ]「app_tracking_transparency」パッケージを使ってATTの設定をしよう (9:09)
104-4: [Macのみ]ATTを設定した際のiOSアプリ審査提出時の注意点(プライバシーへの回答が必要) (5:12)
【本編・第9章】アプリ内課金処理(In-App-Purchase)を実装しよう(①:Androidアプリ用の事前準備)
105: <資料>ストア掲載情報入力用のリソース(Google Play / App Store)
106: 【解説】アプリ内課金とは(アプリ外課金との違い・商品タイプ) (9:59)
107: 【解説】「RevenueCat」とは(アプリ内課金管理ツール) (7:56)
108: 【解説】「RevenueCat」を使ったアプリ内課金の実装方法 (7:08)
109: [未済の方のみ]Androidアプリのデベロッパー登録をしよう (5:10)
110: [未済の方のみ]Google Play Consoleで販売者プロフィールの設定をしよう (6:39)
110-2: [未済の方のみ]サービス手数料を15%に引き下げるための設定をしよう(アカウントグループの登録) (4:17)
111: 「purchases_flutter」パッケージのインストールをしてからGoogle Playにアップロードするファイル(App Bundle)を作ろう (6:00)
112: [未済の方のみ]アップロード鍵とキーストアの作り方 (5:08)
113: Google Play Consoleに新規アプリを追加してテスター登録しよう (3:55)
114: Google Play Consoleでライセンステスターの登録をしよう(テストで課金されないようにするための措置) (4:03)
115: 内部テストを行うためのテスターを登録してアルファ版としてリリースしよう (2:47)
116: 課金アイテムをGoogle Play Consoleに登録しよう(アプリ内アイテム(消費型・非消費型)) (10:34)
116-2: 【解説】Google Playにおけるサブスク(定期購入)の仕組み (3:11)
116-3: 課金アイテムをGoogle Play Consoleに登録しよう(サブスク(定期購入)) (6:35)
116-4: 登録したサブスク(定期購入)に特典を追加しよう (2:02)
116-5: 【解説】2022年5月に実施された定期購入管理方法の変更点 (6:55)
117: RevenueCatとアプリのデータを共有するための信用状(Credential)を作成しよう (9:57)
117-2: 【リリースの際必要】Google Play Consoleで「データセーフティ」の設定をしよう(広告で必要な設定含む) (8:03)
【本編・第10章】<Macのみ>アプリ内課金処理(In-App-Purchase)を実装しよう(②:iOSアプリ用の事前準備)
119: [未済の方のみ]iOSアプリの開発者登録をしよう(Apple Developer Programへの登録) (8:16)
120: [未済の方のみ]支払いプロフィールを設定しよう(App Store Connect) (6:04)
120-2: [未済の方のみ]サービス手数料を15%に引き下げるための設定をしよう(App Store Small Business Programの申請) (3:25)
121: バンドルIDを登録しよう(App IDs) (2:17)
122: App Store Connectで新規アプリを追加し「バージョン情報」を入力しよう (2:38)
123: 課金アイテムをApp Store Connectに登録しよう (8:16)
122-2: 【リリースの際必要】App Store Connectでアプリ内課金を審査に出す方法 (1:19)
123-3: 【解説】App Storeで有料価格を設定する場合の注意点(Apple側の価格テーブル変更によって勝手に値段が変更される可能性あり) (4:27)
124: RevenueCatにアプリのデータを見せることを許可するための「App用共有シークレット」を作成しよう (2:00)
124-2: RevenueCatにアプリ内課金の検証を許可するための「アプリ内課金キー」を作成しよう (3:25)
124-3: RevenueCatに課金アイテムの設定を自動インポートするための「App Store Connect APIキー」を作成しよう (1:47)
125: アプリ内課金テスト用のサンドボックスアカウントを作成しよう (2:47)
125-2: 【リリースの際必要】App Store Connectで「Appのプライバシー」の設定をしよう (4:06)
【本編・第11章】アプリ内課金処理(In-App-Purchase)を実装しよう(③:RevenueCatの事前準備)
126: 「RevenueCat」のアカウントを開設してプロジェクトの登録しよう (2:30)
126-2: 「RevenueCat」のプロジェクトにAndroidアプリの登録をしよう (1:48)
126-3: 【Macのみ】「RevenueCat」のプロジェクトにiOSアプリの登録をしよう (4:51)
127: 【解説】「RevenueCat」におけるアプリ内課金の管理体系 (7:30)
128: 「Product」の登録をしよう (2:38)
129: 「Entitlement」の登録をしよう(非消費型と定期購入) (2:59)
130: 「Offering」と「Package」の登録をしよう (5:24)
【本編・第12章】アプリ内課金処理(In-App-Purchase)を実装しよう(④:課金処理の実装)
131: 「RevenueCat」をFlutterのプロジェクトで使うための初期設定をしよう (4:41)
131-2: 【解説】2022/8に実施された「RevenueCat4.0」での破壊的変更への対応について (3:33)
132: アプリ内課金処理の初期化処理を実装しよう(InAppPurchaseManager) (8:25)
133: Offering(ユーザーに提供する課金アイテムの選択肢)を取得する処理を実装しよう (5:12)
134: 課金アイテムの保有状況をストアから取得する処理を実装しよう (6:37)
135: 課金アイテムのストアからの取得を受けた処理を実装しよう (7:00)
136: 課金アイテムの保有状況を受けて広告の表示・非表示処理を実装しよう(tupleパッケージの使い方) (7:02)
137: 課金アイテムの保有状況を受けてテーマの表示・非表示処理を実装しよう (4:42)
138: 課金アイテムの購入処理を設計の仕組みを使って外注しよう (4:44)
139: 課金アイテムの購入処理を実装しよう (7:48)
140: 課金アイテムの購入処理を実装できているか実機で確認してみよう (3:30)
141:課金の復元処理を実装しよう (3:12)
141-2: サブスク(定期購入)の解約手段にアプリ内からアクセスできるようにしよう (8:44)
142: 【解説】「AbsorbPointer」とは (2:47)
143: 「AbsorbPointer」と「Opacity」を使って課金処理実行中は画面が触れないようにする処理を実装しよう (5:27)
【本編・第13章:iOSのみ】Appleの有料アプリ契約・Schedule 2, Section 3.8(b)に基づくリジェクトへの対応
144: 【解説】Appleの有料アプリ契約・Schedule 2, Section 3.8(b)とは何か (5:02)
145: リジェクトを回避するためにサブスク購入前に説明ダイアログを作成する処理を実装しよう (7:27)
146: RevenueCatのSDKを使ってサブスクの情報を取得する処理を実装しよう (9:21)
147: 「url_launcher」パッケージを使って、利用規約とプライバシーへのリンクを作成する処理を実装しよう (5:21)
148: <資料>今回のアプリの完成プロジェクト
【本編・第14章】エンディング
149: エンディングメッセージ (6:47)
150: 受講生特典のご案内(講座割引クーポン)
【補足セクション①】システムボリューム(端末のボリュームコントロール)と連動させる方法(volume_controllerパッケージとStream)
F101: 【解説】「just_audio」のsetVolumeメソッドの謎解き(システムボリュームの調整はできない) (5:01)
F102: 【解説】システムボリュームを操作できるパッケージ「volume_controller」とは (4:34)
F103: 「volume_controller」パッケージをインストールしてシステムボリュームの変更を検知できるようにしよう (4:14)
F104: ChangeNotifierProxyProviderを使ってシステムボリュームの変更をViewModelに通知できるようにしよう (6:43)
F105: 「volume_controller」パッケージを使ってシステムボリュームを変更させよう (4:34)
F106: 【解説】Dartのもう1つの非同期処理「Stream」とは(一番シンプルな使い方3ステップ) (9:54)
F107: 【解説】「Stream」は本当に必要な時以外はなるべく使わない方がいい (3:51)
F108: 【解説】「StreamBuilder」とは (5:28)
F109: <資料>この補足セクションを反映させたプロジェクト
Teach online with
080: 瞑想のステータスを判定する処理を実装しよう(②:ステータス判定ロジックの実装)
このレクチャーを完了し次に進む