開発環境用のWebサーバーを起動させて確認するため、まずはDBにテーブルを作成していきます。
とはいっても、Pycharmのターミナルから操作していきます。
１．「python manage.py makemigrations wf」コマンドを実行します。
２．「python manage.py migrate」コマンドを実行し、DBにテーブルを作成します。
３．Webブラウザでのアクセスに対する処理を設定します。
①「mysite」の「urls.py」を以下のように設定します。
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('accounts/', include('django.contrib.auth.urls')),
path('wf/', include('wf.urls')),
]
②「wf」を右クリックし、「新規」→「Pythonファイル」をクリックします。
③「urls.py」と入力し、「Enter」を押して、ファイルを作成します。
④作成した「urls.py」を以下のように設定します。
from django.urls import path
from . import views
urlpatterns = [
path('', views.flow_list, name='flow_list'), # トップページ
]
４．フロー一覧ビューのテンプレートを作成します。
①「templates」を右クリックし、「新規」→「ディレクトリ」をクリックします。
②「workflow」と入力し、「Enter」を押して、ファイルを作成します。
③「workflow」を右クリックし、「新規」→「HTML ファイル」をクリックします。
④「flow_list.html」と入力し、「Enter」を押して、ファイルを作成します。
⑤「flow_list.html」の中身はChatGPTから回答のあった以下のコードを張り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フロー一覧</title>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
<h1>フロー一覧</h1>
<!-- フローの新規作成ボタン -->
<a href="{% url 'flow_create' %}" class="btn btn-primary">新規作成</a>
<!-- ユーザーが作成したフローの一覧 -->
{% if flows %}
<table class="table">
<thead>
<tr>
<th>フロー名</th>
<th>作成日</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for flow in flows %}
<tr>
<td>{{ flow.name }}</td>
<td>{{ flow.created_at|date:"Y/m/d H:i" }}</td>
<td>
<!-- 編集ボタン -->
<a href="{% url 'flow_edit' flow.id %}" class="btn btn-warning">編集</a>
<!-- 削除ボタン -->
<form action="{% url 'flow_delete' flow.id %}" method="post" style="display:inline;">
{% csrf_token %}
<button type="submit" class="btn btn-danger" onclick="return confirm('本当に削除しますか？');">削除</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>フローがまだ作成されていません。</p>
{% endif %}
</body>
</html>
５．管理権限を持ったユーザー（スーパーユーザー）を登録します。
※今回は、「admin」で登録します。
「python manage.py createsuperuser」を実行し、ユーザーID、メールアドレス、パスワード、パスワード（確認）を入力します。
6．開発環境用のWebサーバーを起動させます。
７．Webブラウザのアドレス欄に「http://127.0.0.1:8000/admin/」と入力し、アクセスします。先ほど登録したユーザーのIDとパスワードを入力し、「ログイン」をクリックします。
８．以下の画面が表示されたらログインできています。
９．Webブラウザのアドレス欄に「http://127.0.0.1:8000/wf/」と入力し、作成した「flow_list.html」画面を開きます。
この時、エラーが発生しました。７行目のところで、「Invalid block tag on line 7: 'static'. Did you forget to register or load this tag?」というエラーが出ています。
10．ChatGPTに聞いてみます。
ChatGPTへのスクリプト：
テンプレート開いたときに「<link rel="stylesheet" href="{% static 'css/styles.css' %}">」の部分で、「Invalid block tag on line 7: 'static'. Did you forget to register or load this tag?」というエラーが出た。原因と対処は？
ChatGPTからの回答：
エラーの原因は、テンプレートで{% static %}タグを使用する際に必要なstaticテンプレートタグライブラリがロードされていないためです。このタグを使用するには、テンプレート内で最初に{% load static %}を記述する必要があります。
修正方法は以下の通りです。
修正後のテンプレート
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フロー一覧</title>
{% load static %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
<h1>フロー一覧</h1>
<!-- フローの新規作成ボタン -->
<a href="{% url 'flow_create' %}" class="btn btn-primary">新規作成</a>
<!-- ユーザーが作成したフローの一覧 -->
{% if flows %}
<table class="table">
<thead>
<tr>
<th>フロー名</th>
<th>作成日</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for flow in flows %}
<tr>
<td>{{ flow.name }}</td>
<td>{{ flow.created_at|date:"Y/m/d H:i" }}</td>
<td>
<!-- 編集ボタン -->
<a href="{% url 'flow_edit' flow.id %}" class="btn btn-warning">編集</a>
<!-- 削除ボタン -->
<form action="{% url 'flow_delete' flow.id %}" method="post" style="display:inline;">
{% csrf_token %}
<button type="submit" class="btn btn-danger" onclick="return confirm('本当に削除しますか？');">削除</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>フローがまだ作成されていません。</p>
{% endif %}
</body>
</html>
修正ポイント
<head>内の<link rel="stylesheet" href="{% static 'css/styles.css' %}">を正しく動作させるために、**{% load static %}**を追加しました。
<head>内の<link rel="stylesheet" href="{% static 'css/styles.css' %}">を正しく動作させるために、**{% load static %}**を追加しました。他の確認ポイント
Djangoのstaticfiles設定が有効か確認:
settings.pyでINSTALLED_APPSに'django.contrib.staticfiles'が含まれていることを確認してください。STATIC_URLが正しく設定されているか確認してください。
css/styles.cssの存在確認:
- ファイルパスが正しいか確認し、Djangoの
STATICFILES_DIRSやstaticディレクトリに正しく配置されているかを確認します。
Djangoのstaticfiles設定が有効か確認:
settings.pyでINSTALLED_APPSに'django.contrib.staticfiles'が含まれていることを確認してください。STATIC_URLが正しく設定されているか確認してください。
css/styles.cssの存在確認:
- ファイルパスが正しいか確認し、Djangoの
STATICFILES_DIRSやstaticディレクトリに正しく配置されているかを確認します。
コマンド実行（静的ファイルの収集が必要な場合）
12．再び、「http://127.0.0.1:8000/wf/」にアクセスしますが、以下のように14行目の「<a href="{% url 'flow_create' %}" class="btn btn-primary">新規作成</a>」の部分で、「Reverse for 'flow_create' not found. 'flow_create' is not a valid view function or pattern name.」というエラーが出ています。
エラーの原因は、flow_createという名前付きURLパターンがurls.pyに定義されていないためです。テンプレートで{% url 'flow_create' %}を使用するには、対応するURLパターンをurls.pyに定義し、その名前をflow_createにする必要があります。
以下に修正方法を示します。
修正方法
1. views.pyにflow_createビューを追加
from django.shortcuts import render, redirect
# フロー作成ビュー
def flow_create(request):
if request.method == 'POST':
# フォームの処理を追加
# 新しいフローを作成し保存する
return redirect('flow_list')
return render(request, 'flow_create.html')
2. urls.pyにflow_createを追加
from django.urls import path
from . import views
urlpatterns = [
path('', views.flow_list, name='flow_list'), # トップページ
path('create/', views.flow_create, name='flow_create'), # フロー作成
]
3. flow_create.htmlテンプレートを作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フロー作成</title>
</head>
<body>
<h1>新しいフローを作成</h1>
<form method="post">
{% csrf_token %}
<label for="name">フロー名：</label>
<input type="text" name="name" id="name" required>
<button type="submit">作成</button>
</form>
<a href="{% url 'flow_list' %}">戻る</a>
</body>
</html>
追加で確認するポイント
- URLの変更に伴う影響:
- 既存コードやリンクで
flow_createを参照している箇所がないか確認し、必要に応じて修正してください。
- 既存コードやリンクで
- テンプレートに適切なエラーメッセージやバリデーションを追加:
- 作成フォームの入力エラーメッセージなどを処理できるようにしましょう。
これでflow_createのURLが正しく動作し、エラーが解消するはずです。
ChatGPTの回答に基づいて、コードの追加、テンプレートの追加を行い、再び、「http://127.0.0.1:8000/wf/」にアクセスすると、以下の画面が表示されます。
今日はここまでにします。
次からは、フローを作成する部分の開発を進めます。なお、画面の見た目がいまいちなので、最初にそのあたりの修正を行います。
.jpg)
