編集画面の縦方向の伸縮
前ページの「Ameblo Writer（Compact）」の更新により、編集画面の下部パーツの位置が「可変」になりました。 これは、このスタイルのコンセプトから必須の進化と考えていますが、デジタル時計「Time On My Side D」を下部パーツの位置に配置していたので、問題が生じました。
下は私の時計の配置で、「コメント・リブロク・アメンバー」の設定を使わないので、その上に配置していました。
しかし、編集画面の高さが可変になると、下の様に「編集枠」の中や、逆にウインドウの外に表示される状態になります。
これは、デジタル時計の上下方向の配置を「position: fixed」「top: 固定値」で指定しているためです。 この配置の指定コードを「vh」を使って「ウインドウの高さ」に対応するものにすれば、編集画面の変化に対応できます。
ここで、デジタル時計「Time On My Side D」の配置コードは、2つのタイプに分かれる事になります。 従来タイプはウインドウ上辺からの位置が固定されるもので、今回必要になったのは、ウインドウ下辺からの位置が固定されるものです。 この2種の配置方法は相容れないので、選択式にする必要が出て来ました。
また、円形のアナログ時計の方は、デザイン上でウインドウ下部の配置に適しないと思われ、配置方法の選択は採り入れない事にしました。
タイプを切り換える方法
これまで時計のサイズ変更は、アイコン「⏰」をクリックする方式でしたから、これを「Ctrl+Click」する事で、配置タイプを変更する様にしました。
❶「⏰」は従来のウインドウ上辺からの位置が固定の配置タイプ
➋「⏱」はウインドウ下辺からの位置が固定の配置タイプ
❶と❷が、アイコンを「Ctrl+Click」する毎に切り替わります。
なお、「Time On My Side D」は「HOME画面」「編集画面」で動作します。 それぞれはドメインが異なります。 このため、各画面での配置タイプ・配置位置・サイズなどは全く別個に登録され、違ったスタイルで使用できます。
また、どちらかの画面の時計表示が不要な場合は、コード最初の「@match」パラメーターの行を削除すれば、時計が表示されなくなります。
「Time On My Side D」ver. 0.9 を利用するには
このツールは Chrome・Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Time On My Side D 〕ver. 0.9 デジタル時計版
// ==UserScript==
// @name Time On My Side D
// @namespace http://tampermonkey.net/
// @version 0.9
// @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_type=0; // 配置タイプ
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_type=get_cookie('time_d_type');
if(w_cookie_type){ // Cookieの更新
w_type=w_cookie_type;
document.cookie='time_d_type='+w_type+'; 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 { display: inline-block; width: 28px; vertical-align: 1px; }';
let base=document.querySelector('body');
let watch=document.createElement('div');
watch.setAttribute('id', 'd_watch');
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 w_icon=document.querySelector('#w_icon');
if(w_type==0){
watch.style.top=y_p+'px';
w_icon.textContent='⏰'; }
else if(w_type==1){
watch.style.top='calc(100vh - '+ y_p+'px)';
w_icon.textContent='⏱'; }
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; }}}
w_icon.onclick=function(event){
event.stopImmediatePropagation();
drage=0;
if(event.ctrlKey){
let x=event.clientX-shiftX;
let y=event.clientY-shiftY;
if(w_type==0){
w_type=1;
let ch=window.innerHeight;
y=ch-y;
d_watch.style.top='calc(100vh - '+ y+'px)';
w_icon.textContent='⏱'; }
else{
w_type=0;
d_watch.style.top=y+'px';
w_icon.textContent='⏰'; }
document.cookie=
'time_d_pos='+(document.body.offsetWidth/2-x)+':'+y+'; Max-Age=2592000';
document.cookie='time_d_type='+w_type+'; Max-Age=2592000'; }
else{
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;
if(w_type==0){
d_watch.style.top=y+'px'; }
if(w_type==1){
let ch=window.innerHeight;
y=ch-y;
d_watch.style.top='calc(100vh - '+ 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/D」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
