「Edit At Once Am」右クリックのパネル位置を補正 / JavaScript

ブログページに「zoom拡大」を指定した場合の弊害

少々ニッチな話なんですが、私は「RemPage」というツールを常駐して、ブログ閲覧時のスキンによる文字サイズの不均一を軽減しています。 ツールの説明は以下を参照ください。

「RemPage」均一な文字サイズでアメーバを閲覧する / JavaScript

ブラウザのデフォルトの拡大表示機能は、ブログのスキン種類ごとに細かな拡大率の調整ができないので、とても実用になりません。 そこで、自動で拡大率の調整を可能にしたアメブロ専用のこのツールを作って使っています。

ただ、このツールによるブログページ画面の拡大に「zoom」というCSSプロパティを使っているので、スクリプトでクリックポイントの位置を取得した際に計算誤差が生じます。 実際にそういった処理を必要とする場合は多くないので、問題に気付かない事が多いのですが...

「Edit At Once Am」での問題

「Edit At Once Am」は、記事タイトルの右クリックで専用のメニューを表示しますが、この部分でクリックポイントの位置を取得する操作をしています。 右クリックしたポイント位置をメニュー左上のコーナーになる様に表示しているので、ブラウザのコンテキストメニューと同じ表示の仕方になります。

下は、メニューの表示位置が正常な場合で、ページの拡大率は「100%」です。

しかし、「RemPage」の設定を意図的に変更して「115%」にページを拡大表示すると、右クリックした場所とメニューの表示位置がズレてしまいます。

クリックポイントは、拡大された分だけ違った位置になり、それを元にしてメニューの表示位置を計算するので、ズレて来るのです。 このズレは「zoom」の拡大率を増すと更に大きくなります。

表示位置を補正する

ブログページの画面で、この様なクリックポイントを取得するコードを使うツールは多くないので、余り気にしていませんでした。「RemPage」を使うユーザーは多くなさそうですし。 でも可能性は少ないですが、「Edit At Once Am」が、自分が作った「RemPage」で変な表示をしては残念なので、修正することにしました。

「Edit At Once Am」では、クリックポイント取得コードを、2ヵ所で使っています。 ひとつは「ブログ画面」の「記事タイトルの右クリック」、もうひとつは「記事一覧」の「記事タイトルの右クリック」です。

この両方で修正を行う必要があるので、補正コードを関数化しました。

「Edit At Once Am」 ver.2.5   640行～   

function mag_fix(){
    let body=document.body;
    let zoom_f=window.getComputedStyle(body).getPropertyValue('zoom');
    if(!zoom_f){
        zoom_f=1; } // 拡大ツールがない環境の場合
    return zoom_f; }

「RemPage」は、ブログページの「body要素」に「zoom」を指定するので、このCSS設定を調べ、その拡大率を返す関数としています。

下は、この関数でメニューの表示位置を補正するコードです。

「Edit At Once Am」 ver.2.5   132行～   

title_h.addEventListener('contextmenu', function(e){ // 専用メニュー表示
    if(ctrl_f==0){
        zoom_f=mag_fix();
        menu.style.display="block";
        menu.style.left=e.pageX/zoom_f+"px";
        menu.style.top=e.pageY/zoom_f+"px"; }}

ページの拡大率「zoom_f」を関数「mag_fix()」で取得し、「menu」の表示位置を「zoom_f」で割って、拡大による誤差を補正しています。

以上の補正処理で、「zoom」によるページの拡大表示下でも、メニューがポイントした位置に表示される様に改善しました。 下は、ページの拡大率が「115%」ですが、メニューの表示位置を補正した結果です。

今回の更新バージョン「Edit At Once Am」ver.2.5  をアップロードしました。

「ブログ記事」のファイルを扱う総合ツール 

「Edit At Once Am」の主要な機能は「閲覧中の箇所の直接編集」ですが、その他にもブログ画面・記事一覧画面と「記事の編集・削除」を直結する機能があります。 詳しくは、以下の「操作マニュアル」を参照ください。

「Edit At Once Am」 操作マニュアル / JavaScript

 「Edit At Once Am」を利用するには

このツールは Chrome・Edge・Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入・更新の手順を説明します。

❶「Tampermonkey」を導入します 

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

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

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

⭕「Tampermonkey」の導入方法

❷ スクリプトコードを登録・更新します 

「Edit At Once Am」のコードは「GitHub」で配布しています。

▪ 現在使用しているブログスキンが「新タイプスキン」「旧タイプスキン」の場合は、「Edit At Once Am」を選択してください。

● 以下のリンクを押すと「Edit At Once Am」を初めて利用される場合は「インストール」、既に利用されている場合は「上書き」（更新）ができます。

Edit_At_Once_Am 　　/ at main · personwritep

● 下の様な確認画面が表示されたら、「スクリプト名（ツール名）」「バージョン」を確認して、「インストール」または「上書き」のボタンを押します。

以上の操作で、「Tampermonkey」の「インストール済み UserScript」のリストに「Edit At Once Am」の最新バージョンが登録・更新されます。

▪ ダッシュボードのリストは「  リロード」すると、新しい登録が反映します。

「Edit At Once Am」最新版に関する記事について  

スクリプトツールは、動作対象ページのHTML変更などで正常動作が不能になる場合があります。「自動更新」や手動による「更新」で、最新バージョンを利用することをお勧めします。

「Edit At Once Am」の最新バージョンに関する記事は、以下のページのリンクリストから探せます。

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