Firefoxで時々生じる問題
私のブログのテスト環境ですが、ブログスキンを変更したのがきっかけで、「デザイン幅で表示」がエラー動作を始めました。 これまでに何度も経験した事ですが、確実な直し方が判りません。
「デザイン幅で表示」にチェックを入れると、必ず「283px」の幅になります。 この値の由来は不明ですが、これでは編集ができません。
システムが、ブログページの「フォント」「本文幅」などの情報を編集画面に持ち込んで「デザイン幅で表示」を実現しますが、その情報の取得に失敗した結果です。
◎ Firefoxでのみ生じ、Chrome / Edgeでは生じない。
◎ Cookie全削除 ➔ 編集画面リロード ➔ ログインやり直しを繰り返すと、その度に「情報の再取得」が行われる。 それを数回行うと、何かの拍子に取得に成功する。
◎ 情報の取得成功は確率の問題で、たまに上手く行く程度。
◎ 一時は特定のCookieの削除で再取得を効率良くできたが、Firefoxのインターフェイス変更で、最近はやり難くなった。
◎ 拡張機能を全てOFFにしても、再取得ができるわけではなく、無関係らしい。
この問題が生じる度に解決方法を探して来ましたが、結局は先の操作を繰り返すしか方法が無い様です。
最近、Wysiwyg情報の保存先のローカルストレージを発見したので、今回は「強制的」にストレージの登録を修復するツール「Doctor Fox」を作りました。 何度もCookieを削除する必要は、これでなくせます。
Wysiwyg情報のローカルストレージ
Wysiwyg情報を保存した「Cookie」は見あたりません。 一方で、「Cookie」を削除すると Wysiwyg情報の再取得が行われる事は判っています。
Wysiwyg情報はローカルストレージの以下のアイテム名で記録されています。
➔「https://blog.ameba.jp」
➔➔「GRACEFUL_STORAGE:PC_EDITOR:inputLayoutStyle」
ちなみに私のブログ環境では、下の様な情報が記録されています。
最後に「"width":636」がありますね。 これらが、通常表示編集画面の「body」に設定され、Wysiwyg環境が構成されます。
DevToolsでこのアイテムだけ削除して編集画面をリロードし、「デザイン幅で表示」を指定すると、やはり情報の取得処理が行われます。 Cookie削除は再取得の引き金でしかなく、この情報の再取得時に問題を生じる様です。
また、取得した Wysiwyg情報はストレージに記録され、それ以降はその値を参照して「デザイン幅で表示」が機能します。 エラー値の幅は、何もしなければ一向に改善されないのは、取得に失敗した値を参照し続けるからでしょう。
ローカルストレージの値を修復する
ストレージのデータを調べると、「width」値だけ間違って設定されている様です。 この値だけ修正すれば良く、DevToolsを利用出来るユーザーは修正可能ですが、そこはだれでも修正出来る様にツールのインターフェイスで補います。
このツールは「Firefox」での使用を前提としていますが、Chrome / Edgeでも使えます。 例えば特殊なスキンで、Wysiwyg情報の取得が上手く行かない場合は、このツールで本文幅に完全に一致した編集行幅を設定できます。
一旦修正したら、これはシステムが正常に Wysiwyg情報を取得出来た場合と、全く同じになります。 つまり、これはシステムのエラーを修復するツールです。
「Doctor Fox」の扱い方
「Doctor Fox」は非常駐型ツールで、「Tampermonkey」にインストールしても、通常は「OFF」です。 まれにしか出番はありませんが、スキンを変更した時などに、ブログの本文幅が正しく編集画面に反映しない時に「ON」にして修正します。
修正処理は、このツールを「ON」にして「編集画面」を開きます。新規作成の画面でも、再編集の画面でもOKです。 何かの文字が記入されていると Wysiwygの確認が出来るので、テスト用の記事があればベストです。
修復理前
修正前は、異常な編集画面の幅になっています。
●「Tampermonkey」のダッシュボードで「Doctor Fox」を「ON」にして、同じ編集画面を開きます。
▪ 編集画面が開いて僅か待つと、2個の小パネルが表示されます。
● アラートパネルには「ブログ本文幅」が表示されるので、これを覚えておきます。
●「OK」を押すと、下の「操作パネル」だけになります。
▪ このパネルは現在の編集画面に設定された「デザイン幅」を表示し、ユーザーの修正を行うパネルです。
（実際のエラー登録値は「283px」ですが、両端の余裕「16px」を引いた「267px」を表示しています）
❶ は、現状の本文幅の値の表示です。（この編集画面を開いた時の値）
❷ の値は、スピナーによって「300px」～「編集枠幅」までの間で調節できます。
▪ ❷ の調節に合わせて、編集画面の幅が変化します。 文字の入力があれば、調節に従って行端で文字列が送られる位置が変化するのを確認できます。
● 最初に表示された「ブログの本文幅」の値に、❷ を設定します。
▪編集中の文書を、公開したブログ画面と2画面で比較して、設定を確認できます。
● 修正の結果に間違いがなければ、❸「設定を変更」を押します。
▪パネルに「編集画面」のリロードを求める表示が出ます。
● ブラウザの「 」ボタンを押して「編集画面」をリロードします。
▪ 先と同様に「アラートパネル」「操作パネル」が表示されますが、修復の結果を確認してください。 問題があれば、何度でも再修正する事が可能です。
▪ 問題がなければ「編集画面」を閉じて「Tampermonkey」のダッシュボードで、「Doctor Fox」を「OFF」にします。
まとめ
詳しく書きましたが、「アラートパネル」に表示された値を「操作パネル」で設定して、「設定を変更」のボタンを押してリロードするだけです。
この修正を一度すると、後は何もする必要はありません。 スキンを変更したり、ブラウザの Cookie削除をしたりすると、このツールがまた必要になるかも知れません。
「Doctor Fox」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 右サイドバーの マークのボタンを1度押してください。
コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Doctor Fox 〕 ver. 0.1
// ==UserScript==
// @name Doctor Fox
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author Ameba Blog User
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @match https://ameblo.jp/*/entry-preview/desktop
// @exclude https://blog.ameba.jp/ucs/entry/srventrylist*
// @icon https://www.google.com/s2/favicons?sz=64&domain=ameba.jp
// @grant none
// ==/UserScript==
if(location.hostname=='blog.ameba.jp'){
let wysig_style=localStorage.getItem('GRACEFUL_STORAGE:PC_EDITOR:inputLayoutStyle')
if(!wysig_style){
alert("WYSIWYG設定が読めませんでした"); }
else{
let pos;
let width;
let width_tail
let wysig_all=wysig_style.split(',');
width_get();
user_set();
function width_get(){
let wysig_width_s;
pos=0;
for(let k=0; k<wysig_all.length; k++){
if(wysig_all[k].includes('width')){
wysig_width_s=wysig_all[k];
pos=k; }}
width=(wysig_width_s.match(/\d+/g)[0]) -16;
width_tail=wysig_width_s.slice(11); }
function user_set(){
let panel=
'<div id="DF_panel">'+
'<p>ストレージに登録された「デザイン幅」： <span id="design_w"></span> px</p>'+
'<p>ユーザーによる修正値の「デザイン幅」：<input id="design_wset" type="number"></p>'+
'<p style="text-align: center"><input id="new_set" type="submit" value="設定を変更"></p>'+
'<p id="add_mess">▶ 設定を有効にするには編集画面をリロードします</p>'+
'</div>'+
'<style>'+
'#DF_panel { position: fixed; top: 40vh; left: calc(50% - 350px); z-index: 100; '+
'font: bold 16px/30px Meiryo; padding: 10px 20px; border: 1px solid #aaa; '+
'background: #fff; box-shadow: 10px 20px 40px #bac0c4; } '+
'#design_wset { width: 60px; padding: 2px 6px 0 10px; margin-left: 4px; } '+
'#new_set { padding: 5px 20px 3px; color: #fff; '+
'border: 1px solid #aaa; border-radius: 4px; background: #2196f3; '+
'margin: 30px 0 10px; } '+
'#new_set:hover { background: #1565c0; } '+
'#add_mess { color: red; display: none; }'+
'</style>';
if(!document.querySelector('#DF_panel')){
document.body.insertAdjacentHTML('beforeend', panel); }
let design_w=document.querySelector('#design_w');
let design_wset=document.querySelector('#design_wset');
let new_set=document.querySelector('#new_set');
if(design_w && design_wset && new_set){
design_w.textContent=width;
design_wset.value=width;
setTimeout(()=>{
let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){ // iframe読込みが実行条件
let iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
let iframe_body=iframe_doc.querySelector('body.cke_editable');
if(iframe_body){
let max_width=editor_iframe.getBoundingClientRect().width - 32;
design_wset.max=max_width;
design_wset.min=300;
design_wset.addEventListener('input', function(){
iframe_body.style.width=(design_wset.value/1 + 16)+'px'; });
}}}
}, 2000);
new_set.onclick=function(){
let new_set_width='"width":'+ (design_wset.value/1 + 16) + width_tail;
wysig_all[pos]=new_set_width;
let new_wysig_all=wysig_all.join(',');
localStorage.setItem('GRACEFUL_STORAGE:PC_EDITOR:inputLayoutStyle', new_wysig_all);
let add_mess=document.querySelector('#add_mess');
if(add_mess){
setTimeout(()=>{
add_mess.style.display='block';
}, 1000); }}
}} // user_set()
}
} // blog.ameba.jp
if(location.hostname=='ameblo.jp'){
let retry=0;
let interval=setInterval(wait_target, 500);
function wait_target(){
retry++;
if(retry>20){ // リトライ制限 20回 10sec
clearInterval(interval);
alert("● 再度 編集画面をリロードしてみてください"); }
let target=document.querySelector('#entryBody'); // 監視 target
if(target){
clearInterval(interval);
measure(); }}
function measure(){
let entrybody=document.querySelector('#entryBody');
if(entrybody){
let entry_width=entrybody.getBoundingClientRect().width;
alert(entry_width); }}
} // ameblo.jp
「Doctor Fox」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Doctor Fox」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
