ここで書くこと：
この記事では「Djangoのインストール→htmlページを表示するまでの手順」について書いています。
また、執筆環境は
OS：macOS Catalina バージョン 10.15.4
Python：3.7.6
Django：3.0.3
となっています。
そもそもDjangoとは何か？
Django(ジャンゴ)はPythonを使ったWebアプリケーションフレームワークの一つで、様々なWebアプリケーションを作成できます。豊富な機能が用意されていることが特徴の一つで、Djangoに含まれているコンポーネントを使用することでWebアプリケーションを開発する際の負担を減らすことができます。例えばユーザ認証や管理者用の画面などはDjangoを使えば実装できます。またWebアプリケーションの処理をPythonで実行させることもできます。
Djangoのインストール
環境等にもよりますが、基本的にはどのOSでも
$ pip install django
でインストールできると思います。詳しいインストールのやり方についてはここでは省略いたしますので、Python3でDjangoをインストールし、HellowWoldを表示する等他の方のページを参考にしていただければと思います。
プロジェクトを作って動かしてみる
インストールが完了したら実際にプロジェクトを作成してみます。任意のディレクトリに移動したら、
$ django-admin startproject <プロジェクト名>
でそのディレクトリにdjangoのプロジェクトを作成できます。なお<プロジェクト名>の部分は好きな名前を設定できますが、文字と数字とアンダーバーしか使えません。
プロジェクトが作成されたらそのプロジェクトに移動し、
$ python manage.py migrate
$ python manage.py runserver
を実行することでサーバが立ち上がると思います。なお一行目の
python manage.py migrate
はマイグレーションファイルの内容をモデルに適用させるためのコマンドで、サーバを立ち上げるコマンドは二行目の
python manage.py runserver
です。
ターミナル上に http://~~~ とアドレスが表示されると思いますので、そのアドレスにブラウザでアクセスして以下のような画像が表示されれば正しく動作しています。
ターミナル上でCtrl+Cを入力するとサーバを止めることができます。
htmlページを表示させる
次に、自分で作ったhtmlページをDjangoを用いて表示させる方法に移ります。
ディレクトリの準備
現在、作成したプロジェクトの構造は
<プロジェクト名>
- db.sqlite3
- manage.py
- <プロジェクト名>
- __init__.py
- asgi.py
- settings.py
- urls.py
- wsgi.py
- __pycashe__
- (.pycファイルが複数)
となっていると思います。この状態で、まずtemplatesとstaticという名前のフォルダを作成してください。templatesフォルダはhtmlファイルを、staticフォルダはcssファイルやjsファイルを入れるためのフォルダです。次にターミナルにて
$ django-admin startapp <アプリ名>
を実行してアプリを作成してください(<アプリ名>の部分は任意の名前で大丈夫です)。この時、<アプリ名>フォルダ内にurls.pyという名前のファイルが作成されていなかったらurls.pyという名前のpythonファイルを手動で作成してください。ディレクトリが
<プロジェクト名>
- db.sqlite3
- manage.py
- <プロジェクト名>
- __init__.py
- asgi.py
- settings.py
- urls.py
- wsgi.py
- __pycashe__
- (.pycファイルが複数)
- <アプリ名>
- __init__.py
- admin.py
- apps.py
- models.py
- tests.py
- urls.py
- views.py
- migrations
- __init__.py
- templates
- static
となっていればOKです。
各ファイルの準備
ディレクトリの準備ができたらhtml, css, jsファイルを置きます。htmlファイルはtemplatesフォルダ内に、css,jsファイルはstaticフォルダ内に配置します。既にファイルを用意している方はそのまま指定の場所に、ファイルを持っていない方は以下のようなindex.htmlという名前のhtmlファイルと、中身は空でいいのでstyle.css及びscript.jsという名前のファイルをそれぞれ作成して同じく指定の場所に作成したファイルを置いてください。
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML</title>
<link rel='stylesheet' type='text/css' href="{% static 'style.css' %}"/>
<script type="text/javascript" src="{% static 'script.js' %}"></script>
</head>
<body>
Hello!!
</body>
</html>
ここで注意点として、
・htmlファイルの一番上に{% load static %}と記述する
・htmlにてcss, jsファイルを読み込む際には、ファイルを{% static '<読み込みたいファイルの名前>' %}"と指定する
ことに注意してください。これはいずれもstaticフォルダ内のファイルにアクセスするための記述です。自分でhtmlファイルを用意した方もこの部分は変更してください。
pythonファイルの編集
ファイルの準備ができたら、各pythonファイルを編集してhtmlファイルを読み込めるように設定していきます。編集するのは
<プロジェクト名>/settings.py
<プロジェクト名>/urls.py
<アプリ名>/urls.py
<アプリ名>/views.py
の4つです。
<プロジェクト名>/settings.py
...
# アクセス制限を無くす為にALLOWED_HOSTSを以下のようにする。
# ただしセキュリティの観点でフルオープンにするのは良くないので、目的に応じてIPアドレスを細かく指定すること。
ALLOWED_HOSTS = ["*"]
...
INSTALLED_APPS = [
...,
'<アプリ名>' # INSTALLED_APPSに'<アプリ名>'を追記する。
]
...
TEMPLATES = [
{
...
# TEMPLATESのDIRSの部分を以下のように変更する。
'DIRS': [
os.path.join(BASE_DIR, 'templates'),
],
...
]
...
# LANGUAGE_CODEとTIME_ZONEを以下のように変更する。
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
...
# 以下を追記
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
<プロジェクト名>/urls.py
from django.contrib import admin
from django.urls import path, include # includeを追記
urlpatterns = [
path('admin/', admin.site.urls),
path(r'', include('<アプリ名>.urls')), # ここを追記
]
<アプリ名>/urls.py
from django.urls import path
from . import views
app_name = '<アプリ名>'
urlpatterns = [
path(r'', views.index, name='index'),
]
<アプリ名>/views.py
from django.shortcuts import render
# Create your views here.
# 以下を追記
def index(req):
return render(req, 'index.html')
htmlを表示させる
以上の準備が完了すれば、あとはサーバを立ち上げることで用意したhtmlファイルを表示できるようになっていると思います。
$ python manage.py runserver
をターミナル上で実行し、表示されたアドレスをブラウザからアクセスしてindex.htmlの内容が表示されていればOKです。
補足
上記の方法でDjangoのサーバを立ち上げた場合、アクセスできるのはサーバを立てた開発マシンのブラウザのみでありスマートフォン等他の端末からはアクセスできません。同一のWi-Fi環境下にある他の端末でもアクセスしたい場合は、
$ python manage.py runserver 0.0.0.0:8000
のように外部からもアクセスできるような状態でサーバを立ち上げた後、開発マシンと同じWi-Fiに接続している他の端末(スマートフォンやPC等)から
http://<開発マシンのIPアドレス>:8000/
にアクセスすることで目的のhtmlを表示できると思います。
参考にさせていただいたページ
Django Girls Tutorial
Python3でDjangoをインストールし、HellowWoldを表示する