1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

アメバのyoutube検索機能を利用したWebプレーヤーを作成しました。

Last updated at Posted at 2025-07-11

はじめに

これまで、数々のyoutubeプレーヤーを作成してきました。その中で、再生リストの作成をどうするかが問題でした。確かにyoutube APIサービスを使うこともできますが、無料で使うためには、一日あたりの検索回数に制限がありました。約50回検索を行うと当日分のクォンタム量を使い果たしてしまいます。これでは、使い勝手が悪く、回数に制限のない方法を考えました。それは、youtubeサーチを利用する方法です。プラグインをつくれば、その検索結果を取得することができます。しかし、難点を言えば、検索件数を増やすには、検索ページをスクロールして行かねば多くは取得できません。自動スクロールで取得できますが、時間がかかります。100件程度のリストだとそれなりの時間はかかります。
しばらくは、この方法で再生リストを作成していました。ところが、ある時にアメバのyoutube検索が結構使いやすいことに気づきました。
これだと約50件のリストが簡単に取得できます。そこで、今回、既存のyoutubeプレーヤーを改修して、このアメバの機能を取り込みました。
以下にその詳細について記述します。

アメバのyoutube検索について

アメバのyoutube検索機能を外部のWebサイトで利用するためのプラグインを作成しました。「AmebaYouTubeListプラグインv1.0」ですが、これはまだ、公開はしていません。そのため、利用者の方が使用するには、ダウンロードする必要があります。以下にそのダウンロードボタンを用意いたします。
AmebaYouTubeListプラグインv1.0 ダウンロード

このプラグインをchromeブラウザーの拡張機能でインストールするとアメバyoutube検索機能を利用することができます。
そこで、作成したyoutube再生リストは独自形式です。そのため、専用のwebyoutubeプレーヤーが必要になりますが、そのプレーヤーが以下のサイトです。
https://autoplay.tecoyan.net/index.php

このWebサイトを開くと、右上に、ボタン表示/ボタン消去ボタンが表示されています。表示と消去のトグルボタンです。
ボタン消去の時、左側に「マイリスト再生」ボタンがありますがこのボタンで、選択したクェリーファイル(.txt)でアメバのyoutube検索が実行します。
検索からリストの作成、再生まで自動で動作します。

動作要件

このAmebaYouTubeListプラグインv1.0を使用して、自動検索、再生を行うには、いくつかの動作要件があります。
(1)Windows10 PC
(2)アメバのアカウント
(3)Chromeブラウザー
Webプレーヤーサイト(https://autoplay.tecoyan.net/index.php)
(4)AmebaYouTubeListプラグインv1.0

解説動画

実際に動作している画面を動画にしていますので、以下に、そのリンクを示します。ナレーションはありません。
録画は、「画面録画ソフトBandicam」で作成したものです。
現在、制作中です。

動作タブについて

アメバyoutube検索プラグインで自動検索、再生するためには、2つのタブが連携して動作します。最初は、Webプレーヤータブを開いて、そこで、クェリーファイルを選択します。選択すると、自動でアメバの「ブログを書く」タブが開き、そこで、自動的に検索、リスト作成、前のタブに戻り、再生をスタートします。
これらの一連の処理はプラグイン側で行っています。
ひとつ、特徴的なことは、検索したリストをWebプレーヤーページのリスト要素に表示していることです。これはプラグインのbackground.jsからWebプレーヤーページのcontent.jsへリストを送っていますが、content.jsでは、そのリストをリスト要素に表示しています。
このタイミングで、リストの先頭の動画を再生しますが、この仕掛けは、事前に監視(observer機能)をリストに設定しているため、リストが要素に設定されたタイミングで監視が動作し、そこで、再生しています。

特長

この「アメバyoutube検索プラグイン」の特徴は、検索からリスト作成、再生まで、ほとんど自動で行えることです。手動で行うところは、はじめのクェリーファイルを選択するところだけです。

あとがき

今回作成した、「アメバyoutube検索プラグイン」ですが、これは、Webプレーヤーとは別の外部サイト(アメバ)の機能を利用させていただいています。もちろん、youtubeサーチサイトのyoutube検索機能を利用することもできますが、検索数を増やすには、スクロールをして行かなければならないということがあります。アメバであれば、50件のリストがすぐに取得できます。この差があるので、アメバを利用しています。youtube APIは、利用回数に制限があるため、利用していません。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?