はじめに
何のために大き目の赤い矢印カーソルを作成したかといいますと、それは、youtube動画を作成するときに赤い大き目のカーソルで画面の位置(場所)をわかりやすくするためです。
デスクトップ画面の録画を撮るときに、説明箇所をわかりやすく表示したいためです。わざわざ作成したのは、理由があります。windows標準のカーソルを大きめにする設定はwindowsにありますが、そこで大き目にしても、録画ソフトで録画してみると、小さいままになっています。他の無料の録画ソフトでも同様です。
今回は、プラグインで作成しました。そのため、ChromeのWebアプリであれば、使えます。注意することは、Webアプリのスタイル定義で、zoomを使用していると想定通りの位置にカーソルが表示されません。プラグインでは、カーソルの位置の再計算はしていません。zoomで2.0を指定していると2倍離れたところに矢印のカーソルが表示されてしまいます。以降で、このプラグインの使い方について説明します。
サンプル画面
画面の任意の場所でクリックすると、その場所に大き目の赤い矢印が表示されます。録画するときに利用すると説明箇所がわかりやすくなります。
以下のサイトで、「大き目の赤の矢印カーソルプラグイン」をテストするには、事前に、プラグインのインストールをお願いします。
pop説明プラグインのダウンロード、インストール
manifest.jsonファイル
{
"manifest_version": 3,
"name": "pop説明プラグイン",
"version": "1.0",
"description": "popして説明文を表示するプラグインです。",
"background": {
"service_worker":"pop説明_background.js",
"type": "module"
},
"externally_connectable": {
"matches": ["https://*/*"
]
},
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; "
},
"content_scripts": [{
"matches": ["https://*/*"],
"js": ["jquery.js","jquery-ui.js","pop説明_content.js"],
"css": ["jquery-ui.css"]
}],
"action": {
"default_title": "pop説明プラグインv1.0",
"default_icon":{
"19": "矢印19plus.png",
"48": "矢印48plus.png",
"96": "矢印96plus.png",
"128": "矢印128plus.png"
}
}
}
上記は、プラグインのマニフェストファイルです。ここで、background.jsとcontent.jsファイルを指定していますが、使用しているのは、content.jsファイルだけです。background.jsファイルは使用していません。
/**********************************************************************
*pop説明プラグイン
*pop説明_content.js
*機能 画面録画で、大きめの矢印とその説明文をpop表示するプラグインです。
*操作 画面上で、説明が必要な要素上で、ctrlKey+altKey+clickします。
* そこで、 pop表示します。
*処理 タブのリロードで、初期化
* リスナー登録(ctrl+alt+click)
* 説明文のロード
*補正作業
*ページ毎に、X方向,Y方向の補正が必要 +-
*
***********************************************************************/
//このファイルで使用している変数のみにする
'use Strict';
let myid;
$("#pop_img").remove();
/*EXTENTION IDをセット */
myid = chrome.runtime.id;
//$("#ex_id").html(myid);
/***********************************************************************************
*カーソルを置いた場所にPOP矢印を表示する。
*clickして、
*
************************************************************************************/
window.addEventListener('click', function(e) {
//ここは、mousedownが最適 clickだと、リンク先へ飛んで行くため、
function moveElementByOffset(element, offsetX, offsetY) {
const offsetParent = element.offsetParent;
if (!offsetParent) {
return; // offsetParentがない場合は処理を中断
}
//const currentLeft = element.offsetLeft;
//const currentTop = element.offsetTop;
element.style.left = offsetX + 'px';
element.style.top = offsetY + 'px';
}
//
let html = "<div id='pop_img'style='z-index:999999;position:absolute;top:0px;left:0px;'><img src='https://autoplay.tecoyan.net/images/pop矢印.png'/>\n\
<span>"+e.pageX+" "+e.pageY+"</span></div>";
//すでにあれば追加しない。
$("#pop_img").remove();
$("body").append(html);
// 使用例:
let element = $("#pop_img");
let xx = e.pageX;
let yy = e.pageY;
//alert("X= "+xx+" Y= "+yy);
moveElementByOffset(element[0], xx, yy); //
//return false;
});
実際の録画
あとがき
デスクトップ画面をビデオ録画するときに、特定の場所を示して、説明したい時があります。そのようなときに、windowsデフォルトのカーソルで大き目に設定しても、録画しているときには小さいままになっていたため、あえてプラグインで自作しました。
このプラグインでは、大き目の赤い矢印が表示されます。クリックする場所をいろいろ変えてみると、変えた場所に再表示されます。
注意することは、クリックした場所がリンクの場合は、先に赤い矢印が表示され、続けて、リンク先にジャンプします。
蛇足
最近、Cursorが評判になっていますが、本当に使えるのか、疑問に思っています。極端な話、例えば、ここにあるpop説明プラグインですが、AIに「このプラグイン」を作ってくださいと指示したら、そのコードが出力されるのでしょうか。とても、表示されるとは思われません。何をどのようにして指示したら、目的のコードが表示されるのか、結構それまでの手順があるのではないかと思っています。
まだ、cursorはインストールしていませんが、試してみたいとは思っています。
ちなみに、このプラグインは、Apache Netbeans IDE 26で作成しています。
しばらく使ってみての感想
普段のパソコン作業でもインストールしたままにしておきましたが、特別、赤い矢印が邪魔になるということもありません。クリックする場所毎に表示されますので、スクロールした後に戻ってもどこでクリックしたかがわかり、以外に便利に使っています。