ついおろそかになる記事の保存
過去記事を書き換えて新しい記事にすることが、私はとても多いです。 これは、技術系の記事が中心で、多くがシリーズ記事だからです。「記事タイトル」「ハッシュタグ」「テーマ」などがほぼ共通で、「新規作成」で同内容を設定するより、シリーズ記事の「複製」して「再編集」する方が、ずっと手間が省けるからです。
しかしこの方法は、ブログ記事編集画面に備わった「記事内容の自動バックアップ」が効きません。
「新規作成」の場合は、間違って編集画面を閉じても、編集画面を開くと「前回の編集」の内容を「復元」するかどうかを聞いて来ます。 この機能はとても有難いですが、「複製➔再編集」の場合は、編集画面を閉じると編集内容は消えて戻せません。
先週も、久しぶりにこの失敗をやってしまいました。(xx); 記事の関連情報を参照した複数のウインドウが不要になり、ウインドウを幾つか閉じました。 その中に、編集画面のウインドウが混ざっていたのでしょう。 後になって、編集画面を探してもありません。 長時間の編集をした記事が戻って来ないのです。
今回のことで、これを防ぐためのツールを作る決心をしました。
自動保存のツールの制作は...
「下書き保存」のボタンを一定時間ごとに押すツールは、JavaScriptを使うと簡単に出来ます。 これまでそれを作らなかったのは、少し躊躇があったと思います。
自動保存は、言いかえると「勝手に保存」する機能です。 編集内容の出来が悪くて、「編集前」の内容を残す場合がありますが、自動保存は元の方を残す事を出来なくします。 一般のエディターの様に「別名で保存」をしたければ、先に「複製」を行ってから編集しないと、気がついたら元の原稿が無くなっている事になります。
「自動保存」ツールは、この取り扱いが判るユーザーにしか勧められないと、尻込みがあったと思います。
で、安全策として、先ず「勝手に保存」するツールではなく、「保存した方が良いですよ」と、定期的に忠告するツールを作りました。 あくまで「忠告」するだけで、「保存」はユーザーが判断して行う仕様です。 少し手を加えれば、「勝手に保存」する仕様に変更出来るでしょうが、それは実際に使って見て考えます。
ツール名は「SP Caution ⭐」です。「⭐」マークは起動強化コード使用版です。
「SP Caution ⭐」のダイアグラム
下は、動作のダイアグラムです。 使用するタイマーメソッドは「setTimeout」で、「タイマー時間」を自由に設定できます。
「Start」❶ からタイマーが動き始め、指定時間で「アラーム」❷ を表示、ユーザーに「Pass」「Save」のどちらかの操作を促します。「アラーム表示」は無視しても構いませんが、どちらかを押すまで消えません。
❸ で「Pass」を押すと、「保存」をせずタイマーがリセットされます。 これは「忠告無視」の選択で、再び ❶ に戻ってタイマーが動き始めます。
❸ で「Save」を押すと、「下書き保存」が実行されます。 タイマーがリセットされ、やはり ❶ に戻ってタイマーが動き始めます。
ユーザーはタイマー時間ごとに「Save」か「Pass」を押す事を迫られます。
また、「アラーム」が表示されない間に、ユーザーが自発的に「下書き保存」を押すかも知れません。 この場合、タイマーの残り時間後の「Save」は無意味ですから、自発的な保存操作も ❶ の場所に戻り、タイマーをリセットしてスタートします。
以上は、常に「下書き保存」をバックアップとして利用し、編集が完了すれば「投稿する」を押して「公開」を選択するか、編集を一時中断するなら「下書き保存」を押してから「編集画面」を閉じる事になります。 アメーバのブログ編集の基本が判っていれば、ただ「忠告」するだけのツールですから、難しくはないでしょう。
もうひとつの便利な配慮
「SP Caution ⭐」は、必然的に「下書き保存」の回数を増やします。 下書き保存をすると、その度に「保存しました」の確認ウインドウが表示されます。 この「別タブ」は増殖するので、消すのは手間です。
そこで、この確認ウインドウ（タブ）を自動的に消す機能を追加しました。 別ページで動作するスクリプトを「SP Caution ⭐」に合併した形です。
「SP Caution ⭐」を常駐させると、「下書き保存」後の確認ウインドウが自動で消える様になります。 実用上問題ないと思いますが、これが困る場合はツールの適用先を削るだけで、機能を止めることが出来ます。
（確認ウインドウの適用先削除は ver.0.2 以降はできません）
「SP Caution ⭐」のデザインと操作
下は、 「SP Caution ⭐」を常駐して「再編集」の画面を開いたところです。（このツールは「新規作成」の画面では起動しません）
ツールの起動を示すため、「下書き保存」のボタン ❶ は黒背景の表示になります。
「編集画面」を開きタイマー時間に達すると、上の編集パレット下端上に、黒背景の「アラーム表示」が出ます。
❶「下書き保存」を「Click」して「保存」すると「アラーム表示」が消えます。
❷「SAVE」ボタンを「Click」すると、「下書き保存」が実行されて「アラーム表示」が消えます。 これは ❶ の「Click」操作と全く同じことです。
❸「PASS」ボタンを「Click」すると、保存せずに「アラーム表示」が消えます。
● ❶ ❷ のボタンは「Ctrl+Click」すると、「下書き保存」が別タブで行われ、しかも現在の編集画面が隠される事がないので、とても快適です。
タイマー時間の設定
❹「タイマー時間の設定」ボックスは、初期値「10分」です。 マウスを乗せるとスピナーが表示され、タイマー時間を「2分」～「30分」の間で設定できます。 また、このボックスにキャレットを入れると、上の範囲外の任意の値を設定できます。
設定した「タイマー時間」はローカルストレージに登録され、次回の再編集画面でも再現されます。
●「タイマー時間」の設定が「アラーム表示」を待たないと出来ないのは不便です。 そこで、❶「下書き保存」ボタンを「右Click」すると、タイマー時間と無関係に「アラーム」を表示できる様にしています。
▪ この操作で「アラーム」を表示させた場合、タイマーはリセットされます。
▪「アラーム表示」を閉じるには ❹「PASS」を押すのが妥当でしょう。
今後の改善
実際に使用すると、改善すべき部分が出て来るかも知れません。
「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.1
// ==UserScript==
// @name SP Caution ⭐
// @namespace http://tampermonkey.net/
// @version 0.1
// @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);
sp_panel.style.zIndex='-1';
auto_request(); }
} // auto_backup()
let path_name=location.pathname;
if(path_name.includes('srventryupdatedraft.do')){ // 下書き保存確認画面
window.close(); }
「SP Caution ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「SP Caution ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
