ホームページ > 記事 > ウェブフロントエンド > リアルタイム出力を備えたインタラクティブな CodePlay アプリを構築する方法

リアルタイム出力を備えたインタラクティブな CodePlay アプリを構築する方法

WBOYオリジナル: 2024-08-06 01:32:02540ブラウズ

How to Build Interactive CodePlay App with Real-time Output

このチュートリアルでは、HTML、CSS、JavaScript、Bootstrap、および jQuery を使用して、CodePlay アプリと呼ばれる対話型 Web アプリケーションを作成します。このアプリケーションを使用すると、ユーザーは HTML、CSS、JavaScript でコードを記述し、埋め込まれた iframe 内で出力をリアルタイムで確認できます。

スムーズなアニメーション、応答性の高いデザイン、シームレスなコード編集機能の実装に焦点を当てます。

前提条件

このチュートリアルを進めるには、HTML、CSS、JavaScript、Bootstrap、jQuery の基本的な知識が必要です。テキストエディターと最新の Web ブラウザーがインストールされていることを確認してください。

プロジェクトのセットアップ

プロジェクト構造の作成:
- プロジェクト用に新しいディレクトリを作成します (codeplay-app)。
- このディレクトリ内に、css と javascript 用のサブディレクトリを作成します。
- ルートディレクトリにindex.html ファイルを作成します。
必要なライブラリをインクルードします:
- Bootstrap CSS をダウンロードし、css ディレクトリに含めます。
- CDN からの jQuery ライブラリをindex.html に含めます。
- アプリケーションロジックの JavaScript ディレクトリに main.js ファイルを作成します。

HTMLの構造

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>CodePlay App</title>
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
  <script src="javascript/main.js" type="text/javascript" defer></script>
</head>
<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">CodePlayer</a>
      <div class="ml-lg-5 btn-group btn-group-sm" role="group">
        <button type="button" id="html" class="btn btn-secondary active">HTML</button>
        <button type="button" id="css" class="btn btn-secondary">CSS</button>
        <button type="button" id="javascript" class="btn btn-secondary">JavaScript</button>
        <button type="button" id="output" class="btn btn-secondary active">Output</button>
      </div>
      <button class="navbar-toggler mt-sm-0 mt-2" type="button" data-toggle="collapse"
        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item mr-2">
            <a class="nav-link" href="https://www.linkedin.com/in/daslaw26/">About Me</a>
          </li>
          <li class="nav-item mr-2">
            <a class="nav-link" href="https://github.com/Daslaw/codePlayer.git">DaslawCodePlayer</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <main class="container-fluid">
    <div class="row" id="bodyContainer">
      <textarea id="htmlPanel" class="col panel"><p>Hello world!</p></textarea>
      <textarea id="cssPanel" class="col panel hidden">/* Enter your css code here! */</textarea>
      <textarea id="javascriptPanel" class="col panel hidden">/* Enter your JS code here! */</textarea>
      <iframe id="outputPanel" class="col panel">Hello world!</iframe>
    </div>
  </main>
  <!-- Optional JavaScript; choose one of the two! -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
    crossorigin="anonymous"></script>
</body>
</html>

CSS スタイル

CSS ファイル (style.css) は、レイアウトやパネルの可視性など、アプリケーションのスタイルを定義します。

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

.inlineMenu {
  display: inline;
}

.active {
  background-color: green !important;
}

.hidden {
  display: none;
}

.panel {
  resize: none;
  border: none;
  outline: none;
  border-top: 1.3px solid grey;
  transition: opacity 0.5s ease-in-out;
}

.panel:not(:last-child) {
  border-right: 1.3px solid grey;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  animation: fadeIn 0.5s;
}

JavaScript の機能

JavaScript ファイル (main.js) は、出力パネルの更新や画面サイズに基づいたパネルの可視性の管理など、動的な動作を処理します。

$(document).ready(function () {

    $(".panel").height($(window).height() - $("header").height() - 10);

    function updateOutput() {
        $("iframe").contents().find("html").html("<html><head><style type='text/css'>" +
            $("#cssPanel").val() + "</style></head></body>" + $("#htmlPanel").val() + "</body></html>");

        document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val());
    }

    updateOutput();
    $("textarea").on('change keyup paste', function () {
        updateOutput();
    });

    function hideAllPanel() {
        $(".btn-group").children().removeClass("active");
        $("#bodyContainer").children().addClass("hidden");
    }

    function mediaChange() {
        if (mobileScreen.matches) {
            //for small screen devices (max-width: 500px)
            hideAllPanel();
            $(".btn-group").children(":first-child").addClass("active");
            $("#bodyContainer").children(":first-child").removeClass("hidden");

            $(".btn-group").children().off("click");
            $(".btn-group").children().click(function () {
                hideAllPanel();
                $(this).toggleClass("active");
                let panelId = $(this).attr("id") + "Panel";
                $("#" + panelId).toggleClass("hidden");
            });
        }
        else if (tabScreen.matches) {
            //for medium screen devices (max-width: 800px)
            hideAllPanel();
            $(".btn-group").children(":first-child").addClass("active");
            $("#bodyContainer").children(":first-child").removeClass("hidden");
            $(".btn-group").children(":last-child").addClass("active");
            $("#bodyContainer").children(":last-child").removeClass("hidden");

            let activePanel = ["html", "output"];

            $(".btn-group").children().off("click");
            $(".btn-group").children().click(function () {
                let thisID = $(this).attr("id");

                if (this.matches(".active")) {
                    //when user clicks on active panel button...
                    $(this).toggleClass("active");
                    let panelId = $(this).attr("id") + "Panel";
                    $("#" + panelId).toggleClass("hidden");

                    if (thisID != activePanel[0])
                        activePanel[1] = activePanel[0];

                    activePanel[0] = null;
                }
                else {
                    //when user clicks on inactive(hidden) panel button...
                    let selectPanel = activePanel.shift();
                    $("#" + selectPanel + "Panel").toggleClass("hidden");
                    $("#" + selectPanel).toggleClass("active");

                    $(this).toggleClass("active");
                    let panelId = $(this).attr("id") + "Panel";
                    $("#" + panelId).toggleClass("hidden");

                    activePanel.push(thisID);
                }
            });
        }
        else {
            //for other screens...
            $(".btn-group").children().off("click");
            $(".btn-group").children().click(function () {
                $(this).toggleClass("active");
                let panelId = $(this).attr("id") + "Panel";
                $("#" + panelId).toggleClass("hidden");
            });
        }
    }

    //media queries; on Screen change.
    var mobileScreen = window.matchMedia("(max-width: 500px)");
    var tabScreen = window.matchMedia("(max-width: 800px)");

    mediaChange();
    tabScreen.addEventListener("change", mediaChange);
    mobileScreen.addEventListener("change", mediaChange);

});

ライブデモとリポジトリ

ライブデモ: CodePlay アプリのライブデモ
GitHub リポジトリ: CodePlay アプリ GitHub リポジトリ

結論

おめでとうございます!これで、ユーザーがスムーズなアニメーションと応答性の高いデザインを備えた HTML、CSS、JavaScript コードをリアルタイムで作成してプレビューできるようになり、さまざまなデバイス間で最適な使いやすさを実現する CodePlay アプリが構築されました。

コーディングを楽しんでください!

以上がリアルタイム出力を備えたインタラクティブな CodePlay アプリを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript jquery css bootstrap html for include Directory using JS this github iframe

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS の A から Z まで次の記事：CSS の A から Z まで

続きを見る