概要

近年ではインターネットやスマートフォン・タブレットなどが普及し、ネット環境があればどこでも動画や映画を簡単にみることができるようになりました。

少し前（平成初期）までは、動画や映画などをみる際には書店やレンタル店などで DVD を借りてみていましたが、今や動画配信サービスを利用して動画を見る時代になりました。

動画配信サービスといえば Prime Video や Hulu、Netflix などが有名どころでしょうか。

上記の 3 つの動画配信サービスなどの UI はいずれも動画の一部を出して紹介しているような UI になっていますよね。

このようなデザインを自前で最初から作るのはとても大変です。

しかし、Nuxt 3 で動画配信サービスの画面サンプルが OSS として公開されていましたので、今回はこちらについて紹介したいと思います。

今回ご紹介する OSS は、Nuxt 3、Vue 3、UnoCSS、Image Module、The Movie Database API、TypeScript で作成された動画配信サービスサンプル「Nuxt Movies」になります。

パッと見た感じ、いかにも動画配信サービスのそれですよね！

それでは早速こちらについて詳しく見ていきましょう。

特徴

特徴としては、以下のライブラリ・フレームワークで、いかにも動画配信サービスの画面を構築している点です。

なお、動画・映画の情報は、The Movie Database からデータを取得しています。

利用方法としては、「Nuxt Movies」のリポジトリをクローンして、ローカルサーバーで起動させることで閲覧可能です。

git clone https://github.com/nuxt/movies.git
cd movies

movies へ移動したあとは、pnpm コマンドで必要なモジュールをインストール・サーバー起動を行います。

corepack enable
pnpm install
pnpm dev

ローカルサーバー起動後は、http://localhost:3000/ へアクセスして、動作していることを確認します。

または、Live Demo が公開されているので、動作結果だけまずは確認してみたい方はこちらからでも良いでしょう。

実際に私もこちらの「Nuxt Movies」を触ってみました！

ホーム画面から順に見ていきましたが、有名どころの動画配信サービスと遜色ない感じの出来栄えで、全然物足りなさなどなく完成度が高いです！！

さらに、概要だったり動画・映画の予告動画、画像、出演者などの情報もまとめられているので、動画配信サービスとして本当に利用できそうです。

また、動画も YouTube を埋め込んでユーザーに表示させるような作りになっているので、こちらの Web ページ内で完結されているのも良いですね！（下手に外部ページに飛んでしまうのを嫌うユーザーもいますし、再度読み込みが入ると冷めてしまいますしね。。）

基本は英語表記で海外向けの映画が紹介されていますが、こちらは使用している API が外国映画のものであるためで、日本仕様にしたい場合は、日本の動画・映画がまとめられているデータベースから API 経由でデータを取得して来ればよさそうですね。

日本語版のこのようなサイト、個人的にはあると便利だなと思ったので、どなたか作成してもらうのを楽しみにしています！

今回は、Nuxt 3、Vue 3、UnoCSS、Image Module、The Movie Database API、TypeScript で作成された動画配信サービスサンプル「Nuxt Movies」をご紹介いたしました。

Nuxt 3 や Vue 3 を利用しており、動画配信サービスのようなデザインの何かしらの Web アプリを作成してみようと考えている方にとっては、こちらの OSS が非常に参考になるでしょう！

興味を持った方はぜひ一度、こちらの OSS を試してみてはいかがでしょうか？

Vue 3 を利用している方、Nuxt 3 を利用されている方にとっては、とても参考になるものになると思います！

特に見当たりませんでした。