【作品データ追加】moviesリストにタイトル・画像・YouTube IDを登録する | NETFLIX風動画アプリを作りながらUI・検索・動画再生・共有機能を学ぶFlutter（iOS・Android）アプリ開発 | Flutterアプリケーション開発概論

この節で学ぶこと

前の節では、MovieItem クラスを使って、作品情報をひとまとまりにする方法を学びました。

今回の節では、その MovieItem を使って、実際に movies リストへ新しい作品データを追加していきます。

アプリのHome画面、Search画面、Clips画面、詳細画面に表示されている作品は、すべて movies というリストから読み込まれています。

つまり、movies に作品を追加すると、アプリに表示される作品も増えます。

今回は、次のような流れで進めます。

完成コードを使う
↓
moviesリストの場所を探す
↓
MovieItemを1つ追加する
↓
タイトル・画像URL・YouTube IDを登録する
↓
保存する
↓
画面の変化を見る
↓
チャレンジ問題に進む

コードを書くというより、まずは「作品データを1件追加すると、アプリの画面にどう反映されるのか」を体験していきましょう。

moviesリストとは？

今回のアプリでは、作品データを movies というリストにまとめています。

コードでは、このような形です。

const movies = [
  MovieItem(
    title: 'Squid Game',
    subtitle: 'Survival thriller series',
    description:
        'Hundreds of cash-strapped players accept a strange invitation to compete in children’s games. Inside, a tempting prize awaits — with deadly high stakes.',
    posterUrl:
        'https://image.tmdb.org/t/p/w500/dDlEmu3EZ0Pgg93K2SVNLCjCSvE.jpg',
    backdropUrl:
        'https://image.tmdb.org/t/p/w1280/oaGvjB0DvdhXhOAuADfHb261ZHa.jpg',
    youtubeVideoId: 'oqxAJKy0ii4',
    year: '2021',
    rating: '18+',
    seasonLabel: 'Season 1',
    category: 'TV Drama',
    matchRate: 98,
    homeCategory: HomeCategory.shows,
  ),
];

この MovieItem(...) が、作品1つ分のデータです。

実際の完成コードでは、この MovieItem(...) が複数並んでいます。

イメージとしては、こうです。

movies
├── Squid Game
├── Stranger Things
├── Money Heist
├── Wednesday
├── Dark
└── The Witcher

ここに新しい MovieItem(...) を追加すると、作品が1つ増えます。

作品データを追加すると、どこに表示される？

movies リストに作品を追加すると、いろいろな画面に反映されます。

画面	反映される内容
Home画面	横スクロールの作品一覧に表示される
Search画面	検索対象になる
Clips画面	縦スクロールで表示される
詳細画面	タップすると作品詳細が表示される
YouTube再生画面	登録したYouTube IDの動画が再生される

つまり、作品データはアプリの中心です。

1つの作品データを追加するだけで、複数の画面に影響します。

この感覚が分かると、アプリ開発がかなり面白くなってきます。

MovieItemに必要な項目

新しい作品を追加するときは、MovieItem に必要な項目をすべて書く必要があります。

今回の MovieItem には、次の項目があります。

項目	内容	例
`title`	作品タイトル	`'Interstellar'`
`subtitle`	短い説明	`'Space science fiction'`
`description`	詳しい説明文	`'A team travels through space...'`
`posterUrl`	縦長ポスター画像	`'https://...'`
`backdropUrl`	横長背景画像	`'https://...'`
`youtubeVideoId`	YouTube動画ID	`'zSWdZVtXT7E'`
`year`	公開年	`'2014'`
`rating`	年齢制限	`'13+'`
`seasonLabel`	シーズンや作品形式	`'Movie'`
`category`	ジャンル	`'Sci-Fi'`
`matchRate`	マッチ率	`97`
`homeCategory`	Home画面のカテゴリ	`HomeCategory.movies`

required がついている項目なので、どれか1つでも足りないとエラーになります。

追加用テンプレート

まずは、このテンプレートを使うと分かりやすいです。

MovieItem(
  title: '',
  subtitle: '',
  description: '',
  posterUrl: '',
  backdropUrl: '',
  youtubeVideoId: '',
  year: '',
  rating: '',
  seasonLabel: '',
  category: '',
  matchRate: 90,
  homeCategory: HomeCategory.movies,
),

ここに、作品ごとの情報を入れていきます。

最初から完璧な文章にしなくても大丈夫です。

まずは表示されることを確認するのが大切です。

moviesリストに追加した状態のイメージ

追加後は、ざっくりこのような形になります。

const movies = [
  MovieItem(
    title: 'Squid Game',
    // 省略
    homeCategory: HomeCategory.shows,
  ),
  MovieItem(
    title: 'Stranger Things',
    // 省略
    homeCategory: HomeCategory.shows,
  ),
  MovieItem(
    title: 'Interstellar',
    subtitle: 'Space science fiction',
    description:
        'A group of explorers travel through a wormhole in space to find a new home for humanity.',
    posterUrl:
        'https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg',
    backdropUrl:
        'https://image.tmdb.org/t/p/w1280/rAiYTfKGqDCRIIqo664sY9XZIvQ.jpg',
    youtubeVideoId: 'zSWdZVtXT7E',
    year: '2014',
    rating: '13+',
    seasonLabel: 'Movie',
    category: 'Sci-Fi',
    matchRate: 97,
    homeCategory: HomeCategory.movies,
  ),
];

実際のコードでは既存の作品がもっとありますが、考え方は同じです。

movies = [ ... ] の中に MovieItem(...) を追加します。

titleを登録する

title は、作品タイトルです。

title: 'Interstellar',

これはHome画面、詳細画面、Search画面などで使われます。

たとえば、Search画面では、この title が検索対象になります。

final title = movie.title.toLowerCase();

そのため、Interstellar と検索すると、この作品が表示されるようになります。

subtitleを登録する

subtitle は、短い説明です。

subtitle: 'Space science fiction',

現在のコードでは大きく目立つ場所にはあまり出てきませんが、作品データとして持っておくと、あとからUIを増やすときに便利です。

たとえば、今後カードの下に短い説明を出したいときに使えます。

posterUrlを登録する

posterUrl は、縦長のポスター画像です。

posterUrl:
    'https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg',

この画像は、横スクロールの作品カードで使われます。

Image.network(
  movie.posterUrl,
  width: width,
  height: height,
  fit: BoxFit.cover,
)

posterUrl は縦長画像の方がきれいに表示されます。

横長画像を入れると、作品カードの中で見切れたり、バランスが悪くなったりします。

backdropUrlを登録する

backdropUrl は、横長の背景画像です。

backdropUrl:
    'https://image.tmdb.org/t/p/w1280/rAiYTfKGqDCRIIqo664sY9XZIvQ.jpg',

この画像は、Home画面の大きな背景や、詳細画面、Clips画面などで使われます。

Image.network(
  movie.backdropUrl,
  fit: BoxFit.cover,
)

backdropUrl は横長画像が向いています。

スマホ画面いっぱいに表示するので、背景として使いやすい画像を選ぶときれいです。

項目	内容
`year`	公開年
`rating`	年齢制限
`seasonLabel`	シーズンや作品形式

categoryを登録する

category は作品ジャンルです。

category: 'Sci-Fi',

これは、詳細画面やClips画面に表示されます。

また、Search画面の検索対象にもなっています。

final category = movie.category.toLowerCase();

つまり、Sci-Fi と登録しておくと、Search画面で sci-fi と入力したときに見つかります。

確認する場所	見る内容
Home画面	横スクロール作品一覧に追加されているか
Moviesタブ	`HomeCategory.movies` にした場合、Moviesで表示されるか
Search画面	タイトルやカテゴリで検索できるか
Clips画面	縦スクロールで表示されるか
詳細画面	タップした作品の情報が表示されるか
Playボタン	登録したYouTube動画が再生されるか

まずカスタマイズしてみよう

今回は、自分の好きな作品を1つ追加してみましょう。

最初は、以下のテンプレートをそのままコピーして、値だけ変えればOKです。

MovieItem(
  title: 'Your Movie Title',
  subtitle: 'Short subtitle',
  description:
      'ここに作品の説明文を入れます。長すぎない文章にすると、画面で読みやすくなります。',
  posterUrl:
      'https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg',
  backdropUrl:
      'https://image.tmdb.org/t/p/w1280/rAiYTfKGqDCRIIqo664sY9XZIvQ.jpg',
  youtubeVideoId: 'zSWdZVtXT7E',
  year: '2024',
  rating: '13+',
  seasonLabel: 'Movie',
  category: 'Sci-Fi',
  matchRate: 95,
  homeCategory: HomeCategory.movies,
),

まずはタイトルだけ変えて試しても大丈夫です。

動くことを確認してから、画像や説明文を整えていきましょう。

Q. 画像が表示されません。

まず、画像URLが正しいか確認してください。

画像URLは、ブラウザで開いて画像が表示されるか確認すると分かりやすいです。

また、posterUrl には縦長画像、backdropUrl には横長画像を入れると、画面にきれいに表示されます。

Q. YouTubeが再生されません。

youtubeVideoId に、URL全体ではなく動画IDだけを入れているか確認してください。

OK：

youtubeVideoId: 'zSWdZVtXT7E',

NG：

youtubeVideoId: 'https://www.youtube.com/watch?v=zSWdZVtXT7E',

チャレンジ2：説明文を日本語にしよう

追加した作品の説明文を、日本語に変えてみましょう。

変更前：

description:
    'A group of explorers travel through a wormhole in space to find a new home for humanity.',

変更後の例：

description:
    '人類の新しい住まいを探すため、宇宙のワームホールを越えて旅をする物語です。',

チャレンジ3の答え

変更前：

homeCategory: HomeCategory.movies,

変更後：

homeCategory: HomeCategory.newHot,

Home画面の New & Hot タブを押したときに表示されるようになります。

この節のまとめ

この節では、movies リストに新しい作品データを追加する方法を学びました。

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

movies は、アプリで表示する作品データの一覧。
作品1つ分の情報は MovieItem(...) として追加する。
title は作品タイトルとして表示される。
posterUrl は縦長の作品カード画像に使う。
backdropUrl は背景画像として使う。
youtubeVideoId はYouTube再生に使う。
matchRate は数字なので、クォーテーションで囲まない。
homeCategory によって、Home画面のどのカテゴリに表示されるかが決まる。
作品を追加したら、Home画面、Search画面、詳細画面、Playボタンで確認する。

次のステップ

次の節では、下部ナビゲーションで画面を切り替える仕組みを見ていきます。

Home、Clips、Search、My Netaflixの4つの画面を、どのように切り替えているのかを確認します。

アプリらしい操作感を作る大事な部分なので、次も一緒に進めていきましょう。

完成コードを使う ↓ moviesリストの場所を探す ↓ MovieItemを1つ追加する ↓ タイトル・画像URL・YouTube IDを登録する ↓ 保存する ↓ 画面の変化を見る ↓ チャレンジ問題に進む

const movies = [ MovieItem( title: 'Squid Game', subtitle: 'Survival thriller series', description: 'Hundreds of cash-strapped players accept a strange invitation to compete in children’s games. Inside, a tempting prize awaits — with deadly high stakes.', posterUrl: 'https://image.tmdb.org/t/p/w500/dDlEmu3EZ0Pgg93K2SVNLCjCSvE.jpg', backdropUrl: 'https://image.tmdb.org/t/p/w1280/oaGvjB0DvdhXhOAuADfHb261ZHa.jpg', youtubeVideoId: 'oqxAJKy0ii4', year: '2021', rating: '18+', seasonLabel: 'Season 1', category: 'TV Drama', matchRate: 98, homeCategory: HomeCategory.shows, ), ];

画面

反映される内容

Home画面

横スクロールの作品一覧に表示される

Search画面

検索対象になる

Clips画面

縦スクロールで表示される

詳細画面

タップすると作品詳細が表示される

YouTube再生画面

登録したYouTube IDの動画が再生される

項目

内容

例

title

作品タイトル

'Interstellar'

subtitle

短い説明

'Space science fiction'

description

詳しい説明文

'A team travels through space...'

posterUrl

縦長ポスター画像

'https://...'

backdropUrl

横長背景画像

'https://...'

youtubeVideoId

YouTube動画ID

'zSWdZVtXT7E'

year

公開年

'2014'

rating

年齢制限

'13+'

seasonLabel

シーズンや作品形式

'Movie'

category

ジャンル

'Sci-Fi'

matchRate

マッチ率

97

homeCategory

Home画面のカテゴリ

HomeCategory.movies

MovieItem( title: '', subtitle: '', description: '', posterUrl: '', backdropUrl: '', youtubeVideoId: '', year: '', rating: '', seasonLabel: '', category: '', matchRate: 90, homeCategory: HomeCategory.movies, ),

MovieItem( title: 'Interstellar', subtitle: 'Space science fiction', description: 'A group of explorers travel through a wormhole in space to find a new home for humanity.', posterUrl: 'https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg', backdropUrl: 'https://image.tmdb.org/t/p/w1280/rAiYTfKGqDCRIIqo664sY9XZIvQ.jpg', youtubeVideoId: 'zSWdZVtXT7E', year: '2014', rating: '13+', seasonLabel: 'Movie', category: 'Sci-Fi', matchRate: 97, homeCategory: HomeCategory.movies, ),

const movies = [ MovieItem( title: 'Squid Game', // 省略 homeCategory: HomeCategory.shows, ), MovieItem( title: 'Stranger Things', // 省略 homeCategory: HomeCategory.shows, ), MovieItem( title: 'Interstellar', subtitle: 'Space science fiction', description: 'A group of explorers travel through a wormhole in space to find a new home for humanity.', posterUrl: 'https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg', backdropUrl: 'https://image.tmdb.org/t/p/w1280/rAiYTfKGqDCRIIqo664sY9XZIvQ.jpg', youtubeVideoId: 'zSWdZVtXT7E', year: '2014', rating: '13+', seasonLabel: 'Movie', category: 'Sci-Fi', matchRate: 97, homeCategory: HomeCategory.movies, ), ];

項目	内容
`year`	公開年
`rating`	年齢制限
`seasonLabel`	シーズンや作品形式

項目

内容

year

公開年

rating

年齢制限

seasonLabel

シーズンや作品形式

確認する場所	見る内容
Home画面	横スクロール作品一覧に追加されているか
Moviesタブ	`HomeCategory.movies` にした場合、Moviesで表示されるか
Search画面	タイトルやカテゴリで検索できるか
Clips画面	縦スクロールで表示されるか
詳細画面	タップした作品の情報が表示されるか
Playボタン	登録したYouTube動画が再生されるか

確認する場所

見る内容

Home画面

横スクロール作品一覧に追加されているか

Moviesタブ

HomeCategory.movies にした場合、Moviesで表示されるか

Search画面

タイトルやカテゴリで検索できるか

Clips画面

縦スクロールで表示されるか

詳細画面

タップした作品の情報が表示されるか

Playボタン

登録したYouTube動画が再生されるか

MovieItem( title: 'Your Movie Title', subtitle: 'Short subtitle', description: 'ここに作品の説明文を入れます。長すぎない文章にすると、画面で読みやすくなります。', posterUrl: 'https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg', backdropUrl: 'https://image.tmdb.org/t/p/w1280/rAiYTfKGqDCRIIqo664sY9XZIvQ.jpg', youtubeVideoId: 'zSWdZVtXT7E', year: '2024', rating: '13+', seasonLabel: 'Movie', category: 'Sci-Fi', matchRate: 95, homeCategory: HomeCategory.movies, ),