チェック中の箇所を編集画面に表示
「Edit At Once Am」は、閲覧中のブログ記事を編集画面に開く事ができます。 これで充分な場合が多いのですが、記事の修正箇所を見つけた後、すぐにその箇所を編集画面に開きたいと思う事があります。 編集画面に開いて目的の修正箇所に辿り着くまでに、時間は短い方が良いに決まっています。
「Edit At Once Am」の起動は「記事タイトル」の右クリックです。 画面全体の右クリックで起動させる様な方法は、ブラウザのコンテキストメニューを全て封じてしまう我儘ツールになるので、採用できません。 その判断から「記事タイトル」の右クリックという起動方法にしたのです。
一方、ショートカットでパネルと編集ボタンを表示する「Body Wcon OD」は、「記事タイトル」が見えない記事の下方を表示していても、編集画面を開けられます。 これは「Edit At Once Am」にはない特権です。
それを更に生かすと、長い記事の末尾箇所の修正で、編集画面を開いた時にその箇所を自動でスクロールして表示する事が出来ます。 スクロール位置を正確に再現できるかは判らないのですが、先ず試作してみました。
手法
ユーザーがブログ記事をスクロールして閲覧している場合、そのスクロール量は、比較的簡単に JavaScriptで取得できます。 画面の最上部を「0」として、下方に移動した量は「px」単位で得られます。
ユーザーが編集画面を開く「 」アイコンを押した時に、その時点のスクロール量を取得し、編集画面の「URL」のクエリ文字列にスクロール量を持たせます。
上はクエリ文字列の例で、「id=123」は記事のID（実際は11桁）です。 その後に追加した「edit_top=1200」がスクロール量です。
この様にクエリ文字で値を伝達するのは、「ブログ記事」と「編集画面」が別ドメインで、その間のデータの直接の受け渡しがセキュリティ上で出来ないからです。「編集画面」の側では、クエリ文字から「edit_top=1200」を受け取り、「編集枠」を下方に1200pxをスクロールして表示します。
実際は、編集枠は「iframe」で、記事の実データの読み込みに僅かの待機が必要で、「iframe」の中の「html」を更に取得して、それをスクロールさせるといった処理が必要です。 これをスムーズに行うのは結構苦労します。
これまで色々なツールで扱って来た処理コードで、平均的な処理能力のPCでは問題なく動作が出来ました。 ただ、旧世代の処理能力の劣るサブPCのテストで、編集画面は開いた後、スクロールが行われないという事が頻繁に生じ、それに対策をしました。
ver. 0.8 193行～
「body_h」は iframe内の「body」要素で、「getBoundingClientRect().height」はその要素の高さを取得しますが、iframeに記事データが読み込まれない間は iframeの高さが取得されます。
「iframeに記事データが読み込まれる」のを待機する事が、スクロールできるかどうかの鍵になるので、iframe（編集枠）の高さ「if_height」を先ず取得しておいて、それ以上の「body_h」が得られるまで、取得を繰り返して最大4sec待つ様にしています。
もし、それだけ待機しても記事データが読み込まれない遅い環境の場合は、スクロールは行われませんが、その場合も大変に困るという事はないでしよう。 テストでは、殆ど問題なく遅い環境でもスクロールが出来ました。
操作
ブログ記事のページ（ユーザー自身のブログ）で、
●「Ctrl+F7」のショートカットを押すと、ページヘッダー部に「Body Wcon OD」の操作パネルが表示されます。
▪このパネルは、再度「Ctrl+F7」を押すと消えます。
● 編集アイコン「 」を「左Click」すると、表示している記事の表示しているスクロール位置が、編集画面に表示されます。
スクロール位置の精度
スクロール位置の精度は、「Wysiwyg環境」が高度に保たれている必要があります。 アメーバの「デザイン幅で表示」は少し緩い仕様で、もちろん最低限の必要な条件ですが、行間隔がスキンによっては編集画面と実際の記事とで異なります。 そういった場合は、ズレが大きくなります。
以下のツールを導入すると、精度が高くなります。
「埋込みツイッター」は鬼門
アメーバの標準的な埋込み要素の中で、「ツイッター」の埋込みだけは大きく位置を狂わせる事が判っています。
下のサンプルで、「▶」の間隔がブログページ上の「埋込みツイッター」の表示の高さです。
この画面で「Body Wcon OD」の編集ボタンを押すと、下の様になります。
「▶」の行位置は正確に編集画面上に再現されています。 しかし、「▶」の間隔は大きく違い、それより下方の行は編集画面では繰り上がっています。
この様に、「埋込みツイッター」の下方の行を「Body Wcon OD」で開いた場合は、編集画面上で必ず上方にズレます。 これは、埋込みの編集画面上の表示と、実ページでの表示が全く異なるため、仕方がありません。
気付いた問題点はこれ位で、殆どの場合に、充分に納得できる精度で編集位置が表示されます。
操作マニュアル
扱い方の詳細は、以下を参照ください。
「Body Wcon OD」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Body Wcon OD 〕 ver. 0.8
// ==UserScript==
// @name Body Wcon OD
// @namespace http://tampermonkey.net/
// @version 0.8
// @description ブログページでスマホ表示を確認 ショートカット: Ctrl+F7
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @match https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?*
// @exclude https://ameblo.jp/*/image*
// @noframes
// @icon https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant none
// ==/UserScript==
if(document.domain=='ameblo.jp'){ // ブログページの場合
let help_url="https://ameblo.jp/personwritep/entry-12806003772.html";
document.addEventListener("keydown", check_key);
function check_key(event){
if(event.keyCode==118 && event.ctrlKey){ // Ctrl + F7
event.preventDefault();
if(document.querySelector('#BW_con')){
document.querySelector('#BW_con').remove(); }
else{
main(); }}} // check_key
function main(){
let org_w; // デフォルトの本文幅
org_w=document.querySelector('#entryBody').getBoundingClientRect().width;
let mw=localStorage.getItem('SmartH_I'); // ブログ本文 幅値 🔵
if(!mw){
mw=360; }
if(mw>org_w){
mw=org_w;
localStorage.setItem('SmartH_I', mw); } // ブログ本文 幅値をセット 🔵
let svg_edit=
'<svg class="BW_icon" width="26" height="26" viewBox="-1 -2 26 26">'+
'<path d="m19.6 9.2-4.9-4.9c-.2-.2-.2-.5 0-.7l1.8-1.8c.4-.4 1-.4 1.4 0L22.1 6c.4.4.4 '+
'1 0 1.4l-1.8 1.8c-.2.2-.5.2-.7 0zm-7-3.5-8.1 8.1L3 19.7c-.2.7.5 1.4 1.2 1.2l5.8-1.4 '+
'8.1-8.1c.2-.2.2-.5 0-.7l-4.9-4.9c-.1-.3-.5-.3-.6-.1z"></path></svg>';
let svg_help=
'<svg class="BW_help" width="22" height="22" 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 66C105 48 84 37 69 40M70 94C58 99 66 '+
'118 78 112C90 107 82 89 70 94z"></path></svg>';
let control=
'<div id="BW_con">'+
'<div id="page_title"> </div>'+
'<div id="BW_control">'+ svg_edit +
' ブログ本文幅 <span id="BW_disp"></span>'+
'<input id="BW_set" type="range" min="280" max="'+ org_w + '" value="360">'+
'<a href="'+ help_url +'" target="_blank" rel="noopener">'+ svg_help +'</a>'+
'</div>'+
'<style>'+
'#BW_con { position: fixed; top: 0; z-index: 4000; width: 100%; font: 16px Meiryo; '+
'display: flex; justify-content: space-between; align-items: center; color: #000; '+
'background: #fff; border: 1px solid #aaa; box-shadow: 0 8px 16px #00000040; }'+
'#page_title { padding: 10px 20px 4px; height: 28px; white-space: nowrap; '+
'font: normal 21px/26px Meiryo; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); '+
'background: #f4f6f7; border-right: 1px solid #ccc; position: relative; z-index: 0; } '+
'#page_title:hover { z-index: 1; } '+
'#BW_control { position: absolute; right: 0; padding: 5px 15px 3px 20px; '+
'height: 34px; background: #fff; border-left: 1px solid #ccc; } '+
'.BW_icon { width: 26px; height: 26px; vertical-align: -10px; padding: 2px; '+
'border: 1px solid #aaa; border-radius: 4px; background: #fff; fill: #000; } '+
'.BW_icon:hover { fill: red; border: 1px solid red; cursor: pointer; } '+
'#BW_disp { display: inline-block; width: 64px; padding: 2px 0 0; '+
'text-align: center; border: 1px solid #aaa; } '+
'#BW_set { width: 200px; vertical-align: -2px; margin: 0 20px; } '+
'#BW_set:focus { outline: 1px solid #2196f3; outline-offset: 5px; } '+
'.BW_help { vertical-align: -5px; fill: #2196f3; } '+
'._35xlqQQK { display: none; } '+
'</style>'+
'<style id="BW_style"></style>'+
'</div>';
if(!document.querySelector('#BW_con')){
document.body.insertAdjacentHTML('beforeend', control); }
let BW_disp=document.querySelector('#BW_disp');
BW_disp.textContent=mw+'px';
let BW_set=document.querySelector('#BW_set');
BW_set.value=mw;
let BW_style=document.querySelector('#BW_style');
BW_style.textContent=
'#entryBody { margin-left: auto; margin-right: auto; width: '+ mw +'px; }';
BW_set.addEventListener('input', function(){
mw=BW_set.value;
BW_disp.textContent=mw+'px';
BW_style.textContent=
'#entryBody { margin-left: auto; margin-right: auto; width: '+ mw +'px; }';
localStorage.setItem('SmartH_I', mw); }); // ブログ本文 幅値をセット 🔵
let target=document.head;
let monitor=new MutationObserver(catch_title);
monitor.observe(target, { childList: true });
catch_title();
function catch_title(){
let title_h; // タイトル部
let title_text; // 記事タイトル
let article=document.querySelector('.js-entryWrapper'); //記事全体
if(article){
if(article.querySelector('h1')){
title_h=article.querySelector('h1');
title_text=title_h.textContent; }
else if(article.querySelector('h2')){
title_h=article.querySelector('h2');
title_text=title_h.textContent; }
else if(article.querySelector('h3')){
title_h=article.querySelector('h3');
title_text=title_h.textContent; }}
let page_title=document.querySelector('#page_title');
if(title_text && page_title){
page_title.textContent=title_text; }
let BW_icon=document.querySelector('.BW_icon');
if(article && BW_icon){
let entry_id=article.getAttribute('data-unique-entry-id');
if(entry_id){
BW_icon.onclick=function(event){
event.preventDefault();
let path=
'https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id='+
entry_id +'&edit_top='+ to_top();
if(!event.shiftKey){
window.open(path, "_blank"); }
else{
window.location.href=path; }}}}
} // catch_title()
function to_top(){
let entryBody=document.querySelector('#entryBody');
let body_top=-(entryBody.getBoundingClientRect().top);
let top;
if(body_top<-60){
top=0; }
else{
top=Math.round(body_top) +60; }
return top; }
} // main()
} // ブログページの場合
if(document.domain=='blog.ameba.jp'){ // ブログ編集画面の場合
let searchParams=new URLSearchParams(window.location.search);
let to_top=searchParams.get('edit_top');
let retry=0;
let interval=setInterval(wait_target, 20);
function wait_target(){
retry++;
if(retry>200){ // リトライ制限 100回 4secまで
clearInterval(interval); }
let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); // 監視 target
if(editor_iframe){
clearInterval(interval);
scroll(editor_iframe); }}
function scroll(editor_iframe){
let if_height=editor_iframe.getBoundingClientRect().height;
let retry=0;
let interval=setInterval(wait_target, 20);
function wait_target(){
retry++;
if(retry>200){ // リトライ制限 100回 4secまで
clearInterval(interval); }
let body_h=
editor_iframe.contentDocument.body.getBoundingClientRect().height; // 監視 target
if(body_h>if_height){
clearInterval(interval);
let html=editor_iframe.contentDocument.documentElement;
html.scrollTop=to_top; }
}}
} // ブログ編集画面の場合
「Body Wcon OD」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Body Wcon OD」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
