@Blog
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
マウスの動きをトラッキング（追跡）する。
2020.11.17
サイトのマウスの動きをトラッキングして行動パターンを知りたいという案件がクラウドでありました。応募はしていませんが考え方はこのような感じだと思います。ただ楽天サイトだという制約があったのでクロスサイトへ接続可能なのかはわからないけれど…ね?。
考え方のソースコードと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);
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
demo, IP, JS, php, あるかな, キャプチャ, クライアント, クラウド, クロス, コード, サイズ, サイト, ソース, それ, データ, トラッキング, パターン, ブラウザ, ページ, マウス, ライブラリ, リンク, 事, 使用, 保存, 側, 内容, 再度, 処理, 制約, 可能, 場合, 完結, 実際, 必要, 応募, 感じ, 接続, 案件, 楽天, 機能, 状態, 画面, 考え方, 行動, 返却, 追加, 追跡, 送信,
画面キャプチャの最終形態です、もう限界。
2016.12.16
画面キャプチャの最終形態です、もう限界。
ソースは公開しません、前回までの座標の力技とか廃止しました。
写真の撮る範囲は、Formそのもの枠、全てに変更しました。
もう少しがんばりましょう物だけど、有料で提供している数々の画面キャプチャより
少し劣るけれど、おそらくこれで十分な人もいるのではないかなぁと思っています。
どうぞよろしくご勝手に使用してください。
https://zip358.com/tool/gamen.zip
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Form, キャプチャ, これ, ご勝手, ソース, もの, 人, 使用, 全て, 公開, 写真, 前回, 力技, 変更, 少し, 座標, 廃止, 形態, 提供, 数々, 最終, 有料, 枠, 物, 画面, 範囲, 限界,
画面キャプチャ動画を取るなら無料版のBandicamで十分かも。
2016.12.07
画面キャプチャ動画を取るなら無料版のBandicamで十分かもしれない。
特に仕事用途(共有)で使う場合は無料版のロゴ付きで十分過ぎると 自分は思っています。
操作を動画で説明したいときはこれで十分かなと思います。
大体、静止画のキャプチャで操作の説明は事が足りると思いますがどうしても説明が難しいことがあります。
こういう場合は、操作を動画で撮って送るという方法もありかなと 思っています。
ちなみに画面キャプチャ動画が撮れるソフトを作ろうと 考えています。考えただけで進んでいませんが
こういう方法で作れるじゃないかな？
Visual Studio2015の話ですが、画面キャプチャを動画にする 方法があります。aviに変換し保存するのにフリーのライブラリを使用して
ゴニョゴニョすれば出来るらしいです。例えば、AForge.NET Framework を 使用する方法やDirectShowを使う方法があります。
ちょっとググればGithubで公開していますので ソースを参考にして作ってみるのも良いかもしれないですね。
追記：2020/02/05
ちなみに今、YOUTUBEで投稿しているときに使っているのはこちら
https://zip358.com/?p=8707
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2015, AForge, avi, Bandicam, DirectShow, Framework, net, Studio, Visual, キャプチャ, こと, ゴニョゴニョ, これ, ソフト, とき, フリー, ライブラリ, ロゴ, 事, 仕事, 使用, 保存, 共有, 動画, 場合, 変換, 大体, 操作, 方法, 無料, 用途, 画面, 自分, 話, 説明, 静止画,