1、暗唱一発で、要件定義書が一発で完成する。
唱えた魔法とは
「Zoltraak "非エンジニアでも大丈夫!営業パーソンのための生成AI活用法 LP サイト"」
とだけ
呟いただけで
以下が一発で出るのだ。。。
しかもこれHaikuで出力してるらしい嘘だろ?まだこの上があるんだぜ!?・・・
成果物:
↓
# 非エンジニアでも大丈夫!営業パーソンのための生成AI活用法 LP サイト
## 1. 目的
本システムの目的は、非エンジニアの営業パーソンが生成 AI を活用して、独自の LP サイトを簡単に作成できるようにすることです。
このシステムは、LP サイトの作成を支援し、ユーザーの生産性向上と販売活動の強化を目指します。
## 2. ファイル・フォルダ構成
```
non-engineer-lp-generator/
├── src/
│ ├── components/
│ │ ├── Header.js
│ │ ├── Footer.js
│ │ ├── SectionBuilder.js
│ │ └── PreviewWindow.js
│ ├── services/
│ │ ├── TemplateService.js
│ │ ├── ContentGeneratorService.js
│ │ └── PublishService.js
│ ├── utils/
│ │ ├── StyleUtils.js
│ │ └── LayoutUtils.js
│ ├── styles/
│ │ ├── global.css
│ │ └── components.css
│ ├── App.js
│ └── index.js
├── public/
│ ├── index.html
│ └── assets/
│ ├── images/
│ └── fonts/
├── package.json
└──
README.md
```
## 3. クラス図
```
--------------- ---------------
| App | | Header |
--------------- ---------------
| - templates | | - logo |
| - content | | - navigation |
| - publishData | ---------------
--------------- ^
^ |
| |
--------------- ---------------
| SectionBuilder| | Footer |
--------------- ---------------
| - sections | | - copyright |
| - sectionTypes| | - links |
| - updateSection| ---------------
--------------- ^
^ |
| |
--------------- ---------------
| PreviewWindow| | TemplateService|
--------------- ---------------
| - previewData | | - getTemplates|
| - updatePreview| | - applyTemplate|
--------------- ^
^ |
| |
--------------- ---------------
| ContentGeneratorService| | PublishService|
--------------- ---------------
| - generateContent| | - publishLP |
--------------- ^
^ |
| |
--------------- ---------------
| StyleUtils | | LayoutUtils |
--------------- ---------------
| - applyStyles | | - layoutSections|
--------------- ^
|
---------------
| LP Website |
---------------
```
## 4. クラスの詳細
### App
- **説明**: アプリケーションの中心となるクラス。ユーザーインターフェースの管理と、他のコンポーネントの調整を行う。
- **属性**:
- `templates`: テンプレートデータ
- `content`: ユーザーが入力したコンテンツデータ
- `publishData`: 公開用のデータ
- **操作**:
- `loadTemplates()`: テンプレートデータを取得する
- `updateContent(content)`: ユーザーが入力したコンテンツを更新する
- `publishLP()`: LP サイトを公開する
### Header
- **説明**: ヘッダーコンポーネント。ロゴと主要なナビゲーションを表示する。
- **属性**:
- `logo`: ロゴ画像
- `navigation`: ナビゲーションメニューのリンク
- **操作**:
- `renderLogo()`: ロゴを表示する
- `renderNavigation()`: ナビゲーションメニューを表示する
### SectionBuilder
- **説明**: LP サイトのセクションを構築するコンポーネント。ユーザーが新しいセクションを追加したり、既存のセクションを編集できる。
- **属性**:
- `sections`: 現在のセクションデータ
- `sectionTypes`: 利用可能なセクションタイプ
- **操作**:
- `addSection(sectionType)`: 新しいセクションを追加する
- `updateSection(sectionIndex, sectionData)`: 既存のセクションを更新する
- `deleteSection(sectionIndex)`: セクションを削除する
### PreviewWindow
- **説明**: LP サイトのプレビューを表示するコンポーネント。ユーザーが作成中のサイトを確認できる。
- **属性**:
- `previewData`: プレビューに表示するデータ
- **操作**:
- `updatePreview(previewData)`: プレビューデータを更新する
### TemplateService
- **説明**: LP サイトのテンプレートを管理するサービス。
- **操作**:
- `getTemplates()`: 利用可能なテンプレートリストを取得する
- `applyTemplate(template, content)`: 指定のテンプレートにユーザーのコンテンツを適用する
### ContentGeneratorService
- **説明**: 生成 AI を使ってユーザーのコンテンツを生成するサービス。
- **操作**:
- `generateContent(prompt)`: 指定のプロンプトに基づいてコンテンツを生成する
### PublishService
- **説明**: LP サイトを公開するサービス。
- **操作**:
- `publishLP(publishData)`: 公開用のデータを使ってLP サイトを公開する
### StyleUtils
- **説明**: LP サイトのスタイルを適用するユーティリティクラス。
- **操作**:
- `applyStyles(element, styles)`: 指定の要素にスタイルを適用する
### LayoutUtils
- **説明**: LP サイトのレイアウトを管理するユーティリティクラス。
- **操作**:
- `layoutSections(sections)`: セクションのレイアウトを調整する
## 5. ユースケース
1. **LP サイトの作成**
- 関連クラス: `App`, `SectionBuilder`, `PreviewWindow`, `TemplateService`, `ContentGeneratorService`, `StyleUtils`, `LayoutUtils`
- 関連メソッド:
- `loadTemplates()`, `updateContent()`, `addSection()`, `updateSection()`, `deleteSection()`, `updatePreview()`, `applyTemplate()`, `generateContent()`, `applyStyles()`, `layoutSections()`
2. **LP サイトのプレビュー**
- 関連クラス: `PreviewWindow`, `TemplateService`, `StyleUtils`, `LayoutUtils`
- 関連メソッド:
- `updatePreview()`, `applyTemplate()`, `applyStyles()`, `layoutSections()`
3. **LP サイトの公開**
- 関連クラス: `App`, `PublishService`
- 関連メソッド:
- `publishLP()`
## 6. シーケンス図
### LP サイトの作成
```
---------- ------------- --------------- ---------------- --------------- ---------------
| App |SectionBuilder|PreviewWindow |TemplateService |ContentGenerator| StyleUtils |
---------- ------------- --------------- ---------------- --------------- ---------------
| |addSection() | | | | |
| |------------->| | | | |
| | |updatePreview()| | | |
| |<-------------|--------------- | | |
| | | |getTemplates() | | |
| | |<--------------|--------------->| | |
| | | |applyTemplate() | | |
| | |<--------------|--------------->| | |
| | |updatePreview()| | | |
| |<-------------|--------------- | | |
|updateContent()| | | |generateContent()| |
|---------->| | | |-------------->| |
| | |updatePreview()| |<--------------| |
| |<-------------|--------------- | | |
| | | | | |applyStyles() |
| | |<--------------|----------------|--------------- -------------->|
| | | | | |layoutSections()|
| | |<--------------|----------------|--------------- -------------->|
```
### LP サイトの公開
```
---------- ---------------
| App |PublishService |
---------- ---------------
|publishLP()| |
|---------->|publishLP() |
| |-------------->|
| |<--------------|
```