middleman blogでタグとカテゴリの並び順を昇順・降順に変更してみよう。

Web/24 Aug 2015

Wordpress から middleman でのブログ運用に変えて、困ったことの一つに「タグとカテゴリの並び順の指定」があります。Wordpress では order => ASC のように書いてループすれば良いのですが、middleman での実装方法がわからず、途方に暮れていました。でも、すぐに解決できたよ。

middleman は Ruby 製だった

結論はコードを見た方が早いので先に掲載します。

タグ: erb の場合

<% blog.tags.sort.each do |tag, articles| %>
  <% unless tag.nil? %>
    <a href="<%= tag_path(tag) %>">
      <span><%= tag %></span>
      <span>( <%= articles.size %> )</span>
    </a>
  <% end %>
<% end %>

タグ: slim の場合

- blog.tags.sort.each do |tag, articles|
  - unless tag.nil?
    = link_to tag_path(tag) do
      span = tag
      span
        | (
        span = articles.size
        | )

いつも slim で書くので、 erb 記法が正しく書けているか若干不安が残りますが、上のような感じです。

Ruby の sort メソッドを使います。 blog.tags が配列のデータなので、 sort を使って新しい配列を返してくれます。順序の比較には演算子が使われているので blog.tags.sort では「a → z」の昇順で並ぶことになります。

並びを逆にしたい時は blog.tags.sort{|a, b| b <=> a }.each do |tag, articles| のように sort{|a, b| b <=> a } のようにします。

middleman は Ruby 製なので、基本的には Ruby のメソッドが使えるはずで、あとは middleman で取得するデータが何なのかを理解することが重要です。 確認用に出力する時は putsprintp の表示メソッドを使うと良いです。下記のようにターミナルに値を表示してくれます。

show method

これだけ見ると非エンジニアの私にはきついですが…

カテゴリの並び替えも同じ

middleman ブログでカテゴリを設定する方法は以前書いた記事をご覧ください。

カテゴリ一覧を昇順で出力するには以下のように記述します。

カテゴリ: erb の場合

<% blog.articles.group_by {|a| a.data.category }.sort.each do |cat, articles| %>
  <% unless cat.nil? %>
    <a href="<%= category_path(cat) %>">
      <span><%= cat %></span>
      <span>( <%= articles.size %> )</span>
    </a>
  <% end %>
<% end %>

カテゴリ: slim の場合

- blog.articles.group_by {|a| a.data.category }.sort.each do |cat, articles|
  - unless cat.nil?
    = link_to category_path(cat) do
      span = cat
      span
        | (
        span = articles.size
        | )

これも blog.articles.group_by {|a| a.data.category } が配列になっているので、タグと同様に sort メソッドが使えます。

なぜ並び変えるのか

ユーザービリティの観点から並び替えを変更したいと思いました。というのも、このサイトを見てくれた人から「過去記事を見たい時にタグの並びが順不同で探しにくかった」という一言があったからです。

compare-drawer

左が順不同の並びで、右がアルファベット順(昇順)に並べたものです。 小さな変更かもしれませんが、ユーザービリティ向上の秘訣は、小さな変更の積み重ねなので、閲覧ページ数の増加などにつながると思っています。

ちょっと Tips 系の内容になりましたが、参考になれば。 今日の業務はこれにて終了です。