f:id:bulldra:20141129111013j:plain

過去記事ガチャ

　このブログも450記事を超えてきており、「ランダム」に表示させたいと思う事が多いので『過去記事ガチャ』を作ったり、「あわせて読みたい」の一環として id:yuta25 さん作成のランダムリンクサービスを利用させて頂いてました。

<a href="http://bulldra.hatenablog.com/entry/archive-gatcha-rakugo">ネタ切れを感じたら過去記事カードガチャで「らくごのご」 - 太陽がまぶしかったから</a> <a href="http://djbudo.hatenablog.com/entry/2014/03/22/164434">RAD v0.0.3 - Random Access Diaries</a>

　『RAD v0.0.3 - Random Access Diaries』は素晴らしいサービスなのですが「エントリの削除」には追随しておらず、僕のように記事消しを頻繁にしていたブログで実行すると「記事が見つかりませんでした」になってしまいがちという問題があります。

　これに対応するため、サイトマップからランダムにジャンプする処理を独自で作成することとし、ついでに「最新」「最古」のURL取得処理も作って「はじめてのはてな」へもリンクできるようにします。

記事をランダム表示

sitemap.xmlの取得

　sitemap.xmlは本来的には検索エンジンに記事がある場所を教える情報なのですが、こちらをAJAXで読み取って解釈させることで、そのブログにある記事一覧をプログラム内で利用できるようになります。サイトマップを取得するURLは以下の通りです。

サイトマップ一覧を取得　http://bulldra.hatenablog.com/sitemap.xml
個別サイトマップを取得　http://bulldra.hatenablog.com/sitemap.xml?page=1

　ロジックとしてはサイトマップ一覧からランダムに個別サイトマップを選択して、そこからまたURLをランダムで選択してジャンプしています。サイトマップはブログエンジン側で記事追加・変更・削除に応じて更新されるので、記事消しをしたURLにジャンプする事はありません。今回はJQueryを使って実装しました。

<a href="https://github.com/bulldra/bulldra.github.io/blob/master/sitemap.js">bulldra/bulldra.github.io</a>

使用方法

　任意の場所に以下のスクリプトのインポートとリンクを作成します。ヘッダでインポートしておけば、任意の場所でリンクを作るだけで大丈夫です。

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/sitemap.js" charset="utf-8"></script>

<a onClick='jumpRandomEntry(true)' href='javascript:void(0)'>開く</a>

　onClickで使用できる処理は以下の通りです。抽出関数は自由に拡張できます。

関数	機能	サンプル
jumpRandomEntry(true)	ランダムな記事を新ウィンドウで開く	開く
jumpRandomEntry(false)	ランダムな記事にジャンプ	開く
jumpLastEntry(true)	最新の記事を新ウィンドウで開く	開く
jumpLastEntry(false)	最新の記事にジャンプ	開く
jumpFirstEntry(true)	最古の記事を新ウィンドウで開く	開く
jumpFirstEntry(true)	最古の記事にジャンプ	開く

まとめ

　以上の手順でサイトマップから「初めてのはてな」や「ランダム記事」へリンクする事ができあす。AJAX通信を含むJavaScriptなのでRSSリーダーやTwitterや他人のブログのサイトマップを取得したりはできません。あくまで設置ブログ内で動作させるためのものです。そのような要件の場合はやはり、『RAD v0.0.3 - Random Access Diaries』を利用された方がよいかと思います。