【アプリ開発初心者が行う】Youtube消音アプリを作ろう②（Youtube動画の配置）

前回に引き続きアプリ開発を進めていきます。

この記事ではアプリの全体的な作成についてまとめます。

前回の記事は下のリンクから見てください。

Youtube動画の表示
URLの読み取り
まとめ

Youtube動画の表示

まずは、作成したページにYoutube動画を表示するところから始めます。

今回は最初なのでページ上で読み取ったものというわけではなく、デフォルトで画面に表示させるものを設定します。

前回の記事であったようにYoutubeの表示はiframeでできます。

ということで簡単に作ってみました。

・HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>YouTube自動消音ツール</title>
  <link rel="stylesheet" href="CSS/style_2.css">
</head>

<body>
  <h1>YouTube自動消音ツール</h1>
  <div id="player"></div><br>
  <script src="Javascript/app_2.js"></script>
</body>
</html>

・JavaScript

// YouTube IFrame APIを読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
var videoId = "74gyd4SpWYo";

// YouTubeプレイヤーの準備ができたときに呼び出される関数
function onYouTubeIframeAPIReady() 
{
    player = new YT.Player('player', 
        {
        height: '360',  // 高さ
        width: '640',  // 横幅
        videoId: videoId,  // YouTubeの動画IDを指定
        playerVars: 
        {
            'autoplay': 1,  // 自動再生
            'rel': 0,       // 関連動画を表示しない
            'showinfo': 0   // 動画情報を表示しない
        },
        /*
    });
}

まずHTMLの方ですが、Youtubeを表示するために11行目を追記しました。

個々の部分を新しく作ったJavaScriptのほうで設定していきます。

JavaScriptに関してはiframeを利用するために最初の5行目までを記載しています。

あまりよくわかっていないですが、これを書けば使えるとのことだったので記入しています。

その後、初期値の設定とYoutubeを表示するための関数の作成を行っています。

最初に表示する動画はデフォルトとして毎回同じものを表示するので自身の好きなアーティストの動画のIDを取ってきました。

iframeではYoutubeの動画のURLというよりはURLの中に入っている動画のIDを使用します。

それが今回はvideoIdにしている74gyd4SpWYoです。

関数の方ですが、playerの中に動画を表示する際の情報を入れています。

見たらわかるように高さや横幅、自動再生するかどうかなどです。

これで最初の動画を表示するところまではできました。

URLの読み取り

次はURLの読み取り用のボックスの作成と読み取りです。

見た目は下の感じがわかり易いのではないかと考えました。

このボックス内にURLを貼り付けてボタンを押すと動画が変更されるイメージです。

再生ボタンの動作の流れとしては、

ボックス内のURLを読み取る
URLが正しいか判断し、おかしい場合はエラーメッセージを表示する
正しい場合はURLからYoutubeのIDを抜き出す
抜き出したIDを使用してYoutube動画を更新する

です。

上の流れを考慮して実際にコードを書きました。

・HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>YouTube自動消音ツール</title>
  <link rel="stylesheet" href="CSS/style_1.css">
</head>

<body>
  <h1>YouTube自動消音ツール</h1>
  <label for="youtube-url">YoutubeのURLを貼ってください :</label><br>
  <input type="text" id="youtube-url" placeholder="ex: https://www.youtube.com/watch?v=dQw4w9WgXcQ" size="50">
  <button onclick="embedVideo()">Show video</button><br>
  <div id="player"></div><br>
  <script src="Javascript/app_2.js"></script>
</body>
</html>

・JavaScript

// YouTube IFrame APIを読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
var videoId = "74gyd4SpWYo";


function embedVideo()
{
    videoURL=document.getElementById('youtube-url').value;
    embedVideo2(videoURL);
};

function embedVideo2(videoURL) 
{
    // 入力されたYouTube URLを取得
    const url = videoURL;
    
    // YouTubeの動画IDを抽出する正規表現
    const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
    const match = url.match(regex);
    
    if (match && match[1]) 
        {
        videoId = match[1];
        //onYouTubeIframeAPIReady()
        player.cueVideoById(videoId);
        } 
    else 
    {
        alert("無効なYouTube URLです。もう一度確認してください。");
    }
}

// YouTubeプレイヤーの準備ができたときに呼び出される関数
function onYouTubeIframeAPIReady() 
{
    player = new YT.Player('player', 
        {
        height: '360',
        width: '640',
        videoId: videoId,  
        playerVars: 
        {
            'autoplay': 1,  // 自動再生
            'rel': 0,       // 関連動画を表示しない
            'showinfo': 0   // 動画情報を表示しない
        },
        /*
        events: 
        {
            'onStateChange': onPlayerStateChange
        }
        */
    });
}

HTMLですが、11-13行目が新しく加えた行になります。

11行目に関しては、文字をそのまま表示するだけなので説明はいらないかと思います。

12行目はinput用のボックスを用意し、内部に例としてURLを表示するようにしました。

最後に13行目ですがボタンに押した際に動作する関数を設定してあります。この関数はJavaScriptの方で設定しています。

JavaScriptに関しては11行目の“function embedVideo()”あたりから追記してあります。

embedVideo()の関数ではinputボックス内のURLの情報を読み取っています。

ここで得たURLの情報は次にあるembedVideo2()という関数に渡してさらにIDの取り出しを行います。

ここでif分を入れておきURLが正しいか判断しています。

おかしい場合はエラーメッセージとして“無効なYouTube URLです。もう一度確認してください。”と表示されます。

正しかった場合はYoutubeの動画を更新するようにしました。

以下がここまで作ったサイトの動作の流れです