地名しりとり × はてなスター（Permalink 重要）

#capping #hatena

2007-09-09

急にはてなスターのことを調べたくなったので、地名しりとりにはてなスターを付けました。地名しりとりについては、過去の日記をご覧ください。

しりとりに登場した地名にスターを付けられます。
面白い地名や思い入れのある地名にスターを付けるといいでしょう。
機能はそれだけです。たくさんスターを付けても、特典はありません。
スターの付いた地名ははてなスター - 地名しりとりで見られます (2007/09/14追記) 。

追記 (2007/09/10)

はてなスター日記で取り上げられていてビックリした。

まちゅさん、ありがとうございまスター。

初めての方のために補足しておくと、地名しりとりは日経ソフトウエア4月号のサンプルプログラムとして作りまスター。その後、ムックにも収録していただいているので、よかったらご覧ください（宣伝）。

このムックには、竹迫さんの「正しいPerl/CGIの書き方」や大垣さんの「セキュアWebプログラミング入門」や笠谷さんのSeleniumの記事や結城さんの連載記事が載ってて面白い。時間のある休日にのんびり読む感じ。

以下、いつもの日記っぽく

改めて思ったのは、「Permalink重要」ってこと。これまでの地名しりとりには、以下の3つの画面しかなかった。

トップページ（最近の10件＋次の地名の入力）
地名検索ページ（入力した地名から候補を表示）
履歴ページ（過去に登場した地名の一覧）

過去に登場した地名の一覧はあっても、それぞれの地名を指し示す Permalink が抜けていた。 Permalink が無いだけで、こんなに不便なことになるとは。

おもしろい地名を紹介したときにリンクが張れない。
フィードを配信してもリンク先が無い（とりあえずGoogle Mapsの検索結果をリンク先にしてた）
気に入った地名にブックマークやスターが付けられない。

ということで、スターを付けるために、地名に Permalink を付けることにした。 Rails を使っているので、 Permalink の URL はそれほど悩まずに自然に決まった。

http://capping.machu.jp/histories/view/461

histories はコントローラ、 view はアクション、 461 は履歴のIDになる。 view が呼ばれたときのメソッドを、コントローラに追加した。単に ID から履歴を取ってくるだけ。

  def view
    unless params[:id]
      return redirect_to :action => 'index'
    end
    @history = History.find(params[:id], :include => {:area => [:position, :stations]})
  end

同じく画面データ (view.rhtml) も作成。こんなに簡単にできるなら、もっと早くやっておけばよかったよ…。

Permalink ができたので、はてなスターのスクリプトを呼び出す記述を追加した。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
  Hatena.Star.EntryLoader.headerTagAndClassName = ['h2'];
</script>

はてなスターのスクリプトは、 <h2> 要素の内側にリンクが含まれていれば、それを Permalink とみなすようになっている。リンクは画面上に表示する必要が無いので、リンクのテキストは空にしている。本当はスタイルシートで隠すほうがいいのかな？

<h2><%=link_to("", :action => 'view', :id => @history.id) %><%=h @history.area.name %></h2>

Permalink ができたので、履歴の画面からもスターを付けられるようにした。

といっても、普通に Permalink へのリンクを張って、 JavaScript をロードするだけだけどね。思ったよりも簡単だった。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
  Hatena.Star.EntryLoader.headerTagAndClassName = ['span', 'name'];
</script>

    <span class="name">
      <%=link_to(history.area.name, :action => 'view', :id => history.id) %>
      (<%=h history.area.syllabary %>)
    （後略）

一番大変だったのはトップページ。スターの対象となる最近10件の地名は、ページのロード後に動的に取得している。ちょっと悩んだけど、ページの構築後に手動で Hatena.Star.EntryLoader() を呼び出せば動くようになった。

    this.histories.each(function(history, index) {
      /* ページの構築処理をいろいろと */
    }.bind(this));
    /* はてなスターをロード */
    new Hatena.Star.EntryLoader();