編集画面の本文幅を編集中に変更する「Body Wcon」/ JavaScript

編集画面版の「Body Wcon OD」

ブログページで本文幅を可変表示する「Body Wcon OD」を制作して、同様の機能を「編集画面」の「プレビュー画面」に実装することを考えました。 しかし、良く考えれば、「プレビュー画面」より「編集画面」に実装した方が早い。

特殊フォントの指定やツイッター呼込みの確認などの他は、「プレビュー表示」は殆ど使う必要がなく「通常表示」で足ります。 スマホ表示の「プレビュー」は、機種によって表示結果は変わって来るので、これもあくまで「アバウト」なものです。

となると、「編集画面」の「通常表示」で本文幅を調節できれば、「プレビュー」を開くより素早く、アバウトですがスマホ表示を確認出来ます。 行端の自動改行のチェック機能としての利用は、「編集画面」に実装するとより有効になります。 編集箇所の本文幅を瞬間に切替えて比較できるからです。

「デザイン幅で表示」のチェックボタンで起動

このツールの機能を必要とするユーザーは限られると思うので、ツール名は「Body Wcon」として、独立したツールとしました。

「デザイン幅で表示」のチェックボタンを「OFF」にすると、編集枠の幅は左右いっぱいに拡張します。 この表示はほぼ意味のないものです。 そこで「OFF」の状態にすると「Body Wcon」が起動し、「ON」にすると「Body Wcon」がOFFになる様にしました。 

●「通常表示」の編集画面で「デザイン幅で表示」のチェックを「OFF」にします。

▪「Tampermonkey」上で「Body Wcon」を常駐させると、「デザイン幅で表示」のチェックボックスやラベルは、本来より少し左寄りの配置に変わります。

●「チェックボタン」のみを残し、他の部分は下の様に変わります。

▪左端は編集枠内の「本文幅」の値を表示します。

▪「コントロール」の最大値は現在の編集枠を全て使う幅、最小値は 280pxです。

●「コントロール」をドラッグする事で、自由に「本文幅」を変更できます。

▪「コントロール」にフォーカスがある場合は「⇦」「⇨」キーで調節できます。

▪ 幅値はローカルストレージに記録され、次回の編集時にも再現されます。 

●「チェックボックス」にチェックを入れると「Body Wcon」が終了します。 編集枠の幅は、本来の「デザイン幅で表示」の状態に戻ります。

「Body Wcon」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕 右サイドバーの   マークのボタンを1度押してください。

　コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 Body Wcon 〕 ver. 0.1

// ==UserScript==
// @name         Body Wcon
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  編集画面「デザイン幅で表示」のOFF時に幅コントロール
// @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 editorStyle=document.querySelector('.p-editorStyle');
if(editorStyle){
    editorStyle.style.width='250px'; // 固定デザイン

    let applyStyleWidth=document.querySelector('#applyStyleWidth');
    if(applyStyleWidth){
        applyStyleWidth.addEventListener('input', function(){
            if(applyStyleWidth.checked){
                show_off(); }
            else{
                show_on(); }
        }); }}



function show_on(){
    let bwidth=localStorage.getItem('BodyWcon'); // モバイル　ディスプレイ幅値 🔵
    if(!bwidth){
        bwidth=360; }

    let cont=
        '<div id="con_container">'+
        '<span id="con_val"></span>'+
        '<input id="width_con" '+
        'type="range" min="280" value="620" step="1">'+
        '<style>'+
        '#con_val { display: inline-block; width: 36px; font-size: 14px; vertical-align: 3px; }'+
        '.p-editorStyle { width: 250px; }'+
        '#applyStyleWidthLabel { font-size: 0; }'+
        '#js-editorStyleQuestion, js-editorStyleBalloon { display: none; }'+
        '#con_container { display: inline-block; width: 200px; }'+
        '#width_con { width: calc(100% - 40px); }'+
        '</style></div>';

    if(!document.querySelector('#width_con')){
        editorStyle.insertAdjacentHTML('beforeend', cont); }
    let width_con=document.querySelector('#width_con');
    let con_val=document.querySelector('#con_val');



    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 cont_iframe='<style id="editer_width_con"></style>';
                if(!iframe_body.querySelector('#editer_width_con')){
                    iframe_body.insertAdjacentHTML('beforeend', cont_iframe); }
                let editer_width_con=iframe_doc.querySelector('#editer_width_con');

                let max_width=editor_iframe.getBoundingClientRect().width - 32;
                width_con.max=max_width;

                width_con.value=bwidth;
                con_val.textContent=bwidth;
                editer_width_con.textContent=
                    'body.cke_editable { width: '+(bwidth/1 + 16) +'px !important; }';

                width_con.addEventListener('input', function(){
                    bwidth=width_con.value;
                    con_val.textContent=bwidth;
                    editer_width_con.textContent=
                        'body.cke_editable { width: '+(bwidth/1 + 16) +'px !important; }';

                    localStorage.setItem('BodyWcon', bwidth); // 機種ディスプレイ幅セット 🔵
                });
            }}}

} // show_on()




function show_off(){
    let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
    if(editor_iframe){ // iframe読込みが実行条件
        let iframe_doc=editor_iframe.contentWindow.document;
        if(iframe_doc){
            let editer_width_con=iframe_doc.querySelector('#editer_width_con');
            if(editer_width_con){
                editer_width_con.remove(); }}}


    let con_container=document.querySelector('#con_container');
    if(con_container){
        con_container.remove(); }

} // show_off()

「Body Wcon」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Body Wcon」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）