読者です 読者をやめる 読者になる 読者になる

不動産屋のラノベ読み

不動産売買営業だけどガチガチの賃貸派の人のブログ

はてブプラスお葬式記念、はてブ「○年前タブ」を再現するユーザースクリプトを作りました

 
 
 はてブプラス、終了しちゃいますね。
 
「○年前タブ」という機能がありまして。
プラスタブ(旧ユーザーページのみ) - はてなブックマークヘルプ
 自分のブクマの○年前を振り返り、「さすが俺、○年前もいいコメつけてるなあ」などとナルちゃんな気分に浸るためのサービスでした。
  
 残念ながらはてブプラス終了とともに廃止されてしまいます。
 仕方がないので、その機能のユーザースクリプトを作りました。
 

これはなに?

 http://b.hatena.ne.jp/my/#stocktaking にアクセスすると、自分の○年前のブコメをAutopagerで読み込むハックをするユーザースクリプトです。
 

どうやって使うの?

 ↓ここからインストールしてください。firefox+greasemonkeyでしか動作確認してませんが、たぶんChromeでも動くでしょう。
https://box.yahoo.co.jp/guest/viewer?sid=box-l-xwe35vzyonkod623hiej4hwdqy-1001&uniqid=4a5e8927-c6cc-446d-a3b1-2d9026e2f8f9&viewtype=detail

「ユーザースクリプトってなに?」という人は自分でググってください。すみません。
 あと、新ユーザーページ限定です。すみません。
「新ユーザーページってなに?」という人は、たぶん気にしなくてオーケーです。
 

スクリーンショット

 http://b.hatena.ne.jp/my/#stocktaking にアクセスすると、
f:id:Lhankor_Mhy:20170401232212p:plain
 こうなって
f:id:Lhankor_Mhy:20170401232256p:plain
 こうなります。いやあ、さすがは私、いいブコメつけてますね。
 
 URLの日付を変えれば、今日以外の○年前も見れます。
f:id:Lhankor_Mhy:20170401232325p:plain

 
 ついでに言えば、他人の○年前も見れます。
f:id:Lhankor_Mhy:20170401232402p:plain 
 b:id:sabacurryに無断で友情出演していただきました。
 なお、ところどころで折りたたまれているブコメに色が付いているのは、現在開発中の「ブコメメタブ検出スクリプト」によるものですので、このユーザースクリプトでは再現しません。
 

ソースコード
// ==UserScript==
// @name        HBStocktaking
// @namespace   @http://realtor-readyabooks.hatenablog.com/
// @include     http://b.hatena.ne.jp/*/#stocktaking
// @include     http://b.hatena.ne.jp/*/*#stocktaking
// @version     1
// @grant       none
// ==/UserScript==

(() => {

  const $id = document.getElementById.bind(document);
//  const $cl = (s) => Array.from(document.getElementsByClassName(s));
//  const $qs = (s) => Array.from(document.querySelectorAll(s));

  function dateFormat(s, ...values) {
  /* 
  ** テンプレートタグ
  ** Dateオブジェクトをyyyymmdd形式にする
  */
    return values.reduce(
      (sum,e,i) => {
        if ( e instanceof Date) 
          return sum + s[i] + ( e.getFullYear() * 10000 + e.getMonth() * 100 + 100 + e.getDate() );
        else
          return sum + s[i] + e;
      },
      ''
    ) + s.slice(-1);  
  }

  if (location.pathname.match(/\/.+\/$/)) // http://b.hatena.ne.jp/*/#stocktaking のとき
    location.href = dateFormat`http://${ location.hostname }${ location.pathname }${ new Date() }#stocktaking`;
  else{

    const userID = location.pathname.split('/')[1];
    let nextDate = new Date( 
      ...( 
        x => ( x[1] = Number( x[1] ) - 1, x ) // month - 1
      )( 
        location.pathname.match( /\/.+\/(\d{4})(\d{2})(\d{2})/ ).slice( 1 ) // [yyyy,mm,dd]
      ) 
    );

    $id('page-content').insertAdjacentHTML('afterend', `
<div id="stocktaking-dummy" style="height:9999px">○年前表示準備中……</div>
<div class="pager"><a class="pager-prev" href=""></a></div>
    `);
    
    window.addEventListener('load', function(){
      let HBAi = Hatena.Bookmark.AutoPagerize.instance;
      HBAi.linkRelNext = function(el) {
      // 次のURLを生成するメソッドをオーバーライド
        nextDate.setYear( nextDate.getFullYear() - 1 ); 
        return dateFormat`/${ userID }/${ nextDate }?fragment=main`;
      }
      HBAi.nextURL = HBAi.linkRelNext();
      $id( 'stocktaking-dummy' ).style.display = 'none'; 
      HBAi.scrollHandler(); // スクロールイベントをトリガー
    }, false);

  }

})();

 どうぞご利用ください。