プログラミング > Python >

WebページをDjangoで作る！

2022-12-11

目次

Webページのイメージ

   普段Webページを見つけようと思ったらキーワードを並べて検索する。検索されたWebページ一覧の中から、あるページを選択すればWebページが表示される。これはWebページを見つけようとする「訪問者」視点のイメージ。
   一方で、Webページを設置する「作成者」視点のイメージはフォルダーの階層構造になる。フォルダーの中に1つずつWebページを置き、さらにフォルダーを作ってその中にもWebページを置く。
   「訪問者」の検索によって表示されるのは「作成者」が設置したWebページの一つということになる。
図1. Webページの訪問者と作成者の視点。

DjangoのHello World!

   早速Djangoを使ってWebページをつくる。
   PyCharmでpython3.7のプロジェクト環境を構築し、Djangoパッケージ3.2をインストール。ターミナルから
                    
pip install Django
でインストールも可能。気軽にpythonの環境を作ることができ、コード補完もあるのでPyCharmはオススメ。
   ターミナルで以下のようすると「ProjectName」というファイルが作られる。
                    
django-admin startproject ProjectName
続けて以下のように実行した後、ブラウザのURL欄に「http://127.0.0.1:8000」と入力してアクセスするとDjangoでインストールが成功したというページが表示される。
                    
cd ProjectName
python manage.py runserver
図2. Djangoの導入成功画面。
   プロジェクトの名前は便宜上「ProjectName」としているだけで「ProjectDjango」「TestProject」でも可。
   http://127.0.0.1:8000はローカルネットワークと呼ばれ、その機器だけのネットワークになる。設定次第ではルーターからLANケーブルや無線Wi-Fiで繋がっている機器からアクセスできる。

オリジナルのWebページを設置する

   とりあえず簡単にURLが「http://127.0.0.1:8000/webpage/」となるようにして、そこにアクセスすると「ようこそWebページへ」と中央に表示したい。流れとしては
  1. URLの設置
  2. Webページ (HTMLファイル) の設置 (view関数の使用)
   ターミナルで以下のようにするとProjectName内に「webpage」フォルダーが作成される。
                    
python manage.py startapp webpage
   この「webpage」も任意なので「Top」「HomePage」なども可。
   そしてProjectName/ProjectName/settings.pyのINSTALLED_APPSに'webpage.apps.WebpageConfig',を追記。
コード1.
/ProjectName/ProjectName/settings.py
                    
# Application definition

INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',

        'webpage.apps.WebpageConfig',
]
   1. URLの設置について。ProjectName/ProjectName/urls.pyを以下のようにする。
コード2.
ProjectName/ProjectName/urls.py
                    
from django.contrib import admin
from django.urls import path, include
from django.views.generic import RedirectView


urlpatterns = [
        path('admin/', admin.site.urls),
        path('webpage/', include('webpage.urls')),
        path('', RedirectView.as_view(url='webpage/', permanent=True)),
]
そしてProjectName/webpage内にurls.pyを作成し、以下のように記述。 こうすることでhttp://127.0.0.1:8000/webpage/にアクセスされたらviews.indexにバトンを渡すという仕組みができる。また、ProjectName/ProjectName/urls.pyではhttp://127.0.0.1:8000/にアクセスされたらhttp://127.0.0.1:8000/webpage/にリダイレクトする設定も追加した。http://127.0.0.1:8000/にアクセスしてもエラーとなるからだ。
コード3.
ProjectName/webpage/urls.py
                    
from django.urls import path
from . import views


app_name = 'webpage'
urlpatterns = [
        path('', views.index, name='index'),
]
   2. Webページの設置について。views.indexはPrograming/webpage/views.pyにあるindex関数という意味である。以下のように記述するとWebページとなるindex.htmlにバトンを渡す。
コード4.
Programing/webpage/views.py
                    
from django.shortcuts import render


def index(request):
        return render(request, 'index.html')
   index.htmlについて。まずProjectName/webpage/にtemplatesフォルダーを作成する。そのフォルダーの中にindex.htmlを作成すれば読み込まれる。index.htmlは以下のように記述する。
コード5.
/ProjectName/webpage/templates/index.html
                    
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Webページ</title>
</head>
<body>
<div style="text-align: center; line-height: 100vh;">
	<h1>ようこそWebページへ！</h1>
</div>
</body>
</html>
図3. オリジナルWebページの表示。
   リダイレクトはページ遷移のことで入力されたURLとは違う別ページに移動 (転送) する仕組み。例えば、古く使わなくなった旧URLから新しい新URLへ移動してもらいたい場合などに使う。
   URLを設定するときurls.pyに記入するがファイルの場所が複数あるので気をつけよう。

Django公式ドキュメントの難しさ

   公式にしかも日本語で解説されているドキュメントやチュートリアルがある (たまに訳されていないところもあるが…)。しかし、どうしても受け入れ難い。理由としては今までWebに長く携わってきた人に向けているからで、煩わしい設定をしなくても大丈夫なようにDjangoはサポートしている。そこに初心者が入り込むには別の道がある。
   特に公式ドキュメントではモデルを使ったページの作成から始まる。これはそのサイトで行うことが決まっていて明確な指針がある場合に有効となる。初心者にモデルの設計やその理解から行うのは刻な話である
   さてさて、そんな難しさは放って置いて次へ行こう！