Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

基本知識

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

サンプルプロジェクトのクローン $ 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 にアクセスしてみよう

Slide 16

Slide 16 text

動く仕組み

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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()

Slide 20

Slide 20 text

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)

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

テンプレート 通常の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 %}

Slide 23

Slide 23 text

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'), ]

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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