2021-12-08

Jekyllを使ったブログにカテゴリ・タグ一覧機能を追加してみた

書いた人: @KCSC-Igarashi @saito-site

こんにちは。H2開発グループの@KCSC-Igarashi, @saito-siteです。
今回は、今までのブログの記事に元々追加されていたカテゴリ・タグを基に、それぞれの一覧機能を追加しました。
その手順を備忘録がてら書いていこうと思います。
カテゴリ一覧とタグ一覧は同様な実装をすることになるため、今回はカテゴリ一覧について書きます。

自己紹介

@KCSC-Igarashi
　新卒2年目。Ruby/Railsエンジニア。
　1年目は防災系システムのwebアプリ開発のプロジェクトでAPI作成等のバックエンド開発を経験。
　2年目は通販系サイトのリニューアルプロジェクトにアーキから参画し、フロントエンド開発を経験。
　好きなものは日本酒・ソーシャルゲーム。嫌いなものはパクチー。

@saito-site
　新卒1年目。
　5か月間の研修期間を経て、9月～11月は通販系サイトのリニューアルプロジェクトに在籍。
　現在は次のプロジェクトまでの勉強期間中。

カテゴリ一覧ページの実装

カテゴリ一覧を追加するにあたって、以下の4項目について実装します。

カテゴリ一覧ページの作成
記事一覧のそれぞれの記事表示にその記事のカテゴリを表示
サイドバーにカテゴリ一覧を表示
カテゴリ表示部にカテゴリ一覧ページの該当カテゴリへのリンクを付与

1 カテゴリ一覧ページの作成

カテゴリ一覧ページでは、すべての記事からカテゴリを取得してカテゴリごとに並べ、該当する記事のタイトルにリンクをつけて表示します。

category.htmlを作成し、以下のコードを記述します。

category.html

---
layout: page
permalink: /categories/index
title: カテゴリ一覧
---

<div id="archives">
  {% for category in site.categories %}
    <div class="archive-group">
      {% capture category_name %}{{ category | first }}{% endcapture %}
      <h3 class="category-head"><a name="{{ category_name }}">{{ category_name | capitalize }}</a></h3>
      {% for post in site.categories[category_name] %}
        <article class="archive-item">
          <h4><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></h4>
        </article>
      {% endfor %}
    </div>
  {% endfor %}
</div>

Front Matter(３つのハイフンで囲まれている部分)で使用するレイアウトやページのurl名を決めています。
コード内の{{ }}と{％％}で囲まれている部分は、jeckyllで使用されているテンプレート用言語Liquidの書き方で、
前者は内容の出力、後者は論理文の実行を示します。

2 記事一覧のそれぞれの記事表示にその記事のカテゴリを表示

記事一覧は_layouts/home.htmlの<article>タグ内に記載されているため、
<article>タグ内に記事ごとのカテゴリを表示させるようにコードを追加します。

_layouts/home.html

{% for post in site.posts %}
  <article class="post-preview">
    <p class="post-meta">{{ post.published_at | date: '%Y-%m-%d' }}&nbsp;&nbsp;@{{post.author}}</p>
    <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
      <h1 class="post-title">{{ post.title }}</h1>
    </a>

 +  <p>
 +    Categories :
 +    {% for category in post.categories %}
 +      <a href="{{site.baseurl}}/categories/index#{{ category | slugify }}">{{ category | capitalize }}</a>
 +    {% endfor %}
 +  </p>

    <div class="post-content">{{ post.excerpt | strip_html | truncatewords: 200 }}</div>
  </article>

  <hr>
{% endfor %}

3 サイドバーにカテゴリ一覧を表示

サイドバーは_includes/aside.htmlに記載されています。
こちらにカテゴリ一覧表示のためのコードを追加します。

_includes/aside.html

<div class="aside-categories">
  <p>:pencil: カテゴリ一覧</p>
  {% for category in site.categories %}
    {% capture category_name %}{{ category | first }}{% endcapture %}
    <div class="aside-categories-item">
      <a href="{{site.baseurl}}/categories/index#{{category_name}}" class="aside-link">
        {{ category_name | capitalize }}
      </a>
    </div>
  {% endfor %}
</div>

感想

@KCSC-Igarashi
　今まで、RubyのフレームワークはRailsしか触れてこなかったため、今回初めてJekyllに触れてみて改めて違いを認識しました。
　カテゴリ一覧機能を追加するにあたり、自分たちで見積もりを立て、実装を行いました。
　見積り 3日 ( 調査　2日、実装　1日 )
　実績　2日 ( 調査 1.5日、実装 0.5日 )
　おおよそ見積り通りに実装が行えたかと思います。
　実装に入る前にJekyllはどのようなものか、どうやって実装するかを入念に調査したため、実装自体は半日もかかりませんでした。
　新しいものに触れる際に構造を大枠でも理解することが大切だと感じました。

@saito-site
　普段使用しているRailsとは違うフレームワークを使用するため、実装に5日(7.5h/日)かかると想定していたものが、
　ふたを開けてみれば半分の2.5日で完了するものでした。
　ただ今回は先輩のコードを参照することができたため、自分1人の力ではおそらく想定していた日数かかるだろうなという印象を受けました。
　まずは1人でも2.5日以内に実装が完了できるように、これからも知識を増やしていきたいです。

ケーシーエスキャロット採用情報は、こちら