[Qiita]なつかしの "人気の投稿" 欄を UserScript で復活させる(β版)

イントロダクションのようなもの

むかしむかし、 Qiitaの記事の右カラムにも "人気の投稿" 欄があったのをご存知でしょうか。(言うほど昔でもないですが)

下記の画像をご覧ください。画像は Qiita 先生の古い記事からお借りました。問題があるようでしたら削除します。
_{※自分の記事で画像作成できればよかったんですがこれがあった当時はまだ何も記事書いていませんでした＼(^o^)／}

言い換えれば投稿者ごとのトレンド一覧というところです。上位4,５件くらい表示されていたみたいです。

記事から記事へ1アクションでジャンプできたのでネットサーフィンがけっこう捗って便利だったんですがいつのまにかなくなっていました。これをどうにかして復活させてみよう、というのが今回の話です。

失敗談

条件を満たすまで $.ajax を繰り返し続けるサンプル - Qiita

先日投稿しました上記エントリの際に実はAPIで取得したデータを使って復活を試みてみたんですが、APIのリクエスト回数上限にすぐひっかかってしまうため断念しました。

が、しかし新たな作戦を思いついたので今回実践してみた次第です。

よろしければお付き合いください。

ということで今回の作戦

APIじゃなくて、ユーザーのトップページから取ってくればよくね？ というのが今回の作戦です。

どういうことかといいますと、早い話しが↓ここに表示させているもの使えばいいんじゃないかということです。

https://qiita.com/tommy_aka_jps より抜粋

記事ページからはなくなりましたがトップページには残ってたようです。ということは、ajax のリクエスト先をここにして、レスポンスのHTMLソースからうまいこと必要なデータを拝借すればAPIを使うまでもないかと考えました。

仕様を考える

作戦を踏まえて大まかに仕様を決めました。

UserScript を使う(拡張機能作るほどでもないので)
人気の投稿用データはユーザートップページの左カラムに表示されているものを使う
毎回トップページを丸ごと取得するのは重いし、Qiita への負荷にもなるので、そのあたりを考慮してデータはキャッシュするようにする
キャッシュ先はローカルストレージを使う
キャッシュの有効期限は当日内。日付が変わったらキャッシュは作り直す

まあ仕様というほど大げさなものでもないですｗこれを踏まえて実装を進めてみます。

UserScript を動かすための拡張機能を導入

当方の使用ブラウザは Chrome がメインなので Chrome で UserScript を動かすための拡張機能を入れます。今回は Tampermonkey という拡張機能を使います。(Chromeの拡張機能でもいいんですがそこまでするほどのスクリプトでもないので今回は UserScript を使っています。)

Tampermonkey - Chrome ウェブストア

この拡張機能を Chrome に追加すると、あとはこの Tampermonkey に自作の JavaScript を追加すればスクリプトを動かせるようになります。

そもそも UserScript ってなんぞ？という方は下記の記事をどうぞ。わかりやすかったです。

要は UserScript とはWEBサイト上で自作 JavaScript を動かす仕組みのひとつです。ブックマークレットとブラウザ拡張機能の中間のようなものですね。

UserScript で業務改善

スクリプトの作成

Tampermonkey に追加する ~~ふっかつのじゅもん~~ スクリプトを作っていきます。PC版のChromeのみを想定しているため、IE,FireFoxは未確認です。たぶんIEはむりです。

あまりきれいなコードではありませんがご容赦ください。

// ==UserScript== 
// @name         popular posts reviver for Qiita 
// @namespace    PPR 
// @version      0.1 
// @description  Qiita の投稿の右カラムに「人気の投稿」を表示させるスクリプト。Chromeのみ使用可能。 
// @author       tommy_aka_jps 
// @match        https://qiita.com/*/items/* 
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js 
// ==/UserScript== 
 
(function($){ 
 
  /** 
   * 人気の投稿データを非同期で取得する 
   * @return {Promise} 
   **/ 
  const fetchPopularPosts = (userId) => { 
    const cache = getCache(userId); 
    if(cache) { 
      return Promise.resolve(cache); 
    } 
 
    return $.ajax({ 
      type: "get", 
      url: "//qiita.com/" + userId, 
      dataType: "html" 
    }).then(html => { 
      const data = createObjects(html); 
      setCache(userId, data); 
 
      return data; 
    }); 
  }; 
 
  /** 
   * キャッシュの名前に使う文字列を返す 
   * @param {String} userId 
   * @return {String} 
   **/ 
  const cacheKeyName = (userId) => { 
    return "c_" + userId; 
  }; 
 
  /** 
   * ローカルストレージから人気の投稿データのキャッシュを取得する 
   * @param {String} userId 
   * @return {Object[]} 
   **/ 
  const getCache = (userId) => { 
    const ckey = cacheKeyName(userId); 
    const cache = JSON.parse(window.localStorage.getItem(ckey)); 
 
    if(!cache) { 
      return; 
    } 
 
    if(cache.cdate != getCreateDate()) { 
      window.localStorage.removeItem(ckey); 
      return; 
    } 
 
    return cache.posts; 
  }; 
 
  /** 
   * ローカルストレージに人気の投稿データのキャッシュをしまう 
   * @param {String} userId 
   * @param {Object[]} posts 
   **/ 
  const setCache = (userId, posts) => { 
    const json = JSON.stringify({ 
      posts: posts, 
      cdate: getCreateDate() 
    }); 
 
    const ckey = cacheKeyName(userId); 
    window.localStorage.setItem(ckey, json); 
  }; 
 
  /** 
   * yyyyMMdd の文字列を返す 
   * @return {String} 
   **/ 
  const getCreateDate = () => { 
    const date = new Date(); 
    const year = date.getFullYear(); 
    const month = ("0" + (date.getMonth() + 1)).slice(-2); 
    const day = ("0" + date.getDate()).slice(-2); 
 
    return year + month + day; 
  }; 
 
  /** 
   * html 文字列から人気の投稿用データのオブジェクトを生成する 
   * @param {String} html 
   * @return {Object[]} 
   **/ 
  const createObjects = (html) => { 
    const result = []; 
    const $items = $(html).find(".userPopularItems_item"); 
    $items.each((_index, item) => { 
      const $titleElement = $(item).find(".userPopularItems_title"); 
      result.push({ 
        title: $titleElement.text(), 
        url: $titleElement.attr("href") 
      }); 
    }); 
    return result; 
  }; 
 
  /** 
   * ページに挿入する人気の投稿のHTMLを生成する 
   * @param {Object[]} posts 
   * @return {jQuery} 
   **/ 
  const createHtml = (posts) => { 
    const $ul = $("<ul>", {style: "list-style-type: disc; margin-left: 20px"}) 
    posts.forEach((post) => { 
      $ul.append( 
        $("<li>", {style: "margin-bottom: 6px;font-size: 12px"}).append( 
          $("<a>", {href: post.url, text: post.title}) 
        ) 
      ); 
    }); 
 
    return $("<div>", {style: "margin-bottom: 20px"}) 
      .append($("<h5>", {text: "人気の投稿", style: "font-weight: 700; margin-bottom: 10px"})) 
      .append($ul); 
  }; 
 
  // ----  
  // Main 
  // ----  
  $(function(){ 
    const userId = location.pathname.split('/')[1]; 
    fetchPopularPosts(userId).then((posts) => { 
      if(!posts) return; 
 
      createHtml(posts).prependTo(".p-items_toc"); 
    }); 
  }); 
})(jQuery);

Tampermonkey にスクリプトを追加

Tampermonkey を開いたら「新規スクリプトを追加」を選択し、前項のスクリプトをまるっとコピペしてください。

動かしてみましょう

スクリプト追加後、どこでもいいので Qiita の記事ページを開けば動作します。うまく表示しないときはページをリロードしてみてください。なお、はじめて訪問するユーザーのページはキャッシュが存在しないので初回だけ少しラグがあるかとおもいます。

右カラムに人気の投稿が追加されました

_{やったぜ。}

CSSはとりあえず直書きで適当に付けて最低限の見た目だけ整えてました。スタイル定義はまだ調整の余地ありそうですが、機能的には要件を満たせたのでひとまずOKとします。

今後のアップデート予定(時期未定)

ローカルストレージに掃除動作を付ける。各キャッシュ自体は記事のタイトルとURLの文字列だけなので大した容量は食っていないはずですが、今のままだと著者の数だけキャッシュが増えてしまうのでよろしくないかなと。塵も積もればボトルネックとなりますし。閾値とトリガーをどうするかが悩みどころです。
jQuery のライブラリを Tampermonkey で読み込むと非同期とはいえちょっと重たいので、プレーンな JavaScript でひととおり組み直そうかとおもいます。(ajax や DOM 操作が楽なのでつい jQuery 使ってしまう。)

後記

面白い記事を見つけたら同著者の他記事を読んでみると、もしかするとタイミングが合わなくて日の目を見ることのできなかった、あるいは埋もれてしまった良記事に出会えたり、調べたかった話題ではなくても新しい発見があるかもしれません。Qiita のHTMLの構造が変わらないうちしか使えませんがよかったら使ってみてください。

ちなみに私の人気の投稿(=どんぐりの背比べ)はどれも大したものはないのであまり見なくてもいいと思います(オチ)

はばないすでい

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫