自作ページを表示するまでの手順 – PART1

ここでは作成したDjangoプロジェクトとDjangoアプリケーションへ記述を加え、自らが作成したページをWebブラウザ上で表示するまでの手順を記載します。カスタマイズすることを前提としているため、必要最低限の手順ではありませんが、その分さまざまな場面で活用することができます。
ここでは目標として次のことを行えるようにします。

  • トップページhttp://localhost:8000/へアクセスした時に、サンプルページではなく独自のページを表示する

urls.pyの編集

まずはDjangoプロジェクトを作成した時に生成されたC:¥python¥sports¥sports配下のurls.pyを開きます。



    
 
  • c:
 
      
  
    • python
   
        
    
      • sports
     
          
      
        • event
       
            
        
          • migrations
         
              
          
            • __init__.py
              • 
         
            
        
            • 
        
          • __init__.py
            • 
        
          • admin.py
            • 
        
          • apps.py
            • 
        
          • models.py
            • 
        
          • tests.py
            • 
        
          • views.py
            • 
       
           
      
          • 
     
         
     
          
      
        • sports
       
            
        
          • __init__.py
            • 
        
          • settings.py
            • 
        
          • urls.py
            • 
        
          • wsgi.py
            • 
       
           
      
          • 
      
        • manage.py
          • 
     
         
    
        • 
   
       
  
      • 
 
     
 
    •

Djangoのバージョンによっても異なりますが、おおよそ以下のような内容で生成されています。

"""sports URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path

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

このファイルに対し、以下のように追加を行います。

"""sports URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path

from sports import views

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

pathの第一引数にはURLパターンを、第二引数にはURLパターンに対するビューを、name引数にはこのURLパスに対する名称を指定します。このurls.pyは最上位のURL定義であるため、この場合の空の文字列はトップページを表します。それに対応するビューはsports.viewsモジュールのindex関数を指定していますが、まだ存在していないのでこれから作成します。

views.pyの編集

次はC:¥python¥sports¥sports下へviews.pyを作成します。一から記述するため、すでに存在しているC:¥python¥sports¥event下のviews.pyをコピーしてきても構いません。



    
 
  • c:
 
      
  
    • python
   
        
    
      • sports
     
          
      
        • event
       
            
        
          • migrations
         
              
          
            • __init__.py
              • 
         
            
        
            • 
        
          • __init__.py
            • 
        
          • admin.py
            • 
        
          • apps.py
            • 
        
          • models.py
            • 
        
          • tests.py
            • 
        
          • views.py
            • 
       
           
      
          • 
     
         
     
          
      
        • sports
       
            
        
          • __init__.py
            • 
        
          • settings.py
            • 
        
          • urls.py
            • 
        
          • wsgi.py
            • 
        
          • views.py
            • 
       
           
      
          • 
      
        • manage.py
          • 
     
         
    
        • 
   
       
  
      • 
 
     
 
    •

以下のように記述してください。関数名はindexで、引数を１つ受け取ります。戻り値としてrenderの第一引数にそのままrequestを、第二引数にテンプレートファイル名を、第三引数にコンテキスト（ここでは空のディクショナリ）を指定します。views.pyと同様、テンプレートファイルindex.htmlはまだ存在していないのでこれから作成します。

from django.shortcuts import render

def index(request):
    return render(request, 'sports/index.html', {})

テンプレートファイルの追加

次はC:¥python¥sports下へテンプレートファイルを配置するディレクトリ、templatesを作成し、その下にindex.htmlを作成します（間にsportsディレクトリを挟みます）。



    
 
  • c:
 
      
  
    • python
   
        
    
      • sports
     
          
      
        • event
       
            
        
          • migrations
         
              
          
            • __init__.py
              • 
         
            
        
            • 
        
          • __init__.py
            • 
        
          • admin.py
            • 
        
          • apps.py
            • 
        
          • models.py
            • 
        
          • tests.py
            • 
        
          • views.py
            • 
       
           
      
          • 
     
         
     
          
      
        • sports
       
            
        
          • __init__.py
            • 
        
          • settings.py
            • 
        
          • urls.py
            • 
        
          • wsgi.py
            • 
        
          • views.py
            • 
       
           
      
          • 
      
        • templates
       
            
        
          • sports
         
              
          
            • index.html
              • 
         
            
        
            • 
       
          
      
          • 
      
        • manage.py
          • 
     
         
    
        • 
   
       
  
      • 
 
     
 
    •

テンプレートファイルへ記述する内容はHTMLであれば何でも構いません。ここでは例として次のような内容で作成を行います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>トップページ</title>
</head>
<body>
  メニュー
  <ul>
    <li>リンクA</li>
    <li>リンクB</li>
    <li>リンクC</li>
  </ul>
</body>
</html>

Djangoプロジェクトディレクトリ配下（C:¥python¥sports）へテンプレートファイルディレクトリ（templates）およびテンプレートファイル（index.html）を作成したため、このままではDjangoプロジェクト上で認識されません。最後にそのための設定を追加します。

settings.pyの編集

最後はC:¥python¥sports¥sports下のsettings.pyを編集します。その目的は、テンプレートファイルディレクトリを認識させ、その配下へ配置されているテンプレートファイルをDjangoプロジェクト上で使用できるようにします。



    
 
  • c:
 
      
  
    • python
   
        
    
      • sports
     
          
      
        • event
       
            
        
          • migrations
         
              
          
            • __init__.py
              • 
         
            
        
            • 
        
          • __init__.py
            • 
        
          • admin.py
            • 
        
          • apps.py
            • 
        
          • models.py
            • 
        
          • tests.py
            • 
        
          • views.py
            • 
       
           
      
          • 
     
         
     
          
      
        • sports
       
            
        
          • __init__.py
            • 
        
          • settings.py
            • 
        
          • urls.py
            • 
        
          • wsgi.py
            • 
        
          • views.py
            • 
       
           
      
          • 
      
        • templates
       
            
        
          • sports
         
              
          
            • index.html
              • 
         
            
        
            • 
       
          
      
          • 
      
        • manage.py
          • 
     
         
    
        • 
   
       
  
      • 
 
     
 
    •

Djangoのバージョンによっても異なりますが、おおよそ以下のような内容で生成されています（ファイル後半部分は省略しています）。ファイルを開いたのち、TEMPLATESで検索してください（ここでは54行目）。

"""
Django settings for sports project.

Generated by 'django-admin startproject' using Django 2.0.1.

For more information on this file, see

https://docs.djangoproject.com/en/2.0/topics/settings/
docs.djangoproject.com


For the full list of settings and their values, see

https://docs.djangoproject.com/en/2.0/ref/settings/
docs.djangoproject.com

"""

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.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'h@khrq3*n2$o9ckmngs0m+e3x9qim*8#i+_0*&k8h*g(%ugjf+'

# 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 = 'sports.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',
            ],
        },
    },
]

# 以下略

TEMPLATESへ記述されている設定が、テンプレートファイルディレクトリに関するものです。このDIRSを次のように変更してください。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        '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',
            ],
        },
    },
]

BASE_DIRは同ファイルの上部で設定されている値です（ここでは16行目で設定されています、1行目から表示しているsettings.pyの方を見れば確認することができます）。BASE_DIRはc:¥python¥sportsとなるため、上記設定で先ほど作成したテンプレートファイルディレクトリを指し示しめすことになります。

Webブラウザで表示確認

すべての設定ができましたので、Webブラウザで表示を確認してみましょう。コマンドプロンプトでmanage.pyがあるディレクトリへ移動し、テストサーバーを起動します。

python manage.py runserver

待ち受け状態となったことを確認したら、Webブラウザで下記URLを入力してトップページを開きます。例のような画面が表示されれば問題ありません。

http://127.0.0.1:8000/
127.0.0.1

なお、urls.py、views.py、テンプレートファイルディレクトリなどの設定を変更すれば、必ずしもこのページで示したようなディレクトリへ配置しなくても構いません。たとえばトップページのviews.pyは別途Djangoアプリケーションを作成してそこに配置する（たとえばtopという名前で作成し、その配下へviews.pyを作成する）、テンプレートファイルディレクトリはDjangoプロジェクトと同じ階層のディレクトリ（たとえばC:¥python）に配置するなど、開発者の設計方針によって容易に変更することが可能です。