2024 年の振り返り | grip on minds

この記事では、本サイト内で 2024 年に公開したブログ記事や、ブログ記事テンプレートの改修、公開したプロジェクトについて振り返ります。

ブログ記事

本記事を含めて 20 本のブログ記事を公開しました。

1 年前の 2023 年は、サイトのリニューアル直後ということもあってか、年間で 43 本もの記事を公開しており、比較すると本数自体は減少しています。

しかし、1 本の記事にかける情報収集や執筆の時間は増えており、ブログ記事の執筆にかける熱量はそれほど変わっていません。ただ、その弊害として、記事が長くなりがちな傾向にあるので、もう少し簡潔にポイントを押さえた記事も織り交ぜていきたいところではあります。

記事の内容に目を向けると、CSS に関するものが多いですが、2023 年の CSS の書き方と比較すると、個人的には大きな変化は起きませんでした。

その一方で、これまでも書いていたウェブアクセシビリティに関する記事に加え、ウェブサステナビリティや HTML Web Components のように、本サイトのコンセプトでもある「ウェブの本質から考える」ことに重点を置いた記事を公開することができました。これらのテーマに関する記事は、2025 年以降も継続して執筆していきたいと考えています。

ブログ改修

ブログ記事テンプレートの改修として、おもに次の 3 つの機能を追加しています。

脚注のポップオーバー
コードのコピー
シンタックスハイライトの拡張

1. 脚注のポップオーバー

脚注は、本文の末尾の脚注リストにページ内リンクを付ける一般的な体裁でしたが、本文と脚注の間を往来することで集中力が途切れることを改善したいと感じていました。

まずは、ツールチップのように表示する方法を考えたのですが、脚注のテキスト量やスクリーンサイズによっては本文の邪魔になってしまうことや、ツールチップ内の脚注のテキストを選択しづらいといった問題があり、この方法は見送ることにしました。

最終的に、以下の記事で紹介されている、脚注をドロワー形式で表示する方法を採用しました。

Popovers Work Pretty Nicely as Slide-Out Drawers | Frontend Masters Boost（外部リンクを開く）

実際の脚注の挙動は次のとおりです¹²。

領域外をクリック（タップ）したり、「CLOSE」ボタンを選択することでドロワーが閉じます。表示される位置が固定されており、領域を広く確保できるため、本文の邪魔になることや、テキストを選択しづらいといった問題を最小限にとどめることができます。

なお、WCAG 2.2 の達成基準「2.4.11 隠されないフォーカス（最低限）」への配慮として、脚注コンテンツに最大の高さ（max-block-size）を指定し、フォーカスが領域外に移ったときには自動的にポップオーバーを閉じるように実装しています。

以下は、脚注のポップオーバーのコードを抜粋したものです。

脚注のポップオーバーの例

<!-- HTML -->
<button type="button" popovertarget="footnote-1" popovertargetaction="toggle">1</button>
<div id="footnote-1" class="footnote" popover>
  <p>脚注のポップオーバーのデモ 1 ❄️</p>
  <button type="button" popovertarget="footnote-1" popovertargetaction="close">Close</button>
</div>

<button type="button" popovertarget="footnote-2" popovertargetaction="toggle">2</button>
<div id="footnote-2" class="footnote" popover>
  <p>脚注のポップオーバーのデモ 2 ⛄️</p>
  <button type="button" popovertarget="footnote-2" popovertargetaction="close">Close</button>
</div>

<!-- CSS -->
<style>
.footnote {
  position: fixed;
  inset-block-start: auto;
  inset-block-end: 0;
  z-index: calc(infinity);
  inline-size: 100%;
  padding-block-end: 1em;
  padding-inline: 1em;
  translate: 0 0;
  transition-duration: 0.4s;
  transition-property: translate, display;
  transition-timing-function: ease;
  transition-behavior: allow-discrete;
}
.footnote:popover-open {
  @starting-style {
    translate: 0 100%;
  }
}
.footnote:not(:popover-open) {
  translate: 0 100%;
}
</style>

実際のコードでは、HTML は通常の脚注へのページ内リンクで、JS 側で Popover API のサポートを判定して対応している場合にのみ、上記のようなポップオーバーの HTML を動的に生成して差し替えています。

そのため、Popover API をサポートしていない環境では通常のページ内リンクのままなので、脚注としての機能は損なわれません。

2. コードのコピー

ブログ記事内に埋め込んだコードブロックのコード全体をコピーできる、「Copy Code」ボタンを追加しました。コードブロックにホバーもしくはフォーカスするとボタンが表示されます。

コードのコピーは、Clipboard API の writeText() メソッドを使用して実現しています。

コードのコピーボタンの JS（抜粋）

const copyCode = async(copyBtn, code) => {
  try {
    await navigator.clipboard.writeText(code.textContent);
    copyBtn.textContent = 'Copied!';
  } catch (e) {
    console.error(e.message);
  }
};

copyBtn.addEventListener('click', () => {
  copyCode(copyBtn, code);
});

Clipboard: writeText() method | MDN（外部リンクを開く）

3. シンタックスハイライトの拡張

コードブロックのシンタックスハイライトには Shiki を使用していますが、強調したい行や、追加行・削除行などを表示する拡張機能（@shikijs/transformers）を導入しました。

以下は、コードブロックにハイライトの行と、追加・削除の行を明示した例です。

@shikijs/transformers を使用したコードの例

console.log('foo');
console.log('highlighted'); 
console.log('bar');

console.log('add'); 
console.log('remove');

ただ、Astro の公式サイトや Starlight でも採用されている Expressive Code に興味が移っているところで、こちらも検討したいと考えているところです。

ここではブログ記事の改修ポイントを説明しましたが、サイト全体としては、Google Fonts をセルフホストに変更したり、Cache-Control の設定を見直したりと、おもにパフォーマンス最適化に関する改修を実施しています。

プロジェクト

本サイト内において 2 つのプロジェクトを公開しました。

KALEIDO-BOARD

CSS の color-mix() 関数によって、徐々に混ざり合う色の美しさや変化を楽しむウェブアプリ。

DOM-SPEAKER

HTML の構造を解析し、Web Speech API の音声合成で読み上げるボーカルシンセサイザー。

これらのプライベートなプロジェクトは、作っているときは非常に楽しいのですが、公開してから時間が経過すると興味が薄れてしまい、開発時に発覚した問題や改善点などの、先送りしたタスクが放置されてしまう傾向にあります。

そのような反省を踏まえ、今後はもう少し実用的なウェブアプリを作れるように計画していきたいです。まだ何も着手していませんが、ぼんやりと以下のようなプロジェクトが頭の中にあります。

ポモドーロタイマーのウェブアプリ
ゲーム形式の学習アプリ

ポモドーロタイマーは、個人用に最適化されたものが欲しいというのが最大の動機ですが、以下の記事で紹介されている「Tomodoro」のように、Document Picture-in-Picture API を使用したウェブアプリの可能性を調査することも理由の一つです。

Picture-in-Picture for any Element, not just <video> | Chrome for Developers（外部リンクを開く）

後者の、ゲーム形式の学習アプリの構想はほぼ白紙の状態ですが、例えば、コーディングについて気軽に学べるクイズのようなものを考えています。

おわりに

2024 年は国内外での出来事が目まぐるしく、例年にも増して圧倒的なスピードで月日が過ぎ去っていったように感じています。

まずは何よりも、まもなく発生から 1 年が経とうとしている、能登半島地震からの復旧・復興が、いち早く進んでほしいと願うばかりです。

日本に住んでいる限り巨大地震と無関係ではいられません。能登半島地震の直後には、おもに SNS 上でインプレッションを稼ぐことを目的としたデマや虚偽情報が拡散され、本当に必要とされる情報が取得しづらい状態が続きました。

インターネットは、私たちの生活に欠かせないインフラの一部ですが、その一方で、さまざまな場面において脅威やリスクが高まっていると感じます。うっかり穴に落ちないように、用心深く歩かなくてはならない空間となってしまいました。

本来ウェブが果たすべき役割は何なのか。

最新のテクニックや表現を追求することも大切ですが、それと並行して、ウェブというメディアがどうあるべきか。理想と現実の間で、自分なりにできることを考えていきたいです。

脚注

脚注のポップオーバーのデモ 1 ❄️ ↩
脚注のポップオーバーのデモ 2 ⛄️ ↩