ホームページの作り方③ベース作り
約456日前
2020年8月27日17:56
デジタル
ホームページ Django Python
2020/8/27 投稿
「ホームページの作り方」シリーズの第３章です。
第１章・・・導入
第２章・・・準備
第３章・・・ベース作りNow
第４章・・・テンプレート適用
第５章・・・サーバー
第６章・・・ドメイン設定
第７章・・・常時SSL接続化
この章を開始する前提条件として下記ソフトがインストールされている必要があります。
・Python
・Visual Studio Code
インストールがまだの方は前章（第２章）を参照し、インストール下さい。
２章へ
Djangoファイルを生成し、自分のWEBブラウザでDjangoを表示する。
Djangoを開始する前に開発環境を整えましょう！
まずは、みなさんのパソコンに仮想環境を作成していきます。
仮想環境（virtual environment）よくvenvって書かれています。
隔離・独立したPython/Djangoの開発環境をあなたのPC上に作ります。
（作るといっても大したことはしません。フォルダが１個増えるだけです。）
こうすることで、仮にパソコンの設定や環境が変わってしまっても、
作ったDjangoプロジェクトに影響を与えなくできます。
安定した開発を進める上であったほうが便利なので
ぜひ作りましょう！
仮想環境は１個のフォルダの中に作られます。
フォルダ名の付け方も自由です。
場所はどこでも良いので、Django関係ファイルを管理するフォルダを作成して下さい。
例：C:\Users\ユーザー名\myhp
上記の例では、「ユーザー名フォルダ」の中に「myhp」という名前で新しくフォルダを作成しました。
※バックスラッシュ「\」は「￥」と同じ扱いです。
作ったフォルダを開き、パスをコピーします。
![]()
Windowsキー＋「R」を押して「cmd」を起動して下さい。
先ほどコピーしたパスを「cd」と入力した後に半角スペースを入れてからペーストしましょう。
エンターを押すと「>」より左側の部分が
になっていると思います。
「cd」は「change directory」の略で、フォルダ移動を意味します。
つまりcmd上で「myhp」フォルダ内に移動したことになります。
ここで下記のように入力してエンターを押しましょう。
（少し時間が掛かると思います）
先ほど作った「myhp」フォルダを見てみましょう。
仮想環境ファイル「myvenv」フォルダが作成されていますね！
このフォルダの中にはこれから作るDjango専用のPython設定ファイルが入っています。
再度cmd画面に戻って、次のように入力してエンターを押しましょう。
※「Scripts」部分の「S」は大文字です。間違えないように。
画面が切り替わって下記のようになると思います。
左側に（myvenv）と付いていますね。
これは仮想環境「myvenv」を読み込んだ状態を表しています。
この状態でPythonプログラムを動かすと、
パソコンにインストールされているPythonとは別のPython、
「myvenv設定のPython」が動きます。
仮想環境の導入はここまでです。
プロジェクトと聞くと何やらすごそうな感じがしますよね。
難しいことが始まりそうな匂いがします・・・。
・・・が、実はそんなことはありません！
これから作っていくDjango関係のファイルの塊のことを
「プロジェクト」と呼びます。ただそれだけです！
それではDjangoをインストールしましょう。
Pythonの仮想環境（myvenv）に導入します。
今回はDjango 2.2.4をインストールします。
（これでしか動作確認とれてません）
まずは「myhp」フォルダ内に下記を記入したテキストファイルを作成しましょう。
名前は「requirements.txt」として下さい。
Djangoのインストールの際にこのファイルを読み込ませることで、
インストールするDjangoのバージョンを指定できます。
下記コマンドを実行しましょう。
最後の２行で何やら怒られました。
この警告はDjangoのインストールとは無関係なので無視してもいいのですが、
今後も出てくると気になっちゃうので対処しておきましょう。
警告内容は
「あなたが使ってるpip(バージョン20.1.1は最新版じゃないよ。バージョン20.2.2がリリースされてるよ」
というものです。
pipをアップグレードすれば消えるので、下記コマンドでアップグレードしましょう。
では本題に戻ります。
先ほどDjangoをインストールしたので、
プロジェクトを作成しましょう。
下記コマンドを実行して下さい。
「config」はメインの設定ファイルが入るフォルダの名前です。
何でも良いのですが、設定ファイルが入るので「config」にしておくと分かりやすいかもしれないです。
※configの後に半角スペースを空けて「.」を入れるのを忘れないで下さい。
「myhp」フォルダを見て下さい。
manage.py と configフォルダが生成されています。
![]()
次にcmdで以下のコマンドを実行してみましょう。
migrateコマンドによって、
各種データを格納するデータベースファイルを作成しました。
「myhp」フォルダ内に「db.sqlite3」というファイルが生成されています。
これでブラウザ上でDjangoを動かす準備が整いました！
次のコードを実行して開発用サーバーを起動しましょう！
これまでと違い、入力待機していませんね。
「(myvenv) C:\Users\ユーザー名\myhp>」になっていない。
これは、サーバー起動中という意味で、終了コマンドを打つまでこの状態が継続します。
終了コマンドは後で伝えます。
まずはブラウザで以下のページを表示してみましょう。
http://127.0.0.1:8000/
![]()
ロケットが描かれた画面が表示されましたか？
表示されていたら成功です！
ブラウザ上であなたのDjangoが動いています！
では一旦サーバーを停止させましょう。
コマンドはCtrlキー＋「C」です。
私のノートPCはCtrlキー＋Fn＋「P」でした。
これで入力待機画面に戻ったと思います。
次は簡単なDjangoの説明です。
なんとなく表示される だけではつまらないので、
どんな動きで表示されているのかを簡単に説明します。
まずは２章でインストールしたVisual Studio Codeを起動して下さい。
![]()
「フォルダーを開く」をクリックし、「myhp」フォルダを開き、
「フォルダーを選択」をクリック下さい。
画面の左側に「myhp」フォルダの中身が表示されたと思います。
![]()
まずはDjangoの設定を確認しましょう。
「config」フォルダをクリックし、「settings.py」を選択してください。
※configフォルダの名前はみなさんが自分で設定した名前です。
ファイル内の「"""」で挟まれた部分はプログラムに関係無いコメントですので今は無視して下さい。
（今後このホームページ上では省いて表示します）
中央より少し上あたりに
と、書いてあると思います。
WEBページにアクセスがあると、
Djangoはまず「config.urls」を確認します。
上記は
「configフォルダ内のurlsファイルを参照する」という意味です。
configフォルダ内を確認してみると、
確かに「urls.py」というファイルがあります。
それをクリックしてみましょう。（Visual Studio Code上でクリックして下さい）
ここでは、
「●●というURLにアクセスがあったら、▲▲のファイルを開く」
という処理が記載されています。
例えば下記部分は、
「http://127.0.0.1:8000/admin」にアクセスがあったら、admin.site.urlsを開く」
という意味です。
この部分に
と追加していくことで、読み込むウェブページをDjangoに教えることができます。
次の章に移る前にDjangoの設置を簡単にいじっておきましょう。
（Visual Studio Code操作の練習です）
「settings.py」を再度表示して下さい。
一番下のほうに言語と時間の設定項目があります。
この部分を下記のように書き換えましょう。
言語を日本語、タイムゾーンを東京に設定しました。
書き換え終えたら
Ctrlキー＋「S」で上書き保存しておきましょう。
次はいよいよ本格的なウェブページの作成に移ります。
とは言っても非常に簡単ですので心配しないで下さい。
では次の章に移動しましょう！
デジタル
ホームページ Django Python
改訂履歴
2020/8/27 投稿
「ホームページの作り方」シリーズの第３章です。
第１章・・・導入
第２章・・・準備
第３章・・・ベース作りNow
第４章・・・テンプレート適用
第５章・・・サーバー
第６章・・・ドメイン設定
第７章・・・常時SSL接続化
1. 前準備
この章を開始する前提条件として下記ソフトがインストールされている必要があります。
・Python
・Visual Studio Code
インストールがまだの方は前章（第２章）を参照し、インストール下さい。
２章へ
2. この章のゴール
Djangoファイルを生成し、自分のWEBブラウザでDjangoを表示する。
3. 仮想環境
Djangoを開始する前に開発環境を整えましょう！
まずは、みなさんのパソコンに仮想環境を作成していきます。
3.1 - 仮想環境とは
仮想環境（virtual environment）よくvenvって書かれています。
隔離・独立したPython/Djangoの開発環境をあなたのPC上に作ります。
（作るといっても大したことはしません。フォルダが１個増えるだけです。）
こうすることで、仮にパソコンの設定や環境が変わってしまっても、
作ったDjangoプロジェクトに影響を与えなくできます。
安定した開発を進める上であったほうが便利なので
ぜひ作りましょう！
3.2 - 作成
仮想環境は１個のフォルダの中に作られます。
フォルダ名の付け方も自由です。
場所はどこでも良いので、Django関係ファイルを管理するフォルダを作成して下さい。
例：C:\Users\ユーザー名\myhp
上記の例では、「ユーザー名フォルダ」の中に「myhp」という名前で新しくフォルダを作成しました。
※バックスラッシュ「\」は「￥」と同じ扱いです。
作ったフォルダを開き、パスをコピーします。
Windowsキー＋「R」を押して「cmd」を起動して下さい。
先ほどコピーしたパスを「cd」と入力した後に半角スペースを入れてからペーストしましょう。
C:\Users\ユーザー名>cd C:\Users\ユーザー名\myhp
エンターを押すと「>」より左側の部分が
C:\Users\ユーザー名\myhp>
になっていると思います。
「cd」は「change directory」の略で、フォルダ移動を意味します。
つまりcmd上で「myhp」フォルダ内に移動したことになります。
ここで下記のように入力してエンターを押しましょう。
（少し時間が掛かると思います）
C:\Users\ユーザー名\myhp>python -m venv myvenv
C:\Users\ユーザー名\myhp> #←待っていると再度入力待機になります（＝仮想環境作成完了）
先ほど作った「myhp」フォルダを見てみましょう。
仮想環境ファイル「myvenv」フォルダが作成されていますね！
このフォルダの中にはこれから作るDjango専用のPython設定ファイルが入っています。
3.3 - 動作確認
再度cmd画面に戻って、次のように入力してエンターを押しましょう。
※「Scripts」部分の「S」は大文字です。間違えないように。
C:\Users\ユーザー名\myhp>myvenv\Scripts\activate
画面が切り替わって下記のようになると思います。
(myvenv) C:\Users\ユーザー名\myhp>
左側に（myvenv）と付いていますね。
これは仮想環境「myvenv」を読み込んだ状態を表しています。
この状態でPythonプログラムを動かすと、
パソコンにインストールされているPythonとは別のPython、
「myvenv設定のPython」が動きます。
仮想環境の導入はここまでです。
4. Djangoプロジェクトの作成
4.1 - プロジェクト？
プロジェクトと聞くと何やらすごそうな感じがしますよね。
難しいことが始まりそうな匂いがします・・・。
・・・が、実はそんなことはありません！
これから作っていくDjango関係のファイルの塊のことを
「プロジェクト」と呼びます。ただそれだけです！
4.2 - Djangoのインストール
それではDjangoをインストールしましょう。
Pythonの仮想環境（myvenv）に導入します。
今回はDjango 2.2.4をインストールします。
（これでしか動作確認とれてません）
まずは「myhp」フォルダ内に下記を記入したテキストファイルを作成しましょう。
名前は「requirements.txt」として下さい。
Django~=2.2.4
Djangoのインストールの際にこのファイルを読み込ませることで、
インストールするDjangoのバージョンを指定できます。
下記コマンドを実行しましょう。
(myvenv) C:\Users\ユーザー名\myhp>pip install -r requirements.txt
Collecting Django~=2.2.4
Downloading Django-2.2.15-py3-none-any.whl (7.5 MB)
|████████████████████████████████| 7.5 MB 2.2 MB/s
Collecting sqlparse>=0.2.2
Downloading sqlparse-0.3.1-py2.py3-none-any.whl (40 kB)
|████████████████████████████████| 40 kB 1.3 MB/s
Collecting pytz
Downloading pytz-2020.1-py2.py3-none-any.whl (510 kB)
|████████████████████████████████| 510 kB 2.2 MB/s
Installing collected packages: sqlparse, pytz, Django
Successfully installed Django-2.2.15 pytz-2020.1 sqlparse-0.3.1
WARNING: You are using pip version 20.1.1; however, version 20.2.2 is available.
You should consider upgrading via the 'c:\users\ユーザー名\myhp\myvenv\scripts\python.exe -m pip install --upgrade pip' command.
(myvenv) C:\Users\ユーザー名\myhp> #←待っていると再度入力待機になります（＝Djangoインストール完了）
最後の２行で何やら怒られました。
WARNING: You are using pip version 20.1.1; however, version 20.2.2 is available.
You should consider upgrading via the 'c:\users\ユーザー名\myhp\myvenv\scripts\python.exe -m pip install --upgrade pip' command.
この警告はDjangoのインストールとは無関係なので無視してもいいのですが、
今後も出てくると気になっちゃうので対処しておきましょう。
警告内容は
「あなたが使ってるpip(バージョン20.1.1は最新版じゃないよ。バージョン20.2.2がリリースされてるよ」
というものです。
pipをアップグレードすれば消えるので、下記コマンドでアップグレードしましょう。
(myvenv) C:\Users\ユーザー名\myhp>python -m pip install --upgrade pip
Collecting pip
Downloading pip-20.2.2-py2.py3-none-any.whl (1.5 MB)
|████████████████████████████████| 1.5 MB 177 kB/s
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.1.1
Uninstalling pip-20.1.1:
Successfully uninstalled pip-20.1.1
Successfully installed pip-20.2.2
(myvenv) C:\Users\ユーザー名\myhp> #←待っていると再度入力待機になります（＝pipアップデート完了）
では本題に戻ります。
先ほどDjangoをインストールしたので、
プロジェクトを作成しましょう。
下記コマンドを実行して下さい。
「config」はメインの設定ファイルが入るフォルダの名前です。
何でも良いのですが、設定ファイルが入るので「config」にしておくと分かりやすいかもしれないです。
※configの後に半角スペースを空けて「.」を入れるのを忘れないで下さい。
(myvenv) C:\Users\ユーザー名\myhp>django-admin startproject config .
(myvenv) C:\Users\ユーザー名\myhp> #←待っていると再度入力待機になります（＝必要なファイル類の生成が完了）
「myhp」フォルダを見て下さい。
manage.py と configフォルダが生成されています。
次にcmdで以下のコマンドを実行してみましょう。
(myvenv) C:\Users\ユーザー名\myhp>python manage.py migrate
Operations to perform:
Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
Applying contenttypes.0001_initial... OK
Applying auth.0001_initial... OK
Applying admin.0001_initial... OK
Applying admin.0002_logentry_remove_auto_add... OK
Applying admin.0003_logentry_add_action_flag_choices... OK
Applying contenttypes.0002_remove_content_type_name... OK
Applying auth.0002_alter_permission_name_max_length... OK
Applying auth.0003_alter_user_email_max_length... OK
Applying auth.0004_alter_user_username_opts... OK
Applying auth.0005_alter_user_last_login_null... OK
Applying auth.0006_require_contenttypes_0002... OK
Applying auth.0007_alter_validators_add_error_messages... OK
Applying auth.0008_alter_user_username_max_length... OK
Applying auth.0009_alter_user_last_name_max_length... OK
Applying auth.0010_alter_group_name_max_length... OK
Applying auth.0011_update_proxy_permissions... OK
Applying sessions.0001_initial... OK
(myvenv) C:\Users\ユーザー名\myhp> #入力待機（＝実行完了）
migrateコマンドによって、
各種データを格納するデータベースファイルを作成しました。
「myhp」フォルダ内に「db.sqlite3」というファイルが生成されています。
これでブラウザ上でDjangoを動かす準備が整いました！
次のコードを実行して開発用サーバーを起動しましょう！
(myvenv) C:\Users\ユーザー名\myhp>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
August 28, 2020 - 00:44:36
Django version 2.2.15, using settings 'config.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
これまでと違い、入力待機していませんね。
「(myvenv) C:\Users\ユーザー名\myhp>」になっていない。
これは、サーバー起動中という意味で、終了コマンドを打つまでこの状態が継続します。
終了コマンドは後で伝えます。
まずはブラウザで以下のページを表示してみましょう。
http://127.0.0.1:8000/
ロケットが描かれた画面が表示されましたか？
表示されていたら成功です！
ブラウザ上であなたのDjangoが動いています！
では一旦サーバーを停止させましょう。
コマンドはCtrlキー＋「C」です。
私のノートPCはCtrlキー＋Fn＋「P」でした。
これで入力待機画面に戻ったと思います。
(myvenv) C:\Users\ユーザー名\myhp> #サーバーが停止した合図
次は簡単なDjangoの説明です。
5. Djangoの中身と設定
5.1 - ページ表示までのDjangoの動きについて
なんとなく表示される だけではつまらないので、
どんな動きで表示されているのかを簡単に説明します。
まずは２章でインストールしたVisual Studio Codeを起動して下さい。
「フォルダーを開く」をクリックし、「myhp」フォルダを開き、
「フォルダーを選択」をクリック下さい。
画面の左側に「myhp」フォルダの中身が表示されたと思います。
まずはDjangoの設定を確認しましょう。
「config」フォルダをクリックし、「settings.py」を選択してください。
※configフォルダの名前はみなさんが自分で設定した名前です。
"""
Django settings for config project.
Generated by 'django-admin startproject' using Django 2.2.15.
For more information on this file, see
https://docs.djangoproject.com/en/2.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.2/ref/settings/
"""
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'hyu()65u87cg+r)t3&ts$v-@z99hbuuvl4l=12as)1@63+ww%2'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'config.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'config.wsgi.application'
# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
ファイル内の「"""」で挟まれた部分はプログラムに関係無いコメントですので今は無視して下さい。
（今後このホームページ上では省いて表示します）
中央より少し上あたりに
ROOT_URLCONF = 'config.urls'
と、書いてあると思います。
WEBページにアクセスがあると、
Djangoはまず「config.urls」を確認します。
上記は
「configフォルダ内のurlsファイルを参照する」という意味です。
configフォルダ内を確認してみると、
確かに「urls.py」というファイルがあります。
それをクリックしてみましょう。（Visual Studio Code上でクリックして下さい）
from django.contrib import admin
from django.urls import path
urlpatterns = [
path('admin/', admin.site.urls),
]
ここでは、
「●●というURLにアクセスがあったら、▲▲のファイルを開く」
という処理が記載されています。
例えば下記部分は、
path('admin/', admin.site.urls),]
「http://127.0.0.1:8000/admin」にアクセスがあったら、admin.site.urlsを開く」
という意味です。
この部分に
path('●●/', ▲▲),
と追加していくことで、読み込むウェブページをDjangoに教えることができます。
5.2 - 初期設定
次の章に移る前にDjangoの設置を簡単にいじっておきましょう。
（Visual Studio Code操作の練習です）
「settings.py」を再度表示して下さい。
一番下のほうに言語と時間の設定項目があります。
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
この部分を下記のように書き換えましょう。
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
言語を日本語、タイムゾーンを東京に設定しました。
書き換え終えたら
Ctrlキー＋「S」で上書き保存しておきましょう。
6. さいごに
次はいよいよ本格的なウェブページの作成に移ります。
とは言っても非常に簡単ですので心配しないで下さい。
では次の章に移動しましょう！
