はてなブログで簡易はてなカレンダーモジュール機能を実装する
ある人から「記事一覧機能はいいけど縦長すぎる。はてダみたいなのがほしかった」ほしいというのでどうやらそれっぽいものならできそうなのでつくってみた。所要時間は調査(5分)、実装(15分)、テストやデザインなどの調整(10分)って感じだったので30分くらいかな。
前提
彼はデザインは1カラムが好きで、わざわざカスタム CSS で aside サイドバー属性を下部に無理やり追い込む人だった。そのとき記事一覧が好きだったが、既存の記事一覧モジュールは縦長になりすぎた。コンパクトにまとめたいらしい。で、はてダにあったカレンダーモジュールははてなブログにないのでどうしよう、という話。
実装
ただの HTML をいれられる部分が公式で用意されているのでそこにつっこむ。でもただのHTMLだけど手打ちは面倒すぎる。なのでスクリプトで生成した。Python で生成したのは単に自分が慣れているから。JavaScript でも他の言語でもまあできるとは思う。
事前調査
こういう HTML って微妙にタグがつかえなかったりすること多いから*1プレビューしてためした。どうやら a タグと br タグは動くからよし。ホワイトスペースは1つに圧縮されるので   で調節。
また、サイドバーの記事一覧はリンクとしては単純に blogurl/archive/
スクリプト
簡単な話で、ただの HTML 文字列を生成してやればよいだけ。コメントはわりとかいた。
# coding: utf-8 # 年のリストの生成 # 2004 年はじまりだから接頭辞は 20 だけでよい YEARS = [] for y in xrange(4,14): if y < 10: y = u'0' + unicode(y) else: y = unicode(y) YEARS.append(u'20' + unicode(y)) # 月のリストの生成 MONTHS = [] for m in xrange(1,13): if m < 10: m = u'0' + unicode(m) else: m = unicode(m) MONTHS.append(unicode(m)) # 結果を格納する文字列 result = u"" for year in YEARS: result += u"<a href=/archive/" + year + u'>' + year + '</a>' # デリミタの設定 result += u'|' # 読みづらいので改行コード挿入 result += u'\n' for month in MONTHS: month = u"<a href=/archive/" + year + u'/' + month + u'>' + month + '</a>' # デリミタの設定 result += month + u'|' # 読みづらいので改行コード挿入 result += u'\n' # 読みづらいので改行コード挿入 result += u'<br />\n' # デバッグ用 # print(result) # 書きだしておく。必須ではないけど、コピペするときに楽 with open('tmp.txt', 'w') as f: f.write(result)
まあ文字列吐いてるだけです。結果出力の使わない部分は HTML のコメントアウトしてもらったりして調整してもらいました。
できてないこと
- JavaScript で実装する
Python が使い慣れてて楽だからそうしたけど、JS で動くものをつくれたほうが他の人がコピペして使えるからいいかもしれない
- ある月に記事がない場合のリンクをはらない
その場合は「ある月に記事があるか」という判定が必要で、たぶん機械的にXHRとばしてパースすればできるだろうけど、面倒なのでしなかった。あと、次善策としてはそもそも既存の記事別機能でそもそも記事が0の月とか表示がない月はわかるのだから、手動でいいんじゃね?そんな数百あるような事例じゃないし。
まあ
仕様が簡単だったというのはあるけど、30分の突貫工事で80%程度のつくりたいものができたので概ね満足。
*1:たとえばニコ動の説明欄はプレミアム版で font と br だけつかえるよね、みたいな