自動操作を採り入れる
ver. 0.1 は、どうもあか抜けないインターフェイスで、やっている事は簡単なのに、無用にややこしく感じさせます。
JavaScriptはページ上のボタンを自動で押す事が出来るので、「デザイン幅で表示」の「OFF」➔「ON」を自動化しました。 ユーザーはただ結果を確認すれば済むだけになり、また編集画面のリロードも不要にしました。
全体のコード構成をかなり変更しましたが、シンプルなツールなので問題なく動作します。
自動処理は「setTimeout」が必要
自動処理で注意が要るのは、編集画面はネット上で動作するウェブアプリケーションで、動作が通信環境の影響を受ける場合があることです。「デザイン幅で表示」のボタンを押すと、画面に一瞬「ローディングマーク」が表示され、ここは適当なタイミングを見て処理を進める必要があると思われます。
ver. 0.2 140行
前半は、「デザイン幅で表示」のボタンを自動で押す処理です。
どうやら「ON」➔「OFF」ではなく「OFF」➔「ON」の時に「Wysiwyg情報」を生成するらしく、最初が「OFF」と「ON」の場合によって、処理を変えています。
後半は、ボタン操作後に、「Wysiwyg情報」を再取得してパネルの表示を更新しています。 最後の 2000（2sec）は、少しタイミングに余裕を持たせました。
簡素化されたインターフェイス
ボタン押下を自動したので、インターフェイスがとてもシンプルになりました。 下の画面から殆ど変わらない、簡単操作です。
「Wysiwyg情報」が削除された状態でない限り、パネルに現在の情報が表示され、「更新をリセット」を押すとリセットと情報の再取得 ➔ 更新した「Wysiwyg情報」が差換えられて表示されます。
ツールの詳細と使用方法
細かい仕様や扱い方は、前ページの操作マニュアルを参照ください。
「Doctor FoxⅡ」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Doctor FoxⅡ 〕 ver. 0.2
// ==UserScript==
// @name Doctor FoxⅡ
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 「デザイン幅で表示」の参照データをリセットする
// @author Ameba Blog User
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @exclude https://blog.ameba.jp/ucs/entry/srventrylist*
// @icon https://www.google.com/s2/favicons?sz=64&domain=ameba.jp
// @grant none
// ==/UserScript==
let set_items=[];
let wysig_style=localStorage.getItem('GRACEFUL_STORAGE:PC_EDITOR:inputLayoutStyle');
if(!wysig_style){
for(let k=0; k<5; k++){
set_items[k]=['', '']; }
panel_disp();
action(0); }
else{
detail();
panel_disp();
action(1); }
function detail(){
let wysig_all=wysig_style.replace('}}', '').split('{')[2];
let set_item=wysig_all.split('","');
for(let k=0; k<4; k++){
set_items[k]=set_item[k].split('":"'); }
set_items[4]=set_item[4].split('":');
set_items[2][1]=set_items[2][1].replace(/\\"/g, '"'); }
function panel_disp(){
let help_url="https://ameblo.jp/personwritep/entry-12803527558.html";
let help=
'<a class="DF_help" href="'+ help_url +'" target="_blank">'+
'<svg width="22" height="24" viewBox="0 0 150 150">'+
'<path fill="#fff" 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>'+
'<style>.DF_help { vertical-align: -6px; text-decoration: none; cursor: pointer; }'+
'</style></a>';
let panel=
'<div id="DF_panel2">'+
'<p class="d0">ストレージに登録されたWYSIWYG設定 '+ help +'</p>'+
'<p>skinCode：'+ set_items[0][1] +'</p>'+
'<p>useLayout：'+ set_items[1][1] +'</p>'+
'<p>fontFamily：'+ set_items[2][1] +'</p>'+
'<p>fontSize：'+ set_items[3][1] +'</p>'+
'<p>width：'+ set_items[4][1] +'</p>'+
'<p style="text-align: center">'+
'<input id="new_set2" type="submit" value="登録をリセット"> '+
'<input id="close_new_set2" type="submit" value="終了"></p>'+
'<p id="add_mess0" class="d2">'+
'▶ WYSIWYG設定が削除されています<br>'+
'<span class="d1">'+
'「登録をリセット」を押し WYSIWYG設定の再生成を試みてください</span></p>'+
'<p id="add_mess1" class="d2">'+
'▶ ダッシュボードで「Doctor FoxⅡ」をOFFにして 編集画面を終了します</p>'+
'</div>'+
'<style>'+
'#DF_panel2 { position: fixed; top: 30vh; left: calc(50% - 380px); z-index: 100; '+
'font: bold 16px/30px Meiryo; padding: 10px 20px; border: 1px solid #aaa; '+
'background: #fff; box-shadow: 10px 20px 40px #bac0c4; '+
'width: 620px; box-sizing: border-box; } '+
'.d0 { padding: 7px 0 0; height: 34px; margin: 12px 0 20px; text-align: center; '+
'color: #fff; background: #2196f3; } '+
'.d1 { color: #444; padding-left: 1em; font-weight: normal; } '+
'.d2 { color: red; } '+
'.DF_help { vertical-align: -6px; text-decoration: none; cursor: pointer; } '+
'#new_set2, #close_new_set2 { padding: 5px 20px 3px; color: #fff; '+
'border: 1px solid #aaa; border-radius: 4px; background: #2196f3; '+
'margin: 30px 0 10px; } '+
'#new_set2:hover, #close_new_set2:hover { background: #1565c0; } '+
'#add_mess0, #add_mess1 { display: none; } '+
'</style>';
if(document.querySelector('#DF_panel2')){
document.querySelector('#DF_panel2').remove(); }
document.body.insertAdjacentHTML('beforeend', panel);
} // panel_disp()
function action(n){
let new_set2=document.querySelector('#new_set2');
let close_new_set2=document.querySelector('#close_new_set2');
let add_mess0=document.querySelector('#add_mess0');
let add_mess1=document.querySelector('#add_mess1');
if(n==0){
add_mess0.style.display='block'; }
new_set2.onclick=function(){ // ストレージの登録を削除
localStorage.removeItem('GRACEFUL_STORAGE:PC_EDITOR:inputLayoutStyle');
for(let k=0; k<5; k++){
set_items[k]=['', '']; }
panel_disp();
setTimeout(()=>{
if(n==0){
add_mess0.style.display='none'; }
new_set2.style.display='none';
close_new_set2.style.display='none';
auto_check();
}, 200); }
close_new_set2.onclick=function(){ // 終了表示
setTimeout(()=>{
if(n==0){
add_mess0.style.display='none'; }
new_set2.remove();
close_new_set2.remove();
add_mess1.style.display='block';
}, 200); }
} // action()
function auto_check(){
let ch_buttom=document.querySelector('#applyStyleWidth');
if(ch_buttom){
if(ch_buttom.checked){
ch_buttom.click();
setTimeout(()=>{
ch_buttom.click(); }, 1000); }
else{
ch_buttom.click(); }}
setTimeout(()=>{
wysig_style=localStorage.getItem('GRACEFUL_STORAGE:PC_EDITOR:inputLayoutStyle');
if(!wysig_style){
for(let k=0; k<5; k++){
set_items[k]=['', '']; }
panel_disp();
action(0); }
else{
detail();
panel_disp();
action(1); }
}, 2000);
} // auto_check()
「Doctor FoxⅡ」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Doctor FoxⅡ」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
