こちらの記事にてDjangoのインストールからHello,Worldを表示することまで、解説しました。
今回の記事は、この続きになります。
この記事では、こんな悩みを解決したいと思います。
- Djangoで簡単にWebページを作成したい
- HTMLやらCSSを一から作成するのは面倒
この記事のゴール
- DjangoとBootstrap4を使うことで、HTMLやらCSSを一から作成せずにWebページを作成する方法を習得すること
Bootstrapとは？
Bootstrapはウェブサイトのフロントサイドのフレームワークです。
フロントサイドというのは、
- HTML
- CSS
- Javascript
です。
こういうのに時間をかけたくないけどある程度、しっかりとしたデザインで作りたいってときに使うとおすすめかと思います。
しかも、無料で商用利用も可能という優れもの。
こういう時短テクニックを覚えるのは、エンジニアとしては、必須だと思います。
こちらのサイトのコードをコピペすることで、簡単に自分の作りたいデザインを設計することができます。
私は、どちらかというとプロトタイピングして、顧客の課題に対しクリティカルなソリューションかどうか？という仮説検証を高速で回す仕事が多いのです。
なので、この時点では、丁寧なものって不要なんです。
ある程度、仮説検証が進んで、よりデザイン性が高いものが欲しいとなったときにはもう外注するんです。
なので、リーンに仮説検証したい私としては、こういったBootstrapなどのサービスでざくざくっとつくってしまえばOK。
ある程度、雑でいいんです。
なんなら、外注先も・・・Bootstrapってのもよくある。。。（笑）
これほぼプロトのときといっしょじゃーんっていう感じです。笑
今回作るもの
以下二つのページを作成してみたいと思います。
- /myapp/info/
- /myapp/about/
前回までは、
- /myapp/
を作成しています。
追加で2ページを作成する方法について解説です。
ファイル構成
Firstというプロジェクトにmyappというアプリケーションを作成しました。
アプリケーションの作成方法はこちらを参考にしてみてください。
myappの中にtemplatesというフォルダを作成します。
そして、さらにmyappというフォルダを作成します。
これは、右クリック->新規作成で作成ください。
url.py
まずは、以下赤枠のファイルを編集します。
これは、前回も解説しましたが、ユーザがアクセスしてきたURLに応じて、挙動を変更するためのpyファイルです。
この中身を以下のように記述します。
from django.urls import path
from . import views
app_name = 'myapp'
urlpatterns = [
path('',views.index,name='index'),
path('about/',views.about,name='about'),
path('info/',views.info,name='info'),
]ポイントは、about/とinfo/を追加したことです。
これによりmyapp/about/とアクセスしたときに、第二引数のクラスが呼び出されることになります。
myapp/info/も同様です。
第二引数は、ともに外部からimportされたviewsというpyファイルに定義していることになります。
from . import viewsの.に関しては、こちらの解説を参考ください。
views.py
以下の赤枠のpyファイルです。
以下のように記述してください。
from django.shortcuts import render
def index(request):
return render(request,'myapp/index.html')
def about(request):
return render(request,'myapp/about.html')
def info(request):
return render(request,'myapp/info.html')これは、それぞれの関数が呼び出されるとrenderという関数が呼び出されています。
これは、結局のところ HttpResponse オブジェクトで返すということを内部的にしてます。
詳細は、こちらを参照ください。
中身を見るとmyapp内のhtmlファイルをそれぞれ参照していることがわかります。
- このhtmlファイルを作成するのに、Bootstrapを活用します。
Bootstrapのスターターテンプレート
以下のURLにアクセスして以下のコードをコピーしてください。
これは、CSSなどのデザインのテンプレートをBootstrapが提供してくれており、それを利用することで、すぐにデザインの整ったwebページが作成できるというもので、そのためのプラットフォームです。
base.html
このコードをコピーしたらbase.htmlという名前で、templates->myappの直下に保存してください。
それを以下のように追加します。
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>私は仕事が大好きです。</title>
</head>
<body>
{% block content%}
{% endblock%}
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>追加したところは、
{% block content%}
{% endblock%}
です。
これは、このbase.htmlをベースにこれから複数のhtmlファイルを作成するのですが、この{% block content%}{% endblock%}の間にコードすることで、そこのみを変更することができます。
なぜこのようなことをするかというと、例えば、Bootstrapがバージョンアップした際、コードを改変しなくてはならない。。。という作業が発生したとします。
いくつもいくつもこのテンプレを作成してしまうと、保守するのが大変です。
- そこで、このようにベースを一つ作り、あとは参照するだけで、保守しやすい設計にするためです。
これは、非常に重要な考え方なので、ぜひ覚えておきましょう。
info.html
あとのhtmlファイルは、以下のように作成してしまえば大丈夫です。
非常に短いコードで済みます。
これであれば、そのあとデザインの変更があっても簡単に修正できますね。
{% extends 'myapp/base.html'%}
{% block content %}
<h1>info<h1>
{% endblock %}about.html
{% extends 'myapp/base.html'%}
{% block content %}
<h1>about<h1>
{% endblock %}index.html
{% extends 'myapp/base.html'%}
{% block content %}
<h1>index<h1>
{% endblock %}動作させてみる
以下をターミナルまたは、コマンドプロンプトで入力します。
python manage.py runserverするとこのような表示がされると思います。
http://127.0.0.1:8000/myappと入力して、ウェブブラウザでアクセスしてみてください。
すると以下の画面が表示されます。
/myapp/info/はこのようになる。
/myapp/about/はこのようになる。
ちゃんとwebページが追加されましたね。
Djangoをもっと勉強したい
そんな方には、こちらの本がおすすめです。
とてもわかりやすく、筆者もDjangoを使うときは、参照することが多いです。
手元にあると、非常に助かる本だと思います。
今回の記事は、以上です。
最後までお読みいただきありがとうございました。
コメント