以下が実装例です。Reddit APIを使用しています。注意点として、セキュリティ上の理由からReddit APIのアクセストークンをクライアントサイドで直接取得することは推奨されません。そのため、この例ではReddit APIのアクセストークンをサーバーサイドで取得しています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reddit Random Thumbnail Viewer</title>
</head>
<body>
<button id="get-random-thumbnails">Get Random Thumbnails</button>
<div id="thumbnail-container"></div>
<script>
// Reddit APIのアクセストークン
const accessToken = 'reddit-api-access-token';
const getRandomThumbnails = () => {
// Reddit APIにリクエストを送信する
fetch('https://oauth.reddit.com/r/pics/random.json?limit=20', {
headers: {
'Authorization': `bearer ${accessToken}`
}
})
.then(response => response.json())
.then(data => {
// サムネイルを表示する
const thumbnailContainer = document.getElementById('thumbnail-container');
thumbnailContainer.innerHTML = '';
data.forEach(post => {
const thumbnailUrl = post.data.thumbnail;
const postUrl = `https://www.reddit.com${post.data.permalink}`;
const thumbnailLink = `<a href="${postUrl}" target="_blank"><img src="${thumbnailUrl}" alt=""></a>`;
thumbnailContainer.innerHTML += thumbnailLink;
});
})
.catch(error => {
console.error('Error:', error);
});
};
const getRandomThumbnailsButton = document.getElementById('get-random-thumbnails');
getRandomThumbnailsButton.addEventListener('click', getRandomThumbnails);
</script>
</body>
</html>
```
ジョークとしては、ボタンを「redditからランダムなサムネイルを見る」というシンプルな説明ではなく、「今日のネットサーフィンの運試しをしよう！ランダムにredditからサムネイルを表示するよ！」としてみたりすると面白いかもしれません。
