以下がヤフオクのAPIを利用したJavaScriptの実装例です。APIキーは、適宜変更してください。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kjoketa's Yahoo Auctions</title>
</head>
<body>
<h1>Kjoketa's Yahoo Auctions</h1>
<button onclick="getAuctions()">Get Auctions</button>
<div id="auctions"></div>
<script>
function getAuctions() {
const api_key = "YOUR_API_KEY"; // API Key
const seller = "kjoketa"; // Seller ID
const url = `https://auctions.yahooapis.jp/AuctionWebService/V2/myList?appid=${api_key}&seller_id=${seller}&output=json`;
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data);
let list = "<ul>";
if (data.ResultSet.Result) {
data.ResultSet.Result.forEach(auction => {
list += `<li><a href="${auction.AuctionItemUrl}">${auction.Title}</a> : ${auction.Bids} Bids - Current Price: ${auction.CurrentPrice} Yen</li>`;
});
} else {
list += "<li>No auctions found :(</li>";
}
list += "</ul>";
const auctions = document.getElementById("auctions");
auctions.innerHTML = list;
})
.catch(error => console.error(error));
}
</script>
</body>
</html>
```
ジョークを取り入れた例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kjoketa's Yahoo Auctions</title>
</head>
<body>
<h1>Kjoketa's Yahoo Auctions</h1>
<p>Because you're too lazy to check my auctions on Yahoo, here's an app for you.</p>
<button onclick="getAuctions()">Get Auctions</button>
<div id="auctions"></div>
<script>
function getAuctions() {
const api_key = "YOUR_API_KEY"; // API Key
const seller = "kjoketa"; // Seller ID
const url = `https://auctions.yahooapis.jp/AuctionWebService/V2/myList?appid=${api_key}&seller_id=${seller}&output=json`;
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data);
let list = "<ul>";
if (data.ResultSet.Result) {
data.ResultSet.Result.forEach(auction => {
list += `<li><a href="${auction.AuctionItemUrl}">${auction.Title}</a> : ${auction.Bids} Bids - Current Price: ${auction.CurrentPrice} Yen</li>`;
});
} else {
list += "<li>No auctions found :(</li>";
}
list += "</ul>";
const auctions = document.getElementById("auctions");
auctions.innerHTML = list;
})
.catch(error => console.error(error));
}
</script>
</body>
</html>
```
