クリックで新しいタブを開く「リブログ」 / JavaScript

リブログの仕様は少し...

「リブログ」は、アメブロ内部のカード型トラックバックで、他のアメブロ記事にリンクした記事を簡単に作れます。 しかし、アメブロ外部のサイトのリンク記事は作れないし、カードデザインはお仕着せです。 そして、クリックで遷移を強制される「機能的な不便さ」は読む側にとってなんだかなぁと思います。

別ページに飛ばされる問題

記事中のリンク先を参照しながら元記事の残りを読みたい場合、普通のリンクなら右クリックで「新しいタブで開く」「新しいウインドウで開く」の選択ができます。 しかし、リブログカードは出来ません。

この場合は一旦リブログ先を開き、後で「 」を押して戻れば良いのですが、これはたびたび失敗します。 結局、リブログカードのあった記事を最初から開き直す事が多く、元記事の後の部分は、読まないままになる事もあります。

そう考えると、リブログカードを記事の頭に置くのは、とてもまずい配置ですね。 リブログカードを押した訪問者が、その後を読んでくれる事は期待できません。 なんでこんなリンク仕様にしたのでしょう。 元ページを残すリンクは好ましくないという考えもありますが、私はリンク内容や場合によると思っています。

で、JavaScriptを使える様になったので、このリンクの開き方をアレンジしました。

リブログカードのリンクを別タブで開く「Popup Reblog」

最初に制限を書きます。「Tampermonkey」でこのスクリプトをセットしたユーザーにとって、カードのリンク仕様が変ります。 これは、自他の全てのブログページで、リブログカードのリンクを開く動作が変ります。

しかし、これはスクリプトが働くブラウザ内だけの変更です。 自分のブログへの訪問者にとって、自分のブログのリブログカードは本来の状態です。 これは勘違いをしない様にすべきです。 このスクリプトは自分の操作を向上させるツールです。

セッティング

他のユーザースクリプトと同様、「Popup Reblog」のコードを「Tampermonkey」にコピー&ペーストするだけです。「Popup Reblog」は Chrome / Firefox / Edge のブラウザで動作を確認しています。

〔追記〕2019.07.19
Firefox の場合は、リブログカードを左クリックをすると、移動前のウインドウが遷移してしまう問題があります。 しかし、右クリックでは移動前のウインドウが遷移せず、目的通りの操作になります。

● 自他の全てのブログページで、リブログカードのリンクを開く動作を変更します。

● リブログカードをクリックした場合、デフォルトはページ遷移が行われますが、このスクリプトにより、「新しいタブ」か「新しいウインドウ」でリンクが開き、元のページは閉じずに残ります。

● リブログカードのあるページが完全に開かない時点でカードをクリックすると、ページ遷移が生じます。 これはスクリプトの読込みタイミングの問題で、仕様です。

〔追記〕 2019.12.28

「@noframes」パラメーターを追加しました。 これは「編集画面」で起動してしまう事を抑止する目的です。

〔 Popup Reblog 〕 ver. 0.1

// ==UserScript==
// @name         Popup Reblog
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  リブログリンクを別タブで開く
// @author       Ameba Blog User
// @match        https://ameblo.jp/*
// @noframes
// @grant        none
// ==/UserScript==

window.addEventListener('load', function(){
    'use strict';

    var reblog_iframe=document.querySelector('.reblogCard');
    if(reblog_iframe){
        var iframe_doc=reblog_iframe.contentWindow.document;
        var reblog_card=iframe_doc.querySelector('.rb-card');
        var data_href=reblog_card.getAttribute('data-href');

        reblog_card.addEventListener('mousedown', function(event){
            event.preventDefault();
            window.open(data_href, '_blank'); }, false)}})

ポップアップブロックの設定について 

● ブラウザのポップアップブロックの設定を、アメーバのブログページに関してだけ「許可」に変更する必要があります。

ブラウザのポップアップブロックは「ブロックする」がデフォルトです。 スクリプトが関与する「新しいタブ」「新しいウインドウ」を開く動作は、ポップアップと判断されるので、「Popup Reblog」の動作をブロックしてしまいます。 

ポップアップブロックは「ブロックする」が推奨ですが、アメブロのブログページは有害なポップアップは無いので、「許可」の設定をしても問題はないでしょう。

〔 Firefox 〕

ブラウザメニューの「オプション」→「プライバシーとセキュリティ」で以下の画面を開き、「ポップアップウィンドウをブロックする」の「許可サイト」を開きます。

ただし「ポップアップウィンドウをブロックする」のチェックは入れたままです。

「許可サイト・ポップアップ」の設定画面で「https://ameblo.jp」を入力します。管理画面のツールに関しては「https://blog.ameba.jp」も「許可サイト」指定が必要な場合があります。

〔 Chrome 〕

ブラウザメニューの「設定」→「詳細設定」→「プライバシーとセキュリティ」→

「サイトの設定」と進み、以下の「ポップアップとリダイレクト」画面を開きます。

この画面で赤枠の「許可」の「追加」ボタンを押すと、「サイトの追加」ダイアログが表示されるので「https://ameblo.jp」を入力します。 管理画面のツールに関しては「https://blog.ameba.jp」も「許可サイト」指定が必要な場合があります。

やはり、上部のブロック（推奨）は上図の状態を変えない事がおすすめです。

「Popup Reblog」最新版について 

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

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

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