Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>モデル一覧</title> | |
| <style> | |
| .tile-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| justify-content: center; | |
| } | |
| .tile { | |
| cursor: pointer; | |
| border: 1px solid #ccc; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| width: 200px; | |
| text-align: center; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, .1); | |
| transition: transform 0.2s; | |
| } | |
| .tile:hover { | |
| transform: scale(1.05); | |
| } | |
| .tile img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| .tile .info { | |
| padding: 10px; | |
| } | |
| .tile .info .version { | |
| font-weight: 700; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>モデル一覧</h1> | |
| <div class="tile-container"></div> | |
| <script> | |
| const jsonUrl = "/model.json"; | |
| async function fetchAndDisplayModels() { | |
| try { | |
| // JSONデータの取得 | |
| const response = await fetch(jsonUrl); | |
| if (!response.ok) { | |
| throw new Error(`HTTPエラー: ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| const container = document.querySelector(".tile-container"); | |
| // モデルデータの描画 | |
| data.model_data.forEach((model) => { | |
| const version = model[0]; // インデックス0: バージョン | |
| const name = model[1]; // インデックス1: 名前 | |
| const url = model[2]; // インデックス2: URL | |
| const image = model[3]; // インデックス3: 画像URL | |
| const tile = document.createElement("div"); | |
| tile.className = "tile"; | |
| // タイルクリック時のURLコピー機能 | |
| tile.addEventListener("click", () => { | |
| navigator.clipboard.writeText(url) | |
| .then(() => { | |
| alert(`URLがクリップボードにコピーされました: ${url}`); | |
| }) | |
| .catch((error) => { | |
| console.error("URLのコピーに失敗しました:", error); | |
| }); | |
| }); | |
| // 画像要素 | |
| const img = document.createElement("img"); | |
| img.src = image; | |
| img.alt = name; | |
| // 情報セクション | |
| const info = document.createElement("div"); | |
| info.className = "info"; | |
| const versionDiv = document.createElement("div"); | |
| versionDiv.className = "version"; | |
| versionDiv.textContent = `バージョン: ${version}`; | |
| const nameDiv = document.createElement("div"); | |
| nameDiv.className = "name"; | |
| nameDiv.textContent = `名前: ${name}`; | |
| info.appendChild(versionDiv); | |
| info.appendChild(nameDiv); | |
| tile.appendChild(img); | |
| tile.appendChild(info); | |
| container.appendChild(tile); | |
| }); | |
| } catch (error) { | |
| console.error("JSONデータの取得または処理中にエラーが発生しました:"); | |
| console.error(`エラーメッセージ: ${error.message}`); | |
| console.error(`エラー名: ${error.name}`); | |
| console.error(`スタックトレース: ${error.stack}`); | |
| alert("データの取得中に問題が発生しました。詳細はコンソールをご確認ください。"); | |
| } | |
| } | |
| document.addEventListener("DOMContentLoaded", fetchAndDisplayModels); | |
| </script> | |
| </body> | |
| </html> | |