【Bootstrap Studio】作成したHTMLをDjangoに移植：準備編［Python］

2022年4月25日2022年12月9日

URLをコピーしました！

Bootstrap Studio

前回、Bootstrap Studioを使って作成した漢字間違い探しクイズ用のウェブサイトのHTMLを出力しました。

プロジェクトとアプリの作成

ということで新しいDjangoプロジェクトの作成から開始です。

今回プロジェクト名は「findthedifferentkanji」としておきます。

ということでDjangoプロジェクトの作成はこんな感じ。

django-admin startproject findthedifferentkanji

そしてそのままアプリの作成も行います。

今回はインデックスページ入れて4ページのサイトですし、そのなかで「index.html」と「about.html」に関しては表示するだけ、処理のプログラミングが必要なのは「play.html」と「make.html」ということで、全てのページ一つのアプリにまとめてしまいましょう。

そのアプリの名前は「contents」としておきます。

django-admin startapp contents

これでプロジェクトとアプリが作成できました。

findthedifferntkanji > findthedifferntkanji > settings.pyの編集

次に新しいアプリ「contents」を「settings.py」に登録していきます。

場所は findthedifferentkanji > findthedifferentkanji > settings.py です。

変更部分は「INSTALLED_APPS」で、最後に「’contents’,」を追加します。

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

findthedifferentkanji > findthedifferentkanji > urls.pyの編集

次に同じく findthedifferentkanji > findthedifferentkanji 内にある「urls.py」を編集します。

後ほど findthedifferentkanji > contents 内にも「urls.py」を作成しますので、混乱しないように注意してください。

中身としてはこんな感じです。

from django.contrib import admin
from django.urls import path, include

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

最初に説明文が色々と書かれているので、それを全削除しつつ、「from django.urls import path」に「include」を追加します。

また「urlpatterns」に「path(”, include(‘contents.urls’)),」を追加します。

findthedifferentkanji > contents > urls.pyの新規作成と編集

次に先ほどとは異なり、 findthedifferentkanji > contents 内にurls.pyを新規作成します。

そして内容をこんな感じにします。

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('index.html', views.index, name='index'),
    path('play.html', views.play, name='play'),
    path('make.html', views.make, name='make'),
    path('about.html', views.about, name='about'),
]

「urlpatterns」の最初の2行はファイル名が指定なし、もしくは「index.html」が指定された場合は「views.py」の「index関数」を参照するという意味です。

その後は「play.htmlが指定された場合はviews.pyのplay関数」を「make.htmlが指定された場合はviews.pyのmake関数」を、さらに「about.htmlが指定された場合はviews.pyのabout関数」を参照するようにしています。

findthedifferentkanji > contents > templates > contents の新規作成とhtmlファイルの配置

次に findthedifferentkanji > contentsフォルダ内に「templatesフォルダ」を新規作成し、さらにその中に「contentsフォルダ」を新規作成します。

そしてその中にBootstrap Studioで作成したhtmlファイルをコピーします。

ただしこの際、コピーするのはhtmlファイルだけで、assetsフォルダはコピーしませんので注意してください。

findthedifferentkanji > contents > static > contents の新規作成とassetsフォルダの配置

assetsフォルダにはCSSや画像などのファイルが収めされています。

つまりは静的ファイルです。

ということで findthedifferentkanji > contents 内に「staticフォルダ」を作成し、さらに「contentsフォルダ」を作成したのち、その中に「assetsフォルダ」をコピーします。

htmlファイルの修正

次に先ほど「assetsフォルダ」を配置した場所に合わせて、htmlファイル内の静的ファイルの場所を修正していきます。

まず静的ファイルを収めた「staticフォルダ」を使用することをhtmlファイルの最初の方に「{% load static %}」を追加することで宣言します。

場所をもう少し詳しく言うと、3行目にしておきました。

<!DOCTYPE html>
<html lang="ja">
{% load static %}

あとはその「staticフォルダ」内にあるファイルを参照している箇所を修正していきます。

例えばスタイルシートの場合はこんな感じです。

<link rel="stylesheet" href="{% static 'contents/assets/bootstrap/css/bootstrap.min.css' %}">

重要なのは「href=”{% static ‘contents/assets/bootstrap/css/bootstrap.min.css’ %}」の部分で、今回の場合で汎用的に書くと「href=”{% static ‘contents/assets/ファイル名’ %}」といった感じになります。

この修正点が結構大変ですが、全てのhtmlファイルを一つ一つ根気よく修正していきましょう。

findthedifferentkanji > contents > views.pyの編集

次にviews.pyの編集を行なっていきます。

とりあえずは指示されたhtmlファイルを表示するだけのプログラムにしておきましょう。

ということでこんな感じ。

from django.shortcuts import render
from django.http import HttpResponse

def index(request):

    return render(request, 'contents/index.html')

def play(request):

    return render(request, 'contents/play.html')

def make(request):

    return render(request, 'contents/make.html')

def about(request):

    return render(request, 'contents/about.html')

今回は「index.html」、「play.html」、「make.html」、「about.html」を一つのアプリ内で呼び出しますので、4つの関数を作成しています。

そしてそれぞれ呼び出された場合は対応するhtmlファイルを表示するというだけのプログラムになっています。

これでとりあえず外観としては移植完了です。

サーバーを起動し、index.htmlを確認してみるとこんな感じです。