はてなブログで「購読中のブログ」の一覧をブログカード形式で取得する

以前書いたスクリプトで取得する内容を変えているだけなので追記にした方がよかったかもしれませんが。記事を書いた当時はまだブログカードがなかった(と思う)ので。

sprint-life.hatenablog.com

購読中のブログのページで実行するとこんな感じで一覧が出力されます。PCのブラウザが前提です。

ユーザーID、ブログカード形式のリンク、ブログの最新記事のタイトルを表示していますが、編集方法が見たままモードだとリンクが使えないかもしれません。

var page_number = 1; // 「購読中のブログ」の最後のページ数(URLのantenna?page=にある数字)
var page_index = 1;
var blog_count = 0;

var header = document.getElementById("main-header");
var textarea = document.createElement("textarea");
textarea.cols = 150;
textarea.rows = 10;
header.appendChild(textarea);

var req = new XMLHttpRequest();

req.onreadystatechange = function() {
  if (req.readyState == 4 && req.status == 200) {
    var dom = document.createElement("dom");
    dom.innerHTML = req.responseText;
    dom.getElementsByClassName("admin-subscribe-wrapper-right").item(0).remove();

    var users = dom.querySelectorAll("a.entry-unit-user-name");
    var entries = dom.querySelectorAll("h3.entry-unit-entry-title");

    for(var j=0; j<users.length; j++) {
      // users[j].textがユーザーID、users[j]がURL、entries[j].innerTextが最新記事のタイトル
      textarea.value += "id:" + users[j].text.trim() + "\n" + "[" + users[j] + ":embed:cite]" + "\n" + entries[j].innerText.trim() + "\n\n";
      blog_count++;
    }
    page_index++;
    if(page_index <= page_number) {
      var url = "http://blog.hatena.ne.jp/-/antenna?page=" + page_index;
      req.open('GET',url, true);
      req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
      req.send();
    }else{
      textarea.value += "購読中のブログは" + blog_count + "件です";
    }
  }
}

req.open('GET',"http://blog.hatena.ne.jp/-/antenna", true);
req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
req.send();

表示する内容はtextarea.value += "id:"・・・の行を適宜変更してください。

購読中のブログの確認や紹介などにどうぞ。

ブラウザで見ているWebページからはてなブックマークのエントリーページへ移動するスクリプト

ブラウザで何かしらWebページを見ているとき、はてなブックマーク経由で知ることがほとんどなので、コメントがあるエントリーページと合わせて見ることが多いんですが、あとからエントリーページを見たくなることもあります。

ページ内にはてなブックマークのボタンがあればそこから移動すればいいんですが、ボタンが設置されていなかったり、エントリーページではなくブックマークするためのフォームが表示されることも少なくありません。なので、エントリーページに直接移動するスクリプトを書きました。

書きました。といってもlocation.hrefを使ってhttp://b.hatena.ne.jp/entry/ + 記事のURLを設定しただけです。

location.href = "http://b.hatena.ne.jp/entry/" + location.href;

見ているWebページがhttpとhttpsでエントリーページのURLが違っていて、自分で判定した場合はこうなりました。

var url = location.href;

if(url.indexOf("http:") >= 0){
    var entry_page = url.replace("http://", "http://b.hatena.ne.jp/entry/");
    location.href = entry_page;
}

if(url.indexOf("https:") >= 0){
    var entry_page = url.replace("https://", "http://b.hatena.ne.jp/entry/s/");
    location.href = entry_page;
}

簡単な方をブックマークレットにしたもの

javascript:(function(){ location.href = "http://b.hatena.ne.jp/entry/" + location.href; })();

かくいう自分のブログもはてなブックマークのボタンは表示していなくて、コメントをいただいたときは多少不便に感じてきたので、はてなブックマークとツイートのボタンくらいは戻そうかと思い始めてたりします。

はてなブログの個別記事でページャーに日付を追加する

はてなブログで個別の記事を開くと、ページの下部にページャー(前後の記事へのリンク)が表示されますが、現状では左が新しい記事、右が古い記事になっています。パッと見では判断がつかないので、日付を追加してみました。

ページャーに表示されているリンクのURLから年月日を抽出して、リンクの前に書き加えています。

<script type="text/javascript">
function pagerDate(pager){
    if(pager == null || pager.childNodes[1] === undefined){
        return false;
    }
    
    // 記事のURLから年月日(yyyy/mm/dd)にマッチさせる
    var dateReg = /\d{4}\/\d{2}\/\d{2}/; 
    var date = dateReg.exec(pager.childNodes[1].href);

    // yyyy/mm/dd を yyyy-mm-ddに変換して表示する
    if(date != null){
        pager.innerHTML = date[0].replace(/\//g,"-") + "<br />" + pager.innerHTML;
    }
}

// PC
var prev = document.querySelector(".pager-prev");
var next = document.querySelector(".pager-next");
pagerDate(prev);
pagerDate(next);

// スマートフォン(はてなブログProのみ)
var left = document.querySelector(".pager-l");
var right = document.querySelector(".pager-r");
pagerDate(left);
pagerDate(right);

</script>

管理画面からデザイン→カスタマイズ→フッタにスクリプトを追加してください。ページャーが読みこまれた後に処理する都合から、フッタかサイドバーのモジュールに追加する必要があります。スマートフォンでフッタにHTMLを表示するのはPro専用の機能なので、一般ユーザーでの対応はできていません。

記事のURLがはてなダイアリー形式(entry/yyyymmdd/...)だと年月日の間にスラッシュがないので、年月日のマッチと日付を表示する処理が一部変わります。

function pagerDate(pager){
    if(pager == null || pager.childNodes[1] === undefined){
        return false;
    }
    
    // 記事のURLから年月日(yyyymmdd)にマッチさせる
    // date[1]に年、date[2]に月、date[3]に日が入る
    var dateReg = /(\d{4})(\d{2})(\d{2})/;
    var date = dateReg.exec(pager.childNodes[1].href);

    if(date != null){
        var date = date[1] + "-" + date[2] + "-" + date[3];
        pager.innerHTML = date + "<br />" + pager.innerHTML;
    }
}

冒頭の画像の例だと、こんな感じで年月日と改行タグが書き加えられているはずです(PCの場合)

<div class="permalink pager">
  <span class="pager-prev">2015-11-07<br> <!-- 書き加えたところ -->
    <a href="http://sprint-life.hatenablog.com/entry/2015/11/07/232635" rel="prev">
      <span class="pager-arrow">« </span>
      はてなブログ4周年おめでとうございます
    </a>
    </span>

    <span class="pager-next">2015-11-04<br> <!-- 書き加えたところ -->
    <a href="http://sprint-life.hatenablog.com/entry/2015/11/04/211503" rel="next">
      Twitterの「お気に入り」が「いいね」に変…
      <span class="pager-arrow"> »</span>
    </a>
    </span>
</div>

日付ごとのページ(ブログのURL/entries/yyyy/mm/dd)でも同じように処理がされますが、ページャが過去にしか進めないので日付はなくてもいいかもしれません。

はてなブログで古い記事にメッセージを表示するスクリプト

ブログなどで記事を開くと表示される「この記事は○年以上経過しています」みたいなメッセージを、はてなブログでも表示できるようにしてみました。デザインテーマにもよりますが、通常は記事の先頭に日付、末尾に○日前があるので必要なさそうですけど。

ソース

<script type="text/javascript">
// 記事を開いた日時
var today = new Date();

// 記事の投稿日時
var updated    = document.getElementsByClassName("updated");
var datestring = updated.item(0).getAttribute("datetime");
var entry_date = new Date(datestring);

// 記事の投稿日時に一年を加算する
entry_date.setFullYear(entry_date.getFullYear()+1);

// 記事の投稿日時が記事を開いた日時よりも過去ならメッセージを追加
if(entry_date <= today){
    var doc = document.getElementsByClassName("entry-content").item(0);
    var entry_notice = "<div class=\"entry-notice\">この記事は投稿されてから一年以上経過しています</div>";
    doc.innerHTML =  entry_notice + doc.innerHTML;
}
</script>

管理画面からデザイン→カスタマイズ→記事→記事上下のカスタマイズ→記事下に追加すれば表示されるはず。コメントの削除やメッセージの内容は適宜変更してください。なお、はてなブログには記事の最終更新日時は無い(出力されていないだけでデータは持っているかもしれませんが)ので、投稿後の更新については考慮していません。

CSSのサンプルも載せておきます。

.entry-notice{
    text-align: right;
    font-size: 80%;
    color: #999;
    background-color: #F0F0FA;
    margin-bottom: 20px;
}

2015/09/17 09:02 追記

id:psneさんに最終更新日はサイトマップから確認できることを教えていただきました。ありがとうございます。なるべく通信の発生は避けたいですし、サイトマップのページがわかれているので記事のURLとマッチさせるのも手間がかかりそうですね。コメントの通りこのまま考慮しない方向でいきたいと思います。

はてなブログの「購読中のブログ」一覧に読者登録設定へのリンクを追加するスクリプト

2016/03/04 21:02 追記

公式に機能が実装されました。

staff.hatenablog.com

追記ここまで

はてなブログで読者登録をしてみたけどやっぱり解除したくなった。というとき、基本的には「読者になる」のボタンやヘッダーにあるリンクから解除することになりますが、「読者になる」のボタンを設置していないとか、該当ユーザーがサービスをやめてしまった場合などを考えたことがありませんでした。

www.mayoinu.com

記事によれば以下のURLから読者登録の解除(設定)ができるとのこと。

http://blog.hatena.ne.jp/はてなID/ブログURL/subscribe

それなら「購読中のブログ」の一覧にリンクを追加してしまおうということで、スクリプトを書きました。

// 「こんなブログもあります」の一覧を削除
document.getElementsByClassName("admin-subscribe-wrapper-right").item(0).remove();

// 読者登録中のユーザー名とブログのURLを取得
var users = document.querySelectorAll("a.entry-unit-user-name");

// リンクの追加位置
var unit = document.querySelectorAll(".entry-unit-meta");

for(var i=0; i<users.length; i++){
  // 読者登録設定へのURLを生成
  var userid  = users.item(i).innerText.trim();
  var blogurl = users.item(i).href.replace("http://","");
  var subscription_url = "http://blog.hatena.ne.jp/" + userid + "/" + blogurl + "subscribe";

  // aタグの生成と設定
  var link  = document.createElement("a");
  link.href = subscription_url;
  link.innerText = "登録解除";
  link.setAttribute("target","_blank");

  unit.item(i).appendChild(link);
}

ブックマークレット

javascript:(function(){ document.getElementsByClassName("admin-subscribe-wrapper-right").item(0).remove();  var users = document.querySelectorAll("a.entry-unit-user-name");  var unit = document.querySelectorAll(".entry-unit-meta");  for(var i=0; i<users.length; i++){ var userid  = users.item(i).innerText.trim(); var blogurl = users.item(i).href.replace("http://",""); var subscription_url = "http://blog.hatena.ne.jp/" + userid + "/" + blogurl + "subscribe";  var link  = document.createElement("a"); link.href = subscription_url; link.innerText = "%E8%B3%BC%E8%AA%AD%E8%A7%A3%E9%99%A4"; link.setAttribute("target","_blank"); unit.item(i).appendChild(link);}})();

実行するとリンクが追加されます。

すでに読者登録しているユーザーが対象なので、リンクの表記は解除を明示するようにしました。処理を簡単にする都合で一覧の右側に表示される「こんなブログもあります」を消しているのと、ページを開く都度実行する必要があります。

2015/07/31 20:29 追記

リンクをクリックしたら読者登録が解除されるわけではなく、設定画面を開くだけです。

追記ここまで

以前書いた「購読中のブログの一覧を表示するスクリプト」にURLを追加しようかとも思いましたが、テキストのみで直接リンクにできないので現時点ではまだ対応していません。

sprint-life.hatenablog.com

登録解除を推進するようで若干うしろめたさはあるものの、読んでないのに登録したままなのもどうかと思うので、見直しの際にご活用ください。