はじめに
Yahoo! JAPANのリストには、記事と広告が混在しています。そのため、うっかりすると、広告をクリックしてしまいます。このうっかりミスを減らすためのプラグインを作成しました。
サンプル画面
Chromeの例
Edgeの例
解説
この背景色が黄色のリンクボタンが広告です。色付けがないと意図せず、うっかりクリックすることがあります。それを防ぐ意味で色づけしています。
このリストには、記事と広告が混在していますので、記事だと思ってクリックすると広告だったりします。
これは、サイトページの製作側の戦略だと思いますが、閲覧者側からするとあまり感心できません。
最近の傾向として
最近、特に、この広告が増えてきた感じがしています。以前はそれほど、気になる感じではありませんでした。理由はわかりませんが、とにかく、ポップ広告も増えてきました。消すに消せない広告もあります。そういうページは強制キャンセルしています。閲覧者の印象はよくないです。
広告のタイトルが記事のようなタイトルになっています。
これも困ることです。記事を見てクリックすることもありますので、戦略にはまってしまうことになります。
まるで、ページ製作者側と、閲覧者側の葛藤です。
それを避ける意味で、このプラグインを作成しました。
リストの記事と広告は、一見、見分けがつきにくいです。敢えてそうしていると思われます。おそらく、制作者側の意図でそうしていると思います。一方、閲覧者側は、記事を見たいと思い、タイトルで探します。一見、記事のようにみえるタイトルがあるとクリックしてしまいます。
そこで、広告のタイトルの背景色に黄色の色をつけました。黄色にすることで広告とわかり、識別しやすくなります。
インストール方法
インストールは、Chromeウェブストアから行います。プラグイン名は、「tinyToolsプラグインv2.0」です。
インストールサイトは以下になります。
Chromeウェブストア
プラグインコードについて(ご参考用)
プラグインのコードは、コンソールデバッガーで見れます。(公開版はv2.0です。)
以下は、最新バージョン(v3.0)のコードです。このコードはまだ未公開ですが、近日中に公開予定です。
tintTools_content.js
/**********************************************************************
*名称： tinyToolsプラグイン v3.0
*要件： Popup広告を削除します。
*スクリプトファイル tinyTools_content.js
*機能 Popup広告を削除します。
***************************************************************************/
'use strict';
let observer;
//
///********************************************************************************
//*重要ポイント(振り分け処理)
//*以下のコードは、ページのDOMを解析して処理していますが、すんなりとは行きません。やはり、ある程度の
//*試行錯誤が必要です。
//リストから、広告の要素だけを探し出し、オブジェクトを取得します。
//方法は2つです。
//(1)記事と広告を含むリストを探し出し、forループで、広告だけを色付けします。
//(2)あらかじめ、広告だけのリストを取得しておき、forループで色付けします。
//************************************************************************************/
if (location.ancestorOrigins.length === 0) {
console.log("許可タブ "+location.href);
process();
//
setTimeout(()=>{
//alert("process終了");
if($("#qurireco").length !== 0){
//
let ar = $("#qurireco")[0].querySelectorAll("div.yadsStream");
for (let ee of ar){
//ee.idの背景色を黄色に
ee.querySelectorAll("dl")[0].style.backgroundColor="yellow";
}
}
//トップ
if($("#yjnMain").length !==0){
let ar = $("#yjnMain")[0].querySelectorAll("li.sc-4e2sy7-0");
for(let ee of ar){
//
ee.style.backgroundColor="yellow";
}
}
//速報
if($(".newsFeed").length !==0){
let ar = $("body")[0].querySelectorAll(".sc-wywjt1-0.ggsKcW");
for(let ee of ar){
//
ee.style.backgroundColor="yellow";
}
}
},2000);
}
///********************************************************************************
// *process()関数
// *
//**********************************************************************************/
function process() {
/***************************************************************************
*任意のサイトで、右端に、Chromeを示す印ボタンをつける。
****************************************************************************/
// $("body").append("<div style='zoom:1.5;background-color:red;position:fixed;top:30%;left:0px;width:200px;height:100px;'>Chrome</div>")
//
function getBrowser() {
const userAgent = window.navigator.userAgent.toLowerCase();
let browserName = "不明なブラウザ";
if (userAgent.indexOf("edg") > -1) {
browserName = "Microsoft Edge";
$("#Masthead").css("background-color","lightgreen");
$("#msthd").css("background-color","lightgreen");
$("#edgeMark").remove();
$("body").append("<div id='edgeMark' style='font-size:1.5em;z-index:999999;background-color:lightgreen;position:fixed;top:0%;right:0px;width:100px;height:40px;'>Edge</div>")
$("#edgeMark").draggable();
} else if (userAgent.indexOf("chrome") > -1) {
browserName = "Google Chrome";
$("#Masthead").css("background-color","lightpink");
$("#msthd").css("background-color","lightpink");
$("#chromeMark").remove();
$("body").append("<div id='chromeMark' style='font-size:1.5em;z-index:999999;background-color:lightpink;position:fixed;top:0%;right:0px;width:100px;height:40px;'>Chrome</div>")
$("#chromeMark").draggable();
//
} else if (userAgent.indexOf("safari") > -1) {
browserName = "Safari";
}
return browserName;
}
let bb = getBrowser();
function check_PopupSite(host){
let sw=false;
let enable_host = ["news.yahoo.co.jp","newsdig.tbs.co.jp","www.jiji.com","www.iza.ne.jp"];
//
for (let el of enable_host){
//
if(el === host){
//true
sw = true;
break;
}else{
//false
continue;
}
}
return sw;
}
//タブの指定pathnameのみ実行
//ここで、各新聞社のサイトをチェック
let rs =check_PopupSite(location.host); //rs true or false
if (rs === true) {
//監視
const observer = new MutationObserver((mutations) => {
//ここに何回も入る。
//childList trueの時
console.log(mutations);
//
//ここで、実体をチェック このDOMがあるかないか
//ここで使用しているセレクター名は、サイトごとに変更要 チェックするセレクターが異なるため
if($(".fc-message-root").length !== 0||$(".google-gps-rewarded-dialog").length !== 0){
setTimeout(()=>{
if($(".fc-message-root").length !== 0){
alert("このポップ画面を消去します。"+$(".fc-message-root").length);
$(".fc-message-root").remove();
//$(".gmoam_interstitial_ad").remove();
//$("#interstirialAd").remove();
$("body").css("overflow","unset");
}else if($(".google-gps-rewarded-dialog").length !== 0){
alert("このポップ画面を消去します。"+$(".google-gps-rewarded-dialog").length);
$(".google-gps-rewarded-dialog").remove();
//$(".gmoam_interstitial_ad").remove();
//$("#interstirialAd").remove();
$("body").css("overflow","unset");
}
},2000);
}
});
observer.observe(document.body, {
childList: true,
subtree: false,
attributes: true
});
}
}
このプラグインは、ブラウザーの識別(Chrome,Edge)と、Yahoo! JAPANサイトとYahoo!ニュースサイトのリストの広告に黄色で色付けしたものです。
あとがき
完成版(V3.0)は、まだ、未公開ですが、V2.0でもYahoo! JAPANのリストの広告は黄色で色付けしています。Yahoo! ニュースサイトのリストの広告は、v3.0で対応予定です。