【初心者向けチュートリアル】CodePen を Astro ブログに埋め込むまで（登録〜プレビューまで試しました）

Astro でブログを書いていると、ちょっとした HTML/CSS/JS のデモを記事に載せたくなります。
ブラウザ上で動くサンプルを手早く用意できる CodePen を使い、埋め込みコードを Astro の記事に貼ってプレビューするところまで試しました。

Classic と Pen 2.0 で Embed の取り出し方が違い、Pen 2.0 では CSS の読み込み忘れで一度失敗しています。
その差を中心に書きます。

セットアップ

CodePen を開き、右上の Sign Up からアカウントを作ります。

登録は Google / GitHub / メールから選べます。僕は GitHub で連携しました。

ログイン後のダッシュボードでは、左の CREATE あたりに Pen 2.0（新エディタ）と Classic Pen（従来の 3 ペイン）が並びます。

どちらでコピーした埋め込みも、形式はほぼ同じです。
Astro の Markdown（または MDX）で生の HTML を書ける構成なら、<p class="codepen" ...> と <script> をそのまま貼ります。

• コードとして見せたい → HTML のコードブロックに入れる
• 記事内で動かしたい → コードブロックではなく生の HTML として貼る

Classic と Pen 2.0 の違い

Classic：下部ツールバーから Embed

Embed を押すと Embed This Pen モーダルが開きます。
HTML（Recommended） を選んで Copy Code すれば足ります。

貼ったあとの表示例（classic-test）です。読み込みに数秒かかることがあります。

See the Pen classic-test by testkun08080 (@testkun08080) on CodePen.

Pen 2.0：共有メニューから Embed

Pen 2.0 では、画面上部の共有アイコンを開き、メニューから Embed を選びます。
モーダルの中身は Classic と同じく HTML / WordPress / Iframe などです。

コピーできるコードはだいたい次の形です。Pen 2.0 では data-version="2" が付くことがあります。

<p
  class="codepen"
  data-height="300"
  data-pen-title="new-pen-test"
  data-version="2"
  data-default-tab="html,result"
  data-slug-hash="bNwQMVb"
  data-user="testkun08080"
  style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
>
  <span
    >See the Pen
    <a href="https://codepen.io/testkun08080/pen/bNwQMVb">new-pen-test</a>
    by testkun08080 (<a href="https://codepen.io/testkun08080">@testkun08080</a>)
    on <a href="https://codepen.io">CodePen</a>.</span
  >
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

埋め込んだ表示例です。

See the Pen new-pen-test by testkun08080 (@testkun08080) on CodePen.

試してみた：無限テキストの CSS アニメ

同じ趣旨のデモを Pen 2.0 と Classic の両方で組んでみました。
横方向に流れ続けるような、無限ループ系の CSS アニメーションです。

Pen 2.0 で一度失敗したところ

style.css や script.js を別ファイルにしたとき、Classic のように自動では結線されません。
index.html から次のように自分で読む必要があります。

<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>

ここを抜かしたままプレビューと埋め込みを見ていたところ、CSS が当たらず見た目もアニメーションも期待どおりになりませんでした。
読み込みを足してから、エディタのプレビューも、下のブログ埋め込みも意図どおり動くようになりました。

See the Pen text-mugen-CSSAnim(Pen2.0) by testkun08080 (@testkun08080) on CodePen.

表示が崩れるときは、まず HTML から CSS / JS を読めているかを確認し、Pen を直接開くか Embed の Iframe タブも試すとよいです。

Classic 版

同じ内容を Classic で書いたものです（今回は JS は空で、CSS のみ）。
HTML / CSS が別タブでも自動でプレビューに反映されるので、Pen 2.0 のような読み込み忘れは起きにくいです。
埋め込みでも、エディタのプレビューに近い見え方になりました。

See the Pen text-mugen-CSSAnim(classic) by testkun08080 (@testkun08080) on CodePen.

※ CodePen 上ではタイトルが Untitled のままのときもあります。必要なら Pen の設定で名前を変えてから、もう一度 Embed をコピーし直すとよいです。

まとめ

• 埋め込み自体のコード形は Classic / Pen 2.0 でほぼ同じ。違うのは Embed の場所と、複数ファイル時の結線
• Pen 2.0 で style.css などを分けたときは、index.html から <link> / <script> で読むのを忘れないこと。僕は一度忘れて表示が崩れた
• Classic は三ペインが自動でプレビューに効くので、同じミスは起きにくい
• 記事側で動かないときは、Iframe 埋め込みも試すとよい

それでは。