犬と猫の画像を表示する[Visualforce]
forceJP概要
Visualforceで犬と猫の画像を表示します。
犬の画像はDog APIから、猫の画像はThe Cat APIから取得します。
ソースコード
DogCatPic.vfp
<apex:page docType="html-5.0" LightningStylesheets="true">
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>お犬様とお猫様</title>
<apex:slds />
</head>
<body>
<div class="slds-align_absolute-center">
<div class="slds-size_2-of-3">
<apex:pageBlock >
<div class="slds-grid slds-einstein-header slds-card__header">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3">
<h1 class="slds-truncate" title="お犬様とお猫様">
<span class="slds-text-heading_large">お犬様とお猫様</span>
</h1>
</div>
<div class="slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3"></div>
</header>
</div>
<div class="slds-align_absolute-center">
<div class="slds-m-top_large">
<header class="slds-align_absolute-center">
<div class="slds-button-group" role="group">
<button id="dog" class="slds-button slds-button_neutral slds-text-heading_medium slds-p-around_small">今日のお犬様</button>
<button id="cat" class="slds-button slds-button_neutral slds-text-heading_medium slds-p-around_small">今日のお猫様</button>
</div>
</header>
<main class="slds-m-top_large">
<section class="pic-container">
</section>
</main>
</div>
</div>
</apex:pageBlock>
</div>
</div>
<apex:include pageName="DogCatPicJs"/>
</body>
</html>
</apex:page>
DogCatPicJs.vfp
<apex:page >
<script>
const dogUrl = 'https://dog.ceo/api/breeds/image/random'; // Dog API
const catUrl = 'https://api.thecatapi.com/v1/images/search?format=json'; // The Cat API
const petSearchButton = document.querySelectorAll('.slds-button'),
container = document.querySelector('.pic-container');
let petInfo;
// APIからペットの情報を取得する
function requestPetInfo(baseUrl) {
fetch(baseUrl).then(response => response.json())
.then(data => {
this.petInfo = data;
})
.catch(err => console.log(err));
}
petSearchButton.forEach(function (button) {
button.addEventListener('click', event => {
event.preventDefault();
if(event.currentTarget.id === 'dog') {
// Dog APIから犬の情報を取得する
requestPetInfo(dogUrl);
// 取得した犬の画像を追加する
setTimeout(function () {
container.innerHTML = `<img src="${this.petInfo.message}"/>`;
container.classList.add('slds-box');
container.classList.add('slds-m-bottom_medium');
}, 1000);
} else {
// The Cat APIから猫の情報を取得する
requestPetInfo(catUrl);
// 取得した猫の画像を追加する
setTimeout(function () {
container.innerHTML = `<img src="${this.petInfo[0].url}"/>`;
container.classList.add('slds-box');
container.classList.add('slds-m-bottom_medium');
}, 1000);
}
})
})
</script>
</apex:page>
