文字装飾線のツール「Draw The Line」
制作を始めたばかりで、現在は「アンダーライン」の単線のみが動作します。 2重線や「マーカー線」「取り消し線」は、ボタンが表示されますが動作しません。
ツールのショートカットは「Ctrl + F3」としました。
●「Ctrl+F3」を押すと、編集枠の上側にコントロールパネルが表示されます。
▪ パネルは「アンダーライン」→「マーカー線」→「取り消し線」→「終了」の順に、「Ctrl + F3」のショートカットを押す毎に切り替わります。
「アンダーライン」の設定
下は「アンダーライン」のパネルです。
▪指定内容は以下です。
「線数」：単線 / 2重線 をラジオボタンで選択（現在は単線のみ有効）
「線幅」：線1本の幅を 0.5px単位で指定（指定範囲 1px～50px）
「開始位置」：フォント域上辺からの距離 0.01em単位（指定範囲 0.9em～1.5em）
「線色」：CSSのカラー指定の書式が、透過RGB、color名を含めて全て指定可能
▪「フォント域」は、編集画面で文字列をドラッグ反転した反転色の範囲で、無修飾の文字列に背景色が着く範囲です。 その「フォント域」上辺と「アンダーライン」の上辺との距離が「開始位置」です。
▪「開始位置」の単位は「em」です。 フォントサイズにかかわらず、アンダーラインのフォントに対する相対的な位置は、「開始位置」が一定なら変りません。
このツールは「メイリオ」を前提にしていて、「開始位置」の初期値は「1.22em」にしています。 この位置は「MS Pゴシック」では「1.02em」程度です。
▪「線幅」は「0.5px」単位の指定で、フォントサイズに比例せず、大きなフォントに下線付けをする場合は「線幅」の調整が必要かも知れません。「px」で幅を指定する方が、直感的に線幅を把握し易いので、この指定方法にしています。
▪「線幅」と「開始位置」の指定範囲は、入力枠のスピンボタンでの指定範囲です。これに関わらず、直接入力するとスピン範囲外の「0」や小数値等も指定できます。 例えば「開始位置」を「0」と指定して「上付き線」を描画する事が可能です。
▪ このツールの描画範囲は「フォント域」＋「padding-値」の内側に限られます。 描画範囲を外れた部分は欠けて描画されます。 このツールは描画指定と同時に、適当な「padding-bottom」を追加します。
線色の設定
「線色」のカラーコード入力枠は、RGBA透過色のコードの記入も考慮して、大き目に採っています。
▪ 入力枠の右端に実際に設定されている色が表示されます。
▪ カラーコードはリアルタイムで判定されます。 下は「#aaa」を記入中ですが、「#aa」では不適当なカラーコードなので入力枠に黒枠が表示されています。
「#aaa」まで入力すると、正しいカラーコードで、右端にその色が表示されました。
▪ color名（例えば red など）やRGB表記（例えばrgb(255, 0, 0)など）の指定も可能です。 この場合は判定できないので黒枠が表示されますが、正しく動作します。 入力枠の右端に指定色が表示されれば、その色が反映すると考えて良いです。
▪「Ctrl」を押しながら入力枠を左クリックすると、カラーパレットが表示されます。
必要な色を選択する事で、自動的にカラーコードが入力されます。 また「カスタム」を押して、更に精密な中間色の設定が可能です。
「アンダーライン」の描画
設定項目を指定したら、「アンダーライン」を付ける文字列の反転させます。 その際の注意は、指定範囲が「ひとつの段落内」である事、「反転範囲の開始位置と終了位置が同じ子要素内」である事などが条件です。 この条件の詳細については、以下のページの「カギ括弧」ツールの説明を参照ください。
簡単に言うと、HTMLの同条件の文字列の範囲を反転させれば上手く動作します。 簡単なテストをすると、すぐに要領が判ります。 実使用の場面でも、上手く描画されなかったり、不適当な下線となった場合は、「A→A 戻す」の編集アイコンで、何度でもやりなおせます。
今後の方針
少しずつ装飾線のバラエティを追加して行きます。 最終的に、ユーザーの装飾線の指定をローカルストレージに登録し、毎回すぐ使用できる様にしたいと考えています。
「Draw The Line」ver. 0.1
このツールは、Chrome / 新Edge / Firefox の「Tampermonkey」上で動作します。
ただし、現在のバージョンは開発段階で、未だ一部の機能しか動作しません。
各ブラウザの「Tampermonkey」の「新規スクリプト」の編集画面で、最初から登録されているテンプレートを削除して完全に空白にした上で、以下のコードをコピー&ペーストして「保存」してください。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Draw The Line 〕ver. 0.1
// ==UserScript==
// @name Draw The Line ⭐
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 各種の装飾線を記入するツール
// @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 task=0; // アンダーライン・マーカー線・消し線・終了
let ua=0; // Chromeの場合のフラグ
let agent=window.navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ
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('.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);
document.addEventListener('keydown', check_key);
function check_key(event){
let gate=-1;
if(event.ctrlKey==true){
if(event.keyCode==114){
event.preventDefault(); gate=1; }
if(gate==1){
event.stopImmediatePropagation();
do_task(); }}}
function do_task(){
if(task==0){
task=1;
panel_disp();
change_panel();
draw_line(); }
else if(task==1){
task=2;
change_panel(); }
else if(task==2){
task=3;
change_panel(); }
else if(task==3){
task=0;
panel_remove(); }}
}} // catch_key()
function draw_line(){
let editor_iframe;
let iframe_doc;
let selection;
let range;
let insert_node;
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
iframe_doc=editor_iframe.contentWindow.document;
selection=iframe_doc.getSelection();
show_color();
pick_color();
let style_text;
let l_type=document.querySelector('#l_type');
let single=document.querySelector('#single');
let double=document.querySelector('#double');
let l_width=document.querySelector('#l_width');
let l_base=document.querySelector('#l_base');
let l_width_m=document.querySelector('#l_width_m');
let l_trance_m=document.querySelector('#l_trance_m');
let l_color=document.querySelector('#l_color');
single.checked=true;
l_type.onclick=function(){
range=selection.getRangeAt(0);
get_param();
insert_node=document.createElement('span');
insert_node.style.paddingBottom='.3em';
insert_node.style.background=style_text;
try{
range.surroundContents(insert_node); }
catch(e){;}
range.collapse(); }
function get_param(){
if(single.checked){
let l_bt= l_base.value;
let l_ct=l_color.value;
let l_wt=l_width.value;
style_text=
'linear-gradient(transparent '+ l_bt +'em, '+
l_ct +' 0, '+
l_ct +' calc('+ l_bt +'em + '+ l_wt +'px), transparent 0)'; }}
} // draw_line()
function change_panel(){
let l_type=document.querySelector('#l_type');
let type_1=document.querySelector('#type_1');
let type_2=document.querySelector('#type_2');
if(task==1){
l_type.value="アンダーライン";
type_1.style.display='inline-block';
type_2.style.display='none'; }
else if(task==2){
l_type.value="マーカー線";
type_1.style.display='none';
type_2.style.display='inline-block'; }
else if(task==3){
l_type.value="取り消し線";
type_1.style.display='inline-block';
type_2.style.display='none'; }}
function panel_disp(){
let panel=document.createElement('div');
panel.setAttribute('id', 'l_panel');
panel.innerHTML=
'<input id="l_type" type="submit" value="アンダーライン">'+
'<div id="type_1">'+
'<input id="single" type="radio" name="s_d">'+
'<span class="l_label">単線</span>'+
'<input id="double" type="radio" name="s_d">'+
'<span class="l_label">2重線</span>'+
'<span class="l_label label_w">線幅</span>'+
'<input id="l_width" type="number" step="0.5" min="1" max="50" value="1">'+
'<span class="l_label">開始位置</span>'+
'<input id="l_base" type="number" step="0.01" min="0.90" max="1.50" value="1.22">'+
'</div>'+
'<div id="type_2">'+
'<span class="l_label label_w">線幅</span>'+
'<input id="l_width_m" type="number" min="1" value="1">'+
'<span class="l_label">開始位置</span>'+
'<input id="l_base_m" type="number" step="0.1" min="0" max="1.0" value="0.5">'+
'<span class="l_label"> 透過度</span>'+
'<input id="l_trance_m" type="number" min="0" max="100" value="100">'+
'</div>'+
'<span class="l_label">線色</span>'+
'<input id="l_color" type="text" value="#333" autocomplete="off">';
let css=
'#l_panel { position: fixed; top: 15px; left: calc(50% - 490px); width: 784px; '+
'padding: 6px 12px; font-size: 14px; border: 1px solid #ccc; '+
'border-radius: 4px; background: #eff5f6; z-index: 10; }'+
'#type_1 { display: inline-block; width: 400px; } #type_2 { display: none; width: 400px; }'+
'#l_panel input { margin-right: 20px; padding-top: 2px; position: relative; }'+
'#l_panel input[type="radio"] { margin: 0 2px 0 6px; vertical-align: -2px; box-shadow: none; }'+
'.l_label { margin: 0 6px 0 0; } .label_w { margin: 0 6px 0 20px; }'+
'#l_type { width: 120px; margin-right: 30px; }'+
'#l_width { width: 45px; padding-left: 6px; }'+
'#l_base { width: 55px; padding-left: 6px; }'+
'#l_width_m { width: 45px; text-align: center; }'+
'#l_base_m { width: 45px; padding-left: 6px; }'+
'#l_trance_m { width: 50px; text-align: center; }'+
'#l_color { width: 120px; padding: 2px 24px 0 6px; border: thin solid #aaa; height: 23px; }'+
'#cke_42 { top: 60px !important; left: calc( 50% - 45px) !important; }';
if(ua==1){
css=css +
'#l_width, #l_base, #l_width_m, #l_trance_m { height: 24px; border: thin solid #aaa; }'; }
let style=document.createElement('style');
style.innerHTML=css;
panel.appendChild(style);
let l_panel=document.querySelector('#l_panel');
if(!l_panel){
document.querySelector('.l-body').appendChild(panel); }} // panel_disp()
function panel_remove(){
let l_panel=document.querySelector('#l_panel');
l_panel.remove(); }
function show_color(){
let l_color=document.querySelector('#l_color');
l_color.style.boxShadow='inset -20px 0 ' + l_color.value; }
function pick_color(){
let set_color;
let color_input_selector;
let color_label;
let icon_button;
let editor_iframe;
let iframe_doc;
let selection;
let range;
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
iframe_doc=editor_iframe.contentWindow.document;
selection=iframe_doc.getSelection();
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 l_color=document.querySelector('#l_color');
l_color.onclick=function(event){
if(event.ctrlKey==true){
event.preventDefault();
icon_button.click();
selection.removeAllRanges(); // 反転選択がある場合に背景指定を防止する
monitor_p.observe(target_p, {attributes: true}); }} // アイコンカラー取得開始
l_color.addEventListener('input', function(event){
event.preventDefault();
if(test_color(l_color.value)){
l_color.style.boxShadow='inset -20px 0 ' + l_color.value; }
else{
if(l_color.value==''){
l_color.style.boxShadow='inset 0 0 0 1px black'; }
else{
l_color.style.boxShadow='inset 0 0 0 1px black'; // 担保コード
l_color.style.boxShadow=
'inset 0 0 0 1px black, inset -20px 0 ' + l_color.value; }}});
function test_color(color){
return color.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/) !== null; }
document.addEventListener('mousedown', function(){
monitor_p.disconnect(); }); // アイコンカラー取得終了
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('mousedown', function(){
monitor_p.disconnect(); }); } // アイコンカラー取得終了
function get_copy(){
set_color=color_label.getAttribute('data-color');
l_color.value='#'+ set_color;
l_color.style.boxShadow=
'inset -20px 0 ' + l_color.value;
monitor_p.disconnect(); } // アイコンカラー取得終了
let target_body=document.querySelector('.l-body'); // 監視 target
let monitor_generator=new MutationObserver(stealth);
monitor_generator.observe(target_body, {childList: true, subtree: true});
function stealth(){
let color_generator=document.querySelector('.ck-l-colorGenerator');
if(color_generator){
color_generator.addEventListener('mousedown', function(event){
event.stopImmediatePropagation(); }); }}
} // pick_color()
}
「Draw The Line」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Draw The Line」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
