今回は、前回作成した Web アプリケーションをカスタマイズします。
以下、今までの作業です。
【さくらVPS】【Python】Django で Web アプリを作る【Part.1】
AWSインフラ研究所
https://go-journey.club/archives/6244
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Let’s Encrypt SSL証明書設定)【Part.2】
AWSインフラ研究所
https://go-journey.club/archives/6285
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Djangoインストール&設定)【Part.3】
AWSインフラ研究所
https://go-journey.club/archives/6299
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.4】
AWSインフラ研究所
https://go-journey.club/archives/6312
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.5】
AWSインフラ研究所
https://go-journey.club/archives/6320
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ設定編)【Part.6】
AWSインフラ研究所
https://go-journey.club/archives/6374
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】
AWSインフラ研究所
https://go-journey.club/archives/6383
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(メッセージ登録&表示アプリ編)【Part.8】
AWSインフラ研究所
https://go-journey.club/archives/6453
AWSを中心としたクラウドインフラ技術サイト
Webアプリを作る場合はレンタルサーバーより「VPS」 の方が自由度が高いのでお勧めです。
ちなみに、「さくらのVPS」 は価格が安くてスペックがいいです。
さくらのVPSのスペックです。
[test@SAKURA_VPS ~]$ cat /proc/cpuinfo | grep processor
processor : 0
[test@SAKURA_VPS ~]$ cat /proc/meminfo | grep MemTotal
MemTotal: 500208 kB
月額 : 685円~
ディスク: SSD 20GB
CPU : Intel Xeon CPU E5-2650v2 @ 2.60GHz 1個
メモリ : 512MB
前回まで作成した Web アプリ
前回まで作成した Web アプリは、下図のようにメッセージを入力して「送信」ボタンをクリックすると、ブラウザ上にメッセージが下の方に追加したいきます。
今回は、この Web アプリをカスタマイズします。
準備
まず初めに作業をする前の事前準備をします。
仮想環境に切り替える
今回も Python 仮想環境で行います。
初めに仮想環境に切り替えます。
[test@SAKURA_VPS ~]$ ls
django scraping テンプレート ドキュメント 音楽 公開
pyenv ダウンロード デスクトップ ビデオ 画像
[test@SAKURA_VPS ~]$ cd pyenv/
[test@SAKURA_VPS pyenv]$ ls
bin include lib lib64 pip-selfcheck.json pyvenv.cfg site01
[test@SAKURA_VPS pyenv]$ source ./bin/activate ← 仮想環境に切り替えます。
(pyenv) [test@SAKURA_VPS pyenv]$ ← (pyenv)が表示され、仮想環境に切り替わったことが分かります。
Django 開発サーバーを起動する
Django 開発サーバーを起動します。
(pyenv) [test@SAKURA_VPS message_site]$ pwd
/home/test/pyenv/message_site
(pyenv) [test@SAKURA_VPS message_site]$ python manage.py runserver
Performing system checks…
System check identified no issues (0 silenced).
November 06, 2017 – 21:31:11
Django version 1.11.7, using settings ‘message_site.settings’
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
課題:ブラウザをリロードすると無限に「None」が出力される
課題は、下図のように「http://127.0.0.1:8000/message_app」 にアクセスをしてブラウザをリロードすると無限に「None」 が表示されることです。
SQLite3のデータベースのテーブルの中身を確認してみる
上の Web アプリでは「None」や「あ」などの文字列が表示されていますが、現在 SQLite3 のデータベースのテーブルの中身はどうなっているのでしょうか?
テーブルの中を確認してみます。
(pyenv) [test@SAKURA_VPS message_site]$ pwd
/home/test/pyenv/message_site
(pyenv) [test@SAKURA_VPS message_site]$ ls
db.sqlite3 manage.py message_app message_site ← 「db.sqlite3」ファイルがデータベースです。
(pyenv) [test@SAKURA_VPS message_site]$ sqlite3 db.sqlite3 ← 「db.sqlite3」ファイルを指定してデータベースにアクセスします。
SQLite version 3.7.17 2013-05-20 00:56:22
Enter “.help” for instructions
Enter SQL statements terminated with a “;”
sqlite> .tables ← テーブル一覧を表示します。
auth_group django_admin_log
auth_group_permissions django_content_type
auth_permission django_migrations
auth_user django_session
auth_user_groups message_app_message_bord
auth_user_user_permissions
sqlite> select * from message_app_message_bord; ← テーブル「message_app_message_bord」の中を確認します。
1| ← 「None」の所は、何も値が入っていません。
2|
3|
4|
5|test
6|test1
7|testqqq
8|testqqq
9|testqqq
10|testテスト
11|tes1111
12|あいうえお
13|あいうえお111
14|て
15|
16|
17|
18|
19|あ
20|あ
21|あ
22|
23|
24|
25|明日
sqlite>
sqlite> .exit ← sqlite3 を抜けます。
(pyenv) [test@SAKURA_VPS message_site]$
確かにデータベース(db.sqlite3)のテーブル(message_app_message_bord)には今まで入力した値が入っていました。
値が入っていないにも関わらず、ブラウザをリロードすると「None」が表示される原因です。
(pyenv) [test@SAKURA_VPS message_app]$ pwd
/home/test/pyenv/message_site/message_app
(pyenv) [test@SAKURA_VPS message_app]$ cat views.py
from django.shortcuts import render,redirect
# Create your views here.
from .models import Message_bord
def message_app_index(request): ← ブラウザをリロードするたびに、このmessage_app_index関数が実行されてしまいます。
msg = request.GET.get(‘words’)
message_data = Message_bord()
message_data.new_message = msg
message_data.save()
data_list = Message_bord.objects.all()
contexts = {
‘result_list’: data_list,
}
return render(request, ‘message_app/index.html’, contexts)
views.pyの編集
値が入っていない状態で、ブラウザをリロードしても「None」 を表示させないためには「views.py」 を以下のように修正します。
(pyenv) [test@SAKURA_VPS message_app]$ pwd
/home/test/pyenv/message_site/message_app
(pyenv) [test@SAKURA_VPS message_app]$ vi views.py
from django.shortcuts import render,redirect
# Create your views here.
from .models import Message_bord
def message_app_index(request):
msg = request.GET.get(‘words’)
if msg is None: ← 条件分岐を入れて、「メッセージ」欄に何も値がない場合は、何も処理しない設定にします。
data_list = Message_bord.objects.all()
contexts = {
‘result_list’: data_list,
}
return render(request, ‘message_app/index.html’, contexts)
else: ← 「メッセージ」欄に何らかの値が入力されている場合は値をデータベースに入れます。
message_data = Message_bord()
message_data.new_message = msg
message_data.save()
data_list = Message_bord.objects.all()
contexts = {
‘result_list’: data_list,
}
return render(request, ‘message_app/index.html’, contexts)
models.pyの編集
models.pyを編集して「None」を消します。
(pyenv) [test@SAKURA_VPS message_app]$ pwd
/home/test/pyenv/message_site/message_app
(pyenv) [test@SAKURA_VPS message_app]$ vi models.py
from django.db import models
# Create your models here.
class Message_bord(models.Model):
new_message = models.TextField(null=False ) ← 「True」から「False」に変更します。
表示順の変更
更に表示をする順番を変更します。
今までは新しいメッセージが下に追加されていっていたので、一番上には古いメッセージが残ったままになっていました。
これを新しいメッセージを上に持ってきて、古いメッセージは下になるように変更します。
(pyenv) [test@SAKURA_VPS message_app]$ pwd
/home/test/pyenv/message_site/message_app
(pyenv) [test@SAKURA_VPS message_app]$ vi views.py
from django.shortcuts import render,redirect
# Create your views here.
from .models import Message_bord
def message_app_index(request):
msg = request.GET.get(‘words’)
if msg is None:
data_list = Message_bord.objects.order_by(‘-id’)
contexts = {
‘result_list’: data_list,
}
return render(request, ‘message_app/index.html’, contexts)
else:
message_data = Message_bord()
message_data.new_message = msg
message_data.save()
data_list = Message_bord.objects.order_by(‘-id’)
contexts = {
‘result_list’: data_list,
}
return render(request, ‘message_app/index.html’, contexts)
(pyenv) [test@SAKURA_VPS message_app]$
動作確認
プログラムを確認します。
下図のようにメッセージの表示の順番が逆になっていることを確認できます。
参考文献
今回構築した Django 環境の参考文献です。
Amazonの「Kindle Unlimited」 で購入しました。
淵上喜弘著 「1日で理解するDjango超基礎入門 」です。
書物としてまとまった Django の本がほとんどない中で、非常に役に立ちました。
本著の内容は、詳しい解説と言うよりはどんどん Web アプリを作っていくスタイルです。
そのため、文法など細かい解説が欲しい方には物足りなく感じるかもしれませんが、作って動かしてみて理解するスタイルが合う方には有用だと思います。
1日で理解するDjango超基礎入門
今までの連載
【さくらVPS】【Python】Django で Web アプリを作る【Part.1】
AWSインフラ研究所
https://go-journey.club/archives/6244
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Let’s Encrypt SSL証明書設定)【Part.2】
AWSインフラ研究所
https://go-journey.club/archives/6285
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Djangoインストール&設定)【Part.3】
AWSインフラ研究所
https://go-journey.club/archives/6299
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.4】
AWSインフラ研究所
https://go-journey.club/archives/6312
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.5】
AWSインフラ研究所
https://go-journey.club/archives/6320
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ設定編)【Part.6】
AWSインフラ研究所
https://go-journey.club/archives/6374
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】
AWSインフラ研究所
https://go-journey.club/archives/6383
AWSを中心としたクラウドインフラ技術サイト
【さくらVPS】【Python】Django で Web アプリを作る(メッセージ登録&表示アプリ編)【Part.8】
AWSインフラ研究所
https://go-journey.club/archives/6453
AWSを中心としたクラウドインフラ技術サイト
コメント