見出し画像

Django4の説明2：photoアプリの構成

green_blue_sky

0．概要図

概要図

1．テンプレート概要

1.1．ベーステンプレート(base.html)

以下は、このテンプレートの詳細な説明です:

  1. {% load static %}:

    • {% load static %} テンプレートタグは、静的ファイル（CSS、JavaScript、画像など）のURLを生成するために使用します。このタグはDjangoの静的ファイルを使うために必要です。

  2. <html lang="ja">:

    • HTMLドキュメントの開始を示しています。lang 属性は日本語を指定しています。

  3. <meta> タグ:

    • ページのメタ情報を設定するための <meta> タグが含まれています。charset 属性は文字コードを設定し、viewport 属性はビューポートの設定を指定します。name 属性を持つ <meta> タグはページの説明や著者情報を含みます。

  4. <title>:

    • ページのタイトルを設定しています。
      ただし、{% block title %}{% endblock %} の形式で、テンプレートを拡張する際に具体的なタイトルが挿入されます。

  5. <link> タグ:

    • BootstrapのCSSスタイルシートを読み込むための <link> タグが含まれています。integrity 属性を使用して、ファイルの整合性を確認し、クロスオリジンリソースに対するセキュリティを強化しています。

  6. ページヘッダー:

    • ページのヘッダーセクションが始まります。ナビゲーションバーなどのコンテンツがこのセクションに含まれます。

  7. ナビゲーションバー:

    • ナビゲーションバーは、ページのトップに固定されており、サイトのロゴやメニュー項目が含まれています。リンクテキストやURLはDjangoテンプレートタグを使用して動的に生成されています。

  8. メインコンテンツ:

    • ページのメインコンテンツが始まります。
      このセクションには {% block contents %}{% endblock %} の形式で、各ページのテンプレートで具体的なコンテンツが埋め込まれます。

  9. フッター:

    • ページのフッターセクションで、ページの最下部に表示される情報が含まれます。フッターテキストは自由にカスタマイズできます。

  10. <script> タグ:

    • BootstrapのJavaScriptファイルを読み込むための <script> タグが含まれています。これにより、BootstrapのJavaScriptコンポーネントが有効になります。

このテンプレートは、共通のページ要素（ヘッダー、ナビゲーション、フッターなど）を提供し、個別のページテンプレートで具体的なコンテンツを埋め込むためのフレームワークを提供します。テンプレート内でDjangoのテンプレートタグを使用して、動的なコンテンツを生成します。

1.2．タイトルのテンプレート(photos_title.html)

以下は、このコードの詳細な説明です。

  1. <section> 要素:

    • ウェブページ内でセクションを表す要素です。py-5 および text-center のクラスは、ページの外観をスタイル付けるために使用されています。

  2. <div class="row py-lg-5">:

    • グリッドレイアウトを使用して、コンテンツを整列させるための <div> 要素です。py-lg-5 クラスは、上下のパディングを設定し、ページの外観を調整します。

  3. タイトルと本文:

    • <h1> 要素はページのタイトルとして使用され、"Photo Gallery" というテキストを表示します。

    • <p> 要素は説明文として使用され、"コメントを見て写真に描かれた世界に思いを馳せましょう。素敵な写真とコメントをお待ちしています!" というテキストを表示します。

  4. ナビゲーションボタン:

    • {% if user.is_authenticated %} から {% else %} までのコードブロックは、ユーザーの認証状態に応じて異なるナビゲーションボタンを表示します。

    • ユーザーがログインしている場合（user.is_authenticated が True の場合）:

      • "投稿する" ボタン（<a> 要素）はユーザーが写真を投稿するページにリンクします。

      • "ログアウト" ボタン（<a> 要素）はユーザーをログアウトするリンクです。リンク先は {% url 'accounts:logout' %} で定義されています。

    • ユーザーがログインしていない場合:

      • "今すぐサインアップ" ボタン（<a> 要素）は新しいユーザーアカウントを作成するページにリンクします。

      • "登録済みの方はログイン" ボタン（<a> 要素）は既存のユーザーがログインするページにリンクします。

このコードは、ウェブページのヘッダーセクションを表示し、ユーザーの認証状態に応じて異なるアクションへのナビゲーションボタンを提供します。これにより、ユーザーに対して適切な操作を促すページの一部として使用できます。

1.3．投稿一覧テンプレート(photos_list.html)

このHTMLコードは、Bootstrapフレームワークを使用してスタイリングされたウェブページの一部分を表しています。以下は、このコードの詳細な説明です:

  1. <div class="album py-5 bg-light">:

    • album クラスが指定された <div> 要素で、ウェブページの一部分を表します。py-5 クラスは上下のパディング（余白）を追加し、bg-light クラスは背景色を明るい色に設定します。

  2. <div class="container">:

    • Bootstrapのコンテナクラスを持つ <div> 要素で、ウェブページ内のコンテンツが配置される領域を指定します。

  3. <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">:

    • グリッドシステムを使用して行を作成するための <div> 要素です。この行は、異なる画面幅で異なる列数を持つことができます。row-cols-1 はスマートフォン向けの1列、row-cols-sm-2 はタブレット向けの2列、row-cols-md-3 はデスクトップ向けの3列を指定しています。g-3 は列間の余白を指定しています。

  4. <div class="col">:

    • 列要素を定義するための <div> 要素で、各列内にコンテンツを配置します。

  5. <div class="card shadow-sm">:

    • Bootstrapのカード要素で、影の効果を持つカードを作成します。

  6. <svg class="bd-placeholder-img card-img-top" ...>:

    • カードの上部に配置された画像を描画する <svg> 要素です。この画像はプレースホルダーのようなもので、実際の画像はここに設定される可能性があります。

  7. <div class="card-body">:

    • カードの本文を定義するための <div> 要素です。ここにテキストとボタンなどが配置されます。

  8. <p class="card-text">:

    • カード内のテキストコンテンツを表示する <p> 要素で、ここではテキストが記述されています。

  9. <div class="d-flex justify-content-between align-items-center">:

    • ボタンとユーザー名を横並びに表示するための <div> 要素です。d-flex クラスはフレックスボックスを使用して要素を配置し、justify-content-between クラスは要素を左右に均等に配置し、align-items-center クラスは要素を垂直方向に中央に配置します。

  10. ボタン要素:

    • "View" と "Edit" という2つのボタンが表示されており、それぞれリンクやアクションに関連付けられている可能性があります。

  11. <small class="text-muted">UserName</small>:

    • ユーザー名を表示するための <small> 要素で、text-muted クラスはテキストを灰色に変更します。

このコードは、Bootstrapを使用して、カードスタイルのコンテンツをグリッド内に配置する基本的なページ構造を定義しています。この構造は、ウェブページ内の複数の要素を整然と配置するのに役立ちます。
具体的なデータやリンクは、実際のウェブページで提供されることが期待されています。

1.4．トップページのテンプレート(index.html)

Djangoのテンプレートシステムを使用して、他のテンプレートを拡張し、ページの内容を定義するためのものです。以下は、このソースコードの詳細な説明です:

  1. {% extends 'base.html' %}:

    • この行は、このテンプレートが 'base.html' というベーステンプレートを拡張することを示しています。ベーステンプレートは通常、共通のページ構造やレイアウトを提供し、テンプレートの拡張によってページ固有のコンテンツを挿入できるようにします。

  2. {% block title %}Photo Gallery{% endblock %}:

    • ページのタイトルを設定するためのブロックが定義されています。このブロックは、ベーステンプレート 'base.html' 内の同じ名前のブロックと関連付けられ、内容を上書きします。ここでは "Photo Gallery" というタイトルが設定されています。

  3. {% block contents %} と {% endblock %}:

    • ページのコンテンツを定義するためのブロックが開始と終了されています。このブロック内にページ固有のコンテンツを追加できます。

  4. {% include "photos_title.html" %}:

    • "photos_title.html" という別のテンプレートをインクルードして、ページ内のコンテンツを組み込んでいます。これは、共通のタイトルセクションを提供するために使用されます。

  5. {% include "photos_list.html" %}:

    • "photos_list.html" という別のテンプレートもインクルードして、ページ内のコンテンツを組み込んでいます。これは、写真の一覧を表示するために使用されます。

このソースコードは、テンプレートの継承と組み込みを使用して、共通のレイアウトとデザインを提供するベーステンプレートに、個別のページコンテンツを挿入する方法を示しています。これにより、ページ間でコードの再利用が容易になり、一貫性のあるデザインが維持されます。

2．URLconfの編集

2.1．プロジェクト単位のURL

前回の3.1．で説明済み

2.2．アプリ単位のURL

以下は、このコードの詳細な説明です:

  1. from django.urls import path:

    • DjangoのURL設定を行うために必要な path 関数をインポートしています。

  2. from . import views:

    • カレントディレクトリ（現在のモジュール）から views モジュールをインポートしています。このモジュールには、URLパターンに関連付けるビュー（ウェブページを表示するクラスや関数）が定義されています。

  3. app_name = 'photo':

    • app_name 変数は、このアプリケーションの名前空間を定義します。これにより、URLパターンの名前にプレフィックスが付けられ、異なるアプリケーション間で名前の競合を避けるのに役立ちます。

  4. urlpatterns リスト:

    • このリストには、URLパターンの設定が含まれています。

  5. path('', views.IndexView.as_view(), name='index'):

    • ルートURLパス（'/'）に対応するURLパターンを定義しています。これはアプリケーションのホームページに対応します。

    • views.IndexView.as_view() は、このURLにアクセスされた際に表示されるビューを指定しています。.as_view() メソッドはクラスベースのビューをビュー関数に変換するために使用されます。IndexView は、views モジュール内で定義されているビュークラスです。

    • name='index' は、このURLパターンに名前を付けています。この名前を使用して、他の部分でこのURLパターンを参照できます。

このコードは、特定のURLパス（ルートURL）にアクセスしたときに、IndexView というビューを表示し、そのURLパターンに名前 'index' を付けています。この名前を使用して、他の場所で同じURLパターンを参照できます。

3．ビューの作成

3.1．views.py

ビューはユーザーのリクエストに応じて特定のテンプレートをレンダリングし、クライアントにレスポンスを提供する役割を果たします。以下は、このソースコードの詳細な説明です：

  1. from django.shortcuts import render:

    • render 関数をインポートしています。これは、ビュー関数内でテンプレートをレンダリングし、HTTPレスポンスをクライアントに返すのに使用されます。

  2. from django.views.generic import TemplateView:

    • django.views.generic モジュールから TemplateView クラスをインポートしています。TemplateView は、テンプレートを表示するためのジェネリックなビュークラスです。ジェネリックビューは、一般的なタスクを簡素化し、再利用可能なコードを提供します。

  3. class IndexView(TemplateView)::

    • IndexView という新しいクラスを定義しています。このクラスは TemplateView クラスを継承しています。

  4. '''トップページのビュー''':

    • このクラスには、コメントが含まれており、このビューがトップページの表示に使用されることを説明しています。

  5. template_name ='index.html':

    • template_name 属性を設定し、このビューがレンダリングするテンプレートの名前を指定しています。この場合、テンプレートの名前は 'index.html' です。このテンプレートはトップページのHTMLコンテンツを定義します。

このビュークラスは、TemplateView クラスを継承しており、指定されたテンプレートをレンダリングして、トップページの内容を表示します。トップページへのアクセス時に、このビューが呼び出され、指定されたテンプレートがクライアントに送信されて表示されます。このビューは一般的なHTMLコンテンツを提供するために使用されます。

4．まとめ

書式を覚えれば、Djangoはうまく活用できます。
自己流などでやれば複雑化し、不具合が生じますその点を注意して学習しましょう


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