ChatGPTではじめる、実践OOUI

Yuta Kanehara

2023年5月1日 09:05

今回は、仮想の管理画面をOOUI(Object-Oriented User Interface)を用いて設計していくというプロセスを、ChatGPTの助けを借りてやってみたという記事です。

OOUIを実践するためには、オブジェクトの関係性を整理するためにモデリングが不可欠です。しかし、この作業はエンジニアリング的な思考に近いもので、OOUIを実際に検討する人にとっては馴染みにくいものかもしれません。

そこで、ChatGPTによる自然言語ベースのモデリングを行うことで、この障壁をさげ、誰でもOOUIを実践できるのではないか？という試みをやってみました。

結果については実際のやりとりを見ていただければと思いますが、検討を進めるための叩きとしては十二分であり、かなり実用的な結果になっているのではないでしょうか？

なお、OOUI自体については以下の本や記事を参照してください。

以下、ChatGPT(Model: GPT-4)とのやりとりをそのまま記載したものです。

OOUIに基づいてドメイン整理を行い、結果をMermaid記法で出力せよ。このタスクで最高の結果をだすために、追加の情報が必要な場合は、質問をしてください。

❓ Prompt

OOUIに基づいてドメイン整理を行い、結果をMermaid記法で出力せよ。
このタスクで最高の結果をだすために、追加の情報が必要な場合は、質問をしてください。

💬 Answer

OOUI（Object-Oriented User Interface）に基づいてドメイン整理を行うために、特定のドメインやシステムに関する情報が必要です。例えば、ユーザーがどのようなタスクを行う必要があるのか、それらのタスクをサポートするためにどのようなオブジェクトや機能が必要かなどです。

ドメインやシステムに関する詳細情報を提供していただければ、その情報をもとにOOUIに基づいてドメイン整理を行い、Mermaid記法で結果を出力いたします。

店舗と商品の関係性についてモデル化をしたいです。このとき、商品の「売り切れ」「非公開」「販売期間」は商品のマスタ情報とは別に、店舗ごとに設定される値です。

❓ Prompt

店舗と商品の関係性についてモデル化をしたいです。このとき、商品の「売り切れ」「非公開」「販売期間」は商品のマスタ情報とは別に、店舗ごとに設定される値です。

これらの値を、指定した店舗に対して一括で設定できるようなビューをOOUIに基づいて制作をしたいです。

💬 Answer

店舗と商品の関係性を表すために、次のオブジェクトを考慮します。

Store（店舗）
Product（商品）
StoreProduct（店舗の商品）

そして、ビューには次の機能が必要です。

Store の選択
Product の一覧表示
StoreProduct の「売り切れ」「非公開」「販売期間」の設定

これらの情報をもとに、Mermaid記法で表現してみます。

classDiagram
    class Store {
        +id: Integer
        +name: String
    }
    class Product {
        +id: Integer
        +name: String
    }
    class StoreProduct {
        +store_id: Integer
        +product_id: Integer
        +is_sold_out: Boolean
        +is_hidden: Boolean
        +sale_period: DateRange
    }
    Store "1" -- "*" StoreProduct: has
    Product "1" -- "*" StoreProduct: has

ここでは、StoreとProductの間にStoreProductという中間オブジェクトを使用しています。これにより、各店舗ごとに商品の「売り切れ」「非公開」「販売期間」を設定できます。

次に、OOUIに基づいてビューを作成するために、各オブジェクトの操作が必要です。以下に操作を追加し、Mermaid記法で表現します。

classDiagram
    class Store {
        +id: Integer
        +name: String
        +selectStore()
    }
    class Product {
        +id: Integer
        +name: String
        +listProducts()
    }
    class StoreProduct {
        +store_id: Integer
        +product_id: Integer
        +is_sold_out: Boolean
        +is_hidden: Boolean
        +sale_period: DateRange
        +configureStoreProduct()
    }
    Store "1" -- "*" StoreProduct: has
    Product "1" -- "*" StoreProduct: has

この図には、selectStore()（店舗の選択）、listProducts()（商品の一覧表示）、およびconfigureStoreProduct()（店舗の商品の設定）という操作が含まれています。

これにより、指定した店舗に対して一括で商品の「売り切れ」「非公開」「販売期間」を設定できるビューが構築できます。

ビューとオブジェクトの関係性を表す形で図にしてください。

❓ Prompt

ビューとオブジェクトの関係性を表す形で図にしてください。

💬 Answer

ビューとオブジェクトの関係性を表すために、以下のようなビューを追加します。

StoreSelectorView（店舗選択ビュー）
ProductListView（商品一覧ビュー）
StoreProductConfiguratorView（店舗商品設定ビュー）

これらのビューは、それぞれのオブジェクトと連携して機能を提供します。Mermaid記法で表現してみます。

classDiagram
    class Store {
        +id: Integer
        +name: String
    }
    class Product {
        +id: Integer
        +name: String
    }
    class StoreProduct {
        +store_id: Integer
        +product_id: Integer
        +is_sold_out: Boolean
        +is_hidden: Boolean
        +sale_period: DateRange
    }
    Store "1" -- "*" StoreProduct: has
    Product "1" -- "*" StoreProduct: has
    
    class StoreSelectorView {
        +selectStore()
    }
    class ProductListView {
        +listProducts()
    }
    class StoreProductConfiguratorView {
        +configureStoreProduct()
    }
    Store -- StoreSelectorView: uses
    Product -- ProductListView: uses
    StoreProduct -- StoreProductConfiguratorView: uses

この図では、ビューとオブジェクトが関連付けられています。

StoreSelectorViewはStoreを使用して店舗を選択し、ProductListViewはProductを使用して商品の一覧を表示し、StoreProductConfiguratorViewはStoreProductを使用して店舗商品の設定を行います。

これにより、指定した店舗に対して一括で商品の「売り切れ」「非公開」「販売期間」を設定できるビューが構築できます。

ビューは、コレクションビューとシングルビューの2つに分解してください。

❓ Prompt

ビューは、コレクションビューとシングルビューの2つに分解してください。

💬 Answer

ビューをコレクションビューとシングルビューに分解するために、以下のように変更します。

StoreCollectionView（店舗コレクションビュー）
StoreSingleView（店舗シングルビュー）
ProductCollectionView（商品コレクションビュー）
StoreProductConfiguratorView（店舗商品設定ビュー）

これらのビューは、それぞれのオブジェクトと連携して機能を提供します。Mermaid記法で表現してみます。

classDiagram
    class Store {
        +id: Integer
        +name: String
    }
    class Product {
        +id: Integer
        +name: String
    }
    class StoreProduct {
        +store_id: Integer
        +product_id: Integer
        +is_sold_out: Boolean
        +is_hidden: Boolean
        +sale_period: DateRange
    }
    Store "1" -- "*" StoreProduct: has
    Product "1" -- "*" StoreProduct: has
    
    class StoreCollectionView {
        +listStores()
    }
    class StoreSingleView {
        +selectStore()
    }
    class ProductCollectionView {
        +listProducts()
    }
    class StoreProductConfiguratorView {
        +configureStoreProduct()
    }
    Store -- StoreCollectionView: uses
    Store -- StoreSingleView: uses
    Product -- ProductCollectionView: uses
    StoreProduct -- StoreProductConfiguratorView: uses

この図では、ビューがコレクションビューとシングルビューに分解されています。StoreCollectionViewはStoreを使用して店舗の一覧を表示し、StoreSingleViewはStoreを使用して店舗を選択します。

ProductCollectionViewはProductを使用して商品の一覧を表示し、StoreProductConfiguratorViewはStoreProductを使用して店舗商品の設定を行います。

これにより、指定した店舗に対して一括で商品の「売り切れ」「非公開」「販売期間」を設定できるビューが構築できます。

ビュー同士の繋がりについても表現してください。

❓ Prompt

ビュー同士の繋がりについても表現してください。

💬 Answer

ビュー同士の繋がりを表現するために、以下のように変更し、各ビューがどのように連携しているかを示します。

StoreCollectionView（店舗コレクションビュー）
StoreSingleView（店舗シングルビュー）
ProductCollectionView（商品コレクションビュー）
StoreProductConfiguratorView（店舗商品設定ビュー）

Mermaid記法で表現してみます。

classDiagram
    class Store {
        +id: Integer
        +name: String
    }
    class Product {
        +id: Integer
        +name: String
    }
    class StoreProduct {
        +store_id: Integer
        +product_id: Integer
        +is_sold_out: Boolean
        +is_hidden: Boolean
        +sale_period: DateRange
    }
    Store "1" -- "*" StoreProduct: has
    Product "1" -- "*" StoreProduct: has
    
    class StoreCollectionView {
        +listStores()
    }
    class StoreSingleView {
        +selectStore()
    }
    class ProductCollectionView {
        +listProducts()
    }
    class StoreProductConfiguratorView {
        +configureStoreProduct()
    }
    Store -- StoreCollectionView: uses
    Store -- StoreSingleView: uses
    Product -- ProductCollectionView: uses
    StoreProduct -- StoreProductConfiguratorView: uses
    
    StoreCollectionView --> StoreSingleView: selects
    StoreSingleView --> ProductCollectionView: displays
    ProductCollectionView --> StoreProductConfiguratorView: configures

この図では、ビュー同士の繋がりが表現されています。

StoreCollectionViewはStoreSingleViewに店舗を選択し、StoreSingleViewはProductCollectionViewに選択された店舗の商品一覧を表示します。

最後に、ProductCollectionViewはStoreProductConfiguratorViewに選択された店舗と商品の設定を行います。

これにより、指定した店舗に対して一括で商品の「売り切れ」「非公開」「販売期間」を設定できるビューが構築できます。

Storeの上位概念としてCompanyを追加してください。この時、Company:Storeは1:Nです。

❓ Prompt

Storeの上位概念としてCompanyを追加してください。この時、Company:Storeは1:Nです。

💬 Answer

Storeの上位概念としてCompanyを追加し、CompanyとStoreの関係を1:Nに設定します。また、ビューにもCompanyに関連するビューを追加します。

Company（会社）
CompanyCollectionView（会社コレクションビュー）
CompanySingleView（会社シングルビュー）

Mermaid記法で表現してみます。

classDiagram
    class Company {
        +id: Integer
        +name: String
    }
    class Store {
        +id: Integer
        +name: String
    }
    class Product {
        +id: Integer
        +name: String
    }
    class StoreProduct {
        +store_id: Integer
        +product_id: Integer
        +is_sold_out: Boolean
        +is_hidden: Boolean
        +sale_period: DateRange
    }
    Company "1" -- "*" Store: has
    Store "1" -- "*" StoreProduct: has
    Product "1" -- "*" StoreProduct: has
    
    class CompanyCollectionView {
        +listCompanies()
    }
    class CompanySingleView {
        +selectCompany()
    }
    class StoreCollectionView {
        +listStores()
    }
    class StoreSingleView {
        +selectStore()
    }
    class ProductCollectionView {
        +listProducts()
    }
    class StoreProductConfiguratorView {
        +configureStoreProduct()
    }
    Company -- CompanyCollectionView: uses
    Company -- CompanySingleView: uses
    Store -- StoreCollectionView: uses
    Store -- StoreSingleView: uses
    Product -- ProductCollectionView: uses
    StoreProduct -- StoreProductConfiguratorView: uses
    
    CompanyCollectionView --> CompanySingleView: selects
    CompanySingleView --> StoreCollectionView: displays
    StoreCollectionView --> StoreSingleView: selects
    StoreSingleView --> ProductCollectionView: displays
    ProductCollectionView --> StoreProductConfiguratorView: configures

この図では、Companyオブジェクトが追加され、CompanyとStoreの関係が1:Nに設定されています。

また、ビューにもCompanyCollectionViewとCompanySingleViewが追加されています。CompanyCollectionViewはCompanySingleViewに会社を選択し、CompanySingleViewはStoreCollectionViewに選択された会社の店舗一覧を表示します。

残りのビューは以前と同様に機能し、指定した店舗に対して一括で商品の「売り切れ」「非公開」「販売期間」を設定できます。

この関係性を2カラムのレイアウトで表現する場合、メニュー及びコンテンツはどのような構成とするのが良いですか？

❓ Prompt

この関係性を2カラムのレイアウトで表現する場合、メニュー及びコンテンツはどのような構成とするのが良いですか？

💬 Answer

2カラムのレイアウトで表現する場合、左カラムにメニューを配置し、右カラムにコンテンツを表示するとわかりやすくなります。以下に、メニューとコンテンツの構成を示します。
左カラム（メニュー）:

会社一覧 (Company List)
店舗一覧 (Store List)
商品一覧 (Product List)

右カラム（コンテンツ）:

選択された会社の詳細 (Selected Company Details)
選択された会社の店舗一覧 (Store List of Selected Company)
選択された店舗の詳細 (Selected Store Details)
選択された店舗の商品一覧 (Product List of Selected Store)
選択された商品の詳細 (Selected Product Details)
選択された店舗の商品設定 (Store Product Configuration)

この構成では、ユーザーが左カラムのメニューから会社、店舗、商品の一覧を選択できます。

選択すると、右カラムのコンテンツエリアに関連する情報が表示されます。例えば、会社を選択すると、選択された会社の詳細とその店舗一覧が表示されます。

店舗を選択すると、選択された店舗の詳細と商品一覧が表示されます。
最後に、商品を選択すると、商品の詳細と選択された店舗での商品設定が表示されます。

このような2カラムのレイアウトは、情報の階層構造を明確にし、ユーザーが目的の情報にアクセスしやすくします。

6のページの具体的な表現としてはどのような形がよいですか？

❓ Prompt

6のページの具体的な表現としてはどのような形がよいですか？

💬 Answer

6のページ（選択された店舗の商品設定）の具体的な表現として、以下のような形がわかりやすく効果的です。

ページタイトル: 選択された店舗の商品設定
選択された店舗名の表示
フィルタリング機能（例: 商品名で検索）
商品一覧テーブル（各行には以下の情報を表示）
- 商品名
- 商品画像（サムネイル）
- 販売状態（売り切れ、非公開、販売中）
- 販売期間
- 編集ボタン
各商品の編集モーダル（編集ボタンをクリックすると表示）
- 商品名（非編集）
- 売り切れチェックボックス
- 非公開チェックボックス
- 販売期間の開始日・終了日（カレンダー入力）
- 保存ボタン
- キャンセルボタン

このレイアウトでは、選択された店舗名が明確に表示され、ユーザーが現在のコンテキストを把握しやすくなります。

商品一覧テーブルでは、商品の基本情報と編集ボタンが表示されます。編集ボタンをクリックすると、編集モーダルが表示され、ユーザーは各商品の「売り切れ」、「非公開」、および「販売期間」を設定できます。

保存ボタンをクリックすると、設定が適用され、テーブル上の情報も更新されます。

フィルタリング機能を追加することで、大量の商品の中から特定の商品を簡単に見つけることができます。

また、各商品の設定はモーダルで行うため、ページ全体のレイアウトが崩れることなく、直感的に操作できます。

店舗を横断して、複数商品の情報を一括で編集出来るようにしてください。

❓ Prompt

店舗を横断して、複数商品の情報を一括で編集出来るようにしてください。

💬 Answer

複数の店舗を横断して、複数商品の情報を一括で編集できるようにするために、以下の要素を追加します。

店舗選択機能: 複数の店舗を選択できるようにします。
商品一覧テーブル: 選択された店舗の全商品を表示します。
一括編集ボタン: 選択された商品の設定を一括で編集できるようにします。
一括編集モーダル: 選択された商品の設定を一括で編集するためのモーダルです。

以下に、ページの具体的な構成を示します。

ページタイトル: 商品設定の一括編集
店舗選択ドロップダウン（複数選択可能）
フィルタリング機能（例: 商品名で検索）
商品一覧テーブル（各行には以下の情報を表示）
- 商品名
- 商品画像（サムネイル）
- 所属店舗名
- 販売状態（売り切れ、非公開、販売中）
- 販売期間
- 選択チェックボックス
一括編集ボタン
一括編集モーダル（一括編集ボタンをクリックすると表示）
- 売り切れチェックボックス
- 非公開チェックボックス
- 販売期間の開始日・終了日（カレンダー入力）
- 保存ボタン
- キャンセルボタン

このレイアウトでは、ユーザーが複数の店舗を選択して、それらの店舗の商品一覧を表示できます。

商品一覧テーブルには、選択チェックボックスが追加されており、ユーザーは複数の商品を選択できます。

一括編集ボタンをクリックすると、一括編集モーダルが表示され、選択された商品の「売り切れ」、「非公開」、および「販売期間」を一括で編集できます。

保存ボタンをクリックすると、設定が適用され、テーブル上の情報も更新されます。

この機能により、ユーザーは店舗を横断して複数の商品の情報を一括で編集できるようになり、効率的に商品設定を管理できます。フィルタリング機能も引き続き利用できるため、大量の商品の中から特定の商品を簡単に見つけることができます。

また、この機能は、特定のキャンペーンやセール時に複数の店舗で同じ商品の設定を変更する際に特に役立ちます。ユーザーは一度に複数の店舗と商品を選択し、必要な設定を一括で編集することができます。これにより、手間と時間が大幅に削減され、業務効率が向上します。

商品一覧テーブルの内容をテーブル形式で表示して。

❓ Prompt

商品一覧テーブルの内容をテーブル形式で表示して。

💬 Answer

以下に、商品一覧テーブルの内容をテーブル形式で表示します。この例では、3つの店舗（店舗A、店舗B、店舗C）とそれぞれの商品（商品1、商品2、商品3）があると仮定しています。

このテーブルでは、商品名、商品画像、所属店舗名、販売状態（販売中、売り切れ、非公開）、販売期間、および選択チェックボックスが表示されています。

ユーザーはこのテーブルで複数の商品を選択し、一括編集ボタンをクリックして選択された商品の設定を一括で編集できます。

これまでの内容を踏まえて、Store Product Configurationのビューを開発するための要件をまとめてください。

❓ Prompt

これまでの内容を踏まえて、Store Product Configurationのビューを開発するための要件をまとめてください。

💬 Answer

Store Product Configurationのビューを開発するための要件を以下にまとめます。

複数の店舗を選択できる機能。
- 店舗選択ドロップダウン（複数選択可能）を実装する。
商品検索・フィルタリング機能。
- 商品名で検索できるようなフィルタリング機能を実装する。
商品一覧テーブル。
- 商品名、商品画像（サムネイル）、所属店舗名、販売状態、販売期間、選択チェックボックスを表示する。
- 選択された店舗の全商品を表示する。
一括編集ボタン。
- 選択された商品の設定を一括で編集できるようにする。
一括編集モーダル。
- 売り切れチェックボックス、非公開チェックボックス、販売期間の開始日・終了日（カレンダー入力）を含める。
- 保存ボタンとキャンセルボタンを実装する。

これらの要件を満たすことで、ユーザーが複数の店舗を横断して複数商品の情報を一括で編集できるStore Product Configurationのビューを開発できます。

これにより、効率的に商品設定を管理し、特定のキャンペーンやセール時に複数の店舗で同じ商品の設定を変更する際に時間と手間を節約できます。

おいしいごはんでも食べて次の活力にします！