「保存エラー」の表示を適確に
「投稿する」を押して記事データを送信した時は、送信の確認画面が表に出るので、万が一送信エラーがあった場合は、間違いなく気付けます。
一方、「下書き保存」を押して保存エラーがあった場合も、「下書き保存の確認画面」が同様に表に出て、そのエラーを見落とす事はないでしょう。 しかしながら「SP Caution」の推奨する方法ですが、「下書き保存」ボタンやパネルの「SAVE」ボタンを「Ctrl+左Click」する操作では、「下書き保存の確認画面」が表に出ません。 ブラウザウインドウのタブを見ていれば、保存エラー時は確認画面のタブが消えない事や、「SP Caution」のパネルが消えない事で異常に気付くのですが。
という事で、保存エラーの見落としは、実際は起こり難いと思って来たのですが、今回のコードの見直しに際し、もう少し「エラー表示」を確実にする事にしました。
方針
「保存エラー」の場合
「下書き保存の確認画面」で「保存エラー」が表示された場合、編集画面の「下書き保存」ボタンと、「SP Caution」のパネルの「SAVE」ボタンを「赤背景」にして、確実にエラーに気付く様にする。
下は、「文字数超過エラー」のポピュラーなエラーです。 他にも「保存エラー」になる場合があるかも知れません。 アメーバのサーバーとの通信は成立し、システムが保存できない返答を返して来た状態です。
◎確認画面上に「.p-error」のエラー表示要素があれば、「編集画面」の「下書き保存」と「SAVE」ボタンを「赤色」にして、エラーを表示します。
◎更に、エラーのフラグとして、「SAVE」ボタンに「z-index: 0」を指定します。
◎正常保存の場合は「.entryComplete」という要素が生成され、それを確認して「編集画面」の「下書き保存」と「SAVE」ボタン保存ボタンを「黒色」にします。
◎同時に、「SP Caution」のパネルを非表示にします（これはこれまでのコードの通りです）
◎更に、保存成功のフラグとして、「SAVE」ボタンに「z-index: 1」を指定します。
「通信のエラー」などの場合
ユーザー側でネット接続が切断されたり、アメーバ側のシステムメンテ時や、サーバーに問題が生じた場合などでは、通信が成立していないので、エラー報告も戻って来なくなります。
この様な状況に対応するには、「保存成功のフラグが戻って来ない事」を判定して、ユーザーに知らせる必要があります。
◎「下書き保存」を押して 5sec後に、「SAVE」ボタンを調べ、フラグが「z-index: 0」なら保存不成功と判断して、「下書き保存」と「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.6
// ==UserScript==
// @name SP Caution ⭐
// @namespace http://tampermonkey.net/
// @version 0.6
// @description 編集画面の自動保存
// @author Ameblo Writer User
// @match https://blog.ameba.jp/ucs/entry/srventryupdateinput*
// @match https://blog.ameba.jp/ucs/entry/srventryupdatedraft.do
// @match https://blog.ameba.jp/ucs/entry/srventryinsertinput.do
// @grant none
// ==/UserScript==
let path_name=location.pathname;
if(path_name.includes('srventryupdateinput')){ // 再編集の編集画面
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>'+
'.p-submit__container > .js-submitButton[publishflg="1"] { background: #000; } '+
'#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 draft=document.querySelector('.js-submitButton[publishflg="1"]');
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(){
draft.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); }); // 設定を更新 🔵
draft.oncontextmenu=function(){
clearTimeout(alarm);
save();
return false; }
draft.onclick=function(){
clearTimeout(alarm);
auto_request();
setTimeout(()=>{
if(sp_save.style.zIndex=='1'){ // 正常終了の場合
sp_save.style.zIndex='0'; // リセット
red(0); }
else{
sp_save.style.zIndex='0'; // リセット
red(1); }
}, 5000 ); } // 下書き送信 5sec後に成否をチェック
function red(n){
let sp_save=document.querySelector('#sp_save');
if(sp_save){
if(n==1){
sp_save.style.background='red'; }
else{
sp_save.style.background=''; }}
let draft=document.querySelector('.js-submitButton[publishflg="1"]');
if(draft){
if(n==1){
draft.style.background='red'; }
else{
draft.style.background='#000'; }}}
} // auto_backup()
} // 下書き編集画面
if(path_name.includes('srventryupdatedraft.do')){ // 下書き保存確認画面
let Complete=document.querySelector('.entryComplete');
if(Complete){
let sp_panel=window.opener.document.querySelector('#sp_panel');
let sp_save=window.opener.document.querySelector('#sp_save'); // 保存の成否フラグ
if(sp_panel && sp_save){
red(0);
sp_panel.style.zIndex='-1';
window.close(); }}
let p_error=document.querySelector('.p-error');
if(p_error){
red(1); }
function red(n){
let sp_save=window.opener.document.querySelector('#sp_save');
if(sp_save){
if(n==1){
sp_save.style.zIndex='0'; // 下書き保存 不成功の通知フラグ
sp_save.style.background='red'; }
else{
sp_save.style.zIndex='1'; // 下書き保存 成功の通知フラグ
sp_save.style.background=''; }}
let draft=window.opener.document.querySelector('.js-submitButton[publishflg="1"]');
if(draft){
if(n==1){
draft.style.background='red'; }
else{
draft.style.background='#000'; }}}
} // 下書き保存確認画面
if(path_name.includes('srventryinsertinput')){ // 新規編集の編集画面
button_disp();
function button_disp(){ // 起動表示と警告ダイアログ
let lform=document.querySelector('.l-form');
let lform_w=(lform.clientWidth)/2;
let disp=
'<div id="sp_panel">'+
'新規作成の編集画面の場合は<br>未保存記事の復元が可能です'+
'</div>'+
'<style>'+
'.js-submitButton[publishflg="1"] { background: #000 !important; } '+
'#sp_panel { position: fixed; bottom: 100px; z-index: -1; '+
'right: calc(50vw - '+ lform_w +'px); padding: 6px 10px 4px; '+
'font: normal 16px/20px Meiryo; color: #fff; height: auto; width: 210px; '+
'background: #000; border: 1px solid #ccc; border-radius: 4px; '+
'display: flex; justify-content: space-between; align-content: center; } '+
'</style>';
if(!document.querySelector('#sp_panel')){
document.body.insertAdjacentHTML('beforeend', disp); }
} // button_disp()
let draft=document.querySelector('.js-submitButton[publishflg="1"]');
let sp_panel=document.querySelector('#sp_panel');
if(draft && sp_panel){
draft.onmouseenter=()=>{
sp_panel.style.zIndex='20'; }
draft.onmouseleave=()=>{
sp_panel.style.zIndex='-1'; }}
} // 新規編集の編集画面
「SP Caution ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「SP Caution ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
