はじめに

Webページを作成していますが、公開した時に、その使い方の説明に苦労します。説明ビデオで音声で説明するのは得意ではないため、他の方法はないかと考えて今回のプラグインを作成しました。

ナレーションなしで、以下に操作方法を伝えたらいいかと考えて、この方式にしました。よくあるのは、字幕ですが、字幕は再生時刻とのリンクが面倒でした。

サンプル画面

ここで、赤い矢印がそれです。矢印に一番近い要素を画面から探します。見つかったら、その要素の説明文を表示しています。画面で、このボタンの説明が欲しい場合は、その近くでクリックします。すると、この矢印と説明文が表示されます。要素の説明文は、あらかじめ、プラグインで登録しています。そのため、このプラグインは、特定のWebページ(この場合は、https://autoplay.tecoyan.net )専用となっています。あくまでも自作のWebページになります。理由は、各要素に独自データ属性(この場合はdata-info属性)を定義しておく必要があるためです。

Webページの操作画面の録画で、この機能を使用すると、要素の近辺でクリックするとその説明文が表示されますので、操作順に、クリックして行くと自ずから操作方法がわかる仕組みになっています。特に、音声による説明がなくても理解できるようにできます。　

操作方法

今回のデモのWebページは、以下のサイトです。
https://autoplay.tecoyan.net/index.php?dnm=大黒摩季
操作の前に以下の事前準備が必要です。

事前準備

プラグインのダウンロードとインストールを実行します。
ダウンロード
ダウンロード
ダウンロードは任意のフォルダーで結構ですが、デフォルトでダウンロードフォルダーが表示されます(Windows10の場合)ので、そこでも結構です。

解凍・インストール
ダウンロードしたフォルダーで、zipファイルを解凍します。7-Zipが簡単です。右クリックして、"pop説明プラグインv1.0"に展開を選択しても結構です。
インストールは、chromeブラウザーの右上にまるいボタンの中に3つの黒丸が縦に並んでいるボタンを開き、拡張機能->拡張機能の管理と進みます。そこで、パッケージ化されていない拡張機能で、先の解凍したフォルダーを選択します。すると、インストールが完了します。ブラウザーの右上に拡張機能の一覧がありますので、そこで、赤い矢印のアイコンを表示状態にセットします。

赤い矢印のところを右上のボタンから順にクリックして行くと、インストールできます。

テスト

ここで、実際にWebサイトを開いてみます。
画面のどこでも、クリックしてみます。すると、大き目の赤い矢印のアイコンが表示されます。
同時に、特定の要素の近くでクリックすると、その要素に対する説明がpop表示されます。

サンプル動画
この動画はテストで撮ったため、品質上はよくありません。その点をご容赦願います。
もう少しわかりやすい動画
この動画では、矢印の左上隅の座標位置(x,y)と各要素の左上隅の座標位置(x,y)の対角線の距離をピタゴラスの定理で計算して、その距離が最小の要素を特定しています。
矢印の左上隅と●のついた要素の左上隅の距離を測っています。

pop要素の表示方法について

特定の要素とは、事前に要素のhtmlタグに、data-infoデータ属性を指定したものです。

あとがき

画面で、クリックすると、赤い矢印と説明文が表示されるプラグインです。説明文は、矢印の位置に一番近い要素のものです。ぞぞれの座標位置から距離を計算して最も近い要素を選択しています。

説明文は、あらかじめプラグインで要素毎に登録しています。まだ、試行段階ですが、徐々に改良して行く予定です。スクロールしても目的とする要素が見つかるように座標位置を調整しています。