「Editor Keeper ⭐ 📛」は編集画面の補完ツール
アメブロ最新版エディタに対して、「Editor Keeper ⭐ 📛」は以下の改善をします。 このツールは「Ameblo Writer(Compact) 」でアレンジした編集画面を前提にデザインされています。
(このアレンジが無くてもツールは動作しますが、扱い難いかもしれません。 このページの説明画像は、このアレンジを適用した編集画面です。)
各機能については、それぞれのリンク先を参照ください。
編集画面を閉じずに「管理トップ」「ブログトップ」「ホーム」を開く
以上の操作方法や仕様については、以下の操作マニュアルに纏めています。
「カスタム画像サイズ」の登録と適用
「Editor Keeper」は、記事への画像貼付けに便利な、画像サイズと左右配置を自動で再現する機能があります。(上記の「画像貼り付け位置設定・サイズ指定」の機能)
これまで機能に不足はなかったのですが、最近は掲載画像のサイズに「480px」とか「540px」等の、デフォルト「中サイズ」よりいくぶん大きな値を使う様になってきました。 この場合、画像ごとに画像サイズを指定しなおす必要があり、少し不便に感じて来ました。 そこで、任意の決まった画像サイズに、素早く画像サイズを設定できる機能を作りました。
ローカルストレージの配列記録
こくのツールは、極小サイズのローカルストレージのデータで、動作の登録とコントロールしています。 ここで、ストレージの登録データの内容を纏めておきます。
ストレージ登録Key名: AWriter_Preset
登録内容の配列 aw_preset=[0,0,0,0,0,0,0,0,0](9個の子要素)
配列の子要素 | 子要素の登録値と指定される環境内容 |
aw_preset[0] | 画像サイズ 0:原寸 1: 小 2:中 3:大 |
aw_preset[1] | 画像位置 0:左寄せ 1: 中央 2:右寄せ |
aw_preset[2] | 絵文字 0:履歴 1: 絵文字 |
aw_preset[3] | 絵文字種類の選択 0:気持ち 1: 記号 2:自然・動物 3:食べ物 4: お出かけ・イベント 5: アイテム |
aw_preset[4] | おねだりバナー 0:フォロー 1: アメンバー |
aw_preset[5] | 投稿時間設定 0~23 |
aw_preset[6] | 投稿分設定 0~59 |
aw_preset[7] | デザイン囲み枠 0:見出し 1: テキスト |
aw_preset[8] | カスタム画像幅 |
今回は、「カスタム画像幅」を登録するため「9個」目の子要素を追加しました。
カスタム画像幅の使い方
「カスタム画像幅」の登録
記事に挿入した画像を「左Click」すると「画像ダイアログ」が表示されます。 これは、編集画面のデフォルト機能で、画像の左右中央配置の指定を変更したり、画像の表示サイズを自在に変更できます。
「カスタム画像幅」は、この「画像ダイアログ」の「画像サイズ幅」の設定枠を利用して登録します。
① 記事に仮挿入した適当な画像を「左Click」して「画像ダイアログ」を表示します。
ここでは、「カスタム画像幅」に「360px」を登録するとして、仮の画像の表示幅を「360px」に設定します。
➁ 幅「360px」を設定した「画像サイズ」の入力枠を「Ctrl+左Click」します。
➂ 下の様な確認ダイアログが表示されるので「OK」を押します。
以上で、「360px」が「カスタム画像幅」として登録されます。
▪「カスタム画像幅」はローカルストレージに登録され、ユーザーが次に書き変えるまで、保持されて消える事はありません。
「カスタム画像幅」を画像に適用する
「カスタム画像幅」は、記事に挿入された全ての画像に適用する事ができます。
下は、小サイズで挿入された画像で、表示幅は「220px」です。
④ この画像を「Ctrl+左Click」すると「カスタム画像幅」が適用されます。
➄「カスタム画像幅」が適用されると、画像の左上に「サイズ表示」が出ます。
▪「サイズ表示」は記事画面をスクロールするか、2sec経つと消えます。
「Editor Keeper ⭐ 📛」を利用するには
このツールは、Chrome / Edge / Firefox の各ブラウザ版「Tampermonkey」で動作を確認しています。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Editor Keeper ⭐ 📛 〕 ver. 3.9
// ==UserScript== // @name Editor Keeper ⭐📛 // @namespace http://tampermonkey.net/ // @version 3.9 // @description 編集画面を閉じず「管理トップ」「ブログトップ」に移動する // @author Ameblo Writer User // @match https://blog.ameba.jp/ucs/entry/srventry* // @exclude https://blog.ameba.jp/ucs/entry/srventrylist.do* // @grant none // ==/UserScript== let ua=0; // Chrome・Edge の場合のフラグ let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ let retry=0; let interval=setInterval(wait_target, 100); function wait_target(){ retry++; if(retry>10){ // リトライ制限 10回 1sec clearInterval(interval); } let target=document.querySelector('.l-gHeaderLeft__link a'); // 監視 target if(target){ clearInterval(interval); button_disp(); keeper(); environ(); keep_left(); step_size(); photo_list(); }} function button_disp(){ // 以下 起動表示CSSを適用 📛 let style='<style>'; if(ua==0){ style += '.l-gHeaderLeft__link a:before { content: "" !important; } '+ '.l-gHeaderLeft__link a:after { content: "⏏" !important; font-size: 24px !important; '+ 'line-height: 16px !important; top: 2px !important; left: 6px !important; } '+ '.l-gHeaderLeft__link a { font-weight: bold; '+ 'text-indent: -6.3em !important; height: 31px !important; padding-top: 3px; } '+ '.l-gHeaderLeft__link a:hover { '+ 'text-indent: 0.4em !important; width: calc(28px + 6.7em) !important; '+ 'background: #fff !important; box-shadow: -10px 0 1px 0 var(--bgc1) !important; } '+ '#globalHeader #gHeaderLeft { width: 280px; } '+ '.l_calendar__inputTimeContainer input::-webkit-outer-spin-button, '+ '.l_calendar__inputTimeContainer input::-webkit-inner-spin-button { '+ '-webkit-appearance: none; margin: 0; } '+ '#js-photo-tabButton { box-shadow: inset 0 17px #efefef; }'+ '</style>'; } if(ua==1){ style += '.l-gHeaderLeft__link a:before { content: "" !important; } '+ '.l-gHeaderLeft__link a:after { content: "⏏" !important; font-size: 36px !important; '+ 'line-height: 4px !important; top: 7px !important; left: 2px !important; } '+ '.l-gHeaderLeft__link a { font-weight: bold; '+ 'text-indent: -6em !important; height: 30px !important; padding-top: 4px; } '+ '.l-gHeaderLeft__link a:hover { '+ 'text-indent: 0.7em !important; width: calc(28px + 6.7em) !important; '+ 'background: #fff !important; box-shadow: -10px 0 1px 0 var(--bgc1) !important; } '+ '#globalHeader #gHeaderLeft { width: 280px; } '+ '.l_calendar__inputTimeContainer input { -moz-appearance:textfield; } '+ '#js-photo-tabButton { box-shadow: inset 0 17px #efefef; }'+ '</style>'; } document.querySelector('.l-body').insertAdjacentHTML('beforeend', style); } // button_disp() function keeper(){ let target=document.querySelector('.l-gHeaderLeft__link a'); target.setAttribute('target', '_blank'); target.onclick=function(event){ if(event.shiftKey){ event.preventDefault(); let amebaId=document.querySelector('.amebaId').textContent; if(amebaId){ let blogurl='https://ameblo.jp/' + amebaId + '/'; window.open(blogurl, "_blank"); }} else if(event.ctrlKey){ event.preventDefault(); let homeurl='https://www.ameba.jp/home'; window.open(homeurl, "_blank"); }} jump_disp(window); let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ // iframe読込みが実行条件 let iframe_doc=editor_iframe.contentWindow.document; jump_disp(iframe_doc); } function jump_disp(env){ env.addEventListener('keydown', function(event){ if(event.shiftKey==true){ target.textContent='ブログトップ'; target.style.boxShadow='#00e2ff -14px 0 0 0 inset'; env.addEventListener('keyup', function(){ target.textContent='管理トップへ'; target.style.boxShadow='#79fbf6 -14px 0 0 0 inset'; }); } else if(event.ctrlKey==true){ target.textContent='ホームを表示'; target.style.boxShadow='#00e2ff -14px 0 0 0 inset'; env.addEventListener('keyup', function(){ target.textContent='管理トップへ'; target.style.boxShadow='#79fbf6 -14px 0 0 0 inset'; }); }}); } window.addEventListener('dragover', function(event){ // 編集画面へのドロップ制限 event.preventDefault(); }, false); window.addEventListener('drop', function(event){ event.preventDefault(); event.stopPropagation(); }, false); } // keeper() function environ(){ let aw_preset=[]; // Ameblo Writer のユーザー設定 set_db(); function set_db(){ let read_json=localStorage.getItem('AWriter_Preset'); // ローカルストレージ 保存名 aw_preset=JSON.parse(read_json); if(aw_preset==null){ aw_preset=[0,0,0,0,0,0,0,0,0]; } // 0:画像サイズ 1:画像位置 2:絵文字 3:絵文字種類 4:おねだりバナー // 5:投稿時間設定 6:投稿分設定 7:見出し・テキスト 8:画像指定幅 else{ let db_length=aw_preset.length; for(let k=0; k<9-db_length; k++){ //「9」は配列の数 aw_preset.push(0); }} let write_json=JSON.stringify(aw_preset); localStorage.setItem('AWriter_Preset', write_json); } // ローカルストレージ 保存 let p_images=document.querySelector('.p-images-imageList__body'); // 監視 target let monitor0=new MutationObserver(pre_set); monitor0.observe(p_images, {childList: true, subtree: true}); // 画像リストの変化を監視開始 function pre_set(){ photo_size(); picto_select1(); coax_select(); design_select(); calendar(); } function photo_size(){ let ph_size=document.querySelectorAll('.js-photo-paste-size'); if(ph_size.length>0){ ph_size[aw_preset[0]].click(); } // サイズボタンをストレージ記録に従って押す for(let k=0; k<ph_size.length; k++){ // 押されたサイズボタンを記録する ph_size[k].onclick=function(){ storage_w(0, k); }}} // サイズ選択をローカルストレージ 保存 function picto_select1(){ let pict_nav=document.querySelectorAll('.js-pictograph-nav'); let pict_button=document.querySelector('button[data-tab-content="pictograph"]'); pict_button.onclick=function(){ if(pict_nav.length>0){ if(pict_nav[aw_preset[2]].hasAttribute('disable')){ pict_nav[aw_preset[2]].removeAttribute('disable'); } pict_nav[aw_preset[2]].click(); }} for(let k=0; k<pict_nav.length; k++){ pict_nav[k].onclick=function(){ if(k==1){ picto_select2(); } // 絵文字のパレットを記録に従って開く storage_w(2, k); }}} // 履歴・絵文字の選択をローカルストレージ 保存 function picto_select2(){ let pict_nav2=document.querySelectorAll('.js-pictograph-subNav'); if(pict_nav2.length>0){ pict_nav2[aw_preset[3]].click(); } for(let k=0; k<pict_nav2.length; k++){ pict_nav2[k].onclick=function(){ storage_w(3, k); }}} // 絵文字のパレット選択をローカルストレージ 保存 function coax_select(){ let coax_nav=document.querySelectorAll('.js-coax-nav'); let coax_button=document.querySelector('button[data-tab-content="coax"]'); coax_button.onclick=function(){ if(coax_nav.length>0){ coax_nav[aw_preset[4]].click(); }} for(let k=0; k<coax_nav.length; k++){ coax_nav[k].onclick=function(){ storage_w(4, k); }}} // おねだりバナーの選択をローカルストレージ 保存 function design_select(){ let design_nav=document.querySelectorAll('.entryDesignSidePanelHeaderTab__button'); let design_button=document.querySelector('button[data-tab-content="entryDesign"]'); design_button.onclick=function(){ if(design_nav.length>0){ design_nav[aw_preset[7]].click(); }} for(let k=0; k<design_nav.length; k++){ design_nav[k].onclick=function(){ storage_w(7, k); }}} //「見出し・テキスト」の選択をローカルストレージ 保存 let monitor1=new MutationObserver(photo_pos); monitor1.observe(p_images, {childList: true, subtree: true}); // 画像リストの変化を監視開始 function photo_pos(){ let item=document.querySelectorAll('.p-images-imageList__item'); for(let k=0; k<item.length; k++){ set_pos(k); } function set_pos(k){ // 画像の挿入時に配置指定を実行 item[k].addEventListener('mouseup', function(){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ // iframe読込みが実行条件 let iframe_doc=editor_iframe.contentWindow.document; setTimeout(()=>{ let post_img_p=iframe_doc.getSelection().anchorNode; if(aw_preset[1]==1){ post_img_p.setAttribute("style", "text-align: center;"); } else if(aw_preset[1]==2){ post_img_p.setAttribute("style", "text-align: right;"); } }, 10); setTimeout(()=>{ dialogue(); }, 20); }}); } // set_pos() } // photo_pos() let target2=document.getElementById('cke_1_contents'); // 監視 target let monitor2=new MutationObserver(dialogue); monitor2.observe(target2, {childList: true}); // ショートカット待受け開始 dialogue(); function dialogue(){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ // iframe読込みが実行条件 let iframe_doc=editor_iframe.contentWindow.document; let post_img=iframe_doc.querySelectorAll('.cke_editable img'); for(let k=0; k<post_img.length; k++){ post_img[k].addEventListener('click', function(event){ if(!event.ctrlKey){ setTimeout(()=>{ get_set(); }, 20); } if(event.ctrlKey){ // 画像を「Ctrl+Click」 event.stopImmediatePropagation(); setTimeout(()=>{ set_order_size(post_img[k]); // 画像指定幅を設定 }, 20); } }); } function get_set(){ // 画像ダイアログのサイズ・位置選択を取得 let size_button=document.querySelectorAll('.js-image-size-button'); for(let k=0; k<size_button.length; k++){ size_button[k].addEventListener('mouseup', function(){ storage_w(0, k); // サイズ選択をローカルストレージ 保存 photo_size(); }); } // 右パレットのサイズボタンを押す let pos_button=document.querySelectorAll('.ck-imgJustify'); for(let k=0; k<pos_button.length; k++){ pos_button[k].addEventListener('mouseup', function(){ if(pos_button[k].classList.contains('ck-imgJustify--active')!=true){ storage_w(1, k); } // 位置選択をローカルストレージ 保存 else { storage_w(1, 0); }}); } // 位置リセットをローカルストレージ 保存 get_order_size(); // カスタム画像幅を取得 } // get_set() }} // dialogue() function get_order_size(){ let imageeditWidth=document.querySelector('#js-imageeditWidth'); if(imageeditWidth){ imageeditWidth.focus(); // 「Ctrl」キーでダイアログが消えるのを防ぐ imageeditWidth.onclick=(event)=>{ if(event.ctrlKey){ let ok=confirm(" 🔴 カスタム画像幅の登録を変更しますか?"); if(ok){ storage_w(8, imageeditWidth.value); }}}}} function set_order_size(img){ let img_width=img.clientWidth; let img_height=img.clientHeight; if(aw_preset[8]!=0){ img.setAttribute('width', aw_preset[8]); let set_height= Math.round(aw_preset[8]*img_height/img_width); img.setAttribute('height', set_height); size_disp(img, aw_preset[8], set_height); }} function size_disp(img, w, h){ let cke=document.querySelector('#cke_1_contents'); let cke_Rect=cke.getBoundingClientRect(); let cke_x=cke_Rect.left; let cke_y=cke_Rect.top; let clientRect=img.getBoundingClientRect(); let x=clientRect.left + cke_Rect.left + window.pageXOffset + 2; let y=clientRect.top + cke_Rect.top + window.pageYOffset + 6; let panel= '<div class="disp">'+ w +' × '+ h + '<style>.disp { position: fixed; top: '+ y +'px; left: '+ x +'px; z-index: 20; '+ 'font: normal 14px Meiryo; color: #000; '+ 'padding: 2px 6px 0; background: #fff; border: 1px solid #2196f3; } '+ '</style></div>'; if(document.querySelector('.disp')){ document.querySelector('.disp').remove(); } document.body.insertAdjacentHTML('beforeend', panel); setTimeout(()=>{ if(document.querySelector('.disp')){ document.querySelector('.disp').remove(); } }, 2000); let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ let iframe_doc=editor_iframe.contentWindow.document; iframe_doc.addEventListener('scroll', ()=>{ if(document.querySelector('.disp')){ document.querySelector('.disp').remove(); }}); }} function calendar(){ let js_calendar=document.querySelector('#js-calendarClickBox'); js_calendar.onclick=function(){ let time_set=document.querySelectorAll('.l_calendar__inputTimeContainer input'); for(let k=0; k<time_set.length; k++){ time_set[k].setAttribute('type', 'number'); wheel_input(time_set[k]); } function wheel_input(elem){ elem.onwheel=function(event){ // マスウホイールで設定可能にする event.preventDefault(); if(event.deltaY<0 && elem==document.activeElement){ elem.stepUp(); } else if(event.deltaY>0 && elem==document.activeElement){ elem.stepDown(); } if(elem==Day){ Day.blur(); setTimeout(()=>{ Day.focus(); }, 2); }}} let Month=document.querySelector('#js-calInputMonth'); Month.setAttribute('min', 1); Month.setAttribute('max', 12); let Day=document.querySelector('#js-calInputDay'); Day.setAttribute('min', 1); Day.setAttribute('max', 31); let Hours=document.querySelector('#js-calInputHours'); Hours.setAttribute('min', 0); Hours.setAttribute('max', 23); let Minutes=document.querySelector('#js-calInputMinutes'); Minutes.setAttribute('min', 0); Minutes.setAttribute('max', 59); let Seconds=document.querySelector('#js-calInputSeconds'); Seconds.setAttribute('min', 0); Seconds.setAttribute('max', 59); setTimeout(()=>{ Day.focus(); }, 40); Hours.onclick=function(event){ if(event.ctrlKey){ Hours.value=0; }} Minutes.onclick=function(event){ if(event.ctrlKey){ Minutes.value=0; }} Seconds.onclick=function(event){ if(event.ctrlKey){ Seconds.value=0; }} let OkButton=document.querySelector('#js-calOkButton'); OkButton.addEventListener('mousedown', function(event){ if(event.ctrlKey){ OkButton.disabled=true; Hours.focus(); Hours.value=aw_preset[5]; Minutes.focus(); Minutes.value=aw_preset[6]; Seconds.focus(); Seconds.value=0; setTimeout(()=>{ OkButton.disabled=false; OkButton.click(); }, 500); } else if(event.shiftKey){ let ok=confirm(" 🔴 MEMO登録を変更しますか?"); if(ok){ event.stopImmediatePropagation(); OkButton.textContent='MEMO'; OkButton.disabled=true; Seconds.focus(); Seconds.value=0; setTimeout(()=>{ OkButton.disabled=false; }, 500); setTimeout(()=>{ OkButton.textContent='決定'; }, 2000); storage_w(5, Number(Hours.value)); storage_w(6, Number(Minutes.value)); } else{ event.stopImmediatePropagation(); } }}); }} // calendar() function storage_w(ele, val){ // 編集環境のローカルストレージ保存 aw_preset[ele]=val; let write_json=JSON.stringify(aw_preset); localStorage.setItem('AWriter_Preset', write_json); } } // environ() function keep_left(){ let target=document.getElementById('cke_1_contents'); // 監視 target let monitor3=new MutationObserver(align_left); monitor3.observe(target, {childList: true}); // ショートカット待受け開始 align_left(); function align_left(){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ // iframe読込みが実行条件 let iframe_doc=editor_iframe.contentWindow.document; let iframe_body=iframe_doc.querySelector('body.cke_editable'); iframe_doc.execCommand('defaultParagraphSeparator', false, 'p') iframe_doc.addEventListener("keydown", check_key); function check_key(event){ if(event.keyCode==13){ //「Enter」キー入力 setTimeout(()=>{ let ac_node=iframe_doc.getSelection().anchorNode; if(ac_node.tagName=='P' && (ac_node.style.textAlign=='left' || ac_node.style.textAlign=='center' || ac_node.style.textAlign=='right')){ ac_node.style.textAlign=null; if(ac_node.outerHTML.indexOf('<p style="">')!=-1){ ac_node.outerHTML= ac_node.outerHTML.replace('<p style="">', '<p>'); }} }, 10); }}}} // align_left() } // keep_left() function step_size(){ let ua_n=ua+2; // Chromeの場合 /* let ua_n=2; // Chromeの場合 +2 let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua_n=3; } // Firefoxの場合 */ let target=document.getElementById('cke_1_contents'); // 監視 target let monitor4=new MutationObserver(flex_edit); monitor4.observe(target, {childList: true}); // ショートカット待受け開始 flex_edit(); function flex_edit(){ let editor_iframe; let iframe_doc; let selection; let range; let clone; let tags; let insert_node; editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ iframe_doc=editor_iframe.contentWindow.document; if(iframe_doc){ iframe_doc.addEventListener('keydown', block_key); document.addEventListener('keydown', block_key); function block_key(event){ if(event.altKey && event.keyCode==37){ //「Alt+⇦」を無効化 event.preventDefault(); }} iframe_doc.addEventListener('keydown', check_key); document.addEventListener('keydown', check_key); function check_key(event){ // disp_tag(); // 取得range状態のチェック用 ● if(event.ctrlKey && event.keyCode==13){ //「Ctrl+Enter」 event.preventDefault(); event.stopImmediatePropagation(); if(check_tag()==0){ creat_super(); } else if(check_tag()==1){ more(event.ctrlKey, event.keyCode); }} else{ if(event.altKey && event.keyCode==38){ //「Alt+▲」 event.preventDefault(); event.stopImmediatePropagation(); if(check_tag()==0){ first(event.altKey, event.keyCode); } else if(check_tag()==1){ more(event.altKey, event.keyCode); } else if(check_tag()==ua_n){ more2(event.altKey, event.keyCode); }} if(event.altKey && event.keyCode==40){ //「Alt+▼」 event.preventDefault(); event.stopImmediatePropagation(); if(check_tag()==0){ first(event.altKey, event.keyCode); } else if(check_tag()==1){ more(event.altKey, event.keyCode); } else if(check_tag()==ua_n){ more2(event.altKey, event.keyCode); }} if(event.ctrlKey && event.keyCode==38){ //「Ctrl+▲」 event.preventDefault(); event.stopImmediatePropagation(); if(check_tag()==0){ first(event.ctrlKey, event.keyCode); } else if(check_tag()==1){ more(event.ctrlKey, event.keyCode); } else if(check_tag()==ua_n){ more2(event.ctrlKey, event.keyCode); }} if(event.ctrlKey && event.keyCode==40){ //「Ctrl+▼」 event.preventDefault(); event.stopImmediatePropagation(); if(check_tag()==0){ first(event.ctrlKey, event.keyCode); } else if(check_tag()==1){ more(event.ctrlKey, event.keyCode); } else if(check_tag()==ua_n){ more2(event.ctrlKey, event.keyCode); }}} function check_tag(){ selection=iframe_doc.getSelection(); range=selection.getRangeAt(0); clone=selection.getRangeAt(0).cloneContents(); tags=clone.querySelectorAll( 'span, p, a, b, br, div, em, h1, h2, h3, h4, i, img, s'); if(range.collapsed){ return -1; } // 選択範囲が無い時は動作しない else{ return tags.length; }} // function disp_tag(){ // 取得range状態のチェック用 ● // let box=document.querySelector('#cke_8'); // box.style.font="bold 16px/30px Meiryo"; // box.innerHTML=check_tag(); } } // check_key() function creat_super(){ insert_node=iframe_doc.createElement('span'); insert_node.setAttribute('style', 'vertical-align:super;'+ 'line-height:0;font-size:0.8em'); insert_node.textContent=range.toString(); try{ range.surroundContents(insert_node); disp_tag(insert_node); } catch(e){;}} function first(ac, key){ insert_node=iframe_doc.createElement('span'); if(ac==event.altKey){ if(key==38){ //「Alt+▲」 insert_node.setAttribute('style', 'font-size:1.1em'); } else if(key==40){ //「Alt+▼」 insert_node.setAttribute('style', 'font-size:0.9em'); }} else if(ac==event.ctrlKey){ if(key==38){ //「Ctrl+▲」 insert_node.setAttribute('style', 'font-size:1.1em;'+ 'line-height:0;background:transparent;'); } else if(key==40){ //「Ctrl+▼」 insert_node.setAttribute('style', 'font-size:0.9em;'+ 'line-height:0;background:transparent;'); }} insert_node.textContent=range.toString(); try{ range.surroundContents(insert_node); disp_tag(insert_node); } catch(e){;}} function more(ac, key){ let span=clone.querySelector('span'); if(span){ let size_raw=span.style.getPropertyValue('font-size'); let vertical=span.style.getPropertyValue('vertical-align'); if(size_raw.indexOf('em')!=-1 && size_raw.indexOf('rem')==-1){ let size=parseFloat(size_raw.replace(/[^0-9\.]/g, '')); if(key==38 && size<3){ //「▲」 size=Math.round((size+0.1)*10)/10; } else if(key==40 && size>0.3){ //「▼」 size=Math.round((size-0.1)*10)/10; } let size_css; if(ac==event.altKey){ size_css='font-size:' +size+ 'em;'; if(vertical){ size_css +='vertical-align:super;'; }} else if(ac==event.ctrlKey && key!=13){ size_css='font-size:' +size+ 'em;'+ 'line-height:0;background:transparent;'; if(vertical){ size_css +='vertical-align:super;'; }} else if(ac==event.ctrlKey && key==13){ size_css='font-size:' +size+ 'em;'+ 'line-height:0;background:transparent;vertical-align:super;'; } insert_node=iframe_doc.createElement('span'); insert_node.setAttribute('style', size_css); insert_node.textContent=range.toString(); try{ range.deleteContents(); range.insertNode(insert_node); disp_tag(insert_node); } catch(e){;}}} let br=clone.querySelector('br'); if(br){ more2(ac, key); }} function more2(ac, key){ if(range.startContainer.nodeType==Node.TEXT_NODE){ let latter=range.startContainer.splitText(range.startOffset); range.setStartBefore(latter); range.setEndAfter(latter); insert_node=iframe_doc.createElement('span'); if(ac==event.altKey){ if(key==38){ insert_node.setAttribute('style', 'font-size:1.1em'); } else if(key==40){ insert_node.setAttribute('style', 'font-size:0.9em'); }} else if(ac==event.ctrlKey){ if(key==38){ insert_node.setAttribute('style', 'font-size:1.1em;'+ 'line-height:0;background:transparent;'); } else if(key==40){ insert_node.setAttribute('style', 'font-size:0.9em;'+ 'line-height:0;background:transparent;'); }} insert_node.textContent=range.toString(); try{ range.surroundContents(insert_node); disp_tag(insert_node); } catch(e){;}}} function disp_tag(inserted_node){ let lineheight; if(inserted_node.style.lineHeight=='0'){ lineheight='♦' } else{ lineheight=' ' } let size=inserted_node.style.fontSize; let cke_lavel; if(ua_n==3){ cke_lavel=document.querySelector('#cke_6_text'); } else{ cke_lavel=document.querySelector('#cke_7_text'); } cke_lavel.textContent=lineheight + size; cke_lavel.removeAttribute('id'); cke_lavel.parentNode.style.background='#2196f3'; cke_lavel.style.color='#fff'; setTimeout(()=>{ if(ua_n==3){ cke_lavel.parentNode.style.background=''; cke_lavel.style.color=''; cke_lavel.setAttribute('id', 'cke_6_text'); } else{ cke_lavel.parentNode.style.background=''; cke_lavel.style.color=''; cke_lavel.setAttribute('id', 'cke_7_text'); } }, 500); } }}} // flex_edit() } // step_size() function photo_list(){ let ptabButton_span=document.querySelector('#js-photo-tabButton span'); if(ptabButton_span){ let help_SVG= '<svg class="help_ek" viewBox="0 0 210 220">'+ '<path d="M89 22C71 25 54 33 41 46C7 81 11 142 50 171C58 177 '+ '68 182 78 185C90 188 103 189 115 187C126 185 137 181 146 175'+ 'C155 169 163 162 169 153C190 123 189 80 166 52C147 30 118 18'+ ' 89 22z" style="fill: currentColor;"></path>'+ '<path d="M67 77C73 75 78 72 84 70C94 66 114 67 109 83C106 91'+ ' 98 95 93 101C86 109 83 116 83 126L111 126C112 114 122 108 1'+ '29 100C137 90 141 76 135 64C127 45 101 45 84 48C80 49 71 50 '+ '68 54C67 56 67 59 67 61L67 77M85 143L85 166L110 166L110 143L'+ '85 143z" style="fill:#fff;"></path>'+ '<style>.help_ek { position: absolute; left: 41%; width: 18px; }'+ '</style></svg>'; ptabButton_span.insertAdjacentHTML('beforeend', help_SVG); } let help=document.querySelector('.help_ek'); if(help){ help.onclick=(event)=>{ event.preventDefault(); event.stopImmediatePropagation(); let url='https://ameblo.jp/personwritep/entry-12777587120.html'; window.open(url, '_blank'); }} let ptabButton=document.querySelector('#js-photo-tabButton'); if(ptabButton){ ptabButton.onclick=function(){ if(!document.querySelector('#EKI')){ let lmain=document.querySelector('.l-main'); let lsideModule=document.querySelector('.l-sideModule__content'); let psm_h; let psm_w; if(lmain && lsideModule){ psm_h=lsideModule.clientHeight - 140; psm_w=lmain.clientWidth - 2; } let style= '<style id="EKI">'+ '.l-sideModule { z-index: 4; } '+ '.p-sideModule__content { overflow: visible; } '+ '#js-photos-wrapper.p-sideModule__inner { position: absolute; top: 140px; right: 0; '+ 'background: #fff; outline: 1px solid #ccc; } '+ '#js-photos-wrapper.p-sideModule__inner { height: '+ psm_h +'px; width: '+ psm_w +'px; } '+ '#js-photos-wrapper .p-images-imageList__body { padding: 7px 0 10px 6px !important; } '+ '#js-photos-wrapper .p-images-imageList__listItem { margin-right: 4px !important; '+ 'width: 186px !important; height: 124px !important; }</style>'; document.documentElement.insertAdjacentHTML('beforeend', style); } else{ document.querySelector('#EKI').remove(); }}} } // photo_list()
「Editor Keeper ⭐📛」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Editor Keeper ⭐📛」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。