はてなブログで目次を自動更新するトップページを作ってみた

トップページに記事の目次を表示させたい

　はてなブログのトップページは最新記事の文章が垂れ流しになっていて、一覧性が低いのが困っていました。ブログのデザインをリニューアルした id:cardmics さんもその辺りを嘆いていたので勝手にやりかたを考えてみました。

あと、出来ればトップページも記事の垂れ流し状態から目次に変えたいんですけど、ここははてなブログ側の仕様によるものなので、どうしようもできない状況です。せめてトップページくらいは自由に編集できる機能があるとほんと便利なので、はてなブログさん、機能追加を是非是非お願いします！

　この手の機能は標準提供されたり、外部サーバーの値を読み込ませるのが一番なのですが、とりあえず作ってみたので、「http://bulldra.hatenablog.com」からトップページをご覧ください。

トップページを個別エントリに転送する仕組み

　トップページのURLにアクセスされたら、「http://bulldra.hatenablog.com/entry/top」に転送させます。やりかたは色々とあるのですが、とりあえずは以下のスクリプトをヘッダに追加することで実現できます。

<!-- http://bulldra.github.ioを利用するスクリプトの無断転載はご遠慮ください -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>

<script type="text/javascript">
if(isTopPage()) {
  document.location.href = getBlogUrl() + '/entry/top';
}
</script>

　日付を「9999/12/31」などに設定した記事を作って必ずトップに表示させる方法もあるのですが、RSSや「購読中ブログ」の表示が正常に動かなくなるので推奨しません。自動転送をさせたときのGoogleからの評価も微妙です。

個別記事内で目次を自動更新させる

　個別ページにはRSSを読み取ってブログカード記法で表示させる処理を作りました。外部ブログのRSSも取得できるので、はてなブックマークのRSSを読み取らせたり、WordPressブログの更新通知を行うこともできます。

<!-- http://bulldra.github.ioを利用するスクリプトの無断転載はご遠慮ください -->
<span id='表示場所1'></span>
<span id='表示場所2'></span>

<script src="http://bulldra.github.io/viewrss.js" charset="utf-8"></script>
<script type="text/javascript">
runViewRss('表示場所1', 'RSSURL1', 表示数);
runViewRss('表示場所2', 'RSSURL2', 表示数);
</script>

　はてなブログ公式のアクセスランキングブログパーツを流用させる方法もあります。個別ページには好きなHTMLが書けるので、可能性は無限大です。

まとめ

　以上のように実装することで、はてなブログでも目次などを自動更新するトップページが実現できます。アドレスバーの表示URLが変わってしまうとか、デザインがどうなんだとかの課題がありますが、はてなブログ内で簡単に実現しようとするとこんな感じです。

　こういう処理は標準提供されるべきですし、外部サーバーを利用すれば楽なのですが、はてなブログの枠組みのなかだけで実現させるのにも「ミニ四駆改造」のような楽しさがあります。そんなわけではてなブログで目次を自動更新してくれるトップページに必要性を感じたら自己責任でご利用いただければと思います。なお、設置サポートや表示スタイル／アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いします。

関連記事