で動的サイトを作ろう 2021/07/02 '16 uc

もくじ 基本知識 Djangoとは・Webアプリケーション3層構造・MVC Djangoアプリケーションを動かしてみよう 環境構築・開発サーバー起動 動く仕組み プロジェクト構成・Model/View/Template/URL

基本知識

Djangoとは Pythonで動くWebアプリケーションフレームワーク 動的Webページを簡単に作ることができる フルスタックなので欲しい機能は大体初めから付いてきている InstagramやPinterest, MDNに利用されている

静的Webページとは リクエストに対してファイルが返されるだけのWebページ ユーザーによらずレスポンスは同じ サーバー負荷が低い 動的Webページとは リクエストのたびにサーバーでレスポンスが生成されるWebページ ユーザーによって違うレスポンスにできる 情報が頻繁に更新される・データ量が多い場合に向いているとされている

Webサーバーとは HTTPリクエストを受け取ってHTTPレスポンスを返すサーバー Webページの場合のレスポンスはHTMLが基本 静的WebページはWebサーバーだけで動かせる Apache, nginxなどがある

(サーバーサイド) Webアプリケーションとは 動的Webページを実現するためのソフトウェア Webサーバーからリクエストの内容を受け取り、必要に応じてデータベースにアクセ スし、レスポンスを生成する DjangoはWebアプリケーションを作るためのフレームワーク

データベースとは データを蓄積して整理したもの データベースを管理するシステム (DBMS: Database Management System) として MySQL, PostgreSQL, MariaDBなどがある

余談 | 近年のWeb技術 Jamstack (JavaScript + API + Markup) が注目されている CSR (Client Side Rendering) JavaScriptを使ってクライアント（ブラウザ）側でWebページを生成 SSR (Server Side Rendering) CSRに近い構成でリクエスト時にサーバー側でHTMLを生成（つまり動的Webサイト） SSG (Static Site Generation) ビルド時に静的Webサイトを生成

MVC (Model, View, Controller) Webアプリケーションなどの設計の考え方 Model データベースの操作、変換などを行う View HTMLなど、表示する部分を制御する Controller URIやクエリなどを参照して、Modelのする処理や返却するViewを決める

Djangoアプリケーションを 動かしてみよう

今回取り上げる題材 UTMCの合宿の参加登録サイト 現在はWikiを各自で編集する形になっている 要件定義 名前・入学年度・参加開始日・参加終了日を入力して送信すると参加登録される 参加者一覧を見ることができる 進行 1からサイトを作るのが理想だが、時間がかかるので今回は予め作ったサイトを使って 解説する

Python仮想環境の作成 $ mkdir utmc-django & cd utmc-django #←このフォルダ名は何でも可 $ python -m venv venv 仮想環境の有効化 PowerShell (Windows) の場合: $ venv/scripts/activate.ps1 bash (Mac/Linux) の場合: $ source venv/bin/activate

Djangoのインストール $ python -m pip install Django $ python -m django --version

サンプルプロジェクトのクローン $ git clone https://github.com/antenna-three/utmc-django-tutorial.git データベースの作成 $ cd utmc-django-tutorial $ python manage.py migrate 開発サーバーの起動 $ python manage.py runserver ブラウザで http://localhost:8000 にアクセスしてみよう

動く仕組み

プロジェクトの構成 合宿 ( gasshuku ) プロジェクトの中に参加登録 ( register ) アプリケーションがある 要望アンケートなどの機能を実装するときはアプリケーションを追加すればよい プロジェクトの設定は gasshuku/settings.py に書かれている . ├─gasshuku ├─register │ └─templates │ └─register └─templates

主要なファイル urls.py URLに対してViewなどを対応付ける views.py Requestを受け取ってViewを返す。名前はviewsだが役割的にはControllerに近い models.py Modelを定義する templates/ HTMLのひな形。MVCモデルでのViewにあたる

Model データベースの構成を決める register では名前、入学年度、参加開始日、参加終了日という4つのフィールドを持 つ Entry というテーブルを定義している register/models.py class Entry(models.Model): screen_name = models.CharField(max_length=100) admission_year = models.IntegerField() start_date = models.DateField() end_date = models.DateField()

View リクエストからレスポンスを作る テンプレートにデータを渡してHTMLを作ることが多い ( render ) register/views.py def entry(request): admission_years = list(range(2021, 1975, -1)) entry_dates = [date(2021, 9, day) for day in [10, 11, 12, 13]] context = { 'admission_years': admission_years, 'entry_dates': entry_dates, } return render(request, 'register/entry.html', context)

汎用View オブジェクトのリストや1つのオブジェクトの詳細といったよく使うViewは最初から 用意されている 対象のModelの指定とテンプレートの用意だけすればよしなにModelからデータを取 り出してコンテキストを用意してテンプレートに流し込んでくれる class ListView(generic.ListView): model = Entry

テンプレート 通常のHTMLにviewから受け取った変数 {{ }} や制御文 {% %} を混ぜて書く register/templates/register/entry_list.html {% for entry in entry_list %} {{ entry.screen_name }} {{ entry.admission_year }} {{ entry.start_date }} {{ entry.end_date }} {% endfor %}

URL URLとViewを対応付ける name はDjangoアプリケーション内での名前、 app_name は名前空間 register/urls.py app_name = 'register' urlpatterns = [ path('', views.index, name='index'), path('list/', views.ListView.as_view(), name='list'), path('entry/', views.entry, name='entry'), path('submit/', views.submit, name='submit'), path('details/', views.DetailView.as_view(), name='details'), path('results/', views.ResultView.as_view(), name='results'), ]

Admin機能 管理ユーザーの作成 $ python manage.py createsuperuser http://localhost:8000/admin にアクセスしてみよう Admin画面にEntryの内容が表示されるのは register/admin.py で登録しているから

デプロイ UTMCのサーバー, Heroku, PythonAnywhereなどで無料でホスティング可能

足りない機能を実装してみよう 入力内容のバリデーション（名前が空欄、参加開始日>参加終了日などを弾く） 日程のモデル化（開始日、終了日、宿泊先など） 日ごとの参加者一覧（ get_queryset ） ユーザー認証（共通アカウントでログイン） アンケート、企画募集などのアプリケーション 注意 Modelを変更したらマイグレーション ( python manage.py migrate ) を忘れずにすること

See also Django ドキュメント Django | MDN Django Girls