「いいね」ボタンの場所をワンタッチ表示するツール（1）/ JavaScript

頻繁に「いいね」ボタンが無くなる

それは今日かもしれないし、明日かもしれない。いやずっとかも知れない。

ブログを訪問して、「あぁ、今日もご機嫌にやってるね」といつもの様に押そうと思ったら、ありません。何処に行ってしまったの「いいね」ボタン！

ページをリロードしてすぐに出て来る事もあるが、何をやっても出て来ない事もあります。これはウチだけの話なの？

で、こういうの改善できないのかと時々あがくのですが、リロードして駄目なら、しばらく後で戻って来るしかないみたい。その駄目かどうかを知るにも、下に向かってスクロールする必要があり面倒で、せめてそれを楽にするツールを作りました。

Let's Iine

これはあまりマトモなツールではない事を、あらかじめ断っておきます。試しに作ったもので、「いいね」ロスト問題の攻略のきっかけになればという程度です。

このツールをONにして常駐していると、ブログページで「Alt ＋ F5」を押せば、「いいね」ボタンの位置まで自動的にスクロールします。そしてボタンが表示されるのを待ち、正常に表示された場合は「いいね」ボタンに赤枠を表示します。

ショートカットの「Alt + F5」は、Chromeでは「Shift + F5」がページのスーパーリロードで、覚え易いからです。基本の使い方は、ページをリロードしてから、このツールのショートカットを押し、「いいね」ボタンが表示されるのを待ちます。

3個のボタンの内、「いいね」ボタンは最後に表示されます。ボタンをロストする場合は、他の2個の状態のままでページのロードが終わります。

「Ait + F5」を押すと 1sec間隔で「いいね」ボタンをチェックをしながら 10secまで待ちます。 10sec以内に「いいね」ボタンが表示されない場合は、下の様にグレーの帯が表示されます。普通は、それ以上待っても意味がないでしょう。

このツールの動作で、「いいね」ボタンが表示され易くなるという事はありません。ただ、確認が楽になるだけです。

なお、1ページに複数記事を並べて表示させている場合、このツールは一番最初の記事の「いいね」ボタンを対象として動作します。

根拠の薄いロスト対処案

このツールを少し使って見ただけの不確実な内容ですが、以下に列挙します。

◎ リロードは Chrome「Shift + F5」、Firefox 「Ctrl + F5」が適しているらしい。

ブラウザのバージョン等でリロードの仕様が変化するのか、ネット上にはスーパーリロードの方法が数種があり、有効な方法は確認が必要です。「いいね」ボタンをロストしている場合は、どうせリロードするならスーパーリロードの方が良いでしょう。

◎ リロードの直後、ページ表示が始まってワンテンポ置いた段階で「Alt + F5」が押せる様になります。これはスクリプトツールが有効になるタイミングです。しかし、それから数秒を待って「Alt + F5」を押す方が、ボタンが表示される可能性が高い様な気がします。ただし、一旦ボタンが表示されると、その後は常に表示されるため、この「数秒を待った方が良い」という情報は不確かです。

◎ PCでアクセスした場合、以下のページでは「いいね」ボタンが表示されません。

　▪対象ブログが「いいね！の受付」で「受け付けない」を設定している

　▪対象ブログページがアメンバー限定記事

上の場合以外で表示されないのが、問題にしているロスト状態です。スーパーリロードで「キャシュ」クリアがされるので、ブラウザメニュー等から「キャッシュクリア」をするほどの事ではないと思うのですが。

◎「いいね」ボタンのロストはアメブロ側のシステムの問題で、「いいね！した人一覧」のデータを取得出来ているのにボタンが表示されない状態になります。アメブロのシステム負荷が原因なら「一覧データ」の取得が出来るのが不可解です。

「Let's Iine」ver. 0.1 のコード

このツールは、Chrome / 新Edge / Firefox 上の「Tampermonkey」で動作する事を確認しています。

◎「Tampermonkey」のダッシュボードで「新規スクリプト」の画面を開きます。

◎ 編集枠内に最初から記入された内容を完全に削除してから、空白の編集枠内に以下のコードをコピー&ペーストしてください。

◎ 編集画面のファイルメニューで「保存」を押すと、ツールが稼働状態になります。

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

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

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

〔追記〕2020.04.21

「編集画面」が iframeの編集枠のため、このツールが編集画面で起動するツールに含まれてしまいます。この抑止のため「@noframes」パラメーターを追加しました。

〔 Let's Iine 〕 ver. 0.1

// ==UserScript==
// @name         Let's Iine
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description   「いいね」ボタンの場所を表示する
// @author       Ameba Blog User
// @match        https://ameblo.jp/*
// @noframes
// @grant        none
// ==/UserScript==


catch_key();

function catch_key(){
    let eb=document.querySelector('#entryBody');
    if(eb){ // 本文の取得が条件
        document.addEventListener("keydown", check_key);
        function check_key(event){
            let gate=-1;
            if(event.altKey==true){
                if(event.keyCode==116){
                    event.preventDefault(); gate=1; }} // ショートカット「Alt＋F5」

            if(gate==1){
                event.stopImmediatePropagation();
                event.preventDefault();
                window.scrollTo(0, eb.scrollHeight+(window.innerHeight/2)+200);
                setTimeout(()=>{
                    page_wait(); }, 200); }}
    }} // catch_key


function page_wait(){
    let retry=0;
    let interval=setInterval(wait_target, 1000); // リトライ間隔 1sec 適宜調整 ⭕
    function wait_target(){
        retry++;

        let ebas=document.querySelector('[data-uranus-icon="iine large hasLabel"]');
        // 待機要素
        if(ebas){
            clearInterval(interval);
            let eba=document.querySelector('._2v0SAEMY button');
            eba.scrollIntoView({block: "center"});
            eba.style.boxShadow='inset 0 0 0 2px red'; }
        else{
            if(retry>10){ // リトライ制限 10回 10secで終了 適宜調整します ⭕
                clearInterval(interval);
                let button_base=document.querySelector('.js-popup-reblog-trigger');
                if(button_base){
                    button_base.style.borderRadius='6px';
                    button_base.style.boxShadow='0 0 0 3px #a3bfcd';
                    button_base.style.background='#a3bfcd'; }}}
    }}