プレビュー表示に時計が表示される問題
前 ver. 0.7 でプレビュー表示の場合に、時計が表示されないコードを追加したのですが、時々コードが上手く動作しない事がありました。
前コードは「プレビューボタン」のクリックイベントを拾って、それが「プレビュー状態」への移行なら時計を非表示にし、その逆の場合は表示に戻すというコードでした。 これはボタンを押して「0.4sec」後のタイミングで移行を確認するコードで、編集画面の移行が遅い場合に、正しく動作しなかったのだと推測しています。 そもそも、「0.4sec」も待つコードを作ったのは、不安定な判定だったに違いありません。
今回、判定方法を変更して、「編集画面」がプレビュー時には非表示になるクラス名が付く事に着目し、これを「MutationObserver」で追跡監視する様にしました。
上がそのコードですが、実装してみたところ切れ味良く表示/非表示が切り替わるので、間違いのないコードだと思います。
時計の扱い方
● アナログ時計とデジタル時計の2種があり、スクリプトツールを分けています。 必要な方を選んでください。
● ツールを常駐ONさせると、「HOME」「編集画面」の両方に表示されますが、配置やサイズは別個に設定でき、自動的に設定は記録されます。
● コードの最初の「@match」パラメーターの行を削除する事で、必要な画面にだけ表示させる事ができます。
● 時計の配置は、時計全体をドラッグ&ドロップで移動して指定/変更します。 ただし、「編集画面」は、編集枠内などの配置できない場所があります。
● アナログ時計は、盤面のどこかをクリックする毎に4種のサイズが切替わります。
● デジタル時計は、「⏰」部分をクリックする毎に3種のサイズが切り替わります。
「Time On My Side」を利用するには
このツールは Chrome・Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Time On My Side A 〕ver. 0.8 アナログ時計版
// ==UserScript==
// @name Time On My Side A
// @namespace http://tampermonkey.net/
// @version 0.8
// @description HOME画面にアナログ時刻表示
// @author Ameba Blog User
// @match https://www.ameba.jp/home
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @exclude https://blog.ameba.jp/ucs/entry/srventrylist.do*
// @exclude https://blog.ameba.jp/ucs/entry/srventryinsertend.do
// @exclude https://blog.ameba.jp/ucs/entry/srventryupdateend.do
// @exclude https://blog.ameba.jp/ucs/entry/srventryinsertdraft.do
// @exclude https://blog.ameba.jp/ucs/entry/srventryupdatedraft.do
// @exclude https://blog.ameba.jp/ucs/entry/srventryouterpreview.do
// @noframes
// @grant none
// ==/UserScript==
main();
function main(){
let wa_size=0;
let x_p=0;
let y_p=0;
let wa_cookie_pos=get_cookie('time_a_pos');
if(wa_cookie_pos!=0 && wa_cookie_pos.split(':')[0]){
x_p=wa_cookie_pos.split(':')[0]; }
if(wa_cookie_pos!=0 && wa_cookie_pos.split(':')[1]){
y_p=wa_cookie_pos.split(':')[1]; }
if(x_p!=0 && y_p!=0){ // Cookieの更新
document.cookie='time_a_pos='+x_p+':'+y_p+'; Max-Age=2592000'; }
let wa_cookie_siz=get_cookie('time_a_siz');
if(wa_cookie_siz){ // Cookieの更新
wa_size=wa_cookie_siz;
document.cookie='time_a_siz='+wa_size+'; Max-Age=2592000'; }
let wa_inner=
'<span class="a_watch_hour"></span>'+ // 時計
'<span class="a_watch_min"></span>'+ // 分針
'<span class="a_watch_sec"></span>'+ // 秒針
'<span class="a_watch_12">●</span>'+ // 時計文字
'<span class="a_watch_3">●</span>'+ // 時計文字
'<span class="a_watch_6">●</span>'+ // 時計文字
'<span class="a_watch_9">●</span>'; // 時計文字
wa_inner +=
'<style>'+
'#a_watch { position: fixed; width: 80px; height: 80px; z-index: 10; '+
'background: #fff; border: 1px solid #f80; border-radius: 50%; '+
'transition-duration: 0.02s; transform-origin: center center; } '+
'.a_watch_hour { position: absolute; top: calc(50% - 24px); left: calc(50% - 2px); '+
'width: 4px; height: 24px; border-radius: 4px; '+
'background: #2196f3; transform-origin: bottom; } '+
'.a_watch_min { position: absolute; top: calc(50% - 30px); left: calc(50% - 1px); '+
'width: 2px; height: 30px; '+
'background: #2196f3; transform-origin: bottom; } '+
'.a_watch_sec { position: absolute; top: calc(50% - 36px); left: calc(50% - .5px); '+
'width: 1px; height: 36px; '+
'background: #ff0000; transform-origin: bottom; } '+
'.a_watch_12, .a_watch_3, .a_watch_6, .a_watch_9 { '+
'position: absolute; color: #f80; font: normal 10px meiryo; } '+
'.a_watch_12 { top: -2px; left: calc(50%); transform: translateX(-50%); } '+
'.a_watch_3 { top: 50%; right: 0; transform: translateY(-50%); } '+
'.a_watch_6 { bottom: -2px; left: calc(50%); transform: translateX(-50%); } '+
'.a_watch_9 { top: 50%; left: 0; transform: translateY(-50%); } '+
'</style>';
let base=document.querySelector('body');
let watch=document.createElement('div');
watch.setAttribute('id', 'a_watch');
watch.style.top=y_p+'px';
watch.style.left='calc(50% - '+x_p+'px)';
watch.setAttribute('draggable', 'true');
trans_size(watch, wa_size);
watch.innerHTML=wa_inner;
if(!base.querySelector('#a_watch')){
base.appendChild(watch); }
let time_a=setInterval(disp_a_watch, 1000);
function disp_a_watch(){
let now=new Date();
get_a(now);
function get_a(time){
let Hour=time.getHours();
let Min=time.getMinutes();
let Sec=time.getSeconds();
let deg_Hour=Hour*(360/12) + Min*(360/12/60);
let deg_Min=Min*(360/60);
let deg_Sec=Sec*(360/60);
document.querySelector(".a_watch_hour").style.transform=
`rotate(${deg_Hour}deg)`;
document.querySelector(".a_watch_min").style.transform=
`rotate(${deg_Min}deg)`;
document.querySelector(".a_watch_sec").style.transform=
`rotate(${deg_Sec}deg)`; }}
let a_watch=document.querySelector('#a_watch');
a_watch.onclick=function(event){
event.stopImmediatePropagation();
drage=0;
if(wa_size==0){
wa_size=1; }
else if(wa_size==1){
wa_size=2; }
else if(wa_size==2){
wa_size=3; }
else if(wa_size==3){
wa_size=0; }
trans_size(a_watch, wa_size);
document.cookie='time_a_siz='+wa_size+'; Max-Age=2592000'; }
function trans_size(elem, n){
if(n==0){
elem.style.transform='scale(1)'; }
else if(n==1){
elem.style.transform='scale(0.9)'; }
else if(n==2){
elem.style.transform='scale(0.8)'; }
else if(n==3){
elem.style.transform='scale(0.6)'; }}
let target=document.querySelector('body'); // 監視 target
let monitor=new MutationObserver(hide);
monitor.observe(target, {childList: true});
function hide(){
let js_container=document.querySelector('#js-container');
if(js_container){
let a_watch=document.querySelector('#a_watch');
if(js_container.classList.contains('is-invisible--absolute')==true){
a_watch.style.display='none'; }
else{
a_watch.style.display='block'; }}}
let drage=0; // ドラッグ処理中の管理
let shiftX; // ホールド箇所による位置ズレ補正
let shiftY; // ホールド箇所による位置ズレ補正
let html_area=document.querySelector('html');
html_area.ondragover=function(){ return false; } // HOMEでドラッグ可能にする
a_watch.onmousedown=function(event){
drage=1;
shiftX=event.clientX-a_watch.getBoundingClientRect().left;
shiftY=event.clientY-a_watch.getBoundingClientRect().top; }
a_watch.onmouseup=function(event){
drage=0; }
document.addEventListener('drop', function(event){
toMove(event); }, false); // ドロップ時に位置を取得して配置修正
function toMove(event){
if(drage==1){
drage=0;
let x=event.clientX-shiftX;
let y=event.clientY-shiftY;
a_watch.style.top=y+'px';
a_watch.style.left='calc(50% - '+(document.body.offsetWidth/2-x)+'px)';
document.cookie=
'time_a_pos='+(document.body.offsetWidth/2-x)+':'+y+'; Max-Age=2592000'; }}
function get_cookie(name){
let cookie_req=document.cookie.split('; ').find(row=>row.startsWith(name));
if(cookie_req){
if(cookie_req.split('=')[1]==null){
return 0; }
else{
return cookie_req.split('=')[1]; }}
if(!cookie_req){
return 0; }}
} // main()
〔 Time On My Side D 〕ver. 0.8 デジタル時計版
// ==UserScript==
// @name Time On My Side D
// @namespace http://tampermonkey.net/
// @version 0.8
// @description HOME画面に時刻表示
// @author Ameba Blog User
// @match https://www.ameba.jp/home
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @exclude https://blog.ameba.jp/ucs/entry/srventrylist.do*
// @exclude https://blog.ameba.jp/ucs/entry/srventryinsertend.do
// @exclude https://blog.ameba.jp/ucs/entry/srventryupdateend.do
// @exclude https://blog.ameba.jp/ucs/entry/srventryinsertdraft.do
// @exclude https://blog.ameba.jp/ucs/entry/srventryupdatedraft.do
// @exclude https://blog.ameba.jp/ucs/entry/srventryouterpreview.do
// @noframes
// @grant none
// ==/UserScript==
main();
function main(){
let w_size=0;
let x_p=0;
let y_p=0;
let w_cookie_pos=get_cookie('time_d_pos');
if(w_cookie_pos!=0 && w_cookie_pos.split(':')[0]){
x_p=w_cookie_pos.split(':')[0]; }
if(w_cookie_pos!=0 && w_cookie_pos.split(':')[1]){
y_p=w_cookie_pos.split(':')[1]; }
if(x_p!=0 && y_p!=0){ // Cookieの更新
document.cookie='time_d_pos='+x_p+':'+y_p+'; Max-Age=2592000'; }
let w_cookie_siz=get_cookie('time_d_siz');
if(w_cookie_siz){ // Cookieの更新
w_size=w_cookie_siz;
document.cookie='time_d_siz='+w_size+'; Max-Age=2592000'; }
let wd_inner=
'<span id="w_icon">⏰ </span>'+
'<span id="time_disp"></span>'+
'<style>'+
'#d_watch { position: fixed; z-index: 10; '+
'font: bold 16px Meiryo; color: #0292a5; background: #fff; '+
'height: 27px; padding: 1px 0 0 6px; box-sizing: border-box; '+
'border: 1px solid #ccc; border-radius: 3px; width: 240px; } '+
'#w_icon { vertical-align: 1px; }';
let base=document.querySelector('body');
let watch=document.createElement('div');
watch.setAttribute('id', 'd_watch');
watch.style.top=y_p+'px';
watch.style.left='calc(50% - '+x_p+'px)';
watch.setAttribute('draggable', 'true');
watch.innerHTML=wd_inner;
if(!base.querySelector('#d_watch')){
base.appendChild(watch); }
let time_d=setInterval(disp_watch, 1000);
function disp_watch(){
let d_watch=document.querySelector('#d_watch');
let time_disp=document.querySelector('#time_disp');
let now=new Date();
get_d(now);
function get_d(time){
let Year=time.getFullYear();
let Month=getdouble(time.getMonth()+1);
let Date=getdouble(time.getDate());
let Hour=getdouble(time.getHours());
let Min=getdouble(time.getMinutes());
let Sec =getdouble(time.getSeconds());
function getdouble(number){
return ("0" + number).slice(-2); }
if(w_size==0){
d_watch.style.width='240px';
time_disp.innerHTML=
Year+"."+Month+"."+Date+" "+Hour+":"+Min+":"+Sec; }
else if(w_size==1){
d_watch.style.width='190px';
time_disp.innerHTML=
Month+"."+Date+" "+Hour+":"+Min+":"+Sec; }
else if(w_size==2){
d_watch.style.width='122px';
time_disp.innerHTML=
Hour+":"+Min+":"+Sec; }}}
let w_icon=document.querySelector('#w_icon');
w_icon.onclick=function(event){
event.stopImmediatePropagation();
drage=0;
if(w_size==0){
w_size=1; }
else if(w_size==1){
w_size=2; }
else if(w_size==2){
w_size=0; }
document.cookie='time_d_siz='+w_size+'; Max-Age=2592000'; }
let target=document.querySelector('body'); // 監視 target
let monitor=new MutationObserver(hide);
monitor.observe(target, {childList: true});
function hide(){
let js_container=document.querySelector('#js-container');
if(js_container){
let d_watch=document.querySelector('#d_watch');
if(js_container.classList.contains('is-invisible--absolute')==true){
d_watch.style.display='none'; }
else{
d_watch.style.display='block'; }}}
let d_watch=document.querySelector('#d_watch');
let drage=0; // ドラッグ処理中の管理
let shiftX; // ホールド箇所による位置ズレ補正
let shiftY; // ホールド箇所による位置ズレ補正
d_watch.onmousedown=function(event){
drage=1;
shiftX=event.clientX-d_watch.getBoundingClientRect().left;
shiftY=event.clientY-d_watch.getBoundingClientRect().top; }
d_watch.onmouseup=function(event){
drage=0; }
let body_area=document.querySelector('body');
body_area.ondragover=function(){ return false; } // HOMEでドラッグ可能にする
document.addEventListener("drop", function(event){
event.preventDefault();
toMove(event); }, false); // ドロップ時に位置を取得して配置修正
function toMove(event){
if(drage==1){
drage=0;
let x=event.clientX-shiftX;
let y=event.clientY-shiftY;
d_watch.style.top=y+"px";
d_watch.style.left='calc(50% - '+(document.body.offsetWidth/2-x)+'px)';
document.cookie=
'time_d_pos='+(document.body.offsetWidth/2-x)+':'+y+'; Max-Age=2592000'; }}
function get_cookie(name){
let cookie_req=document.cookie.split('; ').find(row=>row.startsWith(name));
if(cookie_req){
if(cookie_req.split('=')[1]==null){
return 0; }
else{
return cookie_req.split('=')[1]; }}
if(!cookie_req){
return 0; }}
} // main()
「Time On My Side A/D」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Time On My Side A」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
●「Time On My Side D」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。