ページをリロードして「いいね」ボタンの場所を表示
スタッフブログのコメントで、やはり無くならないのが「いいね」ボタンが表示されない問題です。 私がテストする限りでは、「いいね」ボタンの消失は何かの拍子という感じで、原因が定かでありません。
さて、このツール「Let's Iine」は、原因を根本的に改善するものではなく、ページをリロードして、「いいね」の場所を自動的に再表示する機能です。 この機能は便利で、リロードに効果があるのか良い確率で「いいね」ボタンが表示されます。 気休めと思って、ダメ元で試して見てください。
Let's Iine
◎「Let's Iine」をインストールしたら、常時ON（常駐）にしておきます。
訪問先ブログで、いつもの「いいね」ボタンが表示されず、「いいね！した人一覧」が表示される場合は、問題が生じています。
◎「Let's Iine」のショートカット「Alt ＋ F5」を押すと、ページのリロードとスクロールが行われ、「いいね」ボタンの位置が表示されます。 もしボタンを表示できた場合には、ボタン群に青背景が表示され、一度点滅します。
◎「いいね」ボタンは、この状態でクリックできます。
◎「Let's Iine」は、0.5sec間隔で「いいね」ボタンをチェックをしながら 10secまで待ちます。 10sec以内に「いいね」ボタンが表示されない場合は、下の様にグレーの帯が表示されます。 これ以上待っても意味はなく、もう一度「Ctrl + F5」を試しても良いでしょう。
◎ なお、1ページに複数記事を並べたブログでは、このツールは一番最初の記事の「いいね」ボタンを対象として動作します。
今回に更新した部分
「いいね」ボタンが表示出来た事を、背景色を一度点滅して気付き易くしました。 また、本文背景色が同系色の場合も、青背景を区別し易いデザインにしています。
傾向と対処
◎「いいね」ボタンが表示されないのはアメブロのシステム側の問題と思われます。
「いいね！した人一覧」のダイアログが表示されるのに、「いいね」ボタンが表示されない状態になります。
◎ むやみに「Alt + F5」を押すのは意味がありません。 再試行は、ツールがボタン表示に失敗したグレー帯を確認してから、もう一度「Alt + F5」を試します。
◎ PCでアクセスした場合、以下の場合は「いいね」ボタンが表示されません。
▪対象ブログが「いいね！の受付」で「受け付けない」を設定している。
▪アメンバー限定記事では、本来「いいね」ボタンは表示されません。
▪リスト型・タイル型のトップページは「いいね」ボタンは表示されません。
「コメント一覧」を表示するおまけ機能
「コメント欄」が展開表示されていない状態で「コメント一覧」を押すと、ページの最上部に飛ばされてしまいます。 その場合に「Alt + F5」を押すと、コメント一覧まで自動スクロールして表示する機能があります。
「Let's Iine」ver. 0.4
このツールは Chrome / 新Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Let's Iine 〕 ver. 0.4
// ==UserScript==
// @name Let's Iine
// @namespace http://tampermonkey.net/
// @version 0.4
// @description ページをリロードし「いいね」ボタンの場所を再表示する
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @noframes
// @grant none
// ==/UserScript==
let target=document.querySelector('head');
let monitor=new MutationObserver(catch_key);
monitor.observe(target, { childList: true });
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();
let this_url=location.href.replace(/\?.*$/, '');
if(location.hash=='#cbox'){
location.reload(true); } //「コメント一覧」の失敗を補償
else{
window.location.href=this_url +'?'; }}} // 空白のクエリ文字「?」を付けてリロード
}} // catch_key
if(document.readyState!=='loading'){
reload_act(); }
else{
document.addEventListener('DOMContentLoaded', reload_act, false); }
function reload_act(){
let query=location.href.toString().slice(-1);
if(query=='?'){
history.pushState('0', '0', location.href.replace(/\?.*$/, '')); // URLから「?」を削除
let eb=document.querySelector('#entryBody');
if(eb){
window.scrollTo(0, eb.scrollHeight +(window.innerHeight/2)+200);
setTimeout(()=>{
page_wait(); }, 200); }}
if(location.hash=='#cbox'){
history.pushState('0', '0', location.href.replace(/#cbox/, '')); // URLから「#cbox」を削除
setTimeout(()=>{
let body_height=document.querySelector('body').scrollHeight;
window.scrollTo(0, body_height);
}, 100); }}
function page_wait(){
let retry=0;
let interval=setInterval(wait_target, 500); // リトライ間隔 0.5sec 適宜調整 ⭕
function wait_target(){
retry++;
let ebas=document.querySelector('[data-uranus-icon="iine large hasLabel"]');
// 待機要素
if(ebas){
clearInterval(interval);
let button_base=document.querySelector('.js-popup-reblog-trigger');
if(button_base){
button_base.scrollIntoView({behavior: "smooth", block: "center"});
button_base.style.transition='.2s';
get(button_base); }}
else{
if(retry>20){ // リトライ制限 20回 10secで終了 適宜調整します ⭕
clearInterval(interval);
let button_base=document.querySelector('.js-popup-reblog-trigger');
if(button_base){
not_get(button_base); }}}
function get(obj){
let k=0;
let view=function(){
if((k%2)==0){
obj.style.boxShadow='0 0 0 4px #00b0ff, 0 0 0 5px #fff';
obj.style.background='#00b0ff'; }
else{
obj.style.boxShadow='0 0 0 5px #ffff';
obj.style.background='#fff'; }
k+=1; }
let id=setInterval(function(){
view();
if(k>2){
clearInterval(id); }}, 800); }
function not_get(obj){
obj.style.boxShadow='0 0 0 4px #a3bfcd, 0 0 0 5px #fff';
obj.style.background='#a3bfcd'; }
}}