【Django】一次関数表示アプリを作成（準備編）［Python］

2021年12月10日2022年12月9日

URLをコピーしました！

Django

前々回までにDjangoを使ってBMI計算アプリを作ってきました。

新規アプリケーションの作成

まずは新規アプリケーションを作成していきます。

ターミナルを開き、これまで使用してきた webappフォルダに移動します。

そして下のコマンドを実行します。

django-admin startapp linearfunction

「django-admin startapp」が新規アプリケーションの作成コマンドで、「linearfunction」がアプリケーション名です。

ちなみにlinear functionというのは、日本語で「一次関数」という意味です。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json
    ├── settings.py
    ├── urls.py
    └── wsgi.py

bmiappに関しては今回からは使用しないので「…」として内容を省略しています。

そして新たに作成されたのは、linearfunctionフォルダ以下のフォルダとファイルです。

次に新しく作成したアプリケーション「linearfunction」の設定をしていきましょう。

/webapp/settings.py, urls.py

まずはwebapp内のsettings.py と urls.py に新しいアプリケーション「linearfunction」を登録します。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json
    ├── settings.py <- これ
    ├── urls.py     <- これ
    └── wsgi.py

settings.pyでは、INSTALLED_APPSにlinearfunctionを追加します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bmiapp',
    'linearfunction',
]

urls.pyでは、linearfunctionのパスを追加します。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('bmiapp/', include('bmiapp.urls')),
    path('linearfunction/', include('linearfunction.urls')),
]

/webapp/linearfunction/urls.py, views.py

次にwebapp > linearfunction内にurls.pyを新規作成し、views.pyを修正します。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py   <- 新規作成
│   └── views.py  <- 修正
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json
    ├── settings.py
    ├── urls.py
    └── wsgi.py

urls.pyを新規作成したら、このように書き込みます。

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index')
]

またviews.pyはこちらのように修正します。

from django.shortcuts import render
from django.http import HttpResponse
import sys
sys.path.append('../')
from webapp import definitions

def index(request):
    params = definitions.readjson()

    return render(request, 'linearfunction/index.html', params)

/webapp/linearfunction/templates/linearfunction/index.html

次に/webapp/linearfunction内にtemplatesフォルダ、そしてそのtemplateフォルダ内にlinearfunctionフォルダを作成し、そのlinearfunctionフォルダ内にindex.htmlファイルを作成します。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── templates            <- 新規作成
│   │   └── linearfunction   <- 新規作成
│   │       └── index.html   <- 新規作成
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json
    ├── settings.py
    ├── urls.py
    └── wsgi.py

そのindex.htmlファイルの中身はこのようにします。

<!doctype html>
{% load static %}
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
    <title>{{ title }}</title>
</head>
<body class="container-fluid">
    <!-- title -->
    <div class="row">
        <div class="col" style="text-align: center; margin:2rem 0rem 2rem 0rem;">
            <a href={{index_url}}><img src="{% static '3pysci_logo.png' %}"></a>
        </div>
    </div>
    <!-- /title -->
    <!-- main&link-->
    <div class="row">
        <!-- main -->
        <div class="col-sm-9" style="text-align: center; margin:2rem 0rem 2rem 0rem;">
            
        </div>
        <!-- /main -->
        <!-- link -->
        <div class="col-sm-3" style="margin:2rem 0rem 2rem 0rem;">
            {% for cat, urls in link.items %}
                <p style="font-weight: bold; ">・{{cat}}</p>
                {% for name, url in urls.items %}
                <p style="text-indent: 1rem;"><a href={{index_url}}{{url}}>{{name}}</a></p>
                {% endfor %}
            {% endfor %}
        </div>
        <!-- /link -->
    </div>
    <!-- /main&link -->
    <!-- copyright -->
    <div class="row">
        <div class="col" style="text-align: center; margin:2rem 0rem 0rem 0rem;">
            {{copyright}}
        </div>
    </div>
    <!-- /copyright -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>

/webapp/webapp/settings.json

次に/webapp/webapp/settings.jsonにlinearfunctionを追加します。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── templates
│   │   └── linearfunction
│   │       └── index.html
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json     <- これ
    ├── settings.py
    ├── urls.py
    └── wsgi.py

新しいカテゴリとして「数学」、新しいWebアプリ名として「一次関数」、URLとして「linearfunction」を追加します。

{
    "title":"3PySci-app",
    "index_url":"https://3pysci-app.com/webapp/",
    "copyright":"Copyright 2021 3PySci.",
    "link":{
        "ライフ":{
            "BMI":"bmiapp"
        },
        "数学":{
            "一次関数":"linearfunction"
        }
    }
}

これでターミナルを起動し、「python3 manage.py runserver」を実行し、サーバーを起動します。

「http://127.0.0.1:8000/linearfunction/」アクセスして、こちらのような画面が表示されれば、準備は完了です。