スクロールボックスを一時的に全開 にする
アメブロの編集画面でコード表示枠を掲載するユーザーは少なく、このページで紹介するツールの需要はとても少ないでしょう。 しかし、コードの凡例は何かの役に立つこともありますし。
このツールは、スクロールボックス（スクロールバーが表示されるコード表示枠などのページ上の要素）を一時的にスクロールせずに全てが表示される状態（高さがボックス内容の高さ）にするツールです。
ヒットした文字列にアプローチできない問題
私が制作した編集画面の検索ツール「S-R in Editor ⭐」で、スクロールするタイプの「コード表示枠」（pre枠）内で文字列がヒットした時に、その文字列にアプローチできない事が判りました。 この解決に、このツールが必要になりました。
下は「S-R in Editor」で「interval」の文字列を検索した際に、「コード表示枠」の中に幾つかヒットして、それを順に表示している所です。
❶ のヒット語は ❷ のスクロール位置を見るとコード全体の中頃にあります。 検索前のスクロール位置はコードの先頭を表示していますが、検索ヒット語を下方に追って行くと、上図の様に自動的にスクロールされ、検索された文字列が表示されます。
この表示仕様によって、スクロールボックス内で隠れているヒット文字列も、全て目視で確認ができます。
しかし、この ❶の語を修正しようと ❸のあたりをマウスでクリックしてキャレットを入れようとすると、スクロール位置が ❹の先頭位置に戻ってしまいます。
これは「S-R in Editor」の仕様で、ヒットのハイライト表示と、実際の編集対象の文書は別のもので、キャレットを入れる段階で差替えが行われるからです。 キャレットを入れる位置がスクロールボックスの中でなければ、差換えによって文書の位置が変わる事はないので、これは特殊な場合と言えます。
（Chromeの標準の検索機能は差換えを行わないので、この問題は生じません。）
この様なスクロールボックスの問題は、一時的に（上下方向形だけ）スクロールしない表示にすれば避けられます。 そこで「Scrollbox Fixer ⭐」を制作したわけです。
「Scrollbox Fixer ⭐」の 操作
「Scrollbox Fixer ⭐」をON/OFFするショートカットは「Ctrl+F7」です。 ただし、「通常表示」で、漢字変換はOFFでないとショートカットが動作しません。
ツールが起動すると、編集枠の上部に ❺「▢ Scrollbox Fixer」の表示が出ます。
次に、解除するスクロールボックス内を「Ctrl+左クリック」します。 これで、上図の様に内容が全て表示される高さにボックスが変わります。 また、対象のボックスはグリーンの枠が表示されます。
● 拡張できるボックスは 1個だけで、同時に複数を拡張する事はできません。 複数のボックスを処理する場合は、別々に処理します。
● 拡張したボックスを元に戻すには、再度「Ctrl+左クリック」します。 あるいは、「Ctrl+F7」でこのツールを終了した場合も、ボックスは元に戻ります。
● このツールが関与するのは、ボックスの拡張 / スクロール表示の切換えだけです。 ボックス内部の加筆・修正は、通常の通り行われて保存されます。
●「通常表示」で編集を終了時に、このツールでボックスを拡張をしたまま終了した場合は、自動的に本来のスクロールデザインに戻して終了します。
●「HTML表示」で編集を終了をできなくしています。 これは、ボックスを拡張したまま終了する間違いを避けるためです。
● このツールのON/OFFや全ての操作は「HTML表示」では無効です。「通常表示」でボックスを拡張したまま「HTML表示」に移動し「通常表示」に戻った場合は、拡張した状態を再現する様にしています。
●「Scrollbox Fixer ⭐」は、常駐使用が可能ですが、通常は必要としない場合が多く、必要な場合にのみONとして使用する扱いが適当と思います。
「Scrollbox Fixer ⭐」を使用するには
「Scrollbox Fixer ⭐」は Chrome / Edge / Firefoxの拡張機能「Tampermonkey」上で動作します。 このツールは「アメーバブログ編集画面」で動作し、起動コードを強化しているので、ツール名に「⭐」マークを入れています。
このツールはアクティブなブログユーザにしか需要はないと思われますが、以下に簡単な導入手順を説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Scrollbox Fixer ⭐ 〕 ver. 0.1
// ==UserScript==
// @name Scrollbox Fixer ⭐
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 「通常表示」上のスクロールボックスを編集処理し易くする 「Ctrl+F7」
// @author Ameba Blog User
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @exclude https://blog.ameba.jp/ucs/entry/srventrylist.do*
// @grant none
// ==/UserScript==
let mode=0;
let box_mode=0; // boxの状態
let box_i; // boxの選択
let retry=0;
let interval=setInterval(wait_target, 100);
function wait_target(){
retry++;
if(retry>10){ // リトライ制限 10回 1sec
clearInterval(interval); }
let target=document.getElementById('cke_1_contents'); // 監視 target
if(target){
clearInterval(interval);
main(); }}
function main(){
let editor_iframe;
let iframe_doc;
let iframe_body;
let wysiwyg; // 通常表示の iframe内 html
let target=document.getElementById('cke_1_contents'); // 監視 target
let monitor=new MutationObserver( catch_key );
monitor.observe(target, {childList: true}); // ショートカット待受け開始
catch_key();
function catch_key(){
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){ // WYSIWYG表示が実行条件
when_back();
iframe_doc=editor_iframe.contentWindow.document;
iframe_doc.addEventListener('keydown', check_key); // iframe内
document.addEventListener('keydown', check_key); // iframe外
function check_key(event){
if(event.ctrlKey && event.keyCode==118){ // ショートカット「Crtl+F7」
event.stopImmediatePropagation();
if(mode==0){
mode=1;
sign();
box_change(); }
else if(mode==1){
mode=0;
sign_clear();
box_close(); }}}}
before_end();
} // catch_key()
function when_back(){
iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
iframe_body=iframe_doc.querySelector('body');
if(iframe_body){
let target_box=iframe_body.querySelectorAll('.open_box');
if(target_box.length>0){
mode=1;
box_mode=1;
sign();
box_change(); }
else{
mode=0;
box_mode=0; }}}}
function box_change(){
let target_if= iframe_doc.querySelector('body'); // 監視 target_if
let monitor_if=new MutationObserver(change);
monitor_if.observe(target_if, {childList: true, attributes: true});
function change(){
iframe_body=iframe_doc.querySelector('body');
let target_box=iframe_body.querySelectorAll('div');
for(let i=0; i<target_box.length; i++){
target_box[i].onclick=function(event){
if(event.ctrlKey){
event.preventDefault();
change_action(target_box[i], i); }}}
function change_action(box, index){
if(box_mode==0 && mode==1){
box_mode=1; // boxのScroll設定を外す
let style_set=window.getComputedStyle(box, null);
if(style_set.getPropertyValue('overflow')){
if(style_set.getPropertyValue('overflow')=='scroll' ||
style_set.getPropertyValue('overflow')=='auto' ||
style_set.getPropertyValue('overflow')=='overlay'){
box_i=index;
box.classList.add('open_box'); }}
else if(style_set.getPropertyValue('overflow-y')){
if(style_set.getPropertyValue('overflow-y')=='scroll' ||
style_set.getPropertyValue('overflow-y')=='auto' ||
style_set.getPropertyValue('overflow-y')=='overlay'){
box_i=index;
box.classList.add('open_box'); }}}
else{
if(index==box_i){
box_mode=0; // boxのScroll設定を元に戻す
box.classList.remove('open_box'); }}
}}} // box_change()
function box_close(){
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){
iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
iframe_body=iframe_doc.querySelector('body');
if(iframe_body){
box_mode=0;
let target_box=iframe_body.querySelectorAll('.open_box');
for(let i=0; i<target_box.length; i++){
target_box[i].classList.remove('open_box'); }}}}}
function sign(){
monitor.disconnect(); // 起動時セットアップを MutationObserverに反応させない
let css=
'#cke_1_contents { display: flex; flex-direction: column; } '+
'#disp_sf { display: none; margin: 0 0 9px; padding: 4px 0 2px; '+
'font-size: 16px; color: #fff; background: green; }';
let disp=document.createElement("div");
disp.setAttribute("id", "disp_sf");
disp.innerHTML=" ▢ Scrollbox Fixer";
let style=document.createElement('style'); // disp_sf のデザインを指定
style.setAttribute("id", "sf_style");
style.innerHTML=css;
if(!target.querySelector('#sf_style')){
target.appendChild(style); }
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){
if(!target.querySelector('#disp_sf')){
target.insertBefore(disp, editor_iframe); }}
target.querySelector('#disp_sf').style.display='block';
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){
iframe_doc=editor_iframe.contentWindow.document;
iframe_body=iframe_doc.querySelector('body');
let box_style= iframe_doc.createElement('style'); // box のデザインを指定
let css_box=
'.open_box { outline: 2px solid green !important; height: auto !important; }';
box_style.setAttribute("id", "box_style");
box_style.innerHTML=css_box;
let iframe_html=iframe_doc.getElementsByTagName('html')[0];
if(!iframe_html.querySelector('#box_style')){
iframe_html.appendChild(box_style); }}
monitor.observe(target, {childList: true}); }
function sign_clear(){
if(target.querySelector('#disp_sf')){
target.querySelector('#disp_sf').style.display='none'; }} // 起動表示を非表示
function before_end(){
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
var submitButton=document.querySelectorAll('.js-submitButton');
submitButton[0].addEventListener("click", all_clear, false);
submitButton[1].addEventListener("click", all_clear, false);
function all_clear(){
if(!editor_iframe){ //「HTML表示」編集画面の場合
alert("⛔ Scroollbox Fixer が処理を終了していません\n\n"+
" 通常表示画面に戻り 編集を終了してください");
event.stopImmediatePropagation();
event.preventDefault(); }
if(editor_iframe){ //「通常表示」編集画面の場合
if(box_mode!=0){
mode=0;
box_mode=0;
box_close(); }}
}} // before_end()
} // main()
「S-R in Editor ⭐」の紹介
このページの「Scrollbox Fixer ⭐ 」は、そもそも自製のブログ編集画面での検索機能「S-R in Editor ⭐」の使用上で必要になったツールです。 Chrome 標準の検索機能なら「pre枠」がスクロールしても、問題が生じません。
しかし私が「S-R in Editor ⭐」の方を優先して使用するのは、ブラウザ標準の検索機能では「置換」が出来ないからです。 標準検索機能は「HTML表示」でもヒット文字列のハイライト表示が可能で、多くの点で優れています。 しかし「置換」が必要になった場合は、私が知る限り使えるツールは「S-R in Editor ⭐」だけです。
以下に最新版があるので、「置換」処理を必要な場合はぜひ参考にしてください。
