GreasemonkeyでPinterestの新着通知を自動クリックする方法

前へ 次へ
このQ&Aのポイント
  • Greasemonkey（Tampermonkey）を使用して、Pinterestの新着通知を自動でクリックする方法について教えてください。
  • Pinterestのサイトで、フォローしている方が新しいピンを追加すると、ヘッダーに通知ボタンが表示されます。この通知ボタンを自動でクリックするために、Greasemonkeyのスクリプトを作成しましたが、正しく動作しません。
  • どのようにすれば、Pinterestの新着通知を自動でクリックすることができるでしょうか？
回答を見る
  • ベストアンサー

greasemonkeyで通知を自動クリックしたい

http://www.pinterest.com/ こちらのサイトを開いていた際にフォローしている方が新しいピンを追加するとヘッダーに通知ボタンが表示される仕組みになっております。Twitterのサイトでいうところの「N件の新しいツイート」と同じ機能です。 この通知ボタンが表示されたらスクリプトで自動クリックしたいと考えています。 開発ツールでクリックする要素（class）を探し、 <div class="Module NewPinsIndicator" style="display: block;">2 新しいピン<em class="arrows"></em></div> greasemonkey（正確にはgoogle chromeでTampermonkeyを使用してます）で function click(target) { var event = document.createEvent("MouseEvents"); event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); target.dispatchEvent(event); } function main(){ var newpin =document.getElementsByClassName('Module NewPinsIndicator'); if(newpin) click(newpin); setTimeout( function() { main(); }, 5000); } main(); このようなスクリプトにしたのですが知識不足のため、このサイトでは動作しませんでした。 Pinterestの新着通知を自動でクリックする方法をよろしければスクリプト込みでご教授いただけないでしょうか。 よろしくお願いいたします。

画像を拡大する
  • sgr_
  • お礼率71% (5/7)

質問者が選んだベストアンサー

  • ベストアンサー
  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

setInterval( function() { var newpin =document.getElementsByClassName('NewPinsIndicator')[0]; if(newpin) newpin.click(); }, 5000); でどうですか？

sgr_
質問者

お礼

b0a0a様 ご回答誠にありがとうございます！！ 早速ご提示いただきましたスクリプトをChrome(Tampermonkey)とFirefox（Greasemonkey）でテストしましたところ、通知ボタンが自動的にクリックされることを確認いたしました。 しかし、1つ問題が発生いたしまして、通知ボタンがスクリプトによってクリックされた後に、setIntervalで設定したタイマーの時間毎にページ内がリロードされる現象が発生してしまいました。 ザックリともうしますと通知ボタンは表示されていないのに通知ボタンを押したような振る舞いが今回のスクリプトだと5秒に一度起こっております。 こういう場合はNewPinsIndicatorのdisplayの要素を条件に加えるといった処理を追加すればよろしいのでしょうか？

sgr_
質問者

補足

if(newpin.style.display != 'none') newpin.click(); 少々改変させていただきまして、テストしてみようと思います

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • onclickを使わずにクリック元を特定したい

    onclickを使えばクリック元の位置を判断することができますが、 onclickばかりが並ぶのはよろしくないとききました。 そこで、イベントリスナーを使うことにしました。 しかし、onclickを使わずに位置を特定することができません。 サンプルではthis.targetで取得できないか試してみましたが t.style.backgroundColorでtの部分でエラーになります。 onclickを使わずにクリック元を特定する方法はないでしょうか。 <div id="id"> <div id="sample129" class="cn"> <div>～</div> <div>～</div> </div> <div id="sample128" class="cn"> <div>～</div> <div>～</div> </div> ～1まで続く～ <div id="sample1" class="cn"> <div>～</div> <div>～</div> </div> </div> <script type="text/javascript"> var dom = document.getElementById('id'); var cds = dom.childNodes; if(cds[1].className=="cn"){ cds[1].addEventListner('click',fg(this.target),false); } function fg(t) { t.style.backgroundColor = "#000000"; var url = "http://test/" + t.id + "/"; window.open(url); } </script>

  • クリックファンクションがうまくいかない

    class="link-block"のついたliつまりリストをクリックした時、.removeClass('active');でactiveというクラスを削除するようにしたかったのですが、 なぜかリストをクリックしても反応せずに削除されません。 id="maware"のliだけは、反応して削除されます。 CSSにとしてもだめでした。どうもclass="link-block"のついたリストをクリックできていないのかと思っているのですが、上下の順番でクリックできていないのでしょうか？ .link-block { display: block; z-index: 99999; } ・ソースコード <div class="kuruttosuru">aaa</div> <!-- drawermenu --> <!-- drawermenu-button --> <div class="modal-button-wrap"> <a class="animation-hover action-hover modal-button-wrap__button"> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> </a> </div> <!-- drawermenu --> <nav> <div id="nav__drawermenu-wrap"> <ul> <li id="maware"><a class="link-block" href="#js-about-me">ABOUTME</a></li> <li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li> <li><a class="link-block" href="#js-gallary">GALLARY</a></li> <li><a class="link-block" href="#js-gmap">MAP</a></li> <li><a class="link-block" href="#js-contact">CONTACT</a></li> <li><a class="link-block" href="http:///index.html">TOP</a></li> <li><a class="link-block" href="http:///index.html">BLOG</a></li> </ul> </div> </nav> <!-- /drawermenu --> ・JS <script> $(function(){ $('.kuruttosuru').on('click', function() { $(this).addClass('active'); return false; }); }); </script> <!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション --> <script> $(function(){ $('.modal-button-wrap__button, .link-block').on('click', function() { $(this).removeClass('active'); return false; }); }); </script> ・下記のJSがあると、うまくいかず下記をコメントアウトするとうまくいきます。 下記に何かおかしくなる要素があるのでしょうか？ <!-- ページ内遷移 --> <script> $(function(){ // #で始まるアンカーすべてをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script> _____________

  • Greasemonkeyの書き方

    Greasemonkeyスクリプトを書くとき、 var divs=document.getElementsByTagName('div'); .... のようにいきなりコードを書いていたのですが、よく、 (function(){ var divs=・・・・; ..... })(); のように関数定義とその呼び出しで書いているのを見かけます。こういう書き方の御利益はあるのでしょうか？

  • jquery クリック毎に連続したidを出力したい

    jQueryを使ってクリック毎にclass="box1",class="box2"の様な形でクリックイベント毎に連続したタグを含んだテキストを出力したいと考えています。 単独なら例えば、下の様な形で済みますが、クリック毎に連続してbox2,box3の様な形*1で出力したいのですが、出来なくて困っています。 <div id="gen"> <input type="button" value="boxgen"> </div> <script> $(function() { $('#gen input').click(function() { $('#main').append('<div id="box1">box1</div>'); }); }); </script> *1 <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div> <div id="box4">box4</div> <div id="box5">box5</div> 是非お詳しい方ご教授下さい。 大熊屋

  • 自動で表示切り替えをしたい！！

    下記のリストを、数秒ごとに一つずつ順に表示させるにはどうすればよいでしょうか？ クリックすればそこに移動し、ほっとくとまた動き出すものが良いのですが。 （本当は、オンマウスだけで表示が替わるようにしたいです！！） アドバイスお願いします＞＜ <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Show Banner $(".main_image .desc").show(); //Show Banner $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity //Click and Hover events for thumbnail list $(".image_thumb ul li:first").addClass('active'); $(".image_thumb ul li").click(function(){ //Set Variables var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL var imgDesc = $(this).find('.block').html(); //Get HTML of block var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block if ($(this).is(".active")) { //If it's already active, then... return false; // Don't click through } else { //Animate the Teaser $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); }); } $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists $(this).addClass('active'); //add class of 'active' on this list only return false; }) .hover(function(){ $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); //Toggle Teaser $("a.collapse").click(function(){ $(".main_image .block").slideToggle(); $("a.collapse").toggleClass("show"); }); });//Close Function </script> </head> <body> <div id="main" class="container"> <div class="main_image"> <img src="banner1.jpg" alt="- banner1"> <div class="desc"> <div class="block"> <h2>Slowing Down</h2> <small>04/10/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </div><!-- desc --> </div><!-- main_image --> <div class="image_thumb"> <ul> <li> <a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow" width="50" height="38"></a> <div class="block"> <h2>Slowing Down</h2> <small>04/10/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> <li> <a href="banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight" width="50" height="38"></a> <div class="block"> <h2>タイトル2</h2> <small>04/11/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> <li> <a href="banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species" width="50" height="38"></a> <div class="block"> <h2>タイトル3</h2> <small>04/12/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> <li> <a href="banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution" width="50" height="38"></a> <div class="block"> <h2>タイトル4</h2> <small>04/13/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> <li> <a href="banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter" width="50" height="38"></a> <div class="block"> <h2>タイトル5</h2> <small>04/14/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> <li> <a href="banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit" width="50" height="38"></a> <div class="block"> <h2>タイトル6</h2> <small>04/15/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇　リンクテキスト　◇</a></p> </div><!-- block --> </li> </ul> </div><!-- image_thumb --> </div><!-- container --> </body>

  • 【javascript　文法】値渡し？参照渡し？

    以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <script type="text/javascript"><!-- var gDown= false; var div = document.createElement('div'); div.id = 'AAA'; div.innerHTML = 'AAA'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); var div = document.createElement('div'); div.id = 'BBB'; div.innerHTML = 'BBB'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); Event.observe(document, 'mouseup',function(){ alert(gDown.id); gDown=false; }); //--></script> </body> </html> javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって 参照渡し？それとも値渡し？　と混乱しています。 この辺のところを、教えてください。お願いいたします。

  • 複数のイベントリスナーを設置するのは正しい？

    クリック時、マウスオーバー時、マウスアウト時の処理を作るとき、 イベントリスナーの使い方はこのようなやり方でよいでしょうか。 var d = document.getElement.ById("id"); d.addEventListener('click', function(e){ var tar=e.target; tar.style.backgroundColor ="#000000"; },false); d.addEventListener('mouseover', function(e){ var tar=e.target; tar.style.backgroundColor ="#aaaaaa"; },false); d.addEventListener('mouseout', function(e){ var tar=e.target; tar.style.backgroundColor ="#555555"; },false);

  • 循環参照とメモリリークに関して

    次のスクリプトはメモリリークを起こしているでしょうか。 function process(listener){ return function(evt){ listener.call(evt.target,evt); }; } function addEvent(element,type,listener,useCapture){ element.addEventListener(element,type,process(listener),useCapture); } var div=document.getElementsByTagName('div')[0]; //存在するものとして addEvent(div,'click',function(){;},false); //いかにも起こしそう div.parentNode.removeChild(div); //親も存在するものとして 工夫してみたものの、やはりメモリリークするんでしょうか。 実際にaddEventListenerのlistener引数に渡されるのは、element変数を参照しない function(evt){ listener.call(evt.target,evt); }; ですが、listener変数は参照します。 そして、そのlistener変数はdiv変数(DOM)を参照するので、ここで循環するのでしょうか。 そして、以下の場合はどうなのでしょうか。。 var elements=[document.getElementsByTagName('div')[0]]; elements[0].addEventListener('click',function(){;},false); elements[0].parentNode.removeChild(elements[0]);

  • クリックカウンター

    クリックカウンターでの質問です。次の人になるとまた「0」になってしまいます。どうしてなのでしょう？　どなたか直していただけないでしょうか。 <HTML> <head> <Script language="JavaScript"> <!-- var cnt = 0; var flg = true; function f_click(){ if(flg){ cnt++; document.getElementById('Ninzu').innerHTML=cnt; flg = false; } } //--> </Script> </head> <BODY> <center> あなたは<span id="Ninzu">0</span>人目です。<br> <input type=button value="クリックしてね" onClick="f_click()"> </center> </BODY> </HTML>

  • javascriptの記述について

    私は最近javascriptの勉強を始めたプログラム初心者です。 下記のjavascriptについてお聞きしたいです。 ｃｓｓ *{ line-height: 1.5em; } #wrapper{ width: 380px; margin: 16px; } h1{ font-size: 20px; border: solid 2px orange; padding: 2px 4px; margin: 1em 0 0.5em 0; } h2{ background: lightblue; padding: 2px 4px; font-size: 12px; margin: 1em 0 0.5em 0; } p{ font-size: 12px; } .close{ display: none; } .open{}; <script type="text/javascript"> window.addEventListener( 'load', function(event){ var elem = document.getElementById('lnk_closeAll'); elem.addEventListener('click', closeAll, false); var elem = document.getElementById('lnk_openAll'); elem.addEventListener('click', openAll , false); //全見出しに設定 setEventToTitles(); } , false); //開閉関数 function openAll(event){ event.preventDefault(); changeAll(false); } function closeAll(event){ event.preventDefault(); changeAll(true); } //trueならすべて閉じる、falseならすべて展開 function changeAll(close){ var titles = document.getElementsByTagName('h2'); for(var i=0; i<titles.length; i++){ var parent = titles[i].parentNode; var topics = parent.getElementsByTagName('div'); for(var j=0; j<topics.length; j++){ if(close){ topics[0].className = 'close'; } else { topics[0].className = 'open'; } } } } //状態を反転する function setEventToTitles(){ var titles = document.getElementsByTagName('h2'); for(var i=0; i<titles.length; i++){ titles[i].addEventListener('click', toggleTopic, false); } } function toggleTopic(event){ var title = event.currentTarget; var parent = title.parentNode; var topics = parent.getElementsByTagName('div'); if(topics[0].className == 'close'){ topics[0].className = 'open'; } else { topics[0].className = 'close'; } } </script> </head> <body> <div id="wrapper"> <h1>よくある質問と回答</h1> <p> <a id="lnk_closeAll" href="#">すべて閉じる</a> <a id="lnk_openAll" href="#">すべて展開</a> </p> <div id="topic1"> <h2>電源ランプが赤く光り、しばらくすると製品が動かなくなります</h2> <div class="close"> <p>電源ランプが赤く光るのは内蔵バッテリーが消耗していることを示しています。 コンセントを接続して充電してください。</p> </div> </div> <div id="topic2"> <h2>ときどきブザーが鳴りますが、問題ないでしょうか？</h2> <div class="open"> <p>本製品の長時間利用により低温やけどを負うことがあります。 長時間使い続けていることをユーザーに伝えるため、 4時間15分32秒ごとにピッピッという警告音を鳴らすようにしております。</p> </div> </div> <div id="topic3"> <h2>製品を床に落としてしまいました。問題ないでしょうか？</h2> <div class="open"> <p>本製品は高さ1メートルからの落下テスト10万回をパスしております。 ただし、1メートル以上の高さから落下した場合は、 故障する可能性がありますので、お近くのサービスセンターにご相談ください。</p> </div> </div> </div> このプログラムは画像のようにすべて閉じるを押すと説明文が閉じ、 すべて開くを押すと説明文がすべて開きます。 わからない箇所は、 if(topics[0].className == 'close'){ topics[0].className = 'open'; } else { topics[0].className = 'close'; 箇所でどうしてtopics[i]ではなくtopics[0]なのでしょうか。 参考書には「NodeListオブジェクトとして返されますが、必要なのは最初の1つだけなので[0]で先頭要素にアクセスし classNameプロパティに[close]か[open]を設定する」と記載されています。 ですが、なぜ必要なのは最初の1つだけなのでしょうか？ カウンタiを一つづつふやし、一つ筒divに[close]か[open]を設定しないのでしょうか。 試しにtopics[i]にすると動きません。。。 topics[0]だと動くのに。。。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する