ホームページ > 記事 > ウェブフロントエンド > リアルタイム出力を備えたインタラクティブな CodePlay アプリを構築する方法
このチュートリアルでは、HTML、CSS、JavaScript、Bootstrap、および jQuery を使用して、CodePlay アプリと呼ばれる対話型 Web アプリケーションを作成します。このアプリケーションを使用すると、ユーザーは HTML、CSS、JavaScript でコードを記述し、埋め込まれた iframe 内で出力をリアルタイムで確認できます。
スムーズなアニメーション、応答性の高いデザイン、シームレスなコード編集機能の実装に焦点を当てます。
このチュートリアルを進めるには、HTML、CSS、JavaScript、Bootstrap、jQuery の基本的な知識が必要です。テキスト エディターと最新の Web ブラウザーがインストールされていることを確認してください。
プロジェクト構造の作成:
必要なライブラリをインクルードします:
<!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 ファイル (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 ファイル (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); });
おめでとうございます!これで、ユーザーがスムーズなアニメーションと応答性の高いデザインを備えた HTML、CSS、JavaScript コードをリアルタイムで作成してプレビューできるようになり、さまざまなデバイス間で最適な使いやすさを実現する CodePlay アプリが構築されました。
コーディングを楽しんでください!
以上がリアルタイム出力を備えたインタラクティブな CodePlay アプリを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。