見出し画像

ChatGPT×Pythonで爆速！画面設計書を自動生成するアプリ作り

ケン吉

アプリ開発の現場ではフロントエンドの画面設計書は重要な役割を果たしています。しかし頻繁に画面の仕様が変わる中で設計書へ変更を反映する作業はとても手間がかかったり、手作業でやっているため見落としやミスの原因にもなりがちです。正確に資料へ変更を落とし込む作業が開発者にとって大きな負担となります。

そこで今回、OpenAI APIとPythonのFlaskを活用して画像から自動的に画面設計書を作成するアプリを開発しました。このアプリでは、お問い合わせフォームなどの画面画像をアップロードするだけで画面設計書をCSV形式で生成できます。生成された設計書は画面上に表示されるだけでなく、ダウンロードボタンをクリックすることで簡単に取得できます。

このアプリを使用することで、自動的に設計書を生成することで作業時間を大幅に削減しつつ変更内容をスムーズに対応できます。「設計書作成は重要だけど地味で時間がかかる」という悩みを解決し、AIを活用して開発効率を最大化できます。本記事では、このアプリの概要と開発プロセスについて詳しくご紹介します。


概要

アプリの概要

  • 画面画像を解析して設計書を自動生成するツールです。

  • ユーザーは解析したい画面画像をアップロードし、その画像はプレビューエリアに表示されます。

  • 「アップロード」ボタンをクリックすると、画面画像の項目や入力形式などが記入されたCSVデータが画面に表示されます。

  • 「CSVを出力する」ボタンをクリックすると生成された画面設計書を簡単にダウンロードできます。

  • 設計書の作成作業を効率化し、時間を大幅に短縮できる便利なアプリです。

この記事で得られるメリット

 画像解析アプリの作り方を習得できる
画像解析アプリの開発を通じて画像のアップロードから解析結果の取得まで一連のフローを習得できます。具体的には、フロントエンドでの画像プレビュー機能の実装、画像データのサーバー送信、サーバー側での処理ロジックの構築が習得できます。これらの技術はOCRや顔認識ツールなどのアプリ開発に役立ちます。

実用的なOpenAI APIの使い方を習得できる
画像解析や自然言語処理の高度なタスクを簡単に実行できるOpenAI APIを使ったアプリ開発を習得できます。また、エラー処理や複数回の試行といった安定したAPIの利用テクニックも習得できます。このスキルは、他のAIのAPIやクラウドサービスを扱う際にも応用できます。

 PythonのWebアプリ開発方法を習得できる
AI分野で存在感を増しているPythonでWebアプリケーションの開発方法を習得できます。Flaskを使った以下のようなWebアプリの基礎を習得できます。

  • ルーティング

  • テンプレートエンジン

  • フォーム処理

  • ファイルアップロード

バックエンドでのデータ処理やフロントエンドとの連携など、Webアプリの実用的な開発プロセスを体験できるため、Pythonのスキルが実践レベルに引き上げられます。

セットアップ

まずはDockerを使ってセットアップをし、FlaskでHallo Worldを表示できるアプリケーションを構築します。

Dockerについては下の記事で軽く説明しているので、よかったら見てみてください！

アプリ開発の準備

デスクトップにアプリのフォルダを作成します。

shell

~/Desktop $ mkdir flask_app
~/Desktop $ cd flask_app

使用するライブラリを記載します。

requirements.txt

Flask==3.0.3
psycopg2-binary==2.9.10
openai==1.55.3
python-dotenv==1.0.1

OpenAIのライブラリはバージョンが更新されて動かなくなることがあるため注意が必要です。

Dockerfileの作成
Dockerfileを作成し、Pythonを使ったFlaskアプリケーションをDockerコンテナで動作させるための設定を記述しています。

Dockerfile

# ベースイメージを指定
FROM python:3.11

# 作業ディレクトリを作成
WORKDIR /app

# 必要なファイルをコピー
COPY . /app

# pipを更新
RUN pip install --upgrade pip

# openaiを更新
RUN pip install --upgrade openai

# 依存関係をインストール
RUN pip install --no-cache-dir -r requirements.txt

# Flaskアプリを起動
CMD ["flask", "run", "--host=0.0.0.0"]
FROM python:3.11

  • 使用するベースイメージを指定しています。この場合は、Python 3.11がインストールされた公式のDockerイメージを使用します。

  • ベースイメージとは、コンテナを構築する際の初期状態のことです。

WORKDIR /app

  • コンテナ内の作業ディレクトリ（/app）を指定します。

  • このディレクトリが、以降のコマンド実行の基準地点となります。

  • ディレクトリが存在しない場合、自動的に作成されます。

COPY . /app

  • ホスト側（ローカル環境）のカレントディレクトリの内容をコンテナ内の/appディレクトリにコピーします。

  • ソースコードや設定ファイルなど、アプリケーションに必要なすべてのファイルをコンテナ内に取り込みます。

RUN pip install --upgrade pip

  • コンテナ内でPythonパッケージマネージャーであるpipを最新版に更新します。

  • 最新のpipを使用することで、依存パッケージのインストールにおける互換性問題を減らします。

RUN pip install --upgrade openai

  • OpenAIのPythonライブラリを最新バージョンに更新します。

  • これにより、OpenAI APIを利用する際の最新機能やバグ修正が適用されます。

RUN pip install --no-cache-dir -r requirements.txt

  • アプリケーションの依存関係を記述したrequirements.txtファイルに基づき、必要なPythonパッケージをインストールします。

  • オプション--no-cache-dirは、キャッシュを使用せずにインストールを行う設定で、不要なファイルをコンテナ内に残さないようにします。

  • これにより、コンテナのサイズを抑えることができます。

CMD ["flask", "run", "--host=0.0.0.0"]

  • コンテナが起動した際に実行されるコマンドを指定します。

  • この場合、Flaskアプリケーションを起動するコマンドを指定しています。

  • --host=0.0.0.0は、コンテナ内のアプリを外部（ホストマシンや他のコンテナ）からアクセス可能にする設定です。

docker-compose.ymlの作成
docker-compose.ymlを作成し、Flaskアプリケーションを実行する環境を設定していきます。

docker-compose.yml

version: '3.9'

services:
  web:
    build: .
    ports:
      - "5001:5000"
    environment:
      - FLASK_APP=app
      - FLASK_ENV=development

version: '3.9'

  • 使用する Docker Compose ファイルのバージョン を指定します。

  • 3.9 は、最新の安定バージョンで、幅広い機能がサポートされています。

services:

  • コンテナ化されたアプリケーションの各「サービス」を定義するセクションです。

  • この場合、web という名前のサービスが定義されています。

 web:

  • Flaskアプリケーションをホストするサービスの名前を指定しています。

  • 以下に、そのサービス内の設定を解説します。

build: .

  • 現在のディレクトリ（.）を指定し、そこにある Dockerfile を基にコンテナイメージをビルドします。

  • Flaskアプリケーションのコードや依存パッケージが含まれているプロジェクトのルートディレクトリを指定しています。

 ports:
      - "5001:5000"

  • コンテナ内のポートをホストマシンのポートに マッピング します。

  • この場合、ホストマシンのポート5001が、コンテナ内で実行されるFlaskアプリケーションのポート5000にマッピングされます。

    • 例: アクセスURLは http://localhost:5001 になります。

    environment:
      - FLASK_APP=app
      - FLASK_ENV=development

  • コンテナ内で使用される環境変数を指定します。

  • 以下の2つの環境変数が設定されています：

    1. FLASK_APP=app

      • Flaskアプリケーションのエントリーポイント（Pythonファイルの名前）を指定します。

      • ここでは、app.py ファイルがエントリーポイントとして設定されています。

    2. FLASK_ENV=development

      • Flaskの動作モードを指定します。

      • developmentモードでは以下の特徴があります：

        • 自動リロード: ソースコードが変更されると自動的にアプリケーションが再起動されます。

        • デバッグモード: 実行中のエラーがブラウザに表示されます。

app.pyの記載
app.pyを作成し、以下のように記載します。

app.py

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "<h1>Hello World!</h1>"
 from flask import Flask

  • Flaskフレームワークをインポートしています。

  • Flask は、PythonでWebアプリケーションを構築するための軽量なフレームワークです。

  • ここでは、Flask クラスを使用してアプリケーションを作成します。

app = Flask(__name__)

  • Flaskアプリケーションのインスタンスを作成しています。

  • Flask(__name__) は、現在のモジュールの名前を指定してアプリケーションを初期化します。

    • __name__ を渡すことで、Flaskがアプリケーションの場所（モジュール名）を認識し、リソースのパス（静的ファイルやテンプレートなど）を正しく設定できるようになります。

@app.route("/")

  • Flaskの ルーティングデコレータ です。

  • @app.route("/") は、このアプリケーションがURL / にアクセスされた場合に、以下の関数を呼び出すように設定します。

    • / はアプリケーションのルートURL（トップページ）を指します。

def index():

  • ルートURLにアクセスされたときに実行される関数を定義します。

  • 関数名は自由に変更可能ですが、ここでは分かりやすく index としています。

return "<h1>Hello World!</h1>"

  • 関数の戻り値としてHTML文字列を返します。

  • このHTMLがブラウザに表示されます。

  • この場合、<h1>Hello World!</h1> というHTMLコードが返されるため、ブラウザには大きな文字（見出し1）で「Hello World!」と表示されます。

アプリの起動
以下のコマンドを実行してコンテナ作成と作成したアプリをコンテナに移動させます。

shell

~/Desktop/flask_app $ docker-compose up --build

以下のURLにアクセスしてブラウザにアプリが表示されれば成功です。

http://127.0.0.1:5001/

OpenAIのAPIを実装

OpenAIのAPI作成

ここからはOpenAIの設定方法を説明します。OpenAIのAPIは有料となっているので、クレジットカードを用意しておきましょう。料金は従量課金制になっていて、あらかじめ料金をチャージしてからAPIを使用します。

ここから先は

22,614字 / 23画像

¥ 500

サポートよろしくお願いいたします！ いただいたサポートの一部ははクリエイターとしての活動費に使わせていただきます！ ※　サポートの一部は子供たちの教育などの団体に寄付する予定です。