編集画面を閉じず「ブログトップ」「管理トップ」を開く EK.1.2 / JavaScript

 新Edgeに対応した「Editor Keeper ⭐」

「Editor Keeper ⭐」は、「管理トップへ」のリンクを書き換えて「管理トップ」と「ブログトップ」へ「編集画面」を閉じずに移動できる様にします。

下は「Ameblo Writer (Compact)」の編集画面ですが、「⏏」のアイコンが表示されて「Editor Keeper ⭐」が起動した事を示しています。 これをクリックすれば「管理トップ」、「Shift」を押しながらクリックすれば「ブログトップ」が表示されます。

このアイコンは「絵文字」を使用していて、ブラウザによって表示される文字デザインが異なります。 今回、新Edgeがリリースされたので、これに対応しました。

Firefoxでは、アイコンは以下のデザインになります。

新Edgeでは、アイコンは以下のデザインになります。

使い始めるとなにげに便利です。 なにより、このアイコンで移動する限り、間違って編集画面を閉じて編集中の記事を失う事がないので安心です。

新Edgeに対応したブラウザの判定コード

ユーザーが参照時に使用しているブラウザ（ユーザーエージェント）を示す文字列は、JavaScriptでは以下のコードで取得できます。

let agent=window.navigator.userAgent.toLowerCase();

実際に得られた文字列は、Chrome、新Edge、Firefox では、下の様になります。

〔Chrome〕

mozilla/5.0 (windows nt 10.0) applewebkit/537.36 (khtml, like gecko) chrome/79.0.3945.117 safari/537.36

〔新Edge〕

mozilla/5.0 (windows nt 10.0) applewebkit/537.36 (khtml, like gecko) chrome/79.0.3945.117 safari/537.36 edg/79.0.309.65

〔Firefox〕

mozilla/5.0 (windows nt 10.0; rv:72.0) gecko/20100101 firefox/72.0

Chromeと新Edgeは非常に似たものになりましたが、新Edgeには「edg」、Firefoxには「firefox」の文字列が含まれるので、この有無で Chromeと区別できます。

私のツールは現在、この3ブラウザを対応範囲としているので、以下のコードで区別する様に、今後改めます。

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の場合のフラグ

（ 旧Edgeの場合は「edge」の文字列で判定していました。）

 「Editor Keeper ⭐」ver. 1.2　新Edge対応

このツールは Chrome Firefox 新Edge の「Tampermonkey」で動作します。 以下のコードを「Tampermonkey」の新規作成画面にコピー&ペーストして保存する事で、このツールを利用する事が出来ます。

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

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

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

〔 Editor Keeper ⭐ 〕 ver. 1.2

// ==UserScript==
// @name         Editor Keeper ⭐📛
// @namespace    http://tampermonkey.net/
// @version      1.2
// @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);
        main(); }}

function main(){
    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"); }}}

    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: 24px !important; '+
            'line-height: 16px !important; top: 3px !important; left: 6px !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: "⏏" !important; font-size: 16px !important; '+
            'line-height: 23px !important; top: 1px !important; left: 7px !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; }'; }

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

「Editor Keeper ⭐」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Editor Keeper ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

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