「ホーム」ボタンをインテリジェント化する
「Aid AmbH」は、アメブロヘッダーの「ホーム」ボタンのリンク動作を、タブが開かれた条件に即して自動的に切り替えるツールです。
ここで言う「ホーム」ボタンは、アメブロヘッダー左側の「ホーム」のリンクボタンです。 このツールが常駐すると下の様なアイコンボタンの表示になります。
◎ 通常のブログページ
◎ アメンバー限定公開のページ
この機能は、「HOME」画面のタブが無駄に増えるのを抑えて、フォローフィードを中心にした日常の操作をスムーズにします。
目的は「HOME」画面を増やさない事
「Aid AmbH」を常駐させていると、「HOME」で「フォローフィード」から見に行った「ブログ」ページから帰って来る時に、「HOME」画面のタブが増えません。
● このツールは、訪問した全てのユーザーのアメブロヘッダーで機能します。 また、「アメンバー」限定記事のアメブロヘッダーにも対応します。
●「ホーム」ボタンの動作を以下の基準で切り替えます。
◎ 現在のタブを開いた元の「HOME」画面がある場合は、現在のタブを閉じる
◎ 元の「HOME」画面がない場合は、現在のタブを「HOME」画面に遷移させる
◎「ホーム」ボタンの「Shift+Click」は、常に「HOME」画面に遷移させる
●「ピグ」「アメブロ」のリンク機能はデフォルトの通りです。
◎「ピグ」を押すと、現在のタブを「ピグ」画面に遷移させる
◎「アメブロ」を押すと、現在のタブを「管理トップ」に遷移させる
●「HOME」から開いたブログページから更に別ページを開いた場合は、この機能は無効になります。（「ホーム」ボタンを押すと「HOME」画面に遷移します）
「Aid AmbH」の機能が無効になっていた件
このツールは 2020年12月に制作したのですが、いつのまにか肝心のリンク動作を変更する機能が無効になっていました。 私自身は「Aid AmbH」を常駐動作させていたのですが、リンク動作の変化は気付き難いものです。
ver.0.1は、条件分岐に「window.opener」を使っていて、ブラウザの「opener」の扱いが変更されたのかも知れません。 とにかく、リンク動作は全くデフォルトに戻っていたので、「opener」を使わないコードを考えました。
フォローフィードのリンクは「別のタブで開く」
下は私の「HOME」画面ですが、自分のブログを開くリンク❶ と、フォローフィード上に、自分の新着ブログ記事を開くリンク❷ があります。
この場合は、❶ ❷ のリンクは同じページを開く事になりますが、❶ は現在のタブを「遷移」して開き、❷ は別のタブで開く仕様です。
下は ❶ で開いた画面ですが、元の「HOME」画面のタブを「遷移」して表示するので、「戻る」ボタンが有効です。
ところが ❷ で開いた画面では「戻る」ボタンが無効です。 フォローフィードのリンクは「別のタブで開く」仕様なので、この様になりす。
この違いを JavaScript で調べて、❷ の状態なら「ホーム」を押した時に、自らのタブを閉じる様にすれば、「HOME」画面の増殖を防げます。 ❶ の場合は「HOME」画面にタブが「遷移」するので、何もする必要はありません。
「戻る」ボタンの有効・無効を調べる
「戻る」ボタンの状態を調べる JavaScriptのコードはなさそうですが、このボタンはブラウザの「履歴」機能に関係しています。 そこで、その周辺のプロパティを調べると、「History.length」というプロパティが使えそうです。
History.length読み取り専用プロパティは、現在ロードされているページを含むセッション履歴内の要素の数を表す整数を返します。たとえば、新しいタブに読み込まれたページの場合、このプロパティは 1を返します。
「新しいタブに読込まれた」=「別のタブで開く」という事ですから、このプロパティを調べて「1」なら ❷ の場合になります。
また「1」以外なら「遷移」して開かれたタブという事になり、これは ❶ です。
新しいコード
以上から、新しい状態判断のコードを下の様にしました。
〔 Aid AmbH 〕ver. 0.2 77行
◎「toHome」は「HOME」のアイコンボタンです。
◎ 3行：「Shift+Click」で、常に「ホーム画面」にタブを「遷移」させます。
◎ 7行：「history.length」が「1」の場合、自らのタブ画面を閉じます。
◎ 9行： それ以外の場合は、「ホーム画面」にタブを「遷移」させます。
簡易な便利ツール
「Aid AmbH」は、細かな事は気にせず、良く行う操作の改善を考えて制作したツールです。「画像一覧」ページにもアメブロヘッダーは表示されますし、ブログ画面は「新しいタブ・ウインドウ」で開かれる場合もあれば、「遷移」で開かれる場合もあります。 このツールを常駐すると「新しいタブ・新しいウインドウ」で開いたブログ画面で「HOME」ボタンを押すと、「HOME」画面を表示せず、そのタブやウインドウを閉じます。 慣れないと、想定外の動作に「あれっ」と思うかも知れません。
ブログ内検索で開いたブログページも「新しいタブ」で開かれるので、その画面からは「HOME」画面に行けません。 一旦、隣のページに移動すれば、行けますが。
この様な影響には敢えて留意せず、「フォローフィード」⇄「ブログ」の往復の操作に重きを置いたツールです。 もし、このツールが却って操作を不便にする場合は、さっさとOFFにすると良いでしょう。
なお今回は、「Shift」キーを押せば、その場合だけこのツールの機能をOFFに出来る様にしました。
「Aid AmbH」ver. 0.2
このツールは Chrome / Edge / Firefox 版の拡張機能「Tampermonkey」上で動作します。 導入は以下の手順で行います。
❶ 拡張機能「Tampermonkey」の導入
「Tampermonkey」の導入手順は、以下のページを参照ください。
「Tampermonkey」は、使用しているブラウザに適した版を導入する必要があります。 既にこの拡張機能を導入している場合は、❶の手順は不要です。
❷「Aid AmbH」のインストール
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Aid AmbH 〕ver. 0.2
// ==UserScript==
// @name Aid AmbH
// @namespace http://tampermonkey.net/
// @version 0.2
// @description アメブロヘッダーの動作改善
// @author Ameba blog User
// @match https://ameblo.jp/*
// @match https://secret.ameba.jp/*
// @noframes
// @grant none
// ==/UserScript==
main();
function main(){
let amember=
document.querySelector('[data-uranus-component="amemberLabel"]');
let toHome;
if(!amember){
toHome=document.querySelector('._2sLQpDcQ:nth-child(2)'); }
else if(amember){
toHome=document.querySelector('.-ameblo-cmnhf-mypage a'); }
let css;
if(!amember){
css=
'._2sLQpDcQ:hover { opacity: 1; } '+
'._3v-r_Z2P { margin: 0 4px 0 15px; padding: 3px 8px 3px 2px; '+
'border: 1px solid #aaa; border-radius: 4px; background: #fff; } '+
'._3v-r_Z2P::before { font: 24px/19px ameba-symbols; } '+
'._2sLQpDcQ:hover ._3v-r_Z2P{ background: #2196f3; } '+
'._2sLQpDcQ:hover ._3v-r_Z2P::before { color: #fff !important; } '+
'._2sLQpDcQ:nth-child(2) ._3v-r_Z2P::before { '+
'content: "\\EA1e"; color: #009688; } '+
'._2sLQpDcQ:nth-child(3) ._3v-r_Z2P::before { '+
'content: "\\EA3b"; color: #ff9800; } '+
'._2sLQpDcQ:nth-child(4) ._3v-r_Z2P::before { '+
'content: "\\EA31"; color: #607d8b; }'; }
else if(amember){
css=
'#ambHeader a:hover { text-decoration: none; } '+
'.-ameblo-cmnhf-icon { width: auto !important; '+
'margin: 0 4px 0 15px !important; padding: 2px 1px 3px 1px !important; '+
'height: 17px !important; vertical-align: -8px !important; '+
'border: 1px solid #aaa; border-radius: 4px; background: #fff !important; } '+
'.-ameblo-cmnhf-icon:before { font: 24px/19px ameba-symbols; } '+
'.-ameblo-cmnhf-mypage .-ameblo-cmnhf-icon:before { '+
'content: "\\EA1e"; color: #009688; } '+
'.-ameblo-cmnhf-mypage:hover .-ameblo-cmnhf-icon { '+
'background: #2196f3 !important; } '+
'.-ameblo-cmnhf-mypage:hover .-ameblo-cmnhf-icon:before { '+
'color: #fff !important; } '+
'.-ameblo-cmnhf-pigg .-ameblo-cmnhf-icon:before { '+
'content: "\\EA3b"; color: #ff9800; } '+
'.-ameblo-cmnhf-pigg:hover .-ameblo-cmnhf-icon { '+
'background: #2196f3 !important; } '+
'.-ameblo-cmnhf-pigg:hover .-ameblo-cmnhf-icon:before { '+
'color: #fff !important; } '+
'.-ameblo-cmnhf-blog .-ameblo-cmnhf-icon:before { '+
'content: "\\EA31"; color: #607d8b; } '+
'.-ameblo-cmnhf-blog :hover .-ameblo-cmnhf-icon { '+
'background: #2196f3 !important; } '+
'.-ameblo-cmnhf-blog:hover .-ameblo-cmnhf-icon:before { '+
'color: #fff !important; }'; }
let base=document.querySelector('body');
let style=document.createElement('style'); // ambHeader のアレンジ
style.setAttribute("id", "aambh_style");
style.innerHTML=css;
if(!base.querySelector('#aambh_style')){
base.appendChild(style); }
toHome.addEventListener('click', function(event){
event.preventDefault();
if(event.shiftKey){
location.href="https://www.ameba.jp/"; }
else{
let ref=window.history.length;
if(ref==1){
window.close(); }
else{
location.href="https://www.ameba.jp/"; }}});
} // main()
「Aid AmbH」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Aid AmbH」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
