in between days

表参道で働くシニアのブログ

はてなダイアリーで検索結果を記事一覧ページで表示するウラ技

ひと月ほど前にも「ダイアリーの記事一覧ページ(アーカイブ)をもっと活用したい!」という記事を書きましたが、はてなダイアリーの「記事一覧ページ(/archive)」はとても便利なのにあまり利用されてないページです。先月の記事ではもっともっと利用されてもいいはずだ、という観点からアイディアをいくつか提案しました。

今回はそのうちのひとつだった

で提案したような検索窓を実現する方法がわかったので紹介します。

検索結果が記事一覧ページで表示される検索フォーム

実はすでに、このダイアリーの上部Amazonアフィリエイトの右側にある検索フォームはこの方法を使っているので、試しに「はてな」とでも打ち込んで検索してもらうと、

http://d.hatena.ne.jp/mohri/archive?word=%A4%CF%A4%C6%A4%CA

というページにとんで、検索結果が記事一覧ページで表示されます。

この検索窓は、ヘッダ部分に次のようなフォームを書いているのです。

<form method="get" action="/はてなID/archive" class="hatena-searchform">
  <input type="text" name="word" class="hatena-searchform" value="">
  <input type="submit" name=".submit" value="検索" class="hatena-searchform">
</form>

そうなんです。自分でフォームを設置すればいいだけだったんですね。上記の記事一覧検索結果のURLを見ればこのフォームで動作することがわかるでしょう。あまりウラ技というほどは「ウラ」じゃないですね。

なお、ここではsearchiformモジュールとスタイルを合わせるために「class="hatena-searchform"」を入れていますが、とくにこだわらないなら無くても動作に影響はないとおもいます。

実は「はてな」も使っているこのウラ技

このフォームに気が付いたのは、Hatenaグループにある「はてな広報日記」からなのです。


機能変更、お知らせなど - はてな広報日記

このページの「バックナンバー一覧ページ」の右横の検索窓ですが、ここで必要があって検索してみたところ、検索結果が記事一覧ページで表示されたので驚いたのです。はてなグループにはダイアリーにない機能が追加されたのかと錯覚しましたが、HTMLソースを見てみるとこうなっていて

<a href="http://hatena.g.hatena.ne.jp/hatenapr/" class="navilink">はてな広報日記トップ</a> <a href="http://hatena.g.hatena.ne.jp/hatenapr/archive" class="navilink">バックナンバー一覧ページ</a> <form action="/hatenapr/archive" method="get">
<input value="" name="word" type="text" size="18">
<input align="bottom" alt="検索" src="http://www.hatena.ne.jp/images/top/searchbutton_hatena.gif" name=".submit" type="image">

なるほどと納得したわけです。

参考 -- 記事一覧ページ関連のアイディア

はてな自身もこういうところで自前のフォームを設置までしてるということは、検索結果を記事一覧ページにとばして表示するというアイディアは間違いなく需要があるという証左でしょう。ということで idea:11698 や関連アイディアの実装を願いたいところです。

idea:5562
はてなアイデア
idea:9889
はてなアイデア
idea:11697
はてなアイデア
idea:11698
はてなアイデア
idea:11699
はてなアイデア
idea:11701
はてなアイデア