はじめに
youtubeの動画を再生するプレーヤーを作っていると、画像(特にサムネイルなど)のファイルサイズを知る場面に遭遇します。それは、オリジナルの再生リストで再生しているときですが、再生リストが古くなると、リストの中に「削除された動画です。」というサムネイルが表示されます。そのサムネイルは、グレー色した、真ん中に3つの〇があるものです。
以下のものです。
リストにこのようなサムネイルが多数出てくるとよくありません。そのため、少し古くなったこのようなリストが表示されたら、リストを再取得して更新したくなります。
そこで、今回考案したリストの更新方法をご紹介したいと思います。
参考例
このサイトに、その削除された動画のサムネイルがいくつかあります。
確かに、見栄えはよくありません。やたら、このようなサムネイルが表示されるリストもあります。それは、古いリストです。
対策案
そこで、以前にもそれらのサムネイルをリストから削除する対策をしたことがありました。削除することはできたのですが、徐々にリストの動画少なくなってしまいました。それもあまりよくないので、気に入った動画のサムネイルを追加したりしていましたが、それもあまりよくありませんでした。メンテナンスが大変になることでした。
一番手っ取り早いのは、やはり、新規に作り直しをすることでした。新規であれば、削除された動画は出てきません。
今回も新規に更新する方法をとることにしました。そこで、問題になることは、如何にしてその削除された動画のサムネイルを探すかということです。
リストをチェックても、これが、削除された動画のサムネイルですというマーク(印)がありません。
サムネイルのデータは、そのurlが<img>タグのsrc属性にあるだけです。
以下のタグです。
<img src="https://i.ytimg.com/vi/L07ozdzGPGE/default.jpg">
これだけでは、これが、削除された動画のタグなのかは判断することはできません。
それがわかるのは、サムネイルの表示を見たときです。人がリストを見て、始めてわかります。
それでは、スクリプトでリストから、削除処理することができません。
次に考えたのが、サムネイル画像のファイルサイズをチェックしようと試みました。その理由は、削除されていない動画のサムネイルのファイルサイズは、大抵、1.1KB以上です。削除された動画のサムネイルのファイルサイズは、10975バイトです。(default.jpgの場合)この差をチェックすれば、識別可能です。
処理スクリプト
サムネイルの画像サイズを取得する処理のサンプルがないかをネットで調べました。すると、2,3ありました。どれでも動作はするみたいですが、今回は、以下の処理方法を選択しました。Qiitaにありました。
参考サイト
実際のコード
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
</head>
<body>
<button id='start'>スタート</button>
<div id="ameba_list" data-info="アメバリスト" style="overflow:scroll;z-index: 9999;display: block;background-color: lightblue;position: absolute;top: 0%;left: 25%;width: 700px;height: 700px;">
<ul>
<li >1. <img src="https://i.ytimg.com/vi/5XbKfe-w6hA/default.jpg"><span style="font-weight:bold;font-size:1.5em;"> 酒は大関こころいき 加藤登紀子</span></li>
<li >2. <img src="https://i.ytimg.com/vi/y7UwE5k05ck/default.jpg"><span style="font-weight:bold;font-size:1.5em;"> 酒は大関 － 田宮二郎</span></li>
<li >3. <img src="https://i.ytimg.com/vi/QwotZcGAPmc/default.jpg"><span style="font-weight:bold;font-size:1.5em;"> 酒は大関＃加藤登紀子（栗山町）TokikoKato ＃日本の歌</span></li>
<li >4. <img src="https://i.ytimg.com/vi/9bqJ4ICU0E8/default.jpg"><span style="font-weight:bold;font-size:1.5em;"> 酒は大関こころいき</span></li>
<li >5. <img src="https://i.ytimg.com/vi/dgmpJJDE3LA/default.jpg"><span style="font-weight:bold;font-size:1.5em;"> 大関 田宮二郎編</span></li>
</ul>
</div>
<!-- ── スクリプト ── -->
<script>
let sz =[];
async function func() {
let aa = $("li");
let span;let title;let img;let src;let sz;
//forループで、順番にリストのタイトルとサムネイルのファイルサイズを表示
//その時に、ファイルサイズが1097バイトであれば、"削除された動画です"のメッセージを表示。
for(ee of aa){
span = ee.children[1];
title = span.innerText;
img = ee.children[0];
src = img.src;
sz= await myFunc(src);
if(sz <= 1097){
alert("タイトルは、順番に "+title+" "+sz+" サイズです。 また、このリストには、削除された動画があります。");
console.log("タイトルは、順番に "+title+" "+sz+" サイズです。 また、このリストには、削除された動画があります。");
return false;
}else{
//alert("タイトルは、順番に "+title+" "+sz+" サイズです。");
console.log("タイトルは、順番に "+title+" "+sz+" サイズです。");
}
}
return true;
}
//@junerさんのコメントより、このコードに変更させていただきました。
function myFunc(src) {
return fetch( src )
.then( response => response.blob())
.then( blob=>blob.size);
}
// 以下変更点
//async function myFunc(src) {
// return new Promise((resolve) => {
// fetch( src ).then( response => response.blob()).then(blob=>{resolve(blob.size);});
//
// });
//}
//
$("#start").on('click',()=>{
//ここで、削除された動画があれば、自動更新する。
func().then(resp=>{
if(resp===true){
//続行
}else{
//自動更新
//auto_update();
alert("自動更新します。");
}
});
});
//
aa = $("li img");
//サムネイルにリスナー登録
for(ee of aa){
//
$(ee).on('click',(e)=>{
async function listener(){
//ここで、当該サムネイルのタイトルとサムネイルのファイルサイズを表示
//alert("サムネイルがクリックされました。");
//sz[]にすべてのエントリが格納されているので、個々に表示
//この時のインデックスは、
src = e.target.src;
sz = await myFunc(src);
if(sz <= 1097){
alert(e.target.nextSibling.innerText+" サムネイルのサイズ "+sz+"バイト\n■注■この動画は削除されています。");
console.log(e.target.nextSibling.innerText+" サムネイルのサイズ "+sz+"バイト\n■注■この動画は削除されています。");
}else{
alert(e.target.nextSibling.innerText+" サムネイルのサイズ "+sz+"バイト");
console.log(e.target.nextSibling.innerText+" サムネイルのサイズ "+sz+"バイト");
}
}
listener();
});
}
</script>
</body>
</html>
CodePen
See the Pen Untitled by tecoyan (@tecoyan) on CodePen.
ここで、スタートボタンをクリックすると、スクリプトを実行します。 この再生リストの中に、「酒は大関 － 田宮二郎」さんのサムネイルが削除された動画のエントリーです。スタートボタンを押すと、順番に、タイトルとファイルサイズが表示されます。そのファイルサイズを見てゆくと、削除された動画のサムネイルのファイルサイズが1097バイトで、もっとも小さいた値です。従って、この1097バイトのサイズが削除された動画のサムネイルと判断するようにします。サムネイルにリスナーを登録しました。
スタートボタンと同様の機能ですが、今回は個々のサムネイルにもクリックリスナーを登録して、都度のファイルサイズを確認できるようにしまた。ここでも、削除された動画のファイルサイズをチェックできます。クリックするとメッセージが表示されます。
あとがき
この画像ファイルのサイズをもとに、削除された動画のサムネイルを取得し、それをもとに、更新対象のリストか否かを判断します。一つでもこの削除された動画のサムネイルがあれば、そのリストは更新するようにします。
次の作業は、実際に更新するまでの作業になります。次回は、更新後のリスト表示までをご紹介いたします。