はじめに
長年、プログラミングをしていても、この悪い癖が時々、出てきます。
どういう状況の時に、出てくるかといいますと、デバックをしているときです。
一応、頭の中で考えている仕様がありますので、それに基づいてプログラミングをします。
そこで、動作確認のため、デバッグを始めます。ここで、エラーが出ます。
ここからです。悪戦苦闘が始まります。
対象としているロジックは、静的な処理ではなく、動的処理です。
特に、イベントリスナーのお化け状態のロジックになるとお手上げです。
今回のロジックは、あるブログにyoutubeの動画を複数埋め込んでいるページが対象です。
行いたいことは、各動画にリピートを追加することです。これは、比較的楽にプログラミングができました。
次に行いたいことが、問題のロジックです。
動画が複数ありますが、それらに対して、ある連携処理を行う時に発生します。
(1)リピート追加後の各動画はすべて一時停止しています。
(2)次に、いずれかの動画を選択して再生ボタンをクリックして再生します。選択した動画は再生できます。
(3)次に、その状態で、他の動画を再生します。この時、前回の再生している動画は、動的(自動)に、一時停止させたいのですが、これが曲者で、中々、一時停止させるプログラミングがうまく行きません。
ここからが、悪戦苦闘のはじまりで、タイトルにもありますが、悪癖が出てきます。
この顛末について、以降で詳述したいと思います。
一つの動画のみ再生状態にして、他の動画は一時停止状態にする方法
機能としては、考えやすいのですが、いざ、コード化しようとすると大変難解です。
あるブログに複数の動画を埋め込むことは、ブログの機能を使用すれば楽にできます。ただ、この機能では、上述した機能はついていません。
自動ではできず、手動で再生、一時停止します。
そのため、その機能を自動化しようとして問題にあたっています。
現状の実装スペックは
現在の処理方法を示します。
この自動「一時停止」機能を行うためのプラグインを作成しています。
このプラグインのメイン処理は、youtubeの動画プレーヤーの下部にあるコントロールの再生/一時停止ボタンに機能を追加することです。
このボタンはトグルになっています。クリックするたびに再生と一時停止を繰り返します。手動では、問題なく動作します。
今回は、これに、プラグインの機能を使用して、一部を自動化しようとしています。
埋め込みの動画が複数ある場合、それらの連携動作させようとすると途端に難しくなります。ある埋め込み動画から、別の埋め込み動画を操作させる方法として、今テストしている方法は、executeScript()を使用して埋め込み動画プレーヤーのコントロール部を自動操作することです。executeScript()を使うことで、再生/一時停止ボタンをアクセスすることができます。このスクリプトの中で、再生/一時停止ボタンのクリック動作をclick trigger()しています。
このボタンをclick trigger()することはできますが、ここで、一番の問題があります。このボタンはトグルになっています。
そのため、今の状態を見て、再生するか、一時停止するかの判断が必要です。このステータスを見る方法は、
ボタンのオブジェクトを取得して、その中に定義しているプロパティを見ています。
//抜粋(executeScript())
let aa = document.querySelectorAll(".ytp-play-button.ytp-button.ytp-play-button-playlist");
console.log(document.URL);
if(aa[0].ariaLabel.indexOf("一時停止")!==-1){
alert("一時停止のため、何もしません。 "+a+" "+b);
console.log("一時停止のため、何もしません。 "+a+" "+b);
//何もしない。
//alert("何もしません。"+args);
}else{
//今のボタンが再生中の時は、
//トリガーを実行して、反転して、一時停止にする。
//このトリガーは、プレーヤー側のボタン処理に対して実行
alert("ここで、ボタンのclickトリガーを実行 "+a+" "+b);
console.log("ここで、ボタンのclickトリガーを実行 "+a+" "+b);
let ee = jQuery.Event('click');
$('.ytp-play-button.ytp-button.ytp-play-button-playlist').trigger(ee);
//return false;
}
ここの処理がうまく行けば、問題は解決します。
しかし、いろいろ試行錯誤してもまだ、解決できていません。
ここで、今回の主要テーマである悪癖について記述します。
プログラミングは、仕様に基づいてコーディングして行くことですが、
仕様でも詳細レベルになると、細かいところまでは、中々記述できません。詳細設計書を書く段階では、実際にコード化して落とし込み、デバッグをして動作確認しないと書けない部分が多々あります。
そうなると、詳細設計書が存在しても、コード化してみないと確認できないことが出てきます。
そこからがプログラミングの本領を発揮するところです。
詳細設計書は、あくまでも考え方をドキュメント化したもので、新規にプログラミングして行く場合の指針のようなものです。
開発が終わると納品ドキュメントを作ります。それには動作確認できた結果を詳細設計書として書きますので、正しいかは別として、動作確認できた結果を記述したものです。
プログラマーが陥る悪癖についてですが、それは、つじつま合わせになりやすいということです。どういうことかと言いますと、デバッグをしていると何とか動作させようとして、フラグやスイッチをあっちこっち弄り回して見かけ上は動作するようになることです。
これは、大変な誤りで、後々、大事故につながることもあります。よく、基幹システムでシステムダウンをすることがありますが、おそらく、こまようなことが起こっているのかもしれません。
納期が迫り、何とか納品しなければとの思いで、つじつま合わせで完成させるとおそらくこのようなことが起こるのではと危惧します。
今のプラグインは趣味で、作成しています。つじつま合わせのコードにならないようにと思って作成しています。
あとがき
まだ、このプラグインは完成していません。なんとか、このスペックを実現させたく、頑張っています。