【django】Webサイト・アプリを作成するまでの一連の流れ

/

【django】Webサイトを作成するまでの一連の流れ

PythonのWebフレームワークであるDjango(ジャンゴ)を使って、自端末にWebサイトを作る一連の流れを詳しく解説していきます。

私の場合Djangoを使ってWebサイトを作り始めようと思ったとき、まず何をインストールすればいいのかわかりませんでした。
そしてサイトによってDjangoを使ったWebサイト作成の作業内容に違いがあり、どの方法が正解なのか理解するまで時間がかかった経験があります。

どういった流れで作っていくのかが、詳しく書いてなく不満に思ったこともありましたね。

なのでここではDjango初心者の方にも理解しやすく、すぐに自端末でWebサイト開発に取り掛かれるように記載し、解説していきます。

またここで解説するDjangoは、データベースにsqlite3ではなく、MySQLを使用しております。

事前準備

自端末でDjangoによるWebサイト開発ができるように、必要なソフトを2つインストールしましょう。
必要なソフトはAnacondaとXAMPP、この二つだけです。

Anaconda(アナコンダ)とは、Pythonのディストリビューションです。
簡単に説明すると、Pythonの開発環境を作るうえで必要なライブラリやツールすべてを一気にインストールできる便利ソフトです。

Anacondaは以下リンクからダウンロードできます。

Anaconda

XAMPP(ザンプ)とは、これはWebアプリケーション開発には欠かせないソフトウェアなどを一括でインストールできる優れものなのです。
Webサーバーとしての機能を提供するApache、データベースの機能を提供するMySQLがXAMPPをインストールするだけで使用できます。

XAMPPのインストール方法は以下記事をご参照ください。

Djangoで使用するデータベースMySQL機能はXAMPPで提供します。

まずは一連の流れを見よう

一つ一つ詳しいやり方を解説する前に、簡単にどういう流れでDjangoでWebサイトを作成していくかを見てみましょう。

一連の流れ

1. 仮想環境を構築

2. 必要なパッケージをインストール

3. プロジェクトを作成

4. MySQLにデータベース・ユーザーを作成

5. settings.pyの変更

6. マイグレートの実施

7. サーバの起動

8. 管理者superuserを作成

9. アプリケーションを作成

以上の流れでパソコン内にDjango開発環境を構築していきます。

それでは詳しくそれぞれの方法を解説していきます。

Webサイト開発

仮想環境を構築

まずは仮想環境を作成します。仮想環境を作ることにより、今後作成するプログラムごとに開発環境を分けることができます。

仮想環境の作成方法は以下記事をご参照ください。

今後は上記リンクで作成したpythonフォルダ内にvenvという仮想環境を作成し、仮想環境venvを有効化した状況であると想定して説明していきます。

必要なパッケージをインストール

次に必要なパッケージをインストールします。パッケージとは新たな機能をPythonに追加するために必要となるものだと思ってください。

今回はDjango機能を追加するためにDjangoパッケージと、データベースMySQLとの連携機能を追加するためにmysqlclientパッケージをインストールします。

パッケージのインストールには、pipというPythonパッケージの管理ツールを使います。

まずpipを最新バージョンにするために以下のコマンドを実行します。
*コマンドの実行には仮想環境構築の際に使ったAnaconda Promptを引き続き使用します

python -m pip install --upgrade pip

これでpipが最新バージョンにアップデートされました。
現在のpipのバージョン確認には以下コマンドを実行します。

pip -V

次にpipを用い、Djangoパッケージとmysqlclientパッケージをインストールします。

pip install Django
pip install mysqlclient

これで開発環境内にDjangoとデータベースMySQLを使用できる環境が整いました。

プロジェクトを作成

Django、MySQLの環境ができたら、次はプロジェクトを作成します。
けどいきなりプロジェクトと言われてもイメージがわきにくいですよね。

プロジェクトはWebアプリケーションの単位と考えるとイメージするとわかりやすいと思います。

例えば、あなたがWebブログアプリとWeb家計簿アプリを作るとします。この場合、あなたはBlogプロジェクトと、Expensesプロジェクトを作成します。

プロジェクトの作成には、以下のコマンドを実行します。

django-admin startproject プロジェクト名 .

上記コマンドの最後にドット.を入れることを忘れないでください。

今回はofficeというプロジェクトを作成します。

(venv) C:\Users\Desktop\python> django-admin startproject office .

これによりpythonフォルダは以下のような構成になります。

python
|── office
|   |── settings.py
|   |__ …
|── venv
|     |__ …
|__ manage.py

MySQLにデータベース・ユーザーを作成

DjangoとMySQLの連携設定をする前に、MySQLで使用するデータベースとユーザーを作成します。

まずXAMPP Control Panelを起動して、MySQLをStartして下さい。MySQLが起動したら、Control Panel右側からShellを押してコマンドプロンプトを起動します。

MySQLに接続するには下記コマンドを入力・実行します。

mysql -u ユーザー名 -p

XAMPPインストール初期はユーザー名がroot、パスワードなしでログインできます。

ログインしましたら、ユーザーを作成します。
以下のコマンドでユーザーを作成してください。

CREATE USER ユーザー名 IDENTIFIED BY ‘パスワード’;

ユーザーが作成できたら、そのユーザーに対して権限を付与してあげます。

grant all on *.* to ユーザー名@localhost identified by ‘パスワード’;

ユーザーの準備は整いましたので、次はデータベースを作成しましょう。
以下コマンドでデータベースが作成できます。

CREATE DATABASE 名前;

例として、ユーザー名:office(パスワード:password)、データベース名:Officeで作成した場合を以下に示します。

CREATE USER office IDENTIFIED BY ‘password’;
grant all on *.* to office@localhost identified by ‘password’;
CREATE DATABASE Office;

settings.pyの変更

settings.pyを一部変更・追記します。

ALLOWED_HOSTS = ['127.0.0.1']
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

settings.pyはデフォルトではsqlite3と連携するように記載されてます。
それをデータベースMySQLと連携させるためにsettings.pyを以下のように変更します。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'Office',
        'USER': 'office',
        'PASSWORD': 'password',
        'HOST': 'localhost',
        'PORT': '3306',
        'OPTIONS': {
            'init_command': "SET sql_mode='STRICT_TRANS_TABLES'",
            'charset': 'utf8mb4',
        },
}

これで先ほど作成したデータベースを、作成したユーザーで繋げれるようになりました。

マイグレートの実施

以下のコマンドを実行することでDjangoにデフォルトで設定されているモデルがデータベースに反映されます。

python manage.py migrate

WEBサーバーの起動

これでWEBサーバーを起動して、サイトにアクセスする準備が整いました。
ではサイトにアクセスできるようにWEBサーバーを以下コマンドを実行して起動します。 以下コマンドはAnaconda Promptで、manage.pyが入っているフォルダに移動して、そこから実行してください。

python manage.py runserver

エラー表示なくWEBサーバーが起動したら、サイトにアクセスしてみましょう。
ブラウザで以下のアドレスを開いてみてください。

http://127.0.0.1:8000

DjangoでのWEBサイト接続成功

この画面が表示されていれば、無事WEBサーバーは起動しており、そのWEBサーバー上でサイトが動いているのです。

管理者superuserを作成

定義したモデルを管理できる管理(admin)サイトがDjangoには用意されています。

これから紹介する管理サイトは、基本的にユーザーが使うサイトではなく、管理者が使用するべきサイトです。

IT用語の確認

モデルとは、データベースのテーブルを自動的に作成してくれる機能。また作成するだけでなく、モデルに定義されているクラスを操作することで、データベースを簡単に操作することができる。

まず管理サイトにログインするためのユーザーを作成します。
以下コマンドを実行してください。

python manage.py createsuperuser

作成するユーザー名を入力してください。以下ではユーザー名:adminを作成します。

Username: admin

次にメールアドレスを入力し、最後にユーザーに対するパスワードを2回入力します。

これでユーザーが作成されましたので、サーバーを起動して管理サイトにアクセスしてみましょう。

サーバーが起動していない場合は、サーバーを起動しておいてください。

python manage.py runserver

ブラウザを起動して、以下URLにアクセスしましょう。

http://127.0.0.1:8000/admin/
Djangoでの管理サイトログイン画面

上記のようなページが表示されますので、先ほど作成したユーザー名・パスワードでログインできます。

ログインした先でデータベースを簡単に操作することができます。

アプリケーションを作成

ではDjangoによるWEBサイト作成の最後に、プロジェクト内にアプリケーションを作成します。
プロジェクトには複数のアプリケーションを作成することができます。

アプリケーションの作成には以下のコマンドを実行します。ここではfiveというアプリケーションを作ってみます。

python manage.py startapp five

pythonディレクトリ内にfiveディレクトリが作成されます。この新しいディレクトリ内にアプリケーションを作成していきます。

現在のディレクトリ構成は以下のようになっています。

python
├── five
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
├── office
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── myvenv
  └── ...

アプリケーションを作成したら、settings.pyに作成したアプリを登録します。
登録方法は以下の1行を追加するだけです。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'five.apps.FiveConfig',		//この1行を追加します
]

せっかくなので作成したアプリケーションを通してWebサイトが表示されるようにしましょう。

Djangoではurls.pyとviews.pyファイルを使って、URLのコントロールをします。
どのURLに対して、どのHTMLファイルを対応させるかをurls.py、views.pyに記述します。

簡単に説明すると、これら2つのpyファイルがURLのパターンに応じて、どのHTMLファイルを対応させるかのパターンマッチングをさせています。

まずプロジェクトディレクト内のsettings.pyを開いてみてください。

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

最初から記載されているpathは、adminにアクセスした場合はログインページを表示させるという意味です。

ここまででわかるように、URLのパターンマッチングはプロジェクトディレクト内のurls.pyから見ていきます。

それでは、urls.pyを以下のようにしてみてください。

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('five.urls')),
]

include関数を使うために、2行目でincludeをインポートします。
新たに追加した5行目で、http://127.0.0.0:8000へのリクエストはすべてfive.urlsにリダイレクトするようになります。

これはfiveアプリケーションディレクトリ内のurls.pyを見に行ってください、という意味になります。

ではfiveディレクトリを見ると、urls.pyはないですよね。なのでurls.pyを作ってください。
作成したら以下のように記述してください。

from django.urls import path
from . import views
urlpatterns = [
    path('', views.index, name='index'),
]

ここでのpathが意味するのは、http://127.0.0.0:8000へのリクエストはviews.pyのindex関数を見に行ってください、という意味になります。

name=’index’は、このviews.indexの名前だと思ってください。

次にfiveディレクトリ(アプリケーションディレクトリ)内のviews.pyを開いてください。ここにurls.pyから託されたリクエストを処理するindex関数を定義します。

from django.shortcuts import render
def index(request):
    return render(request, 'five/index.html', {})

これでやっと、http://127.0.0.0:8000のリクエストに対するレスポンスindex.htmlの道筋ができあがりました。

最後に表示するindex.htmlを作成しましょう。

まずディレクトリtemplatesをfiveディレクトリ(アプリケーションディレクトリ)直下に作成してください。
そしてそのtemplatesディレクトリ内にfiveフォルダを作り、その中にindex.htmlを作成します。

<html>
<body>
    <p>Webサイト作成の第一歩が完成!!</p>
    <p>ここからどんどん大きくしていくぞ!</p>
</body>
</html>

例として上記のようなindex.htmlを作ってみてください。
そしてhttp://127.0.0.0:8000にアクセスすると、index.htmlが表示したはずです。

このようにDjangoでは、views.pyを通してテンプレートという仕組みを使ってHTMLを生成し、Webページを表示させています。
テンプレートの仕組みについては以下記事をご参照ください。

まとめ

とても長くなりましたが、これでDjangoによるWebサイト開発の第一歩ができました。

ここからサイトを大きくしていき、cssやJavaScript、jQueryを適応させたり、データベースを使ってみたりとやれることはまだまだたくさんあります。

まずは今回やったことを覚えていただいて、どういった流れでurls.pyやviews.pyが使われているのか等を理解してもらえればと思います。