［Django］PokeAPIを使ってピカチュウのデータを取ってみる［ポケモン］

f:id:jyouj:20181202201322p:plain

PokeAPIというというのを見つけたので、Djangoでピカチュウのデータだけを取得しようかと思います。ポケモン好きな人はぜひ使ってみてください。

コードも置いとくので、よかったらみといてください。

パッケージを導入

pokebaseというPython用のライブラリがあったので、それを導入します。

$ pip install pokebase

settings.pyのInstalled_appにpokebaseを追加しておきましょう。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'pokebase',

    'pokemon',
]

ピカチュウのデータを取る

それではピカチュウのデータを取っていきましょう。

views.pyに処理を書きましょう。そんなに難しくはないですね。

from django.shortcuts import render
import pokebase as pb
from django.views import generic

# Create your views here.
class IndexView(generic.TemplateView):
    template_name = 'pokemon/index.html'

    def get_context_data(self, **kwargs):
        context = super(IndexView, self).get_context_data(**kwargs)
        pikachu = pb.pokemon(25)
        print(pikachu)
        context['pikachu'] = pikachu
        return context

print(pikachu)でデータが取得できているか確認してみます。

それでは、ピカチュウのデータを表示するテンプレートを作っていきましょう。

{% extends 'base.html' %}

{% load static %}

{% block body %}
<section class="hero is-warning">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        ピカチュウ
      </h1>
      <h2 class="subtitle">
        {{ pikachu.name }}
      </h2>
    </div>
  </div>
</section>

<div class="columns">
  <div class="column is-3">
    <img class="image is-128x128" src="{{ pikachu.sprites.front_default }}">
  </div>
  <div class="column is-3">
    <img class="image is-128x128" src="{{ pikachu.sprites.front_shiny }}">
  </div>
  <div class="column is-3">
    <img class="image is-128x128" src="{{ pikachu.sprites.front_female }}">
  </div>
  <div class="column is-3">
    <img class="image is-128x128" src="{{ pikachu.sprites.back_default }}">
  </div>
</div>

<nav class="level">
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">高さ</p>
      <p class="title">{{ pikachu.height }}</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">経験値</p>
      <p class="title">{{ pikachu.base_experience }}</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">重さ</p>
      <p class="title">{{ pikachu.weight }}</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">図鑑番号</p>
      <p class="title">{{ pikachu.id }}</p>
    </div>
  </div>
</nav>
{% endblock %}