{"id":26037,"date":"2025-05-26T13:02:00","date_gmt":"2025-05-26T04:02:00","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26037"},"modified":"2025-05-26T13:02:02","modified_gmt":"2025-05-26T04:02:02","slug":"github%e9%a2%a8%e3%82%b5%e3%82%a4%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26037","title":{"rendered":"Github\u98a8\u30b5\u30a4\u30c8"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>GitHub\u98a8 - SampleRepo<\/title>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <!-- Bootstrap & FontAwesome -->\n  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n  <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" rel=\"stylesheet\">\n  <style>\n    body {\n      background: #f6f8fa;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    }\n    .repo-header { background: #fff; padding: 20px; border: 1px solid #ddd; margin-bottom: 10px; }\n    .nav-tabs .nav-link.active { border-color: #ddd #ddd #fff; background: #fff; }\n    .file-list li { border-bottom: 1px solid #eee; padding: 8px 0; display: flex; align-items: center; }\n    .file-list i { margin-right: 10px; }\n    .readme-box, .issues-box, .commits-box { background: #fff; padding: 20px; border: 1px solid #ddd; margin-top: 10px; }\n    #editor { height: 400px; width: 100%; border: 1px solid #ccc; }\n  <\/style>\n<\/head>\n<body>\n\n  <!-- \u30d8\u30c3\u30c0\u30fc -->\n  <nav class=\"navbar navbar-dark bg-dark px-3\">\n    <a class=\"navbar-brand\" href=\"#\"><i class=\"fab fa-github\"><\/i> GitHub\u98a8\u30b5\u30a4\u30c8<\/a>\n    <span class=\"text-white\"><i class=\"fas fa-user-circle\"><\/i> yuhei<\/span>\n  <\/nav>\n\n  <div class=\"container mt-3\">\n    <!-- \u30ea\u30dd\u30b8\u30c8\u30ea\u30d8\u30c3\u30c0\u30fc -->\n    <div class=\"repo-header\">\n      <h3><i class=\"fas fa-book\"><\/i> yuhei \/ <strong>SampleRepo<\/strong><\/h3>\n      <p class=\"text-muted\">\u6700\u7d42\u66f4\u65b0: 2025\u5e745\u670826\u65e5<\/p>\n      <button class=\"btn btn-sm btn-outline-secondary\"><i class=\"fas fa-star\"><\/i> Star<\/button>\n      <button class=\"btn btn-sm btn-outline-secondary\"><i class=\"fas fa-code-branch\"><\/i> Fork<\/button>\n    <\/div>\n\n    <!-- \u30bf\u30d6 -->\n    <ul class=\"nav nav-tabs\" id=\"repoTabs\">\n      <li class=\"nav-item\"><a class=\"nav-link active\" href=\"#\" onclick=\"switchTab('code')\"><i class=\"fas fa-code\"><\/i> Code<\/a><\/li>\n      <li class=\"nav-item\"><a class=\"nav-link\" href=\"#\" onclick=\"switchTab('issues')\"><i class=\"fas fa-exclamation-circle\"><\/i> Issues<\/a><\/li>\n      <li class=\"nav-item\"><a class=\"nav-link\" href=\"#\" onclick=\"switchTab('commits')\"><i class=\"fas fa-history\"><\/i> Commits<\/a><\/li>\n    <\/ul>\n\n    <!-- Code\u30bf\u30d6 -->\n    <div id=\"tab-code\" class=\"tab-content\">\n      <ul class=\"file-list list-unstyled bg-white p-3 border\">\n        <li><i class=\"fas fa-folder\"><\/i> src\/<\/li>\n        <li><i class=\"fas fa-file-code\"><\/i> index.js<\/li>\n        <li><i class=\"fas fa-file-alt\"><\/i> README.md<\/li>\n        <li><i class=\"fas fa-file-alt\"><\/i> LICENSE<\/li>\n      <\/ul>\n\n      <div class=\"readme-box\">\n        <h4><i class=\"fas fa-book-open\"><\/i> README.md<\/h4>\n        <hr>\n        <div id=\"readme-content\"><\/div>\n      <\/div>\n\n      <div class=\"mt-4\">\n        <h5><i class=\"fas fa-code\"><\/i> \u30b3\u30fc\u30c9\u7de8\u96c6 (Monaco Editor)<\/h5>\n        <div id=\"editor\"><\/div>\n        <button id=\"saveCode\" class=\"btn btn-success mt-2\"><i class=\"fas fa-save\"><\/i> \u4fdd\u5b58<\/button>\n        <button id=\"themeToggle\" class=\"btn btn-secondary mt-2\"><i class=\"fas fa-adjust\"><\/i> \u30c6\u30fc\u30de\u5207\u66ff<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Issues\u30bf\u30d6 -->\n    <div id=\"tab-issues\" class=\"tab-content\" style=\"display:none;\">\n      <div class=\"issues-box\">\n        <h4><i class=\"fas fa-exclamation-circle\"><\/i> Open Issues<\/h4>\n        <ul class=\"list-group\">\n          <li class=\"list-group-item\">\n            <strong>#1<\/strong> README\u306e\u7ffb\u8a33\u304c\u5fc5\u8981\u3067\u3059<br>\n            <small class=\"text-muted\">posted by yuhei - 1\u65e5\u524d<\/small>\n          <\/li>\n          <li class=\"list-group-item\">\n            <strong>#2<\/strong> index.js\u306b\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044<br>\n            <small class=\"text-muted\">posted by yuhei - 2\u65e5\u524d<\/small>\n          <\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n\n    <!-- Commits\u30bf\u30d6 -->\n    <div id=\"tab-commits\" class=\"tab-content\" style=\"display:none;\">\n      <div class=\"commits-box\">\n        <h4><i class=\"fas fa-history\"><\/i> Commits<\/h4>\n        <ul class=\"list-group\">\n          <li class=\"list-group-item\">\n            <strong>Initial commit<\/strong> - 2025-05-25<br>\n            <small class=\"text-muted\">by yuhei<\/small>\n          <\/li>\n          <li class=\"list-group-item\">\n            <strong>README updated<\/strong> - 2025-05-26<br>\n            <small class=\"text-muted\">by yuhei<\/small>\n          <\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u30e9\u30a4\u30d6\u30e9\u30ea -->\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/marked\/marked.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/monaco-editor\/0.45.0\/min\/vs\/loader.min.js\"><\/script>\n\n  <!-- \u30bf\u30d6\u5207\u66ff\u30fbMarkdown\u8868\u793a\u30fbMonaco\u8d77\u52d5 -->\n  <script>\n    const markdown = `\n# SampleRepo\n\n\u3088\u3046\u3053\u305d\uff01\u3053\u308c\u306fGitHub\u98a8\u30b5\u30a4\u30c8\u306e\u30c7\u30e2\u3067\u3059\u3002\n\n## \u7279\u5fb4\n- Monaco Editor\u3067\u30b3\u30fc\u30c9\u7de8\u96c6\n- Markdown\u8868\u793a\uff08README\uff09\n- \u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5bfe\u5fdc\n- Issue\u30fb\u30b3\u30df\u30c3\u30c8\u306eUI\n\n## \u6280\u8853\n- HTML\/CSS\/JS\n- Bootstrap5\n- Monaco Editor\n- Marked.js\n    `;\n    document.getElementById('readme-content').innerHTML = marked.parse(markdown);\n\n    function switchTab(tab) {\n      ['code', 'issues', 'commits'].forEach(id => {\n        document.getElementById('tab-' + id).style.display = (id === tab) ? 'block' : 'none';\n      });\n      document.querySelectorAll('#repoTabs .nav-link').forEach(link => link.classList.remove('active'));\n      document.querySelector(`#repoTabs .nav-link[onclick*=\"${tab}\"]`).classList.add('active');\n    }\n\n    \/\/ Monaco\u8d77\u52d5\n    require.config({ paths: { 'vs': 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/monaco-editor\/0.45.0\/min\/vs' }});\n    require(['vs\/editor\/editor.main'], function () {\n      window.editor = monaco.editor.create(document.getElementById('editor'), {\n        value: localStorage.getItem('savedCode') || `function hello() {\\n  console.log(\"Hello from Monaco Editor!\");\\n}`,\n        language: 'javascript',\n        theme: 'vs-light',\n        automaticLayout: true\n      });\n\n      document.getElementById('saveCode').onclick = function () {\n        const code = editor.getValue();\n        localStorage.setItem('savedCode', code);\n        alert('\u4fdd\u5b58\u3057\u307e\u3057\u305f\uff01');\n      };\n\n      document.getElementById('themeToggle').onclick = function () {\n        const theme = monaco.editor.getTheme() === 'vs-dark' ? 'vs-light' : 'vs-dark';\n        monaco.editor.setTheme(theme);\n      };\n    });\n  <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[80],"tags":[3],"class_list":["post-26037","post","type-post","status-publish","format-standard","hentry","category-html","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26037"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26037\/revisions"}],"predecessor-version":[{"id":26038,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26037\/revisions\/26038"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26037"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}