これから、ChatGPTと会話をしながら、開発を進めていきたいと思います。
ChatGPTへのスクリプトは青文字で、ChatGPTからの回答を赤文字で記載していきます。
まずは全体構想を伝えます。
ChatGPTへのスクリプト：
Djangoでワークフローツールを作成したい。
基本構想は以下の通り。
１．ユーザーがフローを作成する
２．作成したフローをユーザーが使用する。
詳細は以下のとおりとする
〇フロー作成部分
１．ユーザーがフロー作成/編集ページjにアクセスする。
２．ユーザー本人が作成したフローに一覧が表示される
３a．一覧のフローを選択 →フロー作成ページに遷移し、選択したフローを表示
４．「更新」ボタンをクリック →変更があれば保存
５．「削除」ボタンをクリックする →「本当に削除しますか？」とメッセージを出す
６．「OK」をクリック →フローデータを削除
３b・「新規作成」ボタンをクリック →フロー作成ページに遷移する。タスクを作成するエリアには、「START」と「END」のボックスをデフォルトで表示する
２．フロー名を入力
３．タスクを作成する
①「タスク作成」をクリック
→四角いボックスが画面上に作成される。
②タスク名をボックス内の入力欄に入力
③ボックス内の「入力項目設定」ボタンをクリック
→ポップアップが開く
④項目名（日本語）の入力と、データ型の選択および必須かどうかの選択を行う。データが文字型の場合、文字数の入力も行う。
⑤「作成」ボタンをクリックする
→すでに登録済の入力項目がある場合はその下に、ない場合は「作成」ボタンの下に追加せれる。この時、項目名の左に「削除」ボタンを配置し、「削除」ボタンをクリックしたら項目を削除する
⑥さらに項目を追加する場合は、④～⑤を繰り返す。
⑦このタスクの処理をする人を個人、あるいは、別途マスタで設定したクラスで設定する
４．フローを作成する
①作成されたタスクを→で結ぶ
②分岐、並列処理もできるようにそれぞれを記号で表現する。
③並列処理の場合、合流記号で合流させる
④並列処理の場合、並列処理すべての完了を待つか、いずれか１つでも完了したら次に進むかを設定する
５．「登録」ボタンをクリック
→フローが保存され、「home」ページに遷移
６．作成済フロー一覧を選択
７． ８．一覧のフローを選択
→フロー作成ページに遷移し、選択したフローを表示
９．「更新」ボタンをクリック
→変更があれば保存
１０．「削除」ボタンをクリックする
→「本当に削除しますか？」とメッセージを出す
１１．「OK」をクリック
→フローデータを削除
〇フローの使用
１．ユーザーが「ワークフロー」を選択
→ユーザーが使用可能な一覧のページに遷移
２．フローを選択する
→登録されている入力項目を表示する。
３．入力欄に入力
４．次の処理者が個人指定されていない場合は、次の処理者を選択する
５．「実行」ボタンをクリック
６．処理者と処理日時を記録し、次の処理者へ回す。
ChatGPTからの回答：
Djangoを使用して、ワークフローツールの作成構想はしっかりしていますね。このプロジェクトを実装するためには、以下のステップで進めることが考えられます。
1. プロジェクトのセットアップ
- Djangoプロジェクトを作成し、必要なアプリケーション（例: workflow、tasks）を設定します。
- フローデータを管理するためのモデルを設計します。たとえば、「Flow」「Task」「InputField」「UserAction」などのモデルを定義します。
2. モデルの設計
以下は、想定されるモデルの概要です。
Flowモデル
from django.db import models
from django.contrib.auth.models import User
class Flow(models.Model):
name = models.CharField(max_length=100)
creator = models.ForeignKey(User, on_delete=models.CASCADE)
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
Taskモデル
from django.db import models
class Task(models.Model):
flow = models.ForeignKey(Flow, on_delete=models.CASCADE)
name = models.CharField(max_length=100)
order = models.IntegerField() # タスクの順序を管理するフィールド
next_tasks = models.ManyToManyField('self', symmetrical=False)
InputFieldモデル
rom django.db import models
class InputField(models.Model):
task = models.ForeignKey(Task, on_delete=models.CASCADE)
field_name = models.CharField(max_length=100)
field_type = models.CharField(max_length=50, choices=[('text', 'Text'), ('number', 'Number')])
required = models.BooleanField(default=False)
max_length = models.IntegerField(null=True, blank=True)
UserActionモデル
from django.db import models
class UserAction(models.Model):
task = models.ForeignKey(Task, on_delete=models.CASCADE)
user = models.ForeignKey(User, on_delete=models.CASCADE)
completed_at = models.DateTimeField(null=True, blank=True)
3. ビューとテンプレート
ユーザーがフローを作成・編集するためのビューや、フロー一覧表示、タスク作成ページのビューを作成します。
フロー一覧ビュー
from django.shortcuts import render
from .models import Flow
def flow_list(request):
flows = Flow.objects.filter(creator=request.user)
return render(request, 'workflow/flow_list.html', {'flows': flows})
タスク作成ページのビュー
from django.shortcuts import render, get_object_or_404
from .models import Flow, Task
def task_create(request, flow_id):
flow = get_object_or_404(Flow, id=flow_id)
if request.method == 'POST':
# タスク作成ロジック
pass
return render(request, 'workflow/task_create.html', {'flow': flow})
4. JavaScriptでの動的操作
タスクのドラッグ＆ドロップや、分岐・並列処理の結合を表現するために、フロントエンド側でJavaScriptを使用して、動的なUIを実装します。
たとえば、ドラッグ＆ドロップの機能を追加するために「jsPlumb」などのライブラリを使用するのが考えられます。
5. ユーザーのフロー実行
実行時にフローに沿って入力項目を表示し、データを送信・次の処理者へ渡すためのロジックを実装します。
実行ページのビュー
def execute_flow(request, flow_id):
flow = get_object_or_404(Flow, id=flow_id)
tasks = flow.task_set.all() # タスクの一覧を取得
if request.method == 'POST':
# 入力データを受け取り処理
pass
return render(request, 'workflow/execute_flow.html', {'flow': flow, 'tasks': tasks})
6. ワークフローの状態管理
タスクの進捗状況や次の処理者を追跡するため、各タスクの状態を「完了」「保留」などで管理し、次の処理に適切に引き継ぎます。
7. フローデータの保存と削除
フローを保存・更新する場合や、削除時の確認メッセージはDjangoのフォームやJavaScriptで実装します。
8. テストとデプロイ
すべての機能をテストし、Djangoサーバーで動作確認後、HerokuやAWSなどでデプロイを行います。
上記の流れを基本に、詳細設計を進めていくと良いでしょう。
ChatGPTへのスクリプト：
フロー一覧ビューのteｍplateのコードは？
ChatGPTからの回答：
フロー一覧ビューのテンプレートコードは、ユーザーが作成したフローのリストを表示し、それぞれのフローに対して編集、削除、新規作成ボタンを提供する形式にできます。以下はその例です。
フロー一覧ビューのテンプレート (flow_list.html)
<!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>
説明
{% for flow in flows %}: これは、Djangoテンプレートの繰り返し構文で、flows変数内のフローを1つずつ表示しています。- フロー名と作成日: フローの名前と作成日をそれぞれのテーブル列に表示しています。
- 編集ボタン:
flow_editビューへのリンクを提供し、クリックで選択したフローの編集ページに遷移します。 - 削除ボタン: 削除時に確認メッセージを表示し、ユーザーが確認したら削除アクションを実行します。
このテンプレートは、シンプルなリスト表示で、ユーザーがフローを編集・削除・新規作成できるように構成されています。
ChatGPTからの回答をもとに、開発作業を進めます。実際には、回答で得たコードを実際にコーディング（というか、コピペ）して、動作確認をしながら、追加の要望をChatGPTに投げかけて、追加、改造していく形になります。
次回から実際に開発環境用のWebサーバーを起動させて、コードの動作確認を行いながら、アプリをブラシュアップしていきます。