自然言語での説明の限界

「こんな画面を作って！」といったざっくりした指示でも、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()

結果は…

微妙に思ったのと違うけど、だいぶ近づいた感じ！

次回の記事では、少しずつ情報を追加して、意図通りのコードを生成するための活動を奨めます。次回もお楽しみに。