Django – 群馬プログラミングカレッジ

Django-Bootstrap設定＆利用法

Bootstrap

DjangoでWebアプリケーション開発を行う際に、レスポンシブWebデザイン機能を利用するための設定と利用法を記述します。

Bootstrapは、レスポンシブＷｅｂデザイン機能を有し、CSS，javascript，font, iconなどを提供するWEBフレームワークです。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。引用：ウィキペディア

CSS（Cascading Style Sheets）とは、HTML や XML の要素をどのように修飾するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。引用：ウィキペディア

Bootstrapによって、Webアプリケーション開発者は予め用意されたコードを記載するだけで、見栄えの良いレスポンシブWebサイトを短期間で制作できます。

1つのWEBページ（HTML）で、PC、スマートフォン、タブレットなどに対応することをレスポンシブといいます。

またレスポンシブで、かつ端末ごとに使いやすい適切なデザインがされていることをレスポンシブWEBデザインと呼んでいます。

レスポンシブWEBデザインはブラウザの大きさに合わせて自動的に表示幅や配置などを調整してくれるデザインのことで、PC，スマートフォン，タブレットで同じhtmlを使い回すことができます。

レスポンシブWEBデザインは、WEBページを閲覧するユーザーの端末に応じて自動で表示が最適化されるように、jQuery（JavaScript）で制御されています。

WEBページでよく使われるフォーム、ボタン、メニューなどのコンポーネント（部品）がテンプレートとして用意されています。

Webアプリケーション開発者はこれらのコンポーネント（部品）を自作する必要はなく、HTMLタグにクラスを追加するだけで、体裁の整ったコンポーネントをすぐに利用できます。

また、デザイン性も確保されているため、WEBページのスタイルも最低限の調整で済んでしまいます。

Bootstrapの特徴

レスポンシブWEBデザイン
知識がなくても使える
デザイン性の確保

という特徴があります。

Bootstrapは、小～大規模のWEBサイトやWEBアプリでも使うことができます。

WEBサイトやWEBアプリでは、「デザイン性」や「操作性」はとても重要な要素です。

Bootstrapでは、あらかじめ用意されているCSSを適用することで、デザインが全くわからない人でも、ある程度の見栄えを確保することが可能です。

さらに端末に合わせて操作しやすいようにデザインも工夫されているため、ユーザーにとって使いやすいサイトを簡単につくることができます。

Bootstrapのグリッドシステム

レスポンシブWebデザインは、グリッドシステムによって支えられています。

図3-1

グリッドシステムは、3つのCSSクラスで構成されます。

.container（コンテナ）
.row（ロー）
.col-（カラム）

この３つのCSSクラスでレイアウトを設計します。

コンテナは一番外枠のエリアで、この中にロー（行）があり、行の中にカラム（列）があります。

Bootstrapのグリッドシステムは、あらかじめ１行（rowの範囲）が１２列に分割されています。

カラム（列）の幅は、最小値は1グリッド幅で、最大値は12グリッド幅になります。

図3-1は、2行あり、上の行は、行内に３カラムあり、各カラムは４グリッド保有しています。

下の行は、行内に２カラムあり、各カラムは６グリッド保有しています。

このように、グリッドを合体させて、カラムとして分割するのが、Bootstrapのグリッドシステムの使い方です。

カラムの書式は、「.col-XX-数字」となります。

数字は、カラムのグリッド数を表して、１～１２の数字が入ります。

カラム割には「row」と「.col- XX -数字」をセットで使います。

rowは、12分割されており、好きな数だけ列をまとめて１カラムとできます。

まとめる列数は「.col- XX -数字」の数字部分で指定します。

XXにはBootstrapであらかじめ定義してある、「xl、lg、md、sm、xs」のどれかを指定しなくてはなりません。

この「xl、lg、md、sm、xs」には、画面の幅がそれぞれ指定してあります。

普通のPC画面では、「md」となります。このPC画面で図3-1のようなレイアウトになるようにするには、図3-1の上の行内の各カラムは、「.col-md-4」となります。下の行内のカラムは、「.col-md-6」となります。

<code>
<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
    </div>
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>
</code>

<code>

</div>

</div>

</code>

<div>は、単体では特に意味を持たないタグですが、<div>で囲った部分をブロックレベル要素としてグループ化することができるタグです。

グループ化することで、align属性により水平方向の位置をまとめて指定したり、指定した範囲にスタイルシートを適用したりすることができます。

XXで指定した画面サイズまでカラムは横並びにするけど、それより小サイズになったら横並びやめて縦積みになります。

図3-1の例では、表3-1からみるとタブレットの画面幅（768px =< 画面幅 < 940px）になると、横並びしていた３つのカラムは、縦積みのレイアウトになります。

レイアウトの切り替えサイズ（ブレイクポイント）が設定されています。

コンテナの幅は、各クラスごとに以下の表のように定められています。

「.col-xs-」の場合は、「auto」となりスマホの画面幅いっぱいにレイアウトされます。

「Visual Bootstrap 3 Grid Builder」というジェネレータを使用すると、複雑なカラムの雛形を即座に作成することができます。

http://shoelace.io/

ブラウザで、ビジュアルイメージでカラムのレイアウトを作成するとコードが自動作成されます。

Bootstrapの導入

Bootstrapは現在も開発が進められており、最新バージョンは「Bootstrap4」です。

WebデザインをサポートしてくれるBootStrapライブラリの導入には、以下の３通りの方法があります。

（１）公式からダウンロードしたスタイルシートを指定する方法
（２）公式サイトのBootstrapCDNを利用する方法
（３）Djangoのデザインを取入れた「django-bootstrap4」を利用する方法

（１）と（２）は、二者択一で利用します。

（３）は、（１）か（２）と併用して利用することができます。

（１）は、CSSの「Bootstrap」をダウンロードしてサーバーにアップしてから利用するスタイルです。

（２）は、ダウンロードせずにインターネット経由で直接利用するタイプです。

CDN （コンテンツデリバリネットワーク: content delivery network)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。出典：コンテンツデリバリネットワーク – Wikipedia

「django-bootstrap4」は、DjangoとBootstrapとの連携用のライブラリです。

最初に、公式からダウンロードしたスタイルシートを指定する方法について記述します。

Bootstrapのダウンロードと設定

以下のURLから一式をダウンロードできます。

https://getbootstrap.com/

以下のCompiled CSS and JSをダウンロードします。


Compiled CSS and JS
Download ready-to-use compiled code for Bootstrap v4.4.1 to easily drop into your project, which includes:
•	Compiled and minified CSS bundles (see CSS files comparison)
•	Compiled and minified JavaScript plugins
This doesn’t include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).
Download

Compiled CSS and JS

Download ready-to-use compiled code for Bootstrap v4.4.1 to easily drop into your project, which includes:

• Compiled and minified CSS bundles (see CSS files comparison)

• Compiled and minified JavaScript plugins

This doesn’t include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).

Download

ダウンロードファイルを解凍すると、cssとjsホルダー内に以下のファイルが格納されています。

ダウンロードしたファイルを、mysite/static/ というディレクトリを作って、以下のように配置します。

「mysite」は、Djangoのベースディレクトリであり、「プロジェクト名」でもあります。

Djangoプロジェクト構成

Djangoでプロジェクトを作成する際に、プロジェクト名を「mysite」として、

$ django-admin startproject mysite

を実行すると、現ディレクトリ直下にプロジェクト名と同じ「mysite」というディレクトリが作成されます。

このディレクトリは、起点となるディレクトリで、「ベースディレクトリ」と呼ばれるます。

ベースディレクトリ以下のファイル構成は、以下のようになります。

(venv) C:\Users\user\PycharmProjects\mysite>
mysite # ベースディレクトリ
│
├── manage.py
│
└── mysite # 設定ディレクトリ
     ├── __init__.py
     ├── settings.py
     ├── urls.py
     └── wsgi.py

(venv) C:\Users\user\PycharmProjects\mysite>

mysite # ベースディレクトリ

│

├── manage.py

│

└── mysite # 設定ディレクトリ

├── __init__.py

├── settings.py

├── urls.py

└── wsgi.py

ベースディレクトリの下にプロジェクト名と同じ同名のディレクトリが作られその中に「–init–.py」、「setting.py」などの設定ファイルが自動作成されます。

このディレクトリを「設定ディレクトリ」と呼びます。

次に、「hello」というアプリケーションを作成します。

$ cd mysite/

$ python3 manage.py startapp hello

このDjangoコマンドを実行すると「hello」というアプリケーション用のディレクトリが作成され、その直下にいくつかのファイルが自動生成されます。

(venv) C:\Users\user\PycharmProjects\mysite>
mysite
│
├── hello # アプリケーションディレクトリ
│　   ├── __init__.py
│  　 ├── admin.py
│  　 ├── apps.py
│  　 ├── migration
│  　 ├── models.py
│  　 ├── tests.py
│   　└── views.py
│
├── manage.py
│
└── mysite # 設定ディレクトリ
     ├── __init__.py
     ├── settings.py
     ├── urls.py
     └── wsgi.py

(venv) C:\Users\user\PycharmProjects\mysite>

mysite

│

├── hello # アプリケーションディレクトリ

│　 ├── __init__.py

│ 　 ├── admin.py

│ 　 ├── apps.py

│ 　 ├── migration

│ 　 ├── models.py

│ 　 ├── tests.py

│ 　└── views.py

│

├── manage.py

│

└── mysite # 設定ディレクトリ

├── __init__.py

├── settings.py

├── urls.py

└── wsgi.py

一般に、アプリケーションディレクトリごとに、以下のようなテンプレートファイルや静的ファイルを配置するためのディレクトリを追加します。

(venv) C:\Users\user\PycharmProjects\mysite>
mysite
│
├── hello # アプリケーションディレクトリ
│　   ├── __init__.py
│  　 ├── admin.py
│  　 ├── apps.py
│  　 ├── migration
│  　 ├── models.py
│  　 ├── static
│  　 │  　 └── hello
│  　 │         　└── images
│  　 │                　└── no-image.png
│  　 ├── templates
│  　 │  　 └── hello
│  　 │         　└── index.html
│  　 ├── tests.py
│   　└── views.py
│
├── manage.py
│
└── mysite # 設定ディレクトリ
      ├── __init__.py
      ├── settings.py
      ├── urls.py
      └── wsgi.py

(venv) C:\Users\user\PycharmProjects\mysite>

mysite

│

├── hello # アプリケーションディレクトリ

│　 ├── __init__.py

│ 　 ├── admin.py

│ 　 ├── apps.py

│ 　 ├── migration

│ 　 ├── models.py

│ 　 ├── static

│ 　 │ 　 └── hello

│ 　 │ 　└── images

│ 　 │ 　└── no-image.png

│ 　 ├── templates

│ 　 │ 　 └── hello

│ 　 │ 　└── index.html

│ 　 ├── tests.py

│ 　└── views.py

│

├── manage.py

│

└── mysite # 設定ディレクトリ

├── __init__.py

├── settings.py

├── urls.py

└── wsgi.py

アプリケーションが追加されるごとに、アプリケーションディレクトリの下にテンプレートファイルや静的ファイルが配置されることになります。Djangoの設計思想として、このような構成になっています。

しかしながら、テンプレートファイルや静的ファイルがアプリケーションごとにバラバラになってしまうのは分かりづらいという問題も生じます。

このような問題を解決するために、以下のようなプロジェクト構成にします。

ベースディレクトリ名と設定ディレクトリ名が同じになりややこしいため、それぞれ別のディレクトリ名にします。
テンプレートファイルと静的ファイルがアプリケーションごとにバラバラに配置されてしまうので、ベースディレクトリ直下にまとめて以下のような配置構成にします。

このようなプロジェクト構成にするために、

ベースディレクトリを任意の名前で作成した後に、

ベースディレクトリの下に移動し、第一引数に任意の設定ディレクトリ名、第二引数に、「.」を指定して「startproject」を実行する。

設定ディレクトリを「config」とした場合、

$ mkdir mysite

$ cd mysite/

$ django-admin startproject config .

これでベースディレクトリと設定ディレクトリの名前を変えることができます。

次に、テンプレートファイルと静的ファイルをベースディレクトリ直下にまとめて配置します。

(venv) C:\Users\user\PycharmProjects\mysite>
mysite
│
├── db.sqlite3
│
├── docker
│
├── Dockerfile
│
├── hello # アプリケーションディレクトリ
│　   ├── __init__.py
│  　 ├── admin.py
│  　 ├── apps.py
│  　 ├── migration
│  　 ├── models.py
│  　 ├── tests.py
│   　└── views.py
│
├── manage.py
│
├── requirements.txt
│
├── static  # 静的ファイル用のディレクトリ
│     │　
│     ├── hello
│     │     └── images
│     │            └── no-image.png
│     ├── css
│     │     ├── bootstrap.css
│     │     ├── bootstrap.css.map
│     │     ├── bootstrap.min.css
│     │     ├── bootstrap.min.css.map
│     │     ├── bootstrap-grid.css
│     │     ├── bootstrap-grid.css.map
│     │     ├── bootstrap-grid.min.css
│     │     ├── bootstrap-grid.min.css.map
│     │     ├── bootstrap-reboot.css
│     │     ├── bootstrap-reboot.css.map
│     │     ├── bootstrap-reboot.min.css
│     │     └── bootstrap-reboot.min.css.map
│     │
│     ├── js
│     │     ├── bootstrap.js
│     │     ├── bootstrap.js.map
│     │     ├── bootstrap.min.js
│     │     ├── bootstrap.min.js.map
│     │     ├── bootstrap.bundle.js
│     │     ├── bootstrap.bundle.js.map
│     │     ├── bootstrap.bundle.min.js
│     │     └── bootstrap.bundle.min.js.map
│     │
│     └── images
│            └── logo.png
│
├── config # 設定ディレクトリ
│     ├── __init__.py
│     ├── settings.py
│     ├── urls.py
│     └── wsgi.py
│
├── templates # テンプレートファイル用のディレクトリ
│     │　
│     ├── hello
│     │     └── index.html
│     │     
│     └── base.html
│
└── venv

(venv) C:\Users\user\PycharmProjects\mysite>

mysite

│

├── db.sqlite3

│

├── docker

│

├── Dockerfile

│

├── hello # アプリケーションディレクトリ

│　 ├── __init__.py

│ 　 ├── admin.py

│ 　 ├── apps.py

│ 　 ├── migration

│ 　 ├── models.py

│ 　 ├── tests.py

│ 　└── views.py

│

├── manage.py

│

├── requirements.txt

│

├── static # 静的ファイル用のディレクトリ

│ │　

│ ├── hello

│ │ └── images

│ │ └── no-image.png

│ ├── css

│ │ ├── bootstrap.css

│ │ ├── bootstrap.css.map

│ │ ├── bootstrap.min.css

│ │ ├── bootstrap.min.css.map

│ │ ├── bootstrap-grid.css

│ │ ├── bootstrap-grid.css.map

│ │ ├── bootstrap-grid.min.css

│ │ ├── bootstrap-grid.min.css.map

│ │ ├── bootstrap-reboot.css

│ │ ├── bootstrap-reboot.css.map

│ │ ├── bootstrap-reboot.min.css

│ │ └── bootstrap-reboot.min.css.map

│ │

│ ├── js

│ │ ├── bootstrap.js

│ │ ├── bootstrap.js.map

│ │ ├── bootstrap.min.js

│ │ ├── bootstrap.min.js.map

│ │ ├── bootstrap.bundle.js

│ │ ├── bootstrap.bundle.js.map

│ │ ├── bootstrap.bundle.min.js

│ │ └── bootstrap.bundle.min.js.map

│ │

│ └── images

│ └── logo.png

│

├── config # 設定ディレクトリ

│ ├── __init__.py

│ ├── settings.py

│ ├── urls.py

│ └── wsgi.py

│

├── templates # テンプレートファイル用のディレクトリ

│ │　

│ ├── hello

│ │ └── index.html

│ │

│ └── base.html

│

└── venv

上記のようなプロジェクト構成にしたら、テンプレートファイルと静的ファイル関連の設定を「settings.py」に行います。

「TEMPLATES」に関する設定

「DIRS」には、ビューから指定されるテンプレート名に対してどのディレクトリを優先してテンプレートを探しに行くかという順番をリスト形式で指定します。

この例では、ベースディレクトリ直下の「templates」を最初の検索候補として指定しています。

また、「APP_DIRS」にはテンプレートを探す際に各アプリケーションディレクトリ直下の「templates」ディレクトリを優先するかどうかを指定します。

この例では「APP_DIRS」が「True」になっているのでこちらが優先されます。

# mysite/config/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], # BASE_DIR直下のtemplates
        'APP_DIRS': True, # アプリケーションのtemplatesを優先
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

# mysite/config/settings.py

TEMPLATES = [

{

'BACKEND': 'django.template.backends.django.DjangoTemplates',

'DIRS': [os.path.join(BASE_DIR, 'templates')], # BASE_DIR直下のtemplates

'APP_DIRS': True, # アプリケーションのtemplatesを優先

'OPTIONS': {

'context_processors': [

'django.template.context_processors.debug',

'django.template.context_processors.request',

'django.contrib.auth.context_processors.auth',

'django.contrib.messages.context_processors.messages',

]

mysite/config/settings.py

 import os
 BASE_DIR = os.path.dirname(os.path.dirname (os.path.abspath(__file__)))

 PROJECT_NAME = os.path.basename(BASE_DIR)

mysite/config/settings.py

import os

BASE_DIR = os.path.dirname(os.path.dirname (os.path.abspath(__file__)))

PROJECT_NAME = os.path.basename(BASE_DIR)

BASE_DIRは、「__file__」は実行しているファイル名、settings.pyとなります。

BASE_DIRは、

「C:\Users\user\PycharmProjects\mysite」となります。

PROJECT_NAMEは、

「mysite」となります。

.../
    mysite/ <-- ここがBASE_DIR
    
        manage.py
        
        config/
        
            __init__.py
            settings.py <-- __file__のさす場所
            urls.py
            wsgi.py

.../

mysite/ <-- ここがBASE_DIR

manage.py

config/

__init__.py

settings.py <-- __file__のさす場所

urls.py

wsgi.py

「静的ファイル」に関する設定

Djangoで静的ファイルを配信するためには、次の表に示した3つの設定をしておく必要があります。

アプリケーションに紐付いた静的ファイルの置き場所の例：

これは、Djangoが指定するデフォルトの置き場所です。

mysite # ベースディレクトリ
└── hello # アプリケーションディレクトリ
 　　   └── static
       　　　　 └── hello
            ├── css
            │ 　  ├── bootstrap.min.css
            │   　└── bootstrap.min.css.map
            └── js
                ├── bootstrap.bundle.min.js
                ├── bootstrap.bundle.min.js.map
                ├── jquery-3.4.1.min.js
                └── jquery-3.4.1.min.map

mysite # ベースディレクトリ

└── hello # アプリケーションディレクトリ

　　 └── static

　　　　 └── hello

├── css

│ 　 ├── bootstrap.min.css

│ 　└── bootstrap.min.css.map

└── js

├── bootstrap.bundle.min.js

├── bootstrap.bundle.min.js.map

├── jquery-3.4.1.min.js

└── jquery-3.4.1.min.map

なぜ mysite/hello/static/hello/ なのかというと、

Django は static ディレクトリを、プロジェクト（mysite）配下の各アプリケーション（hello）の static ディレクトリを探します（mysite/hello/static）

各アプリケーションの static ディレクトリは１つにまとめられて解釈されるため、識別のため自分のアプリケーション名（hello）を更に追加しておきます。（mysite/hello/static/hello）

一般にホームページの内容は、データベースの内容によって表示される内容が変わります。

このようなページ（URL）は動的コンテンツなどと呼ばれます。

それに対し，今回ダウンロードしたbootstrap.cssのようなcssやjsファイルは同じURLにアクセスすると常に同じ内容が返って来ます。

このようなページは、静的コンテンツなどと呼ばれます。

動的コンテンツはアクセス毎に内容が変化するため，プログラムを実行し，ページ内容を変更します。

これに対して静的コンテンツは内容がかわらないため，アクセス毎に問い合わせをする必要がなく，ブラウザなどに内容がキャッシュされます。

キャッシュすることにより，読み込みが高速化され，サーバの負荷が軽減されます。

djangoでは画像ファイル，cssファイル，javascriptファイルなどの静的ファイルはstatic filesとして管理し，運用時に一箇所にまとめることで管理しやすくしています。

一箇所にまとめる方法は $ ./manage.py collectstatic ですが，runserver で実行している間はこのコマンドを使う必要はありません。

staticファイルは各アプリの下にあるstaticディレクトリの中がかき集められ，urls.pyにURLを追加することなく，http://localhost:8000/static/ でアクセスすることができます。

アプリケーション（hello）独自のcssが必要な場合は、hello/static/hello/css/style.css のように設置し，http://localhost:8000/static/hello/css/style.css のようにアクセスします。

ただし，デフォルトで探索されるstaticディレクトリはアプリ（settings.pyの中のINSTALLED_APPS）の下にあるアプリケーションに紐付いたstaticファイルのみです。

manage.pyと同じ階層にstaticディレクトリを作成した場合は，このディレクトリも読み込ませるように設定を追加します。

静的ファイルが置かれているディレクトリを追加するには，STATICFILES_DIRSに追加したいディレクトリをリストで指定します。

config/settings.py
# Static files (CSS, JavaScript, Images)
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = 'var/www/{}/static'.format(PROJECT_NAME)

config/settings.py

# Static files (CSS, JavaScript, Images)

STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

STATIC_ROOT = 'var/www/{}/static'.format(PROJECT_NAME)

「STATIC_ROOT」は、「DEBUG」がFalseの場合に必要となる設定で、本番環境での設定です。

cssはhtmlのタグにclassを指定することで真価を発揮します。

bootstrapの「starter-template」

は、以下の通りです。

https://getbootstrap.com/

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

That’s all you need for overall page requirements. Visit the Layout docs or our official examples to start laying out your site’s content and components.

WebデザインをサポートしてくれるBootStrapライブラリの導入には、以下の３通りの方法があります。

（１）と（２）は、二者択一で利用します。

（３）は、（１）か（２）と併用して利用することができます。

（１）は、CSSの「Bootstrap」をダウンロードしてサーバーにアップしてから利用するスタイルです。

（２）は、ダウンロードせずにインターネット経由で直接利用するタイプです。

「django-bootstrap4」は、DjangoとBootstrapとの連携用のライブラリです。

Welcome to django-bootstrap4’s documentation!

https://django-bootstrap4.readthedocs.io/en/latest/

「django-bootstrap4」を利用する方法

を以下に記述します。

一覧系HTMLは、Bootstrapで必要なclassを手書きして、登録/修正のフォーム系HTMLは django-bootstrap4 という Python モジュールを使います。

インストールは、pip コマンドで行います。

python manage.py runserver で動いている時は、Ctrl ＋ c で停止してから実行します。

仮想環境にいることを前提にしています。

BootstrapのDjangoパッケージのインストール

以下のコマンドでdjango-bootstrap4をプロジェクトにインストールします。

(venv) C:\Users\user\PycharmProjects\mysite> pip install django-bootstrap4

1	(venv) C:\Users\user\PycharmProjects\mysite> pip install django-bootstrap4

次にsettings.pyでインストールライブラリの設定を行います。

mysite
└── config
    └── settings.py

mysite

└── config

└── settings.py

# mysite/config/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4', # bootstrap4（Python モジュール）追加
    'hello', # helloアプリケーション
    
]
.........

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'builtins':[ 
                'bootstrap4.templatetags.bootstrap4',　# ここに追加！
            ],
        },
    },
]

# mysite/config/settings.py

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'bootstrap4', # bootstrap4（Python モジュール）追加

'hello', # helloアプリケーション

]

.........

TEMPLATES = [

{

'BACKEND': 'django.template.backends.django.DjangoTemplates',

'DIRS': [os.path.join(BASE_DIR, 'templates')],

'APP_DIRS': True,

'OPTIONS': {

'context_processors': [

'django.template.context_processors.debug',

'django.template.context_processors.request',

'django.contrib.auth.context_processors.auth',

'django.contrib.messages.context_processors.messages',

'builtins':[

'bootstrap4.templatetags.bootstrap4',　# ここに追加！

]

base.htmlの作成

templates内にbase.htmlを作成します。

base.htmlの存在理由は共通設定を繰り返し利用と修正をしやすくするためです。


templates/base.html 
{% load static %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{% load bootstrap4 %}
<!doctype html>
<html lang="ja">
  <head>
<title>{% block title %}{% endblock %}</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    {% block content %}
    {% endblock %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

templates/base.html

{% load static %}

{% bootstrap_css %}

{% bootstrap_javascript jquery='full' %}

{% load bootstrap4 %}

<!doctype html>

<head>

<title>{% block title %}{% endblock %}</title>

</head>

<body>

{% block content %}

{% endblock %}

</body>

</html>

「mysite」で使用しているbase.htmlです。


templates/base.html
{% load static %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{% load bootstrap4 %}

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CDNを利用しない場合-->
<!-- CDNを利用せずにサーバーにアップする場合は以下のようになります。-->
<!--    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">-->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<!--    <link rel="stylesheet" href="{% static 'hello/css/bootstrap.grid.css' %}">-->
<!--    <link rel="stylesheet" href="{% static 'css/bootstrap.grid.min.css' %}">-->
<!--    <link rel="stylesheet" href="{% static 'hello/css/bootstrap.reboot.css' %}">-->
<!--    <link rel="stylesheet" href="{% static 'css/bootstrap.reboot.min.css' %}">-->

    {% block header %}

    {% endblock %}

    <!-- Bootstrap CSS -->
<!-- CDNを利用した場合-->
<!-- CDNを利用する際は以下のように直接URLを書きます。-->
<!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">-->

    <title>{% block title %}{% endblock %}</title>
  </head>
  <body>
<!--    <h1></h1>-->

<!--    <nav class="navbar navbar-dark bg-primary text-white">-->
<!--      <h3 >サンプル (django3.0　＆　bootstrap4)</h3>-->
<!--    </nav>-->

    <div class="container">
	    {% block content %}

	    {% endblock %}
    </div>
<!-- CDNを利用した場合-->
<!-- CDNを利用する際は以下のように直接URLを書きます。-->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!--    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>-->
<!--    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>-->
<!-- CDNを利用しない場合-->
<!-- CDNを利用せずにサーバーにアップした場合は以下のようになります。-->

<!--    <script src="{% static 'hello/js/bootstrap.bundle.js' %}"></script>-->
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<!--    <script src="{% static 'hello/js/bootstrap.js' %}"></script>-->
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
  </body>
</html>

templates/base.html

{% load static %}

{% bootstrap_css %}

{% bootstrap_javascript jquery='full' %}

{% load bootstrap4 %}

<!doctype html>

<head>

{% block header %}

{% endblock %}

<title>{% block title %}{% endblock %}</title>

</head>

<body>

{% block content %}

{% endblock %}

</div>

</body>

</html>

django-bootstrap4の例


Example template
{# Load the tag library #}
{% load bootstrap4 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}

{# Display a form #}
<!-- <form class="form" action="/url/to/submit/" method="post">{% csrf_token %} {% bootstrap_form form %} {% buttons %} <button class="btn btn-primary" type="submit"> Submit </button> {% endbuttons %}</form> -->


{# Read the documentation for more information #}

Example template

{# Load the tag library #}

{% load bootstrap4 %}

{# Load CSS and JavaScript #}

{% bootstrap_css %}

{% bootstrap_javascript jquery='full' %}

{# Display django.contrib.messages as Bootstrap alerts #}

{% bootstrap_messages %}

{# Display a form #}

{# Read the documentation for more information #}

cssについて

bootstrap.css は、全てのCSSが入った基本の全部入りのスタイルシートです。

bootstrap-reboot.css と bootstrap-grid.css は、それぞれリセット、グリッドレイアウトに必要な部分のみ切り出したバージョンです。

Bootstrap4のすべての機能を必要としない場合に利用します。

*.min.css は、圧縮版になります。

以下の通り、bootstrap.css には全部含まれています。

レスポンシブWebデザインの検証

デスクトップ版Google Chrome（以下、Chromeと略）の「デベロッパーツール（開発者ツール）」を利用すると、PCでレスポンシブWebデザインの確認ができます。

デベロッパーツールでスマートフォンのWebブラウザをエミュレートするには、最初に対象のWebページを表示してから、右上のメニューボタンをクリックして［その他のツール］－［デベロッパーツール］をクリックします。

Pocket

DockerによるDjango開発環境

Pocket

DockerによるDjango開発環境

ソースコードの開発は、Windows上のPyCharmで、アプリケーションの動作確認はDockerコンテナ（Ubuntu）のrunserverで実行できる環境を構築します。

全体像は、次のようになります。

構築手順：

「Docker Desktop for Windows」をインストール

Docker Desktop for Windowsは、Hyper-V 仮想化を使用します。Windows 10 上で Hyper-V を使用するためには、Windows 10 の Professional 以上のエディションが必要です。

なお、今回インストールしたデバイスの仕様とWindowsの仕様は次の通りです。

プロセッサ Intel(R) COre(TM) i5-5200U CPU @ 2.20GHz 2.20GHz

実装RAM 4.00 GB

システムの種類 64 ビットオペレーティングシステム、x64 ベース　プロセッサ

エディション Windows 10 Pro

事前準備

Docker Desktop for Windows をインストールする事前準備として、Windows マシンの Hyper-V を有効化しておく必要があります。

また、Docker公式サイトにて、Docker ID というアカウントを取得して必要があります。

Hyper-Vの有効化にする

Windows ボタンを右クリックし、[アプリと機能] を選択します。

[関連設定] の下にある [プログラムと機能] を選択します。

[Windows の機能の有効化または無効化] を選択します。

[Hyper-V] を選択して、[OK] をクリックします。

有効化するには Windows マシンの再起動が必要です。

Docker IDの取得する

Docker Desktop をインストールするには、Docker IDというアカウントが必要となります。

事前に、Docker 公式サイトにて、Docker IDのアカウントを取得してください。

次のURLからサインアップしアカウントを作成してください。

https://hub.docker.com/signup

Docker Desktop for Windows のインストール

インストール

インストーラーをダウンロードする

次のサイトで Docker for Windows インストーラーをダウンロードしてインストールします。

https://www.docker.com/products/docker-desktop

[Download Desktop for Mac and Windows] ボタンをクリックします。

次の画面で、 [Download Desktop for Windows] ボタンをクリックして、[Docker Desktop Installer.exe] をダウンロードします。

Windowsマシンへのインストールする

ダウンロードした [Docker Desktop Installer.exe] ファイルを、エクスプローラーから実行してください。

ダウンロードが完了すると、Configraton の画面が出ます。そのまま「OK」を押してください。

[Use Windows containers instead of Linux containers (this can be chananged after installation] の行にはチェックボックスが付いていません。これはコンテナで Windows を動かす場合のオプションです。

今回は Ubuntuを動かしたいのでこのチェックボックスは不要です。

インストールが始まります。しばらく待機してください。

ここまでで Docker Desktop for Windows のインストールは完了です。

動作確認

Docker のバージョンの確認をしてみる

まずは、インストールされた Docker のバージョンを確認してみましょう。

Windows PowerShell を起動して、docker version コマンドでバージョン情報が表示されます。

Hello Worldを動かしてみる

おなじみの hello world を実行します。

docker run コマンドは、イメージからコンテナを起動するコマンドです。

PS C:¥Users¥user> docker run hello-world

1	PS C:¥Users¥user> docker run hello-world

hello-world というイメージからコンテナを作成して起動するという意味になります。

ただし、ローカルに hello-world イメージがないため、Docker デーモンが hello-world イメージを Docker Hub（Docker社が運営する、インターネット上でイメージを公開・共有したりする Docker Registry サービス）からダウンロードし、イメージからコンテナを起動します。

イメージはファイルシステムとアプリケーションやミドルウェア、実行時に必要とするパラメータから構成されます。

このコンテナは次のような標準出力を出して終了します。

PS C:¥Users¥user> docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
ee446884f7be: Pull complete                                                                                             8b4475a48151: Pull complete                                                                                             7c57688e630a: Pull complete                                                                                             Digest: sha256:9572f7cdcee8591948c2963463447a53466950b3fc15a247fcad1917ca215a2f
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (windows-amd64, nanoserver-1809)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run a Windows Server container with:
 PS C:\> docker run -it mcr.microsoft.com/windows/servercore powershell

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

PS C:¥Users¥user> docker run hello-world

Unable to find image 'hello-world:latest' locally

latest: Pulling from library/hello-world

ee446884f7be: Pull complete 8b4475a48151: Pull complete 7c57688e630a: Pull complete Digest: sha256:9572f7cdcee8591948c2963463447a53466950b3fc15a247fcad1917ca215a2f

Status: Downloaded newer image for hello-world:latest

Hello from Docker!

This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:

1. The Docker client contacted the Docker daemon.

2. The Docker daemon pulled the "hello-world" image from the Docker Hub.

(windows-amd64, nanoserver-1809)

3. The Docker daemon created a new container from that image which runs the

executable that produces the output you are currently reading.

4. The Docker daemon streamed that output to the Docker client, which sent it

to your terminal.

To try something more ambitious, you can run a Windows Server container with:

PS C:\> docker run -it mcr.microsoft.com/windows/servercore powershell

Share images, automate workflows, and more with a free Docker ID:

https://hub.docker.com/

For more examples and ideas, visit:

https://docs.docker.com/get-started/

これでDockerの動作確認ができました。

Djangoプロジェクトを作成

「PyCharmによるDjango開発環境の構築」の手順で、

\Users\user\PycharmProjects\mysiteにDjangoプロジェクトを作成します。

DockerfileからDockerイメージを作成

次に示すDockerfileをDjangoプロジェクトの直下に作成します。

ファイル名は、拡張子なしの「Dockerfile」とします。

FROM ubuntu:18.04

ENV PYTHONUNBUFFERED 1
ENV PYTHONIOENCODING utf-8

ENV HOME /root
ENV DEPLOY_DIR ${HOME}/mysite

RUN apt update

# Set locale
# https://stackoverflow.com/a/28406007
RUN apt install -y locales
RUN sed -i -e "s/# en_US.UTF-8 UTF-8/en_US.UTF-8 UTF-8/" /etc/locale.gen \
    && locale-gen
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US:en
ENV LC_ALL en_US.UTF-8

# Install Python 3.7
RUN apt install -y wget \
    build-essential \
    zlib1g-dev \
    # https://stackoverflow.com/a/43923402
    libssl-dev \
    # https://stackoverflow.com/a/29862854
    libsqlite3-dev
WORKDIR ${HOME}
RUN wget https://www.python.org/ftp/python/3.7.5/Python-3.7.5.tgz \
    && tar zxf Python-3.7.5.tgz \
    && cd Python-3.7.5 \
    && ./configure --enable-optimizations \
    && make altinstall

# Set alias
RUN update-alternatives --install /usr/local/bin/python3 python3 /usr/local/bin/python3.7 1
RUN update-alternatives --install /usr/local/bin/pip3 pip3 /usr/local/bin/pip3.7 1
RUN pip3 install -U pip

WORKDIR ${DEPLOY_DIR}

CMD ["/bin/bash"]

FROM ubuntu:18.04

ENV PYTHONUNBUFFERED 1

ENV PYTHONIOENCODING utf-8

ENV HOME /root

ENV DEPLOY_DIR ${HOME}/mysite

RUN apt update

# Set locale

# https://stackoverflow.com/a/28406007

RUN apt install -y locales

RUN sed -i -e "s/# en_US.UTF-8 UTF-8/en_US.UTF-8 UTF-8/" /etc/locale.gen \

&& locale-gen

ENV LANG en_US.UTF-8

ENV LANGUAGE en_US:en

ENV LC_ALL en_US.UTF-8

# Install Python 3.7

RUN apt install -y wget \

build-essential \

zlib1g-dev \

# https://stackoverflow.com/a/43923402

libssl-dev \

# https://stackoverflow.com/a/29862854

libsqlite3-dev

WORKDIR ${HOME}

RUN wget https://www.python.org/ftp/python/3.7.5/Python-3.7.5.tgz \

&& tar zxf Python-3.7.5.tgz \

&& cd Python-3.7.5 \

&& ./configure --enable-optimizations \

&& make altinstall

# Set alias

RUN update-alternatives --install /usr/local/bin/python3 python3 /usr/local/bin/python3.7 1

RUN update-alternatives --install /usr/local/bin/pip3 pip3 /usr/local/bin/pip3.7 1

RUN pip3 install -U pip

WORKDIR ${DEPLOY_DIR}

CMD ["/bin/bash"]

次のコマンドを実行して、DockerfileからDockerイメージを作成します。

$ docker build -t <イメージ名>:<タグ名> <Dockerfileを配置したディレクトリ>
$ docker build -t mysite:1.0 C:¥Users¥user¥PycharmProjects¥mysite

1 2	$ docker build -t <イメージ名>:<タグ名> <Dockerfileを配置したディレクトリ> $ docker build -t mysite:1.0 C:¥Users¥user¥PycharmProjects¥mysite

このDockerfileから、python3.7.5をインストールしたUbuntu 18.04ベースのイメージを作成することができます。

Dockerコンテナの作成・起動

コンテナを作成・起動する

Dockerイメージが作成できたら、Dockerコンテナを作成して起動します。

次のように docker run コマンドを実行して、コンテナを作成・起動します。

Dockerコンテナを実行して、bashで対話型シェルにログインします。

runserverのために、8000番ポートを開けておきます。

また、DjangoプロジェクのディレクトリをDocker側の「/root/mysite」ディレクトリと同期させます。

$ docker run -it -p <オスとOS側のポート番号>:<コンテナ側のポート番号> -v <オスとOS側のディレクトリ>:<マウント先のコンテナ側のディレクトリ> --name <コンテナ名> <イメージ名>:<タグ名> <起動時のコマンド>
$ docker run -it -p 8000:8000 -v C:¥Users¥user¥PycharmProjects¥mysite:/root/mysite --name mysite mysite:1.0 /bin/bash

1 2	$ docker run -it -p <オスとOS側のポート番号>:<コンテナ側のポート番号> -v <オスとOS側のディレクトリ>:<マウント先のコンテナ側のディレクトリ> --name <コンテナ名> <イメージ名>:<タグ名> <起動時のコマンド> $ docker run -it -p 8000:8000 -v C:¥Users¥user¥PycharmProjects¥mysite:/root/mysite --name mysite mysite:1.0 /bin/bash

Dockerコンテナ上で事前準備

「393dff996336」は、Dockerコンテナ作成時に自動的に作成される「コンテナID」です。

## 必要なパッケージを適宜インストール
root@393dff996336:~/mysite#  pip install Django==2.1

## requirements.txtでまとめてインストール
root@393dff996336:~/mysite# pip install -r requirements.txt

## MySQLインストール
root@393dff996336:~/mysite# apt-get install mysql-server mysql-client

## 必要なパッケージを適宜インストール

root@393dff996336:~/mysite# pip install Django==2.1

## requirements.txtでまとめてインストール

root@393dff996336:~/mysite# pip install -r requirements.txt

## MySQLインストール

root@393dff996336:~/mysite# apt-get install mysql-server mysql-client

動作確認

これで、PyCharmで作成したソースコードを、Dockerコンテナ上のUbuntuで動作確認することができます。

ホスト側の環境を壊すこともありません。

最後にrunserverを実行して、Windows上のブラウザで動作確認を行います。

root@393dff996336:~/mysite# python3 manage.py runserver 0.0.0.0:8000

1	root@393dff996336:~/mysite# python3 manage.py runserver 0.0.0.0:8000

Dockerコンテナ（コンテナID：393dff996336）を起動して、ログイン。

MySQLサービスを起動して、作成したユーザでMySQLに接続して、「quit」コマンドで抜ける。

次に、「python3 manage.py runserver 0.0.0.0:8000」で、サーバーを起動する。

ブラウザで、「http://localhost:8000/hello」で動作を確認。「hello」は、Djangoのアプリケーション名。

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.


PS C:¥Users¥user> docker start 393dff996336
393dff996336
PS C:¥Users¥user> docker attach 393dff996336
root@393dff996336:~/mysite# service mysql start
 * Starting MySQL database server mysqld
 No directory, logging in with HOME=/
 [ OK ]
root@393dff996336:~/mysite# mysql -u root -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 4
Server version: 5.7.28-0ubuntu0.18.04.4 (Ubuntu)

Copyright (c) 2000, 2019, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> quit
Bye
root@393dff996336:~/mysite# python3 manage.py runserver 0.0.0.0:8000
Performing system checks...


February 13, 2020 - 12:20:21
Django version 2.1, using settings 'config.settings'
Starting development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.

Windows PowerShell

PS C:¥Users¥user> docker start 393dff996336

393dff996336

PS C:¥Users¥user> docker attach 393dff996336

root@393dff996336:~/mysite# service mysql start

* Starting MySQL database server mysqld

No directory, logging in with HOME=/

[ OK ]

root@393dff996336:~/mysite# mysql -u root -p

Enter password:

Welcome to the MySQL monitor. Commands end with ; or \g.

Your MySQL connection id is 4

Server version: 5.7.28-0ubuntu0.18.04.4 (Ubuntu)

Oracle is a registered trademark of Oracle Corporation and/or its

affiliates. Other names may be trademarks of their respective

owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> quit

Bye

root@393dff996336:~/mysite# python3 manage.py runserver 0.0.0.0:8000

Performing system checks...

February 13, 2020 - 12:20:21

Django version 2.1, using settings 'config.settings'

Starting development server at http://0.0.0.0:8000/

Quit the server with CONTROL-C.

Pocket

現在、コロナにて休止中です。

第２１回プログラミング体験会のご案内

先着１０名、小学生～成人
◆ 現在の申込者数：0名　残席：10名

・人工知能自然会話ロボット
（解説、人工知能実演）
・Scratchプログラミング
（実習、デモ）
・pythonプログラミング
（実習、デモ）

・pythonプログラミング言語について

※　2020年2月26日　現在1名の申込者です。

対象者：小学生～成人（子どもから大人まで）
日時：2020/3/18（水）PM2:00～3:30
場所：高崎市鞘町71　Cafe　あすなろ
（高崎市鞘町71）
場所はこちら
※ 参加費：1,500円、ドリンク代金：350円
※参加ご希望の方は、事前にご連絡ください。
※事前のお申込みなき場合は、参加できません。

※ 参加者が11名以上の場合は、場所変更します。
※ 小学生は、父兄同伴で参加してください。
※ プログラミング、人工知能に興味のある方歓迎です。
※ お申込みは、メニューの「お問合せ」から。

タグ: Django

Django-Bootstrap設定＆利用法

Django-Bootstrap設定＆利用法

Bootstrap

Bootstrapの特徴

Bootstrapのグリッドシステム

Bootstrapの導入

Bootstrapのダウンロードと設定

Djangoプロジェクト構成

「TEMPLATES」に関する設定

「静的ファイル」に関する設定

bootstrapの「starter-template」

Starter template

「django-bootstrap4」を利用する方法

base.htmlの作成

django-bootstrap4の例

cssについて

レスポンシブWebデザインの検証

DockerによるDjango開発環境

DockerによるDjango開発環境

Django-Bootstrap設定＆利用法

Bootstrap

Bootstrapの特徴

Bootstrapのグリッドシステム

Bootstrapの導入

Bootstrapのダウンロードと設定

Djangoプロジェクト構成

「TEMPLATES」に関する設定

「静的ファイル」に関する設定

bootstrapの「starter-template」

Starter template

「django-bootstrap4」を利用する方法

base.htmlの作成

django-bootstrap4の例

cssについて

レスポンシブWebデザインの検証

共有:

DockerによるDjango開発環境

共有: