PYTHONではじめてのWEBサイトを作成 4

nkika

2024年5月16日 12:45

TEMPLATE設置

次は画面を作っていきます。

HOME
　ヘッダーフッターとメインコンテンツとして位置情報を取得して自分の位置情報を取得して近くのバインミーの店を表示させる
ランキング
　Google Cloud APIで取得したレビューとレビュー数をベースにランキングを表示させるページ
NEW STORE
新規オープンしたお店の紹介
全国バインミーのお店リスト
全国のバインミーのお店のリスト
分析
バインミーショップの都道府県別ヒートマップ
NEWS
SNS等からバインミーのニュースをピックアップ
バインミーとは
バインミーの歴史などを紹介
ABOUT US
私たちについて

template名

home.html
rank.html
new_store.html
analysis.html
news.html
about.html
about_us.html

それぞれのhtmlを
/ローカルの任意のフォルダ/banhmilove/banhmilove_app/templates
ここに作ります。

VScodeで! を入力、Tab キーを押すとHTML構造が瞬時に

VScodeでhtmlファイルを作り、ファイル内に! を入力しTab キーを押すと、以下のような基本的なHTMLのドキュメント構造が自動的に挿入されます。
初心者には驚きです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Djangoでbase.htmlのヘッダーとフッターを継承

各テンプレートのヘッダー部分とフッター部分を共通にしたいので
base.htmlを書きそれを継承します。

home.htmlは以下のようになります。{% block content %}{% endblock %}この中にhomeの中身を記述します。

{% extends 'banhmilove_app/base.html' %}
{% block content %}

ここにhomeのbodyコンテンツを書く

{% endblock %}

BootstrapのCSS、JS、ICONS設定

base.htmlにbootstrapからCSSなどを引っ張ります。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Javascript

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

icons

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

GoogleFontsの設定

base.htmlにGoogleフォントをを引っ張ります。

ZEN KURENAIDOというフォントにしてみました。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet">

{% load static %}も追加

{% load static %} は、Djangoのテンプレートタグをロードするためのタグで、静的ファイル（CSS、JavaScript、画像など）をテンプレート内で扱うために使用されます。

Stylesheetを自分で設定するために

ちなみにbootstrapではなく自分でCSSを調整したい場合はstaticフォルダを作ってその中にCSSやJavascriptを書いていきます。

/ローカルの任意のフォルダ/banhmilove/static

staticフォルダをプロジェクトの配下につくりstyle.cssを作っておきます。
あとでここに画像ファイルも入れます。

そしてbase.htmlはこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}BanhmiLove{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet">
    {% load static %}
    <link rel="stylesheet" href="{% static 'styles.css' %}">
</head>
<body>
    <header>
        <!-- ナビゲーションバー -->
    </header>

    <!-- コンテンツ -->
    <div class="container mt-5">
        {% block content %}
        {% endblock %}
    </div>

    <!-- フッター -->
    <footer>
        
    </footer>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

一旦ここでviewsとurlsを設定します。

Views.pyでリクエスト処理

前回の復習

views.py：リクエストを処理し、レスポンスを返します。テンプレートと連携してHTMLを生成します。

views.py

from django.shortcuts import render
from .models import Store

def home(request):
    return render(request, 'banhmilove_app/home.html')

def rank(request):
    return render(request, 'banhmilove_app/rank.html')

def new_store(request):
    return render(request, 'banhmilove_app/new_store.html')

def analysis(request):
    return render(request, 'banhmilove_app/analysis.html')

def news(request):
    return render(request, 'banhmilove_app/news.html')

def about(request):
    return render(request, 'banhmilove_app/about.html')

def about_us(request):
    return render(request, 'banhmilove_app/about_us.html')

urls.pyでURLを設定

前回の復習

urls.py：URLパターン（テンプレート）と対応するビューをマッピングします。各アプリケーションは自身のurls.pyを持ち、プロジェクト全体のurls.pyでまとめられます。

urls.py

from django.contrib import admin
from django.urls import path
from banhmilove_app import views


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home, name='home'),
    path('rank/', views.rank, name='rank'),
    path('new_store/', views.new_store, name='new_store'),
    path('analysis/', views.analysis, name='analysis'),
    path('news/', views.news, name='news'),
    path('about/', views.about, name='about'),
    path('about_us/', views.about_us, name='about_us'),
    path('store_list/', views.store_list, name='store_list'),
]

デフォルトで管理画面のadminは設定されていますのでそれ以外を追加。

base.htmlにBootstrapのnavbarを設置

ここからお好みのnavbarを選びそのコードをベースに編集していきます。

iconsを使う場合は下記から選びます。

<header>
        <!-- ナビゲーションバー -->
        <nav class="navbar bg-body-tertiary fixed-top">
            <div class="container-fluid">
                <a class="navbar-brand" href="{% url 'home' %}">LOVE<i class="bi bi-suit-heart-fill"></i>BANH MI</a>
                <div class="navbar-text navbar-small-text">
                    バインミーをこよなく愛する人のためのWEBサイト
                </div>
                <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="offcanvasNavbarLabel"><a class="navbar-brand" href="{% url 'home' %}">LOVE<img src="static/images/Banhmiicon.jpg" alt="Banh Mi Icon" class="banhmi-icon">BANH MI</a></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body">
                            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'rank' %}">ランキング</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'new_store' %}">New Store</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'store_list' %}">全国バインミー店リスト</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'analysis' %}">分析</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'news' %}">News</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'about' %}">バインミーとは</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'about_us' %}">About Us</a>
                            </li>
                            </ul>
                            <div class="text-center">
                                <span class="text-small">LOVE<i class="bi bi-suit-heart-fill"></i>BANH MI &copy; 2024</span>
                            </div>
                        </div>
                </div>
            </div>
        </nav>
    </header>

footerも

<!-- フッター -->
    <footer class="bg-dark text-light">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'home' %}">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'rank' %}">ランキング</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'new_store' %}">New Store</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'store_list' %}">全国バインミー店リスト</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'analysis' %}">分析</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'news' %}">News</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'about' %}">バインミーとは</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'about_us' %}">About Us</a>
                        </li>
                    </ul>
                </div>
                <div class="text-center">
                    <span class="text-small">LOVE<i class="bi bi-suit-heart-fill"></i>BANH MI &copy; 2024</span>
                    <br>NO BANH MI NO LIFE
                </div>
            </div>
        </div>
    </footer>

base.htmlで共通ヘッダーとフッターが完成しました。

各テンプレートに継承を設定

全てのテンプレートにbase.htmlを継承していきます。

rank.html

{% extends 'banhmilove_app/base.html' %}

{% block content %}
<div class="container">
    <h1>Ranking Page</h1>
    <!-- ランキングページのコンテンツ -->
    <p>ここにはランキングが入ります。</p>
</div>
{% endblock %}

その他のページも同様に書いていきます。

http://127.0.0.1:8000/でHTMLを表示

ターミナルで

python manage.py runserver

表示されました。

レスポンシブ対応もhome.html はこうなります

home.htmlのヘッダー

まとめ

今回はHTMLtemplateを作成して継承をしました。
BootstrapとGoogleFontsを利用する設定をしました。
Viewsでリクエストをtemplateに返しました。
Urlsを設定しました。
これでhtmlの基本構造ができました！

次回はいよいよGoogle CloudAPIでマップを表示します。

最近の仕事でIoT関連の話が来ています。かなり丸投げ系の相談なのでゼロから調べています。
LoraWANのセンサーデバイスで複数の動く物体をトラッキングしてARグラスで表示したいという相談です。BIGDATAが取れるのでいろいろな可能性がありそうです。
おかげさまで楽しいです！
ここで代表をしています。

この記事が気に入ったらサポートをしてみませんか？