【カスタマイズ】作品追加・色変更・カテゴリ追加・共有文変更に挑戦する | NETFLIX風動画アプリを作りながらUI・検索・動画再生・共有機能を学ぶFlutter（iOS・Android）アプリ開発 | Flutterアプリケーション開発概論

この節で学ぶこと

前の節では、完成したNETAFLIX風アプリの全体構造を上から順番に読みました。

main() から始まり、NetflixLikeApp、NetflixShell、各画面、作品データ、詳細画面、YouTube再生、検索、共有、My Netaflix画面まで、アプリ全体がどのようにつながっているのかを整理しました。

今回の節では、完成したアプリを自分でカスタマイズしていきます。

具体的には、次の4つに挑戦します。

1. 作品を追加する
2. 色を変更する
3. カテゴリを追加する
4. 共有文を変更する

完成したコードをただ眺めるだけではなく、自分で一部を変更できるようになると、アプリ開発の理解が一気に深まります。

カスタマイズ	できるようになること
作品追加	自分で用意した作品データを一覧に追加できる
色変更	アプリ全体の雰囲気を変えられる
カテゴリ追加	Home画面や検索で扱える分類を増やせる
共有文変更	Shareボタンで送る文章を変えられる

カスタマイズ1：作品を追加する

最初に挑戦するのは、作品の追加です。

作品データは、movies というリストに入っていました。

const movies = [
  MovieItem(
    title: 'Squid Game',
    subtitle: 'Survival thriller',
    description: 'Hundreds of cash-strapped players accept a strange invitation...',
    posterUrl: 'https://...',
    backdropUrl: 'https://...',
    youtubeVideoId: 'oqxAJKy0ii4',
    matchRate: 98,
    year: 2021,
    rating: '18+',
    seasonLabel: 'Season 1',
    category: 'Thriller',
  ),
  MovieItem(
    ...
  ),
];

この movies に MovieItem を1つ追加すると、アプリ内の複数の画面に反映されます。

作品追加が反映される場所

movies は、アプリ全体で使われています。

そのため、作品を追加すると、次のような画面に影響します。

画面	反映内容
Home画面	作品リストに追加される
Search画面	検索対象に追加される
Clips画面	縦スワイプの作品に追加される
My Netaflix画面	`take` や `skip` の範囲によって表示される可能性がある
詳細画面	タップすると詳細を表示できる

1つのデータを追加するだけで、複数の画面に反映されるのがポイントです。

moviesに作品を追加
↓
Homeでも使える
↓
Searchでも使える
↓
Clipsでも使える
↓
Detailでも使える

項目	内容
`title`	作品タイトル
`subtitle`	短い説明
`description`	詳しい説明文
`posterUrl`	縦長ポスター画像URL
`backdropUrl`	横長背景画像URL
`youtubeVideoId`	YouTube動画ID
`matchRate`	マッチ率
`year`	公開年
`rating`	年齢制限
`seasonLabel`	シーズン表示
`category`	カテゴリ

画像URLで注意すること

posterUrl と backdropUrl には、画像URLを入れます。

posterUrl: 'https://...',
backdropUrl: 'https://...',

基本的には、https:// で始まるURLを使いましょう。

おすすめ
↓
https://example.com/image.jpg

避けたい
↓
http://example.com/image.jpg

iOSでは、安全でないHTTP通信が制限されることがあります。

そのため、画像や動画リンクではHTTPSを使うのが基本です。

また、画像の向きも大切です。

項目	向いている画像
`posterUrl`	縦長画像
`backdropUrl`	横長画像

posterUrl は作品カードに使われるため、縦長のポスター画像が向いています。

backdropUrl は詳細画面の背景に使われるため、横長の画像が向いています。

YouTube動画IDとは？

youtubeVideoId には、YouTubeの動画IDを入れます。

youtubeVideoId: 'oqxAJKy0ii4',

YouTubeのURLが次のような形だった場合、

https://www.youtube.com/watch?v=oqxAJKy0ii4

動画IDは、この部分です。

oqxAJKy0ii4

つまり、URL全体ではなく、動画IDだけを入れます。

youtubeVideoId: 'oqxAJKy0ii4',

URL全体を入れてしまうと、YoutubePlayerController.fromVideoId で正しく再生できない場合があります。

作品追加後に確認すること

作品を追加したら、次の流れで確認します。

1. アプリを保存する
2. flutter runで起動する
3. Home画面に作品が出るか確認する
4. Search画面で検索できるか確認する
5. 作品をタップして詳細画面に進む
6. Playボタンで動画が再生されるか確認する
7. Shareボタンで共有文が作られるか確認する

作品を追加しただけでも、確認する場所はたくさんあります。

なぜなら、1つの作品データが複数画面で使われているからです。

よくあるエラー：required項目の書き忘れ

MovieItem では、すべての項目に required がついています。

const MovieItem({
  required this.title,
  required this.subtitle,
  required this.description,
  required this.posterUrl,
  required this.backdropUrl,
  required this.youtubeVideoId,
  required this.matchRate,
  required this.year,
  required this.rating,
  required this.seasonLabel,
  required this.category,
});

そのため、1つでも書き忘れるとエラーになります。

たとえば、category を忘れると、次のような考え方のエラーになります。

categoryが必要なのに渡されていません

新しい作品を追加するときは、既存の MovieItem をコピーしてから中身だけ変更すると安全です。

NetflixColorsの役割

NetflixColors は、このアプリでよく使う色をまとめたクラスです。

色	使われる場所
`black`	画面背景
`red`	アクセントカラー
`white`	文字色
`darkGray`	カード背景
`mediumGray`	補助背景・ボタンなど

たとえば、背景色は次のように使われています。

backgroundColor: NetflixColors.black,

赤いボタンやアクセントには、次のように使います。

color: NetflixColors.red,

つまり、NetflixColors.red を変えると、赤を使っている部分の雰囲気が変わります。

色を青系に変更してみる

たとえば、赤を青に変更したい場合は、次のようにします。

変更前です。

static const red = Color(0xFFE50914);

変更後です。

static const red = Color(0xFF1E88E5);

変数名は red のままですが、中身は青になります。

ただし、分かりやすくするなら、名前も変えた方が自然です。

static const accent = Color(0xFF1E88E5);

その場合、コード内の NetflixColors.red を NetflixColors.accent に置き換える必要があります。

初学者はまず中身だけ変える

初心者の段階では、まず変数名はそのままで、中身の色だけ変えるのがおすすめです。

static const red = Color(0xFF1E88E5);

なぜなら、変数名まで変えると、コード内のすべての使用箇所も変更する必要があるからです。

色の値だけ変える
↓
簡単

変数名も変える
↓
使っている場所も全部変える必要がある

慣れてきたら、red ではなく accent のような名前に変えて、より分かりやすい設計にしていきましょう。

Colorの書き方

Flutterでは、色を次のように書きます。

Color(0xFFE50914)

この 0xFFE50914 は、色を表す16進数です。

構造は次のように考えます。

0xFF E5 09 14
   ↑  ↑  ↑  ↑
   |  |  |  |
透明度 赤 緑 青

最初の FF は、透明度です。

FF は完全に不透明という意味です。

その後の E50914 が色の部分です。

E5 = 赤成分
09 = 緑成分
14 = 青成分

Webデザインでよく見る #E50914 に、透明度の FF を前につけると、Flutterの色指定になります。

#E50914
↓
0xFFE50914

背景色を少し変えてみる

背景の黒を少し柔らかい黒にしたい場合は、次のように変えられます。

変更前です。

static const black = Color(0xFF000000);

変更後です。

static const black = Color(0xFF0B0B0F);

完全な黒よりも少しだけ柔らかい印象になります。

#000000
↓
強い黒

#0B0B0F
↓
少し柔らかい黒

動画アプリでは、背景が暗い方が映像やポスターが目立ちます。

ただし、真っ黒だと少し強く見える場合もあるため、少しだけ色を入れた黒にするのもよい方法です。

ここまでのまとめ

ここまでで、前半として「作品追加」と「色変更」を学びました。

大切なポイントは次の通りです。

作品を追加するときは、movies に MovieItem を追加する。
movies は、Home、Search、Clips、My Netaflix、Detailなど複数画面で使われる。
MovieItem には、タイトル、説明文、画像URL、YouTube動画ID、カテゴリなどをすべて書く。
作品追加では、カンマ忘れに注意する。
required の項目を書き忘れるとエラーになる。
画像URLは、できるだけ https:// を使う。
posterUrl は縦長画像、backdropUrl は横長画像が向いている。
youtubeVideoId には、YouTube URL全体ではなく動画IDだけを入れる。
色は NetflixColors にまとめている。
色を1か所にまとめると、アプリ全体の雰囲気を変更しやすい。
初学者は、まず変数名はそのままで、Color(0xFF...) の中身だけ変えると安全。
Flutterの色指定は、Webの #E50914 に透明度 FF をつけて 0xFFE50914 のように書く。
色変更後は、全画面で文字の読みやすさを確認する。

カスタマイズ3：カテゴリを追加する

ここからは、後半として「カテゴリ追加」と「共有文変更」に挑戦します。

まずは、カテゴリを追加します。

今回のアプリでは、作品ごとに category がありました。

category: 'Thriller',

このカテゴリは、作品のジャンルや分類を表す情報です。

たとえば、次のようなカテゴリを作れます。

Thriller
Mystery
Comedy
Drama
Anime
Documentary
Action
Fantasy

カテゴリを工夫すると、Home画面の表示やSearch画面の検索が、よりアプリらしくなります。

MovieItemのcategoryを確認する

MovieItem には、次のプロパティがあります。

final String category;

そして、作品データでは次のように指定しています。

MovieItem(
  title: 'Squid Game',
  subtitle: 'Survival thriller',
  description: 'Hundreds of cash-strapped players accept a strange invitation...',
  posterUrl: 'https://...',
  backdropUrl: 'https://...',
  youtubeVideoId: 'oqxAJKy0ii4',
  matchRate: 98,
  year: 2021,
  rating: '18+',
  seasonLabel: 'Season 1',
  category: 'Thriller',
),

この category を変えることで、作品の分類を変更できます。

category: 'Mystery',

category: 'Anime',

category: 'Documentary',

カテゴリ名を日本語にしてみる

カテゴリは英語でも日本語でも使えます。

たとえば、次のようにできます。

category: 'ミステリー',

category: 'アニメ',

category: 'ドキュメンタリー',

Search画面でも、日本語で検索できるようになります。

category: 'アニメ'
↓
Search画面で「アニメ」と入力
↓
該当作品が表示される

ただし、英語カテゴリと日本語カテゴリが混ざると、検索する側が少し迷うことがあります。

授業用や日本語アプリとして作るなら、カテゴリ名は日本語にそろえるのもよい方法です。

よくあるつまずき：カテゴリ名の表記ゆれ

カテゴリでよくある問題が、表記ゆれです。

たとえば、次のように書いてしまう場合です。

category: 'Anime',

category: 'anime',

category: 'アニメ',

これらは、人間には似て見えますが、コード上では別の文字列です。

Anime
anime
アニメ
↓
すべて別扱い

カテゴリで絞り込む場合は、表記をそろえましょう。

category: 'Anime',

または、日本語で統一します。

category: 'アニメ',

共有文の基本構造

現在の共有文は、次のようになっています。

text:
    'NETAFLIXで「${movie.title}」をチェック！\nhttps://www.youtube.com/watch?v=${movie.youtubeVideoId}',

実際に共有される文章は、たとえば次のようになります。

NETAFLIXで「Squid Game」をチェック！
https://www.youtube.com/watch?v=oqxAJKy0ii4

${movie.title} の部分には作品タイトルが入ります。

${movie.youtubeVideoId} の部分にはYouTube動画IDが入ります。

共有文に説明文を追加する

さらに、作品説明文も入れられます。

text:
    'NETAFLIXで「${movie.title}」をチェック！\n${movie.description}\nhttps://www.youtube.com/watch?v=${movie.youtubeVideoId}',

ただし、説明文が長すぎると、共有メッセージも長くなります。

長い共有文
↓
読む前に離脱されやすい

短い共有文
↓
見やすい

そのため、共有文には subtitle くらいの短い説明を使うのもおすすめです。

text:
    'NETAFLIXで「${movie.title}」をチェック！\n${movie.subtitle}\nhttps://www.youtube.com/watch?v=${movie.youtubeVideoId}',

subjectも変更できる

共有処理では、subject も指定しています。

subject: movie.title,

subject は、メールなどで件名として使われることがあります。

これを次のように変えることもできます。

subject: 'おすすめ作品：${movie.title}',

ただし、LINEやSNSなど、共有先によっては subject が表示されない場合もあります。

そのため、必ず伝えたい内容は text に入れておきましょう。

変えたいこと	変更する場所
作品を増やしたい	`movies`
色を変えたい	`NetflixColors`
カテゴリを変えたい	`MovieItem.category`
共有文を変えたい	`shareNetaflixMovie`
Homeの作品行を変えたい	`ContentRow` やHome画面
検索対象を増やしたい	`filteredMovies`

Q. 作品を追加したのに画面に出ません。

まず、movies の中に正しく追加されているか確認します。

const movies = [
  MovieItem(...),
  MovieItem(...),
  MovieItem(...),
];

次に、その画面が movies を表示しているか確認します。

My Netaflix画面のように、take(4) で先頭4件だけ表示している場合、追加した位置によっては表示されないことがあります。

final watchingMovies = movies.take(4).toList();

この場合、5件目以降に追加した作品は、watchingMovies には出ません。

Q. 色を変えたのに一部しか変わりません。

コード内で、直接 Color(...) を書いている場所があるかもしれません。

color: Color(0xFFE50914),

このように直接色を書いていると、NetflixColors.red を変えても反映されません。

できるだけ共通色を使いましょう。

color: NetflixColors.red,

Q. カテゴリ検索がうまくいきません。

カテゴリが検索対象に入っているか確認してください。

final category = movie.category.toLowerCase();

category.contains(keyword)

また、カテゴリ名の表記ゆれにも注意します。

Anime
anime
アニメ
↓
別の文字列として扱われる

この節のまとめ

この節では、完成したNETAFLIX風アプリを自分でカスタマイズする方法を学びました。

大切なポイントは次の通りです。

カスタマイズでは、「どこを変えると、どこに反映されるか」を考える。
作品を追加したい場合は、movies に MovieItem を追加する。
MovieItem には、必要な項目をすべて書く。
作品追加では、カンマ忘れと required 項目の書き忘れに注意する。
画像URLは、できるだけ https:// を使う。
youtubeVideoId には、YouTube URL全体ではなく動画IDだけを入れる。
色を変えたい場合は、NetflixColors を変更する。
初学者は、まず変数名は変えず、Color(0xFF...) の中身だけ変えると安全。
カテゴリは MovieItem.category で管理している。
カテゴリは検索対象にもできる。
カテゴリ名は表記ゆれに注意する。
カテゴリ別に作品を表示したい場合は、where で絞り込む。
共有文は shareNetaflixMovie の text を変更する。
文字列の中に変数を入れるときは ${movie.title} のように書く。
\n を使うと、共有文の中で改行できる。
共通関数を変更すると、複数画面に一括で反映される。

次のステップ

次の節では、完成したアプリを実機やシミュレーターで動かしながら、確認すべきポイントを整理します。

Home、Search、Clips、My Netaflix、詳細画面、YouTube再生、共有、アプリアイコンなどを順番に確認し、提出前・発表前のチェックリストとして使える形にまとめます。

カスタマイズ	できるようになること
作品追加	自分で用意した作品データを一覧に追加できる
色変更	アプリ全体の雰囲気を変えられる
カテゴリ追加	Home画面や検索で扱える分類を増やせる
共有文変更	Shareボタンで送る文章を変えられる

カスタマイズ

できるようになること

作品追加

自分で用意した作品データを一覧に追加できる

色変更

アプリ全体の雰囲気を変えられる

カテゴリ追加

Home画面や検索で扱える分類を増やせる

共有文変更

Shareボタンで送る文章を変えられる

作品データを変える ↓ moviesを見る色を変える ↓ NetflixColorsを見るカテゴリを変える ↓ MovieItem.category や表示部分を見る共有文を変える ↓ shareNetaflixMovieを見る

const movies = [ MovieItem( title: 'Squid Game', subtitle: 'Survival thriller', description: 'Hundreds of cash-strapped players accept a strange invitation...', posterUrl: 'https://...', backdropUrl: 'https://...', youtubeVideoId: 'oqxAJKy0ii4', matchRate: 98, year: 2021, rating: '18+', seasonLabel: 'Season 1', category: 'Thriller', ), MovieItem( ... ), ];

画面

反映内容

Home画面

作品リストに追加される

Search画面

検索対象に追加される

Clips画面

縦スワイプの作品に追加される

My Netaflix画面

take や skip の範囲によって表示される可能性がある

詳細画面

タップすると詳細を表示できる

項目	内容
`title`	作品タイトル
`subtitle`	短い説明
`description`	詳しい説明文
`posterUrl`	縦長ポスター画像URL
`backdropUrl`	横長背景画像URL
`youtubeVideoId`	YouTube動画ID
`matchRate`	マッチ率
`year`	公開年
`rating`	年齢制限
`seasonLabel`	シーズン表示
`category`	カテゴリ

項目

内容

title

作品タイトル

subtitle

短い説明

description

詳しい説明文

posterUrl

縦長ポスター画像URL

backdropUrl

横長背景画像URL

youtubeVideoId

YouTube動画ID

matchRate

マッチ率

year

公開年

rating

年齢制限

seasonLabel

シーズン表示

category

カテゴリ

MovieItem( title: 'Midnight Code', subtitle: 'A mystery hidden inside an app', description: 'A young developer discovers that a mysterious video app is sending messages from the future.', posterUrl: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176', backdropUrl: 'https://images.unsplash.com/photo-1519608487953-e999c86e7455', youtubeVideoId: 'dQw4w9WgXcQ', matchRate: 94, year: 2026, rating: '13+', seasonLabel: 'Limited Series', category: 'Mystery', ),

項目

向いている画像

posterUrl

縦長画像

backdropUrl

横長画像

1. アプリを保存する 2. flutter runで起動する 3. Home画面に作品が出るか確認する 4. Search画面で検索できるか確認する 5. 作品をタップして詳細画面に進む 6. Playボタンで動画が再生されるか確認する 7. Shareボタンで共有文が作られるか確認する

const MovieItem({ required this.title, required this.subtitle, required this.description, required this.posterUrl, required this.backdropUrl, required this.youtubeVideoId, required this.matchRate, required this.year, required this.rating, required this.seasonLabel, required this.category, });

class NetflixColors { static const black = Color(0xFF000000); static const red = Color(0xFFE50914); static const white = Color(0xFFFFFFFF); static const darkGray = Color(0xFF181818); static const mediumGray = Color(0xFF2B2B2B); }

色

使われる場所

black

画面背景

red

アクセントカラー

white

文字色

darkGray

カード背景

mediumGray

補助背景・ボタンなど

MovieItem( title: 'Squid Game', subtitle: 'Survival thriller', description: 'Hundreds of cash-strapped players accept a strange invitation...', posterUrl: 'https://...', backdropUrl: 'https://...', youtubeVideoId: 'oqxAJKy0ii4', matchRate: 98, year: 2021, rating: '18+', seasonLabel: 'Season 1', category: 'Thriller', ),

Text( '${movie.matchRate}% Match • ${movie.year} • ${movie.rating}', style: TextStyle( color: NetflixColors.white.withValues(alpha: 0.72), fontSize: 12, fontWeight: FontWeight.w700, ), ),

Text( '${movie.matchRate}% Match • ${movie.year} • ${movie.rating} • ${movie.category}', style: TextStyle( color: NetflixColors.white.withValues(alpha: 0.72), fontSize: 12, fontWeight: FontWeight.w700, ), ),

RowTitle(title: 'Thriller'), const SizedBox(height: 12), ContentRow(items: thrillerMovies), const SizedBox(height: 26), RowTitle(title: 'Mystery'), const SizedBox(height: 12), ContentRow(items: mysteryMovies),

Future<void> shareNetaflixMovie({ required BuildContext context, required MovieItem movie, }) async { await SharePlus.instance.share( ShareParams( text: 'NETAFLIXで「${movie.title}」をチェック！\nhttps://www.youtube.com/watch?v=${movie.youtubeVideoId}', subject: movie.title, sharePositionOrigin: shareOriginFromContext(context), ), ); }

変えたいこと	変更する場所
作品を増やしたい	`movies`
色を変えたい	`NetflixColors`
カテゴリを変えたい	`MovieItem.category`
共有文を変えたい	`shareNetaflixMovie`
Homeの作品行を変えたい	`ContentRow` やHome画面
検索対象を増やしたい	`filteredMovies`

変えたいこと

変更する場所

作品を増やしたい

movies

色を変えたい

NetflixColors

カテゴリを変えたい

MovieItem.category

共有文を変えたい

shareNetaflixMovie

Homeの作品行を変えたい

ContentRow やHome画面

検索対象を増やしたい

filteredMovies