「ドラッグ&ドロップ」機能の功罪
「最新版エディタ」では、デスクトップ等の画像ファイルをドラッグして「編集枠」や「画像リスト」にドロップする事で、画像挿入や画像アップロードができます。 この機能を利用される方も多いと思いますが、私は「画像リスト」側では使いますが、「編集枠」側は利用しません。
❶ 挿入されるカーソル位置の確認が必要で、「画像リスト」から挿入する方が落ち着いて出来る。「編集枠」にドラッグする場合は、カーソル位置が見えない。
❷ 正しいドロップ範囲に落とさないと、「編集画面」が遷移して編集中の記事を失ってしまう事がある。
特に ❷は、相当痛い思いをしているので、今回、ツールで防止策の対応をしました。
❶ の原因は「Ameblo Writer」にもある
ドラッグ&ドロップの問題点を調べると、「編集枠」へのドロップで表示される「カバー画像」が消えない問題を「Ameblo Writer」が作っていました。
ドロップを受取る範囲を「ドロップエリア」と言いますが、この高さがデフォルトの編集枠の高さのままでした。 ドラッグ中の画像がエリア下辺へ抜けると「カバー画像」が消えなくなります。 再度上辺へ抜くと消える事が、昨日やっと判りました。 これまで私は、「HTML表示」にして「通常表示」に戻して消していました。
いずれにせよ、これは「ドロップエリア」の高さが完全な場合は生じません。 この問題は「Ameblo Writer (Compact) ver. 30」で修復しました。
ご利用の皆さん、申し訳ありません。n(><)m
もっとも、この「編集枠」が「カバー画像」で見えなくなる仕様は、やはり私は好みでなく、「Stylus」のローカルスタイルで、以下の抑止コードを設定しました。
適用先： ｢次で始まるURL｣ = ｢ https://blog.ameba.jp/ucs/entry/srventry ｣
これで、編集枠上の「カバー画像」は表示されなくなり、同時に「編集枠でのドラッグ&ドロップ」は出来なくなります。（画像リスト側はドロップ可能です）
このCSSと同等の修飾が、 「Editor Keeper ⭐📛」ver. 2.3 の66行目「⭕印」の行頭のコメントアウト「//」を削除すると有効になります。「編集枠」でのドラッグ&ドロップを好まない方は、行頭の「//」だけを消してください。
〔追記〕 2022.09.02
Editor Keeper ⭐📛」ver.3.7 以降は、66行目のこのオプション行を廃止しました。 「ドラッグ&ドロップ表示（編集枠上）を非表示」にする機能が必要な場合は、以下の「Ameblo Wysiwyg」にその機能があるので、そちらの導入を検討ください。
❷ ドロップの失敗の実情
「再編集」時は、想定外の操作で「編集画面」が遷移すると、それまでの再編集の内容を失います。 時には、数時間をかけた作業が無に帰してしまいます。
画像や画像以外のファイルやリンク等を「編集画面」上にドラッグした時、例えば画像のドロップ場所が正確でなかった場合、以下の様にブラウザが画像を表示した状態になります。
この状態は既に遷移後で、もう編集データは戻りません。 以下のピンクの範囲は、デフォルトの「最新版エディタ」で「ドロップ失敗」となる場所です。
また以下のピンクの範囲は、「Ameblo Writer (Compact)」のアレンジ下で、「ドロップ失敗」となる場所です。
経験上では、「編集画面」の右サイドの余白に落としてしまう事が多いです。
〔追記〕 2022.09.02
ブラウザ画面へのドラッグ&ドロップがユーザー意図に反して遷移を生じる問題は、後に「他のタブ」に開く仕様にブラウザ側で改善されました。 調べると Chromeでの改善は「85.0.4163.0」以降とあり、 2020年夏以降と思われます。
しかし、編集画面の不本意な反応自体を問題と考えるため、以下の対策コードはこのツールにより常に機能する様にしています。
ただし、後期の Amebaのシステム更新の結果と思われますが、Webリンクのみは、通常表示編集画面の「編集枠」上にドロップ可能になり、リンクカードが生成される様になりました。 これは、大きな問題にならないので、そのまま許容しています。
ドロップの失敗をカバーするコード
「最新版エディタ」にドラッグ&ドロップを採り入れるなら、ドロップ失敗の対策をすべきでしたが、そこまでは考えなかった様です。 そもそも「Editor Keeper ⭐📛」は、デフォルトの「管理トップへ」ボタンによる、同様の失敗防止のために作ったもので、この問題にも対処しました。
ブラウザのウインドウは、デフォルトでドラッグ&ドロップに対応し、この様な問題の対策が必要になる事は多く、良いコードが簡単に見つかりました。
このコードをそのまま使いましたが、本来のドラッグ&ドロップ機能に影響せず、その指定がない範囲（ピンクの範囲）でのみ、ドロップに反応しなくなります。
これで、自分で閉じる以外に編集内容を失う事はなくなるでしょう。
画像配置（左寄せ・中央寄せ・右寄せ）のコードを修正
文書に挿入した画像は「p要素」の中に納まり、収めた「p要素」を修飾する3種の指定「指定なし」「text-align: center」「text-align: right」により、画像の「左寄せ・中央寄せ・右寄せ」がコントロールされます。 この配置方法はデフォルトのエディタの方式です。
このツールは、画像を挿入時に「画像配置」を記録に従った通りにするために、挿入の瞬間をトリガーにしてスクリプトを実行します。 スクリプトの仕事は「p要素」に上記の3種のコードのどれかを書き込む事です。
これまでのテストでは、記事の途中に挿入する行=「p要素」がある場合は、問題がなかったのですが、行が文末にある場合は、しばしば「配置設定」の書き込みに失敗する事が判りました。
エディタの画像コードの書き込みと、このツールの書き込み操作は、ほんの瞬間に生じる事ですが、文末の場合には僅かにエディタの処理を待つ必要がある様です。
上記の待機関数の「setTimeout()」を加える事で、この問題は解消しました。 画像配置に関するコードは、この様なタイミングが問題になる箇所が多くあります。
「Editor Keeper ⭐📛」ver. 2.3
このツールは Chrome / 新Edge / Firefox の「Tampermonkey」で動作します。
このツールの他の機能については、以下のページを参照ください。
編集画面を閉じずに「ブログトップ」「管理トップ」を開くスイッチ
ツールの導入方法
以下のコードを「Tampermonkey」の新規スクリプトの作成画面にコピー&ペーストして保存する事で、このツールを利用する事が出来ます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Editor Keeper ⭐📛 〕 ver. 2.3
// ==UserScript==
// @name Editor Keeper ⭐📛
// @namespace http://tampermonkey.net/
// @version 2.3
// @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();
preview_line();
}}
function button_disp(){
let ua=0; // Chromeの場合のフラグ
let agent=window.navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ
if(agent.indexOf('edg') > -1){ ua=2; } // NEdgeの場合のフラグ
// 以下 起動表示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; }'; }
if(ua==2){
css=
'.l-gHeaderLeft__link a:before { content: "" !important; }'+
'.l-gHeaderLeft__link a:after { content: "\\EA37" !important; '+
'font: normal 30px/8px ameba-symbols !important; top: 10px !important; left: 3px !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; }'; }
// 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){
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 preview_line(){
let native_line;
let preview_button=document.querySelector('.p-header__tab__item__preview');
preview_button.onclick=function(){
let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){ // iframe読込みが実行条件
let iframe_doc=editor_iframe.contentWindow.document;
native_line=iframe_doc.querySelector('html').scrollTop; // 通常表示のスクロール位置を取得
let retry0=0;
let interval0=setInterval(wait_preview, 50);
wait_preview();
function wait_preview(){
retry0 ++;
if(retry0>40){ // リトライ制限 40回 2sec
clearInterval(interval0); }
let target_iframe=document.querySelector('#js-preview-frame-pc'); // 監視 target
if(target_iframe){
let target_html=target_iframe.contentWindow.document.querySelector('html');
target_html.style.scrollBehavior='initial';
if(target_iframe && target_html.scrollTop!=0){
clearInterval(interval0);
target_html.style.scrollBehavior='initial';
setTimeout(()=>{
let entry=target_html.querySelector('[data-uranus-component="entryBody"]');
entry.scrollIntoView();
}, 100);
setTimeout(()=>{
target_html.scrollBy(0, native_line);
}, 200); }}}}}
let return_edit_button=document.querySelector('.js-tab-header[data-tab="edit"]');
return_edit_button.onclick=function(){
let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){ // iframe読込みが実行条件
let iframe_doc=editor_iframe.contentWindow.document;
iframe_doc.querySelector('html').scrollTop=native_line; }}
} // preview_line()
「Editor Keeper ⭐📛」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Editor Keeper ⭐📛」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
