チュートリアル3: templatesとstatic

本チュートリアルは前回のチュートリアル2から続いています。

4.Bootstrapを使用できるようにして、基本的なフロントエンドの機能を扱う

前回までのチュートリアルまでで基本的な開発実装の準備は完了しました。
ここからは、static関係のファイルやフロントエンドのtemplatesに関する部分を少しみていきましょう。

まずは、bootstrapをプロジェクトに導入していきたいと思います。
bootstrapは様々なWebサービスで幅広く使われているcssやjsなどがhtml内の要素やクラス名などで使用できるものです。
かいつまんで説明すると、CSSを自ら全て書かなくても簡単にUIのデザインを行なってくれる便利なファイルです。

まずはbootstrap4の公式サイトからbootstrap4の素材をダウンロードしましょう。

一番上のCompiled CSS and JSの欄でDownloadをクリックします。

ダウンロードが完了したらzipを解凍しましょう。

次に、my_portfolioプロジェクトに戻ります。
プロジェクトディレクトリ直下でstaticという名前でフォルダを作成します。
そして、staticフォルダの中でassetsという名前でフォルダを作成しましょう。
そのassetsの中にcssjsというフォルダを作ります。
また今回は使用しませんが、imgというフォルダも作っておきましょう。

ターミナル

mkdir static
cd static
mkdir assets
cd assets

mkdir css
mkdir js
mkdir img

次に、先ほどダウンロードしたフォルダから
cssは cssフォルダ内のbootstrap.css
jsはjsフォルダ内のbootstrap.min.js
my_portfolioの static/assets内の
cssはcssフォルダの中に
jsはjsフォルダの中にペーストしましょう。

これでファイル関係はOKです。

次に、base.htmlを作成していきます。

Djangoには、htmlファイルを他のhtmlファイルで読み込んだり、内容を継承したりする機能があります。

ここではextendsという機能を使って、index.htmlでbase.htmlを継承していきたいと思いまうs。

まずは、base.htmlを記述していきましょう。

ターミナル

cd templates
touch base.html

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet" />
</head>
<body>
{% block main %}{% endblock %}
</body>
<script src="{% static 'assets/js/bootstrap.min.js' %}" type="text/javascript"></script>
</html>

まず見るポイントは、一番上の {% load static %}という部分です。
これは、このhtmlファイルにstaticを読み込んでいるという意味です。
これにより、8行目で、bootstrap.cssをstaticフォルダから読み込むことができています。
こちらの機能ですが、configフォルダのurls.pyで設定した static設定により、こういった特殊な書き方で、cssファイル、jsファイルへのURLパスを取得することができます。

そして次に {% block main %}{% endblock %}ですが、これはこのbase.htmlを継承した際に、このblockの名前を入れることでこの{% block main %}から{% endblock %}の間にコードを代入できるようになっています。

よく理解するためにindex.htmlを以下のように更新しましょう。

index.html

{% extends 'base.html' %}
{% load static %}

{% block main %}
<h1 class="text-primary">Hello world!</h1>
{% endblock %}

これが正しく動いていればbase.htmlを介してbootstrapを読み込み、
またbodyの中にh1で青色のHello world!が表示されるはずです。
早速runserverしてみましょう。
どうでしょうか?
大きな文字で青色でHello world!と表示されたと思います。

このようにDjangoには同じコードをできるだけ書かないような機能が施されており、ここでは、全てのhtmlファイルに共通となるようなコードをbase.htmlにまとめて、必要な部分だけをindex.htmlなどに記述できるようになっています。
このまま、contact.htmlも更新してみましょう。

function/contact.html

{% extends 'base.html' %}
{% load static %}

{% block main %}
<h1 class="text-danger">お問い合わせ</h1>
{% endblock %}

今度は、text-dangerを使用したので http://localhost:8000 にアクセスすると赤色でお問い合わせと表示されたと思います。
ちなみにtext-primaryとtext-dangerというクラス名で色が変わったのがbootstrapの機能です。
base.htmlをうまく使うことで例えば、ヘッダーナビなどはbase.htmlに記述することでhtmlファイルごとにページのヘッダーやフッターなどを記述する手間を省くことができます。

最後に

これで基本のチュートリアルは終了です。
Djangoのフロントエンド機能はこれ以外にも多岐にわたりPythonベースのif文やfor文などを記述することもできますし、時間のフォーマットを変更したり、自分で自作した関数をhtmlの要素にかけたりすることもできます。

ここまで出来ればあとは、modelsやviews、htmlやjsを実装していくことで本格的なWebサービスになっていくと思います。
その部分については次章からのドキュメントや動画コース(近日公開予定)を参考にしながら進めていけると良いでしょう。