本記事では、PythonとChatGPT-4oを活用して、生成AIを用いた設計の具体例を示します。実行環境は以下の通りです。
- OS: Windows 11
- 開発言語: Python
- 利用AI: ChatGPT-4o
自然言語での説明の限界
「こんな画面を作って！」といったざっくりした指示でも、ChatGPTはそれなりに応えてくれます。例えば、こんな感じで指示を出してみました。。
これに書かれていることを
パイソン使って描ける?
ただしノートパット使ってるところは自前の画面にしたい、入力はクリップボードかテキストエリアをラジオボタンで選択可能です。
暗号化したメッセージはクリップボードに入れてほしい
復号化するときもクリップボードからすること
https://qiita.com/shupeluter/items/d998906d1838b318fdc2
UIの操作とその後の処理は別に分けて。
画面はシンプルなボタン構成。
鍵作成、暗号化、復号化の３つのボタンで構成
鍵受け入れ作って
すると、ChatGPTはそれなりの形で画面を作ってくれました。
しかし、これが 「思ってたのと違う！」 という状態です。道のりははるか遠そうです。
言葉だけじゃ伝わらない！
ChatGPTとやりとりを重ねても、細かい部分でズレが発生しがちです。
- ボタンの配置が違う
- ラジオボタンとチェックボタンを取り違える
といった問題が頻発し、手直しが増えてしまいます。
ワイヤーフレームを活用する
そこで、 ワイヤーフレーム を添えて指示を出すことに。
ワイヤーフレームとは、画面のレイアウトをざっくり描いた設計図のようなもの。これがあると、
- どこに何が配置されるのか
- ボタンや入力欄の種類
- 操作の流れ
を明確にするのに役立ちます。
ワイヤーフレーム作成ツールの選定
ワイヤーフレーム作成ツールは色々ありますが、選定基準をこんな感じにしました。
- 無料で使えるか？（コストの問題）
- テキストベースフォーマットを利用できるか?（AIとの親和性）
- CUIが用意されているか？（CI/CD活用）
- プラグインや拡張機能が充実しているか？（機能の拡張性）
といったポイントを考慮し、いくつかのツールを比較すると。
候補ツール
| 選定基準 | Figma | Draw.io | Balsamiq | Excalidraw | Penpot | Wireframe.cc |
|---|---|---|---|---|---|---|
| 無料プラン | あり | あり | なし | あり | あり | あり |
| テキストフォーマット対応 | ◯ | △ | × | △ | ◎ | × |
| CUI対応 | × | ◎ | × | × | ◯ | × |
| 拡張性 | ◯ | ◯ | △ | △ | ◎ | △ |
Draw.ioは無料で使えて、CUIにも対応しているので、AIとの連携がしやすいのがポイント。
Draw.ioを使ってみる
まずは環境を整えます。コマンドプロンプトを管理者モードで起動し
>winget install --id JGraph.Draw
その後、以下の環境変数を設定。
| No | 環境変数名 | 設定値(参考値) | 備考 |
|---|---|---|---|
| 1 | draw_home | C:\Program Files\draw.io | インストール先のディレクトリ |
| 2 | path | %dara_home% |
コマンドプロンプトで設定する場合は以下のコマンドを利用
setx draw_home "C:\Program Files\draw.io"
setx path %PATH%;%draw_home%
コマンド実行後、コマンドプロンプトを再起動すればOK。
2. AIを活用したワイヤーフレーム生成の流れ
-
プロンプトでワイヤーフレームの構造を定義
まず、Draw.ioでワイヤーフレームを描きます。
こんな感じに。
次に、ワイヤーフレームをAIが扱いやすいフォーマット（SVG）に変換。
>`draw.io --export --format=svg --output=output.svg <input>.drawio
> type output.svg |clip
このコマンドで生成したsvgの内容をクリップボードにコピーできるという寸法です。
3.実際にやってみた
試しに、先ほどの絵を使って
以下のプロントで生成すると。。。
Pythonで次の画面を作りたい。
<svgの内容>
そして、生成されたコードがこちら。
import tkinter as tk
class SimpleGUI:
def __init__(self, root):
self.root = root
self.root.title("SVG風レイアウト")
self.root.geometry("392x242")
# メニュー領域
self.menu_frame = tk.Frame(root, bg="white", height=20, relief="solid", borderwidth=1)
self.menu_frame.pack(fill="x", padx=1, pady=1)
# Main領域
self.main_frame = tk.Frame(root, bg="white", height=110, relief="solid", borderwidth=1)
self.main_frame.pack(fill="x", padx=10, pady=5)
# オペレーション領域
self.operation_frame = tk.Frame(root, bg="white", height=40, relief="solid", borderwidth=1)
self.operation_frame.pack(fill="x", padx=10, pady=5)
# メッセージ領域
self.message_frame = tk.Frame(root, bg="white", height=40, relief="solid", borderwidth=1)
self.message_frame.pack(fill="x", padx=10, pady=5)
# 各領域にラベルを配置
tk.Label(self.menu_frame, text="Menu").pack()
tk.Label(self.main_frame, text="Main領域").pack()
tk.Label(self.operation_frame, text="オペレーション領域").pack()
tk.Label(self.message_frame, text="メッセージ領域").pack()
if __name__ == "__main__":
root = tk.Tk()
app = SimpleGUI(root)
root.mainloop()
結果は…
微妙に思ったのと違うけど、だいぶ近づいた感じ！
次回の記事では、少しずつ情報を追加して、意図通りのコードを生成するための活動を奨めます。次回もお楽しみに。