Spaces:
Running
Running
File size: 3,400 Bytes
4fbb53d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<!DOCTYPE html>
<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>
|