表作成のスクリプトは思ったより簡単
人様のコードを参考にしたからですが、想像以上に苦労もなく「table要素」を構成する事が出来ました。 要素を生成するエンジン部のコードは以下です。
（実際のコードを要約したものです）
この生成エンジンをコントロールするコードを作る事が主要な作業になりましたが、作成される「table表」のブログ上での実用性を考えました。 アメブロを見渡しても、表を記事に掲載している方を滅多に見ません。 これは表をブログ記事上に作成する事の困難さにも原因があり、この敷居が無くなれば違ってくると考えています。
この「Blog Table ⭐」を使うと、表の枠組み作成が動画を貼り付ける様な簡単な作業になります。 また、1行1列の「table表」は囲み飾り枠に使え、枠線幅を「0」にすると区画の背景色付けとして利用する事も出来ます。
「Blog Table ⭐」の操作方法と仕様
「Blog Table ⭐」は常駐させても良いですが、「Tampermonkey」に登録しておき、必要な時だけ編集を始める前に「ON」とする使い方が自然でしょう。
ツールが「ON」の場合、「Ctrl + F1」のショートカットで「Blog Table ⭐」が起動します。 ただし「通常表示」の編集枠内にカーソルがある事が起動の条件です。 それは、このツールがカーソル位置に「table表」を埋め込む仕様だからです。
「Ctrl + F1」で、記事タイトル枠上に「コントロールパネル」が表示されます。 また、もう一度「Ctrl + F1」を押すと、パネルが消えて作成設定がリセットされます。
以下は「コントロールパネル」の図で、各スイッチについて説明します。
基本の操作
❶～⓬ の各ボタンで「表の仕様」を指定し、最後に ⓭「表作成」で表を埋込みます。 何度でも試作できるので、目的の枠組みのデザインを得る事が出来ます。
一旦作成した表のデザイン変更は可能ですが、簡単に変更できる範囲は少なくなります。 表中にデータを書き込んだ後からのデザイン変更は更に難しくなります。 表の枠組みの段階で、書き込むデータを予測して、無理のない表にしておくのがコツです。
なお、列数・列数を後から変更するのは、HTMLを書換える以外に不可能です。
〔追記〕2020.07
このツールの後期バージョン では、行・列の追加や、表設定の変更・コピー等に対応して、とても扱い易くなっています。
ボタンの詳細
❶ 表の列数（横方向）を指定します。 設定可能な値は「1以上」です。
❷ 表の行数（縦方向）を指定します。 設定可能な値は「1以上」です。
最上行だけは ❽の「最上行背景色」の指定色になります。
2行目以下は ❿の「全体背景色」の指定色になります。
❸ このボタンが ◁表▷ の表示の場合は、本文幅いっぱいに拡がる表になります。
反対に ▷表◁ の表示の場合は、表枠内の文字数に応じた幅になります。 表に実際に文字を書き込む事で、幅がそれに応じて拡張します。 このボタンは、クリックするごとに切り替わります。
下は、◁表▷ ボタンによる「table表」の性質の違いを説明したものです。
◁表▷ の場合は、列内の最大の文字数の比で、各列の幅がバランスします。 これに対して、▷表◁ の表は、列内の最大の文字数が各列の幅を決めます。 列ごとの文字の「左寄せ・中央寄せ・右寄せ」は、編集アイコンで指定・変更可能です。
❹ 枠線幅を「px単位」で指定し、初期値は「1」、設定可能な値は「-1以上」です。
▪「-1」の指定は 太さ「1px」の2重枠線になります。
▪「0」の指定は、枠線が表示されませんが、表の構造は残っています。
❺ 枠線色の入力枠です。「#456」「#ff00cc」等の 3文字・6文字指定のカラーコードを入力して「Enter」で決定します。 カラーコードが有効な場合は、この枠の右端の部分 ❻ に、指定した色が表示されます。
❼「文字背景色」のカラー設定を、表の ❺ ❽ ❿ の入力枠にコピー入力できます。 ツールが起動するとカラーアイコンの幅が拡がり、この機能が使い易くなります。
▪「文字背景色」アイコンの右側を押して、必要なカラーを設定します。
▪ 設定したカラーがアイコン上に表示されますが、この部分をクリックします。
▪ カラーを設定する色設定入力枠 ❺ を「Ctrl + 左クリック」します。
▪「文字背景色」アイコンで設定したカラーが、❺ 入力枠に入力されます。
▪ 入力枠の「カラーコード」と ❻「色表示」の変化で、入力が確認できます。
この「文字背景色」アイコンの色設定機能は、❽「最上行背景色」➓「全体背景色」の入力枠でも使えます。 微妙な色設定が必要な場合は、「カスタム」カラー設定が使えます。
⓬ 表全体の「文字サイズ」の指定です。 初期値は「16px」で「12px～32px」の間で選ぶことが出来ます。 これは、表全体の文字サイズを一律に指定しますが、「編集画面」の「文字サイズ」の設定機能で、表内の一部の文字サイズを変更できます。 また、「太字」「文字色」等の文字修飾や「改行」も、文中と同様に表内で可能です。
⓭ 表の構成の設定が決まった段階で「表作成」を押します。 編集画面内のカーソル位置に「table表」が生成されます。 通常は行の左端にカーソルを置いて生成します。
「コントロールパネル」上の表の設定は、パネルを閉じるまでは維持されます。 パネルを閉じると、設定が初期化されるので注意してください。
table要素の中央配置
「table要素」は編集アイコンの中央寄せを使っても、中央配置になりません。 幅が小さめの「表」を中央配置で表示したい場合は、 ▷表◁ で「table表」を作成します。 HTMLを表示すると、「tableタグ」には「width: auto;」が記入されています。
この場合は、ここに「margin: 0 auto;」を追加するだけで、中央配置になります。
また ◁表▷ で作成したが、結果として幅に余裕が出来た場合は、これを中央配置に変更する事が出来ます。 ◁表▷ で作成した「tableタグ」には「width: 100%;」が以下の様に書き込まれています。
この「width: 100%;」を削除して、代わりに「width: auto; margin: 0 auto;」を記入します。
下は、この様なHTML編集で中央配置としたサンプルです。
| 使用頻度 20以上 | 使用頻度 10以上 | 使用頻度 10以下 | |
| 特別クラス | 20 | 45 | 134 |
| 上級者 | 162 | 573 | 486 |
| 中級者 | 45 | 687 | 734 |
| 初心者 | 34 | 23 | 56 |
「Blog Table ⭐」 ver. 0.1
このツールは Chrome / 新Edge の「Tampermonkey」で動作します。（Firefoxは次回から対応） 以下のコードを「Tampermonkey」の新規スクリプトの作成画面にコピー&ペーストして保存する事で、このツールを利用する事が出来ます。
●「Tampermonkey」の導入手順は、以下のページを参照ください。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Blog Table ⭐ 〕 ver. 0.1
// ==UserScript==
// @name Blog Table ⭐
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 編集画面上にtable表を作成する
// @author Ameba Blog User
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @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 table_width='100%';
let target=document.getElementById('cke_1_contents'); // 監視 target
let monitor=new MutationObserver( catch_key );
monitor.observe(target, {childList: true}); // ショートカット待受け開始
catch_key();
function catch_key(){
if(document.querySelector('.l-gHeaderLeft__link a')){ // 起動を「トップページ」アイコンに表示 📛
document.querySelector('.l-gHeaderLeft__link a').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">'+
'<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: 948px; '+
'padding: 6px 15px; font-size: 14px; border: 1px solid #ccc; '+
'border-radius: 4px; background: #eff5f6; z-index: 10; }'+
'#t_panel input { margin-right: 10px; padding-top: 2px; }'+
'.t_label { margin: 0 3px 0 0; }'+
'#col, #row, #border_width, #t_font { width: 36px; text-align: center; }'+
'#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; }';
let style=document.createElement('style');
style.innerHTML=css;
panel.appendChild(style);
document.querySelector('.l-body').appendChild(panel); }
function excite_icon(n){
let color_label=document.querySelector('#cke_16_label.cke_button__markercolor_label');
let color_button=document.querySelector('#cke_17.cke_button__markercolorgenerator');
if(n==1){
color_label.style.height='17px';
color_button.style.width='20px'; }
else{
color_label.style.height='3px';
color_button.style.width='11px'; }}
function get_color(){
let set_color;
let icon=document.querySelector('#cke_16');
let color_label=document.querySelector('#cke_16_label');
icon.addEventListener('click', function(){
set_color=color_label.getAttribute('data-color'); });
let color_input=document.querySelectorAll('#t_panel input[type="text"]');
for(let k=0; k<color_input.length; k++){
copy_color(k); }
function copy_color(k){
color_input[k].onclick=function(event){
if(event.ctrlKey==true){
event.preventDefault();
color_input[k].value='#'+ set_color;
color_input[k].style.boxShadow='inset -8px 0 ' + color_input[k].value; }}
color_input[k].onkeydown=function(event){
if(event.keyCode==13){
event.preventDefault();
color_input[k].style.boxShadow='inset -8px 0 ' + color_input[k].value; }}}}
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_width=='100%'){
wide.value='◁表幅▷'; }
else{
wide.value='▷表幅◁'; }
wide.onclick=function(event){
event.preventDefault();
if(table_width=='100%'){
table_width='auto';
wide.value='▷表幅◁'; }
else{
table_width='100%';
wide.value='◁表幅▷'; }}}
function makeTable(){
table_width_set();
show_color();
get_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 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 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.style.border=border_para;
cell.style.padding='.2em .6em 0';
cell.appendChild(document.createTextNode("")); // 列の追加
if(i==0){
cell.style.backgroundColor=header_back.value; } // 最上行背景色の設定
else{
cell.style.backgroundColor=cell_back.value; }}} // 全体背景色の設定
if(border_width.value>-1){
table.style.borderCollapse='collapse'; }
else if(border_width.value==-1){
table.style.borderCollapse='separate';
table.style.border='1px solid ' + border_color.value; }
table.style.width=table_width;
table.style.font='normal '+ t_font.value +'px Meiryo';
let selection=iframe_doc.getSelection();
let range=selection.getRangeAt(0);
let ac_node=selection.anchorNode;
ac_node.parentNode.insertBefore(table, ac_node);
}}} // makeTable()
} // main()
「Blog Table ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Blog Table ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
