1.この記事の内容
Webアプリケーション開発のお勉強 #2でサーバの起動までを記載しました．
本記事ではフロントエンドの実装としてBootstrapの導入について記載します．
Bootstrapの導入方法は，下記に示す例のようにインストール方法がいくつかあります．
- コンパイル済みのCSS/JSをインストールする
- ソースコードを運用環境でコンパイルしてインストールする
- jsDelivrから配信されるインストール済みのコードを使用する
- パッケージマネージャを用いてインストールする
今回はオンプレミス環境でもアプリケーションを実行できるよう，コンパイル済みのCSS/JSをダウンロードして組込みます．
本記事では，Bootstrap公式からダウンロードできるダッシュボードのサンプルを動かすまでの手順を記載します．
2.Bootstrap導入手順
2-1.Django-Bootstrap5アプリケーションの構築
PyPiで公開されているdjango-bootstrap5をvirtualenv上に導入し，アプリケーションのベースとするコードを生成します．
ここに，実装するHTMLと接続します．
$ cd <path/to/project>
$ source venv/bin/activate
(venv)$ pip3 install django_bootstrap5 psycopg2-binary
(venv)$ cd django_project/
(venv)$ export ALLOWED_HOSTS="localhost 127.0.0.1 [::1]"
(venv)$ python3 manage.py startapp app
(venv)$ cd ..
(venv)$ deactivate
$ vim django_project/requirements.txt
$ vim django_project/project/settings.py
$ vim django_project/project/urls.py
$ vim django_project/app/views.py
$ touch django_project/app/urls.py
$ mkdir django_project/html
$ touch django_project/html/index.html
django_project/requirements.txtの編集内容
@@ -1,3 +1,4 @@
Django
psycopg2-binary
gunicorn
+django-bootstrap5
django_project/project/settings.pyの編集内容
@@ -40,6 +40,8 @@ INSTALLED_APPS = [
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
+ 'django_bootstrap5',
+ 'app',
]
MIDDLEWARE = [
@@ -57,7 +59,7 @@ ROOT_URLCONF = 'project.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
- 'DIRS': [],
+ 'DIRS': [BASE_DIR, 'html'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
django_project/project/urls.pyの編集内容
@@ -14,8 +14,9 @@ Including another URLconf
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
-from django.urls import path
+from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
+ path('', include('app.urls')),
]
django_project/app/views.pyの編集内容
@@ -1,3 +1,9 @@
from django.shortcuts import render
# Create your views here.
+
+""" Function: index
+ * show index
+"""
+def index(request):
+ return render(request, 'index.html')
+
django_project/app/urls.pyの内容
"""app URL Configuration
"""
from django.urls import path
from . import views
urlpatterns = [
path('', views.index),
]
django_project/html/index.htmlの内容
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
ここまでの対応で，サーバを起動し，http://localhost:1317 へアクセスすると，index.htmlに記述した下図が表示されます．
次節で，index.htmlの内容をBootstrap公式に公開されているダッシュボードのサンプルページに更新します．
$ docker-compose build
$ docker-compose up -d
2-2.ダッシュボードのサンプルの組込み
Bootstrapは公式ホームページのダウンロードページまたはGitHubのreleaseページから取得することができます．
今回は，サンプルコードもダウンロードする為，GitHubからダウンロードする手順を記載します．
なお，本記事で動作確認を行ったのはv5.1.1です．
$ cd <path/to/project>
$ mkdir django_project/static
$ cd django_project/static
$ wget https://github.com/twbs/bootstrap/releases/download/v5.1.1/bootstrap-5.1.1-dist.zip
$ unzip bootstrap-5.1.1-dist.zip
$ mv bootstrap-5.1.1-dist/* .
$ wget https://github.com/twbs/bootstrap/releases/download/v5.1.1/bootstrap-5.1.1-examples.zip
$ unzip bootstrap-5.1.1-examples.zip
$ cp bootstrap-5.1.1-examples/dashboard/dashboard.css ./css
$ cp bootstrap-5.1.1-examples/dashboard/dashboard.rtl.css ./css
$ cp bootstrap-5.1.1-examples/dashboard/dashboard.js ./js
$ cp bootstrap-5.1.1-examples/dashboard/index.html ../html/index.html
$ rm -rf bootstrap-5.1.1-dist.zip bootstrap-5.1.1-dist bootstrap-5.1.1-examples.zip bootstrap-5.1.1-examples
$ cd ../..
$ vim django_project/html/index.html
django_project/html/index.htmlの編集内容
@@ -1,3 +1,4 @@
+{% load static %}
<!doctype html>
<html lang="en">
<head>
@@ -13,7 +14,7 @@
<!-- Bootstrap core CSS -->
-<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
+<link href="{% static '/css/bootstrap.min.css' %}" rel="stylesheet">
<style>
.bd-placeholder-img {
@@ -33,7 +34,7 @@
<!-- Custom styles for this template -->
- <link href="dashboard.css" rel="stylesheet">
+ <link href="{% static '/css/dashboard.css' %}" rel="stylesheet">
</head>
<body>
@@ -278,8 +279,10 @@
</div>
- <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
+ <script src="{% static '/js/bootstrap.bundle.min.js' %}"></script>
- <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
+ <script src="{% static '/js/dashboard.js' %}"></script>
</body>
</html>
ここまでの対応でサーバを起動すると下図のBootstrap公式のダッシュボードのサンプルが表示されます．
サンプルページはDashboardメニューのみで，ページの遷移などは実装されていません．
また，CSS/JSのCore部分はオンプレミス環境で動作するように実装していますが，サンプルページで使用する「feather.min.js」及び「Chart.min.js」はjsDelivrから取得するように実装しています（Bootstrap公式の実装から変更を加えていません）．
3.さいごに
BootstrapのCSS/JSをオンプレミス環境で動作するように組み込み，ダッシュボードのサンプルページを表示するところまでを実装しました．
次回は機械学習を行うため，WebアプリケーションサーバでGPUを認識する手順を記載する予定です．