はじめに
アメバの編集画面では、youtube動画のhtmlコードを埋め込むことができますが、この時に埋め込まれるコードでは動画の再生が終了すると一時停止してしまいます。
そこで、このプラグインでは一時停止せずに自動的に繰り返し再生をするようにしました。音楽を聴いているときに引き続き再生を自動的に続行したいと思って作りました。非常に簡単なプラグインですが、作り方を解説したいと思います。
Chromeウェブストアで公開
manifest.json
マニフェストは以下の通りです。
{
"manifest_version": 3,
"name": "Amebaリピートプラグイン",
"version": "1.0",
"description": "amebaのyoutubeをリピートするプラグインです。",
"background": {
"service_worker":"ameba_repeat_background.js",
"type": "module"
},
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; "
},
"content_scripts": [{
"matches": ["https://blog.ameba.jp/*"],
"js": ["jquery.js","jquery-ui.js","ameba_repeat_content.js"],
"css": ["jquery-ui.css"]
}],
"action": {
"default_title": "Amebaリピートプラグイン",
"default_icon":{
"19": "yy19plus.png",
"96": "yy96plus.png",
"128": "128ameba_repeat.png"
}
}
}
バージョンはv3対応です。使用しているjavascriptファイルは2つです。
ameba_repeat_background.js(0ステップ)
ameba_repeat_content.js(79ステップ)
今回はameba_repeat_background.jsは使っていません。
ライブラリー
jquery.js
jquery-ui.js
ameba_repeat_content.js
/**********************************************************************
*Amebaリピートプラグイン
*ameba_repeat_obj.js
*
***********************************************************************/
//
//
document.getElementsByTagName("body")[0].addEventListener('click', (e) => { // ※ ➀
//alert("bodyでクリックしました。");
let aaa = document.getElementsByClassName("cke_wysiwyg_frame")[0].contentDocument.getElementsByTagName("iframe");
//このsrcにリピート属性を追加
let sw = 0;
$.each(aaa,(i,val)=>{
if(val.src.indexOf("/embed/")!==-1){
//?があれば
if(val.src.indexOf("/embed/?")!==-1){
//val.src = val.src.replace(/embed/,"embed\/?autoplay=1&loop=1&playlist=");
return true;
}else{
//let src = val.src;
//リピート追加
//?autoplay=1&loop=1&playlist=
val.src = val.src.replace(/embed\//,"embed\/?autoplay=1&loop=1&playlist=");
sw = 1;
return true;
}
}
});
//
if(sw === 1){
alert("リピート機能を追加しました。");
}else{
}
});
//
document.getElementsByTagName("body")[0].addEventListener('keydown', (e) => {
//
switch (e.keyCode) {
//リピートのセット
case 65:
if(e.altKey===true && e.ctrlKey===true ){
//ここで、<iframe>のyoutube_iframeurlにリピートを追加
/**************************************************************
*検索が難解
***************************************************************/
let aaa = document.getElementsByClassName("cke_wysiwyg_frame")[0].contentDocument.getElementsByTagName("iframe");
//このsrcにリピート属性を追加
$.each(aaa,(i,val)=>{
if(val.src.indexOf("/embed/")!==-1){
//?があれば
if(val.src.indexOf("/embed/?")!==-1){
//val.src = val.src.replace(/embed/,"embed\/?autoplay=1&loop=1&playlist=");
return true;
}else{
//let src = val.src;
//リピート追加
//?autoplay=1&loop=1&playlist=
val.src = val.src.replace(/embed\//,"embed\/?autoplay=1&loop=1&playlist=");
return true;
}
}
});
alert("リピート機能を追加しました。Ctrl+Alt+A");
}
break;
//
}
});
動作のしくみ
(1) プラグインのロード
ブラウザーを立ち上げるとbackground.jsがロードされますが、ここでは空のコードです。次にタブを開くかリロードするとameba_repeat_content.jsがロードされます。
このameba_repeat_content.jsが実際に実行するときは、アメバの編集画面を開いているときのみです。その他のurlでは実行しません。
(2)アメバの編集画面でyoutubeボタンを使って動画の再生コードを埋め込みます。
ここで、ameba_repeat_content.jsが実行します。
このコードが実行するタイミングは2か所あります。'click'イベントと'keydown'イベントですが、現在は、'keydown'イベントは使用していません。
(3) 'click'イベントが動作するとき
youtubeボタンを使用して動画コードの埋め込みを行いますが、この時に'click'イベントが発生してます。'click'イベントはbody要素上で発生します。
アメバ編集画面では本文を入力する要素もiframe要素になっています。また、その本文の中にもiframe要素が複数、存在する可能性があります。入れ子状態になっています。ここを注意してiframe要素を検索します。
この let aaa = document.getElementsByClassName("cke_wysiwyg_frame")[0].contentDocument.getElementsByTagName("iframe");で、aaaの配列にyoutubeの埋め込みオブジェクトが入ります。
そのaaa配列データから/embed/を含んだsrc属性データを探して、その属性データに、autoplayとloop属性を埋め込んでいます。
これをすべての埋め込みコード(複数のyoutube動画)に対して実行します。
終わりに
このプラグインは非常にシンプルで軽量なコードで作成しています。プラグインを初めて作成する方にもわかりやすいと思います。