【さくらVPS】【Python】Django で Web アプリを作る(カスタマイズ編)【Part.9】

今回は、前回作成した Web アプリケーションをカスタマイズします。

 

以下、今までの作業です。

【さくらVPS】【Python】Django で Web アプリを作る【Part.1】

 

【さくらVPS】【Python】Django で Web アプリを作る(Let's Encrypt SSL証明書設定)【Part.2】

 

【さくらVPS】【Python】Django で Web アプリを作る(Djangoインストール&設定)【Part.3】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.4】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.5】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ設定編)【Part.6】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

【さくらVPS】【Python】Django で Web アプリを作る(メッセージ登録&表示アプリ編)【Part.8】

 

 

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

【さくらVPS】【Python】Django で Web アプリを作る(カスタマイズ編)【Part.9】

 

 

前回まで作成した Web アプリ

前回まで作成した Web アプリは、下図のようにメッセージを入力して「送信」ボタンをクリックすると、ブラウザ上にメッセージが下の方に追加したいきます。

 

【さくらVPS】【Python】Django で Web アプリを作る(カスタマイズ編)【Part.9】

 

今回は、この 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]$

 

 

動作確認

プログラムを確認します。

下図のようにメッセージの表示の順番が逆になっていることを確認できます。

【さくらVPS】【Python】Django で Web アプリを作る(カスタマイズ編)【Part.9】

 

 

 

参考文献

今回構築した Django 環境の参考文献です。

Amazonの「Kindle Unlimited」で購入しました。

淵上喜弘著 「1日で理解するDjango超基礎入門」です。

書物としてまとまった Django の本がほとんどない中で、非常に役に立ちました。

本著の内容は、詳しい解説と言うよりはどんどん Web アプリを作っていくスタイルです。

そのため、文法など細かい解説が欲しい方には物足りなく感じるかもしれませんが、作って動かしてみて理解するスタイルが合う方には有用だと思います。

1日で理解するDjango超基礎入門

 

今までの連載

【さくらVPS】【Python】Django で Web アプリを作る【Part.1】

 

【さくらVPS】【Python】Django で Web アプリを作る(Let's Encrypt SSL証明書設定)【Part.2】

 

【さくらVPS】【Python】Django で Web アプリを作る(Djangoインストール&設定)【Part.3】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.4】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.5】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ設定編)【Part.6】

 

【さくらVPS】【Python】Django で Web アプリを作る(Webアプリ構築編)【Part.7】

 

【さくらVPS】【Python】Django で Web アプリを作る(メッセージ登録&表示アプリ編)【Part.8】

 

 

Posted by 100%レンタルサーバーを使いこなすサイト管理人

コメントを残す

メールアドレスが公開されることはありません。