Reskilling ❘ Programming

動画配信サービスを作ろう!プログラミング

#リスキリング #レジリエンス #ICT教育 #ITスキル #プログラミング

動画配信サービスを作ろう!
~プログラミング~

YoutubeやNetflixのような動画配信サービスはたくさんあります。

動画を見るだけのサービスですが、実は様々な技術が使われています。

例えば、再生ボタンや動画を並べるボックス、画像などなど。

今回は実際に動画配信サービスを作りながら、プログラミングを学んでみましょう!

  • 2015年

    創業

  • 120名

    従業員数

  • 2.3M

    月間UU

  • 1,800戸

    管理戸数

今回は、動画配信サービス「Netflix」のような、シンプルな動画配信アプリを作ります。

プログラミングが初めてでも大丈夫です。

CodePenを使って、実際にコードを書きながら、少しずつ画面を完成させていきましょう。

各ステップでは、コードを入力したらプレビュー画面を確認してください。

もし途中でうまく動かなくなった場合は、そのステップのコードをそのままCodePenにコピー&ペーストして進めることができます。

最終的には、映画の一覧が表示され、作品をクリックすると動画プレイヤーが表示される、シンプルな動画配信サービスを完成させます。

CodePenを開こう

まず、CodePenを開いてください。

HTML・CSS・JSの3つの入力欄があります。

今回は、HTML欄にすべてのコードを入力して作っていきます。

入力したコードは、右側などのプレビュー画面に反映されます。

準備ができたら、次のステップへ進みましょう。

ステップ1:HTMLの基本構造を作ろう

まずは、Webページの基本となるHTMLを作ります。

今回は、ページのタイトルと、ページ全体の基本構造を用意します。

CodePenのHTML欄に、次のコードを入力してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Netflix</title>
</head>

<body>

</body>
</html>

入力したら、プレビュー画面を確認してみましょう。

まだ画面には何も表示されません。

ここでは、Webページの基本となるHTMLの構造を作りました。

ステップ2:ヘッダーとメインビジュアルを作ろう

次は、サービスのロゴと、映画を紹介するメインビジュアルを追加します。

「SIMPLE MOVIE」というロゴと、映画を紹介する文章、再生ボタンを表示します。

CodePenのHTML欄を、次のコードに置き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Netflix</title>
</head>

<body>

<header>
  <div class="logo">SIMPLE MOVIE</div>
  <div>ホーム 作品一覧</div>
</header>

<section class="hero">
  <div>
    <h1>映画をもっと<br>シンプルに。</h1>
    <p>お気に入りの映画や動画をいつでも楽しめる、シンプルな動画配信サービスです。</p>
    <button onclick="playMovie(0)">▶ 再生</button>
  </div>
</section>

</body>
</html>

プレビューを確認してください。

ロゴ、メニュー、タイトル、説明文、再生ボタンが表示されました。

ステップ3:ページ全体のデザインを作ろう

ここからは、ページを動画配信サービスらしいデザインにしていきます。

背景を黒くし、文字を白くします。

さらに、ヘッダーやメインビジュアルの配置も整えます。

CodePenのHTML欄を、次のコードに置き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Netflix</title>

<style>
* {
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.logo {
  color: red;
  font-size: 24px;
}

.hero {
  max-width: 1200px;
  min-height: 400px;
  margin: 0 auto;
  padding: 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.2)
    ),
    url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1600&q=80");

  background-size: cover;
  background-position: center;
}

.hero h1 {
  font-size: 40px;
}

button {
  padding: 12px;
  border-radius: 5px;
}

</style>
</head>

<body>

<header>
  <div class="logo">SIMPLE MOVIE</div>
  <div>ホーム 作品一覧</div>
</header>

<section class="hero">
  <div>
    <h1>映画をもっと<br>シンプルに。</h1>
    <p>お気に入りの映画や動画をいつでも楽しめる、シンプルな動画配信サービスです。</p>
    <button onclick="playMovie(0)">▶ 再生</button>
  </div>
</section>

</body>
</html>

プレビューを確認してください。

背景が黒くなり、メインビジュアルに映画館の画像が表示されます。

これで、動画配信サービスらしい見た目になってきました。

ステップ4:動画プレイヤーと作品一覧の場所を作ろう

次は、映画を表示する場所を作ります。

動画プレイヤーと「人気の作品」という見出し、作品一覧を表示するための場所を用意します。

この段階では、まだ作品そのものは表示されません。

CodePenのHTML欄を、次のコードに置き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Netflix</title>

<style>
* {
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.logo {
  color: red;
  font-size: 24px;
}

.hero {
  max-width: 1200px;
  min-height: 400px;
  margin: 0 auto;
  padding: 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.2)
    ),
    url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1600&q=80");

  background-size: cover;
  background-position: center;
}

.hero h1 {
  font-size: 40px;
}

button {
  padding: 12px;
  border-radius: 5px;
}

main {
  max-width: 1200px;
  padding: 40px;
}

.player {
  display: none;
}

.player.show {
  display: block;
}

video {
  width: 100%;
}

.movies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.movie {
  background: #222;
  border-radius: 5px;
}

.movie img {
  width: 100%;
  display: block;
}

.movie p {
  margin: 0;
  padding: 15px;
}

</style>
</head>

<body>

<header>
  <div class="logo">SIMPLE MOVIE</div>
  <div>ホーム 作品一覧</div>
</header>

<section class="hero">
  <div>
    <h1>映画をもっと<br>シンプルに。</h1>
    <p>お気に入りの映画や動画をいつでも楽しめる、シンプルな動画配信サービスです。</p>
    <button onclick="playMovie(0)">▶ 再生</button>
  </div>
</section>

<main>

  <div class="player" id="player">
    <h2 id="title"></h2>
    <video id="video" controls></video>
    <button onclick="closeMovie()">閉じる</button>
  </div>

  <h2>人気の作品</h2>

  <div class="movies" id="movies"></div>

</main>

</body>
</html>

プレビューを確認してください。

「人気の作品」という見出しが表示されます。

また、動画を表示するための場所も用意されています。

ステップ5:作品のデータを作ろう

ここからJavaScriptを使います。

まず、4つの映画について、タイトル・画像・動画の情報を用意します。

このように、映画の情報をまとめて持っておくことで、あとから作品一覧を表示できます。

CodePenのHTML欄を、次のコードに置き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Netflix</title>

<style>
* {
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.logo {
  color: red;
  font-size: 24px;
}

.hero {
  max-width: 1200px;
  min-height: 400px;
  margin: 0 auto;
  padding: 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.2)
    ),
    url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1600&q=80");

  background-size: cover;
  background-position: center;
}

.hero h1 {
  font-size: 40px;
}

button {
  padding: 12px;
  border-radius: 5px;
}

main {
  max-width: 1200px;
  padding: 40px;
}

.player {
  display: none;
}

.player.show {
  display: block;
}

video {
  width: 100%;
}

.movies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.movie {
  background: #222;
  border-radius: 5px;
}

.movie img {
  width: 100%;
  display: block;
}

.movie p {
  margin: 0;
  padding: 15px;
}

</style>
</head>

<body>

<header>
  <div class="logo">SIMPLE MOVIE</div>
  <div>ホーム 作品一覧</div>
</header>

<section class="hero">
  <div>
    <h1>映画をもっと<br>シンプルに。</h1>
    <p>お気に入りの映画や動画をいつでも楽しめる、シンプルな動画配信サービスです。</p>
    <button onclick="playMovie(0)">▶ 再生</button>
  </div>
</section>

<main>

  <div class="player" id="player">
    <h2 id="title"></h2>
    <video id="video" controls></video>
    <button onclick="closeMovie()">閉じる</button>
  </div>

  <h2>人気の作品</h2>

  <div class="movies" id="movies"></div>

</main>

<script>
const movies = [
  {
    title: "サンプルムービー 1",
    image: "https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie01.mp4"
  },
  {
    title: "サンプルムービー 2",
    image: "https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie02.mp4"
  },
  {
    title: "サンプルムービー 3",
    image: "https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie03.mp4"
  },
  {
    title: "サンプルムービー 4",
    image: "https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie04.mp4"
  }
];
</script>

</body>
</html>

このステップでは、作品の情報をJavaScriptで用意しました。

まだ画面には作品一覧として表示されません。

次のステップで、このデータを画面に表示します。

ステップ6:作品を画面に表示しよう

次は、JavaScriptを使って、先ほど用意した4つの作品を画面に表示します。

作品の画像とタイトルを自動的に表示します。

CodePenのHTML欄を、次のコードに置き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Netflix</title>

<style>
* {
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.logo {
  color: red;
  font-size: 24px;
}

.hero {
  max-width: 1200px;
  min-height: 400px;
  margin: 0 auto;
  padding: 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.2)
    ),
    url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1600&q=80");

  background-size: cover;
  background-position: center;
}

.hero h1 {
  font-size: 40px;
}

button {
  padding: 12px;
  border-radius: 5px;
}

main {
  max-width: 1200px;
  padding: 40px;
}

.player {
  display: none;
}

.player.show {
  display: block;
}

video {
  width: 100%;
}

.movies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.movie {
  background: #222;
  border-radius: 5px;
}

.movie img {
  width: 100%;
  display: block;
}

.movie p {
  margin: 0;
  padding: 15px;
}

</style>
</head>

<body>

<header>
  <div class="logo">SIMPLE MOVIE</div>
  <div>ホーム 作品一覧</div>
</header>

<section class="hero">
  <div>
    <h1>映画をもっと<br>シンプルに。</h1>
    <p>お気に入りの映画や動画をいつでも楽しめる、シンプルな動画配信サービスです。</p>
    <button onclick="playMovie(0)">▶ 再生</button>
  </div>
</section>

<main>

  <div class="player" id="player">
    <h2 id="title"></h2>
    <video id="video" controls></video>
    <button onclick="closeMovie()">閉じる</button>
  </div>

  <h2>人気の作品</h2>

  <div class="movies" id="movies"></div>

</main>

<script>
const movies = [
  {
    title: "サンプルムービー 1",
    image: "https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie01.mp4"
  },
  {
    title: "サンプルムービー 2",
    image: "https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie02.mp4"
  },
  {
    title: "サンプルムービー 3",
    image: "https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie03.mp4"
  },
  {
    title: "サンプルムービー 4",
    image: "https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie04.mp4"
  }
];

const moviesElement = document.getElementById("movies");

movies.forEach((movie, index) => {
  moviesElement.innerHTML += `
    <div class="movie" onclick="playMovie(${index})">
      <img src="${movie.image}">
      <p>${movie.title}</p>
    </div>
  `;
});
</script>

</body>
</html>

プレビューを確認してください。

4つの作品が一覧として表示されます。

作品ごとに画像とタイトルが表示されました。

また、作品をクリックできるようになっています。

ステップ7:作品をクリックして再生できるようにしよう

次は、作品をクリックしたときの動きを作ります。

作品をクリックすると、その作品のタイトルと動画が表示されます。

CodePenのHTML欄を、次のコードに置き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Netflix</title>

<style>
* {
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.logo {
  color: red;
  font-size: 24px;
}

.hero {
  max-width: 1200px;
  min-height: 400px;
  margin: 0 auto;
  padding: 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.2)
    ),
    url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1600&q=80");

  background-size: cover;
  background-position: center;
}

.hero h1 {
  font-size: 40px;
}

button {
  padding: 12px;
  border-radius: 5px;
}

main {
  max-width: 1200px;
  padding: 40px;
}

.player {
  display: none;
}

.player.show {
  display: block;
}

video {
  width: 100%;
}

.movies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.movie {
  background: #222;
  border-radius: 5px;
}

.movie img {
  width: 100%;
  display: block;
}

.movie p {
  margin: 0;
  padding: 15px;
}

</style>
</head>

<body>

<header>
  <div class="logo">SIMPLE MOVIE</div>
  <div>ホーム 作品一覧</div>
</header>

<section class="hero">
  <div>
    <h1>映画をもっと<br>シンプルに。</h1>
    <p>お気に入りの映画や動画をいつでも楽しめる、シンプルな動画配信サービスです。</p>
    <button onclick="playMovie(0)">▶ 再生</button>
  </div>
</section>

<main>

  <div class="player" id="player">
    <h2 id="title"></h2>
    <video id="video" controls></video>
    <button onclick="closeMovie()">閉じる</button>
  </div>

  <h2>人気の作品</h2>

  <div class="movies" id="movies"></div>

</main>

<script>
const movies = [
  {
    title: "サンプルムービー 1",
    image: "https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie01.mp4"
  },
  {
    title: "サンプルムービー 2",
    image: "https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie02.mp4"
  },
  {
    title: "サンプルムービー 3",
    image: "https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie03.mp4"
  },
  {
    title: "サンプルムービー 4",
    image: "https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie04.mp4"
  }
];

const moviesElement = document.getElementById("movies");

movies.forEach((movie, index) => {
  moviesElement.innerHTML += `
    <div class="movie" onclick="playMovie(${index})">
      <img src="${movie.image}">
      <p>${movie.title}</p>
    </div>
  `;
});

function playMovie(index) {
  document.getElementById("title").textContent = movies[index].title;
  document.getElementById("video").src = movies[index].video;
  document.getElementById("player").classList.add("show");
  document.getElementById("player").scrollIntoView();
}
</script>

</body>
</html>

プレビューで作品をクリックしてください。

動画プレイヤーの場所が表示され、選択した作品のタイトルが表示されます。

これで、作品をクリックして表示する仕組みができました。

ステップ8:動画プレイヤーを閉じられるようにしよう

最後に、動画プレイヤーを閉じる機能を追加します。

「閉じる」ボタンをクリックすると、動画を停止して、動画プレイヤーを非表示にします。

CodePenのHTML欄を、次のコードに置き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Netflix</title>

<style>
* {
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.logo {
  color: red;
  font-size: 24px;
}

.hero {
  max-width: 1200px;
  min-height: 400px;
  margin: 0 auto;
  padding: 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.2)
    ),
    url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1600&q=80");

  background-size: cover;
  background-position: center;
}

.hero h1 {
  font-size: 40px;
}

button {
  padding: 12px;
  border-radius: 5px;
}

main {
  max-width: 1200px;
  padding: 40px;
}

.player {
  display: none;
}

.player.show {
  display: block;
}

video {
  width: 100%;
}

.movies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.movie {
  background: #222;
  border-radius: 5px;
}

.movie img {
  width: 100%;
  display: block;
}

.movie p {
  margin: 0;
  padding: 15px;
}

</style>
</head>

<body>

<header>
  <div class="logo">SIMPLE MOVIE</div>
  <div>ホーム 作品一覧</div>
</header>

<section class="hero">
  <div>
    <h1>映画をもっと<br>シンプルに。</h1>
    <p>お気に入りの映画や動画をいつでも楽しめる、シンプルな動画配信サービスです。</p>
    <button onclick="playMovie(0)">▶ 再生</button>
  </div>
</section>

<main>

  <div class="player" id="player">
    <h2 id="title"></h2>
    <video id="video" controls></video>
    <button onclick="closeMovie()">閉じる</button>
  </div>

  <h2>人気の作品</h2>

  <div class="movies" id="movies"></div>

</main>

<script>
const movies = [
  {
    title: "サンプルムービー 1",
    image: "https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie01.mp4"
  },
  {
    title: "サンプルムービー 2",
    image: "https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie02.mp4"
  },
  {
    title: "サンプルムービー 3",
    image: "https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie03.mp4"
  },
  {
    title: "サンプルムービー 4",
    image: "https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie04.mp4"
  }
];

const moviesElement = document.getElementById("movies");

movies.forEach((movie, index) => {
  moviesElement.innerHTML += `
    <div class="movie" onclick="playMovie(${index})">
      <img src="${movie.image}">
      <p>${movie.title}</p>
    </div>
  `;
});

function playMovie(index) {
  document.getElementById("title").textContent = movies[index].title;
  document.getElementById("video").src = movies[index].video;
  document.getElementById("player").classList.add("show");
  document.getElementById("player").scrollIntoView();
}

function closeMovie() {
  document.getElementById("video").pause();
  document.getElementById("player").classList.remove("show");
}
</script>

</body>
</html>

プレビューで作品をクリックしてみましょう。

動画プレイヤーが表示されます。

次に「閉じる」をクリックしてください。

動画プレイヤーが非表示になりました。

これで、作品を選ぶ、動画を表示する、動画プレイヤーを閉じる、という一連の動きが完成しました。

ステップ9:スマートフォンでも見やすくしよう

最後に、スマートフォンなど画面の幅が小さい場合でも、作品一覧が見やすくなるようにします。

画面の幅が700px以下になると、作品を2列で表示します。

CodePenのHTML欄を、次のコードに置き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Netflix</title>

<style>
* {
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.logo {
  color: red;
  font-size: 24px;
}

.hero {
  max-width: 1200px;
  min-height: 400px;
  margin: 0 auto;
  padding: 50px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.2)
    ),
    url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1600&q=80");

  background-size: cover;
  background-position: center;
}

.hero h1 {
  font-size: 40px;
}

button {
  padding: 12px;
  border-radius: 5px;
}

main {
  max-width: 1200px;
  padding: 40px;
}

.player {
  display: none;
}

.player.show {
  display: block;
}

video {
  width: 100%;
}

.movies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.movie {
  background: #222;
  border-radius: 5px;
}

.movie img {
  width: 100%;
  display: block;
}

.movie p {
  margin: 0;
  padding: 15px;
}

@media (max-width: 700px) {
  .movies {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero {
    padding: 30px;
  }

  main {
    padding: 30px;
  }
}

</style>
</head>

<body>

<header>
  <div class="logo">SIMPLE MOVIE</div>
  <div>ホーム 作品一覧</div>
</header>

<section class="hero">
  <div>
    <h1>映画をもっと<br>シンプルに。</h1>
    <p>お気に入りの映画や動画をいつでも楽しめる、シンプルな動画配信サービスです。</p>
    <button onclick="playMovie(0)">▶ 再生</button>
  </div>
</section>

<main>

  <div class="player" id="player">
    <h2 id="title"></h2>
    <video id="video" controls></video>
    <button onclick="closeMovie()">閉じる</button>
  </div>

  <h2>人気の作品</h2>

  <div class="movies" id="movies"></div>

</main>

<script>
const movies = [
  {
    title: "サンプルムービー 1",
    image: "https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie01.mp4"
  },
  {
    title: "サンプルムービー 2",
    image: "https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie02.mp4"
  },
  {
    title: "サンプルムービー 3",
    image: "https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie03.mp4"
  },
  {
    title: "サンプルムービー 4",
    image: "https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=800&q=80",
    video: "https://github.com/example/example/releases/download/v1.0/movie04.mp4"
  }
];

const moviesElement = document.getElementById("movies");

movies.forEach((movie, index) => {
  moviesElement.innerHTML += `
    <div class="movie" onclick="playMovie(${index})">
      <img src="${movie.image}">
      <p>${movie.title}</p>
    </div>
  `;
});

function playMovie(index) {
  document.getElementById("title").textContent = movies[index].title;
  document.getElementById("video").src = movies[index].video;
  document.getElementById("player").classList.add("show");
  document.getElementById("player").scrollIntoView();
}

function closeMovie() {
  document.getElementById("video").pause();
  document.getElementById("player").classList.remove("show");
}
</script>

</body>
</html>

これで完成です。

作品一覧を表示し、作品をクリックすると動画プレイヤーが表示され、「閉じる」を押すとプレイヤーが非表示になります。

また、画面の幅が小さい場合は作品一覧が2列で表示されます。

今回作ったのはシンプルな動画配信サービスですが、ここまでの開発で、HTMLによる画面作成、CSSによるデザイン、JavaScriptによる動きの追加を体験することができました。

・本講座の制作
CIT経営開発事務所

・監修
CIT経営開発事務所 代表
井上 隆寛(いのうえ・たかひろ)

事業コンサルタント
AI開発エンジニア
行政書士R6合格者未登録

大手システム開発会社にてフルスタックSE兼Webデザイナーとして従事。2021年にコンサルタントとして独立し、企業に対するITコンサルティング・ソリューション導入支援事業を開始。2023年にはイベント企画・運営事業を新たに展開、2024年には行政書士試験に合格。現在はAIコンサルティング、システム開発、エンターテイメントの3事業を柱に、企業の技術顧問や講師としてICT教育やプログラミング・マーケティング授業も手がける。

公開中のリスキリング体験授業・学習教材

リスキリングに役立つ学習教材や体験授業を公開しています。ご自身の学習にお役立てください。

  • 2015年

    創業

  • 120名

    従業員数

  • 2.3M

    月間UU

  • 1,800戸

    管理戸数