1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

GPT image 2.0 on Codex Part2 - ゼロから始めるAIシステム開発 #26

1
Posted at

Codexで画像生成 Part2

前回の続き。CodexのアップデートがありGPTimageも2.0になったので実力を確かめつつ、Codexアプリ上で画像生成を行う利点・ユースケースについて書く記事です。前回の続きに加えて、仕様図作成にも有用かどうか試してみる。

エージェンティックな画像生成

Codexで画像生成する場合に、通常のチャット形式で使うよりも期待したい・できそうな点を以下に挙げる。

  • 相談や提案
  • スキル作成・使用
  • 多量のバッチ処理
  • 直接ファイル操作

前回上2つをやってみたので今回はバッチ処理・ファイル操作について試してみる。

アイコンを20個一括作成・一括保存

お題は 富山の名物・名所を描いた単色のアイコンを20個。
image.png
いい感じ。このテイストで作ってもらう。

プロンプト
そのテイストで、リストアップした20の名物のアイコンをGPTimage2.0で描いて、
20個をまとめたPNGファイル(解像度1200*1200)と、
それぞれ一つずつのPNGファイル(解像度200*200)をプロジェクトフォルダに出力してください。

出力は以下の通り。
・20個をまとめたPNGファイル
image.png
・それぞれ一つずつのPNGファイル
image.png
PCのフォルダ内にばっちり出力されている。サイズも指定通り。
全部で20分ほどかかったが、ワンショットでこれだけできればかなり楽。

仕様図作成 on Codex

続いて仕様書からの作図について試してみる。
まずは図の種類について確認。システム開発では、仕様の説明のために以下のような図が使われる。

用途
フローチャート 処理の流れや条件分岐を表す
UML図 クラス構造、処理順序、状態変化などを表す
データフロー図 データがどこから来て、どこへ流れるかを表す
ER図 データベースのテーブルや関係を表す
画面遷移図 画面同士の移動関係を表す

などなど。ちょっと調べただけでももっとある。

UML図とは

UMLは複数の図を含む規格で、以下のような図がある。

UML図 用途
クラス図 クラス、属性、メソッド、関係を表す
シーケンス図 処理のやり取りを時系列で表す
ユースケース図 誰がどの機能を使うかを表す
アクティビティ図 処理や業務の流れを表す
状態遷移図 状態がどのように変化するかを表す

ソフトウェア設計やシステム設計で使われることが多く、特にシーケンス図やクラス図は実務でも見かける機会が多いらしい。

データフロー図とは

データフロー図はUMLとはまた別で「データの流れ」を中心に表す図であり、以下のような内容を整理するために使う。

  • データがどこから入力されるか
  • どの処理で加工されるか
  • どこに保存されるか
  • どこへ出力されるか

テキストで図を描けるツール

これらの図をテキストから生成できる記法やツールがある。代表的なものは以下の通り。

ツール / 記法 得意な図
Mermaid フローチャート、シーケンス図、ER図、状態図
PlantUML UML全般、ER図、状態図、コンポーネント図
Graphviz / DOT 依存関係、ネットワーク、構造図
D2 システム構成図、フロー図、関係図
Structurizr DSL C4モデル、アーキテクチャ図

特にMermaidとPlantUMLは、MarkdownやGit管理と相性が良い。図を画像ファイルではなくコードとして管理できるため、変更履歴を追いやすい、とのこと。

今回は架空のアプリのフローチャートユースケース図をMermaid・PlantUMLで描いた場合と、Codexで描いた場合を比較してみる。

架空の画像管理アプリを図示する

  • 架空の画像管理アプリケーション『Photoris(フォトリス)』を設計
  • 仕様書をLLMにマークダウン形式で書いてもらう(この場合、CodexではなくGeminiを使用)
  • フローチャートをMermaidで、ユースケース図をPlantUMLで書く
  • フローチャートとユースケース図を仕様書からCodexに描いてもらう
  • 両者を比較する
架空アプリの仕様書
# 架空画像管理アプリケーション『Photoris(フォトリス)』製品仕様書

## 1. 概要

### 1.1 製品コンセプト

Photoris(フォトリス)は、AI技術を活用して「散らばった思い出を、一瞬で美しく整理する」をコンセプトとした、個人およびファミリー向けの次世代画像管理アプリケーションです。
スマホのカメラロール、PC、クラウドに分散した写真を一元管理し、高度な検索と自動整理機能を提供します。

### 1.2 ターゲット層

* スマホの写真や動画が数万枚を超え、ストレージや整理に困っているユーザー
* 家族や友人と、特定のイベントや子どもの写真を安全かつ簡単に共有したいユーザー
* 旅行や日常の記録を、アルバムとして綺麗に振り返りたいユーザー

---

## 2. 主要機能要件

### 2.1 画像・動画のインポートと同期

* **マルチデバイス同期:** iOS / Android / Webブラウザからの自動バックアップ。
* **バックグラウンドアップロード:** アプリを閉じている間も、Wi-Fi接続時に自動でアップロードを実行。
* **重複・類似画像の自動検出:** 完全に同一のファイル、または連写された酷似した写真をAIが検出し、整理を提案する。

### 2.2 AI自動整理・タグ付け

* **オブジェクト・シーン認識:** 「猫」「海」「料理」「空」など、被写体やシチュエーションを自動判別してタグを付与。
* **顔認識・人物グループ化:** 写真に写っている人物を認識し、人物ごとに自動でアルバムを生成(名前の命名が可能)。
* **文字認識(OCR):** 写真内のテキスト(レシート、書類、看板など)を読み取り、検索対象にする。

### 2.3 検索とフィルタリング

* **自然言語検索:** 「去年行った沖縄の海の写真」「青い服を着た〇〇ちゃん」といった、曖昧な文章での検索に対応。
* **詳細フィルタ:** 撮影日、撮影場所(地図 UI)、デバイス、ファイル形式、評価(お気に入り)による絞り込み。

### 2.4 共有とコラボレーション

* **共有スペース(共有アルバム):** 特定のユーザーを招待し、共同で写真をアップロード・閲覧・コメントできる機能。
* **スマート共有リンク:** 閲覧有効期限やパスワードを設定できる、外部共有用のURL生成機能。

---

## 3. 画面構成(UI/UX)

アプリは以下の5つのメインタブで構成されます。

| タブ名 | 主な表示内容・機能 |
| --- | --- |
| **ライブラリ** | すべての写真・動画を時系列(日/月/年ビュー)でグリッド表示 |
| **検索・発見** | AIタグ、人物、場所(マップ)、最近のイベントごとの自動カテゴリ表示 |
| **共有** | 参加している共有アルバムの一覧、アクティビティ通知(コメントやいいね) |
| **おすすめ** | AIが自動生成した「〇年前の今日」や「旅行のまとめ」などのメモリームービー |
| **設定** | ストレージ容量の確認、バックアップ設定、アカウント管理 |

---

## 4. 非機能要件・セキュリティ

### 4.1 セキュリティとプライバシー

* **エンドツーエンドの暗号化:** ユーザーのプライベートな写真は、通信時および保存時にすべて暗号化。
* **AI処理のプライバシー制限:** 顔認識データはユーザーのアカウント内のみで管理され、外部の機械学習モデルの公開トレーニングには一切使用しない。
* **生体認証対応:** アプリ起動時に Face ID / Touch ID(またはAndroidの生体認証)を要求する「鍵付きアルバム」機能の搭載。

### 4.2 パフォーマンスと可用性

* **超高速スクロール:** 数万枚の画像を表示する際も、キャッシュ技術とプレビュー用軽量画像の生成(サムネイル最適化)により、遅延のないスクロールを実現。
* **オフライン閲覧:** 直近に閲覧した画像や「お気に入り」に登録された画像はローカルにキャッシュされ、オフラインでも閲覧可能。

---

## 5. 技術スタック(参考)

* **フロントエンド:** Flutter(iOS / Androidの一元開発), React(Web版)
* **バックエンド:** Go / Node.js
* **インフラ:** AWS(Amazon S3 for ストレージ, CloudFront for CDN)
* **AI / 機械学習:** TensorFlow Lite(デバイス側での一次処理), PyTorch(サーバー側での高度な画像解析・ベクトル検索)

フローチャート:Mermaidで描いた場合

以下の通り。(※僕にMarmeidの知識がないのでGemini製。人間が描いたものでないと比較の意味がないと思うので、参考程度に)

フローチャート:Codexで描いた場合

マークダウン形式の仕様書を張り付けて、GPTimage2.0で描け、と指定するとこう返ってきた。
image.png
違うそうじゃない。
「Marmeidで描かれるような、システム開発で使われる一般的なフローチャートを描いて」と要求するとそのままMarmeidの書式で書いてきた。以下の通り。

仕様書にない機序は適当に補完されているようだ。
これをGPTimage2.0で清書して、と頼むと以下の画像。
image.png

ユースケース図:PlantUML

image.png
(※重ねて注釈するが、僕にPlantUMLおよびユースケース図の知識がないのでGemini製。人間が描いたものでないと比較の意味がないと思うので、参考程度に)

ユースケース図:Codex

image.png
PlantUMLの形式で出力させたテキストをPlantUML Online Parserに貼り付けたもの。

Codex直でGPTimage2.0で画像にさせると、4枚ほど試行錯誤した末に以下が出力された。かなり簡略化された印象。
image.png
↓は途中経過
image.png

まとめ

バッチ処理・ファイル操作に関してはばっちり。前回やったスキルも含めてかなり有用。Lovartのように要素別に直接操作したりはできないが、併用することであっちのクレジット消費を抑えることはできそう。
作図に関しては、僕が詳しくないので正確性はわからないがMarmeidやPlantUMLの書式で出してくれるのでこれを調整する形で時短が可能になりそう。画像での出力もスキルを設計すればワンショットでいけるだろう。
Codex、トークン消費もコスパがいいのでガチガチのエンジニアじゃない層にはこれで十分な気はするが、最近はGrokも攻勢をしかけてきて3大AIから4大AIへ…なんて言われているのでまだまだ情勢が固まらない印象。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?