Astro でブログを書いているとき、ちょっとした HTML/CSS/JS のデモを記事に載せたくなることがあります。
ブラウザ上で動くサンプルを手早く用意できる CodePen を使い、埋め込みコードを Astro の記事に貼ってプレビューするところまでやってみたので紹介します！
記事は、
- セットアップ編
- Classic編
- Pen 2.0編
- 試してみた（CSS の無限テキストアニメを両方で組んだ比較）
という感じで最後に まとめを置いています。
セットアップ編
CodePen にアクセスして「Sign Up」
まず CodePen を開いてみましょう。
右上に Sign Up（緑のボタン）があるので、そこからアカウント作成に進みます。
Google・GitHub・メールで登録
登録画面では、Google か GitHub、または メールアドレスから選べます。
僕はは GitHub で連携しました。お好みの方法で問題ありません。
ログイン後の画面（Classic Pen と Pen 2.0）
サインアップが終わると、Your Work などが表示されるダッシュボードに移ります。
左の CREATE あたりに、Pen 2.0（新エディタ）と Classic Pen（従来の 3 ペイン）の両方が並んでいるはずです。
Astro の Markdown に貼る（Classic・Pen 2.0 共通）
どちらのエディタでコピーした埋め込みも、中身の形式は同じです。
ブログのように Markdown（または MDX）の本文に、そのまま HTML を書ける構成であれば、コピーした <p class="codepen" ...> と <script> をそのまま貼り付けます。
- コードとして見せたいときは、HTML のコードブロック（フェンスで囲み、先頭に
htmlと書く形）に入れる。 - 記事内で実際に動かしたいときは、コードブロックではなく 生の HTML として貼る（Classic編・Pen 2.0編・試してみたの各プレビュー例を参照）。
Classic編
Classic エディタのイメージ
ClassicPen を開くと、上段に HTML / CSS / JavaScript のタブ、下段にプレビューという、おなじみのレイアウトになります。
Classic から Embed する
Classicエディタでは、画面上部ではなく、画面下部のツールバーにEmbedがあります（Export や Share の近く）。
Embedを押すとEmbed This Penモーダルが開きます。
HTML（Recommended）・WordPress Shortcode・Iframeなどから選び、Copy Codeでコピーできます。
コピーしたコードは、次のような形になります（classic-test の例。data-slug-hash や href はあなたの Pen に合わせて変わります）。この <p class="codepen"> と <script> をそのまま Astro の Markdown に貼ることでも、埋め込み表示ができます（貼り方の共通ルールはセットアップ編を参照）。
<p
class="codepen"
data-height="300"
data-pen-title="classic-test"
data-default-tab="html,result"
data-slug-hash="qEaQYrK"
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/qEaQYrK"> classic-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>埋め込んだときのプレビュー（Classic の例）
以下は、上のコードと同じ埋め込みを本文にそのまま書いた場合の表示例です。
※読み込みには数秒かかることがあります
See the Pen classic-test by testkun08080 (@testkun08080) on CodePen.
Pen 2.0編
Pen 2.0 の画面
Pen 2.0 は、左にファイルツリー、中央にエディタ、右にプレビューといった IDE に近い構成です。
ファイル分割もしやすく、今後はこちらを主に使うのがよさそうだと感じました。
style.css や script.js を別ファイルに分けたときは、Classic の三ペインのように自動で結線されません。
index.html から <link rel="stylesheet" href="style.css"> や <script src="script.js" defer></script> のように、自分で読み込みを書いておく必要があります。
ここを抜かすとプレビューも埋め込みも期待どおりになりません（後半の「試してみた」で、筆者も一度忘れました）。
埋め込みコードを出す（Export / Share → Embed）
Pen 2.0 では、画面上部の 共有のようなアイコン（エクスポート／共有）を開き、メニューから Embed を選びます（上のスクリーンショットのオレンジ枠あたり）。
Embed モーダルで HTML などを選ぶ
Embed This Pen というモーダルが開きます。
タブで HTML（Recommended）、WordPress Shortcode、Iframe、Prefill Embed などを選べます。
まずは公式でも推奨されている HTML をコピーしてみます。Copy Code でまとめてコピーできます。
埋め込みコードの例
実際にコピーできるコードは、だいたい次のような形です（data-* にあなたの Pen の情報が入ります。
Pen 2.0 の Pen には 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/editor/testkun08080/pen/019d8542-6a33-75da-b78d-2f878081f32f"
>
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>埋め込んだときのプレビュー（Pen 2.0 の例）
以下は、上記と同じ埋め込みを本文にそのまま書いた場合の表示例です（読み込みには数秒かかることがあります）。
See the Pen new-pen-test by testkun08080 (@testkun08080) on CodePen.
※ フォールバック内の Pen へのリンクは、分かりやすい 通常の CodePen URL（/pen/スラッグ）に整えています。埋め込み自体は data-slug-hash などで識別されます。
試してみた：テキストの CSS 無限アニメーション
手順を一通り試したあと、同じ趣旨のデモを Pen 2.0 と Classic の両方で組んでみました。横方向に流れ続けるような 無限ループ系の CSS アニメーション（テキストを並べ、animation や transform で動かす想定）です。
Pen 2.0 版（text-mugen-CSSAnim(Pen2.0)）
Pen 2.0 では index.html や style.css など ファイルに分けて書けます。左のファイルツリー、中央のエディタ、右のプレビューという構成です。
ところで、style.css や script.js を使うときは、index.html 側から自分で読み込んでおかないといけないのを、筆者は最初忘れていました。Classic の三ペインでは HTML / CSS / JS が 別タブでも CodePen が自動でプレビューに反映してくれますが、Pen 2.0 の複数ファイルは そのままではつながらないためです。<link rel="stylesheet" href="style.css"> や <script src="script.js" defer></script> を書くまで、スタイルもスクリプトも効きません。
その状態でプレビューと埋め込みを見ていたところ、CSS が当たらず見た目もアニメーションも期待どおりになりませんでした。HTML に読み込みを足してからは、エディタのプレビューはもちろん、下の埋め込み HTML をこのブログに貼ったときも、意図どおり動くようになりました。
取得した埋め込みコードは次のとおりです（修正後の Pen でコピーしたものです）。
<p
class="codepen"
data-height="300"
data-pen-title="text-mugen-CSSAnim(Pen2.0)"
data-version="2"
data-default-tab="html,result"
data-slug-hash="VYKVdjw"
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/editor/testkun08080/pen/019d8593-769c-7726-a0e1-44ebe473312d"
>
text-mugen-CSSAnim(Pen2.0)</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>埋め込みプレビュー（Pen 2.0）
下は 上記と同じ属性で本文に埋め込んだ例です。表示が崩れる・動きが期待と違う場合は、まず HTML から CSS / JS を読み込めているかを確認し、Pen を直接開くか Iframe タブも試すとよいです。
See the Pen text-mugen-CSSAnim(Pen2.0) by testkun08080 (@testkun08080) on CodePen.
Classic 版（text-mugen-CSSAnim(classic)）
同じ内容を Classic Pen で書いたものです。HTML / CSS / JS の三ペインと、下段のプレビューというレイアウトになります（今回は JS は空で、CSS のみで表現しています）。
こちらは Classic では HTML / CSS が別タブでも自動でプレビューに反映されるので、Pen 2.0 と違った「読み込み忘れ」は起きにくいです。
埋め込みでもエディタのプレビューに近い見え方になり、意図どおり表示されました。
<p
class="codepen"
data-height="300"
data-pen-title="Untitled"
data-default-tab="html,result"
data-slug-hash="ogzQyog"
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/ogzQyog"> Untitled</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>※ CodePen 上ではタイトルが Untitled のままのときもあります。必要なら Pen の設定で名前を変えてから、もう一度 Embed からコードをコピーし直すとよいです。
埋め込みプレビュー（Classic）
See the Pen text-mugen-CSSAnim(classic) by testkun08080 (@testkun08080) on CodePen.
まとめ
- 見た目は、Classicの方が埋め込んだ状態からはいいかなと思いますが、新しいPen 2.0をとりあえず使っていこうかなと思います。
- Pen 2.0 で
style.cssなどを分けたときはindex.htmlから<link>/<script>で読み込むのを忘れないこと。僕ははこれを忘れて表示が崩れたが、修正後は上記の埋め込みコードで問題なく動いた。Classic は三ペインの HTML / CSS が自動でプレビューに効くので、同じミスは起きにくい。
記事を書くところによって、動かないところなどは、iframeなどをも使って試してみてください。
それでは。
