注意:著者は初心者なので間違ってることがあるので注意してください。
前回作ったプロジェクトで何かを作ろうということで、API触ったことないしついでにお勉強しようと思いまして。
Weather Hacksのお天気APIを使ってお天気表示ページを作成してみたいと思います。(書きながらプログラム書いていくんでグダグダなのはゆるしてくだしゃい)
あと前回からぶっつづけでやってるのでプロジェクトの作り方とか、仮想環境への入り方はそっちを見てください。
今度こそkiteのすごさを感じていきたいです。
アプリケーションを作る
djangoでは機能ごとにアプリケーションを作るらしいです。それでは作っていきましょう！
python manage.py startapp アプリ名
これでアプリ名という名前のアプリを作成することができます。今回はweather_appとつけましょう。
するとdjango_testフォルダ内にwearther_appフォルダが作られているはずです。
さて。ここでちょっとディレクトリの構造を見ていきましょう。
プロジェクト名/
┗django_test/
┣django_test/
┃ ┣＿init＿.py
┃ ┣settings.py
┃ ┣urls.py
┃ ┗wsgi.py
┣weather_app/
┃ ┣migrations/
┃ ┃ ┗＿init＿.py
┃ ┣＿init＿.py
┃ ┣admin.py
┃ ┣apps.py
┃ ┣models.py
┃ ┣test.py
┃ ┗views.py
┣db.sqlite3
┗manage.py
と、こんな感じになってると思います。それぞれについては出てきたときに触れると思いますが、
プロジェクト名/django_testとdjango_test/django_testの区別がつきにくいので、この記事では、
前者をdjango_test/、後者を../django_test/と記述していきます。わかりにくいですが長すぎるのもあれなので悪しからず。
作成したアプリケーションの追加
このまま実行してもプロジェクトはアプリケーションが追加されたと気が付いていません。django_test/settings.pyを編集して追加したことを教えてあげましょう！
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'weather_app', # 追加
]
テンプレートの作成
djangoでは、アプリケーション毎にテンプレートフォルダを作成し、その中にHTMLファイルを配置します。
各アプリケーションからこのHTMLを呼び出してデータを渡したりして表示する、というわけです。
それではweather_appフォルダ内にtemplatesフォルダを作りましょう。そして作成したtemplatesフォルダにweather_appフォルダを作成します。この中にHTMLファイルを作成していきます。今回はbase.htmlを作成しましょう。ファイル構造は以下になります。
weather_app/
┗templates/
┗weather_app/
┗base.html
私はPyCharmを使っているのでHTMLファイルを作成したらひな型まで作ってくれますが、中身はまだ記述しなくていいでしょう。
Viewの作成
Viewではテンプレートにデータを渡して表示を行うものです。(と私は考えています。)
記述方法として関数ビューとクラスビューがあるらしいのですが、今回は普段使っていないクラスベースビューに挑戦しようと思います。
weather_app/views.pyファイルを開いて記述していきましょう。
from django.shortcuts import render
from django.views.generic import TemplateView
# Create your views here.
class weather_view(TemplateView):
template_name = 'weather_app/base.html'
これでこのweather_viewクラスを呼べばweather_app/base.htmlが表示されることになります。
URLの作成
では、呼び出すためにURLを設定しましょう。weather_appフォルダの下にurls.pyを作成しましょう。
from django.urls import path
from weather_app.views import weather_view
urlpatterns = [
path('', weather_view.as_view(), name='weather_view'),
]
そしてプロジェクト側にここに書いたURLを使ってもらうようにお願いしに行きましょう。場所は../django_test/urls.pyです。
from django.contrib import admin
from django.urls import path, include # includeを追加
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('weather_app.urls')), # 追加
]
これで実行すればbase.htmlが実行されるはずです。実行してURLに飛んでみましょう!
どうでしょう、一面真っ白のページが表示されたでしょうか。これでページの表示までは完成です!
Viewからテンプレートへのデータの受け渡し
続いてテンプレートにデータを渡してみましょう。
今回は適当にtestという文字列を渡して表示してみましょう。
...
class weather_view(TemplateView):
template_name = 'weather_app/base.html'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["text"] = "test"
return context
おぉ。ここにきてKiteのすごみがわかってきます。メソッドを一瞬で書けるの楽でいいですね。
さてさてこれでデータを渡せたはずなので、表示するためにテンプレートをいじっていきましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{{text}}<br/>
</body>
</html>
すると先ほど渡したtestという文字列が表示されました！
Kite、HTMLは対応してないんですね...対応してほしい(切実)
今回は指定した名前がtextだったので{{text}}としていますが例えば
...
context["baba"] = "このみ"
context["まつり"] = "姫"
context["モモセ"] = "リオ"
context["天空橋"] = "tomoka"
return context
とすれば
...
{{baba}}<br/>
{{maturi}}<br/>
{{ももせ}}<br/>
{{天空橋}}<br/>
のようになります。漢字とかひらがなでも行けるんですね。
まとめ
長くなってしまったのでここでいったん終了しようと思います。
Kite、すごいですよ。単純に早く書けるし、サジェストで今書いてる引数をハイライトしてくれるからわかりやすいし。
サジェストの上の方に欲しいのが来てる気がするのは気のせいなのかKiteのすごさなのか...とりあえず使いやすいっす。
でも欲を言うならHTMLにもあったらうれしいかな。HTML、よくわからんので...
次回は簡単にJson形式のお勉強とAPIからのデータ受け取りとかできたらいいなと思います。
ではでは。