はじめに
ある機会でjimdoブログを知りました。アメバはいつも使用しています。この記事はブログにyoutube動画を埋め込んだ時に、リピート機能も付けたいと思い、ブログインとして作成したときのメモです。
アメバはすでに作成済みですが、今回、jimdo版も作成したいと思い作成することにしました。
リピート機能はすぐに作成できました。そこで、さらにもう一つの機能も追加しようとして、いろいろな困難に出会いましたので、その製作記録をメモしました。
追加した機能
今回、追加した機能は、jimdoブログに複数の動画を埋め込んだ時に、動画の再生/一時停止ボタンが連携して動作するプラグインです。
この機能が必要になった理由は、一つの動画を再生する場合、他で再生中の動画は自動で一時停止にしたいと思ったからです。
jimdoも、アメバもそうですが、この複数動画が連携して動作する機能はありません。そのため、製作することにしました。
テスト画面
先に、今回、作成したテスト画面から見てみます。以下がその画面です。
(1)ブログページ
jimdoのブログぺージを開き、この画面を表示します。
URLは、以下になります。
https://tecoyan-net.jimdofree.com/2024/09/07/%E3%83%86%E3%82%B9%E3%83%88/
開いたページには、動画が3つあります。この状態では、まだ、リピート機能はありません。
(1)スタートページ
(2)リピート機能追加
ここで、ページの空き領域で、ctrl+clickします。
すると、以下のアラートメッセージが出ます。
(3)ポップアップ画面
アラートメッセージを順に進めて行くと、以下のようなポップアップ画面が表示されます。
この画面は、開発用に作成した画面です。申し遅れましたが、今回のjimdoブログページは、開発用のページです。
このポップアップ画面は、今回の製作で、再生/一時停止ボタンのオブジェクトデータ取得で、取得したデータが想定した内容でないため、どこに問題があるのかを追求するために作成したデバッグ用の画面です。
ポップアップ画面には3つのボタンがあります。
hoverTrigger、表示、リセツトです。
(1)hoverTriggerボタン
このボタンは、3つの動画の再生/一時停止ボタンのオブジェクトデータから一部を抜粋してサーバーのDBへ保存します。保存する内容は、
・vid
・tabId
・frameId
・title
・ariaLabel
です。
ここで、DBテーブルのサンプルを以下に表示します。
このように3つの動画の情報が表示されます。
今回の記事で問題だったのは、最後のariaLabel情報です。
この情報は、ボタンをホバーしたときにボタンの上に表示されるtitle属性と一致していることを確認したかったのですが、開発途上では、中々一致していませんでした。ボタン自体がトグルになっていて、clickするたびに反転するためです。この反転は、再生(k)と一時停止(k)が交互に表示されますが、その情報が取得して意図していた情報と中々、一致しませんでした。原因は、プログラムの不具合なのですが、デバッグしていてもその原因をつかめませんでした。そのため、このようなポップアップ画面を作成して確認することにしました。この画面を見ながら、少しずつ、プログラムの不具合を見つけ、修正をくりかえしました。
(2)表示ボタン
このボタンは、DBに保存した動画情報を表示するためのものです。
この表示のariaLabelを見て、実際の動画のボタンのアイコン表示と一致しているかを確認しました。
アイコンの表示は、以下になります。
▶マーク
このマークは、「再生(k)」を意味しています。
❙❙マークは、「一時停止(k)」を意味しています。
3つのボタンを連携させて動作させるためには、このボタンの表示データ(再生(k)と一時停止(k))を正確に取得できることが前提条件です。
しかし、中々、動作が不安定で正確な値を取得できませんでした。
ボタンのトグルの状態をうまく、取得できませんでした。
(3)リセットボタン
このボタンは、画面の表示内容をリセットします。
実装した機能
(1)再生/一時停止機能の自動連携
(2)動画情報のポップ画面(開発用)
(3)ボタンのホバー情報の表示
ホバー表示機能
この機能は、再生/一時停止ボタンをホバーするとtitle属性を表示します。その時に、ポップアップ画面の上端にも表示します。
これは、title属性が正しく取得できるかを確認するための機能です。
実は、このtitle属性とariaLabel属性の内容が一致していないことが、中々、不具合の原因をつかめなかったことにもつながっていました。
地道なプログラム修正
このポップアップ画面の情報と実際の画面を見比べながらデバックを続けました。少しづつ、原因がわかり、修正をしてゆきました。ほとんどは、コーディングのミス(スペルなど)です。しかし、大きな問題は、親フレームと子フレーム(iframe動画)のdocumentでした。
今回の機能(ボタン連携)には、この親子のフレーム間を行ったり来たりすることが必要です。そのためにはdocumentオブジェクトを参照することが頻繁に発生します。それを取り違えるとエラーが発生してデータを参照できません。
例えば、親フレームにいるとき、子フレームのデータをdocumentオブジェクトで参照していたりします。それはできないので、エラーになります。こういうケースが結構ありました。これらをひとつひとつ修正してゆくことになります。この時に大事なメソッドがあります。executeScript()メソッドを使うことで、解決します。今回は、このメソッドのおかげで、いろいろなことがわかりました。結構、役に立つメソッドでした。
考察
今回は、具体的な修正内容にまでは踏み込めませんでしたので、その要点の説明にとどめました。どんなところがボタン連携の問題なのかを書き出してみました。
実際の動作確認するには、urlを示しましたので、ご確認ください。
あくまでもデバック用のページです。ご了承ください。
jimdoRepeatプラグインのダウンロードサイト
https://github.com/tecoyan/jimdoRepeat
あとがき
今回の記事では、まだ書き足りないことが数多くありますが、紙面の関係ですべてを書きだすことができませんので、別途、あらためて記事にしたすと思います。