BETA

[Django]NewsAPIを使ってニュースサイトを作ってみる

投稿日:2018-11-26
最終更新:2018-11-26
※この記事は外部サイト(https://jyouj.hatenablog.com/entry/2018/11...)からのクロス投稿です

ニュースサイトみたいなのを作りたいと思って調べてみたら、NewsAPIっていうのがあったので、これを使って、こんなニュースサイトを作ろうと思いました。

ソースコードも置いときますので、よければ参照ください。

https://github.com/jyouj/SampleNews

NewsAPIを入手する

NewsAPIのサイトに行き、指示通りメアド等を入力して発行する。

Resistration Completeという画面にAPIキーが表示されるので、メモしておきましょう

$ pip install newsapi-python

APIはgithubとかにあげてはダメなので、newsapi.pyを作って、.gitignoreに追加しておきましょう。

そして、先ほどメモしておいたAPIキーをnewsapi.pyに書いときましょう。

NEWS_API = "********"

そして、settings.pyにこれらを付け加えといてください。

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

    'newsapi',

    'news',
]

from . import newsapi

NEWSAPI = newsapi.NEWS_API

これで、Djangoアプリ内でNewsAPIが使えるようになりました。

ニュースサイトを実装しよう

settings.pyと同じディレクトリのurls.pyに記述する。

path('', include('news.urls')),

そして、newsアプリ下にurls.pyを作ります。

urlpatterns = [
    path('', views.IndexView.as_view(), name="index"),
]

それでは、views.pyを作って行きましょう。

from django.shortcuts import render
from django.views import generic
from django.conf import settings

from newsapi import NewsApiClient

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

    def get_context_data(self, **kwargs):
        context = super(IndexView, self).get_context_data(**kwargs)
        newsapi = NewsApiClient(api_key=settings.NEWSAPI)
        context['top_headlines'] = newsapi.get_top_headlines(country='jp')
        # print(context['top_headlines'])
        return context

たったこれだけですね。print(context['top_headlines'])を実行してどんな値が使えるか確認しておきましょう。

それでは、テンプレートを作っていきます。CSSにはBulmaを使っています。

まずは、base.htmlを記述していきましょう。

{% load static %}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SampleNews</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <style type="text/css">
      a { text-decoration:none; }
      a:link { color : #000000; }
      a:visited { color : #000000; }
    </style>
  </head>

  <body>
    <nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <h3 class="title is-3"><a class="navbar-item" href="#">SampleNews</a></h3>
      </div>
    </nav>

  <section class="section">
      {% block body %}{% endblock %}
  </section>

  <style>
  body {
    padding-top: 30px;
  }
  </style>
  </body>
</html>

news/index.htmlを作成して完成です!

{% extends 'base.html' %}

{% block body %}
  <section class="hero is-dark">
    <div class="hero-body">
      <div class="container">
        <center><h1 class="title">最新のニュース</h1></center>
      </div>
    </div>
  </section>

  <div>
    {% for content in top_headlines.articles %}
    <div class="card">
      <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="{{ content.urlToImage }}" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">
        <div class="media-content">
          <p class="title is-4">{{ content.title }}</p>
          <p class="subtitle is-6">{{ content.author }}</p>
        </div>
      </div>

      <div class="content">
        {{ content.description }}
        <br>
        <time>{{ content.publishedAt }}</time>
      </div>
    </div>
    {% endfor %}
    </div>

  </div>

{% endblock %}

NewsAPIを使うと簡単にニュース風のサイトが作れますね!

良ければTwitterも!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@jyoujの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!