ダイアログの上の「リンク」の安全にする
「ユーザーが編集データをリンクによる遷移で失ってしまう事」に対して、アメーバのブログシステムはずいぶんと適当に出来ています。 スマホ版のアメーバアプリでは、編集記事データの保全に工夫を重ねている様ですが、少なくともPCでアメーバブログを運用する場合は、とても注意が要ります。
ブログシステム(ウエブアプリケーション)上での「編集データの保全」に、もっと注意を払っても良いと思うのですが...
「ブログ編集画面」のアレンジや、ブログ編集の補完ツールを制作する過程で、この「遷移でのデータ損失」に対する対策を、色々な場所で何度も行って来ました。 更新された「コメントダイアログ」でも同様の問題があるので、対策を講じました。
「グローバルヘッダー」が必要か?
更新された「コメントダイアログ」の左上部に「アメーバアイコン」があり、このヘッダー部分はブログ管理画面の「グローバルヘッダー」と同じ機能がある様です。 HTMLを調べると、ダイアログの幅を「768px」以上に拡げると、本来のリンク等が表示される設定になっています。
「リンクをクリックすると編集中のコメントを遷移で失ってしまう」ので、敢えて隠す様にしたのだと思われます。(アメーバロゴもHOMEへのリンクで、同じ危険がありますが)
このヘッダーの右側のボタンから各種メニューが表示され、コメントに関するブログ設定も揃っています。「コメントダイアログ」からブログ管理画面(設定)を直接開くことが出来るので、この様なメニューが便利な場合があるかも知れません。
しかし、やはりこの画面は「コメント編集」の画面です。 もし書きかけのコメントがあると、リンクをクリックした途端にそれを失います。「たかが数行、また書き直せばよい」といった考えは判らないでもないですが、一事が万事では。 俳句の17文字は、その「たかが一行」です。
対策コード
以下のコードは、「Lightbox」で使い始めたコードで、動的にHTML上に生成される要素(この場合はリンク)に対して有効に機能します。
◎クリックした要素を調べて「a要素」であるか判定する。
◎「a要素」なら「target="_blank"」の属性を追加する。
ヘッダーのボタンをクリックして表示されるメニューには、沢山のリンクがありますが、それらはボタンをクリックするまでHTML上には無い要素です。 従って、それらのリンク全てに「target="_blank"」の属性を追加するためには、ボタンのクリック操作を取得する所から、コードを始める必要があります。
これはボタン毎に「EventListener」を仕掛けるか、「MutationObserver」を設定するなど、少々手間でリスクも伴う事になります。
しかし上のコードはそんな必要がなく、ユーザーがクリックする「a要素」の全てに必要な属性を追加し、HTML上に後から生成される「a要素」にも有効です。 このコードの注意点はページ上の全「a要素」に働く事で、逆に「遷移」が必要なリンクがないかの確認が要ります。 幸い「コメントダイアログ」はシンプルで、問題はない様です。
このコードは、「Comment Beautify」の末尾に「お守り」の様に追加しました。 気になる方はテストをしてください。 全てのリンクは別ウインドウで開きます。
上記コードの部分的な適用
ページ上のリンクを全て「別ウインドウ」や「別タブ」で開く様にする便利なコードとして、上記のコードは色々な場面でそのまま使えると思います。
初行の「document.addEventListener~」の「document」の部分を、「リンクが置かれた範囲を包括する要素」に変更すれば、コードの適用範囲を制限できます。 ページ上の一部のリンクだけ「別ウインドウ」で開く様に出来るでしょう。
「Comment Beautify」の機能と操作方法
以下のページのマニュアルを参照ください。
「Comment Beautify」を利用するには
Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で「Comment Beautify」は動作します。
このツールは「Tampermonkey」上で常に「ON」にしておく常駐型ツールです。 コメント文の整形機能に関して、ユーザーは何もする必要はありません。 ツールはコメント送信時にのみ自動的に動作して、環境の負担になる事は殆どありません。
以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Comment Beautify 〕 ver. 0.6
// ==UserScript== // @name Comment Beautify // @namespace http://tampermonkey.net/ // @version 0.6 // @description コメント送信画面の文末空白行を削除 // @author Ameba Blog User // @match https://comment.ameba.jp/* // @noframes // @grant none // ==/UserScript== let ua=0; let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラッグ if(ua==0){ let set_posx=get_cookie('item_posx'); let set_posy=get_cookie('item_posy'); if(set_posx<0){ set_posx=0; } if(set_posy<0){ set_posy=0; } window.moveTo(set_posx, set_posy); document.cookie='item_posx='+ set_posx +'; Max-Age=2592000'; document.cookie='item_posy='+ set_posy +'; Max-Age=2592000'; let set_sizex=get_cookie('item_sizex'); let set_sizey=get_cookie('item_sizey'); if(set_sizex<534){ set_sizex=534; } if(set_sizey<568){ set_sizey=568; } window.resizeTo(set_sizex, set_sizey); document.cookie='item_sizex='+ set_sizex +'; Max-Age=2592000'; document.cookie='item_sizey='+ set_sizey +'; Max-Age=2592000'; } let set_color=get_cookie('item_color_set'); if(set_color==0){ set_color='#f8f8f8'; } document.cookie='item_color_set='+ set_color +'; Max-Age=2592000'; setTimeout(()=>{ let svg_icon= '<svg viewbox="0 0 512 512"><path d="M512 256c0 7-3 13-8 18l-80 '+ '72C420 350 414 352 408 352c-3 0-7-1-10-2C390 346 384 338 384 '+ '328V288h-96v96l40-0c9 0 18 6 22 14s2 19-4 26l-72 80C269 509 263 '+ '512 255 512s-13-3-18-8l-71-80c-6-7-8-17-4-26s12-14 22-14l39 '+ '0V288H128v40c0 9-6 18-14 22C111 351 107 352 104 352c-6 '+ '0-12-2-16-6l-80-72C3 269 0 263 0 256s3-13 8-18l80-72C95 160 105 '+ '158 114 162C122 166 128 175 128 184V224h95V128l-39-0c-9 '+ '0-18-6-22-14S160 95 166 88l71-80c9-10 27-10 36 0l72 80c6 7 8 17 4 '+ '26s-12 14-22 14l-40 0V224H384V184c0-9 6-18 14-22c9-4 19-2 26 '+ '4l80 72C509 243 512 249 512 256z"></path></svg>'; let help_icon= '<svg class="cb_h" height="24" width="26" 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:#aaa;"></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>'+ '</svg>'; let controll= '<span id="controll">'; if(ua==0){ controll += ' Position: <i id="pos_sw">'+ svg_icon +'</i> '+ 'Color: <input id="color_sw" type="color">'+ help_icon + '<style>#controll { margin: 3px 10px 0 auto; } '+ '#pos_sw { display: inline-block; width: 20px; height: 20px; '+ 'vertical-align: -2px; border: 1px solid #777; cursor: pointer; } '+ '#pos_sw svg { height: 16px; width: 18px; padding: 1px; fill: #666; } '+ '#color_sw { width: 24px; height: 28px; border: none; '+ 'vertical-align: -4px; background-color: transparent; cursor: pointer; }'; } if(ua==1){ controll += ' Color: <input id="color_sw" type="color">'+ help_icon + '<style>#controll { margin: 4px 10px 0 auto; } '+ '#color_sw { width: 20px; height: 20px; border: none; '+ 'vertical-align: -4px; background-color: transparent; cursor: pointer; }'; } controll += '.cb_h { margin-left: 12px; vertical-align: -7px; cursor: pointer; } '+ 'body { background: '+ set_color +'; } '+ '.GlobalHeader_icon__TVS_s { margin-top: 5px; } '+ '.CommentWebEntry_root__pLKy7 { background: rgb(255 255 255 / 60%); } '+ '</style></span>'; let header=document.querySelector('header.GlobalHeader_root__VSLOQ'); if(header && !header.querySelector('#controll')){ header.insertAdjacentHTML('beforeend', controll); } let help=document.querySelector('#controll .cb_h'); if(help){ let help_url='https://ameblo.jp/personwritep/entry-12800578545.html'; help.onclick=()=>{ window.open( help_url, null, '_blank'); }} let color_sw=document.querySelector('#color_sw'); if(color_sw){ color_sw.value=set_color; color_sw.onchange=function(){ let body_=document.querySelector('body'); body_.style.background=color_sw.value; document.cookie='item_color_set='+ color_sw.value +'; Max-Age=2592000'; }} let pos_sw=document.querySelector('#pos_sw'); if(pos_sw){ pos_sw.onclick=function(){ let result=window.confirm( " 🔵 現在のコメントウインドウの「サイズ」と「位置」を記録します\n"+ " ➔ 次回も 同じサイズ・位置に このウインドウを表示します"); if(result){ document.cookie='item_posx='+ window.screenX +'; Max-Age=2592000'; document.cookie='item_posy='+ window.screenY +'; Max-Age=2592000'; document.cookie='item_sizex='+ window.outerWidth +'; Max-Age=2592000'; document.cookie='item_sizey='+ window.outerHeight +'; Max-Age=2592000'; }}} let textarea=document.querySelector('#commentText'); let send_button=document.querySelector('.spui-Button'); if(textarea && send_button){ send_button.addEventListener('mousedown', function(){ textarea.value=textarea.value.trim(); // 文末の空白行を削除 }); } }, 40); function get_cookie(name){ let cookie_req=document.cookie.split('; ').find(row=>row.startsWith(name)); if(cookie_req){ if(cookie_req.split('=')[1]==null){ return 0; } else{ return cookie_req.split('=')[1]; }} if(!cookie_req){ return 0; }} document.addEventListener('click', function(event){ let elem=document.elementFromPoint(event.clientX, event.clientY); let link_a=elem.closest('a'); if(link_a){ link_a.setAttribute("target", "_blank"); link_a.setAttribute("rel", "noopener noreferrer"); }});
「Comment Beautify」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。