公式スキンの「記事タイトル」のHTML構成
現在のアメブロの公式スキンは、システム管理上で記事タイトル部分のHTML構成が統一されています。 その構成は2種のタイプに限られている様で、公式スキンをくまなく調べても、それ以外のものは見当たりません。
「Edit At Once Am」の起動スイッチは「記事タイトル」ですが、上記の2種のHTML構成の共通部分に着目し、このスイッチを取得するコードとしていました。
下は公式スキンのHTML構成例です。（■■等の個別データ部は変えています）
◎ 記事全体は赤枠「.js-entryWrapper」の中に収められています。 この要素は「個別記事全体」で、先部に「記事ID」「記事タイトル」「ユーザーID」が必ずあります。 これは全てのアメーバブログに共通したフォーマットです。
◎ 緑枠が実際に表示される「記事タイトル」部分です。 普通は記事の最上部に表示される配置で、下の例は「h1」の中にありますが、スキンによって「h2」「h3」の場合もあります。
現行の公式スキンは、「記事タイトル」に必ず「rel="bookmark"」の属性があり、これを指標にして「記事タイトル」の「a要素」を取得していました。
以下は、現行の公式スキンの基本HTML構成を模式図にしたものです。
特殊なスキンは旧いスキンか？
「Edit At Once Am」は「リブログ編集」のツールとして、可能な限り多くのスキンに対応させたいと考え、ジャンル全体をランダムに調べて見ました。 その結果で、発見したのが、以下の様なデザインのスキンで、ツールが起動しません。
このデザインの特徴は、現行スキンに無い「ページャー」デザインです。 以前はたまに見かけましたが、現在も残っていて動作しているという事は、提供停止になったが廃止にはならなかったタイプがあるのでしょうか？
HTMLを調べると下の様な構成でした。
「.js-entryWrapper」の部分は、共通のHTML構成に従っています。 しかし、記事タイトル表示の緑枠の中に「rel="bookmark"」がありません。 これがツールが起動しない理由です。
この様なスキンが残っている反省から、「記事タイトル」を取得するコードを書換える事にしました。 他に見落としているスキン亜種があった場合も起動できる様に、最大公約数的な取得コードに改めます。
記事の最初にある「h要素」で、中にある「a要素」が記事タイトル
「rel="bookmark"」の個性的な指標なしで、「タイトル部」と「記事タイトル」を特定する必要があるので、先ず記事中に最初に出て来る「h要素」を取得し、それをタイトル部と判断する事にしました。 記事タイトルの「h要素」はスキンにより「h1」「h2」「h3」の場合があるので、これは条件分岐します。
「タイトル部」を取得出来たら、その中で最初に見つかる「a要素」を「記事タイトル」として取得します。 これらの取得に失敗したり、適合しない特殊スキンがあればエラーが出るので、「取得できれば」の条件でエラーフィックスをしています。
以上が、新しい「記事タイトル」の取得コードです。
これによって、上記の「特殊なスキン」でも「Edit At Once Am」が起動しました。 再び全ジャンルのランダム調査をしましたが、99%の成果と見て良い様です。
1件だけ、タイトル部をアレンジした「起業」ブログがあり、記事のタイムスタンプをタイトル上部に移動したものでした。 これは下手なアレンジと思うのですが、結果として「a要素」自体をクリック出来ず、個別記事表示にならないのです。 まあ、そういうのは対象外にして良いでしょう。
ver. 0.5 でのマイナー更新
◎ メニューのフォントを「Meiryo 14px」の固定サイズに変更しました。 各ブログページの設定にメニューサイズが影響されるのを防ぐ目的です。
◎「リブログ」のみ編集ページを「別タグで開く」コードにしました。 リブログ元を参照しながら記事を書く場合、元記事を開き直すのは手間です。 元記事が不要な場合は、閉じるのは簡単ですから。
メニュー操作とツールの仕様について
● このツールは、全てのアメブロ記事ページ、アメンバー記事ページで動作します。
● 記事タイトルの文字を右クリックすると、下の様な小型メニューが出ます。
メニューを閉じるには、メニュー以外の場所をクリックしてください。
● ツールが動作しない場合は、ページをリロードするか、記事タイトルを左クリックして「記事個別表示」へ切換えてから操作をしてください。
● 1画面に複数記事表示のブログでは、最も上部の記事のみが再編集・リブログの対象になります。 2番目以降の記事を対象にする場合は、対象記事タイトルを左クリックして、「記事個別表示」に切換えてから操作をしてください。
●「タイル表示」「リスト表示」の「トップページ」では動作しません。
●「メッセージボード」が大変に大きく、「記事タイトル」が見分けにくいブログがありますが、「記事タイトル」はページ移動する「ページャー」の下にあります。
「Edit At Once Am」ver. 0.5 の導入手順
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明をしていますから参照ください。
●「Edit At Once Am」は、Chrome版 / Firefox版 / Edge版の「Tampermonkey」で動作を確認しています。 他のブラウザでの動作に関しては、成否を問わずコメントいただければ幸いです。
❷「Tampermonkey」にスクリプトを登録します
「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Edit At Once Am 〕 ver. 0.51
// ==UserScript==
// @name Edit At Once Am
// @namespace http://tampermonkey.net/
// @version 0.51
// @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> '+
'<span id="reblog">リブログ</span>'+
'<style>#eao_menu { position: absolute; z-index: 20; font: normal 14px Meiryo; '+
'padding: 3px 10px 1px; border: 1px solid #dadce0; color: #333; background: #fff; '+
'box-shadow: 4px 4px 2px -2px rgba(0, 0, 0, 0.48); cursor: default; } '+
'#eao_menu span { padding: 1px 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 article=document.querySelector('.js-entryWrapper'); //記事全体
let title_h; // タイトル部
let title; // 記事タイトル
if(article){
if(article.querySelector('h1')){
title_h=article.querySelector('h1');
title=title_h.querySelector('a'); }
else if(article.querySelector('h2')){
title_h=article.querySelector('h2');
title=title_h.querySelector('a'); }
else if(article.querySelector('h3')){
title_h=article.querySelector('h3');
title=title_h.querySelector('a'); }
if(title){
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.querySelector('.js-entryWrapper');
let entry_id=article.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; }
let reblog=document.getElementById('reblog');
reblog.onclick=function(){
let article=document.querySelector('.js-entryWrapper');
let user=article.getAttribute('data-unique-ameba-id');
let titil_str=article.getAttribute('data-unique-entry-title');
let entry_id=article.getAttribute('data-unique-entry-id');
if(user && entry_id){
let path=
'https://blog.ameba.jp/ucs/entry/srventryinsertinput.do?'+
'reblog_ameba_id=' + user + '&reblog_entry_id=' + entry_id +
'&entry_title=' + titil_str;
window.open(path, "_blank"); }}
} // icon_click()
● ペーストが出来たら、「ファイル」メニューで「保存」を押します。
● 以上で「Edit At Once Am」が実行可能になります。 ブログページで記事タイトルを右クリックして動作を確認してください。
● 旧バージョンはOFFにするか登録削除をして、新旧の同時ONは避けてください。
ただし「Edit At Once ⭐」とは競合しないので、同時使用ができます。
● 初回は起動動作が不安定な事がありますが、これはユーザースクリプトの癖の様なもので、以降は安定すると思います。
● このスクリプトは、リブログを可能とするために全ユーザーのブログページで動作します。 そのため、他のユーザーのページでも「再編集画面」が開きますが、システムはユーザーを判断するので、空白の編集画面が開き、その画面では記事編集をしても保存ができません。
「@mach パラメーター」を書換えるとツール起動を自分のブログページのみに制限できますが、その場合は他ユーザーのリブログが出来なくなります。
「Edit At Once Am」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Edit At Once Am」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
