• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32017/02/14 10:09:19

  満足100pt

  「インスペクタ」ではなく、「ソースを見る」なんかでページを見ると表示されない理由が分かります。
  「最新記事」や「関連記事」は、最初のレスポンスで中身がありますが、「人気記事」は枠だけで中身（一覧）がありません。
  その後に動くスクリプトで動的に中身が作られているようです。
  質問に書かれているスクリプトが、「人気記事」の一覧を作るスクリプトよりも早く動いてしまうので、「人気記事」だけ空振りしているように見えます。
  
  setTimeout で、適当な時間遅らせて実行するというのがお手軽な対応ですが、はてなブログはただでさえ重たいので確実性に欠けるきらいがあります。
  古いブラウザだと動きませんが、MutationObserver というのを使うのが確実です。
  質問にあるコードを活かすと、こんな感じになります。

  $(function(){
      var bb = function(aa){
          var urEntries = $(aa).find(".urllist-item-inner");
          var i=0;
          urEntries.each(function(){
              var urEntry = $(this);
              var entryTitleLink = urEntry.find(".urllist-title");
              var href = entryTitleLink.attr("href");
              var htmlstr = "";
              htmlstr +='<p class="star-counts"><img src="http://s.st-hatena.com/entry.count.image?uri=';
              htmlstr +=href;
              htmlstr +='" alt="" class="star-count"></p>';
              urEntry.after(htmlstr);
          });
      }
  //  bb(".hatena-module-entries-access-ranking");    こいつは中身が未だできてない
      bb(".hatena-module-recent-entries");
      bb(".hatena-module-related-entries");
  
  
      var MutationObserver = window.MutationObserver || window.WebkitMutationObserver;    // Safari 対策
      var observer = new MutationObserver(function (records) {
          records.forEach(function (record) {
              setTimeout(function() {
                  bb(".hatena-module-entries-access-ranking");
              }, 0);
          });
          observer.disconnect();  // 多分、一回だけで良い
      });
      observer.observe(document.querySelector(".hatena-module-entries-access-ranking"), {childList: true});
  });
  

  
  
  

  ---

  追記です。
  前のコードは確認の仕方がまずかったです。
  少しコードを見直しました。

  • 監視モードに subtree を追加
  • ★をつける前に監視を止める

  こちらを試してみてください。

  $(function() {
      var bb = function(aa){
          var urEntries = $(aa).find(".urllist-item-inner");
          var i=0;
          urEntries.each(function(){
              var urEntry = $(this);
              var entryTitleLink = urEntry.find(".urllist-title");
              var href = entryTitleLink.attr("href");
              var htmlstr = "";
              htmlstr +='<p class="star-counts"><img src="http://s.st-hatena.com/entry.count.image?uri=';
              htmlstr +=href;
              htmlstr +='" alt="" class="star-count"></p>';
              urEntry.after(htmlstr);
              console.log(htmlstr)
          });
      }
      var MutationObserver = window.MutationObserver || window.WebkitMutationObserver;    // Safari 対策
      var observer = new MutationObserver(function (records) {
          records.forEach(function (record) {
              if (record.target.classList.contains("hatena-module-body")) {   // 念のため
                  observer.disconnect();      // 先に監視を止める
                  bb(".hatena-module-entries-access-ranking");
              }
          });
      });
      var ranking = document.querySelector(".hatena-module-entries-access-ranking");
      observer.observe(ranking, {childList: true, subtree: true});
  });
  

  スター

  • 

    10件のコメントを見る

  • ぬる太 2017/02/14 16:41:36

    回答ありがとうございます。
    中身が作られる前に走ってしまうというのは盲点でした。
    頂いたコードを実行したところ、残念ながら表示できなかったのですが、これはもう構造上(?)の問題として諦めるべきでしょうか…。（chromeで実行しています）
    もう少し考えてみます。

    スター

  • a-kuma3 2017/02/14 17:20:55

    頂いたコードを実行したところ、残念ながら表示できなかったのですが、これはもう構造上(?)の問題として諦めるべきでしょうか…。

    いや、できます。
    ちょっと手抜きをして、コンソールからの実行で動作を確認したのですが、それが良くなかったんです。
    ＃ 遅延時間ゼロの setTimeout なんかを呼び出している辺りは、その辺りの迷いが出てます
    
    ぼくが回答で書いたコードは、.hatena-module-entries-access-ranking の中に変化があったときに、一発だけ bb 関数を呼び出して監視を止めてしまう、という動作をします。
    
    .hatena-module-entries-access-ranking の中が徐々に作られていくのでしょう。
    A.urllist-title が作られる前に DOM に変化が起きていて、MutationObserver の監視を止めてしまっているのが駄目なんだと思います。
    
    「人気記事」の仕様に依存しますが、項目が10個できるまでは監視を続けるとか。
    ああ、注目記事の表示個数って設定で変えられるのか　(´・ω・｀)
    でも、何かやりようはありますよ。
    ちょっと考えてみます。

    スター

  • a-kuma3 2017/02/14 18:10:01

    いろいろと勘違いしてました。
    見直したコードを回答に追記したので、試してみてください。

    スター

  • ぬる太 2017/02/14 18:51:09

    出来ました!!
    ありがとうございました。
    お陰様で思った通りのブログになりました。

    スター

  • a-kuma3 2017/02/14 18:57:44

        var ranking = document.querySelector(".hatena-module-entries-access-ranking");
        observer.observe(ranking, {childList: true, subtree: true});
        observer.observe(ranking, {childList: true, subtree: true});   // これ
    

    MutationObserver の observe メソッド呼び出しを2回やってます。
    最初の一回目で監視を止めちゃうから問題ないのかもしれませんが、悪さをしないとも限らないので、ひとつ削除しておいてください。

    スター

  • ぬる太 2017/02/14 19:00:37

    はてぶ数の方でも表記させようと思い、追加してみたのですが、拙かったでしょうか。

    スター

  • a-kuma3 2017/02/14 19:23:20

    あっ、そういう意図でしたか。
    でも、はてぶの方は、スターついてないですよね。ちょっとお待ちを。

    スター

  • ぬる太 2017/02/14 19:32:58

    表示される時とされない時がありますね。
    ちょっと見直してみます。

    スター

  • a-kuma3 2017/02/14 21:08:08

    お待たせしました。
    こんな感じです。

    $(function() {
        var bb = function(aa){
            var urEntries = $(aa).find(".urllist-item-inner");
            var i=0;
            urEntries.each(function(){
                var urEntry = $(this);
                var entryTitleLink = urEntry.find(".urllist-title");
                var href = entryTitleLink.attr("href");
                var htmlstr = "";
                htmlstr +='<p class="star-counts"><img src="http://s.st-hatena.com/entry.count.image?uri=';
                htmlstr +=href;
                htmlstr +='" alt="" class="star-count"></p>';
                urEntry.after(htmlstr);
                console.log(htmlstr)
            });
        }
    
        var MutationObserver = window.MutationObserver || window.WebkitMutationObserver;    // Safari 対策
        $(".hatena-module-entries-access-ranking").each(function() {
            var hatena_module = this;
            var observer = new MutationObserver(function (records) {
                records.forEach(function (record) {
                    if (record.target.classList.contains("hatena-module-body")) {   // 念のため
                        observer.disconnect();      // 先に監視を止める
                        bb(record.target);
                    }
                });
            });
            observer.observe(hatena_module, {childList: true, subtree: true});
        });
    });
    

    後半を変えてます。
    ふたつのエリアを監視するので、MutationObserver のインスタンスもふたつ作ります。
    また、関数 bb() も、クラスセレクタの文字列を指定すると先頭の方を 2回とも処理してしまうので、MutationObserver の監視に引っかかった要素を渡しています。

    スター

  • ぬる太 2017/02/14 21:17:32

    僕の想定通りの動きをしています。
    凄すぎです。
    二重に書くだけだと、文字列が同じこともあって処理のタイミングの誤差かなにかで表示されたり・表示されなかったりとなっていたのですね。
    
    重ね重ね、御礼申し上げます。
    誠にありがとうございました。

    スター

その他の回答

この質問へのコメント

質問の情報

登録日時

2017-02-14 01:25:37

終了日時

2017-02-14 18:51:32

回答条件

1人3回まで

この質問のカテゴリ

• コンピュータ

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者112日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者21時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者121時間前
• 内定してほしいポケモンはいますか？匿名質問者21時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ