Webページをcodepenで動作させてみました。

# はじめに
自作のyoutube動画サイトをそっくりそのままcodepenで動作するものかと思い、テストを兼ねて試してみました。少し、手こずりましたが、問題なく動作しました。
少し、驚いています。小さなデモ的なスクリプトしか動作しないのかと思っていましたが、そうではなく、完全に動作しました。
# テストしたサイトです。
codepenで表示してみます。
<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="YPzWVpY" data-pen-title="relaxサイト" data-user="okpzwnyh-the-vuer" 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/okpzwnyh-the-vuer/pen/YPzWVpY">
  relaxサイト</a> by tecoyan (<a href="https://codepen.io/okpzwnyh-the-vuer">@okpzwnyh-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>


<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="zxYGEWM" data-pen-title="slim再生リスト" data-user="okpzwnyh-the-vuer" 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/okpzwnyh-the-vuer/pen/zxYGEWM">
  slim再生リスト</a> by tecoyan (<a href="https://codepen.io/okpzwnyh-the-vuer">@okpzwnyh-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

<strong>倍率は0.5xにするといいようです。また、codepenの埋め込みコードでdata-height="300"をdata-height="500"にしています。</strong>きちんと動作しています。
これで、codepenを利用して、webサイトの説明がやりやすくなると思います。
# 実際のサイトページはこちらです。
[Relaxサイトページ](https://relax.tecoyan.net/#bodybg)


# あとがき
まさか、これほど簡単に自作のサイトがそっくりそのままcodepenで表示できるとは正直思っていませんでした。これは驚きです。

# 後日談
実は、その後、別のサイトのページをcodepenで動作させようと思いましたので手を付けました。しかし、動作しません。エラーを見てみると、どうやら、ダイナミックimport()でエラーになっていました。
おそらく、copepenではまだ、対応していないのかも知れないと思いました。
そこで、import関係はやめて、静的なscriptタグで対応しました。それでも、相当な数のエラーが出ていたので、ひとつひとつつぶして行きました。
簡単ではなかったです。最初に選択したサイトページはたまたま簡単に動作したするサイトページだったようです。
ちなみにそのサイトは以下のサイトです。
<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="zxYGEWM" data-pen-title="test_cdpen再生リスト" data-user="okpzwnyh-the-vuer" 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/okpzwnyh-the-vuer/pen/zxYGEWM">
  test_cdpen再生リスト</a> by tecoyan (<a href="https://codepen.io/okpzwnyh-the-vuer">@okpzwnyh-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
倍率は0.5xがいいようです。

[codepenで表示](https://codepen.io/okpzwnyh-the-vuer/pen/EaxjwEG?editors=0010)


# Codepenのデバッグモードで表示しました。
<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="zxYGEWM" data-pen-title="test_cdpen再生リスト" data-user="okpzwnyh-the-vuer" 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/okpzwnyh-the-vuer/pen/zxYGEWM">
  test_cdpen再生リスト</a> by tecoyan (<a href="https://codepen.io/okpzwnyh-the-vuer">@okpzwnyh-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
倍率は0.5xがいいようです。
デバッグモードですが、ここのQiitaでは、デバッグできません。ブラウザーで開くとデバッグできます。(ブレークします。)
URLは、
https://cdpn.io/pen/debug/zxYGEWM?authentication_hash=vWkRwpLoOazM
です。

### 注意

サイトの閲覧者の方もデバッグできてしまうかは、調べてないのでわかりませんが、本来のコード元までは変更できないと思いますので、試しにテストされても結構です。


# codepenのメリット
codepenのいいところは、実際のwebページを見ながら、その場で、動作しているコードが見れるところです。それまでは、別ページでIDEなどのエディターを開いていました。ページを行ったり来たりしなくてもいいところがメリットですね。

# またまたですが
ダイナミックimport()も動作するようです。まだ、確かめていませんが、以下のサイトが参考になるかも知れません。

[動的インポート() の動作](https://codepen.io/shospodarets/pen/qVoZoR)

# これは超シンプルなCodePenでwebページ表示です。
実は一番やりたかったテストが、CodePenで自作の<strong>ダイナミックimport()</strong>を使用したwebページの実行です。
この実行が中々できませんでした。それは、CodePenのhtmlボックスに、webページのhtmlファイルのコードをそのまま入力していたのですが、<strong>URLにGETパラメータがあり、その指定方法が不明だったからです。</strong>htmlファイルは先頭にphpコードがあり、そこでGETパラメータを解析しています。<strong>そのGETパラメータのあるURLをCodePenへ渡す方法をネットで探していましたが、見つかりませんでした。</strong>
いろいろ、悩んでいるときに、今朝方、思い付きました。
それが、ここで紹介する方法でした。
以下にそのCodePenの実例を示します。

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="jEOMqgE" data-pen-title="スタート" data-user="okpzwnyh-the-vuer" 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/okpzwnyh-the-vuer/pen/jEOMqgE">
  スタート</a> by tecoyan (<a href="https://codepen.io/okpzwnyh-the-vuer">@okpzwnyh-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

倍率は0.5にして、それでも入りきらないため、横スクロールで調整願います。 
結論は、<strong>単にiframeにして、urlにGETパラメータを指定しただけですが。</strong>