チュートリアル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の中にcssとjsというフォルダを作ります。
また今回は使用しませんが、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サービスになっていくと思います。
その部分については次章からのドキュメントや動画コース（近日公開予定）を参考にしながら進めていけると良いでしょう。
Just Python フリープラン
ジャスパイなら教材は全て無料！