気が利くコンシェルジュ
「自動バックアップ」が働かない「再編集画面」で、一定の時間ごとに「下書き保存」を忠告してくれる機能が「SP Caution ⭐」です。 2ヵ月近く使っていますが、予想した以上に「邪魔にならない」ので気に入ってます。
既に投稿した記事を修正中に「下書き保存」すると、閲覧者は一時的に記事にアクセスできなくなります。 従って、修正中に「下書き保存」するか、そうせずに修正を続けるかの判断が必要です。 この様な場合があるので「勝手に保存」するツールにしなかったのは正解でした。
基本的な扱い方
このツールの基本的な仕様や扱い方は、最初の制作記事を参照ください。
下書き時の「エラー」に対応
このツールは「下書き保存」の回数を増やしますが、その度に「保存しました」の確認ウインドウが表示され、これは少し煩わしいものです。 そこで、この確認ウインドウ（タブ）を自動的に消す様にプログラムしています。
一方、「SAVE」や「下書き保存」ボタンを「Ctrl+Click」すると、「確認画面」が別タブ表示になり、編集画面が隠されないのでこれはとても快適です。
ただ、頻回に生じる事ではありませんが、「下書き保存エラー」にユーザーが気付き難くなる問題を見落としていました。 エラーを報告する「確認ウインドウ」もすぐに閉じてしまうので、これは大いに問題があります。
保存エラー時に動作 させない
正常に保存された場合の「確認ウインドウ」はさっさと閉じ、そうでない場合は閉じない様にする改善が先ず必要です。
下は「正常」な「下書き保存の確認ウインドウ」です。
赤枠以降の殆どの表示は、「.entryComplete」という要素の表示で、これは正常に保存された場合にのみインポーズされます。 一方、文字数超過で保存できないエラー表示の場合は、「.entryComplete」は画面上にありません。
下は「.entryComplete」がある場合のみタブ画面を閉じるコード（太字）です。
編集画面の表示を、確認画面で制御する
更に、上記コードの赤文字の部分は新しい改善です。「window.opener」は、このコードが動作する確認ウインドウから見て、自分を開いた親ウインドウ（編集画面）をコントロールする事に使えます。
ここでは、編集画面の「#sp_panel」（このツールのアラーム表示）を取得して、その「z-index」を「-1」に変更し、「アラーム表示」を非表示にしています。 通常はセキュリティのために、あるウインドウ（タブ）から他のウインドウ（タブ）内の要素をコントロールできませんが、「window.opener」は特別な機能です。
下図の「SAVE」「PASS」のボタンがあるのが「アラーム表示」です。
前バージョンでは「アラーム表示」は編集画面で「下書き保存」「SAVE」を押すと非表示になる仕様でしたが、今回は確認ウインドウで「正常保存」が判定された場合にのみ非表示になる様に変更しました。
以上で、下書き保存が正常に行われなかった場合は、その確認タブが残り、編集画面の側でも「アラーム表示」が消えず、ユーザーは確実に問題に気付けると思います。 テストすると、通信エラーの場合もパネルが消えないので、使えるでしょう。
「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.2
// ==UserScript==
// @name SP Caution ⭐
// @namespace http://tampermonkey.net/
// @version 0.2
// @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 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>'+
'</div>'+
'<style>'+
'.c-button--circle--secondary { background: #000 !important; } '+
'#sp_panel { position: fixed; bottom: 100px; z-index: -1; '+
'right: calc(50vw - '+ lform_w +'px); '+
'font: bold 16px Meiryo; color: #fff; height: 60px; width: 230px; '+
'background: #000; border: 1px solid #ccc; border-radius: 4px; '+
'display: flex; justify-content: space-evenly; 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: 26px; width: 48px; '+
'margin: auto 0; padding: 1px 2px 0 6px; background: #000; '+
'border: 1px solid #ccc; border-radius: 4px;} '+
'#sp_time:hover { z-index: 2; } '+
'#sp_min { position: relative; left: -40px; bottom: -24px; '+
'margin-right: -34px; font-size: 11px; } '+
'#sp_min:hover { z-index: -1;} '+
'</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; }
} // 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 ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
