{"id":1491,"date":"2025-05-10T17:59:00","date_gmt":"2025-05-10T08:59:00","guid":{"rendered":"https:\/\/tkimura.issp.u-tokyo.ac.jp\/wp\/?page_id=1491"},"modified":"2025-07-17T15:24:01","modified_gmt":"2025-07-17T06:24:01","slug":"sandbox","status":"publish","type":"page","link":"https:\/\/tkimura.issp.u-tokyo.ac.jp\/wp\/?page_id=1491","title":{"rendered":"SANDBOX"},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex\">\n<div>\n  <h3>\u5149\u5b50\u30a8\u30cd\u30eb\u30ae\u30fc\u30fb\u6ce2\u9577\u5909\u63db\u30c4\u30fc\u30eb\uff08nm \u2194 eV\uff09<\/h3>\n  <label>\u6ce2\u9577 (nm):<\/label>\n  <input type=\"number\" id=\"wavelength\" placeholder=\"\u4f8b: 500\" \/>\n  <button onclick=\"convertToEnergy()\">\u2192 \u30a8\u30cd\u30eb\u30ae\u30fc (eV) \u306b\u5909\u63db<\/button>\n  <p id=\"energyResult\"><\/p>\n\n  <label>\u30a8\u30cd\u30eb\u30ae\u30fc (eV):<\/label>\n  <input type=\"number\" id=\"energy\" placeholder=\"\u4f8b: 2.5\" \/>\n  <button onclick=\"convertToWavelength()\">\u2192 \u6ce2\u9577 (nm) \u306b\u5909\u63db<\/button>\n  <p id=\"wavelengthResult\"><\/p>\n<\/div>\n\n<script>\n  function convertToEnergy() {\n    const wavelength = parseFloat(document.getElementById(\"wavelength\").value);\n    if (wavelength > 0) {\n      const energy = 1239.84193 \/ wavelength;\n      document.getElementById(\"energyResult\").textContent = `\u30a8\u30cd\u30eb\u30ae\u30fc: ${energy.toFixed(3)} eV`;\n    } else {\n      document.getElementById(\"energyResult\").textContent = \"\u6709\u52b9\u306a\u6ce2\u9577\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\";\n    }\n  }\n\n  function convertToWavelength() {\n    const energy = parseFloat(document.getElementById(\"energy\").value);\n    if (energy > 0) {\n      const wavelength = 1239.84193 \/ energy;\n      document.getElementById(\"wavelengthResult\").textContent = `\u6ce2\u9577: ${wavelength.toFixed(3)} nm`;\n    } else {\n      document.getElementById(\"wavelengthResult\").textContent = \"\u6709\u52b9\u306a\u30a8\u30cd\u30eb\u30ae\u30fc\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\";\n    }\n  }\n<\/script>\n<br>\n\n\n\n<div style=\"height:100px;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-6388d5dc\"><\/div>\n\n\n\n<div>\n  <h3>\u89d2\u5ea6\u5909\u63db\u30c4\u30fc\u30eb\uff08\u30e9\u30b8\u30a2\u30f3 \u2194 \u5ea6\uff09<\/h3>\n\n  <label>\u30e9\u30b8\u30a2\u30f3:<\/label>\n  <input type=\"number\" id=\"radInput\" placeholder=\"\u4f8b: 1.57\" step=\"any\" \/>\n  <button onclick=\"convertToDegrees()\">\u2192 \u5ea6 (degree) \u306b\u5909\u63db<\/button>\n  <p id=\"degResult\"><\/p>\n\n  <label>\u5ea6:<\/label>\n  <input type=\"number\" id=\"degInput\" placeholder=\"\u4f8b: 90\" step=\"any\" \/>\n  <button onclick=\"convertToRadians()\">\u2192 \u30e9\u30b8\u30a2\u30f3 (rad) \u306b\u5909\u63db<\/button>\n  <p id=\"radResult\"><\/p>\n<\/div>\n\n<script>\n  function convertToDegrees() {\n    const rad = parseFloat(document.getElementById(\"radInput\").value);\n    if (!isNaN(rad)) {\n      const degrees = rad * (180 \/ Math.PI);\n      document.getElementById(\"degResult\").textContent = `\u5ea6: ${degrees.toFixed(2)}\u00b0`;\n    } else {\n      document.getElementById(\"degResult\").textContent = \"\u6709\u52b9\u306a\u30e9\u30b8\u30a2\u30f3\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\";\n    }\n  }\n\n  function convertToRadians() {\n    const degrees = parseFloat(document.getElementById(\"degInput\").value);\n    if (!isNaN(degrees)) {\n      const radians = degrees * (Math.PI \/ 180);\n      document.getElementById(\"radResult\").textContent = `\u30e9\u30b8\u30a2\u30f3: ${radians.toFixed(4)} rad`;\n    } else {\n      document.getElementById(\"radResult\").textContent = \"\u6709\u52b9\u306a\u5ea6\u6570\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\";\n    }\n  }\n<\/script>\n<br>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>\u6570\u5f0f\u3092\u30d7\u30ed\u30c3\u30c8 &#8211; Pyodide<\/title>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/pyodide\/v0.24.0\/full\/pyodide.js\"><\/script>\n    <style>\n        .container {\n            text-align: center;\n            max-width: 600px;\n            margin: auto;\n        }\n        .range-inputs {\n            display: flex;\n            justify-content: center;\n            gap: 10px;\n            margin: 10px 0;\n        }\n        .range-inputs input {\n            width: 80px;\n        }\n    <\/style>\n<\/head>\n<body>\n<div class=\"container\">\n    <h3>\u6570\u5f0f\u3092\u5165\u529b\u3057\u3066\u30b0\u30e9\u30d5\u3092\u63cf\u753b<\/h3>\n    <p>\u4f8b\uff1a <b>np.sin(x) * x<\/b>, <b>x**2 &#8211; 5*x + 6<\/b><\/p>\n\n    <input type=\"text\" id=\"formula_input\" value=\"np.sin(x)*x\"\n        style=\"max-width:400px;width:100%;padding:8px;font-size:16px;text-align:center;display:block;margin:0 auto;\">\n\n    <!-- \u7bc4\u56f2\u5165\u529b\u6b04\u3092\u6a2a\u4e26\u3073\u306b -->\n    <div class=\"range-inputs\">\n        <label>X-min: <input type=\"number\" id=\"x_min\" value=\"-10\"><\/label>\n        <label>X-max: <input type=\"number\" id=\"x_max\" value=\"10\"><\/label>\n        <label>Y-min: <input type=\"number\" id=\"y_min\" placeholder=\"auto\"><\/label>\n        <label>Y-max: <input type=\"number\" id=\"y_max\" placeholder=\"auto\"><\/label>\n    <\/div>\n\n    <button onclick=\"plotGraph()\">\u30b0\u30e9\u30d5\u3092\u63cf\u753b<\/button>\n\n\n    <br><br>\n    <img id=\"graph_image\" alt=\"\u3053\u3053\u306b\u30b0\u30e9\u30d5\u304c\u8868\u793a\u3055\u308c\u307e\u3059\">\n<\/div>\n<script>\n    async function loadPyodideAndPackages() {\n    document.getElementById(\"plot_button\").disabled = true;\n    const loadingMessage = document.getElementById(\"loading_message\");\n\n    window.pyodide = await loadPyodide();\n    await pyodide.loadPackage([\"matplotlib\", \"numpy\"]);\n    console.log(\"Pyodide and packages loaded!\");\n\n    loadingMessage.style.display = \"none\";\n    document.getElementById(\"plot_button\").disabled = false;\n}\n\nasync function plotGraph() {\n    let formula = document.getElementById(\"formula_input\").value;\n    let x_min = parseFloat(document.getElementById(\"x_min\").value);\n    let x_max = parseFloat(document.getElementById(\"x_max\").value);\n    let y_min_input = document.getElementById(\"y_min\").value;\n    let y_max_input = document.getElementById(\"y_max\").value;\n\n    let y_min = y_min_input === '' ? 'None' : parseFloat(y_min_input);\n    let y_max = y_max_input === '' ? 'None' : parseFloat(y_max_input);\n\n    let code = `\nimport matplotlib.pyplot as plt\nimport numpy as np\nimport io\nimport base64\n\nx = np.linspace(${x_min}, ${x_max}, 400)\nsafe_dict = {\"x\": x, \"np\": np}\n\ntry:\n    y = eval(\"${formula}\", {\"__builtins__\": None}, safe_dict)\nexcept Exception as e:\n    y = None\n    error_msg = str(e)\n\nif y is not None:\n    plt.figure(figsize=(5, 3))\n    plt.plot(x, y, label=r'${formula}', color=\"b\")\n    plt.xlabel('x')\n    plt.ylabel('y')\n    plt.title('Function Plot')\n    plt.grid(True)\n    plt.legend()\n\n    y_min, y_max = ${y_min}, ${y_max}\n    if y_min is not None or y_max is not None:\n        plt.ylim(bottom=y_min if y_min is not None else None,\n                 top=y_max if y_max is not None else None)\n\n    buf = io.BytesIO()\n    plt.savefig(buf, format='png', bbox_inches='tight')\n    buf.seek(0)\n    encoded = base64.b64encode(buf.read()).decode('utf-8')\n    buf.close()\nelse:\n    encoded = None\n\nencoded if y is not None else \"error:\" + error_msg\n`;\n\n    try {\n        let result = await pyodide.runPythonAsync(code);\n        if (result.startsWith(\"error:\")) {\n            alert(\"\u6570\u5f0f\u30a8\u30e9\u30fc: \" + result.replace(\"error:\", \"\"));\n        } else {\n            document.getElementById(\"graph_image\").src = `data:image\/png;base64,${result}`;\n        }\n    } catch (error) {\n        console.error(\"\u30a8\u30e9\u30fc\u767a\u751f:\", error);\n        alert(\"\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\uff1a\" + error);\n    }\n}\n\n\/\/ \u6700\u521d\u306b\u5fc5\u305a\u547c\u3073\u51fa\u3059\nloadPyodideAndPackages();\n\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u30c9\u30e9\u30c3\u30b0 &#038; \u30c9\u30ed\u30c3\u30d7\u3067\u4e8c\u6b21\u5143\u30c7\u30fc\u30bf\u3092\u30ab\u30e9\u30fc\u30d7\u30ed\u30c3\u30c8<\/title>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/pyodide\/v0.24.0\/full\/pyodide.js\"><\/script>\n    <style>\n        #drop_zone {\n            width: 100%;\n            padding: 20px;\n            border: 2px dashed #007bff;\n            border-radius: 10px;\n            text-align: center;\n            color: #007bff;\n            font-size: 16px;\n            margin-bottom: 10px;\n            cursor: pointer;\n        }\n        #drop_zone.hover {\n            background-color: #f0f8ff;\n        }\n        #file_name {\n            font-size: 14px;\n            color: #555;\n            margin-top: 5px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div style=\"text-align: center;\">\n    <h3>\u4e8c\u6b21\u5143\u30c7\u30fc\u30bf\u3092\u30ab\u30e9\u30fc\u30d7\u30ed\u30c3\u30c8<\/h2>\n    <p>\u30ab\u30f3\u30de\uff08CSV\uff09, \u30bf\u30d6\uff08TSV\uff09, \u30b9\u30da\u30fc\u30b9\u533a\u5207\u308a\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u5bfe\u5fdc<\/p>\n\n    <!-- \u30c9\u30e9\u30c3\u30b0 & \u30c9\u30ed\u30c3\u30d7\u30a8\u30ea\u30a2 -->\n    <div id=\"drop_zone\" style=\"max-width:500px; width:100%; margin:0 auto; padding:20px; border:2px dashed #007bff; border-radius:10px; color:#007bff; font-size:16px; cursor:pointer;\">\u3053\u3053\u306b\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0 &#038; \u30c9\u30ed\u30c3\u30d7<\/div>\n    <p id=\"file_name\">\u9078\u629e\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb: \u306a\u3057<\/p>\n\n    <!-- \u5f93\u6765\u306e\u30d5\u30a1\u30a4\u30eb\u9078\u629e\u30dc\u30bf\u30f3 -->\n    <input type=\"file\" id=\"file_input\">\n    <button onclick=\"plotData()\">\u30d7\u30ed\u30c3\u30c8<\/button>\n    <br><br>\n    <img id=\"plot_image\" alt=\"\u3053\u3053\u306b\u30ab\u30e9\u30fc\u30d7\u30ed\u30c3\u30c8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\">\n<\/div>\n    <script>\n        let selectedFile = null; \/\/ \u9078\u629e\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3059\u308b\u5909\u6570\n\n        async function loadPyodideAndPackages() {\n            window.pyodide = await loadPyodide();\n            await pyodide.loadPackage([\"matplotlib\", \"numpy\", \"pandas\"]);\n            console.log(\"Pyodide loaded!\");\n        }\n\n        function handleFile(file) {\n            if (!file) {\n                alert(\"\u30d5\u30a1\u30a4\u30eb\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u307e\u305b\u3093\uff01\");\n                return;\n            }\n\n            selectedFile = file; \/\/ \u9078\u629e\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\n            document.getElementById(\"file_name\").textContent = \"\u9078\u629e\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb: \" + file.name;\n\n            const reader = new FileReader();\n\n            reader.onload = async function(event) {\n                let fileContent = event.target.result;\n                \n                let code = `\nimport matplotlib.pyplot as plt\nimport numpy as np\nimport pandas as pd\nimport io\nimport base64\n\n# \u30c7\u30fc\u30bf\u306e\u8aad\u307f\u8fbc\u307f\ndata = \"\"\"${fileContent}\"\"\"\ntry:\n    df = pd.read_csv(io.StringIO(data), header=None, sep=None, engine='python')\n    matrix = df.to_numpy()\nexcept Exception as e:\n    matrix = None\n    error_msg = str(e)\n\n# \u30ab\u30e9\u30fc\u30d7\u30ed\u30c3\u30c8\u306e\u63cf\u753b\nif matrix is not None:\n    plt.figure(figsize=(5, 4))\n    plt.imshow(matrix, cmap=\"viridis\", aspect=\"auto\")\n    plt.colorbar()\n    plt.title(\"2D Color Plot\")\n    \n    # \u753b\u50cf\u3092Base64\u306b\u5909\u63db\n    buf = io.BytesIO()\n    plt.savefig(buf, format='png', bbox_inches='tight')\n    buf.seek(0)\n    encoded = base64.b64encode(buf.read()).decode('utf-8')\n    buf.close()\nelse:\n    encoded = \"error:\" + error_msg\n\n# JavaScript\u306b\u8fd4\u3059\nencoded\n`;\n                let result = await pyodide.runPythonAsync(code);\n\n                if (result.startsWith(\"error:\")) {\n                    alert(\"\u30c7\u30fc\u30bf\u8aad\u307f\u8fbc\u307f\u30a8\u30e9\u30fc: \" + result.replace(\"error:\", \"\"));\n                } else {\n                    document.getElementById(\"plot_image\").src = `data:image\/png;base64,${result}`;\n                }\n            };\n\n            reader.readAsText(file);\n        }\n\n        function plotData() {\n            if (selectedFile) {\n                handleFile(selectedFile);\n            } else {\n                const fileInput = document.getElementById(\"file_input\");\n                if (fileInput.files.length === 0) {\n                    alert(\"\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\uff01\");\n                    return;\n                }\n                handleFile(fileInput.files[0]);\n            }\n        }\n\n        \/\/ \u30c9\u30ed\u30c3\u30d7\u30a8\u30ea\u30a2\u306e\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\n        const dropZone = document.getElementById(\"drop_zone\");\n\n        dropZone.addEventListener(\"dragover\", function(event) {\n            event.preventDefault();\n            dropZone.classList.add(\"hover\");\n        });\n\n        dropZone.addEventListener(\"dragleave\", function(event) {\n            dropZone.classList.remove(\"hover\");\n        });\n\n        dropZone.addEventListener(\"drop\", function(event) {\n            event.preventDefault();\n            dropZone.classList.remove(\"hover\");\n\n            if (event.dataTransfer.files.length > 0) {\n                handleFile(event.dataTransfer.files[0]);\n            }\n        });\n\n        \/\/ \u30d5\u30a1\u30a4\u30eb\u9078\u629e\u30dc\u30bf\u30f3\u3067\u306e\u30d5\u30a1\u30a4\u30eb\u9078\u629e\u6642\u306b\u3082\u30d5\u30a1\u30a4\u30eb\u540d\u3092\u8868\u793a\n        document.getElementById(\"file_input\").addEventListener(\"change\", function(event) {\n            if (event.target.files.length > 0) {\n                selectedFile = event.target.files[0];\n                document.getElementById(\"file_name\").textContent = \"\u9078\u629e\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb: \" + selectedFile.name;\n            }\n        });\n\n        loadPyodideAndPackages();\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u5149\u5b50\u30a8\u30cd\u30eb\u30ae\u30fc\u30fb\u6ce2\u9577\u5909\u63db\u30c4\u30fc\u30eb\uff08nm \u2194 eV\uff09 \u6ce2\u9577 (nm): \u2192 \u30a8\u30cd\u30eb\u30ae\u30fc (eV) \u306b\u5909\u63db \u30a8\u30cd\u30eb\u30ae\u30fc (eV): \u2192 \u6ce2\u9577 (nm) \u306b\u5909\u63db \u89d2\u5ea6\u5909\u63db\u30c4\u30fc\u30eb\uff08\u30e9\u30b8\u30a2\u30f3 \u2194 \u5ea6\uff09 \u30e9\u30b8\u30a2\u30f3: \u2192 \u5ea6 (degr&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/tkimura.issp.u-tokyo.ac.jp\/wp\/?page_id=1491\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"pro\/page-templates\/full-width-page.php","meta":{"footnotes":""},"class_list":["post-1491","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tkimura.issp.u-tokyo.ac.jp\/wp\/index.php?rest_route=\/wp\/v2\/pages\/1491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tkimura.issp.u-tokyo.ac.jp\/wp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tkimura.issp.u-tokyo.ac.jp\/wp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tkimura.issp.u-tokyo.ac.jp\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tkimura.issp.u-tokyo.ac.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1491"}],"version-history":[{"count":53,"href":"https:\/\/tkimura.issp.u-tokyo.ac.jp\/wp\/index.php?rest_route=\/wp\/v2\/pages\/1491\/revisions"}],"predecessor-version":[{"id":1570,"href":"https:\/\/tkimura.issp.u-tokyo.ac.jp\/wp\/index.php?rest_route=\/wp\/v2\/pages\/1491\/revisions\/1570"}],"wp:attachment":[{"href":"https:\/\/tkimura.issp.u-tokyo.ac.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}