今回はテンプレートを活用したhtmlの表示を行う回にします。
世にあるWEBアプリは基本的にテンプレート(雛形)があり、ログインユーザーや検索したデータによりテンプレート内の表示を切り替えています。
DjangoはMVCアーキテクチャを採用しています。ただruby on rails、ASP.Net MVC、Laravelとは各部の呼び名が異なっているので注意が必要ですが、動きはMVCそのものです。
Djangoの場合、コントローラー部分がviews.pyとなります。urls.pyでルーティングを行い、views.pyにて使用するメソッドを決定します。
そのメソッドにてmodels.pyにてDBから必要なデータを取得し、templateに受け渡して画面表示を行うようにviews.pyがresponseを返します。
DjangoはMVTと言ってよいかもしれませんが、MVCアーキテクチャの仲間と言った方がわかりやすいでしょう。

スポンサーリンク

対象者

  • pythonに興味がある方
  • プログラミングを始めたい方
  • pythonでWEBアプリを作りたい方

開発環境

  • macbook 12inch
  • macOS Mojave バージョン10.14.4
  • VS Code バージョン1.34.0
  • Anaconda Navigator 1.9.7
  • python 3.7
  • Django 2.1.7

スクリーンショット 2019-05-23 3.09.26

テンプレートを活用して表示する

テンプレートを用意する

helloworldアプリにテンプレートを追加する手順は以下のとおりです。

  1. helloworld直下にtemplatesフォルダを作成する
  2. templates直下にhelloworldフォルダを作成する
  3. templates/helloworldにindex.htmlファイルを作成する
  4. index.htmlに何かサンプルとなるコードを書いてみる
<!DOCTYPE html>
<html>
<head>
<title>基本的な表の作成</title>
</head>
<body>
 <table border="1">
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

プロジェクトにhelloworldアプリを登録する

settings.pyのApplication definition欄にINSTALLED_APPSを設定する箇所があります。
そこに下記のようにhelloworldを追記してあげないと動作しないので必ず設定してください。

settings.py内の記載は以下のとおりです。

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'helloworld',   # ←ここを追加しました
]

動作確認

次に作成したテンプレートを動作させてみます。手順は以下のとおりです。
1. ターミナルを開く(上記で使用したやつ)
2. cd django_app
3. python manage.py runserver →これでDjangoが起動してWEBサーバーとして機能する
4. ブラウザにて下記のように実行して名前と年齢のテーブルが表示されれば成功となる

http://localhost:8000/helloworld/

まとめ

  • htmlを表示するにはテンプレートを使用する
  • プロジェクトに当該アプリを登録する

後書き

Djangoでテンプレートを用いて画面表示を行おうとしたところ、TemplateDoesNotExistが発生してしまった。
エラー箇所をみると、テンプレートが存在しないということだが、実際はそうではなかった。
タイポでもなかったので悶々としつつ、ググっていたらようやく下記サイトに出会い解決した。
原因はhelloworldアプリの登録をDjango側に設定していなかったためであった。

このサイトのおかげでなんとか解決することができたのだが、見落としがちな設定で重要であるので気をつけたい。