面白いWEBAPIで何かできないだろうか。
ファイル1つで表現できて、WEBAPIも叩けるブラウザーの基本となるHTMLがある。
このHTML。JS、CSSも1つのファイルと書けるので非常に便利な優れものだ。
面白そうなAPIを見つけた。
Dog API
ランダムに犬の画像を返してくれるAPI
HTML + WEBAPI
で作ってみようか。
考えたのが、以下の構図だ(ﾟ∀ﾟ)
(・ω・)(-ω-)(・ω・)(-ω-)ウンウン♪
図にすると分かりやすい！
AIの力も借りますか(・∀・)
ChatGPT も活用。
・HTMLでのWEBAPIを叩くものを出力してください
・良く見かけるいい感じのデザインを加えてください
とChatGPTで生成してもらった。
それにカスタマイズしたものが、以下のHTML
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEB APIを叩く</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
text-align: center;
}
h1 {
color: #333;
}
button {
background-color: #4CAF50;
/* 緑色 */
color: white;
/* 文字色 */
padding: 15px 32px;
/* 内側の余白 */
border: none;
/* ボーダーなし */
border-radius: 5px;
/* 角を丸く */
font-size: 16px;
/* フォントサイズ */
cursor: pointer;
/* マウスカーソルをポインタに */
transition: background-color 0.3s;
/* ホバー効果のトランジション */
}
button:hover {
background-color: #45a049;
/* ホバー時の色 */
}
h2 {
margin-top: 30px;
color: #555;
}
img {
margin-top: 20px;
border: 2px solid #ddd;
/* 枠線 */
border-radius: 5px;
/* 角を丸く */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
/* 影 */
}
.quote {
margin-top: 20px;
font-size: 18px;
color: #777;
}
</style>
</head>
<body>
<h1>WEB APIを叩く</h1>
<button onclick="callAPI()">APIを呼び出す</button>
<h2>API の結果</h2>
<img id="apiResult" src="" alt="犬の画像" width="500" height="300">
<div id="quote" class="quote"></div> <!-- コメントを表示するための要素 -->
<script>
const dogQuotes = [
"「この尻尾の巻き加減、どう？日本の美意識ってやつだよね」",
"「脚が短いからさ、階段はちょっと…勘弁してほしいんだよね」",
"「小さいって言うけど、気持ちは超ビッグだから！」",
"「忠犬のイメージ？それ、ちょっと重荷になってきてるんだよね…」",
"「モフモフしてるけど、たまに暑いんだよ。エアコン強めで頼む」",
"「短足なだけで笑われるけど、これがかわいいって言われる時代なんだよ！」",
"「水遊び大好きだけど、いっつも後でシャンプーされるんだよなぁ…」",
"「このカット？流行ってるからしてるだけで、実は結構恥ずかしいんだ」",
"「寒いとこが好きって言われるけど、夏はアイス必須で頼むよ」",
"「おいしい匂いがすると、つい散歩のコースを勝手に変えちゃうんだよね」"
];
async function callAPI() {
const apiUrl = 'https://dog.ceo/api/breeds/image/random'; // API のURL
try {
// API の呼び出し
const response = await fetch(apiUrl);
if (!response.ok) throw new Error(`API 1 エラー: ${response.status}`);
const data = await response.json();
console.log(data);
// 画像を表示
document.getElementById('apiResult').src = data.message;
// ランダムな犬の引用を表示
const randomIndex = Math.floor(Math.random() * dogQuotes.length);
document.getElementById('quote').innerText = dogQuotes[randomIndex];
} catch (error) {
console.error('エラーが発生しました:', error);
alert(`エラー: ${error.message}`);
}
}
</script>
</body>
</html>
実行結果
画像のコメントはChatGPTに出力してもらったものをランダムで出している。
ChatGPTスゲェ(; ･`д･´)
参考サイト