「HOME」画面を増やさない
「Aid AmbH」は、アクセサリツールの範疇です。 ブログページで表示されるアメブロヘッダーの「ホーム」のボタン、これを押すと「HOME」ページへ遷移します。
これは当然ですが、そもそもアメーバブログのページは「HOME」から開く事が殆どなので、元の「HOME」タブに更に「HOME」タブが追加されます。 アメーバユーザーは無用に増えた「HOME」タブを閉じる「後始末あるある」になります。
ブログ設計上「HOME」を起点に操作するのは理にかなっていて、「HOME」の各種ボタン（各種の行先）のクリックは、多くが「別タブに移動先を表示」します。 これで「HOME」タブが増えますが、機能上で閉じないのが妥当で仕方ありません。
この「HOME」画面の増殖を防ぐツールが「Aid AmbH」です。 大した機能ではなく、アメブロヘッダーの「ホーム」のボタンの動作をアレンジしています。
基本機能の改善
これまでの方式は「window.history.length」を調べて「1」の場合は「別タブで開く」の操作で開いた画面と判断し、これは「HOME」から開いたのだろうという事で、「ホーム」のボタンを押すと「ウインドウを閉じる」操作をしていました。
これは賢い方式でなく、どこかで「新しいタブで開く」でブログ画面を開いた時にも、「ホーム」ボタンを押すとウインドウが閉じてしまいます。 余り使えないなぁと思っていたのですが、「document.referrer」を使った判定をすると「閉じて欲しくない」タブを、ちゃんと残してくれる様になりました。
「document.referrer」は、あるタブ（ウインドウ）を開いた元ページのドメイン名を返すので、「HOME」から開いたかどうかがほぼ判ります。「HOME」から開いたという事は、その「HOME」のタブが残っている場合が殆どで、「ホーム」が押したそのタブを閉じても良いという判断が出来ます。（厳密ではないですが） これで、かなり使える様になったと思います。
「HOME」のリンクの整備
このツールを上手く運用するには、「HOME」のリンクを全て「別タブで開く」設定にしておく事です。「HOME」ページから「遷移するタイプ」のリンクを無くしてしまうと、アメブロヘッダー上の「ホーム」ボタンを安心して押せます。
そこで、「HOME」で「ブログページ」を開くリンクボタンを調べ、「遷移」タイプのものには、全て「target="_blank"」の属性を付加しました。 調べ挙げるとけっこうありました。
▪「あなたのブログ」
▪「以前に書いた記事」
▪「芸能人・有名人ブログランキング」（9か所）
▪「昨日の人気ランキング」（10ヵ所）
以上を全て「別タブで開く」タイプに変更しました。
「SVG」アイコンの導入
先のページ に書きましたが、「SVG」は自前のアイコンが必要な時に有効です。 この「Aid AmbH」では、つい最近に「ameba-symbols」がブログページで利用出来なくなり、対策をしたばかりです。
ただ、この対策はこのフォントの呼込み指定をブログページのHTMLに書き込むので、ページロード後にワンテンポ遅れてアイコンが表示されます。 これは美しくない表示で「SVG」アイコンの導入を決心しました。
アイコンのデザイン元は「ameba-symbols」の表示を拡大し、ドット修正したものをSVG変換しました。 下の左が修正した「64×64dot」のグラフィックです。 右側がそれを変換したSVG画像です。
「SVG」はベクトル描画なので、滑らかな曲線での描画になり、想像以上に綺麗な絵になって驚きます。 近代のフォント描画は、この技術を使っているんですね。
下は「p ピグ」のボタンのSVG化のコードです。
このコードとは別に、ここで生成したアイコンの色やフォバー時の表示を、ツールがページに埋め込んだCSSでデザインしています。
このコードは、「svg_d1」という「div要素」を生成し、それに「innerHTML」で画像のコード「svg1」を代入しています。 この方法は、ネット上になかったのですが、「background」プロパティでSVGを描画させるより、スマートな気がします。
今回の更新は、表面上は見分けが付きませんが、コードは大きく変わっています。
新しい「Aid AmbH」の動作仕様
「Aid AmbH」を常駐させると、「HOME」で「フォローフィード」から見に行った「ブログ」ページから帰って来る時に、「HOME」画面のタブが増えません。
● このツールは、訪問した全てのユーザーのアメブロヘッダーで機能します。 また、「アメンバー」限定記事のアメブロヘッダーにも対応します。
●「ホーム」ボタンの動作を以下の基準で切り替えます。
◎「HOME」から開いたタブの場合は、「Click」で現在のタブを閉じる
◎「HOME」から開いた確認ができない場合は、「HOME」画面に遷移する
◎ ボタンを「Shift+Click」した場合は、常に「HOME」画面に遷移する
●「ピグ」ボタンはデフォルトのままで、現在のタブを「ピグ」画面に遷移
●「アメブロ」ボタンはデフォルトのままで、現在のタブを「管理トップ」に遷移
●「HOME」から開いたブログページから更に別ページを開いた場合は、そのタブが閉じる場合と、閉じずに「HOME」画面に遷移する場合があります。
「Aid AmbH」を利用するには
❶ 拡張機能「Tampermonkey」の導入
「Tampermonkey」の導入手順は、以下のページを参照ください。
「Tampermonkey」は、使用しているブラウザに適した版を導入する必要があります。 既にこの拡張機能を導入している場合は、❶の手順は不要です。
❷「Aid AmbH」のインストール
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Aid AmbH 〕ver. 0.5
// ==UserScript==
// @name Aid AmbH
// @namespace http://tampermonkey.net/
// @version 0.5
// @description アメブロヘッダーの動作改善
// @author Ameba blog User
// @match https://ameblo.jp/*
// @match https://secret.ameba.jp/*
// @match https://www.ameba.jp/home
// @noframes
// @grant none
// ==/UserScript==
if(location.hostname!='www.ameba.jp'){
let target=document.querySelector('head');
let monitor=new MutationObserver(main);
monitor.observe(target, { childList: true });
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){
let amb_header=document.querySelector('#ambHeader');
let icon=document.querySelectorAll('._2sLQpDcQ svg');
if(icon.length=='3'){
let svg0=
'<svg width="24" height="24" viewBox="0 0 64 64">'+
'<g transform="translate(0,64) scale(0.1,-0.1)">'+
'<path d="M212 558 c-7 -7 -12 -35 -12 -64 0 -28 -7 -68 -15 -87 -8 '+
'-20 -15 -66 -15 -104 0 -61 -3 -69 -27 -89 -32 -25 -27 -60 8 -49 14 '+
'5 25 2 30 -6 8 -11 12 -10 24 5 15 20 15 20 15 -1 0 -11 -9 -28 -20 -38 '+
'-31 -28 -8 -47 54 -43 44 3 51 6 54 25 4 30 20 30 24 1 3 -20 10 -23 54 '+
'-26 62 -4 85 15 54 43 -11 10 -20 27 -20 38 0 21 0 21 15 1 12 -15 16 '+
'-16 24 -5 5 8 16 11 30 6 35 -11 40 24 8 49 -25 20 -27 28 -27 91 -1 39 '+
'-7 88 -15 110 -8 22 -15 61 -15 86 0 30 -6 51 -15 59 -13 11 -21 8 -48 '+
'-18 -42 -41 -75 -41 -112 -2 -32 34 -36 35 -53 18z m38 -148 c0 -5 -4 '+
'-10 -10 -10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 -10z m150 '+
'0 c0 -5 -4 -10 -10 -10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 '+
'-10z m-103 -28 c-19 -20 -7 -42 23 -42 30 0 42 22 23 42 -16 18 -16 18 '+
'3 12 26 -9 64 -45 64 -60 0 -6 -7 -18 -16 -25 -14 -11 -21 -11 -45 3 -27 '+
'16 -31 16 -58 0 -24 -14 -31 -14 -45 -3 -9 7 -16 19 -16 25 0 20 48 59 '+
'79 65 2 1 -3 -7 -12 -17z m61 -128 c33 -23 27 -73 -10 -94 -25 -13 -31 '+
'-13 -55 0 -38 21 -44 71 -11 94 12 9 29 16 38 16 9 0 26 -7 38 -16z"/>'+
'</g></svg>';
let svg1=
'<svg width="24" height="24" viewBox="0 0 64 64">'+
'<g transform="translate(0,64) scale(0.1,-0.1)">'+
'<path d="M255 506 c-74 -33 -95 -88 -95 -256 0 -117 2 -132 20 -150 '+
'24 -24 48 -25 78 -4 17 12 22 25 22 59 l0 44 35 -6 c105 -17 213 93 '+
'191 194 -23 105 -148 164 -251 119z m119 -112 c20 -20 20 -43 0 -72 '+
'-18 -26 -50 -28 -76 -5 -36 33 -13 93 37 93 13 0 31 -7 39 -16z"/>'+
'</g></svg>';
let svg2=
'<svg width="24" height="24" viewBox="0 0 64 64">'+
'<g transform="translate(0,64) scale(0.1,-0.1)">'+
'<path d="M267 519 c-48 -28 -61 -116 -23 -154 87 -87 217 6 161 115 '+
'-8 16 -24 34 -34 40 -25 13 -81 12 -104 -1z"/>'+
'<path d="M255 291 c-51 -23 -101 -79 -116 -132 -20 -64 -7 -69 181 -69 '+
'188 0 201 5 181 69 -15 53 -65 109 -116 132 -50 23 -80 23 -130 0z"/>'+
'</g></svg>';
set_svg(0, svg0);
set_svg(1, svg1);
set_svg(2, svg2);
function set_svg(n, path){
let svg_d=document.createElement('div');
svg_d.id='svg_d'+n;
svg_d.innerHTML=path;
if(!amb_header.querySelector('#svg_d'+n)){
icon[n].parentNode.replaceChild(svg_d, icon[n]); }}}
css=
'._2sLQpDcQ svg { '+
'border: 1px solid #aaa; border-radius: 4px; transition: .2s;'+
'padding: 0 2px; margin: 0 4px 0 15px; vertical-align: -9px; } '+
'#svg_d0 svg { fill: #009688; } '+
'#svg_d1 svg { fill: #ff9800; } '+
'#svg_d2 svg { fill: #607d8b; } '+
'._2sLQpDcQ svg { transition: .2s; } '+
'._2sLQpDcQ:hover { opacity: 1; } '+
'._2sLQpDcQ:hover svg { fill: #fff !important; background: #2196f3; }'; }
else if(amember){
css=
'#ambHeader a:hover { text-decoration: none; } '+
'#ambHeader .-ameblo-cmnhf-icon { '+
'width: auto !important; height: 17px !important; '+
'margin: 0 4px 0 15px !important; padding: 2px 1px 3px 1px !important; '+
'border: 1px solid #aaa; border-radius: 4px; '+
'vertical-align: -8px !important; background-image: none !important; } '+
'#ambHeader .-ameblo-cmnhf-icon:before { '+
'font: 24px/19px ameba-symbols; transition: .2s; } '+
'.-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{
if(document.referrer=='https://www.ameba.jp/'){
window.close(); }
else{
location.href="https://www.ameba.jp/"; }}});
}} // main()
if(location.hostname=='www.ameba.jp'){
let target0=document.querySelector('head');
let monitor0=new MutationObserver(main);
monitor0.observe(target0, { childList: true });
main();
function main(){
let blog_link=document.querySelector('.HomeBlogModule_BlogTitle_Link');
if(blog_link){
blog_link.setAttribute('target', '_blank'); }
let lback=document.querySelector('.HomeBlogModule_LookBackEntry_Article');
if(lback){
lback.setAttribute('target', '_blank'); }
let brank=document.querySelectorAll('.HomeBlogFeed_Article_BlogRanking_Link');
for(let k=0; k<brank.length; k++){
brank[k].setAttribute('target', '_blank'); }
let trankt=document.querySelectorAll('.HomeBlogFeed_Article_TopicsRanking_Top3_Link');
for(let k=0; k<trankt.length; k++){
trankt[k].setAttribute('target', '_blank'); }
let trank=document.querySelectorAll('.HomeBlogFeed_Article_TopicsRanking_Item_Link');
for(let k=0; k<trank.length; k++){
trank[k].setAttribute('target', '_blank'); }
}} // main()
「Aid AmbH」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Aid AmbH」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
