More than 3 years have passed since last update.

駆け出しエンジニアもどきがYouTubeのフロントサイドっぽいものを再現した話

Last updated at 2021-04-03Posted at 2021-04-02

YouTubeのフロントサイドを作ってみた話

　世界的なアプリYouTube。Pythonを使って作られていることはPythonエンジニアならば大抵ご存知のことかと思いますが、実際に作ろうと考えた場合には中身の構造ってどうなってるか気になりますよね?アプリを開いたりサイトへとアクセスしたらずらずらと各ユーザーにおすすめの動画がピックアップされ、スクロールしていくとアイキャッチ画像から動画本編へと切り替わって動画が再生される仕様。ユーザーを飽きさせない機械学習だけでも十分すごいですけれども、ユーザーが気になった動画までスクロールしたとたん動画を再生して見せてくれる仕様ってのもどうなってるか気になりますよね?GitHubを探すとYouTubeのクローンはあったりしますけれども機械学習とかフロントサイドの再現まで丁寧にやってくれているものはなかったりします。今回はそのYouTubeのフロントサイドを可能な限り再現しましたのでその話を記事にしたいと思います。

1.バックエンド構築

　まずはバックエンドから。といっても今回の記事の主題はフロントエンドですのでそこまでがっつりとは書きません。

1-1.models.py

　models.pyにてモデル構築から始めましょう。目的は動画を一覧表示してページをスクロールしていくとアイキャッチ画像から動画本編に切り替わるあの仕様を再現することですのでmodelの定義も必要最小限です。

models.py

from django.contrib.auth.models import User
from django.db import models

class Video(models.Model):
    user = models.ForeignKey(User, verbose_name='ユーザー', on_delete=models.CASCADE)
    title = models.CharField(verbose_name='タイトル', max_length=40)
    content = models.TextField(verbose_name='動画説明文')
    video = models.FileField(verbose_name='投稿動画')
    image = models.ImageField(verbose_name='アイキャッチ画像')
    views = models.IntegerField(default=0) #表示回数記録用
    created_at = models.DateTimeField(verbose_name='投稿日時', auto_now_add=True)

　動画を一覧表示するのが目的ですので今回はこれだけあれば十分です。本格的に再現するならいいね!用のクラスとかコメント用のクラス、通報用のクラスなんかも別途作成の必要があるわけですが、今回は割愛します。

1-2.views.py

　実際にアプリとして運用したりすることを考えたらforms.py等々関連ファイルをいじる必要がありますが、そういったコンテンツの作成は管理サイトでやることを前提にviews.pyとurls.pyの説明だけにとどめさせていただきます。views.pyはこうしておきます。機械学習とか組み込むのでしたらこれとはまた別の書き方になるんでしょうけれども一覧表示をするのが目的ならこれで十分です。

views.py

from django.views import generic
from .models import Video

class IndexView(generic.ListView):
    model = Video
    context_object_name = 'video_list'
    template_name = 'index.html'

    def get_queryset(self):
        videos = Video.objects.all().order_by('-created_at')
        return videos

1-3.urls.py

　urls.pyの編集もコンテンツを一覧表示するだけの必要最低限しか書きません。トップページにいきなり一覧表示しますのでこちらも書くコードはこれだけです。

urls.py

from django.urls import path

from . import views

app_name = 'アプリ名'

urlpatterns =[
    path('', views.IndexView.as_view(), name="index"),
]

　バックエンドのコードは以上になります。

2.フロントエンド構築

　次に、本題となる箇所以外のページを作ります。作成するのは基礎部分となるbase.htmlとindex.html、サイト装飾用のmystyle.cssです。

2-1.base.html

　特筆することはありません。Djangoを触ったことのある方でしたら基本的にこう書くでしょうね。見栄えのためにBootStrapを読み込ませたりしてますが使うか使わないかはお任せします。

base.html

{% load static %}

<html lang='ja'>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Bootstrap core CSS -->
        <link href="{% static 'bootstrap.min.css' %}" rel="stylesheet">

        <title>{% block title %}{% endblock %}</title>

        {% block head %}{% endblock %}
    </head>

    <body>
	<div id="wrapper">

        {% block header %}{% endblock %}

        {% block contents %}{% endblock %}

        <footer class="py-5 bg-black">
          <div class="container">
            <p class="m-0 text-center text-white small">Copyright &copy; hogehoge 2021</p>
          </div>
        </footer>

        <!-- Bootstrap core JavaScript -->
        <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
        <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

        </div>
    </body>

</html>

　必要最低限の要素だけ追加しました。ナビゲーションバーをつけるか付けないかはお好みで。そもそもトップページにコンテンツを一覧表示するのが目的ですのでいらないでしょうけれども…。

2-2.index.html

　index.htmlも特に派手に飾り付けることはしません。コンテンツを一覧表示することだけを目的とします。

index.html

{% extends 'base.html' %}
{% load static %}

{% block title %}YouTubeのフロントサイドを再現します{% endblock %}

{% block contents %}
<div class="container">
    <div class="row">
        <div class="mt-2 w-100">
            <div class="col-lg-8 col-md-10 mx-auto">
                <h1>hogehoge</h1>
                {% for items in video_list %}
                    <div class="post-preview">
                        <a href="#">    <!--動画詳細移動(省略)-->
                            <img class="float-right" src="{{ items.photo.url }}" width="240" height="130">
                            <video class="float-right is_hide" src="{{ items.video.url }}" width="240" height="130" controls muted autoplay playinline loop></video>
                            <p class="post-meta text-black">
                            投稿者：{{ items.user }}
                            </p>
                            <h4 class="post-subtitle text-black">
                            タイトル：{{ items.title }}
                            </h4>
                            <h4 class="post-subtitle text-black">
                            説明：{{ items.content|truncatechars:20 }}
                            </h4>
                        </a>
                        <p class="post-meta mb-1">{{ items.created_at }}</p>
                        <small class="text-info">
                            コメント={{items.number_of_comments}}<br>
                            表示回数={{items.views}}
                        </small>
                    </div>
                    <hr>
                {% empty %}
                    <p>投稿がありません。</p>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

2-3.mystyle.css

　最低限の装飾を行います。リンクを黒字にし、ホバー時の下線を消去することだけ書いておきました。その他、.is_hideというクラスについてもこちらで定義していますが、詳細については後述します。

mystyle.css

.text-black {
    color: #000000 !important;
}

a:hover {
    text-decoration: none;
}

.is_hide {
    display: none;
}

3.本題

　とりあえず上記まででトップページに動画を一覧表示することはできるようになりました。あとは、リストアップされたコンテンツについてスクロール中はアイキャッチ画像を表示し、スクロールをやめたとたん動画が再生されるような仕様があればYouTubeのフロントサイドをかなり再現できそうですね。となると、出番はやはりJavaScriptです。あれこれやり方を考える過程でsetTimeoutやsetIntervalとスクロールイベントを組み合わせる手段なんかも試しましたが、それでやろうとするとスクロールをやめたとたんリストアップされた動画が一斉に再生されてしまうというもはや笑うしかない結末になりました。そんな壁に当たりつつもあれこれ手段を考えてたらあれ?これだったらスクロール地点に応じて発動するタイプの簡単なDOM操作で解決できるんじゃね?と思い立ち、それを軸にコードを書いてみることにしました。
　その過程で行きついたのがこちらのサイト(https://techmemo.biz/javascript/vanilla-js-scroll-animation/)です。下にスクロールしていけばいくほど隠してあったコンテンツがふわっという動きとともに表示されるアニメーションについて紹介していました。

　スクロールのトリガーをこのサイトを参考に作ったうえで、特定箇所までスクロールするたびにDOM操作を行うようにJavaScriptのコードを考えてみました。それが以下のコードになります。

action.js

let scrollElem = document.querySelectorAll('.js-trigger');
let scrollElem2 = document.querySelectorAll('.js-trigger2');
let scrollAnimation = function() {
  for(let i = 0; i < scrollElem.length; i++) {
  let trigger = 200;
    if (window.innerHeight > scrollElem[i].getBoundingClientRect().top + trigger) {
      if (scrollElem[i].getBoundingClientRect().top + trigger + 300 > window.innerHeight) {
        scrollElem[i].classList.add('is_hide');
        scrollElem2[i].classList.remove('is_hide');
      } else {
        scrollElem[i].classList.remove('is_hide');
        scrollElem2[i].classList.add('is_hide');
      }
    }
  }
}
window.addEventListener('load', scrollAnimation);
window.addEventListener('scroll', scrollAnimation);

　このコードが意図することはトリガーとしてのクラスが設置された箇所までスクロールする度に要素の非表示を行うためのis_hideクラスを追加したり削除したりする処理を行うことによってアイキャッチ画像と動画とを切り替えて表示することです。それが目的だったらtoggle使った方がいいんじゃないかと考える方もいるかと思いますが、それでやってみたらスクロール中もスクロール終了後も動画と画像が同時に表示されたりめっちゃチカチカとちらついたりで見られたものじゃなかったわけです。ですので結局個別にトリガーを設定してある箇所をDOM操作することによりYouTubeのトップページっぽい何かを再現することにしました。早速上記のコードやCSSファイルをindex.htmlに書き加えたうえで修正してみましょう。すると、こうなります。

index.html

{% extends 'base.html' %}
{% load static %}

{% block title %}YouTubeのフロントサイドを再現します{% endblock %}

<!--CSS追加-->
{% block head %}
<link href="{% static 'mystyle.css' %}" rel="stylesheet">
{% endblock %}

{% block contents %}
<div class="container">
    <div class="row">
        <div class="mt-2 w-100">
            <div class="col-lg-8 col-md-10 mx-auto">
                <h1>hogehoge</h1>
                {% for items in video_list %}
                    <div class="post-preview">
                        <a href="#">    <!--動画詳細移動(省略)-->
                            <img class="float-right js-trigger" src="{{ items.photo.url }}" width="240" height="130">  <!--クラス追加-->
                            <video class="float-right is_hide js-trigger" src="{{ items.video.url }}" width="240" height="130" controls muted autoplay playinline loop></video>  <!--クラス追加-->
                            <p class="post-meta text-black">
                            投稿者：{{ items.user }}
                            </p>
                            <h4 class="post-subtitle text-black">
                            タイトル：{{ items.title }}
                            </h4>
                            <h4 class="post-subtitle text-black">
                            説明：{{ items.content|truncatechars:20 }}
                            </h4>
                        </a>
                        <p class="post-meta mb-1">{{ items.created_at }}</p>
                        <small class="text-info">
                            コメント={{items.number_of_comments}}<br>
                            表示回数={{items.views}}
                        </small>
                    </div>
                    <hr>
                {% empty %}
                    <p>投稿がありません。</p>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!--JavaScript追加(外部ファイルを作成して読み込ませるのでも可)-->
<script>
let scrollElem = document.querySelectorAll('.js-trigger');
let scrollElem2 = document.querySelectorAll('.js-trigger2');
let scrollAnimation = function() {
  for(let i = 0; i < scrollElem.length; i++) {
  let trigger = 200;
    if (window.innerHeight > scrollElem[i].getBoundingClientRect().top + trigger) {
      if (scrollElem[i].getBoundingClientRect().top + trigger + 300 > window.innerHeight) {
        scrollElem[i].classList.add('is_hide');
        scrollElem2[i].classList.remove('is_hide');
      } else {
        scrollElem[i].classList.remove('is_hide');
        scrollElem2[i].classList.add('is_hide');
      }
    }
  }
}
window.addEventListener('load', scrollAnimation);
window.addEventListener('scroll', scrollAnimation);
</script>
{% endblock %}

　トリガーはjs-triggerクラスが設定してあるコンテンツの最上端から200px下にスクロールしたら発生するように設定してありますが、そこについては好みで設定しなおしてもらえればと思います。上のコードでの実行結果ですが、ターゲットとなる動画のアイキャッチ画像までスクロールするとアイキャッチ画像を隠して動画を表示するDOM操作が行われ、ターゲットから300px下にスクロールした時点で再度DOM操作が行われ、動画を隠してアイキャッチ画像を再表示するわけです。YouTubeの場合はスクロールを止めてからおよそ1秒の待ち時間の後で動画が再生される仕様になっているようですのでそこまで再現するにはまだ私の技術が足りないわけですが、とりあえず似通ったものを作ることには成功したかなあと満足しています。

　もし参考にしてみたいと思う方がいましたらご自由にコピペしていってください。

　以上、ここまでお読みいただきありがとうございました。

追記:

　JavaScript部分にsleep関数を追加することでより再現度を上げることに成功しました。もしよろしければこちらも参考にしていただければと思います。sleep関数についてはこちらのsetIntervalを使ったやり方をコピペさせていただきました。

sleep.js

// setIntervalを使う方法
function sleep(waitSec, callbackFunc) {

    // 経過時間（秒）
    var spanedSec = 0;

    // 1秒間隔で無名関数を実行
    var id = setInterval(function () {

        spanedSec++;

        // 経過時間 >= 待機時間の場合、待機終了。
        if (spanedSec >= waitSec) {

            // タイマー停止
            clearInterval(id);

            // 完了時、コールバック関数を実行
            if (callbackFunc) callbackFunc();
        }
    }, 1000);

}

index.html

{% extends 'base.html' %}
{% load static %}

{% block title %}YouTubeのフロントサイドを再現します{% endblock %}

<!--CSS追加-->
{% block head %}
<link href="{% static 'mystyle.css' %}" rel="stylesheet">
{% endblock %}

{% block contents %}
<div class="container">
    <div class="row">
        <div class="mt-2 w-100">
            <div class="col-lg-8 col-md-10 mx-auto">
                <h1>hogehoge</h1>
                {% for items in video_list %}
                    <div class="post-preview">
                        <a href="#">    <!--動画詳細移動(省略)-->
                            <img class="float-right js-trigger" src="{{ items.photo.url }}" width="240" height="130">  <!--クラス追加-->
                            <video class="float-right is_hide js-trigger" src="{{ items.video.url }}" width="240" height="130" controls muted autoplay playinline loop></video>  <!--クラス追加-->
                            <p class="post-meta text-black">
                            投稿者：{{ items.user }}
                            </p>
                            <h4 class="post-subtitle text-black">
                            タイトル：{{ items.title }}
                            </h4>
                            <h4 class="post-subtitle text-black">
                            説明：{{ items.content|truncatechars:20 }}
                            </h4>
                        </a>
                        <p class="post-meta mb-1">{{ items.created_at }}</p>
                        <small class="text-info">
                            コメント={{items.number_of_comments}}<br>
                            表示回数={{items.views}}
                        </small>
                    </div>
                    <hr>
                {% empty %}
                    <p>投稿がありません。</p>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!--JavaScript追加(外部ファイルを作成して読み込ませるのでも可)-->
<script src='sleep.js'></script>
<script>
let scrollElem = document.querySelectorAll('.js-trigger');
let scrollElem2 = document.querySelectorAll('.js-trigger2');
let scrollAnimation = function() {
  for(let i = 0; i < scrollElem.length; i++) {
  let trigger = 200;
    if (window.innerHeight > scrollElem[i].getBoundingClientRect().top + trigger) {
      if (scrollElem[i].getBoundingClientRect().top + trigger + 300 > window.innerHeight) {
        //処理をsleep関数で挟み込むことによって処理の開始を2秒遅らせる
        sleep(2, function() {
          scrollElem[i].classList.add('is_hide');
          scrollElem2[i].classList.remove('is_hide');
        });
      } else {
        scrollElem[i].classList.remove('is_hide');
        scrollElem2[i].classList.add('is_hide');
      }
    }
  }
}
window.addEventListener('load', scrollAnimation);
window.addEventListener('scroll', scrollAnimation);
</script>
{% endblock %}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Why not login to Qiita and try out its useful features?

駆け出しエンジニアもどきがYouTubeのフロントサイドっぽいものを再現した話

YouTubeのフロントサイドを作ってみた話

1.バックエンド構築

1-1.models.py

1-2.views.py

1-3.urls.py

2.フロントエンド構築

2-1.base.html

2-2.index.html

2-3.mystyle.css

3.本題

追記:

@hexanitrobenzen(ウラン)

Today's trending articles

【歴史】Reactが覇権を握るまでの知られざる物語【図解解説】

Git の歴史を映画のように再生する gitlogue を作りました

TypedSql──C# の型システムをクエリエンジンとして「悪用」してみた話

[アーキテクチャConference2025 参加レポート]リアルな知見から学ぶ最適なアーキテクチャ

PythonでLLM APIを並列実行する方法

Comments

Qiita Advent Calendar is held!

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address

Why not login to Qiita and try out its useful features?

駆け出しエンジニアもどきがYouTubeのフロントサイドっぽいものを再現した話

YouTubeのフロントサイドを作ってみた話

1.バックエンド構築

1-1.models.py

1-2.views.py

1-3.urls.py

2.フロントエンド構築

2-1.base.html

2-2.index.html

2-3.mystyle.css

3.本題

追記:

@hexanitrobenzen(ウラン)

Today's trending articles

【歴史】Reactが覇権を握るまでの知られざる物語【図解解説】

Git の歴史を映画のように再生する gitlogue を作りました

TypedSql──C# の型システムをクエリエンジンとして「悪用」してみた話

[アーキテクチャConference2025 参加レポート]リアルな知見から学ぶ最適なアーキテクチャ

PythonでLLM APIを並列実行する方法

Comments

parkQiita Advent Calendar is held!

Qiita Advent Calendar is held!