1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-02-15

はじめに

自作のyoutube動画サイトをそっくりそのままcodepenで動作するものかと思い、テストを兼ねて試してみました。少し、手こずりましたが、問題なく動作しました。
少し、驚いています。小さなデモ的なスクリプトしか動作しないのかと思っていましたが、そうではなく、完全に動作しました。

テストしたサイトです。

codepenで表示してみます。

See the Pen relaxサイト by tecoyan (@okpzwnyh-the-vuer) on CodePen.

See the Pen slim再生リスト by tecoyan (@okpzwnyh-the-vuer) on CodePen.

倍率は0.5xにするといいようです。また、codepenの埋め込みコードでdata-height="300"をdata-height="500"にしています。きちんと動作しています。
これで、codepenを利用して、webサイトの説明がやりやすくなると思います。

実際のサイトページはこちらです。

Relaxサイトページ

あとがき

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

後日談

実は、その後、別のサイトのページをcodepenで動作させようと思いましたので手を付けました。しかし、動作しません。エラーを見てみると、どうやら、ダイナミックimport()でエラーになっていました。
おそらく、copepenではまだ、対応していないのかも知れないと思いました。
そこで、import関係はやめて、静的なscriptタグで対応しました。それでも、相当な数のエラーが出ていたので、ひとつひとつつぶして行きました。
簡単ではなかったです。最初に選択したサイトページはたまたま簡単に動作したするサイトページだったようです。
ちなみにそのサイトは以下のサイトです。

See the Pen test_cdpen再生リスト by tecoyan (@okpzwnyh-the-vuer) on CodePen.

倍率は0.5xがいいようです。

codepenで表示

Codepenのデバッグモードで表示しました。

See the Pen test_cdpen再生リスト by tecoyan (@okpzwnyh-the-vuer) on CodePen.

倍率は0.5xがいいようです。 デバッグモードですが、ここのQiitaでは、デバッグできません。ブラウザーで開くとデバッグできます。(ブレークします。) URLは、 https://cdpn.io/pen/debug/zxYGEWM?authentication_hash=vWkRwpLoOazM です。

注意

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

codepenのメリット

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

またまたですが

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

動的インポート() の動作

これは超シンプルなCodePenでwebページ表示です。

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

See the Pen スタート by tecoyan (@okpzwnyh-the-vuer) on CodePen.

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?