ポケモン図鑑を作ってみる[Visualforce]
forceJP概要
Visualforceでポケモン図鑑を作成します。
PokéAPIを使用しています。
ソースコード
PokemonPic.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>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16" rel="stylesheet"/>
<style type="text/css">
p {
font-family: 'DotGothic16', sans-serif;
}
.col_center {
max-width: 600px;
}
.pokemon-img {
width: 200px;
}
.box-size {
width: 400px;
height: 300px;
}
.slds-input.input-number {
width: 70px;
}
.slds-button.slds-button_brand {
vertical-align: initial;
}
</style>
<apex:slds />
</head>
<body>
<div class="slds-grid">
<div class="slds-col">
</div>
<div class="col_center slds-col">
<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">
<apex:form >
<span class="slds-text-heading_medium">図鑑番号：
<input type="number" class="slds-input input-number slds-p-right_none" min="1" max="151" value="1"/></span>
<button class="slds-button slds-button_brand slds-m-left_medium slds-text-heading_medium slds-p-around_xx-small">検索する</button>
</apex:form>
</header>
<main class="slds-m-top_large">
<section class="pokemon-container">
</section>
</main>
</div>
</div>
</apex:pageBlock>
</div>
<div class="slds-col">
</div>
</div>
<apex:include pageName="PokemonPicJs"/>
</body>
</html>
</apex:page>
PokemonPicJs.vfp
<apex:page >
<script>
const baseUrl = 'https://pokeapi.co/api/v2/pokemon/';
const speciesUrl = 'https://pokeapi.co/api/v2/pokemon-species/';
const searchInput = document.querySelector('.slds-input'),
searchButton = document.querySelector('.slds-button'),
container = document.querySelector('.pokemon-container');
let pokemon,
pokeSpecies;
// PokéAPIからポケモンの情報を取得する
function requestPokeInfo(number) {
fetch(baseUrl + number).then(response => response.json())
.then(data => {
pokemon = data;
return fetch(speciesUrl + number);
})
.then(response => response.json())
.then(data => {
pokeSpecies = data;
})
.catch(err => console.log(err));
}
// 取得したポケモンの情報を整理してHTML要素を設定する
function createCard () {
const pokeName = pokeSpecies.names.find((v) => v.language.name == "ja").name;
const pokeType = pokeSpecies.genera.find((v) => v.language.name == "ja");
let pokeNumber = ('000' + pokeSpecies.id).slice( -3 );
const flavorText = pokeSpecies.flavor_text_entries.filter(function(v) {
return (v.language.name == "ja") && (v.version.name == "x");
})
let card = `
<div class="slds-grid">
<div class="slds-col slds-size_2-of-5">
<img src="${pokemon.sprites.versions['generation-i']['red-blue'].front_default}" class="pokemon-img"/>
<p class="slds-text-heading_medium slds-align_absolute-center">No.${pokeNumber}</p>
</div>
<div class="slds-col slds-size_3-of-5">
<p class="slds-text-heading_medium slds-m-around_medium">${pokeName}</p>
<p class="slds-text-heading_medium slds-m-around_medium">${pokeType.genus}</p>
<p class="slds-text-heading_medium slds-m-around_medium">たかさ<span class="slds-m-left_large">${pokemon.height / 10}m</span></p>
<p class="slds-text-heading_medium slds-m-around_medium">おもさ<span class="slds-m-left_large">${pokemon.weight / 10}kg</span></p>
</div>
</div>
<hr class="slds-m-vertical_x-small">
<p class="slds-text-heading_medium slds-text-align_left">${flavorText[0]['flavor_text']}</p>`;
return card;
}
function startApp(pokeNumber) {
// PokéAPIからポケモン情報を取得する
requestPokeInfo(pokeNumber);
// 取得したポケモンの情報を整理して要素を追加する
setTimeout(function () {
container.innerHTML = createCard();
container.classList.add('slds-box');
container.classList.add('slds-m-bottom_medium');
container.classList.add('box-size');
}, 1000);
}
searchButton.addEventListener('click', event => {
event.preventDefault();
let pokeNumber = searchInput.value; // 図鑑番号
startApp(pokeNumber);
})
</script>
</apex:page>
