マウスの動きをトラッキング（追跡）する。

2020.11.17

Logging

サイトのマウスの動きをトラッキングして行動パターンを知りたいという案件がクラウドでありました。応募はしていませんが考え方はこのような感じだと思います。ただ楽天サイトだという制約があったのでクロスサイトへ接続可能なのかはわからないけれど…ね?。

考え方のソースコードとdemoサイトのリンクを貼っときます、因みにIPを取れるJSライブラリもあるみたいなので、それを使用すると案件の内容が完結すると思います。
尚、PHPで再度、返却していますが、実際トラッキングする場合はPHP側でJSから送ったデータを保存処理を行う処理とクライアントが開いている状態のページの画面をキャプチャする機能などが必要になるかと思われます。そういう処理をPHP側で行わないといけないので、実際はJS側ではマウスのトラッキングとクライアントがブラウザで開いた画面サイズもPHP側に送信する必要はあるかなと。そういう事をPHP側に追加すれば良いのかと・・・感じました。

Demo22:: https://zip358.com/tool/demo22/

window.onload = function(){
	document.body.addEventListener("mousemove",(e)=>{
		var timeInMs = Date.now();
		document.querySelector("#log").innerHTML = navigator.userAgent + "<br>" + "x=" + e.offsetX  + "y=" + e.offsetY;
		var data = {timeInMs:timeInMs,userAgent:navigator.userAgent,x:e.offsetX,y:e.offsetY};
		move_xy(data).then(function(response){
			console.log(response);
		});
		
	});
};

async function move_xy(data){
	return await new Promise(function(resolve) {$.ajax({
		type: "POST",
		dataType: "json",
		url: "./move_xy.php",
		data: data,
		success: function (response) {
			if(response.res==="ok"){
				
				resolve(response);
			}
			resolve(false);
		},
		error:function(XMLHttpRequest, textStatus, errorThrown){
			resolve(false);
		}
	});});
}

<?php
$obj["timeInMs"] = $_POST["timeInMs"];
$obj["userAgent"] = $_POST["userAgent"];
$obj["x"] = $_POST["x"];
$obj["y"] = $_POST["y"];
$obj["res"] = "ok";

print json_encode($obj);

タグ

demo, IP, JS, php, あるかな, キャプチャ, クライアント, クラウド, クロス, コード, サイズ, サイト, ソース, それ, データ, トラッキング, パターン, ブラウザ, ページ, マウス, ライブラリ, リンク, 事, 使用, 保存, 側, 内容, 再度, 処理, 制約, 可能, 場合, 完結, 実際, 必要, 応募, 感じ, 接続, 案件, 楽天, 機能, 状態, 画面, 考え方, 行動, 返却, 追加, 追跡, 送信,

画面キャプチャの最終形態です、もう限界。

2016.12.16

Logging

画面キャプチャの最終形態です、もう限界。
ソースは公開しません、前回までの座標の力技とか廃止しました。
写真の撮る範囲は、Formそのもの枠、全てに変更しました。
もう少しがんばりましょう物だけど、有料で提供している数々の画面キャプチャより
少し劣るけれど、おそらくこれで十分な人もいるのではないかなぁと思っています。
どうぞよろしくご勝手に使用してください。
https://zip358.com/tool/gamen.zip

タグ

Form, キャプチャ, これ, ご勝手, ソース, もの, 人, 使用, 全て, 公開, 写真, 前回, 力技, 変更, 少し, 座標, 廃止, 形態, 提供, 数々, 最終, 有料, 枠, 物, 画面, 範囲, 限界,

画面キャプチャ動画を取るなら無料版のBandicamで十分かも。

2016.12.07

Logging

画面キャプチャ動画を取るなら無料版のBandicamで十分かもしれない。
特に仕事用途(共有)で使う場合は無料版のロゴ付きで十分過ぎると 自分は思っています。
操作を動画で説明したいときはこれで十分かなと思います。
大体、静止画のキャプチャで操作の説明は事が足りると思いますがどうしても説明が難しいことがあります。
こういう場合は、操作を動画で撮って送るという方法もありかなと 思っています。
ちなみに画面キャプチャ動画が撮れるソフトを作ろうと 考えています。考えただけで進んでいませんが
こういう方法で作れるじゃないかな？
Visual Studio2015の話ですが、画面キャプチャを動画にする 方法があります。aviに変換し保存するのにフリーのライブラリを使用して
ゴニョゴニョすれば出来るらしいです。例えば、AForge.NET Framework を 使用する方法やDirectShowを使う方法があります。
ちょっとググればGithubで公開していますので ソースを参考にして作ってみるのも良いかもしれないですね。
追記：2020/02/05
ちなみに今、YOUTUBEで投稿しているときに使っているのはこちら
https://zip358.com/?p=8707

タグ

2015, AForge, avi, Bandicam, DirectShow, Framework, net, Studio, Visual, キャプチャ, こと, ゴニョゴニョ, これ, ソフト, とき, フリー, ライブラリ, ロゴ, 事, 仕事, 使用, 保存, 共有, 動画, 場合, 変換, 大体, 操作, 方法, 無料, 用途, 画面, 自分, 話, 説明, 静止画,