こんにちは、H2開発グループの今野です。

新年一発目の記事は、昨年ブログ運営チームで実施したアップデートについて、いくつか紹介したいと思います！

1. スマートフォン対応

これまではパソコンのブラウザ上で表示することを主に想定しているレイアウトになっていたため、スマートフォンやタブレットでもなるべく快適に読めるよう、全体的に調整を行いました。

この対応にはPure.cssというCSSフレームワークを利用しています。 Pure.cssはそもそもがCSSフレームワークの中でも「超軽量型」に分類されるほどコンパクトなフレームワークなのですが、さらに一部のモジュールだけを組み込むことができます。 ありがたいことにグリッドシステムのモジュールを単体で組み込むことができたので、これを使って画面の表示幅によって表示を切り替える対応を実施しました。

詳しい作業内容をまとめて地元の勉強会で発表した時の資料があるので、ぜひ併せてご覧ください！

2. OGPの設定(SNS等でシェアするときに記事の概要が出力されるようにした)

GitHub Pagesでは利用できるJekyllプラグインが決まっており、そのリストはGitHub Pagesで利用するgemの一覧として以下のページで確認できます。

Dependency versions | GitHub Pages

GitHub Pagesで利用可能な jekyll-seo-tag プラグインを利用して、SNSでシェアする際にページの情報が出力されるようにしました。

SNSではこのように表示されるようになりました！

3. 座談会記事向けのスタイルを追加

もともとはシンプルな箇条書きスタイルを採用していたのですが、せっかくなので専用のスタイルを組んでみました。

アップデートの成果はRubyKaigi 2024の座談会記事から確認することができます。いかがでしょうか？

最初は「Markdownから座談会用に組んだHTMLを何らかの形で出力する仕組みをつくって、専用のCSSを組めばよいかな？」と思っていたのですが、この方針にはいくつかの問題点がありました。

• OGPの項目で述べたとおり、GitHub Pages上で利用可能なJekyllプラグインは固定されている(＝ユーザー側で増やすことが出来ない)ため、例えば「ビルド時に使うオリジナルのプラグインを作って組み込む」等の対応はできない
  • 参考: プラグイン | Jekyll • シンプルで、ブログのような、静的サイト
• かと言って記事を作る時点でバチバチにHTMLを組んでしまったり、何らかの専用コンポーネントを採用するとレビュー時の「文章としての」可読性が下がる可能性がある

加えて記事本体はMarkdownで記述されているため、当初の箇条書きスタイルはMarkdown側の可読性という点でメリットがあり、可能であればそれを維持したいという気持ちがありました。

そこで思いついたのが箇条書き構造の調整とclass属性の追加を行い、それらを取っ掛かりにCSSを適用していくという方法です。 Jekyllが記事のビルド時に利用しているMarkdownパーサーのkramdownで採用されている記法を利用してclass属性を追加していきます。

{:.talk-paragraph}
* **発言者A**{:.speaker}
    * こんにちは！
* **発言者B**{:.speaker}
    * こんにちは！
    * 今日は天気がいいですね。

上記のように記述すると、Jekyllは以下のようなHTMLを出力します。

<ul class="talk-paragraph">
  <li>
    <strong class="speaker">発言者A</strong>
    <ul>
      <li>こんにちは！</li>
    </ul>
  </li>
  <li>
    <strong class="speaker">発言者B</strong>
    <ul>
      <li>こんにちは！</li>
      <li>今日は天気がいいですね。</li>
    </ul>
  </li>
</ul>

この構造とclass属性の talk-paragraph や speaker を手掛かりにしてCSSを設定していきました。

ブラウザ上の最終的な出力は以下のようになります。

• 発言者A
  • こんにちは！
• 発言者B
  • こんにちは！
  • 今日は天気がいいですね。

自分としてはMarkdownの良さをなるべく損なわずに作れたのでは……？と思っています。

今後も座談会やインタビュー記事の追加の機運を感じておりますので、そちらもお楽しみに！ (それもこのアップデートをやろうとした動機のひとつでした)

余談・説明リスト(dl)要素はどう？

ちなみに直接HTMLを組むことを検討していた際、dl要素を使うことも候補に入れていました。 そこで使いどころとして適切なのかをHTML解体新書で確認したところ、まるで私の考えを見越したかのように以下の記述がありました。

対談や会話の表現にdl要素を利用し、話者をdt要素、発言をdd要素で表現するケースも見られますが、 HTML Standardでは単純にp要素で表現することを勧めています。

わざわざHTML Standardからもコメントが出るくらい、 dl 要素を使いたくなるのは「あるある」ということかもしれないですね。(結局 p 要素ではなく、箇条書きを採用しましたが……)

ということで、2024年に実施したブログのアップデート内容の紹介でした。 今年もよろしくお願いします！