ジミニー Code Editor

ニュース

ジミニー Code Editor をアップしました！

【新規ボタンの追加】

Clear & Paste ボタン - 現在のコードを削除し、クリップボードにコピーされたコードをエディタに貼り付けます。
Replace JS ボタン - エディタ内の <script>...</script> ブロックを対象に、クリップボードの内容で置換します。（候補が複数ある場合は一覧から選択できます。）
Replace CSS ボタン - エディタ内の <style>...</style> ブロックを対象に、クリップボードの内容で置換します。（候補が複数ある場合は一覧から選択できます。）
Replace Func ボタン - エディタ内の関数（function ... { ... }）ブロックを対象に、クリップボードの内容で置換します。（関数名があれば一覧に表示され、選択可能です。）

ファイルを開く機能も追加し、ローカルファイルをエディタに直接読み込めるようになりました。

さらに、操作ボタンのデザインと配置を一新し、直感的に操作できるよう改善しました。

使い方は動画でご確認いただけます。ダウンロードボタンからHTMLとして保存も可能です！

News

Run

Download

Reset

Undo

Redo

Paste

Clear & Paste

Replace JS

Replace CSS

Replace Func

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
  <style>
    /* --- CSS の定義 --- */
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
      text-align: center;
    }
    h1 {
      color: #333;
      font-size: 2em;
      margin-bottom: 0.5em;
    }
    p {
      font-size: 1em;
      color: #666;
    }
    button {
      font-size: 1em;
      padding: 10px 20px;
      margin-top: 20px;
      cursor: pointer;
      border: none;
      background-color: #4CAF50;
      color: #fff;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>これはサンプルのHTMLコードです。</p>
  <button onclick="outerFunction()">Click Me!</button>

<script>
    // --- JavaScript の定義 ---

// 外側の関数
    function outerFunction() {
      console.log("outerFunction が呼ばれました");

// 内側の（ネストした）関数
      function innerFunction() {
        console.log("innerFunction が呼ばれました");
        alert("innerFunction が実行されました！");
      }
      
      // 内側の関数を実行
      innerFunction();

// さらに、関数を生成するファクトリ関数の例
      function functionFactory(message) {
        // この内部関数は、渡されたメッセージをアラート表示する
        return function() {
          alert("Factory からのメッセージ: " + message);
        };
      }

// ファクトリ関数を使って新しい関数を作成
      var generatedFunction = functionFactory("こんにちは、ファクトリ関数です！");
      
      // 生成した関数を実行
      generatedFunction();
    }
  </script>
</body>
</html>