こんにちは。リューさん(@Ryu_programs)です。この記事では以下のような人に向けてDjangoで簡単なWebアプリを作成していきます。
- Djangoの学習をしたいけど、何から始めれば良いのか分からない
- Pythonを使って何か作ってみたい
- プログラミングについて興味がある
また、この記事は以前の記事の続きです。まだ読んでいない場合は、是非読んでみてください。
Dockerを用いて環境構築する場合はこの記事がお勧めです。
アプリケーションを作成する
countmemoアプリケーションを作成する
まず、manage.pyと同じディレクトリ上で以下のコマンドを実行し、countmemoアプリケーションを作成しましょう。
$ python3 manage.py startapp countmemoこのコードはDockerを利用している場合、以下のようなコードになります。
$ docker-compose run web ./manage.py startapp countmemo上のコードを実行すると、countmemoディレクトリが作成され、その中にmodels.pyやviews.pyが入っているはずです。以下はPaizaCloudのスクリーンショットなので、表示形式は少し違うかもしれませんが、このようなファイル構成になっていれば問題ありません。exampleはプロジェクト名です。
settings.pyを変更する
その後、settings.pyに新しいアプリを作成したことを教えてあげましょう。settings.py内のINSTALLED_APPSに以下のように’countmemo.apps.CountmemoConfig’を記述します。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'countmemo.apps.CountmemoConfig',
]モデルを変更する
models.pyを変更する
次に、countmemoフォルダ内のmodels.pyを書き換えていきます。このmodels.pyを元にDjangoがデータベースを操作してくれるので、非常に大事なファイルです。今回は以下のように記述していきます。
from django.db import models
from django.utils import timezone
# Create your models here.
class MemoModel(models.Model):
memo_text = models.CharField(max_length=200)
up_date = models.DateTimeField(default=timezone.now)
length = models.IntegerField(default=0)
def __str__(self):
return self.memo_textマイグレーションを行う
models.pyに追記したらマイグレーションを実行しましょう。こうすることでDBに変更を加えます。models.pyを変更した場合は必ず行っておけば間違いありません。
manage.pyと同階層で以下のコマンドを実行します。
$ python3 manage.py make migrations
$ python3 manage.py migrateDockerの場合は、以下のようなコマンドになります。
$ docker-compose run web ./manage.py make migrations
$ docker-compose run web ./manage.py migrateviews.pyを確認用に変更する
countmemoフォルダ内のviews.pyを以下のように変更しましょう。
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return HttpResponse("Hello, world!!!!!")views.pyは簡単に言えばアプリの処理に関する役割を担います。今回は確認のために、Hello, world!!!!!と表示するように記述しています。
URL関連の設定を行う
countmemoアプリ内にurls.pyを作成する
views.pyを変更したら、次はurls.pyを変更してアクセスできるようにしましょう。まず、countmemoフォルダ内にurls.pyというファイルを作成し、以下のように記述します。
また、app_nameを記述することで、アプリが大量になったときにviews.pyやテンプレートファイルからアクセスしやすくなります。記述しておきましょう。
from django.urls import path
from . import views
app_name = 'countmemo'
urlpatterns = [
path('', views.index, name='index'),
]プロジェクト内のurls.pyを変更する
僕の場合は、exampleというプロジェクト名なので、exampleフォルダの中のurls.pyを変更していきます。こうすることで、countmemoアプリ内のurls.pyを読み込むようになります。
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('countmemo.urls')),
]アプリにアクセスする
runserverコマンドを実行しましょう。
Dockerの場合は以下の、以前の記事で説明したURLに、それ以外の環境を使っている場合は環境構築時にDjangoのロケットが表示されていたURLにアクセスしてみてください。
トリミングしているため分かりづらいですが、上記のようにHello, world!!!!!と表示されていれば成功です。次のステップへと進みましょう。
base.htmlを作成する
次に、base.htmlを作成します。まず、countmemoフォルダの中にtemplatesフォルダを作成し、さらにそのtemplatesフォルダの中にcountmemoフォルダを作成しましょう。
そして、countmemoフォルダの中にbase.htmlを作成します。
現在、countmemo > templates > countmemo > base.htmlのようになっているはずです。そうであればbase.htmlに以下のように追記していきます。今回はbootstrap4を使うので、そちらもbase.htmlで読み込んでいきます。
<!doctype html>
<html lang="ja">
<head>
<title>{% block title %}{% endblock %}</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
{% block content %}
{% endblock %}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
{% block extrajs %}
{% endblock %}
</body>
</html>base.htmlは他のhtmlファイルのひな型のようなものです。用いることで大幅にコードを減らすことができます。
一覧表示テンプレートを作成する
countmemoフォルダ内のviews.pyを以下のように変更します。generic.ListViewはデータ一覧を表示したい時に使うと便利です。テンプレートファイルには、object_listという名前でデータが渡されます。
from django.shortcuts import render
from django.views import generic
from .models import MemoModel
class MemoListView(generic.ListView):
model = MemoModel
template_name = 'countmemo/memolist.html'views.pyを変更したので、同じくcountmemoフォルダ内のurls.pyを以下のように変更します。classベースのviewを使った場合は、以下のようにas_view()をつけるようにしましょう。
from django.urls import path
from . import views
app_name = 'countmemo'
urlpatterns = [
path('', views.MemoListView.as_view(), name='index'),
]MemoListViewのためのmemolist.htmlを、templateフォルダ内のcountmemoフォルダ内に作成します。object_listで渡されたデータをfor文を用いて順に取り出し、テーブルの形にまとめています。
{% extends 'countmemo/base.html' %}
{% block title %} memolist {% endblock %}
{% block content %}
<table class="table">
<thead>
<tr>
<th>#</th>
<th>テキスト</th>
<th>文字長</th>
<th>作成日</th>
</tr>
</thead>
<tbody>
{% for data in object_list %}
<tr>
<th>{{ data.id }}</th>
<th>{{ data.memo_text }}</th>
<th>{{ data.length }}</th>
<th>{{ data.up_date }}</th>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}ここまで完了したら、以下のコマンドでサーバーを動かしましょう。
$ python3 manage.py runserverDockerの場合は次のようなコマンドになります。ただ、Dockerの場合はdocker-compose up -dで既にrunserverを実行していると思うので、必要ないかもしれません。
$ docker-compose run web ./manage.py runserver先ほどのURLにアクセスし、以下のようになっていれば成功です。
データを追加できるようにする
まず、views.pyに次のように記述します。
from django.shortcuts import render, redirect
from django.views import generic
from .models import MemoModel
class MemoListView(generic.ListView):
model = MemoModel
template_name = 'countmemo/memolist.html'
class CreateMemo(generic.CreateView):
model = MemoModel
fields = ['memo_text',]
template_name = 'countmemo/memoadd.html'
def form_valid(self, form):
memo = form.save(commit=False)
memo.length = len(memo.memo_text)
memo.save()
return redirect('countmemo:index')変更点はCreateMemo以下です。この場合、models.pyで指定したmemo_textのみを入力し、lengthに入力された値の文字列長を格納するようにしています。
form_validは入力された文字列が要件を満たすときに呼び出されます。
次に、アプリの方のurls.pyを以下のように変更します。
from django.urls import path
from . import views
app_name = 'countmemo'
urlpatterns = [
path('', views.MemoListView.as_view(), name='index'),
path('add/', views.CreateMemo.as_view(), name='add'),
]こちらも、変更点はview.CreateMemo.as_view()の部分だけです。
以前作成したmemolist.htmlにデータ追加ページに遷移するためのボタンを設置します。追記する場所はどこでもいいです。僕はテーブルの下のところに設置しました。
<a class="btn btn-primary d-block d-md-inline-block mb-2 mb-md-0"
href="{% url 'countmemo:add' %}" role="button">追加</a>その後、memoadd.htmlをmemolist.htmlやbase.htmlと同じフォルダに作成し、以下のように記述します。
{% extends 'countmemo/base.html' %}
{% block title %} memoadd {% endblock %}
{% block content %}
<form method="post">
{% csrf_token %}
{{ form }}
<button class="btn btn-primary" type="submit">save</button>
</form>
{% endblock %}bootstrapを適用させるにはformの内容をひとつづつ記述し、classを追加するか、javascriptやforms.py等で自動的に追加するかなどの作業が必要なのですが、今回は省きます。また、それらの記事も書くかもしれません。
ここまで終わったら、runserverコマンドを実行してWebアプリを動かしてみましょう。先ほどの画面に追加ボタンが現れているはずです。そのボタンをクリックしてください。以下の写真のようになっていれば成功です。
上手く動いていたら適当に入力してみてください。
このように、うまくカウントできていれば成功です。
まとめ
どうでしたか？Djangoを使えば、慣れてしまえば簡単なアプリをこのように30分程度で作れてしまいます。もちろん、今回のアプリはデザインも機能も優れているとは言い難いですが、Djangoのすごさを少しでも分かってもらえたのではないでしょうか。
もし、「ここが分からない」「分かりづらい」などありましたら、Twitter(@Ryu_programs)までよろしくお願いします。
また、今回利用したPythonの学習方法などもブログに書いています。よろしければ読んでみてください。
