2015 01 21

tumblrで年別アーカイブが欲しかった時にやったこと

tumblrのアーカイブ表示はデフォルトで用意されているもののみ

tumblrをアイテムをタグで分類するサイトで、CMSとして使ったんですが、時系列でも見れるようにしたいということで、じゃあ年度別のアーカイブを用意すれば良いかと軽く考えてました。
ですが、tumblrはアーカイブページはテーマに関わらず同じデザインの下記ページのみ。
http://ユーザー名.tumblr.com/archive/
同じデザインのままアーカイブを見せたいので、このページではなく別途作りたい。

タグに年度を含めて運用してもらう

対応した結論としては、運用上のルールとして、投稿時に年度を西暦の4桁の数字のみでタグとして登録してもらうようにしました。

タグクラウドの表示

APIを使って投稿からタグを取得して、、、というのが解決策のようで、いろいろツールを作ってくださっている方がいます。
今回は以下のサイトで作成したものを入れました。
http://heatherrivers.com/projects/tumblr-tag-clouds
サービス提供側でキャッシュをつくって高速表示してくれるものとかもあるようで、もうちょっと調べないととは思ってます。 以下のような感じで、jsから扱いやすいようにidをつけておくと良いかも。


<div id="tagcloud">
	<script type="text/javascript" src="http://static.tumblr.com/zpgybcc/Neelpcziw/tumblr.min.js?minsize=100&maxsize=100"></script>
</div>

数字のみのタグを年度のタグとして抜き出し/アーカイブリンクの表示位置に入れる

以下のような感じ。
タグクラウド内のliをeachで見て、aタグの中身が数値の時のみ別のulタグに入れて(ここだとul.list-gnav-item)、アーカイブを表示させたい位置に突っ込んでます。
テキストの扱いの下手さが出ててツライ… でもとりあえずこれでやりたかった感じにはなると思います。


navCreate = function(){
	var $tagcloudItems = $('#tagcloud').find('li'),
	$archiveBox = $('<div>').attr({
		'id': 'archive-box'
	}),
	$archiveList = $('<ul>').addClass('list-gnav-item');

	$tagcloudItems.each(function(y) {
		var itemText = $tagcloudItems.find('a').eq(y).text();
		if(!isNaN(itemText * 1)) {
			$tagcloudItems.eq(y).prependTo($archiveList);
		}
	});

	$archiveList.appendTo($archiveBox);

	// archiveを追加
	$archiveBox.appendTo('#gnav-works');
}

結論

一覧として、タグからも見せたい/過去のものも見せたい/という用途よりも、tumblrは情報のスクラップというか、フィード的に流していくイメージなんだなーと改めて感じました。
CMSとして使うのには、かなりの設計力とクライアントの理解と運用力が必要。
過去の投稿の修正したい場合、管理画面で過去の投稿まで遡るのかなり大変だけど、ログイン状態で該当ページにアクセスして右上の「編集する」ボタンから編集するなど、独自ノウハウも前もってためておかないと。
なんというかクライアントワークで簡単にCMSとして使えますよーとは、自分の力量ではまだ言えない。