超簡単なコード🦋マウス追従をする。 #javasriptcode
2022.11.28
おはようございます。先週、土曜日の朝は雨がしとしとと降っていましたね☔。
そんな中で一つのデモコードの動画撮影をしていたのですがボツにしました。理由は超簡単過ぎるコードなので、再生回数が狙えそうにないなという判断からです(尺も短いし…)。でも一応コードを書いたのでソースコードはリリースします。タイトル通り、マウス追従するコードです。マウスポインターを一定の距離間隔で追従します。ソースコードはjavasriptだけ貼っていますが、CSSやHTMLを使用して円を描いています。そちらはデモサイトを検証して頂けたらと思います。
let circle = document.getElementById("circle");
document.body.addEventListener("mousemove",function(e){
let a = e.currentTarget.getBoundingClientRect();
let x = e.clientX - a.left;
let y = e.clientY - a.top;
circle.style.top = `${y}px`;
circle.style.left = `${x}px`;
circle.style.transform = `translate(50px,50px)`;
})
余談:
この頃、ブログがスランプ状態ですね、キーボードも弾みません、波に乗っているときは結構早く一つの記事を書くことが出来るのですが全然ですね。そんな弾まないブログ記事作成の一コマの風景を動画に撮りました。明日の記事かYOUTUBEにアップしているので参照してみてくださいな(音楽は軽やかなんですけど…😅)。
タグ
addEventListener, body, circle, css, currentTar, document, function, getElementById, html, javasript, javasriptcode, let, mousemove, quot, コード, サイト, ソース, そちら, タイトル, デモ, ポインター, ボツ, マウス, リリース, 一つ, 一定, 中, 使用, 先週, 円, 再生, 判断, 動画, 回数, 土曜日, 尺, 撮影, 朝, 検証, 理由, 超簡単, 距離, 追従, 間隔, 雨,
窪之内英策先生の原原画展in高知2018
2018.06.09
窪之内英策先生の原原画展に行ってきたよ。良かった! pic.twitter.com/4JGIZY0Fq1
— 田岡 寿章@taoka_toshiaki🦌 (@taoka_toshiaki) June 9, 2018
窪之内英策先生の原原画展に行ってきたよ。良かった! pic.twitter.com/3YVP198yDC
— 田岡 寿章@taoka_toshiaki🦌 (@taoka_toshiaki) June 9, 2018
窪之内英策先生の原原画展に行ってきたよ。良かった! pic.twitter.com/S6ftkDsPmm
— 田岡 寿章@taoka_toshiaki🦌 (@taoka_toshiaki) June 9, 2018
日曜日に行く予定をはやめて、土曜日に
窪之内英策先生の原原画展in高知2018を観に行きました。
早めた理由は単純で明日は雨らしいから。
高知のかるぽーとまで行ってよかったなと
本当に思いました、やっぱ上手いです、プロは違うなと
思いました。ちなみに窪之内英策先生、高知県出身なんだとか
だから、高知県で展示会が見れたわけです。
なんか凄いな高知県から
こんな凄い絵かきさん世に出ると思うと
嬉しい限りです、ボツとか描いている絵でも
全然、めちゃくちゃ上手いです、絵が上手い人って
良いなと思います。
本当に見に行ってよかったです。
本当はいっぱい写真撮りましたが、シェアしたのは
数点です、理由は実際、足を運んで見に行ってほしいから
是非!!絵好きにはお薦めします。
★7月1日まで展示しています。
かるぽーと5階:9:00?18:00
http://www.kutv.co.jp/EISAKUKUBONOUCHI/
タグ
4, No.45, SEIBUNDO Mook, イラストノート, お薦め, ボツ, メイキングマガジン, 上手い人, 凄い絵かき, 凄い絵かきさん世, 原原画展in高知2018, 土曜日, 嬉しい限り, 展示会, 理由, 窪之内英策先生, 高知県, 高知県出身,
cronの設定数に制限があるさくらサーバーとかで制限以上に使う方法(´Д`)
2015.01.12
cronの設定数に制限があるさくらサーバーとかで制限数以上(cron設定を増やす方法
)に使う方法はないかなと考えた結果、自分はこうしました。
一つのPHPファイル(実行ファイル)から複数のファイルをキックすることに!(´Д`)
こうすれば、処理が遅くないファイルなら複数個でも実行できるのではないかと
思ったわけです。結果的に成功しているぽっいです。
※Shellで作れる人は作れるだろうけど自分には無理(´∀`*)ポッいのでPHPで制作しました。
ちなみにさくらレンタルサーバーの場合、php.iniにタイムゾーン設定を
加えてあげてください(date.timezone = Asia/Tokyo ←追加)。
そうしないと動かない恐れがあります。
作っていて思ったことですが、作る考え方はわかるものの、元々メソッドを覚えていない
人間なのでググってメソッド探しにまずヘタりました( ´Д`)=3。その後、完璧なハズとか
思ってソースを実行させるとエラーは出ないものの。思った通りうごかないという事象に
苦しめられること2時間、何でだろうとか思っていて検証してみた結果、メソッドの使い方が
間違っていたり、変数名が間違っていたりとなんとも言えない無情さに襲われましたが
何とか動作するようになったみたいなのでコードをうっぷします。
ソースコードを記載しときます。動作するとは
思いますが誤作動するかもしれないので保証はしません。なお、いつもながら
ソースにはコメントを記載しておりませんのでトレースしてください。
PHPファイルのDLはこちらから( ´Д`)=3?(最終更新日2015/01/12 11:07)
追記2
改良しました。{*改良版はこちら*}
※このPHPファイルを5分置きにキックしていますΣ(゚∀´(┗┐ヽ(・∀・ )ノ。
<?php
//5分刻みに対して有効な無限クローン 処理が負荷の場合どうなるかは知りません。
date_default_timezone_set('Asia/Tokyo');
class cron{
public function d_m($obj)
{
if($obj->m==="*")return true;
if(preg_match("/,/",$obj->m))return $this->comma($obj->m,date("m"));
if((int)$obj->m === (int)date("m"))return true;
return false;
}
public function d_d($obj)
{
if($obj->d==="*")return true;
if(preg_match("/,/",$obj->d))return $this->comma($obj->d,date("d"));
if((int)$obj->d === (int)date("d"))return true;
return false;
}
public function d_H($obj)
{
if(preg_match("/\*\/[0-9]{1,2}/",$obj->H)){
$H = explode("/",$obj->H);
if((int)$H[1]>0 && ((int)date("H") % (int)$H[1])===0)return true;
}else{
if($obj->H==="*")return true;
if(preg_match("/,/",$obj->H))return $this->comma($obj->H,date("H"));
if((int)$obj->H === (int)date("H"))return true;
}
return false;
}
public function d_i($obj)
{
if(preg_match("/\*\/[0-9]{1,2}/",$obj->i)){
$i = explode("/",$obj->i);
if((int)$i[1]>0 && ((int)date("i") % (int)$i[1])===0)return true;
}else{
if($obj->i==="*")return true;
if(preg_match("/,/",$obj->i))return $this->comma($obj->i,date("i"));
if((int)$obj->i === (int)date("i"))return true;
}
return false;
}
//曜日 0=日曜日 6=土曜日
public function d_w($obj)
{
if((int)$obj->w[date("w")]===1)return true;
return false;
}
public function comma($c="",$t=""){
if($c==="")return false;
if($t==="")return false;
$flg = false;
foreach(explode(",",$c) as $cc){
if((int)$cc===(int)$t)$flg = true;
}
return $flg;
}
public function d_command($obj){
if($obj->command){
exec($obj->command . " > /dev/null &");
}
return true;
}
}
if ($argv[1]) {
$filename = $argv[1];
if(is_file($filename)){
$jsn = json_decode(file_get_contents($filename));
$cron = new cron();
try {
foreach($jsn as $obj){
if($cron->d_m($obj)){
if($cron->d_d($obj)){
if($cron->d_H($obj)){
if($cron->d_i($obj)){
if($cron->d_w($obj)){
$cron->d_command($obj);//波動拳{{{{
}
}
}
}
}
}
} catch (\Throwable $th) {
print $th->getMessage();
}
}
}
タグ
3, Asia, cron, date, ini, php, shell, timezone, Tokyo, いの, キック, こと, サーバー, さくら, ゾーン, タイム, パス, ファイル, ヘタ, ボツ, メソッド, レンタル, わけ, 一つ, 人, 人間, 処理, 制作, 制限, 場合, 完璧, 実行, 後, 成功, 方法, 無理, 結果, 考え方, 自分, 複数, 複数個, 設定, 追加,