Djangoでアプリケーション作成②〜アプリ作成編〜

てちてちエンジニアのおっとーです。

この記事ではDjango×Pythonを使ったWEBアプリの作成を行っていきます。

全部を1つの投稿にまとめると長くなりすぎるので、

３部構成で紹介をしていきます。

〜環境構築編〜
〜アプリ作成編〜
〜本番環境編〜

これからDjangoを使ったWebアプリの作成を始める方は、

全行程を完了すると環境構築からウェブアプリ作成、本番移行までを行ったことになります。

アプリ作成編の所要時間は約40分です。

全行程の所要時間は約100分です。

では、アプリ作成編やっていきます。

アプリケーション作成

アプリケーション作成

Djangoのスタートページ表示まで

まず、Djangoのフレームワークを用いて、開発環境でスタートページを表示させるまでを紹介していきます。

Djangoプロジェクト作成

Djangoのフレームワークを使用するために、Djangoプロジェクトを作成していきます。

手順①：仮想環境を作成したディレクトリに移動します

仮想環境に移動するために以下のコマンドを実行します。

〇〇には仮想環境までのパスを入力してください。

cd 〇〇/〇〇/〇〇

Windowsの例：cd C:¥user¥user¥Desktop¥django_app_env
Macの例：cd /Users/user/Desktop/django_app_env

手順②：仮想環境内に入っていきます

仮想環境を有効にするために以下のコマンドを実行します。

Windowsは

Scripts¥activate.bat

Macは

source bin/activate

手順③：Djangoプロジェクトを作成

Djangoプロジェクトを作成するために以下のコマンドを実行します。

自分で命名したプロジェクトを作成する場合、

1行目の〇〇部分を自分の好きなプロジェクト名にして実行します。

「名前は何でもいい」「とりあえず流れを知りたい」場合は

2行目を実行してください。

django-admin startproject 〇〇〇〇
django-admin startproject django_project

プロジェクトの作成に成功していると仮想環境フォルダに命名したプロジェクト名のフォルダが作成されます。

手順④：スタートページを確認

ここまで問題なく進められているか確認していきます。

ターミナルでmanage.pyのあるパスまで移動します。

cd 〇〇/〇〇/〇〇

Windowsの例：cd C:¥user¥user¥Desktop¥django_app_env¥django_project
Macの例：cd /Users/user/Desktop/django_app_env/django_project

続けて、以下のコマンドを実行します。

python manage.py runserver

この様な表示が確認できたら、

http://127.0.0.1:8000/　をブラウザのURLバーに入力して以下のページが表示されればスタートページ表示は完了です。

自分で作成したページを表示

続いてカスタマイズしたページの表示までをやっていきます。

Djangoアプリ作成

Djangoプロジェクト内にアプリを作成していきます。

今後ウェブ上に表示させるコンテンツ等はこれから作成するアプリ内で修正を行っていきます。

手順①：Projectフォルダへ移動する

以降の手順では作成したプロジェクトフォルダ内の、

manage.py(プロジェクトフォルダ内にあるファイル)を使って操作していくので、

コマンド入力を短縮化するためにカレントディレクトリをプロジェクトフォルダ内へ移動させます。

自分で命名したプロジェクト名の場合、

1行目の〇〇をプロジェクト名に変更してコマンドを実行します。

それ以外は2行目のコマンドを実行します。

cd 〇〇
cd django_project

手順②：アプリ作成

アプリを作成するために以下のコマンドを実行します。

自分で命名したアプリを作成する場合、

1行目の〇〇部分を自分の好きなアプリ名にして実行します。

「名前は何でもいい」「とりあえず流れを知りたい」場合は

2行目を実行してください。

python manage.py startapp 〇〇〇〇
python manage.py startapp django_app

正しく実行できていれば以下の様なフォルダ構成となっているはずです。

Djangoプロジェクトにアプリを登録

Djangoに作成したアプリを認識させるために、登録するためのコードを記述していきます。

ここからはエディターを使用していきます。

私はSublime Textを使用した画像を参考画像として載せますが、

他のエディターでも同じことができると思いますので、手順がわからなくなった場合は、

実際に使用されるエディター名とキーワードで検索してみてください。

検索テクニックはこちらの記事を参考にしてください。

手順①：エディターでdjango_projectを開きます

仮想環境を作成したフォルダを探し出し、

プロジェクトフォルダをドラッグ＆ドロップします

手順②：django_project内のsettings.pyのINSTALLED_APPSにアプリを追加

django_projectのsettings.pyにあるINSTALLED_APPSを見つけて、

[]の中に以下を追加していきます。

'django_app.apps.DjangoAppConfig',

追記している内容は、django_appのapps.pyのDjangoAppConfigクラスを指しています。

他のアプリをdjango_project内で作成した場合も同様に、上記手順を行いdjango_projectのsettings.pyのINSTALLED_APPSにアプリを登録します。

ルーティング

「Djangoのスタートページ表示」の手順を最後まで行った時は、

http://127.0.0.1:8000にアクセスするとスタートページが表示されていましたが、

以降手順でこれから作成するページ(View)が表示されるようにルーティングを行います。

手順①：プロジェクトのルーティング設定

エディターでdjango_project内のurls.pyを開き以下の内容を記述してください。

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('django_app.urls')),
]

今回記述した内容はプロジェクトのIPにアクセスが行われた際、django_appのurls.pyの処理を読み込むという意味です。

127.0.0.1:8000(ローカルホスト)がデフォルトで表示するページを新しく作成したアプリのurls.pyに委ねたと理解しておいてください。

手順②：アプリのルーティング設定

django_appのフォルダに移動します。

手順③で127.0.0.1:8000にアクセスがされた時に作成したアプリのurls.pyに委ねると記述したのですが、

django_appにはurls.pyが存在しません。

まずはdjango_app内にurls.pyを作成します。

作成したら次の内容を記述していきます。

from django.urls import path

from .import views

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

127.0.0.1:8000でアクセスされた場合はviews.pyのIndexViewクラスをルーティングしますという記述内容です。

ページの作成

手順①：Viewを作っていきます

urls.pyでルーティングされたIndexViewが存在しないと、画面の表示を行えないので、

django_app内のviews.pyを開き以下の内容を記述します。

from django.views import generic


class IndexView(generic.TemplateView):
	template_name = 'index.html'

手順②：テンプレートフォルダを作成して、htmlを作成

views.pyのIndexViewに「template(雛形)はindex.htmlを読み込んで表示しろ」と記述しました。

なので読み込む対象を作っていきます。

django_appの中にtemplatesという名前のフォルダを作成し、

その中にindex.htmlというファイルを作成してください。

作成したら以下のコードをindex.htmlに貼り付けてください。

<html>
<head>
	<title>My first Django app</title>

</head>
	<h1>This is my first Django app</h1>
	<p>自分でカスタマイズしたページです。</p>

</html>

手順③：カスタマイズしたページの確認

ここまで問題なく進められているか確認していきます。

ターミナルでmanage.pyのあるパスまで移動します。

cd 〇〇/〇〇/〇〇

Windowsの例：cd C:¥user¥user¥Desktop¥django_app_env¥django_project
Macの例：cd /Users/user/Desktop/django_app_env/django_project

続けて、以下のコマンドを実行します。

python manage.py runserver

127.0.0.1:8000にアクセスしてみます。

この様なページが表示されれば、カスタマイズしたページの表示の手順が問題なく完了してます。

アプリを作り込んでいこう

今のままだと、流石にWebアプリと呼ぶには動きがなさすぎるので、

モデル
フォーム
テンプレート

を使って、入力画面と表示画面を作り、

入力画面では入力された情報をデータベースに格納

表示画面ではデータベースの情報を表示する

簡単なアプリを作成していきます。

※以下の手順は少しでもアプリと呼ぶに相応しい形にするためだけのものです。
※流れを把握したいだけの場合は本番環境編へお進みください。

sqlite3を使ってデータベースを作成

sqlite3という特に端末側での設定が不要なデータベースを使用していきます。

django内の設定はプロジェクト作成時に勝手にしてあるので、そのまま利用していきます。

ターミナルでmanage.pyのあるパスまで移動します。

cd 〇〇/〇〇/〇〇

続けて、以下のコマンドを実行します。

python manage.py migrate

テーブルの作成が完了しているか確認するために以下のコマンドを入力します。

sqlite3 db.sqlite3

続けて以下を入力します。

.table

私は以降で作成するテーブルを作成してしまったので項目が1つ多いですが、

django_app_catlist以外が作成できていればmigrateできています。

モデルの作成

データベースとのやり取りを行ってくれるモデルというものを作っていきます。

django_appのmodels.pyに以下の内容を記述します。

from django.db import models

# Create your models here.

class CatList(models.Model):
	cat_name = models.TextField(verbose_name='名前', blank=False, null=False)
	age = models.IntegerField(verbose_name='年齢', blank=False, null=False)
	color = models.TextField(verbose_name='色', blank=False, null=False)
	food  = models.TextField(verbose_name='餌', blank=False, null=False)

フォームの作成

先程作成したモデルをベースにフォームを作成していきます。

django_app内にforms.pyというファイルを作成して、以下の内容を記述します。

from django import forms
from .models import CatList


class InputForm(forms.ModelForm):

    class Meta:
        model = CatList
        fields = ('cat_name', 'age','color','food')

    def save(self):
        data = self.cleaned_data
        catlist = CatList(cat_name=data['cat_name'], age=data['age'],color=data['color'],food=data['food'],)
        catlist.save()

ビューの作成

ビューを作成していきます。

django_app内のviews.pyに以下の内容を記述します。

from django.views import generic
from .models import CatList
from .forms import InputForm



class IndexView(generic.TemplateView):
    template_name = 'index.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context["title"] = 'TOP'
        return context

class CatListView(generic.ListView):
    model = CatList
    template_name = 'list.html'
    context_object_name = 'catlist'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context["title"] = '猫リスト'
        return context

class InputFormView(generic.FormView):
    form_class = InputForm
    template_name = 'form.html'
    success_url = 'catlist'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context["title"] = 'フォーム'
        return context

    def form_valid(self, form):
        form.save()
        return super().form_valid(form)

ルーティング

先程作成したビューをルーティングしていきます。

django_appのurls.pyに以下の内容を記述します。

from django.urls import path

from .import views

app_name = 'django_app'
urlpatterns = [
path('',views.IndexView.as_view(),name='index'),
path('catlist',views.CatListView.as_view(),name='catlist'),
path('input',views.InputFormView.as_view(),name='input'),
]

テンプレートの作成

views.pyでページ表示処理をするために、

template_nameで指定したテンプレートファイルを作成していきます。

index.htmlは前手順で作成しているので、

django_appのtemplatesフォルダの中に以下を作成します。

base.html
list.html
form.html

base.html

<html>
<head>
	<title>My first Django app</title>
</head>
<body>
	<h1>{{ title }}</h1>
    {% block content %}
    {% endblock %}
</body>
</html>

list.html

{% extends 'base.html' %}

{% block content %}
  {% for cat in catlist %}
  <li>{{ cat.cat_name }}ちゃんは{{ cat.age }}歳の猫で、毛色は{{ cat.color }}です。普段は{{ cat.food }}を食べています。</li>
  {% endfor %}
{% endblock content %}

form.html

{% extends 'base.html' %}

{% block content %}
  <form method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">保存</button>
  </form>
{% endblock %}

index.html

{% block content %}
	<h1>{{ title }}</h1>
	<p>自分でカスタマイズしたページです。</p>
	<a href="{% url 'django_app:catlist' %}">リスト</a>
	<br>
	<a href="{% url 'django_app:input' %}">入力</a>
{% endblock %}

モデルをデータベースへ反映

ターミナルでmanage.pyのあるパスまで移動します。

cd 〇〇/〇〇/〇〇

続けて、以下のコマンドを実行します。

python manage.py makemigrations

続けて、以下のコマンドを実行します。

python manage.py migrate

動きを確認してみよう

開発環境を立ち上げて作成した内容を確認していきます。

python manage.py runserver

127.0.0.1:8000にアクセスしてみます。

127.0.0.1:8000/inputにアクセスしてみます。

フォームが表示されたので、こんな感じで入力して保存ボタンを押下します。

保存が成功すると、http://127.0.0.1:8000/catlistにリダイレクトされ、以下の様な内容が表示されます。

以上でアプリ作成編は終了です。

お疲れさまでした。

今回は手順をメインで紹介したため細かい部分の説明ができてません。

フォームやモデルの詳細等の説明は今後の投稿で紹介していきたいと思います。