2024-11-30

ChatGPTを使って、アプリ開発（ワークフロー）４：開発２

 　開発環境用の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 %}**を追加しました。

他の確認ポイント

  1. Djangoのstaticfiles設定が有効か確認:

    • settings.pyでINSTALLED_APPSに'django.contrib.staticfiles'が含まれていることを確認してください。
    • STATIC_URLが正しく設定されているか確認してください。

  2. css/styles.cssの存在確認:

    • ファイルパスが正しいか確認し、DjangoのSTATICFILES_DIRSやstaticディレクトリに正しく配置されているかを確認します。

コマンド実行（静的ファイルの収集が必要な場合）


開発環境では不要ですが、本番環境では以下を実行して静的ファイルを収集します：

「python manage.py collectstatic」



11．「flow_list.html」を修正し、「python manage.py collectstatic」を実行します。
　　※コマンド実行には、「Ctrl　＋　C」でテストサーバーをとめる必要があります。
　　　コマンド実行後は再度、テストサーバーを立ち上げます。







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.」というエラーが出ています。











ChatGPTへのスクリプト：

「<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.」というエラーが出る。


ChatGPTからの回答：

エラーの原因は、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/」にアクセスすると、以下の画面が表示されます。











今日はここまでにします。

次からは、フローを作成する部分の開発を進めます。なお、画面の見た目がいまいちなので、最初にそのあたりの修正を行います。

Posted by at 0 件のコメント:
Labels: ,
登録: 投稿 (Atom)