問題一覧に戻る
初級環境設定
問題4: Jupiter Terminalの統合

Jupiter TerminalをWebアプリケーションに統合する方法を学びます。Jupiter Terminalは、Webサイトに直接埋め込むことができる強力なスワップウィジェットです。このデモを実行するには、'npm install -g http-server'を使用してhttp-serverをインストールする必要があります。HTMLファイルを作成した後、HTMLファイルが含まれるディレクトリで'http-server'コマンドを実行してローカルWebサーバーを起動します。公式ドキュメントはこちら: https://dev.jup.ag/docs/tool-kits/terminal/html-app-example

<!DOCTYPE html>
<html lang="en">"en">
<head>
    <meta charset="UTF-8">"UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jupiter Terminal Demo</title>
    <script src="https://terminal.jup.ag/main-v4.js" data-preload defer>src="https://terminal.jup.ag/main-v4.js" data-preload defer></script>
</head>
<body>
    <div class="container">class="container">
        <h1>Jupiter Terminal Demo</h1>
        <div id="jupiter-terminal">id="jupiter-terminal"></div>
    </div>

    <script>
        // ページが完全に読み込まれるのを待つ
        window. = function() {
            // 設定でJupiterターミナルを初期化
            window.. ({
                displayMode: "widget",
                // ウィジェットを埋め込む場所を指定 - HTMLのidと一致させる
                integratedTargetId: "",
            });
        };
    </script>
</body>
</html>