生JS移管・インデント・改行整形

README.md

@@ -1,3 +1,3 @@
-# support_uwuzu_net
+# ゆずねっとサポート
-ゆずねっとのサポートページです！
+
-簡易的なものなので今後アプデしていきます。
+本家：https://github.com/Daichimarukana/support_uwuzu_net

css/style.css

@@ -1,23 +1,27 @@
-@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=BIZ+UDPGothic:wght@400;700&family=Inter:wght@100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=BIZ+UDPGothic:wght@400;700&family=Inter:wght@100..900&display=swap");
+
 body {
     margin: 0px;
     width: 100%;
     height: fit-content;
-    background-color: #F7F7F7;
+    background-color: #f7f7f7;
 }
+
 .top {
     width: 100%;
     margin: 0px;
     height: 64px;
     display: flex;
     justify-content: space-between;
-    background-color: #FFC832;
+    background-color: #ffc832;
     border-radius: 0px 0px 15px 15px;
 }
+
 .top .left {
     margin-left: 0px;
     display: flex;
 }
+
 .top .left img {
     width: 48px;
     height: 48px;
@@ -25,6 +29,7 @@ body{
     object-fit: cover;
     border-radius: 8px;
 }
+
 .top .left a {
     display: block;
     text-decoration: none;
@@ -35,37 +40,43 @@ body{
     width: fit-content;
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     margin: 8px 0px;
-    color: #FFFFFF;
+    color: #ffffff;
 }
+
 .top .right {
     margin-right: 0px;
     display: flex;
 }
+
 .top .right .searchbox {
     width: 200px;
     height: 28px;
     margin: 16px;
     border-radius: 25px;
     padding-left: 8px;
-    border: solid 1px #FFFFFF;
+    border: solid 1px #ffffff;
     outline: none;
 }
+
 main {
     margin: 0px auto;
     width: 1080px;
 }
+
 main h1 {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: bold;
     color: #252525;
     font-size: 48px;
 }
+
 main p {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: normal;
     color: #252525;
     font-size: 16px;
 }
+
 main .contents {
     margin-top: 32px;
     width: 100%;
@@ -74,19 +85,22 @@ main .contents{
     height: fit-content;
     flex-wrap: wrap;
 }
+
 main .contents .items {
     cursor: pointer;
     width: calc(50% - 40px);
     height: fit-content;
-    background-color: #FFFFFF;
+    background-color: #ffffff;
     border-radius: 10px;
     padding: 16px;
     margin-bottom: 16px;
     transition: all 250ms ease-out;
 }
+
 main .contents .items:hover {
-    box-shadow: 0 0px 48px 0 rgba(0, 0, 0, .05);
+    box-shadow: 0 0px 48px 0 rgba(0, 0, 0, 0.05);
 }
+
 main .contents .items h1 {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: bold;
@@ -94,6 +108,7 @@ main .contents .items h1{
     font-size: 24px;
     margin: 4px 0px;
 }
+
 main .contents .items p {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: normal;
@@ -101,81 +116,94 @@ main .contents .items p{
     font-size: 14px;
     margin: 4px 0px;
 }
+
 main .contents .items .date {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: bold;
     color: #252525;
     font-size: 12px;
 }
+
 main .article {
     width: 100%;
     height: fit-content;
 }
+
 main .article .date {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: bold;
     color: #252525;
     font-size: 16px;
 }
+
 main .article h1 {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: bold;
     color: #252525;
     font-size: 48px;
 }
+
 main .article h2 {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: bold;
     color: #252525;
     font-size: 32px;
 }
+
 main .article h3 {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: bold;
     color: #252525;
     font-size: 24px;
 }
+
 main .article p {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: normal;
     color: #252525;
     font-size: 16px;
 }
+
 main .article table {
     margin: 16px 0px;
     width: calc(fit-content + 128px);
     border: none;
     border-collapse: collapse;
 }
-main .article td, th {
+
+main .article td,
+th {
     padding: 4px 16px;
     border: solid 1px #252525;
 }
+
 main .article pre {
     width: 100%;
     height: fit-content;
     background-color: #252525;
     padding: 16px;
     border-radius: 15px;
-    color: #F7F7F7;
+    color: #f7f7f7;
     font-family: "BIZ UDGothic", sans-serif;
 }
+
 .link_btn {
     line-height: 64px;
     width: fit-content;
     height: 32px;
     padding: 8px 16px;
-    background-color: #FFC832;
+    background-color: #ffc832;
-    color: #F7F7F7;
+    color: #f7f7f7;
     text-decoration: none;
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: normal;
     font-size: 20px;
     border-radius: 25px;
 }
+
 .error {
     position: absolute;
-    animation: slideDown 5.0s ease-in-out forwards;
+    animation: slideDown 5s ease-in-out forwards;
     margin-top: 32px;
     margin-right: auto;
     margin-left: auto;
@@ -184,11 +212,12 @@ main .article pre{
     width: fit-content;
     height: 32px;
     z-index: 9999;
-    background-color: #FF4848;
+    background-color: #ff4848;
     border-radius: 20px;
-    box-shadow: 0 0px 48px 0 rgba(0, 0, 0, .15);
+    box-shadow: 0 0px 48px 0 rgba(0, 0, 0, 0.15);
     text-decoration: none;
 }
+
 .error p {
     margin-top: 4px;
     margin-bottom: 4px;
@@ -197,32 +226,44 @@ main .article pre{
     line-height: 24px;
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-size: 16px;
-    color: #F7F7F7;
+    color: #f7f7f7;
     color: transparent;
-    text-shadow: 0 0 0 #F7F7F7;
+    text-shadow: 0 0 0 #f7f7f7;
     text-align: center;
 }
+
 @keyframes slideDown {
-    0%, 100% { transform: translateY(-40dvh); }
+    0%,
-    20%, 90% { transform: translateY(0px); }
+    100% {
+        transform: translateY(-40dvh);
     }
 
-@media screen and (max-width: 1080px) {
+    20%,
+    90% {
+        transform: translateY(0px);
+    }
+}
+
+@media screen and (max-width: 581px) {
     .top .left a {
         display: none;
     }
+
     main {
         margin: 0px auto;
         width: calc(100% - 32px);
         overflow-wrap: normal;
     }
+
     main .contents {
         display: block;
         height: fit-content;
     }
+
     main .contents .items {
         width: calc(100% - 32px);
     }
+
     main .article pre {
         width: calc(100% - 32px);
         overflow: scroll;

index.html

@@ -1,159 +1,49 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ja">
     <head>
-    <meta charset="UTF-8">
+        <meta charset="UTF-8" />
-    <title>ゆずねっとサポート</title>
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <link rel="stylesheet" href="css/style.css" type="text/css">
+        <link rel="stylesheet" href="/css/style.css" type="text/css" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+        <link rel="icon" href="/img/uwuzu_net_icon.png" />
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+        <title>ゆずねっとサポート</title>
+
+        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     </head>
     <body>
-    <div id="error" class="error" style="display:none;">
+        <div id="error" class="error" style="display: none">
-        <p>Error</p>
+            <p id="errorMsg">Error</p>
         </div>
 
         <div class="top">
             <div class="left">
-            <img src="img/uwuzu_net_icon.png">
+                <img src="/img/uwuzu_net_icon.png" />
-            <a href="index.html">ゆずねっとサポート</a>
+                <a href="/">ゆずねっとサポート</a>
             </div>
             <div class="right">
-            <input class="searchbox" type="text" id="searchbox" placeholder="検索">
+                <input
+                    class="searchbox"
+                    type="text"
+                    id="searchbox"
+                    placeholder="検索"
+                />
             </div>
         </div>
 
         <main>
             <div id="top">
-            <h1>ゆずねっとサポート</h1>
+                <h1 class="articlelist">ゆずねっとサポート</h1>
-            <p>ゆずねっとのサポートサイトです。<br>
+                <p class="articlelist">
-                右上の検索欄から検索するか下から記事を選択すると閲覧ができます！</p>
+                    ゆずねっとのサポートサイトです。
-
+                    <br />
-            <div id="contents" class="contents"></div>
+                    右上の検索欄から検索するか下から記事を選択すると閲覧ができます！
+                </p>
+                <div id="contents" class="contents articlelist" />
             </div>
-        <div id="docs" style="display: none;">
 
-        </div>
+            <div id="docs" />
         </main>
     </body>
 
-<script>
+    <script src="/js/script.js"></script>
-    function showError(text){
-        $("#error").children("p").text(text);
-        $("#error").show();
-        setTimeout(function(){
-            $("#error").hide();
-        }, 5000);
-    }
-
-    $(document).ready(function() {
-        // グローバル変数としてJSONデータを保持
-        var articlesData;
-
-        // JSONを読み込み、ページにコンテンツを追加
-        $.getJSON('contents.json', function(data) {
-            articlesData = data.articles; // JSONデータを保持
-            $.each(articlesData, function(index, article) {
-                // 記事のHTML要素を作成して追加
-                $('#contents').append(
-                    `<div class="items" id="${article.id}">
-                        <div class="date">${article.date}</div>
-                        <h1>${article.title}</h1>
-                        <p>${article.description}</p>
-                    </div>`
-                );
-            });
-
-            var now_url = window.location.href;
-            var url = new URL(now_url);
-            var data = url.searchParams.get("article");
-
-            if(!(data === null)){
-                var article = articlesData.find(function(a) {
-                    return a.id === data;
-                });
-                if (article) {
-                    $('#docs').html(
-                        `<div class="article">
-                            <h1>${article.title}</h1>
-                            <div class="date">${article.date}</div>
-                            <div class="content">${marked.parse(article.content)}</div>
-                        </div>`
-                    ).show();
-                    $('#top').hide();
-                    history.pushState({ articleId: data }, article.title, `?article=${data}`);
-                } else {
-                    showError("記事が存在しませんでした");
-                }
-            }
-
-            $("#contents").on('click', '.items', function() {
-                var id = $(this).attr("id");
-
-                var article = articlesData.find(function(a) {
-                    return a.id === id;
-                });
-
-                if (article) {
-                    $('#docs').html(
-                        `<div class="article">
-                            <h1>${article.title}</h1>
-                            <div class="date">${article.date}</div>
-                            <div class="content">${marked.parse(article.content)}</div>
-                        </div>`
-                    ).show();
-                    $('#top').hide();
-
-                    history.pushState({ articleId: id }, article.title, `?article=${id}`);
-                } else {
-                    showError("記事が存在しませんでした");
-                }
-            });
-
-            window.addEventListener('popstate', function(event) {
-                if (event.state && event.state.articleId) {
-                    // 特定の記事の状態
-                    var id = event.state.articleId;
-                    var article = articlesData.find(function(a) {
-                        return a.id === id;
-                    });
-
-                    if (article) {
-                        $('#docs').html(
-                            `<div class="article">
-                                <h1>${article.title}</h1>
-                                <div class="date">${article.date}</div>
-                                <div class="content">${marked.parse(article.content)}</div>
-                            </div>`
-                        ).show();
-                        $('#top').hide();
-                    }
-                } else {
-                    $('#docs').hide();
-                    $('#top').show();
-                }
-            });
-
-            // 検索機能
-            $('#searchbox').on('input', function() {
-                var searchText = $(this).val().toLowerCase();
-
-                $('#contents .items').each(function() {
-                    var title = $(this).find('h1').text().toLowerCase();
-                    var description = $(this).find('p').text().toLowerCase();
-
-                    if (title.includes(searchText) || description.includes(searchText)) {
-                        $(this).show(); // マッチする場合は表示
-                    } else {
-                        $(this).hide(); // マッチしない場合は非表示
-                    }
-                });
-            });
-
-        }).fail(function() {
-            showError("記事一覧を取得できませんでした！");
-        });
-    });
-</script>
-
 </html>

js/script.js

@@ -0,0 +1,190 @@
+// エラー表示
+function showError(text) {
+  const errorMsgElement = document.querySelector("#errorMsg");
+  const errorElement = document.querySelector("#error");
+
+  if (errorMsgElement) {
+    errorMsgElement.textContent = text;
+  }
+
+  if (errorElement) {
+    errorElement.style.display = "block";
+    setTimeout(() => {
+      errorElement.style.display = "none";
+    }, 5000);
+  }
+}
+
+document.addEventListener("DOMContentLoaded", async () => {
+  try {
+    // contents.json読み込み
+    const response = await fetch("/contents.json");
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    const articlesData = data.articles;
+
+    if (!Array.isArray(articlesData)) {
+      throw new Error("記事データが不正な形式です");
+    }
+
+    // #contents読み込み
+    const contentsContainer = document.querySelector("#contents");
+
+    if (!contentsContainer) {
+      throw new Error("#contentsが見つかりません");
+    }
+
+    contentsContainer.innerHTML = "";
+
+    // 記事一覧作成
+    articlesData.forEach(article => {
+      // ID取得
+      const articleElement = document.createElement("div");
+      articleElement.className = "items";
+      articleElement.id = article.id;
+
+      // 日付取得
+      const dateElement = document.createElement("div");
+      dateElement.className = "date";
+      dateElement.textContent = String(article.date);
+
+      // タイトル取得
+      const titleElement = document.createElement("h1");
+      titleElement.textContent = String(article.title);
+
+      // 説明取得
+      const descriptionElement = document.createElement("p");
+      descriptionElement.textContent = String(article.description);
+
+      // 親要素に追加
+      articleElement.appendChild(dateElement);
+      articleElement.appendChild(titleElement);
+      articleElement.appendChild(descriptionElement);
+      contentsContainer.appendChild(articleElement);
+    });
+
+    // URLパラメータから記事IDを取得
+    const urlParams = new URLSearchParams(window.location.search);
+    const articleId = urlParams.get("articles");
+
+    if (articleId) {
+      const article = articlesData.find(a => a && a.id === articleId);
+      if (article) {
+        showArticle(article);
+      } else {
+        showError("記事が存在しませんでした");
+      }
+    }
+
+    // 記事移動
+    contentsContainer.addEventListener("click", (e) => {
+      const itemElement = e.target.closest(".items");
+      if (itemElement && itemElement.id) {
+        const id = itemElement.id;
+        const article = articlesData.find(a => a && a.id === id);
+
+        if (article) {
+          showArticle(article);
+          try {
+            history.pushState({ articleId: id }, article.title, `?articles=${id}`);
+          } catch (error) {
+            console.warn("History API操作に失敗しました:", error);
+          }
+        } else {
+          showError("記事が存在しませんでした");
+        }
+      }
+    });
+
+    // 検索
+    const searchBox = document.querySelector("#searchbox");
+
+    if (searchBox) {
+      searchBox.addEventListener("input", (e) => {
+        const searchText = (e.target.value || '').toLowerCase();
+        const items = document.querySelectorAll("#contents .items");
+
+        items.forEach(item => {
+          const titleElement = item.querySelector("h1");
+          const descriptionElement = item.querySelector("p");
+
+          if (titleElement && descriptionElement) {
+            const title = (titleElement.textContent || '').toLowerCase();
+            const description = (descriptionElement.textContent || '').toLowerCase();
+
+            if (title.includes(searchText) || description.includes(searchText)) {
+              item.style.display = "block";
+            } else {
+              item.style.display = "none";
+            }
+          }
+        });
+      });
+    }
+
+    // 記事表示
+    function showArticle(article) {
+      // #docs・#top取得
+      const docsElement = document.querySelector("#docs");
+      const topElement = document.querySelector("#top");
+
+      // データ存在確認
+      if (docsElement && topElement && article && article.title && article.date) {
+        // 記事div作成
+        const articleDiv = document.createElement("div");
+        articleDiv.className = "article";
+
+        // タイトル取得
+        const titleElement = document.createElement("h1");
+        titleElement.textContent = String(article.title);
+
+        // 日付取得
+        const dateElement = document.createElement("div");
+        dateElement.className = "date";
+        dateElement.textContent = String(article.date);
+
+        // 内容取得
+        const contentElement = document.createElement("div");
+        contentElement.className = "content";
+
+        // Markdownパース
+        try {
+          const content = article.content || '';
+
+          if (typeof marked !== 'undefined' && typeof marked.parse === 'function') {
+            contentElement.innerHTML = marked.parse(content);
+          } else {
+            contentElement.textContent = content;
+          }
+        } catch (error) {
+          console.error("Markdownパースエラー:", error);
+          contentElement.textContent = article.content || '';
+        }
+
+        // 親要素に追加
+        articleDiv.appendChild(titleElement);
+        articleDiv.appendChild(dateElement);
+        articleDiv.appendChild(contentElement);
+
+        // 記事表示
+        docsElement.innerHTML = "";
+        docsElement.appendChild(articleDiv);
+        docsElement.style.display = "block";
+
+        // 記事一覧非表示
+        const articleList = document.querySelectorAll(".articlelist");
+
+        for (let i = 0; i < articleList.length; i++) {
+          articleList[i].style.display = "none";
+        }
+      }
+    }
+  } catch (error) {
+    console.error("データの読み込みに失敗しました:", error);
+    showError("データの読み込みに失敗しました");
+  }
+});