【本編・第１章】オープニング
-
001: 【重要・必ずご一読願います】この講座のスライド解説資料と受講に際してのご留意事項について
-
001-2: 【重要】ご質問頂く際のご留意事項（必ずご一読願います）
-
002: オープニング（本講座で作るアプリと習得できるスキルのご紹介「ニュースフィードアプリ」＋講座内容にご満足頂けなかった場合の返金方法について）） (6:32)
-
003: 【解説】現在のAndroid Studio最新版と講義動画の見え方の違いについて (5:40)
-
003-2: 【重要】Flutter3.16以降「Material3」が標準仕様になったことに伴う留意点 (2:58)
-
004: ＜資料＞今回作るアプリの設計図（ニュースフィード）
-
005: 【重要】本講座で使用するWeb通信パッケージを「Chopper」から「http」に変更したことに伴う講義動画閲覧上の注意点 (3:22)
-
006: 今回作るアプリ（ニュースフィード）の設計図を書こう (8:12)
【本編・第２章】アプリアイコン・ランチャースクリーン・カスタムフォントを設定しよう
-
007: Android Studioで今回作るアプリのプロジェクトを作ろう (5:16)
-
008: 「Android Asset Studio」を使ってアプリアイコン用のPNG画像を作成しよう (3:58)
-
008-2: アプリアイコン用の画像使用上の注意点（角丸画像はiOSで表示した際に不具合が出る） (3:41)
-
009: 「flutter_launcher_icons」パッケージを使ってアプリアイコンを作ろう（アプリアイコンの作り方４ステップ） (13:14)
-
010: 【解説】Androidのアダプティブアイコン（Adaptive Icon）とは (5:29)
-
011: ランチャースクリーンを作ろう（ランチャースクリーンの作り方３ステップ） (9:22)
-
011-2: 【解説】Android12（APIレベル31）以降のランチャースクリーンの設定方法 (8:31)
-
011-3：【解説】VectorDrawableとは（ベクター画像とビットマップ（ラスタ画像）の違い） (2:36)
-
012: 「Google Fonts」からアプリで使うカスタムフォントを取得しよう (2:57)
-
013: カスタムフォントの設定をしよう (2:06)
-
014: アプリ全体に共通する部分（アプリのルート部分）を実装しよう (6:53)
【本編・第３章】画面の大枠とBottomNavigationの設定をしよう
【本編・第４章】設計（Architecture）と状態管理（State Management）の基礎知識を身につけよう
-
018: 【解説】アプリの「設計」とは何か（なぜ「設計」が必要なのか） (5:33)
-
019: 【解説】アプリの「設計」の２大原則とは (3:32)
-
020: 【解説】設計パターン「MVVM（Model-View-ViewModel）」とは (8:54)
-
021: 【解説】FlutterにおけるViewModelの仕組み（ChangeNotifierとChangeNotifierProvider） (8:00)
-
021-2: 【解説】ViewModelの仕組みにおけるnotifyListenersメソッドはいつ発動させればいいのか (2:43)
-
022: 【解説】Google先生推奨の状態管理パッケージ「provider」とは (3:46)
-
023: 【解説】どういう時に状態管理を考える必要があるのか（Ephemeral StateとApp State） (2:50)
-
024: 【解説】Googleはなぜproviderを推奨しているのか（BLoCからproviderへ） (5:38)
-
025: 【解説】「provider」パッケージの背景にある「InheritedWidget」とは (6:22)
-
026: 【解説】「provider」パッケージの根幹にある「Provider」クラスとは (13:44)
-
027: 【解説】provider4.1.0から使えるようになった「Context.read / watch」について (5:13)
-
028：【解説】「Context.read / watch」使用上の２つの注意点（import文とジェネリクス忘れに注意） (3:38)
-
029: 【解説】「Consumer」と「Provider.of（context.watch）」の違いとは (9:14)
-
030: 【解説】「設計」に関するコーディングの指針 (5:58)
【本編・第５章】ニュース一覧画面（NewsListPage）を実装しよう
-
031: 【解説】より実践的な画面（UI）の構築方法（画面全体とパーツでWidgetクラスを分ける） (4:45)
-
032: 【解説】パーツWidgetの抽出をクラスで行う場合とメソッドで行う場合では何が違うのか (4:16)
-
033: 画面全体のレイアウトを作ろう（Column/Padding/Expanded/SizedBox/CircularProgressIndicator） (5:14)
-
034: 検索バーをカスタムウィジェットで作ろう（Card/TextField/InputDecoration） (9:45)
-
034-2：【解説】なぜTextFieldはStatelessWidgetの中で使っても入力した文字を更新表示してくれるのか (6:50)
-
034-3: 【解説】TextEditingControllerを独自に設定する場合はStatefulWidgetにする必要あり (5:15)
-
035: 「ValueChanged」を使って検索バーで入力した文字を呼び出し元のWidgetに通知させよう (4:40)
-
036: カテゴリー情報を格納するListを作ろう (3:35)
-
037: カテゴリー選択ボタン群をカスタムウィジェットで作ろう（Wrap/ChoiceChip） (5:12)
-
037-2：【解説】List.generateとListView.builderは何が違うのか (2:40)
-
038: 「ValueChanged」を使って選択したカテゴリーを呼び出し元のWidgetに通知させよう (5:19)
【本編・第６章】ニュース一覧の取得処理を外注しよう①（ViewModel・Repositoryの設定）
-
039: 「enum(列挙型)」を使って検索タイプを設定しよう（SearchType） (2:30)
-
040: NewsListViewModelクラスを作成しよう（ChangeNotifier） (3:38)
-
041: ViewModelの監視元をアプリのルートに登録しよう（ChangeNotifierProvider） (3:27)
-
042: ニュース一覧の取得処理をViewからViewModelに外注しよう (6:48)
-
043: データの取得処理のビジネスロジック部分を担うRepository（Model）クラスを作ろう (1:34)
-
044: ニュース一覧の取得処理をViewModelからRepositoryに外注しよう (6:59)
【本編・第７章】ニュース一覧の取得処理を外注しよう②（HTTP通信処理[http]）
-
045: 【解説】Web通信（HTTP通信）の仕組みと「REST」とは (7:15)
-
046: 【解説】Web通信（HTTP通信）パッケージ「http」とは (6:59)
-
047: 【解説】Web通信（HTTP通信）パッケージ「http」の使い方５ステップ (8:54)
-
048: 「NewsApi」に開発者登録をしてAPIキーを取得しよう (1:31)
-
049: 「http」を使うために必要なパッケージをインストールしよう（httpの使い方５ステップ①） (2:31)
-
050: Android Studioマニフェストファイルでインターネット接続するためのパーミッションを設定しよう（httpの使い方５ステップ②） (1:12)
-
051: 【解説】Androidの「パーミッション（Permission）」とは (4:55)
-
052: 「json_serializable」を使うためのパッケージ群のインストールをしよう（httpの使い方５ステップ④-1） (3:26)
-
053: 「json_serializable」を使ってレスポンスを格納するデータクラスを作成しよう（httpの使い方５ステップ④-2） (12:41)
-
054: 【解説】JsonからDartクラスへの変換の仕組み（json_serializable）の解説（「Map」とは） (9:15)
-
054-2：【解説】「factory」コンストラクタ（メソッド）とは何か (4:03)
-
055: 「http.get()」を使ってデータ取得処理（ネットワークリクエスト処理）を実装しよう（httpの使い方５ステップ③） (10:17)
-
055-2: 【解説】同じメソッド内での変数の重複宣言チェックはif文・switch文等で包むとやってくれないトラップあり (4:12)
-
056: 【解説】「Uri」とは（「Url」との違い） (5:06)
-
057: HTTPレスポンスをDartのモデルクラスに変換させて結果を返そう（httpの使い方５ステップ：⑤） (3:34)
-
058: 【解説】Httpレスポンスのステータスコードとは (3:19)
【本編・第８章】Webから取得した結果でニュース一覧画面(NewsListPage)を更新しよう
-
059: ニュース一覧画面起動時に取得処理を行う実装をしよう (6:35)
-
059-2: 【解説】「setState() or markNeedsBuild called during build」エラーを回避する２つの方法（Futureで逃がす・WidgetsBinding.instance.addPostFrameCallback） (6:59)
-
060: 「Consumer」を使ってWebからニュースが取得できているかを確認しよう（ListView・ListTile） (5:11)
-
060-2: 【解説】Consumerのコード解説（なぜbuilder属性の第２引数はViewModelのインスタンスを指すのか） (3:37)
-
061: ニュース記事タイルをカスタムウィジェットで作ろう（Card/InkWell等） (7:56)
-
061-2: 【解説】InkWell#onTap属性は引数のない関数のはずなのに「ValueChanged（引数が１つある関数）」を設定できるのはなぜか（コールバックの仕組みおさらい） (6:07)
-
062: 「cached_network_image」を使ってキャッシュメモリを使ったニュース記事画像表示ウィジェットを作ろう (14:22)
-
063: マテリアルデザイン標準の「TextTheme」を拡張して記事表示部分のウィジェットを作ろう(TextStyle.copyWith) (9:42)
-
059-2: 【2023年３月時点】リクエストURLの「countryCode」を「jp」にすると画像（urlToImage）が取得できない不具合が発生しています (2:12)
-
063-2：【＋α】CircularProgressIndicatorをカスタマイズしよう (1:48)
【本編・第９章】ヘッドライン記事の取得処理を実装しよう（ViewModel・Repositoryに外注）
【本編・第10章】Webから取得した結果でヘッドライン画面(HeadLinePage)を更新しよう
-
068: 「PageView.builder」を使って取得したヘッドライン記事を表示する処理を実装しよう (7:21)
-
069: ＜資料＞次のレクチャーで使うプロジェクト（page_view_sample）
-
070: 【解説】「PageView」とは（PageView.builderの使い方4ステップ） (4:14)
-
071: ＜資料＞「PageTransformer」のDartファイル
-
072: PageTransformerを使ってスムーズなページ移動を実装しよう (6:28)
-
073: 【解説】「Opacity」とは (3:08)
-
074: 【解説】「PageTransformer」のDartファイルの解説 (8:54)
-
075: ヘッドライン記事表示部分をカスタムウィジェットで作ろう（Card/Stack/InkWell/Positioned） (11:24)
-
076: 【解説】「Positioned」とは (3:04)
-
077: 「DecoratedBox」と「LinearGradient」を使ってヘッドライン記事のサムネイル画像に線形グラデーションをつけよう (4:39)
-
078: 「Transform」を使ってスワイプ時にテキストのスムーズな遷移を実現させよう (7:49)
-
079: ＜資料＞次のレクチャーで使うプロジェクト（transform_sample）
-
080: 【解説】「Transform」と「Matrix4」とは (8:56)
【本編・第11章】選択した記事のWebページ（WebPageView）を開こう
【本編・第12章】Webから取得した結果を一旦データベースに保存しよう（NewsDatabaseの設定：DBライブラリ[Drift（旧Moor）]）
-
083: 【解説】なぜWebから取得したデータを一旦DBに格納するのか (6:44)
-
084: データベース操作パッケージ「Drift（旧：Moor）」を使うための依存関係を設定しよう（Driftの使い方9ステップ①） (3:42)
-
085: コード生成用ファイルとテーブルクラスの設定をしよう（Driftの使い方9ステップ②③） (4:45)
-
086: データベースクラスの設定をしてDrift用のコードを生成しよう（Driftの使い方9ステップ④⑤） (2:15)
-
087: データベースとの接続を開始するメソッドを作成しスキーマバージョンを設定しよう（Driftの使い方9ステップ⑥） (4:47)
-
088: クエリメソッドを格納するためのDao（Database Access Object）の設定をしよう (4:38)
-
089: Dao内にデータベースの操作メソッド（クエリメソッド）を作成しよう（Driftの使い方9ステップ⑦：Daoの利用） (5:14)
-
090: データベースクラスのインスタンスを設定しよう（Driftの使い方9ステップ⑧） (6:42)
-
091: Webから取得したデータを一旦DBに保存する処理を実装しよう（Moorの使い方9ステップ⑨） (3:10)
-
092: Dartの拡張メソッドを使ってDBのテーブルクラスとモデルクラスとの型変換処理を実装しよう (7:10)
-
092-2：【解説】forEach関数とは（繰り返し処理） (2:21)
-
093: WebからDBに保存したデータを取得する処理を実装しよう (4:53)
【本編・第13章】このアプリについて画面（AboutUsPage）を実装しよう
【本編・第14章】providerパッケージを使ってDependency Injection（依存性の注入）を実装しよう
-
098: 【解説】Dependency Injection（依存性の注入：DI）とは (7:08)
-
099: 【解説】providerパッケージを使ったDIの仕組み (7:22)
-
100: 「Provider」を使ってDIを実装しよう（①：Repository部分） (7:42)
-
101: 「ChangeNotifierProvider」を使ってDIを実装しよう（②：ViewModel部分） (6:24)
-
101-2: 【解説】Providerの登録順を間違えるとどうなるのか（ProviderNotFoundException） (4:23)
-
102: ＜資料＞今回作ったアプリの完成プロジェクト
【本編・第15章】エンディング
【補足セクション①】ChangeNotifierProxyProviderを使ってModel層の変更をViewModelに自動通知させよう
-
201: 【解説】Model層の変更をViewModelに自動通知させる方法 (4:03)
-
201-2: 【解説】「ProxyProvider」とは（Providerと何が違うのか） (10:36)
-
202: 【解説】「ChangeNotifierProxyProvider」とは（Model層の変更をViewModelに通知する役割を担う） (6:05)
-
203: データのロード状況を管理するためのenum（列挙型）クラスを作ろう (1:47)
-
204: [Repositoryの修正①]ChangeNotifier化してプロパティを修正しよう (1:48)
-
205: [Repositoryの修正②]データ取得処理部分の修正をしよう (3:43)
-
206: Provider（監視元）の修正をしよう (5:30)
-
207: 【解説】ChangeNotifierProxyProviderのupdate属性で「.」を使うとエラーになるのなぜか？（「..」の謎解き） (5:13)
-
208: ViewModelの修正を修正しよう（Repositoryの更新を受信） (3:24)
-
209: Viewの修正をしよう (2:41)
-
210: ＜資料＞補足セクション部分も実装した今回のアプリのプロジェクト
【補足セクション②】サンプルプロジェクトを使ったProviderパッケージにおける読み取り方法のまとめ
【補足セクション③】Chopperパッケージを使った場合のWeb通信のやり方（httpパッケージとの比較）
-
301: なぜ「Chopperパッケージ」を使ったやり方を本編から補足セクションに移動させたのか (2:16)
-
302: 【解説】Web通信（HTTP通信）パッケージ「Chopper」とは (11:12)
-
304: （再掲）「NewsApi」に開発者登録をしてAPIキーを取得しよう (1:30)
-
305: 「Chopper」を使うために必要なパッケージをインストールしよう（Chopperの使い方10ステップ①） (4:22)
-
306: コード生成用ファイルとWebサーバーをやり取りを行うAPIクライアントを生成するための抽象クラスを作ろう（Chopperの使い方10ステップ②③） (5:12)
-
307: HTTPリクエストを定義したクエリメソッドを作ろう（Chopperの使い方10ステップ④） (7:22)
-
308: 「build_runner」を使ってChopper用のコードを生成しよう（Chopperの使い方10ステップ⑤） (1:45)
-
309: APIクライアントを取得するファクトリーメソッドを作成しよう（Chopperの使い方10ステップ⑥） (4:07)
-
310: （再掲）「json_serializable」を使ってレスポンスを格納するデータクラスを作成しよう（Chopperの使い方10ステップ⑦） (8:20)
-
311: ニュース一覧の取得処理をRepositoryからApiクライアントに外注しよう（Chopperの使い方10ステップ⑧） (5:40)
-
312: 例外処理を使ってHTTPレスポンスに応じた処理を実装しよう（Chopperの使い方10ステップ⑨） (5:24)
-
313: ＜資料＞「Chopper」パッケージを使った場合のサンプルプロジェクト
【補足セクション④】「Null Safety（Null安全）」について（バージョン2.12.0以降のDartは空っぽ（null）が大キライに）
【補足セクション⑤】データベースパッケージ「Moor」の「Drift」への名称変更に伴う移行方法
4 コメント