【未完了記事】Djangoチュートリアル- ポートフォリオサイトを作ろう！【Python】

Masato Ishikawa

　こんにちは、まさとです。この記事は、PythonのWebフレームワークDjangoチュートリアルです。これまでDjangoを「使ったことがない」という人や「Djangoの勉強を少ししたけど、もう少しDjangoに慣れたい」というを対象にしています。下の画像のようなポートフォリオサイトを作りながら、Djangoの基本的な内容を学習していけるようになっています。

"""
TODO 成果物画像
"""

　もちろん、このチュートリアルで作成したサイトはポートフォリオとして使っていただいてOKです！

はじめに

　まずはじめに、記事の内容と必要条件について最初に紹介させてもらいます。


記事の内容：
　この記事では、簡単なブログ機能付きのポートフォリオサイトを作っていきます。実際にネット公開、ドメイン設定するところまでカバーしています。題材をポートフォリオサイト作成をにしたのは、皆さんに実際にweb上で公開する過程（デプロイ）まで体験してもらいたかったからです。ポートフォリオサイトであれば、作り方を学習するだけでなくて、作ったあとも活用していけるかと思います。

*ドメインの設定はやるかやらないか任意です。ただし、ドメインを設定する際には、別途お金がかかります。(お名前ドットコムでドメインを購入します。)
必要条件：
・Pythonの初歩的な内容がわかること。関数や変数の定義の仕方がわかれば十分です。デコレータやクラスのプロパティなどはわからなくて大丈夫です。
・環境構築ができること。Python3が使える環境が必要です。わからない方はProgeteにわかりやすい環境構築の方法が乗っているので、そちらを参考に環境構築をしてください。
・エディタをインストールしていること。エディタをまだインストールしていない方は、VScode(無料)などをインストールしてください。
・htmlやcssを見ればわかる(html,cssの解説はしません。)

推奨条件：
・macOSを使っていること。筆者はmacでコードが動くか確認しているので、macを使うことをおすすめします。
・gitをある程度使える
・ターミナルをある程度使える。
・HTML/CSSが使える。
質問等について：
・質問等がある場合には、Twitterに連絡ください。
・基本的には、GoogleでStackoverflowやQiitaといったサイトで情報収集して問題解決することをおすすめします。

　ざっくりした内容や、必要条件については以上のようになってます。記事の中では、Gitやターミナル、エディタ、サーバーなど人によっては使い慣れないものを使っていくかもしれないですが、こういったツールは使ってみると大して難しいものでもないので気構えずに進めていってください！

"""
TODO 下GitHub link
"""

　ソースコードはGitHubにアップしておきますので、必要であれば確認してください。

１章. 仮想環境の構築

　この章では、Pythonのコードを動かしていくための仮想環境を作っていきます。仮想環境は作らなくてもDjangoアプリを開発することは可能ですが、今回は使っているマシンの違いによる不要なエラーを減らすためにも、作るようにしてください。(もちろん、今後も仮想環境を作ってDjangoアプリ開発することをおすすめします。)

この章でやることは、
1-1. コード全体を収めるフォルダの作成
1-2. 仮想環境の構築
の２つです。はじめの章なので作業は少なめです。
ではやっていきましょう。

1-1. コード全体を収めるフォルダの作成

ターミナルを起動して、フォルダを作成します。(ターミナルはmacに初期状態からインストールされているアプリです。)

スクリーンショット 2021-03-29 23.45.10

とりあえず、今回はデスクトップにフォルダを作成していきます。以下の3つのコマンドをターミナルに入力していってください。

cd Desktop
mkdir portfolio_tutorial
cd portfolio_tutorial

cdは場所を移動するコマンド、mkdirはフォルダ(ディレクトリ)を作るコマンドです。

これでデスクトップにportfolio_tutorialという名前のフォルダが作られたはずです。これ以降は、このフォルダに全てのコードや画像を納めていきます。

　フォルダを作ったら、仮想環境を構築していきます。ですが、その前にPythonのバージョンが3であることを確認してください。

python -V

　このコマンドを入力するとpythonのバージョンが出力されます。バージョンが3.7.5や3.8.5など、3から始まっていることを確認してください。もし、2から始まる場合は、使用するバージョンを変更してください。わからない時はprogateやこちらの記事を参考にしてみてください。

1-2. 仮想環境の構築
　では仮想環境を作ります。以下のコマンドを実行してください。

python -m venv venv

下の画像のようにvenvというファイルが作成されていたらOKです。

スクリーンショット 2021-03-30 0.04.38

次は、仮想環境の起動です。以下のコマンドを実行してください。

source venv/bin/activate

これを実行すると、ターミナルの先頭に(venv)と表示されるようになります。(venv)と表示されることは、仮想環境が起動していることを表します。もし、今後この表示がなくなっているようであれば、その都度、上のコマンドを実行して仮想環境を起動してください。

スクリーンショット 2021-03-30 0.07.12

これで１章. 仮想環境の構築の構築は完了です。
正直、この章の環境構築がこの記事の中で一番つまずきやすいポイントだと思います。お疲れ様です！


２章. プロジェクト・モジュールの作成

　この章では、Djangoのインストールとプロジェクトの作成、アプリケーション(モジュール)の追加をしていきます。プロジェクトはDjangoアプリ全体に関わる設定をする本体的な部分で、アプリケーションは本体となるプロジェクトに取り外し可能なモジュール部分です。実際にコードを書いていくとイメージが湧いてくると思います。

　この章でやることは、
2-1. Djangoのインストール
2-2. プロジェクトの作成
2-3. アプリケーションの追加

"""
TODO GitHub link
"""
の３つです。この章からはコードを書いていくので、GitHubにコードを章が終わった時のコードをアップしておきます。必要な場合は使ってください。

2-1. Djangoのインストール

　では、Djangoのインストールから始めていきます。ターミナルで以下のコマンドを入力してください。

pip install django

　pipはPythonで外部のライブラリを使う時に、そのライブラリのバージョンを管理するためのコマンドです。pythonを使っていく方は何度も使うことになると思います。今回はDjangoをインストールするコマンド(pip install)を実行しました。
　次は、現在の仮想環境の状況をテキストファイルに保存します。ターミナルで以下のコマンドを実行してください。

pip freeze > requirements.txt

　このコマンドを実行すると、portfolio_tutorialフォルダ内に、requirements.txtというテキストファイルができているかと思います。pip freezeを使うと、仮想環境にインストールしているライブラリを確認することができます。requirements.txtファイルの中身をみると、

(requirements.txt)
asgiref==3.3.1
Django==3.1.7
pytz==2021.1
sqlparse==0.4.1

　このようなテキストが書かれていると思います。Django以外にも、asgiref, sqlpaseなどのライブラリとそのバージョンが記録されています。(django以外のライブラリは、djangoをインストールすると、自動的にインストールされます。)
　この、requirements.txtを作成し仮想環境の状況を記録する作業は、必ずやらなければいけないわけではないのですが、サーバーで環境構築をしたり、チームで開発する時には、自分のパソコンと同じ状況を作り出すのに、非常に便利になってくるので、ライブラリのインストールを行った時は、先ほどのコマンドを実行して仮想環境の状況を記録するようにしましょう。

2-2. プロジェクトの作成

Djangoのインストールが完了したので、次はプロジェクトを作ります。以下の２つコマンドをportfolio_tutorialフォルダで実行してください。

(ターミナル)
mkdir app
cd app

　mkdirコマンドでappというフォルダを作成し、cdコマンドでappフォルダに移動しました。今作ったappフォルダの中に、Djangoアプリを作成していきます。

　ちなみに現在のportfolio_tutorialiフォルダの中は下ようになっています。（すみませんREADME.mdは無いです。）

スクリーンショット 2021-03-30 3.08.17

　ここまできたら、portfolio_tutorialフォルダをエディタの方で開いておいてください。
　次はプロジェクトを作成します。ターミナルの方で、下のコマンドを入力してください。

(ターミナル)
django-admin startproject portfolio_project .

　エディタの方でappフォルダの中を確認すると、portfolio_projectというフォルダが追加されているはずです。これでプロジェクトが作成できました。

　実は、プロジェクトを作成しただけでDjangoアプリがしっかり動いているか、ブラウザー上で確認することができるようになります。早速確認していきましょう。以下のコマンドを実行してください。

(ターミナル)
python manage.py runserver

　上のコマンドはローカルサーバーを起動するコマンドです。このコマンドを実行すると、ターミナルには以下のように表示されると思います。

スクリーンショット 2021-03-30 3.22.25

　上の画像の2行目のところに　https://127.0.0.1:8000　というURLがあるのでこのURLをブラウザにコピペしましょう。下のようにwebページが表示されます。これでDjangoが上手く動作していることが確認できました。ちなみに、127.0.0.1というのは、ローカルホストのアドレスを表しています。

スクリーンショット 2021-03-30 3.24.43

2-3. アプリケーションの追加

　では、先ほど作成したDjangoプロジェクトにアプリケーションを追加していきます。先ほどのDjangoプロジェクトはDjangoアプリ全体の骨格的な存在で、アプリケーションは追加したい機能をプロジェクトに追加していくためのモジュールのような存在です。

　それではアプリケーションを追加していきます。ただ、その前になんのアプリケーションを追加していくのかを考えましょう。
　今回は、ブログ機能付きのポートフォリオサイトを作っていくので、必要な機能は、大きく分けてポートフォリオ機能とブログ機能の２つに分けることができると思います。
　ポートフォリオ機能用の「portfolio」アプリと、ブログ機能用の「blog」アプリを追加していきましょう。以下のコマンドを実行してください。

(ターミナル appフォルダにて)
python manage.py startapp portfolio

　「python manage.py startapp ~~」というのが、アプリケーションを追加するためのコマンドです。ここで、いったんappフォルダの中身を確認しましょう。portfolioという名前のフォルダが作成されているはずです。このportfolioフォルダにコードを書いていくことで、機能を作っていきます。

　ただ、アプリケーションの追加にはもう１つ必要な作業があります。プロジェクトの環境変数を変更します。app/portfolio_porject/settings.pyを開いて、INSTALLED_APPSという変数(リスト)を探してください。そして、リストの中にアプリケーション名('portfolio')を追加してください。

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
    
   'portfolio',　# <= 追加
]

　では、blogアプリも追加しておきましょう。

(ターミナル appフォルダにて)
python manage.py startapp blog
INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',

   'portfolio',
   'blog', # <= 追加
]　

これで、２つのアプリケーションの追加が完了しました。これで、２章.  プロジェクト・モジュールの作成は終了です。お疲れ様です！
　ちなみに、appフォルダの中身は下の画像のようになってます。

スクリーンショット 2021-03-30 22.44.08

　コードについてはGitHubにアップしおきますので、必要な方は確認ください。

この章のまとめ：
・プロジェクトの作成は「django-admin startproject portfolio_project」
・アプリケーションの追加は「python manage.py startapp (アプリ名)」
・ローカルサーバーの起動は「python manage.py runserver」


3章. ポートフォリオ機能の作成 - その１

　まず、2章で作成した１つ目のportfolioアプリケーションに何を追加するか考えます。portfolioアプリでは、今回作るDjangoアプリの全体の機能を作っていきます。今回は、以下の機能（ページ）を追加していきます。

・ホームページ(簡単な自己紹介・仕事内容・ポートフォリオ)
・履歴書ページ(pdfファイルを出力)

　では、作っていきましょう。ホームページから作成しましょう。

　Djangoでブラウザに何かを表示するためには、３つの作業をします。
3-1. 処理の設定=>views.pyの編集
3-2. urlの設定=>urls.pyの作成・編集
3-3. 表示内容の作成
　この段階では何をいっているのかわからないかと思いますが、コードを書いていけばわかります。

コードはこちら(GitHub)

3-1. 処理の設定=>views.pyの編集

　views.pyでは、urlにアクセスしてきたユーザーに返すレスポンスを指定していきます。レスポンスは、webページに表示されるHTML、PDF、Jsonなどのことです。MVCモデルにおけるC:controllerの役割をになっています。
　ちなみに、指定されたurlを受け取りレスポンスを返すまでの一連の役割を担う関数のことをDjangoではview(ビュー)と言います。

　補足ですが、viewは関数で定義する場合と、クラスで定義する場合があります。関数で定義するviewはfunction-based viewと言い、クラスで定義するviewはclass-based viewと言います。
　function-based viewはカスタマイズ性が高い分、必要なものしか用意されておらず開発の手間がかかる。class-based viewは初めから便利な機能か付いている分、カスタマイズが難しいという違いがあります。
*：MVCモデルについてはこちらのURLの記事を見るとわかりやすいです

　ではコードの方を書いていきましょう。app/portfolio/views.pyをエディタで開いてください。

　最初は、ホームページ(簡単な自己紹介・仕事内容・ポートフォリオ)用のViewを作っていきます。下のコードのように、homeという名前のfunction-based viewを追加してください。

(app/portfolio/views.py)
from django.shortcuts import render

# new =>
def home(request):
   """
   ホームページ用のView
   """
   return render(request, 'home.html')

　今回は、ホームページ用のurlにアクセスしてきたユーザーに、htmlを返すだけの簡単なviewなので、これだけでviewは終わりです。

 　最後の行のrenderは、htmlをレスポンスとして返す時に使用します。第一引数にrequest、第二引数にブラウザに送信するhtmlファイルを指定します。

*requestはユーザーからのリクエストのメタデータを含む変数です。使っていくうちにどういうものなのかわかってくるかと思います。

3-2. urlの設定=>urls.pyの作成・編集

　次は、先ほど作ったhome viewにどのurlを割り当てるのかを決めていきます。urlの割り当てを決めるのにはurls.pyというファイルを使っていきます。
　app/portfolio_project/urls.pyを開いてください。開くと下のようになっているかと思います。

"""portfolio_project URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
   https://docs.djangoproject.com/en/3.1/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),
]

　urlの割り当ては、一番下に定義されている、urlpatternsという変数にpath関数の返り値を追加していくことで行います。
　すでに'admin/'というurlが登録されています。試しにこのurlにアクセスしていきましょう。ちなみに、このアドレスにアクセスすると管理画面を見ることができます。管理画面ではデータベースに登録されているデータなどを確認することができます。ターミナルで以下のコマンドを実行してください。

python manage.py migrate

　このコマンドはデータベースを管理するためのコマンドです。データベースに変更を加える場合に実行します。今回は、データベースにテーブルを作成するために実行しました。(現時点では、とりあえず管理画面を見るために一回このコマンドの実行が必要だという理解で大丈夫です。)

　では早速、http://127.0.0.1:8000/admin/にアクセスしてみましょう！下のように表示されれば成功です。

　「このサイトにアクセスできません」と表示された方はローカルサーバーが起動していることを確認してください。(python manage.py runserver)

スクリーンショット 2021-03-31 12.23.10

　管理画面はblogアプリケーションを作っていくことになるかと思います。
では、管理画面の方はいったんおいておいて、ホームページ用のurlを追加していきましょう。

　まず、app/portfolioフォルダの中に、urls.pyというファイルを作成してください。このapp/portfolio/urls.pyファイルの中にportfolioアプリケーション用のurl設定コードを書いていきます。

　手順としては、➀app/portfolio_project/urls.pyに、app/portfolio/urls.pyのurlを登録する。②app/portfolio/urls.pyにurlの設定を追加していく。という順です。

➀app/portfolio_project/urls.pyに、app/portfolio/urls.pyのurlを登録する。

　最初に、プロジェクトのurl設定に、portfolioアプリケーションのurl設定を登録する必要があります。　
urlpatternsにpath()を追加していきます。下のようにコードを追加してください。

(app/portfolio_project/urls.py)
from django.contrib import admin
from django.urls import path, include # <= new

urlpatterns = [
   path('admin/', admin.site.urls),
   path('', include('portfolio.urls')), # <= new
]

　path('', include('portfolio.urls'))をurlpatternsに追加しました。ここではincludeという関数を使用しています。

path('', include('portfolio.urls'))

　上のコードの意味としては、http://127.0.0.1:8000というurlにアクセスがあったときは、app/portfolio.urls.pyファイルのurlpatterns変数を参照するという意味です。これで、プロジェクトの方にportfolioアプリケーションのurlpatternsを認識させることができます。

②app/portfolio/urls.pyにurlの設定を追加していく。

　次は、app/portfolio/urls.pyファイルのコードを書いていきましょう。このファイルには、先ほどのプロジェクトのurls.pyと同じようにurlpatternsを定義していきます。下のコードを追加してください。

from django.urls import path
from . import views


urlpatterns = [
   path('', views.home, name='home'),
]

　2行目のところで、この章の最初に編集したviews.pyをインポートしてきます。

from . import views

　そして、urlpatternsにpath関数の返り値を追加しています。

path('', views.home, name='home'),

　pathの第一引数には、割り当てるurl(この場合は、空なのでhttp://127.0.0.1:8000が割り当てられます。)、第二引数にはurlによるリクエストを処理するview、第三引数はこのurlパターンの名前を入れます。

　これで、urlの設定は終了です。http://127.0.0.1:8000にアクセスしてみましょう。TemplateDoesNotExist at /と表示されていればOKです。

スクリーンショット 2021-03-31 12.54.25


3-3. 表示内容の作成

　それでは、ホームページ用のhtmlファイル(テンプレート )を作りましょう。appフォルダの中にtemplatesという名前のフォルダを作ってください。また、そのtemplatesフォルダの中にhome.htmlという名前のhtmlファイルを作成してください。

スクリーンショット 2021-03-31 12.59.17

　次に、今作ったtemplates/home.htmlファイルをhttp://127.0.0.1:8000に表示されるように、templatesフォルダをDjangoに認識させます。

　app/portfolio_tutorial/settings.pyを開いて、TEMPLATESという変数を探してください。(60行目あたりにあります。)

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': []を'DIRS': ['templates']と変更してください。

TEMPLATES = [
   {
       'BACKEND': 'django.template.backends.django.DjangoTemplates',
       'DIRS': ['templates'], # <= new
       '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フォルダがDjangoに認識されるようになります。ここで、試しにhttp://127.0.0.1:8000/にアクセスしてみてください。真っ白の画面が表示されればOKです。(home.htmlに何もコードを書いていないので真っ白の画面が表示されます。)

　最後にhome.htmlを簡単に作っていきましょう。

この章では、home.htmlは簡単に書くだけにとどめておいて、次の章でcssを含めてしっかりしたものを作っていきます。

　以下のhtmlコードをhome.htmlファイルに追加してください。(必要な部分はご自身のポートフォリオように編集してください。もちろんこのまま使っていただいても結構です。)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta property="og:url" content="" /> 
   <meta property="og:title" content="MASATO Portfolio" /> 
   <meta property="og:description" content="まさとのポートフォリオサイト" />
   <meta property="og:image" content="https://https://www.jp-funda.com/static/images/jp_funda_ogp.jpeg"/> 
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@xFzdiHLW63ogLYr">
   <!-- Bootstrap Core CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
   <title>Portfolio</title>
</head>

<section class="top">
   <h1>まさとのポートフォリオ</h1>
</section>

<body>
   
</body>
</html>

　headの部分では、リンクをtwitterやlineなどでシェアされたときの設定、タブのタイトルを指定しています。htmlについての説明はしないので、わからない部分はググってください。

<section class="top">
   <h1>まさとのポートフォリオ</h1>
</section>

この部分のみがブラウザ上に表示されます。試しに、http://127.0.0.1:8000/　にアクセスしてみると、下のように表示されているかと思います。

スクリーンショット 2021-03-31 21.54.07

　以上で３章は終了です。お疲れ様です！

　この章では、viewの作成・urlpatternsの追加・template(htmlファイル)の作成、の大きく分けて３つの作業をしました。この３つの作業がDjangoの基本的な作業と言ってもいいと思います。

コードはこちら(GitHub)


4章. ポートフォリオ機能の作成 - その2

　この章では、ホームページの見た目を作っていきます。HTMLとCSSにそこまで興味がない方は、HTMLとCSSはコピペして、コードをザーッとみるだけでもOKです。

　やることは、以下の３つです。
4-1. base.htmlの作成
4-2. home.htmlの作り込み
4-3. cssの作成
　このチュートリアルでは、ホームページ以外にも複数のページを作っていきます。base.htmlには複数のページに共通するhtml(head, navbarなど)を作り、そのぞれのページに応じてその子要素となるhtmlを組み込んでいきます。

4-1. base.htmlの作成

　それでは、base.htmlから作っていきます。app/templatesフォルダの中に、base.htmlという名前のファイルを作成してください。base.htmlには、複数のページで共通するhtmlを書いていきます。ここで、３章で作ったhome.htmlファイルをもう一度見てみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta property="og:url" content="" /> 
   <meta property="og:title" content="MASATO Portfolio" /> 
   <meta property="og:description" content="まさとのポートフォリオサイト" />
   <meta property="og:image" content="https://https://www.jp-funda.com/static/images/jp_funda_ogp.jpeg"/> 
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@xFzdiHLW63ogLYr">
   <!-- Bootstrap Core CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
   <title>Portfolio</title>
</head>

# 下のsectionのみがhome.htmlの独自の部分
<section class="top">
   <h1>まさとのポートフォリオ</h1>
</section>

<body>
   
</body>
</html>

　このコードの中では、headタグの中身を複数のページに共通して使えます。したがって、(section class="top")の部分のみがhome.html独自のコードです。

# ここだけhome.html独自
<section class="top">
   <h1>まさとのポートフォリオ</h1>
</section>

　上の、sectionタグ以外のコードは全て、home.htmlファイルからbase.htmlファイルに移動していきます。

(base.html)
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta property="og:url" content="" /> 
   <meta property="og:title" content="MASATO Portfolio" /> 
   <meta property="og:description" content="まさとのポートフォリオサイト" />
   <meta property="og:image" content="https://https://www.jp-funda.com/static/images/jp_funda_ogp.jpeg"/> 
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@xFzdiHLW63ogLYr">
   <!-- Bootstrap Core CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
   <title>Portfolio</title>
</head>

<body>
   
</body>
</html>
(home.html)
<section class="top">
   <h1>まさとのポートフォリオ</h1>
</section>

　これで、home.htmlからbase.htmlに全ページに共通する部分を移動することができました。ただ、これだけだとホームページのurl(http://127.0.0.1:8000/)にアクセスしても、base.htmlの部分のhtmlコードは読み込まれず、home.htmlファイルの三行のコードだけしか読み込まれません。なので、次はhome.htmlからbase.htmlを読み込んであげます。

　home.htmlから、base.htmlを読み込むためには、「extends」、「block」というhtmlファイル用のDjangoタグを使っていきます。(わかり難いかと思いますが、使ってみるとわかるかと思います。)

　base.htmlファイルとhome.htmlファイルに以下のように、「extends」、「block」タグを追加してください。

(base.html)
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta property="og:url" content="" /> 
   <meta property="og:title" content="MASATO Portfolio" /> 
   <meta property="og:description" content="まさとのポートフォリオサイト" />
   <meta property="og:image" content="https://https://www.jp-funda.com/static/images/jp_funda_ogp.jpeg"/> 
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@xFzdiHLW63ogLYr">
   <!-- Bootstrap Core CSS -->
   <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <title>Portfolio</title>
</head>

<!-- new -->
{% block content %}
{% endblock content %}
<!-- new -->

<body>
   
</body>
</html>
(home.html)
{% extends 'base.html' %}<!-- new -->

{% block content %}<!-- new -->
<section class="top">
   <h1>まさとのポートフォリオ</h1>
</section>
{% endblock content %}<!-- new -->

　まず、home.htmlのはじめの行に追加した{% extends 'base.html' %}というタグをみてください。このタグは、base.htmlファイルを親テンプレート として読み込むという意味です(home.htmlは子テンプレート )。pythonでいう、classの継承のようなものです。
　そして、子テンプレート であるhome.htmlファイルの中の{% block content %}タグと{% endblock content %}タグは、親テンプレート の{% block content %}タグと{% endblock content %}タグの間に、home.htmlファイルの{% block content %}タグと{% endblock content %}タグで挟まれた部分を代入するという意味を持ちます。
　このように、classの継承に似た方法でhome.htmlからbase.htmlを読み込んでいます。

　以上で、base.htmlの読み込みはOKです。次は、base.htmlをもう少し作り込んでいきましょう。複数のwebページに共通する部分としては、先ほどbase.htmlファイルに追加したhead部分以外にも、ヘッダーやフッターもあります。base.htmlにヘッダーとフッターを追加していきましょう。(この作業は、htmlコードを追加するだけなので、特に説明はしません。ちなみに、bootstrapを使っています。)

(base.html)
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta property="og:url" content="" />
   <meta property="og:title" content="MASATO Portfolio" />
   <meta property="og:description" content="まさとのポートフォリオサイト" />
   <meta property="og:image" content="https://https://www.jp-funda.com/static/images/jp_funda_ogp.jpeg" />
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@xFzdiHLW63ogLYr">
   <!-- Bootstrap Core CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
       integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
   <title>Portfolio</title>
</head>

<nav class="navbar navbar-dark navbar-expand-lg navbar-light bg-dark">
   <div class="container-fluid">
       <a class="navbar-brand" href="#">Masato's Portfolio</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
           aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
           <div class="navbar-nav">
               <a class="nav-link active" aria-current="page" href="#">Home</a>
               <a class="nav-link" href="#">Resume</a>
               <a class="nav-link" href="#">Blog</a>
           </div>
       </div>
   </div>
</nav>

{% block content %}
{% endblock content %}

<footer class="mt-auto text-white-50 bg-dark">
   <p class="text-center">Copyright @Masato portfolio 2021</p>
</footer>

</body>
</html>

　フッターとヘッダーのコードを追加しました。これで、base.htmlは完了です。ここでいったん、ホームーページの見た目を確認してみましょう。http://127.0.0.1:8000/　のurlにアクセスしてください。

スクリーンショット 2021-04-03 16.30.38

　このように表示されていればOKです。base.htmlに追加した、ヘッダーとフッターがしっかり表示されています。

　ここからは、home.htmlにコードを追加していきます。ポートフォリオのホームページに表示する内容としては、自己紹介・仕事内容・制作実績・コンタクトがあれば十分だと思います。home.htmlのblock contetnタグの内部を編集して、ホームページを完成させましょう。










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