「Edge」の絵文字フォントの扱いが修正されていました
絵文字フォントの扱いはデリケートで、OSをWindows10に限った場合でも、ブラウザが絵文字をどの様に表示するかは、「ブラウザ」「ウェブアプリ」「サイトのシステム」等により変わる事がある様です。(アメブロ絵文字の話ではありません)
今年初頭に ChromeのOEM版と言える新Edgeがリリースされました。 当時 Chromeと表示上の差異を調べると、この「Editor Keeper ⭐ 📛」の起動表示アイコンが、新Edgeと Chromeとで異なる事に気付きました。
ツールのプログラム上で同じ文字を指定しているのに、Chromeは従来の記号文字、新EdgeはWin10絵文字で表示されています。 詳細は以下のページにあります。
Win10絵文字は文字絵柄のサイズが異なり、「⏏」の記号文字でデザインしたアイコンにそぐわないので、仕方なくEdgeのみ別フォントを表示して来ました。
しかし、先日「Editor Keeper ⭐ 📛」のコードを見直すと、Edgeと Chrome とで同じに表示になる事が判りました。 これは Edgeが修正されたのではなく、アメブロのシステムが変更されたのではないかと考えていますが、ともあれ喜ぶべき事です。
改めて、このアイコン部分のコードは、Chrome・Edge の共通コードにしました。
「Editor Keeper ⭐ 📛」を少し紹介
編集画面ヘッダー部の「管理トップへ」のリンクボタンは、「編集画面」を閉じてしまう仕様です。 このため何度か編集途中の記事を失い、このリンクを「別のウインドウ(タブ)で開く」仕様に変更しようと考えたのです。 それが「Editor Keeper」の最初の目的でした。
この目的は簡単に実現しましたが、JavaScriptを扱い始めた頃で、ツールが時々起動に失敗するありさまでした。 ツールの起動問題は、上記のアイコン表示で確認する事や、起動コード自体を何度か改善して、現在は確実なものになっています。
また、編集時に画像のドラック&ドロップを失敗して、やはり書いていた記事を失う事故が何度かあり、これも改善する機能を追加して現在はとても安全になりました。
他の機能として、画像の配置位置(左寄せ・中央配置など)と画像サイズ指定の設定を覚える機能があり、同じ設定なら編集ごとに設定する必要がなくなります。
そして、中央配置の画像の右横で改行すると、多くの場合にテキストが中央配置になりますが、「Enter」で改行すれば必ず左端にキャレットが移動する「キープレフト」の機能があり、これは思った以上に有効です。(テキストの常時中央配置のユーザーには不向きですが)
以上の様な機能を持つツールですが、編集画面になくてはならない「Keeper」です。
「Editor Keeper ⭐ 📛」の 機能一覧
アメブロ最新版エディタに対して、「Editor Keeper ⭐ 📛」は以下の改善をします。 このツールは「Ameblo Writer 」でアレンジした編集画面を前提にデザインされています。(このアレンジが無くても動作はします)
各機能については、それぞれのリンク先を参照ください。
「Editor Keeper ⭐ 📛」の導入手順
このツールは、Chrome・Edge / Firefox の各ブラウザ版「Tampermonkey」で動作を確認しています。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Editor Keeper ⭐ 📛 〕 ver. 2.7
// ==UserScript== // @name Editor Keeper ⭐📛 // @namespace http://tampermonkey.net/ // @version 2.7 // @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 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(); }} function button_disp(){ let ua=0; // Chrome・Edge の場合のフラグ let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ // 以下 起動表示CSSを適用 📛 let css; if(ua==0){ css= '.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 { text-indent: -6.3em !important; height: 31px !important; padding-top: 3px; }'+ '.l-gHeaderLeft__link a:hover { text-indent: 0.4em !important; background: #fff !important; '+ 'width: calc(28px + 6.7em) !important; box-shadow: -10px 0 1px 0 var(--bgc1) !important; }'+ '#globalHeader #gHeaderLeft { width: 280px; }'; } if(ua==1){ css= '.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 { text-indent: -6em !important; height: 30px !important; padding-top: 4px; }'+ '.l-gHeaderLeft__link a:hover { text-indent: 0.7em !important; background: #fff !important; '+ 'width: calc(28px + 6.7em) !important; box-shadow: -10px 0 1px 0 var(--bgc1) !important; }'+ '#globalHeader #gHeaderLeft { width: 280px; }'; } // css=css + ' #js-editor-dropArea { display: none; }'; // 行頭の「//」削除で編集枠へのドロップを抑止します⭕ let style_tag=document.createElement("style"); // css設定styleタグ style_tag.type="text/css"; style_tag.appendChild(document.createTextNode(css)); document.querySelector('.l-body').appendChild(style_tag); } // button_disp() function keeper(){ let target=document.querySelector('.l-gHeaderLeft__link a'); target.setAttribute('target', '_blank'); target.onclick=function(){ if(event.shiftKey){ event.preventDefault(); let amebaId=document.querySelector('.amebaId').textContent; if(amebaId){ let blogurl='https://ameblo.jp/' + amebaId + '/'; window.open(blogurl, "_blank"); }}} window.addEventListener('keydown', function(event){ if(event.shiftKey==true){ target.textContent='ブログトップ'; target.style.boxShadow='#00e2ff -14px 0 0 0 inset'; window.addEventListener('keyup', function(event){ target.textContent='管理トップへ'; target.style.boxShadow='#79fbf6 -14px 0 0 0 inset'; });}}); let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(editor_iframe){ // iframe読込みが実行条件 let iframe_doc=editor_iframe.contentWindow.document; iframe_doc.addEventListener('keydown', function(event){ if(event.shiftKey==true){ target.textContent='ブログトップ'; target.style.boxShadow='#00e2ff -14px 0 0 0 inset'; iframe_doc.addEventListener('keyup', function(event){ 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]; } else{ let db_length=aw_preset.length; for(let k=0; k<5-db_length; k++){ //「5」は配列指定数 aw_preset.push(0); }} let write_json=JSON.stringify(aw_preset); localStorage.setItem('AWriter_Preset', write_json); } // ローカルストレージ 保存 photo_size(); 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); }}} // サイズ選択をローカルストレージ 保存 picto_select1(); function picto_select1(){ let pict_nav=document.querySelectorAll('.js-pictograph-nav'); let pict_button=document.querySelector('button[data-side-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); }}} // 絵文字のパレット選択をローカルストレージ 保存 coax_select(); function coax_select(){ let coax_nav=document.querySelectorAll('.js-coax-nav'); let coax_button=document.querySelector('button[data-side-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); }}} // おねだりバナーの選択をローカルストレージ 保存 let p_images=document.querySelector('.p-images-imageList__body'); // 監視 target let monitor=new MutationObserver(photo_pos); monitor.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() 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(){ setTimeout(()=>{ get_set(); }, 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_set() }} // dialogue() 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 monitor=new MutationObserver(align_left); monitor.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()
「Editor Keeper ⭐📛」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Editor Keeper ⭐📛」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。