
動画配信サービスを作ろう!
~プログラミング~
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教育やプログラミング・マーケティング授業も手がける。
公開中のリスキリング体験授業・学習教材
リスキリングに役立つ学習教材や体験授業を公開しています。ご自身の学習にお役立てください。
iphoneアプリを作ろう!クラッシュパズル編
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
iphoneアプリを作ろう!飲食店の注文アプリ編
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
iphoneアプリを作ろう!カレンダー編
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
動画配信サービスを作ろう!プログラミング
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
データサイエンス入門 | 統計基礎 回帰分析編
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
データサイエンス入門 | 統計基礎 確率分布編
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
法律入門 | 民法基礎 総則編
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
Python 3 エンジニア認定基礎試験 | 基礎講座 初級編 前編
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
Python 3 エンジニア認定基礎試験 | 基礎講座 初級編 中編
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
データサイエンス統計 | 統計調査 統計法規
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
RobloxでAPIと非同期処理を学ぼう プログラ
ミング
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
ディフェンスゲームプログラミング
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
物理演算ゲーム プログラミング
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
プログラミング体験 | マインクラフト
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
データサイエンス統計 | 統計調査 企画・設計
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
プログラミング体験授業 | カレンダー制作
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
Webデザイン体験授業 | LP制作体験
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
Webデザイン入門 | 自己紹介サイト制作体験
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
データサイエンス入門 | 統計基礎
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
データサイエンス入門 | 統計基礎 シグマ編
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
データサイエンス入門 | 統計基礎 分散編
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
データサイエンス入門 | 統計基礎 相関編
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
Unityゲームプログラミング体験
●開催:オンラインまたはオフライン
●会場:福岡市 NPO・ボランティア交流センター(福岡県福岡市中央区今泉1丁目19−22 西鉄天神クラス 4階)
2015年
創業
120名
従業員数
2.3M
月間UU
1,800戸
管理戸数
