{"id":524,"date":"2021-04-29T15:36:04","date_gmt":"2021-04-29T06:36:04","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=524"},"modified":"2021-05-03T09:10:34","modified_gmt":"2021-05-03T00:10:34","slug":"%e6%9b%b8%e7%b1%8d%e6%a4%9c%e7%b4%a2%e3%82%b7%e3%82%b9%e3%83%86%e3%83%a0","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=524","title":{"rendered":"\u66f8\u7c4d\u691c\u7d22\u30b7\u30b9\u30c6\u30e0"},"content":{"rendered":"\n

API<\/h2>\n\n\n\nhttp:\/\/www.agile-software.site\/2021\/04\/29\/api\/\n\n\n\n

\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306eURL\u3092\u4f5c\u6210<\/h2>\n\n\n\n

views.py\u306eIndexView\u306b\u6e21\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

from django.urls import path\nfrom app import views\n\nurlpatterns = [\n    path('', views.IndexView.as_view(), name='index'),\n]<\/code><\/pre><\/div>\n\n\n\n
\u66f8\u7c4d\u691c\u7d22\u30d5\u30a9\u30fc\u30e0\u306e\u4f5c\u6210<\/h2>\n\n\n\n
title\u3092\u5165\u529b\u3067\u304d\u308b\u30d5\u30a9\u30fc\u30e0\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
<\/p>\n\n\n\n
from django import forms\n\nclass SearchForm(forms.Form):\n    title = forms.CharField(label='\u30bf\u30a4\u30c8\u30eb', max_length=200, required=True)<\/code><\/pre><\/div>\n\n\n\n
view\u306e\u4f5c\u6210<\/h2>\n\n\n\n
\u30d5\u30a9\u30fc\u30e0\u306e\u5185\u5bb9\u3092\u53d6\u5f97\u3057\u3001index.html\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u6e21\u3059\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\nhttp:\/\/www.agile-software.site\/2021\/04\/24\/django-render%e3%83%a1%e3%82%bd%e3%83%83%e3%83%89\/\n\n\n\n
form = SearchForm(request.POST or None)<\/code><\/pre><\/div>\n\n\n\n
from django.views.generic import View\nfrom django.shortcuts import render\nfrom .forms import SearchForm\n\n\nclass IndexView(View):\n    def get(self, request, *args, **kwargs):\n        form = SearchForm(request.POST or None)\n\n        return render(request, 'app\/index.html', {\n            'form': form\n        })<\/code><\/pre><\/div>\n\n\n\n
base.html<\/h2>\n\n\n\n
\u3082\u3057\u30e6\u30fc\u30b6\u30fc\u304c\u30ed\u30b0\u30a4\u30f3\u72b6\u614b\u3067\u3042\u3063\u305f\u3089\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u3068\u30ed\u30b0\u30a2\u30a6\u30c8\u3092\u3001\u672a\u30ed\u30b0\u30a4\u30f3\u3067\u3042\u308c\u3070\u30b5\u30a4\u30f3\u30a2\u30c3\u30d7\u30dc\u30bf\u30f3\u3068\u30ed\u30b0\u30a4\u30f3\u3092\u8868\u793a\u3059\u308b<\/p>\n\n\n\n
                {% if user.is_authenticated %}\n                    <li class="nav-item">\n                        <a class="nav-link" href="{% url 'profile' %}">\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb<\/a>\n                    <\/li>\n                    <li class="nav-item">\n                        <a class="nav-link" href="{% url 'account_logout' %}">\u30ed\u30b0\u30a2\u30a6\u30c8<\/a>\n                    <\/li>\n                {% else %}\n                    <li class="nav-item">\n                        <a class="nav-link" href="{% url 'account_signup' %}">\u30b5\u30a4\u30f3\u30a2\u30c3\u30d7<\/a>\n                    <\/li>\n                    <li class="nav-item">\n                        <a class="nav-link" href="{% url 'account_login' %}">\u30ed\u30b0\u30a4\u30f3<\/a>\n                    <\/li>\n                {% endif %}<\/code><\/pre><\/div>\n\n\n\n
javaScript<\/p>\n\n\n\n
    {% block extra_js %}\n    {% endblock %}<\/code><\/pre><\/div>\n\n\n\n
{% load static %}\n\n<!DOCTYPE html>\n<html lang="ja">\n\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <link rel="stylesheet" href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css">\n    <link rel="stylesheet" href="{% static 'css\/style.css' %}">\n    <title>\u697d\u5929\u30d6\u30c3\u30af\u30b9\u66f8\u7c4dAPI\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/title>\n<\/head>\n\n<body>\n    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">\n        <div class="container">\n            <a class="navbar-brand" href="\/">\u697d\u5929\u30d6\u30c3\u30af\u30b9\u66f8\u7c4dAPI<\/a>\n            <ul class="navbar-nav ml-auto">\n                <li class="nav-item">\n                    <a class="nav-link" href="\/">\u30db\u30fc\u30e0<\/a>\n                <\/li>\n                {% if user.is_authenticated %}\n                    <li class="nav-item">\n                        <a class="nav-link" href="{% url 'profile' %}">\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb<\/a>\n                    <\/li>\n                    <li class="nav-item">\n                        <a class="nav-link" href="{% url 'account_logout' %}">\u30ed\u30b0\u30a2\u30a6\u30c8<\/a>\n                    <\/li>\n                {% else %}\n\n                {% endif %}\n            <\/ul>\n        <\/div>\n    <\/nav>\n\n    <main>\n        <div class="container">\n            {% block content %}\n            {% endblock %}\n        <\/div>   \n    <\/main>\n\n    <footer class="py-2 bg-dark">\n        <p class="m-0 text-center text-white">Copyright \u00a9 Django Startup 2020<\/p>\n    <\/footer>\n\n    {% block extra_js %}\n    {% endblock %}\n<\/body>\n\n<\/html><\/code><\/pre><\/div>\n\n\n\n
index.html<\/h2>\n\n\n\n
widget_tweaks<\/code>\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u5165\u529b\u6b04\u306b\u30c6\u30ad\u30b9\u30c8\u3092\u7528\u610f\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
{% extends "app\/base.html" %}\n{% load widget_tweaks %}\n\n{% block content %}\n\n<div class="text-center my-5">\n    <form method="post">\n        {% csrf_token %}\n        <div class="align-items-center">\n            {% render_field form.title class="form-control" placeholder="\u30ad\u30fc\u30ef\u30fc\u30c9\u304b\u3089\u63a2\u3059" %}\n            <button class="btn btn-primary mt-2" type="submit">\u691c\u7d22<\/button>    \n        <\/div>\n    <\/form>\n<\/div>\n\n{% endblock %}<\/code><\/pre><\/div>\n\n\n\n
\u691c\u7d22\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u66f8\u7c4d\u306e\u30ea\u30b9\u30c8\u3092\u8868\u793a\u3055\u305b\u308b<\/h2>\n\n\n\n
json\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002json\u306b\u3064\u3044\u3066\u306f\u4e0b\u8a18\u8a18\u4e8b\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\nhttp:\/\/www.agile-software.site\/2021\/03\/31\/%e3%83%a2%e3%82%b8%e3%83%a5%e3%83%bc%e3%83%ab\/\n\n\n\n
requests.get<\/code>\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001API\u304b\u3089\u60c5\u5831\u3092\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
api = requests.get(SEARCH_URL, params=params).text<\/code><\/pre><\/div>\n\n\n\n
form.cleaned_data<\/code>\u3067\u30d5\u30a9\u30fc\u30e0\u306b\u5165\u529b\u3057\u305f\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b<\/p>\n\n\n\n
\u30d1\u30e9\u30e1\u30fc\u30bf\u3067\u8a2d\u5b9a\u3057\u305f\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3057\u307e\u3059\u3002keyword\u5909\u6570\u306b\u306f\u5165\u529b\u3057\u305f\u6587\u5b57\u5217\u304c\u5165\u3063\u3066\u3044\u307e\u3059\u3002
hit\u6570\u309228\u306b\u3057\u3066\u3044\u308b\u306e\u3067\u753b\u9762\u306b\u306f28\u500b\u306e\u66f8\u7c4d\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
keyword = form.cleaned_data['title']<\/code><\/pre><\/div>\n\n\n\n
from django.views.generic import View\nfrom django.shortcuts import render\nimport json\nimport requests\nfrom .forms import SearchForm\n\nSEARCH_URL = 'https:\/\/app.rakuten.co.jp\/services\/api\/BooksBook\/Search\/20170404?format=json&applicationId=1111111' # ID\u5909\u66f4\n\n\ndef get_api_data(params):\n    api = requests.get(SEARCH_URL, params=params).text\n    result = json.loads(api)\n    items = result['Items']\n    return items\n\n\nclass IndexView(View):\n    def get(self, request, *args, **kwargs):\n        form = SearchForm(request.POST or None)\n\n        return render(request, 'app\/index.html', {\n            'form': form\n        })\n\n    def post(self, request, *args, **kwargs):\n        form = SearchForm(request.POST or None)\n\n        if form.is_valid():\n            keyword = form.cleaned_data['title']\n            params = {\n                'title': keyword,\n                'hits': 28,\n            }\n            items = get_api_data(params)\n            book_data = []\n            for i in items:\n                item = i['Item']\n                title = item['title']\n                image = item['largeImageUrl']\n                isbn = item['isbn']\n                query = {\n                    'title': title,\n                    'image': image,\n                    'isbn': isbn\n                }\n                book_data.append(query)\n\n            return render(request, 'app\/book.html', {\n                'book_data': book_data,\n                'keyword': keyword\n            })\n\n        return render(request, 'app\/index.html', {\n            'form': 'form'\n        })<\/code><\/pre><\/div>\n\n\n\n
index.html\u3067\u30d5\u30a9\u30fc\u30e0\u753b\u9762\u3092IndexView\u3068book.html\u3067\u691c\u7d22\u7d50\u679c\u306e\u753b\u9762\u3092\u8868\u793a\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"
index.html<\/figcaption><\/figure>\n\n\n\n
\"\"
book.html<\/figcaption><\/figure>\n\n\n\n
book.html<\/h2>\n\n\n\n
\u30d3\u30e5\u30fc\u304b\u3089\u6e21\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3092\u30eb\u30fc\u30d7\u3067\u56de\u3057\u3066\u8868\u793a\u3055\u305b\u307e\u3059\u3002
{{ book.title }}\u672c\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u592a\u304f\u8868\u793a\u3055\u305b\u3066\u3044\u307e\u3059\u3002
<a class=”stretched-link” href=”{% url ‘detail’ book.isbn %}”><\/a>\u66f8\u7c4d\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u3001\u8a73\u7d30\u753b\u9762\u306b\u9077\u79fb\u3059\u308b\u3088\u3046\u306b\u30ea\u30f3\u30af\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
{% extends "app\/base.html" %}\n\n{% block content %}\n\n<div class="text-center my-5">\n    <div class="mb-5">\n        <h3>\u300c{{ keyword }}\u300d\u306e\u691c\u7d22\u7d50\u679c<\/h3>\n    <\/div>\n    <div class="row">\n        {% for book in book_data %}\n            <div class="col-3 mb-3">\n                <div class="card img-thumbnail booklist h-100">\n                    <img class="card-img-top card-thum" src="{{ book.image }}" alt="">\n                    <div class="card-body text-center px-2 py-3">\n                        <h5 class="font-weight-bold">{{ book.title }}<\/h5>\n                    <\/div>\n                    <a class="stretched-link" href=""><\/a>\n                <\/div>\n            <\/div>\n        {% empty %}\n            <p>\u8a72\u5f53\u3059\u308b\u3082\u306e\u306f\u3042\u308a\u307e\u305b\u3093<\/p>\n        {% endfor %}\n    <\/div>\n<\/div>\n\n{% endblock %}\n<\/code><\/pre><\/div>\n\n\n\n
\u66f8\u7c4d\u306e\u8a73\u7d30\u3092\u8868\u793a\u3055\u305b\u307e\u3059\u3002<\/h2>\n\n\n\n
from django.urls import path\nfrom app import views\n\nurlpatterns = [\n    path('', views.IndexView.as_view(), name='index'),\n    path('detail\/<str:isbn>', views.DetailView.as_view(), name='detail'), # \u8ffd\u52a0\n]<\/code><\/pre><\/div>\n\n\n\n
\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u5f15\u6570\u3068\u3057\u3066API\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002\u8868\u793a\u306b\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u3001\u5404\u5909\u6570\u306b\u683c\u7d0d\u3057\u3066\u3044\u304d\u307e\u3059<\/p>\n\n\n\n
class DetailView(View):\n    def get(self, request, *args, **kwargs):\n        isbn = self.kwargs['isbn']\n        params = {\n            'isbn': isbn\n        }\n\n        items = get_api_data(params)\n        items = items[0]\n        item = items['Item']\n        title = item['title']\n        image = item['largeImageUrl']\n        author = item['author']\n        itemPrice = item['itemPrice']\n        salesDate = item['salesDate']\n        publisherName = item['publisherName']\n        size = item['size']\n        isbn = item['isbn']\n        itemCaption = item['itemCaption']\n        itemUrl = item['itemUrl']\n        reviewAverage = item['reviewAverage']\n        reviewCount = item['reviewCount']\n\n        book_data = {\n            'title': title,\n            'image': image,\n            'author': author,\n            'itemPrice': itemPrice,\n            'salesDate': salesDate,\n            'publisherName': publisherName,\n            'size': size,\n            'isbn': isbn,\n            'itemCaption': itemCaption,\n            'itemUrl': itemUrl,\n            'reviewAverage': reviewAverage,\n            'reviewCount': reviewCount,\n            'average': float(reviewAverage) * 20,\n        }\n\n        return render(request, 'app\/detail.html', {\n            'book_data': book_data\n        })<\/code><\/pre><\/div>\n\n\n\n
DetailView\u3068detail.html\u3067\u8a73\u7d30\u753b\u9762\u3092\u8868\u793a\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
isbn\u3068\u306f\u66f8\u7c4d\u3092\u4e16\u754c\u5171\u901a\u3067\u7279\u5b9a\u3059\u308b\u305f\u3081\u306e\u756a\u53f7\u3067\u3001\u73fe\u5728\u3001ISBN\u306f\u8a0813\u6841\u306e\u756a\u53f7\u3067\u69cb\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002
\u70b9\u6570\u304c\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8\u3067\u30d3\u30e5\u30fc\u304b\u3089\u3082\u3089\u3048\u308b\u306e\u3067\u3001width<\/code>\u3092\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8\u3067\u6307\u5b9a\u3059\u308b\u3068\u3001\u8996\u899a\u7684\u306b\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
{% extends "app\/base.html" %}\n\n{% block content %}\n\n<div class="my-5">\n    <div class="row">\n        <div class="col-md-6 text-center">\n            <img src="{{ book_data.image }}" class="img-fluid" alt="">\n        <\/div>\n\n        <div class="col-md-6">\n            <div class="card">\n                <div class="card-body px-2 py-1">\n                    <div class="p-4">\n                        <h3>{{ book_data.title }}<\/h3>\n                        <p class="mb-3">{{ book_data.author }}<\/p>\n                        <hr>\n                        {% if not book_data.reviewCount == 0 %}\n                        <div class="d-flex flex-row">\n                            <div class="star-rating">\n                                <div class="star-rating-front text-warning" style="width: {{ book_data.average }}%">\u2605\u2605\u2605\u2605\u2605<\/div>\n                                <div class="star-rating-back">\u2605\u2605\u2605\u2605\u2605<\/div>\n                            <\/div>\n                            <div class="average ml-2 text-danger">\n                                {{ book_data.reviewAverage|floatformat:2 }}\n                            <\/div>\n                            <div class="d-flex align-items-center ml-2">\n                                {{ book_data.reviewCount }}\u4ef6\n                            <\/div>\n                        <\/div>\n                        {% else %}\n                            <p>\u307e\u3060\u30ec\u30d3\u30e5\u30fc\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n                        {% endif %}\n                        <p class="mt-3">\u4fa1\u683c\uff1a<span class="text-danger font-weight-bold h3">{{ book_data.itemPrice }}\u5186<\/span><\/p>\n                        <a class="btn btn-primary" href="{{ book_data.itemUrl }}">\u8cb7\u3044\u7269\u304b\u3054\u306b\u5165\u308c\u308b<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    {% if book_data.itemCaption %}\n        <div class="mb-5">\n            <h5>\u5546\u54c1\u8aac\u660e<\/h5>\n            <hr>\n            <p>{{ book_data.itemCaption }}<\/p>    \n        <\/div>\n    {% endif %}\n\n    <div class="mb-5">\n        <h5>\u5546\u54c1\u60c5\u5831<\/h5>\n        <hr>\n        <p>\u767a\u58f2\u65e5\uff1a{{ book_data.salesDate }}<\/p>\n        <p>\u8457\u8005\/\u7de8\u96c6\uff1a{{ book_data.author }}<\/p>\n        <p>\u51fa\u7248\u793e\uff1a{{ book_data.publisherName }}<\/p>\n        <p>\u767a\u884c\u5f62\u614b\uff1a{{ book_data.size }}<\/p>\n        <p>ISBN\u30b3\u30fc\u30c9\uff1a{{ book_data.isbn }}<\/p>\n    <\/div>\n<\/div>\n\n{% endblock %}<\/code><\/pre><\/div>\n\n\n\n
CSS<\/h2>\n\n\n\n
\/* detail *\/\n\n.star-rating {\n\tposition: relative;\n\tfont-size: 20px;\n\tword-wrap: normal !important;\n}\n\n.star-rating-front {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\toverflow: hidden;\n}\n\n.star-rating-back {\n\tcolor: #ccc;\n}\n\n.average {\n\tfont-size: 20px;\n\tfont-weight: bold;\n}<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
API \u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306eURL\u3092\u4f5c\u6210 views.py\u306eIndexView\u306b\u6e21\u3057\u307e\u3059\u3002 \u66f8\u7c4d\u691c\u7d22\u30d5\u30a9\u30fc\u30e0\u306e\u4f5c\u6210 title\u3092\u5165\u529b\u3067\u304d\u308b\u30d5\u30a9\u30fc\u30e0\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 view\u306e\u4f5c\u6210 \u30d5\u30a9\u30fc\u30e0\u306e\u5185\u5bb9\u3092\u53d6\u5f97\u3057\u3001index.html\u30c6\u30f3<\/p>\n","protected":false},"author":1,"featured_media":585,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-django"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=524"}],"version-history":[{"count":7,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/524\/revisions"}],"predecessor-version":[{"id":701,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/524\/revisions\/701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/585"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}