はてブいじりをリニューアルしました！
前に、はてブのレイアウトをいじれる「はてブいじり」をリリースしました！という記事でも書いたのですが、昔「はてブいじり」というウェブサービスを作っていました。これを今回リニューアルしてみたので、その宣伝とメモを書いておきます。
はてブいじりとは？
そもそも、はてブいじりとはどんなサービスかというと、簡単に言えば、はてブホッテントリの見た目をいじれるというだけのサービスです。
昔、はてなブックマークのウェブデザインが大きく変わったんですね。今までリスト形式だったのに、タイル式に変わってしまいました。この変化に、多くの人が批判的だったんですね。見にくくなった、情報量が少ない、などといった批判が出ました。
それを受けて、はてブを見やすく表示するウェブサービスがいろいろリリースされて、僕も作ってみようと思って作ったのがはてブいじりです。はてブいじりでは、今までのようにリスト形式で表示したり、タイル形式で表示したりと、見た目や表示内容をいじれるという特徴があります。まぁ、携帯からはいじれないんですけれども。
二番煎じであったため、そんなに大きくは取り上げられませんでしたが、一応、はてブトップをあなた好みに 「はてブいじり」公開といった感じで、とりあげられたりもしました。
今回はてブいじりでいじったところ
上で書いたように、はてブいじりというサービスは、はてなブックマークのデザイン変更がきっかけになっていました。しかし、今はてブをみてみると、ヘッドラインはタイル形式で変わりませんが、それぞれのカテゴリーのホッテントリは、タイル形式、リスト形式、リスト形式（概要なし）と3種類から選べるようになっています。えぇ、はてブいじりはもう不要ってことです（涙）。
まぁしかしですね、自分で昔作ったサービスということもあり、自分でも使っているんで、もう少しいじってみようとふと思ったんですね。一番やりたかったことは、「過去のホッテントリ表示」です。
過去のホッテントリって僕はニーズがあるんじゃないかなって思うんですけど、はてブの本家サイトでは、重要視されていないみたいなんですよね。まず、各カテゴリーの下の方までいって「過去の人気エントリー」に行く必要があるんですが、その場所が分かりにくいんですよね。下の方にサブカテゴリーのホッテントリがあり、そこと直近のホッテントリの間に「過去の人気エントリー」に行くリンクがあるんですが、正直、見つけにくいです。
しかも、「過去の人気エントリー」って一日ずつ順番にしか過去にたどっていけないんですね。まぁ、URLに日付を直接打ち込めば一気に過去までさかのぼれますが、それっていまいちですよね。
過去の人気エントリーをカレンダーを使って移動したいというのが、今回いじりたいと思ったところです。
はてブいじりでいじったときに気付いたことのメモ
以下は、今回はてブいじりをリニューアルした時に、やったことや気付いたことのメモです。
内部の技術的なことですが、今まで、データ解析とデータ表示は別々のphpファイルに分けていましたが、今回統一しました。phpでデータ解析した結果をajaxで受け取って表示、みたいなことをしていましたが、特にそんなことをする必要がないな、って思って書き直しました。ホッテントリの切り替えを動的にやっているわけではないので。jsですることが減って、その分phpですることが増えただけです。
で、メインでやろうと思っていたカレンダーの部分ですが、結果的に言うとカレンダーそのものは作らなくてもよかったんですね。実は使ったことがなかったので知らなかったんですが、html5からinputのtypeにdateっていうのが追加されたんですね。これを使えば、カレンダーが表示されるという。
jQueryでは、普通のinputと同じで、val()で値をとることができます。値が「YYYY-MM-DD」形式になることに注意すれば、特段難しいことはないですね。
html5のおかげで超楽チンなのですが、実はこのdateというtypeは、FireFoxとIE10ではサポートされていないんですね。日付とわかるようにplaceholderつけてみましたが、悩ましいですね。
あと、今回広告の場所を変えてみました。今までは上の方に小さなリンクユニット1個、一番下に広告ユニット1個をつけていました。が、まったくクリックされていませんでした。いやもうびっくりするくらいクリックされていませんでした。特にリンクユニットは1万回くらい表示されて、クリックは1回だけでした。即削除を決定しました。
広告ユニットも一番下に配置していたということもあって、ほとんどクリックされていませんでした。まぁ、サイトの特徴から考えると、これは自然なことかと。普通は興味ある記事のリンク先に行っちゃうんで、一番下までそもそもスクロールしないですよね。ということで、これも削除することにしました。そのかわりに、各ホッテントリの間に広告を入れるようにしました。広告ユニットは3つまで可能なので、3つ表示するようにしました。クリック率が上がることに期待です。
あと、シェアボタンですが、今まで若干上下がずれていましたが、修正しました。なかなか上下そろわないんですよね。font-sizeとかline-heightとかvertical-alignとか、いろいろいじっちゃうとどんどんずれていく罠だと思います。他のサイトで「こうしたらできた！」っていうのを読んでそのとおりやってもできないんですよね。テキスト関連の設定とかマージンの取り方などが同じじゃないと、表示は同じにならないと思います。各サイトごとに試行錯誤するしかない気がします。
という感じで作ってみたものの、過去のホッテントリは表示が遅く、データ取得も結構ミスったりしているんで、あんまり使えないかも。悩ましい。