コメントウインドウを自動配置「Comment Beautify」（3）/ JavaScript

編集しやすい場所とサイズ

「コメントウインドウ」はデスクトップの左上隅に開きます。 この位置は、コメントを書く度に移動する必要があって不便です。 また、広い方が書き易いので、ウインドウサイズを毎回調整している方がいるかも知れません。

ウインドウの位置やサイズを JavaScriptで操作する事は、一般にセキュリティ上の制限があり、今まで駄目だろうと思ってました。 しかし、実際に試すとコメントウインドウは操作が可能でした。 これは上記の不便さを改善できるという事です。 さっそく「Comment Beautify」に、その機能を組み込みました。 コメントウインドウの配色に続いて、位置とサイズをユーザーの好みに設定出来る様にしたのです。

コメントウインドウの位置・サイズの設定 

コメントウインドウの右上隅に、新しく「Position」のスイッチを作りました。

● コメントウインドウを使い易いデスクトップ上の場所にドラッグします。 更に、ウインドウの右辺と下辺をドラッグして、使い易いサイズに調節します。

●「Position」を「Click」します。 確認が表示されるので「OK」を押します。

以上で、その時のウインドウの位置とサイズが記録されます。 次にコメントウインドウを開いた時は、同じ位置・サイズでウインドウが開きます。

▪設定の変更に制限はないので、気軽に再設定をする使い方が良いと思います。

▪設定は Cookieに登録されます。 Cookieは保存期限が 30日の設定です。 30日以上コメントウインドウを開かなかった場合は、設定はデフォルトに戻り、配色・配置・サイズをもう一度設定する必要があります。

▪コメントウインドウを開くと（実際にコメントをしなくても）、その時点から30日の期限に、保存期限が更新されます。

▪コメント記入枠が隠れるまでウインドウサイズを小さくして「position」のボタンを押した場合は、位置は登録されますが、サイズはコメント記入枠が最低限使えるサイズで登録されます。

少し遅れて設定した状態になります 

JavaScriptは、対象ウインドウが開いてから起動するので、デザインの変更に一瞬の遅れが生じます。 そのため、コメントウインドウがデスクトップ左上隅に開き、その直後に、登録した位置に移動する様に見えます。

アメーバーのウインドウを開くまでの機能は書換えられないので、これは仕様です。 慣れると苦にはならないと思います。

「Comment Beautify」を利用するには

Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で「Comment Beautify」は動作します。

このツールは「Tampermonkey」上で常に「ON」にしておく常駐型ツールです。 コメント文の整形機能に関して、ユーザーは何もする必要はありません。 ツールはコメント送信時にのみ自動的に動作して、環境の負担になる事は殆どありません。

以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 Comment Beautify 〕 ver. 0.3b 

// ==UserScript==
// @name         Comment Beautify
// @namespace    http://tampermonkey.net/
// @version      0.3b
// @description  コメント送信画面の文末空白行を削除
// @author       Ameba Blog User
// @match        https://comment.ameba.jp/*
// @noframes
// @grant        none
// ==/UserScript==


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<552){
    set_sizex=552; }
if(set_sizey<525){
    set_sizey=525; }
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'; }
let body_=document.querySelector('body');
body_.style.background=set_color;
let subfield=document.querySelector('.p-blogSetting__subFieldInner');
subfield.style.background='rgb(255 255 255 / 50%)';
document.cookie='item_color_set='+ set_color +'; Max-Age=2592000';



let ua=0;
let agent=window.navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラッグ



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 header=document.querySelector('#amb_header');
let controll=document.createElement('span');
controll.setAttribute('id', 'controll');

let controll_elem=
    'Position: <i id="pos_sw">'+ svg_icon +'</i>　'+
    'Color: <input id="color_sw" type="color">'+
    '<style>#controll { margin: 3px 10px 0 auto; } '+
    '#pos_sw { display: inline-block; width: 18px; height: 18px; '+
    'vertical-align: -3px; border: 1px solid #777; cursor: pointer; } '+
    '#pos_sw svg { height: 14px; width: 14px; padding: 2px; fill: #666; } '+
    '#color_sw { width: 24px; height: 28px; border: none; '+
    'vertical-align: -4px; background-color: transparent; cursor: pointer; }'+
    '</style>';

if(ua==1){
    controll_elem=
        'Position: <i id="pos_sw">'+ svg_icon +'</i>　'+
        'Color: <input id="color_sw" type="color">'+
        '<style>#controll { margin: 7px 10px 0 auto; } '+
        '#pos_sw { display: inline-block; width: 18px; height: 18px; '+
        'vertical-align: -3px; border: 1px solid #777; cursor: pointer; } '+
        '#pos_sw svg { height: 14px; width: 14px; padding: 2px; fill: #666; } '+
        '#color_sw { width: 20px; height: 20px; border: none; '+
        'vertical-align: -4px; background-color: transparent; cursor: pointer; }'+
        '</style>'; }

controll.innerHTML=controll_elem;

if(!header.querySelector('#controll')){
    header.appendChild(controll); }



let color_sw=document.querySelector('#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');

pos_sw.onclick=function(){
    alert(
        " 🔵 現在のコメントウインドウの「サイズ」と「位置」を記録します\n"+
        "　　➔ 次回も 同じサイズ・位置に このウインドウを表示します");
    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('#comment-text-id');
let send_button=document.querySelector('#js-send-button');
if(textarea && send_button){
    send_button.addEventListener('mousedown', function(){
        textarea.value=textarea.value.trim(); // 文末の空白行を削除
    }); }



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; }}

〔追記〕 2022.02.12

コメントウインドウのコメント先記事の背景デザイン指定を変更し、バージョンを「0.3」→「0.3b」に更新しました。 これは、次記事「Ameblo Management」の更新に対応した変更です。

「Comment Beautify」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）