v1.6.0 リリースノート: MDX コンポーネントの強化

今回のアップデートではなくても良いけど、あったら嬉しい機能を追加した。

このブログは MDX を使って書かれており、いくらでも JavaScript のコードを埋め込める。便利な機能ではあるのだが、GitHub でコンテンツを保存しているという背景もあり、できるだけ素のマークダウンファイルか GFM の形式を崩さない程度に実装してきた。そうすればいつの日かホスティングを止めても GitHub から自然言語に近い形で記事を閲覧できる。

GitHub で見るとこのような感じで表示される。

ただ、それらの形式で表現するには限界があるので JSX コンポーネントを意味的に理解しやすい形で実装することにした。意味的に理解しやすいの定義はコンポーネント名と属性を見るだけで何をしているのかがレンダリングされる前の状態でも推測できるということ。

Release v1.6.0 · kkhys/me1.6.0 (2024-03-10) Bug Fixes ci: update playwright browser installation command (e320b4f) deps: update commitlint monorepo to v19 (b9196f6) deps: update dependency @tanstack/react-table to v8.13.2...

github.com

Google Maps

Google Maps の下にはキャプションを付けられる

これから旅行関係の記事も記録として書いていきたいので一目で場所を理解できる Google Maps は取り入れたかった。

幸いにも Next.js が Google Maps の埋め込みをサポートするライブラリを作成していたためそれをラップする形で利用した。

GCP の API キーが必要とのことで、もしかして API の呼び出し制限がある？と思ったが、Maps Embed API は無料かつ無制限で呼び出せた（ソース）。他の API はリクエスト数に応じた従量課金制であるため、もし API キーが流出した場合を考えて他の API は使えないように設定した。

地図のマーカーを一意に設定するために placeId という Google Maps 固有の ID を使用している。 旧オスカー・シンドラーのホーロー工場 のように名称を入れてもマーカーを設定できるが、それがユニークである保証はないため、少し面倒だが placeId を入れるようにしてある。

placeId の取得は下記のページから行える。

プレイス ID | Places API | Google for Developers

developers.google.com

the cover of プレイス ID | Places API | Google for Developers

また、caption プロパティに文字列を入れるとコンポーネントの下に説明文を挿入できる。もちろん設定しなくてもよし。

Enable Google Maps in articles · Issue #683 · kkhys/meMy personal website. Contribute to kkhys/me development by creating an account on GitHub.

github.com

the cover of Enable Google Maps in articles · Issue #683 · kkhys/me

YouTube

YouTube を記事に埋め込むことで、文章だけでは伝えきれない内容を視覚的に訴えられるので好きだ。また、読者が動画を再生したら必然的に滞在時間が長くなり検索エンジンからの評価も上がる。基本的にメリットしかないので実装するしかない。

これも Google Maps と同様に Next.js の便利なライブラリがあったためラップして使用している。本来 YouTube の埋め込みは大量のデータを読み込むため、かなり LCP スコアを悪化させてしまう。

Next.js のライブラリでは内部的に lite-youtube-embed を使うことで通常の画像読み込みと遜色ないパフォーマンスを実現している。

lite-youtube-embed がやっていることは非常にシンプルで、動画の代わりにサムネイル画像を最初に読み込む。動画の再生はユーザがサムネイル画像をクリックしたときのみ開始されるため余計なリクエストが行われないという訳だ。

ただ、デメリットとしてはサムネイル画像が角丸だったりすると UI と合わずに違和感が出てしまう。これは避けようがない問題なので、そういった動画に当たらないことを願うしかない。

MDX 内では YouTube の URL を入力するだけでビルド時に videoId を抜き出してコンポーネントに属性として渡している。便利な方法なのだが、キャプションを追加できないのが少し引っかかっているため Google Maps と同じように <YouTube /> のようなコンポーネントに変えるかもしれない。

あと、動画再生時は必ずミュートでスタートするようにしてある（大事なポイント）。

https://github.com/kkhys/me/issues/685

X (Twitter)

X（前 Twitter）ではよく IT 技術関係のポストを見ており、稀に興味深くて記事で言及したいものがあったりする。そのときに引用する形で埋め込めたら便利だなと思ったため実装してみた。

内部的には react-tweet という Vercel 製のライブラリを使用している。 Vercel が作っているだけあって非常に使い勝手が良く、ポストを埋め込みたい場合はおすすめだ。

特にライトモードとダークモードのスタイリングの切り替えを勝手にしてくれたのは驚いた。

Enable Tweet in articles · Issue #691 · kkhys/meMy personal website. Contribute to kkhys/me development by creating an account on GitHub.

github.com

the cover of Enable Tweet in articles · Issue #691 · kkhys/me

脚注

Here is a simple footnote¹.

A footnote can also have multiple lines².

技術記事ではソースが非常に重要になってくる。そのときに本文内で言及すると冗長な印象を与えてしまうため脚注を追加できるようにした。

この書き方自体は GitHub のマークダウンファイルでサポートされている³。 remark-gfm で脚注の HTML は生成されているため、今回はそのスタイリングのみ行った。

Style footnotes in articles · Issue #630 · kkhys/mehttps://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#footnotes

github.com

the cover of Style footnotes in articles · Issue #630 · kkhys/me

アコーディオン

マルチプル

記事内のレイアウトを整理するのに便利そうなアコーディオンコンポーネントを実装した。複数か単数かで UI を分けている。

シングル

どちらかというとシングルの方が使う頻度は高そう。

HTML には details ⁴というタグがあり、JavaScript を使わずともブラウザ側で折りたたみウィジェットを作成できる。以下のように使用する。

<details>
  <summary>バルトークの曲の特徴は？</summary>
 
  バルトークは管弦楽曲、ピアノ曲、歌曲などに多くの作品を残しているが、最も有名なのは 43 年作の「管弦楽のための協奏曲」と、6 曲から成る「弦楽四重奏曲」である。
  作風は異国旋法、原始主義、民族主義、新古典主義を豊かな情感でまとめ、不協和音の中にマジャール（ハンガリー）民族の民謡とリズムが感じとれる革新的な音楽になっている。
</details>

ただ、デフォルトだといまいち見た目が好きではないため独自のコンポーネントを実装した。コンポーネント名と属性名は <details> タグに基づいている。

kkhys/meMy personal website. Contribute to kkhys/me development by creating an account on GitHub.

github.com