「Body Wcon OD」の原点
「Body Wcon OD」を制作したそもそもの目的は、ブログ記事の本文部の幅を一時的に変更する事でした。 この幅の変更は「見かけ」だけで、他のユーザーが閲覧しているブログ記事の本文幅が変わるわけではありません。
ブログ記事がスマホで閲覧された状態をチェックするには、記事を編集画面に開いて「プレビュー」を開き「スマートフォン」を押す必要があります。 スマホでアメーバアプリを起動し、自分の記事を見れば良いのですが、PCをメインにしている私は、ログアウトになっている事が多く、問題の記事に辿り着くのに時間がかかる事が、けっこうあります。
ブログ本文の「行折れの状態」の確認
チェックしたいのは、行の折れ方(改行の位置)に問題が無いかとか、画像と記事のバランスが問題ないかとか、 といった事です。
特に不要な改行を調べるには、本文幅を変えるのが一番早く、これについては、以下の記事の最初に書いています。
「チェック」➔「修正」を効率化
現在の「Body Wcon OD」は、チェック機能より「編集画面」を開く機能を高度化しています。 本来の機能よりそちらが主になりつつありますが、まぁ良いでしょう。 自由に進めて柔軟に纏めれば良いはず。
前ページの「ver. 0.9」では「記事の編集・削除」へのアクセスボタンと、「閉じる」ボタンを追加しました。
必要なパーツはおうよそ揃ったと思いますが、色々と使い勝手を試すと、キーボードでコントロール出来ると便利と感じました。 そこで少しコードを追加して、以下のキーによる操作を可能にしました。
●「Enter」➔「編集画面」を開く (「 」ボタンを押すのと同じ)
●「Esc」➔ パネルを「閉じる」 (「✖」ボタンを押すのと同じ)
他の機能への影響
この種の機能の追加は、ページ全体の操作に影響する場合があり、注意しています。 ブログ記事のページで、それぞれのキー入力が使われていないか、使われている場合はどういう機能に使われているか、チェックが必要です。(他のスクリプトツールを使っている場合も含めて)
で、「Enter」は基本的に「入力」に使われるだけなので、ブログ記事の画面では「検索窓」などにしか機能しません。
一方「Esc」は、「旧タイプ」「レトロタイプ」のブログ記事では無反応です。 しかし、「新タイプ」のブログ記事では奇妙なスクロール動作をします。 ブログによって様々な所を表示するので、最初は何んだと思いましたが、どうやら「フォロー」ボタン横の「…」ボタンを画面上下の中央に表示するためのスクロールでした。
結局、余り重要な操作に「Esc」は使われていない様です。
ただし、万全を期するために、これらのキー入力を「Body Wcon OD」側で受け取る際に、このツールのパネルが表示されている場合に限り「受け取り」、その場合は他の事には「無効化」するというコードにしています。 従って、「Body Wcon OD」が働いていない場合は、ブログ記事のページ上での「Enter」「Esc」のキー入力に、影響しません。
昔はこのあたりの注意が足りず、通常行っていた日常の操作が何故か出来なくなり、良く調べると試作ツールの入力キーを受け取るコードが、邪魔をしていたという事がありました。 アプリ制作は、そういう失敗をして上達するものですが。
スクロール位置の精度
編集画面を開いた時のスクロール位置の正確さは、「Wysiwyg環境」に関係します。「デザイン幅で表示」の選択は最低限の条件ですが、以下のツールを導入すると、精度が高くなる可能性が大です。
操作マニュアル
扱い方の概要については、以下を参照ください。
「Body Wcon OD」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Body Wcon OD 〕 ver. 1.0
// ==UserScript== // @name Body Wcon OD // @namespace http://tampermonkey.net/ // @version 1.0 // @description ブログページでスマホ表示を確認 ショートカット: Ctrl+F7 // @author Ameba Blog User // @match https://ameblo.jp/* // @match https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?* // @match https://blog.ameba.jp/ucs/entry/srventrylist.do?* // @exclude https://ameblo.jp/*/image* // @exclude https://ameblo.jp/*/video* // @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_edit" 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_list= '<svg class="BW_list" viewBox="0 0 300 300">'+ '<path d="M85 41C79 42 73 46 71 52C69 56 70 61 74 62C79 63 86 62 91 62L126 '+ '62C133 62 141 61 147 64C163 73 149 97 170 103C176 104 182 103 188 103L223 '+ '103C231 103 240 101 246 107C253 114 252 124 252 133L252 189C252 195 252 '+ '202 252 208C252 211 253 214 257 214C264 213 273 204 274 197C275 189 274 '+ '179 274 171L274 119C274 109 276 97 269 88C261 79 251 80 241 80L202 80C196 '+ '80 189 81 183 80C177 78 178 70 178 65C178 57 175 49 169 44C162 39 153 40 145 '+ '40L106 40C99 40 92 39 85 41M44 81C28 85 28 101 28 114L28 214L28 237C28 243 '+ '28 248 31 253C42 267 62 263 77 263L173 263L200 263C206 263 213 263 219 '+ '261C233 256 234 245 234 232L234 159C234 149 236 135 229 127C221 119 211 '+ '119 201 119L163 119C157 119 150 120 144 119C136 116 138 106 138 100C137 94 '+ '135 89 130 85C122 79 114 80 105 80L66 80C59 80 51 79 44 81z">'+ '</path><path d="M59 104C48 107 51 123 51 132L51 209L51 228C51 231 51 234 '+ '53 237C55 239 60 239 63 239L89 239L171 239L195 239C199 239 203 240 207 '+ '238C214 235 212 224 212 218L212 165C212 159 214 150 210 145C205 141 193 '+ '143 187 143L149 143C143 143 135 144 129 143C127 142 125 141 123 140C111 '+ '130 121 117 113 107C110 103 105 103 100 103L73 103C69 103 63 102 59 104z" '+ 'style="fill:#fff"></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 + svg_list + ' ブログ本文幅 <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>'+ '<span class="BW_close">✖</span>'+ '</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_close { margin-left: 20px; padding: 4px 6px 2px; border: 1px solid #aaa; '+ 'border-radius: 4px; } '+ '.BW_close:hover { background: #eee; cursor: pointer; } '+ '.BW_edit, .BW_list { width: 26px; height: 26px; vertical-align: -10px; padding: 2px; '+ 'margin-right: 10px; border: 1px solid #aaa; border-radius: 4px; } '+ '.BW_edit:hover, .BW_list: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: 120px; vertical-align: -2px; margin: 0 10px; } '+ '#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; } document.onkeydown=function(event){ if(event.keyCode==13){ let BW_edit=document.querySelector('.BW_edit'); let entry_id=article.getAttribute('data-unique-entry-id'); if(entry_id && BW_edit){ event.preventDefault(); event.stopImmediatePropagation(); let path= 'https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id='+ entry_id +'&edit_top='+ to_top(); window.open(path, "_blank"); }} if(event.keyCode==27){ let BW_con=document.querySelector('#BW_con'); if(BW_con){ event.preventDefault(); event.stopImmediatePropagation(); BW_con.remove(); }}} let BW_close=document.querySelector('.BW_close'); if(BW_close){ BW_close.onclick=function(event){ event.preventDefault(); document.querySelector('#BW_con').remove(); }} let BW_edit=document.querySelector('.BW_edit'); if(article && BW_edit){ let entry_id=article.getAttribute('data-unique-entry-id'); if(entry_id){ BW_edit.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; }}}} let BW_list=document.querySelector('.BW_list'); if(article && BW_list){ let entry_id=article.getAttribute('data-unique-entry-id'); let user=article.getAttribute('data-unique-ameba-id'); let date=document.querySelector('time').getAttribute('datetime'); let entry_ym=date.slice(0, 4) + date.slice(5, 7); if(entry_id && user && entry_ym){ BW_list.onclick=function(event){ event.preventDefault(); let path= 'https://blog.ameba.jp/ucs/entry/srventrylist.do?pageID='+ '1&entry_ym='+entry_ym+'&user='+user+'&entry_id='+entry_id; 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(location.pathname.includes('/srventryup')){ // ブログ編集画面の場合 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; } }} } // ブログ編集画面の場合 if(location.pathname.includes('/srventrylist')){ // 記事の編集・削除の場合 let arg=new Object; let pair=location.search.substring(1).split('&'); for(let i=0; pair[i]; i++){ let key=pair[i].split('='); arg[key[0]]=key[1]; } // key[0]がkey, key[1]がvalue let entry_ym=arg.entry_ym; let pageID=parseInt( arg.pageID, 10); // 数値に変換 let user=arg.user; let entry_id=arg.entry_id; let amebaId=document.querySelector('#gHeaderRight .amebaId').textContent; let entryList_li=document.querySelectorAll('#entryList li'); if(user!=null){ if(amebaId!=user){ // 他ユーザーのブログでリスト表示を押した場合 if(history.length>1){ window.history.back(); } else{ window.close(); }} else{ let k; for(k=0; k<entryList_li.length; k++){ let entryList_a=entryList_li[k].querySelector('h2 a'); if(entryList_a){ if(entryList_a.getAttribute('href').indexOf(entry_id)!=-1){ entryList_li[k].style.outline='2px solid red'; entryList_li[k].scrollIntoView({block: "center"}); break; }}} if(k==entryList_li.length){ pageID+=1; let path= 'https://blog.ameba.jp/ucs/entry/srventrylist.do?pageID='+ pageID+'&entry_ym='+entry_ym+'&user='+user+'&entry_id='+entry_id; window.location.href=path; }}} } // 記事の編集・削除の場合
「Body Wcon OD」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Body Wcon OD」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。