アメンバー記事も動作する「Edit At Once Am」をリニュアル / JavaScript

通常記事/アメンバー記事 で即編集が可能な「Edit At Once Am」

アメーバブログで閲覧中の自分のページを、直接編集画面に開いて加筆/修正できるのが「Edit At Once ⭐」です。 ただ、その起動アイコンは「フリースペース」を利用する関係で、アメンバー記事では表示されません。 そこで、アメンバー記事でも起動アイコンを表示するコードを組んだのが「Edit At Once Am」でした。

フリースペースの登録が不要で手軽という長所もあり、今回更新作業を始めたのですが・・・ 記事タイトルのクリックで「編集画面」が開く仕様なら、起動アイコンは要らない事に気付きました。

しかしタイトルは「a要素」で、「連番表示」と「記事個別表示」を切換える役目があり、これを奪う事はできません。 そこで「右クリック」でデフォルトのコンテキストメニューをオーバーライドして、専用のメニューを出す方法を採りました。

メニューの扱いは慣れて来たので、ネットを調べて自製の右クリックメニューを作りました。 今回、起動アイコン無しのデザインに全面リニュアルです。

シンプルなコンテキストメニュー 

「Edit At Once Am」の仕事は「開いた記事の再編集画面を開く」だけで良いのですが、単一メニューでは拍子抜けなので「新規作成」もメニューに加えました。 メニューはいくらでも増やせますが、それは主目的ではありません。 

現在のデザインは、下の様な2メニューのシンプルな右クリックメニューです。

● コンテキストメニューと同様、メニュー以外の場所をクリックすると消えます。

● できるだけ元の機能を侵襲しない様に、このメニューが出るのはタイトルの文字列だけにしています。 ブログ本文の領域等は、従来の右クリックメニューが出ます。

● タイトルの右クリックでツールが動作しない場合は、ページのリロードか、記事タイトルの左クリックで「記事個別表示」へ切換えてください。

● ブログ表示設定で1画面に複数記事表示をしている場合は、画面最上部の記事のタイトルのみが再編集の対象になります。 2番目以降の記事を編集したい場合は、その記事のタイトルを左クリックして、「記事個別表示」に切換えてください。

● タイル表示・リスト表示のトップページの記事タイトルでは動作しません。

使えるブログスキンが多い 

前ページの「Edit At Once ⭐」は、アイコン配置の必要から、最近のグローバルメニューが有るタイプのスキンにしか適用できません。 今回の「Edit At Once Am」は、グローバルメニューの有るタイプも無いタイプでも動作します。（特殊に旧いスキンは動作できないかも知れませんが、全てを調べる余裕が無いので）

「Edit At Once Am」ver. 0.3 の導入手順

❶「Tampermonkey」を導入します

使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明をしていますから参照ください。

　　　⭕「Tampermonkey」の導入時の設定とテスト

●「Edit At Once Am」は、Chrome版 / Firefox版 / Edge版の「Tampermonkey」で動作を確認しています。 他のブラウザでの動作に関して、成否を問わずコメントいただければ有難いです。

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

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

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

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

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

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

〔 Edit At Once Am 〕 ver. 031

// ==UserScript==
// @name         Edit At Once Am
// @namespace    http://tampermonkey.net/
// @version      0.31
// @description  Edit Entry_ID Page
// @author       Ameba Blog User
// @match        https://ameblo.jp/*
// @match        https://secret.ameba.jp/*
// @noframes
// @grant         none
// ==/UserScript==


icon_click();

let target=document.querySelector('head');
let monitor=new MutationObserver(icon_click);
monitor.observe(target, { childList: true });

function icon_click(){
    let menu=document.createElement('div');
    menu.innerHTML=
        '<span id="retouch">再編集</span> '+
        '<span id="newwork">新規作成</span>'+
        '<style>#eao_menu { position: absolute; z-index: 20; font-family: Meiryo; '+
        'padding: 5px 10px 2px; border: 1px solid #ccc; color: #000; background: #fff; '+
        'box-shadow: 4px 4px 2px -2px rgba(0, 0, 0, 0.4); cursor: default; } '+
        '#eao_menu span { padding: 2px 4px 0; } '+
        '#eao_menu span:hover { color: #fff; background: #2196f3; }</style>';
    menu.setAttribute("id", 'eao_menu');
    menu.style.display='none';
    if(!document.getElementById('eao_menu')){
        document.querySelector('body').appendChild(menu); }

    let title=document.querySelectorAll('a[rel="bookmark"]')[0];
    let title_h=title.parentNode;
    title_h.setAttribute("onContextmenu", 'return false;');

    title.addEventListener('contextmenu', function(e){
        document.getElementById('eao_menu').style.display="block";
        document.getElementById('eao_menu').style.left=e.pageX+"px";
        document.getElementById('eao_menu').style.top=e.pageY+"px"; });

    document.body.addEventListener('click', function (e){
        document.getElementById('eao_menu').style.display="none"; });

    let retouch=document.getElementById('retouch');
    retouch.onclick=function(){
        let article=document.querySelectorAll('.js-entryWrapper');
        let entry_id=article[0].getAttribute('data-unique-entry-id');
        if(entry_id){
            let path='https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id=' + entry_id;
            window.location.href=path; }}

    let newwork=document.getElementById('newwork');
    newwork.onclick=function(){
        let path='https://blog.ameba.jp/ucs/entry/srventryinsertinput.do';
        window.location.href=path; }}

● ペーストが出来たら、「ファイル」メニューで「保存」を押します。

● 以上で「Edit At Once Am」が実行可能になります。 ブログページで記事タイトルを右クリックして動作を確認してください。

● 初回は起動動作が不安定な事がありますが、これはユーザースクリプトの癖の様なもので、以降は安定すると思います。

● 上記のスクリプト適用先（7～8行目）は、全ユーザー共通の指定なので、他のユーザーのページでも「再編集画面」が開き、空白の編集画面は記事を編集しても保存できません。 この動作を避けるには「@match」パラメーターに、自分のユーザーIDを記入します。「NNNNNNNN」の部分はユーザーIDで、末尾に「*」が必要です。

この「NNNNNNNN」のID文字列は、ブログページのURL枠に表示されています。

// @match        https://ameblo.jp/*
// @match        https://secret.ameba.jp/*
             ⇩              　 ⇩　　　　      ⇩
// @match        https://ameblo.jp/NNNNNNNN*
// @match        https://secret.ameba.jp/NNNNNNNN*

「Edit At Once Am」最新版について 

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

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

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