［Django］PokeAPIを使ってピカチュウのデータを取ってみる［ポケモン］
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 %}
こんなサイトが出来上がります！PokeAPI楽しいですね。
何かあれば、じぇい👨💻 (@jyouj__) | Twitterに！
「ガチャっとニュース」リンク集
先日、ニュースをランダムにガチャして読める「ガチャっとニュース」をリリースしました。
リリースツイートはこちらです。
【拡散希望】
— じぇい👨💻 (@jyouj__) November 29, 2018
ニュースをランダムにガチャして見れる「ガチャっとニュース」をリリースしました㊗️
情報の偏りが問題になるこの世の中でランダムにニュースを見れたなら、偏りも減るのでは？と思って作りました
楽しめるようにガチャ風にニュースが出るようになってますhttps://t.co/95AlF0d9Tr
さて、このブログはリンク集というタイトルなので、ガチャっとニュースについての掲載メディアのリンクを貼ろうかなーと思います。
随時更新いたします！！
［Django］Twitter Cardに表示するコンテンツやURLをページごとに変える
ツイッターで共有するのはもはや必須の時代となりました。そこでTwitter Cardに表示する内容をDjangoでページごとに変更してみようと思ったわけです。
結構簡単にできるので見てみてください。
通常のTwitter Card
URLに変数が含まれていないページではheadタグの中にこう記述します。
{% block meta %}
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="<アカウント名>">
<meta name="og:url" content="<url>">
<meta name="og:title" content="<title>">
<meta name="og:description" content="<説明>">
<meta name="og:image" content="<画像取得>">
{% endblock %}
ページごとに変わる場合
簡単ですね。Djangoのテンプレートに渡す変数のタグを使えばOK
{% block meta %}
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="<アカウント名>">
<meta name="og:url" content="https://<url>/{{ post.id }}/">
<meta name="og:title" content="{{ post.post_title }}">
<meta name="og:description" content="{{ post.text}}">
<meta name="og:image" content="<画像取得>">
{% endblock %}
Twitter Card Validatorで表示されていたらOKです。変更にはタイムラグがあるかも。
https://cards-dev.twitter.com/validator
何かあれば、じぇい👨💻 (@jyouj__) | Twitterに！
![SNSマーケティングのやさしい教科書。 Facebook・Twitter・Instagramーつながりでビジネスを加速する技術【電子書籍】[ 株式会社グローバルリンクジャパン／清水将之 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/rakutenkobo-ebooks/cabinet/2177/2000004712177.jpg?_ex=128x128 "SNSマーケティングのやさしい教科書。 Facebook・Twitter・Instagramーつながりでビジネスを加速する技術【電子書籍】[ 株式会社グローバルリンクジャパン／清水将之 ]")
［Bulma］モーダルウィンドウを実装する
Bulmaフレームワークを使ってモーダルウィンドウを実装してみたいと思います。ただ、Bulmaは純粋なCSSフレームワークのため、JavaScriptを使わなくてはなりません。
このサイトを参考に、自分に必要なところを付け足しました。
Bulmaでモーダルウィンドウのレイアウト
<div> <div> <center> <button class="button is-large" id="open">表示</button> </center> </div> <div class="modal"> <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">モーダルウィンドウ</p> <button class="delete" aria-label="close" id="close"></button> </header> <section class="modal-card-body"> <p class="image is-3by2"> <img src="<画像URL>" alt=""> </p> コンテンツ欄 </section> <footer class="modal-card-foot"> <button class="button is-success"><a href=#>リンク</a></button> </footer> </div> </div> </div> </div>
ボタンを押したらモーダルウィンドウが表示されるようになってます。まだJavaScriptを入れてないので、最初から表示されていると思います。画像などもモーダルウィンドウで表示されるようにしました。実際に「 ガチャっとニュース −ニュースをガチャっとランダムに！」で取り入れてます。
jQueryで動作をつける
実際にボタンを押したら、モーダルウィンドウが表示されたり、バツボタンや背景をタップしたら、閉じるようにしましょう。
まず、jQueryを導入します。
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
そして動きを作っていきます。
<script> $(document).ready(function() { $("#open").on("click", function() { $("div.modal").addClass("is-active"); }) $("#close, div.modal-background").on("click", function() { $("div.modal").removeClass("is-active"); }) }); </script>
これでモーダルウィンドウがうまく表示されるようになりました！
何かあれば、じぇい👨💻 (@jyouj__) | Twitterに！
投げ銭も待ってまーす！-> jyouj__さんの投げ銭ビスケット募集中！
- ジャンル: 本・雑誌・コミック > PC・システム開発 > 入門書 > ホームページ入門書
- ショップ: FOM出版 楽天市場店
- 価格: 3,024円
［Heroku］［Django］httpsなのに「このサイトは保護されていません」と出る問題を解決！
Herokuは簡単にデプロイできて、SSL証明もデフォルトで発行されるのですが、サイトをクロームなどで見たとき、「保護された通信」ではなく下のようなものが表示される時もあるでしょう。
嫌ですよね。もしかしたら、サイトを離れてしまうかもしれません。
今回はDjangoでデプロイしたサイトで「このサイトは保護されていません」という表示から「保護された通信」に変更する方法を紹介します。
実はかなり簡単なのです(笑)
settings.pyのALLOWED_HOSTを='*'ではなく、
ALLOWED_HOSTS = ['<app-name>.herokuapp.com']
このように*でなんでもではなく、指定してあげればOKです。
Herokuで独自ドメインを設定したけど、SSL証明が得られないのも大抵はこの問題ですね。
何かあれば、じぇい👨💻 (@jyouj__) | Twitterに！
![Heroku: Up and RunningEffortless Application Deployment and Scaling【電子書籍】[ Neil Middleton ]](https://thumbnail.image.rakuten.co.jp/@0_mall/rakutenkobo-ebooks/cabinet/5519/2000000815519.jpg?_ex=128x128 "Heroku: Up and RunningEffortless Application Deployment and Scaling【電子書籍】[ Neil Middleton ]")
