「中央配置」をメニュー設定に追加
「配置設定」に関わる選択肢は「width: 100%;」「width: auto;」の切換えだけでしたが、「width: auto; margin: 0 auto;」を追加しました。
コンパクト化のために、これを1個のボタンで順に選択出来る様にしました。 クリックするたびに、次の順に切り替わります。
❶「width: 100%; margin: 0;」 本文幅に拡がる
❷「width: auto; margin: 0 auto;」 中央配置
❸「width: auto; margin: 0;」 左寄せ配置
カラー値入力の改善
「カラー値入力枠」に「カラー値」を設定する補助機能は、「文字背景色」の設定アイコンを利用しています。
「カラー設定ダイアログ」で色を決定すると「文字背景色」のアイコンに決定色を表示する機能があり、この変化を「MutationObserver」でキャッチします。 アイコンの色が変化したら、その色値をグローバル変数に代入する様にしました。
一方、「カラー入力枠」側は、入力枠のクリックでダイアログを表示させ、グローバル変数の色値を受け取るコードですが、入力枠が3個ある事が問題になりました。
入力枠をクリックしてダイアログで色決定をせず、他の場所をクリックして閉じた場合が問題で、これは入力枠の色決定の待受け状態が続きます。 その後に、他の入力枠のクリックや、本来の文字色背景の目的での色設定をした時に、待機していた入力枠も、その色値を取得してしまいます。
そこで、クリックした入力枠を示すグローバル変数と、「MutationObserver」の動作を「不感」にさせる「.disconnect()」のメソッドを使いました。 入力枠のクリックすると、その入力枠の番号をグローバル変数に入れてから「Observer」を開きます。
ダイアログ側が色決定した時、変数の示す入力枠に値を設定し、「Observer」を「不感」にします。 もし、色決定をしなかった場合は入力枠の待機が続きますが、別の入力枠をクリックすると、その入力枠に色を受け取る権利が移り、他所の色値の入力を防げるという塩梅です。
また、「文字背景色」アイコンの本来目的でダイアログで色決定をした場合は、ダイアログの表示ボタン(アイコンの右)のクリックで、「Observer」を「不感」にするコードを追加しました。 これで、待受けしたままの入力枠があっても「文字背景色」の色決定が、入力枠に設定される事が防げました。
新しいカラー入力枠の操作
カラーコードの直接入力は外せない機能なので、入力枠の「Ctrl + 左クリック」でダイアログによるカラー入力機能を起動する様にしました。
❶「Ctrl + 左クリック」で「カラー設定ダイアログ」を表示する
「カラー設定ダイアログ」の機能は、本来の通りです。 ただし、ツールに都合の良い位置に、ダイアログを移動しています。
❷ ❸ のパレットをクリックして「色決定」を行います。 また ❹ をクリックして、「カスタム」のカラー設定ダイアログで微妙な色を「色決定」する事が出来ます。
❺「色決定」の操作を行うと、決定した色が「カラー入力枠」に設定されます。
以上の様に、従来より操作が直感的に行える様になりました。
なお、この機能は「文字背景色」アイコンの機能を利用していますが、このツールを起動している間も、「文字背景色」の本来の操作は可能です。
「Blog Table ⭐」 ver. 0.4
このツールは Chrome / 新Edge / Firefox の「Tampermonkey」上で動作します。
●「Tampermonkey」の導入手順は、以下のページを参照ください。
●「Tampermonkey」の新規スクリプトの作成画面を開き、あらかじめ記入されている内容を完全にクリアしてください。 空白になった作成画面に、以下のコードをコピー&ペーストして保存する事で、このツールを利用する事が出来ます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Blog Table ⭐ 〕 ver. 0.4
// ==UserScript== // @name Blog Table ⭐ // @namespace http://tampermonkey.net/ // @version 0.4 // @description 編集画面上にtable表を作成する // @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 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 ua=0; // Chromeの場合のフラグ let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ let table_setting=0; let table_width; let table_position; let target=document.getElementById('cke_1_contents'); // 監視 target let monitor=new MutationObserver( catch_key ); monitor.observe(target, {childList: true}); // ショートカット待受け開始 catch_key(); function catch_key(){ let header_link=document.querySelector('.l-gHeaderLeft__link a'); if(header_link){ // 起動を「トップページ」アイコンに表示 📛 header_link.style.boxShadow='inset -14px 0 0 0 #79fbf6'; } if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; iframe_doc.addEventListener('keydown', check_key); function check_key(event){ let gate=-1; if(event.ctrlKey==true){ if(event.keyCode==112){ event.preventDefault(); gate=1; } if(gate==1){ event.stopImmediatePropagation(); do_task(); }}} function do_task(){ let t_panel=document.querySelector('#t_panel'); if(!t_panel){ table_panel(); excite_icon(1); makeTable(); } else if(t_panel){ excite_icon(0); t_panel.remove(); }} }} // catch_key() function table_panel(){ let panel=document.createElement('div'); panel.setAttribute('id', 't_panel'); panel.innerHTML= '<span class="t_label">列数</span>'+ '<input id="col" type="number" min="1" value="1">'+ '<span class="t_label">行数</span>'+ '<input id="row" type="number" min="1" value="1">'+ '<span class="t_label">配置</span>'+ '<input id="wide" type="submit" value="◁▷">'+ '<span class="t_label">枠線幅</span>'+ '<input id="border_width" type="number" min="-1" value="1">'+ '<span class="t_label">色</span>'+ '<input id="border_color" type="text" value="#999">'+ '<span class="t_label">最上行背景色</span>'+ '<input id="header_back" type="text" value="#F4F4F4">'+ '<span class="t_label">全体背景色</span>'+ '<input id="cell_back" type="text" value="#FFF">'+ '<span class="t_label">文字サイズ</span>'+ '<input id="t_font" type="number" min="12" max="32" value="16">'+ '<input id="set" type="submit" value="表作成">'; let css= '#t_panel { position: fixed; top: 15px; left: calc(50% - 490px); width: 954px; '+ 'padding: 6px 12px; font-size: 14px; border: 1px solid #ccc; '+ 'border-radius: 4px; background: #eff5f6; z-index: 10; }'+ '#t_panel input { margin-right: 9px; padding-top: 2px; }'+ '.t_label { margin: 0 3px 0 0; }'+ '#col, #row, #border_width, #t_font { width: 36px; text-align: center; }'+ '#wide { width: 3.4em; letter-spacing: -0.5em; text-indent: -0.5em; }'+ '#border_color, #header_back, #cell_back { width: 66px; padding: 2px 8px 0 2px; '+ 'border: thin solid #aaa; height: 23px; }'+ 'input#border_width { margin-right: 2px; }'+ 'input#set { margin: 0 0 0 -20px; padding: 2px 4px 0; '+ 'box-shadow: inset 0 0 0 20px #fd4; float: right; }'+ '#cke_42 { top: 60px !important; left: calc( 50% - 45px) !important; }'; if(ua==1){ css=css + '#col, #row, #border_width, #t_font { height: 23px; border: thin solid #aaa; }'+ 'input#set { margin: 1px 0 0 -20px; padding: 3px 4px 1px; '+ 'border: thin solid #aaa; }'; } let style=document.createElement('style'); style.innerHTML=css; panel.appendChild(style); document.querySelector('.l-body').appendChild(panel); } function excite_icon(n){ if(ua==0){ let label=document.querySelector('#cke_16_label.cke_button__markercolor_label'); if(n==1){ label.style.height='17px'; } else{ label.style.height='3px'; }} else if(ua==1){ let label=document.querySelector('#cke_15_label.cke_button__markercolor_label'); if(n==1){ label.style.height='17px'; } else{ label.style.height='3px'; }}} function pick_color(){ let set_color; let color_input_selector; let color_label; let icon_button; if(ua==0){ color_label=document.querySelector('#cke_16_label'); icon_button=document.querySelector('#cke_17'); } else if(ua==1){ color_label=document.querySelector('#cke_15_label'); icon_button=document.querySelector('#cke_16'); } let target_p=color_label; // 監視 アイコンのカラーラベル let monitor_p=new MutationObserver( get_copy ); let color_input=document.querySelectorAll('#t_panel input[type="text"]'); for(let k=0; k<color_input.length; k++){ input_color(k); } function input_color(k){ color_input[k].onclick=function(event){ if(event.ctrlKey==true){ event.preventDefault(); color_input_selector=k; icon_button.click(); monitor_p.observe(target_p, {attributes: true}); }} // アイコンカラー取得開始 color_input[k].onkeydown=function(event){ if(event.keyCode==13){ event.preventDefault(); if(test_color(color_input[k].value)){ color_input[k].style.boxShadow='inset -8px 0 ' + color_input[k].value; } else{ if(color_input[k].value==''){ color_input[k].style.boxShadow='inset 0 0 0 1px black'; } else{ color_input[k].style.boxShadow='inset 0 0 0 1px black'; color_input[k].style.boxShadow= 'inset 0 0 0 1px black, inset -8px 0 ' + color_input[k].value; }}}} function test_color(color){ return color.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/) !== null; }} function get_copy(){ set_color=color_label.getAttribute('data-color'); color_input[color_input_selector].value='#'+ set_color; color_input[color_input_selector].style.boxShadow= 'inset -8px 0 ' + color_input[color_input_selector].value; monitor_p.disconnect(); } // アイコンカラー取得終了 icon_button.addEventListener('click', function(){ monitor_p.disconnect(); }) // アイコンカラー取得終了 } // pick_color() function show_color(){ let color_input=document.querySelectorAll('#t_panel input[type="text"]'); for(let k=0; k<color_input.length; k++){ color_input[k].style.boxShadow='inset -8px 0 ' + color_input[k].value; }} function table_width_set(){ let wide=document.querySelector('#wide'); // 横幅の拡張・非拡張・中央配置の設定 if(table_setting==0){ wide.value='┃◁ ▷┃'; table_width='100%'; table_position='0'; } else if(table_setting==1){ wide.value='┃ ▷◁ ┃'; table_width='auto'; table_position='0 auto'; } else if(table_setting==2){ wide.value='┃▷◁ ┃'; table_width='auto'; table_position='0'; } wide.onclick=function(event){ event.preventDefault(); if(table_setting==0){ table_setting=1; wide.value='┃ ▷◁ ┃'; table_width='auto'; table_position='0 auto'; } else if(table_setting==1){ table_setting=2; wide.value='┃▷◁ ┃'; table_width='auto'; table_position='0'; } else if(table_setting==2){ table_setting=0; wide.value='┃◁ ▷┃'; table_width='100%'; table_position='0'; }}} function table_id(){ // 複数tableを生成時に異なるidを付ける if(document.querySelector('.cke_wysiwyg_frame') !=null){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; for(let k=0; k<100; k++){ let table_id='ambt'+k; if(iframe_doc.getElementById(table_id)==null){ return table_id; }}}} function makeTable(){ table_width_set(); show_color(); pick_color(); let set=document.querySelector('#set'); // 作成ボタン set.addEventListener('click', set_table); function set_table(){ if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; let rows=[]; let col=document.querySelector('#col'); // 列数の設定 let row=document.querySelector('#row'); // 行数の設定 let border_width=document.querySelector('#border_width'); // 枠線幅の設定 let border_color=document.querySelector('#border_color'); // 枠線色の設定 let header_back=document.querySelector('#header_back'); // 最上行背景色の設定 let cell_back=document.querySelector('#cell_back'); // 全体背景色の設定 let t_font=document.querySelector('#t_font'); // 文字サイズの設定 let table=iframe_doc.createElement("table"); for(let i=0; i<row.value; i++){ rows.push(table.insertRow(-1)); // 行の追加 for(let j=0; j<col.value; j++){ let cell=rows[i].insertCell(-1); cell.appendChild(document.createTextNode("")); }} // 列の追加 let this_id=table_id() table.setAttribute('id', this_id); let border_collapse; let table_border; if(border_width.value>-1){ border_collapse='collapse'; table_border='none'; } else if(border_width.value==-1){ border_collapse='separate'; table_border='1px solid ' + border_color.value; } let border_para; if(border_width.value>0){ border_para=border_width.value +'px solid '+ border_color.value; } else if(border_width.value==-1){ border_para='1px solid '+ border_color.value; } let css= '#'+ this_id + ' { '+ 'width: '+ table_width +'; '+ 'margin: '+ table_position +'; '+ 'border-collapse: '+ border_collapse +'; '+ 'border: '+ table_border +'; '+ 'font: normal '+ t_font.value +'px Meiryo; '+ 'background-color: '+ cell_back.value +'; } '+ '#'+ this_id +' tr:first-child { background-color: '+ header_back.value +'; } '+ '#'+ this_id +' td { border: '+ border_para +'; padding: 0.2em 0.6em 0px; }'; if(ua==1){ css=css +' #'+ this_id +' td { height: 1.5em; }'; } let style=iframe_doc.createElement("style"); style.insertAdjacentHTML('afterbegin', css); let selection=iframe_doc.getSelection(); let range=selection.getRangeAt(0); let ac_node=selection.anchorNode; ac_node.parentNode.insertBefore(style, ac_node); ac_node.parentNode.insertBefore(table, ac_node); }}} // makeTable() } // main()
「Blog Table ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Blog Table ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。