Firefoxでの問題
最近、「Firefox」での動作チェックが疎かになっていたので、公開したツール群をチェックしています。「SP Caution ⭐」では、「アラート表示」の「タイマー時間」の設定で、スピナーが常に表示されてしまう問題がありました。
「タイマー時間」設定のスピナー
下は「タイマー時間」を設定する「input要素」ですが、ブラウザのデフォルトデザインで、要素枠の右端には「スピナー」が表示されます。
ここで「タイマー時間」の「分」の調節をしますが、時間の設定と見て判る様に、単位の「min」を表示しています。「input要素」内に本来は単位を表示出来ないので、ここではデザイン上で工夫をしています。
また、単位表示で「スピナー」の場所が無くなるので、マウスポインターを乗せると、スピナーが表示される様にしています。
下は、Chrome / Edge のデザインです。
「input要素」のアレンジは「Firefox」と「Chrome」で異なる
これは CSSを扱う上の常識で、ブラウザによって「input要素」のアレンジコードが異なる部分があります。 少しずつ改善（歩み寄り？）されている様ですが、いまだに困った部分です。
このスピナー表示はテストですぐ判る問題で、完全に無チェックでした。「Firefox」では「スピナー」が常時表示され、「min」の上に被さったままでした。 これは、「Firefox」用のCSSコードを追記して改善しました。（下図）
「ヘルプ」ボタンの追加
なんとなく使えてしまうツールですが、正確な機能の説明がある方が良いので、マニュアルページを開く「？」ボタンを追加しました。
マニュアルページは前ページにあります。
「SP Caution ⭐」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。
▪「アラート表示」の配置は、「Ameblo Writer（Compact)」でアレンジした「編集画面」を前提にしていますが、このアレンジが無くてもツールは機能します。
「Ameblo Writer（Compact)」に関しては、以下を参照ください。
以下に、「SP Caution ⭐」の導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 SP Caution ⭐ 〕 ver. 0.3
// ==UserScript==
// @name SP Caution ⭐
// @namespace http://tampermonkey.net/
// @version 0.3
// @description 編集画面の自動保存
// @author Ameblo Writer User
// @match https://blog.ameba.jp/ucs/entry/srventryupdateinput*
// @match https://blog.ameba.jp/ucs/entry/srventryupdatedraft.do
// @grant none
// ==/UserScript==
let sp_set=localStorage.getItem('SPCaution'); // 自動保存間隔 🔵
if(!sp_set){
sp_set=10; }
localStorage.setItem('SPCaution', sp_set); // 設定を更新 🔵
let retry=0;
let interval=setInterval(wait_target, 100);
function wait_target(){
retry++;
if(retry>10){ // リトライ制限 10回 1sec
clearInterval(interval); }
let target=document.querySelector('.l-gHeaderLeft__link a'); // 監視 target
if(target){
clearInterval(interval);
button_disp();
auto_backup();
}}
function button_disp(){ // 起動表示と警告ダイアログ
let lform=document.querySelector('.l-form');
let lform_w=(lform.clientWidth)/2;
let SVG_spch=
'<svg id="svg_spch" viewBox="0 0 150 150">'+
'<path d="M66 13C56 15 47 18 39 24C-12 60 18 146 82 137C92 135 '+
'102 131 110 126C162 90 128 4 66 13M68 25C131 17 145 117 81 125C16 '+
'133 3 34 68 25M69 40C61 41 39 58 58 61C66 63 73 47 82 57C84 60 '+
'83 62 81 65C77 70 52 90 76 89C82 89 82 84 86 81C92 76 98 74 100 66'+
'C105 48 84 37 69 40M70 94C58 99 66 118 78 112C90 107 82 89 70 94z">'+
'</path></svg>';
let disp=
'<div id="sp_panel">'+
'<span id="sp_save" class="sp_c">SAVE</span>'+
'<span id="sp_pass" class="sp_c">PASS</span>'+
'<input id="sp_time" type="number" min="2" max="30">'+
'<span id="sp_min">min</span>'+ SVG_spch +
'</div>'+
'<style>'+
'.c-button--circle--secondary { background: #000 !important; } '+
'#sp_panel { position: fixed; bottom: 100px; z-index: -1; '+
'right: calc(50vw - '+ lform_w +'px); padding: 0 10px; '+
'font: bold 16px Meiryo; color: #fff; height: 60px; width: 210px; '+
'background: #000; border: 1px solid #ccc; border-radius: 4px; '+
'display: flex; justify-content: space-between; align-content: center; } '+
'.sp_c { padding: 3px 6px 1px; margin: auto 0; '+
'border: 1px solid #ccc; border-radius: 4px; cursor: pointer; } '+
'.sp_c:hover { background: #b0bec5; } '+
'#sp_time { position: relative; height: 27px; width: 48px; '+
'margin: auto 0; padding: 1px 2px 0 4px; background: #000; '+
'border: 1px solid #ccc; border-radius: 4px; -moz-appearance: textfield; } '+
'#sp_time:hover { z-index: 2; -moz-appearance: unset; } '+
'input[type=number]::-webkit-inner-spin-button { margin-top: -1px; } '+
'#sp_min { position: relative; left: -38px; bottom: -24px; height: 20px; '+
'margin-right: -36px; font-size: 11px; } '+
'#sp_min:hover { z-index: -1; } '+
'#svg_spch { height: 16px; margin: 28px -4px 0 -2px; fill: #fff; '+
'cursor: pointer; }'+
'</style>';
if(!document.querySelector('#sp_panel')){
document.body.insertAdjacentHTML('beforeend', disp); }
let sp_time=document.querySelector('#sp_time');
if(sp_time){
sp_time.value=sp_set; }
let help=document.querySelector('#svg_spch');
if(help){
help.onclick=function(){
let url='https://ameblo.jp/personwritep/entry-12770480518.html';
window.open(url, '_blank'); }}
} // button_disp()
function auto_backup(){
let sp_panel=document.querySelector('#sp_panel');
let sp_save=document.querySelector('#sp_save');
let sp_pass=document.querySelector('#sp_pass');
let secondary=document.querySelector('.c-button--circle--secondary');
let sp_time=document.querySelector('#sp_time');
let alarm;
auto_request();
function auto_request(){
alarm=setTimeout(()=>{
save(); }, sp_set*60000); } // 自動タイマー設定 🔴
function save(){
sp_panel.style.zIndex='20';
sp_save.onclick=function(){
secondary.click(); }
sp_pass.onclick=function(){
sp_panel.style.zIndex='-1';
auto_request(); }}
sp_time.addEventListener('input', function(){
sp_set=sp_time.value;
localStorage.setItem('SPCaution', sp_set); }); // 設定を更新 🔵
secondary.oncontextmenu=function(){
clearTimeout(alarm);
save();
return false; }
secondary.onclick=function(){
clearTimeout(alarm);
auto_request(); }
} // auto_backup()
let path_name=location.pathname;
if(path_name.includes('srventryupdatedraft.do')){ // 下書き保存確認画面
let Complete=document.querySelector('.entryComplete');
if(Complete){
let sp_panel=window.opener.document.querySelector('#sp_panel');
if(sp_panel){
sp_panel.style.zIndex='-1';
window.close(); }}
} // 下書き保存確認画面
「SP Caution ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「SP Caution ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
