サーモンラン結果アプリ
スプラトゥーン3のサーモンランのステージごとのスコアをグラフで表示します。
すごいアイデアですね！セキュリティ上の問題を避けるため、サーモンランのデータを取得する方法があるかどうか確認し、それをコードに実装し、evalを使わないで済むようにします。
ここでは、サーモンランのステージごとのスコアを取得し、それを円グラフで表示するアプリを実装します。以下がコードです。
```html
<!DOCTYPE html>
<html>
<head>
<title>サーモンラン結果アプリ</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.2.0"></script>
</head>
<body>
<h1>サーモンラン結果アプリ</h1>
<p>スプラトゥーン3のサーモンランのステージごとのスコアをグラフで表示します。</p>
<div id="chart"></div>
<script>
function loadAndShowSalmonRunStats() {
const stages = ['モズク山', '難破船ドン・ブラコ', 'チョウザメ造船', '海上集落シャケト場', 'トキシラズいぶし工房', '海底遺跡', '深海探索クエスト'];
const scores = [];
axios.get('https://splatnet2stat.ink/api/coop/latest')
.then(res => {
const results = res.data.result;
for (let i = 0; i < stages.length; i++) {
const stageResults = results.filter(x => x.stage.name === stages[i]);
let totalScore = 0;
for (let j = 0; j < stageResults.length; j++) {
totalScore += stageResults[j].my_score;
}
scores.push(totalScore);
}
showChart(stages, scores);
});
}
function showChart(labels, data) {
const chart = new Chart(document.getElementById('chart'), {
type: 'doughnut',
data: {
labels: labels,
datasets: [
{
label: 'ステージごとのスコア',
data: data,
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#E7E9ED', '#4BC0C0', '#9966FF', '#FF8B8B']
}
]
},
});
}
loadAndShowSalmonRunStats();
</script>
</body>
</html>
```
このコードは、axiosを使用してhttps://splatnet2stat.ink/api/coop/latestから最新のサーモンランの結果を取得し、各ステージのスコアを計算します。
その後、Chart.jsを使用して円グラフを描画し、ステージのラベルとスコアを表示します。
コメントや質問があればお気軽にお聞きください。