幅600pxの「サブウインドウ」をデフォルトにする
「サブウインドウ」の高さを計算が必要で、最初に浮かんだのは「メインウインドウ」で「元メッセージ」の高さを測る方法でした。 このなりゆきで「サブウインドウ」の本文幅は 800px程度になっていたのですが、ちょっと幅が大きい。
これが 600px程度の幅なら適当ですが、その場合の「サブウインドウ」の高さを求めるには、前バージョンとは別方法が必要です。 そこで、「メインウインドウ」の見えない所で 600px幅の「表示枠」を作って「元メッセージ」を表示し、その高さを測る事にしました。
非表示のクローン
別の「div要素」を作っても良いですが、こういう場合は「.cloneNode()」を使って、本来の「メッセージ表示枠」のコピーを作り、それを非表示に変更して、そこで高さを求めると手間が省けます。
上図は、「受信箱」で「元メッセージ」を開いた「メインウインドウ」です。 非表示のクローンは実際は見えませんが、これを可視に変更して、ブルーの背景色を着けています。 幅は 600pxに設定していて、その時の「メッセージ表示枠」の高さが、ここで正確に求める事ができます。
このクローンで得た値を元に、表示する「サブウインドウ」のサイズを指定します。
実際のデザイン
下は、幅 600pxとした「サブウインドウ」の表示です。
幅がコンパクトになり、狭いデスクトップでも使い易くなったと思います。 今回の幅から、「サブウインドウ」の高さの範囲を 310~810px にしました。
また前バージョンでは、「メインウインドウ」の「元メッセージ」の表示幅が同幅でしたが、これも捨て難い設定なので、「Shift」キーを押しながら「返信する」をクリックすると、等幅(799px)の「サブウインドウ」を表示する様にしました。
この機能は、表示しておかないと誰も使わなくなるので、下の様に「返信する」ボタンの横に、表示を出しました。
「Message Asist」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 このツールを「Tampermonkey」にインストールした後は、常にONにしておくだけでOKです。(常駐型のツールです)
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Message Asist 〕 ver. 0.5
// ==UserScript== // @name Message Asist // @namespace http://tampermonkey.net/ // @version 0.5 // @description メッセージ送信確認画面のチェック補助 // @author Ameba Blog User // @match https://msg.ameba.jp/ucs/received/detail* // @match https://msg.ameba.jp/ucs/reply/index* // @match https://msg.ameba.jp/ucs/reply/confirm // @match https://msg.ameba.jp/pub/send/confirm // @icon https://www.google.com/s2/favicons?sz=64&domain=ameba.jp // @grant none // ==/UserScript== let pathname=location.pathname; /* 受信箱ウインドウの場合 */ if(pathname.includes('ucs/received/detail')){ let search=location.search; /* 受信箱のメッセージ表示画面 */ if(!search.endsWith('&')){ let css= '<style id="MA">'+ 'td#dupe { width: 799px; '+ 'display: block; box-sizing: border-box; position: absolute; top: 0; '+ 'padding: 10px 20px; line-height: 1.7; overflow-y: scroll; visibility: hidden; }'+ '#msgReport::before { content: "Shift+Click:等幅サブウインドウ表示"; '+ 'position: absolute; top: -20px; }'+ '</style>'; if(!document.querySelector('#MA')){ document.body.insertAdjacentHTML('afterbegin', css); } // スタイルを追加 let reply=document.querySelector('.sbmtOnImg input[value="返信する"]'); if(reply){ let newwin_h; // サブウインドウの高さ 310~810 let textarea=document.querySelector('#detlMain'); let new_url='/ucs/received/detail'+ search+'&'; if(textarea){ let dupe=textarea.cloneNode(true); dupe.id='dupe'; textarea.parentNode.appendChild(dupe); reply.onmousedown=function(e){ if(e.shiftKey){ dupe.style.width='799px'; let h_pos=dupe.getBoundingClientRect().height; if(h_pos<200){ newwin_h=310; } else{ if(h_pos<700){ newwin_h=h_pos + 110; } else{ newwin_h=810; }} let newwin=open( new_url, '_blank', 'width=799, height='+ newwin_h +', left=10,top=80'); } else{ dupe.style.width='600px'; let h_pos=dupe.getBoundingClientRect().height; if(h_pos<200){ newwin_h=310; } else{ if(h_pos<700){ newwin_h=h_pos + 110; } else{ newwin_h=810; }} let newwin=open( new_url, '_blank', 'width=600, height='+ newwin_h +', left=10,top=80'); }} }}} // 受信箱のメッセージ表示画面 /* 元メッセージを表示するサブウインドウ */ if(search.endsWith('&')){ let css= '<style id="MA">'+ 'html, body { background: #fff !important; overflow: hidden !important; }'+ '#ucsContent { margin: 0; width: 100% !important; border: none; }'+ '#ucsContent:before, #ucsContent:after { display: none; }'+ '#ucsMainLeft { margin: 0 !important; width: 100% !important; }'+ '.messageTable { margin: 0; border-bottom: 15px solid #00aaffd6 !important; }'+ 'form .messageTable th:first-child { display: none; }'+ 'form .messageTable tr:nth-child(2) { width: 100% !important; }'+ '#detlMain { width: 100% !important; height: calc(100vh - 105px) !important; '+ 'resize: unset !important; }'+ '#globalHeader, #ucsHeader, #ucsMenu, #ucsMainLeft h1, #localNav, #msgActn, '+ '#ucsMainRight, #msgReport, .sbmtOnImg, .attentionB { display: none; }'+ '</style>'; if(!document.querySelector('#MA')){ document.body.insertAdjacentHTML('afterbegin', css); }} // スタイルを追加 } // 受信箱ウインドウの場合 /* 返信メッセージ編集画面 */ if(pathname.includes('ucs/reply/index')){ let textarea=document.querySelector('#aEditorTextarea'); if(textarea){ textarea.value=''; }} /* 管理画面で返信メッセージを確認 */ if(pathname.includes('ucs/reply/confirm')){ let detlMain=document.querySelector('#detlMain'); let uM_raw=document.querySelector('#ucsMainLeft input[name="messageBody"]'); if(detlMain && uM_raw){ let child_nodes=detlMain.childNodes; for(let k=child_nodes.length-1; k>=0; k--){ // 末尾まで連続するBRタグを削除 if(child_nodes[k].tagName=="BR"){ child_nodes[k].remove(); } else{ break; }} uM_raw.value=detlMain.innerText; // 実際の送信内容を更新 let end_p='<p class="end_p" style="color: #2196f3">◀▶</p>'; if(!detlMain.querySelector('.end_p')){ detlMain.insertAdjacentHTML('beforeend', end_p); } // 末尾マークを表示 detlMain.scrollTo(0, detlMain.scrollHeight); } // メッセージ末尾をスクロール表示 let sbmtOnImg=document.querySelector('.sbmtOnImg'); if(sbmtOnImg){ let disp= '<span style="position: absolute; left: 0; font: bold 16px Meiryo; '+ 'padding: 4px 15px 2px; border-radius: 5px; color: #fff; background: #f00; '+ 'margin-left: 15px;">Check Message</span>'; if(!sbmtOnImg.querySelector('span')){ sbmtOnImg.insertAdjacentHTML('afterbegin', disp); }} // 動作の表示を追加 } // ucs/reply/confirm 管理画面で返信メッセージを確認 /* 相手ページでメッセージを書く場合 */ if(pathname.includes('pub/send/confirm')){ let messagePreview=document.querySelector('#messagePreview dd>div'); let cc_raw=document.querySelector('#confcontainer input[name="messageBody"]'); if(messagePreview && cc_raw){ let child_nodes=messagePreview.childNodes; for(let k=child_nodes.length-1; k>=0; k--){ // 末尾まで連続するBRタグを削除 if(child_nodes[k].tagName=="BR"){ child_nodes[k].remove(); } else{ break; }} cc_raw.value=messagePreview.innerText; // 実際の送信内容を更新 let end_p='<p class="end_p" style="color: #2196f3">◀▶</p>'; if(!messagePreview.querySelector('.end_p')){ messagePreview.insertAdjacentHTML('beforeend', end_p); } // 末尾マークを表示 setTimeout(()=>{ let message_scroll=document.querySelector('#messagePreview dd'); if(message_scroll){ message_scroll.scrollTo(0, message_scroll.scrollHeight); } // メッセージ末尾をスクロール表示 }, 1000); } let confbtntwo=document.querySelector('#confbtntwo'); if(confbtntwo){ let disp= '<span style="position: absolute; left: 20px; font: bold 16px Meiryo; '+ 'padding: 4px 15px 2px; border-radius: 5px; color: #fff; background: #f00; '+ 'margin-left: 15px;">Check Message</span>'; if(!confbtntwo.querySelector('span')){ confbtntwo.insertAdjacentHTML('afterbegin', disp); }} // 動作の表示を追加 } // pub/send/confirm 相手ページでメッセージを書く場合
「Ameblo Management」と「Ameblo Message Pro」の導入
「Message Asist」は JavaScriptのプログラムで、これはメッセージ画面のデザインに関わらず動作します。 しかし、このページの説明画面は「Ameblo Management」と「Ameblo Message Pro」のアレンジデザインが適用されたものです。
「Message Asist」は、これらのデザインを前提に制作したもので、デザインが異なると有効さが半減します。 ぜひ、これらのスタイルを導入してください。 導入手順は、ブラウザ拡張機能「Stylus」を導入した上で、各スタイルを入手します。
◎ ブラウザ拡張機能「Stylus」の導入については、以下のページ群を参照ください。
▸ Chrome / Edge
▸ Firefox
◎「Ameblo Management」は以下のページから入手できます。
◎「Ameblo Message Pro」は以下のページから入手できます。
「Message Asist」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Message Asist」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。