CodePenへのコード例共有をjsDelivrから自社CDNに切り替え

2026年03月26日 00:47 JST shoelace-style/webawesome

https://github.com/shoelace-style/webawesome/pull/2201

「Open in CodePen」機能のCDN参照先を jsDelivr から WebAwesome 自社CDN（ka-p.webawesome.com）に変更しました。これにより、CodePen で開いたコード例でもプロコンポーネントが正しく動作するようになります。

背景

WebAwesome のドキュメントには「Open in CodePen」ボタンがあり、コード例をそのまま CodePen に送信して動作確認できます。これまで送信されるコードは jsDelivr を経由して WebAwesome のアセットを読み込む構成でした。しかし jsDelivr は公開 npm パッケージのミラーであるため、プロコンポーネントを含む kit ベースの配信には対応できず、CodePen 上でプロコンポーネントが機能しないという問題がありました。

自社 CDN（ka-p.webawesome.com）は kit コードを通じた認証付き配信をサポートしており、プロコンポーネントを含むすべての機能を提供できます。

技術的な変更

packages/webawesome/docs/assets/scripts/code-examples.js において、CodePen へ送信する HTML スニペットの CDN URL が置き換えられました。

変更前:

const CDN_URL = `https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@${version}/dist-cdn/`;

// ...
const html =
  `<script data-fa-kit-code="..." type="module" src="${CDN_URL}webawesome.loader.js"></script>\n` +
  `<link rel="stylesheet" href="${CDN_URL}styles/webawesome.css">\n\n` +
  `${code.textContent}`;

変更後:

// CDN_URL 変数は削除

// ...
const html =
  `<link rel="stylesheet" href="https://ka-p.webawesome.com/kit/b9bfcf2dca544e85/webawesome@${version}/styles/webawesome.css">\n` +
  `<script type="module" src="https://ka-p.webawesome.com/kit/b9bfcf2dca544e85/webawesome@${version}/webawesome.loader.js"></script>\n\n` +
  `${code.textContent}`;

変更点は次の3点です：

CDN_URL 変数の削除: jsDelivr のベース URL を組み立てていた定数を削除し、URL をインラインに統合
URL 構造の変更: cdn.jsdelivr.net/npm/@awesome.me/webawesome@{version}/dist-cdn/ から ka-p.webawesome.com/kit/b9bfcf2dca544e85/webawesome@{version}/ へ移行。パス中の b9bfcf2dca544e85 が kit 識別子にあたります
要素の順序と属性の変更: <script> より <link> を先に出力する順序に変更。また旧コードにあった data-fa-kit-code 属性は新 URL に kit 識別子が含まれるため不要となり削除されました

バージョン文字列 ${version} は引き続きドキュメントの data-version 属性から取得されるため、バージョン追従の仕組みはそのまま維持されます。

設計判断

kit コードを URL パスに埋め込む方式が採用されました。旧実装では data-fa-kit-code 属性でスクリプトタグに kit コードを指定していましたが、新 CDN では kit 識別子がパス構造（/kit/{id}/）に含まれます。これにより <script> タグの属性を別途設定する必要がなくなり、CSS と JS の両タグが同一の URL パターンで統一されています。

また、CDN_URL 変数を削除してインライン URL に置き換えたことで、CSS と JS が同じ kit ベース URL を持つことが一見して明確になります。将来的に URL 構造が変更される場合は2箇所の修正が必要になりますが、現時点では可読性とシンプルさを優先した判断といえます。

まとめ

本PRは CodePen 連携における CDN を jsDelivr から自社 kit CDN へ切り替え、プロコンポーネントを含むすべての機能を CodePen 上で動作させることを実現した変更です。URL パスへの kit 識別子の統合により、認証の仕組みとアセット配信が一体化した構成となっています。