D001 BUYMAアシスタント Webアプリ化実装計画

元MD: d001-webapp-migration.md / 変換: 2026-07-02 11:28

📌 目的・ゴール
項目内容
目的GAS+スプシからSupabase+Cloudflare Pagesへ移行し、白井さんの出品作業工数を削減
完了定義Phase2完了時:スプシを使わずに全出品フローが完結する
制約白井さんの作業(コピペ・セルフチェック・提出)は変えない/maikoアカウント触らない
参照アプローチ再検討レポート 00_秘書業務/レポート/2026-06-30_buyma-app-approach-review.html
🔔【最新・最上位プラン】統合出品作業Webアプリ化(2026-07-02改訂)
⚠️ これ以降のセクションは過去の検討経緯(Phase1/Phase2、D027移行検討)です。現在の正式な方針は本セクション。白井さんの最終確認:「①スプシ廃止・maikoさんリスト起点でSupabase投入、②進捗管理と出品作業を1つの統合Webアプリにまとめる」の2点は合意済み。

目的・ゴール

項目内容
目的出品作業と進捗管理を1つの統合Webアプリで完結させる。データソースはSupabase(buyma-companyプロジェクト)に一本化し、スプレッドシートは入力データとして廃止する
完了定義1つのアプリの中で「商品一覧(進捗状況込み)→ 出品作業(25カード、mock_webapp_v4準拠のUI/UX)→ 完了処理」が一気通貫でできる状態
データフロー(将来像)①maikoさんの元リスト → ②Supabase(productsテーブル)に追加 → ③それに対して出品作業を行う(②の取り込み部分は別途仕様検討・Stage B)
制約白井さんの作業(コピペ・セルフチェック・提出)は変えない/maikoアカウント触らない/白井カンパニーのSupabase(pgoxywakdxekffibghve)には触れない(既にbuyma-companyとして完全分離済み)

🚨 現状の反省:モックの内容が実装に反映されていない

2026-07-02に「出品作業.html」を実データで新規実装したが、mock_webapp_v4.htmlで白井さんと確認・確定してきたUI/UXを反映せず、簡易的な再実装をしてしまった。これは誤り。以下のギャップがある。

mock_webapp_v4.htmlにある機能出品作業.html(現状)対応
カードごとの📝メモ欄(折りたたみ式、気づき記録用)なし実装する
カード編集機能(✏️編集:シンプル項目はインライン編集、商品コメントはモーダルで③④のみ編集可)なし(表示のみ)実装する
型番/識別メモカード:型番と識別メモを2段に分け、色ごとに個別コピー1つのテキストとして表示実装する
購入期限カード:第2/第4月曜を自動計算し、選ぶと自動で次のカードへ通常の1カードとして表示実装する
カードごとのGUIDE説明文(操作のヒント)なし実装する
カードタイプ別の見た目・ボタン文言(コピー/選択/画像フォルダ/特殊)ボタンの出し分けのみで装飾なしmock準拠のデザインに合わせる
出品一覧画面:8ステップフロー表示・ステータス更新ボタン・maikoさんへ依頼文モーダル・期限切れバッジ別ファイル(BUYMA管理.html)に一部あるが出品作業とは統合されていない統合する
完了画面:セルフチェックリスト・備考メモ・クララチェック依頼ボタンステータスと下書きURL入力のみ実装する
管理者モード(全項目編集)なし優先度低・後回し可

実装方針

  • 1
    ゼロから作り直さないmock_webapp_v4.htmlのHTML/CSS/JS構造をベースに、ハードコードされたダミーデータ部分をSupabase(productsテーブル)からの実データ取得・書き込みに置き換える形で実装する
  • 2
    進捗管理(BUYMA管理.htmlの内容:確認待ち・タスク・月次サマリ・開発進捗)を出品一覧画面に統合し、1つのアプリ(1つのHTMLファイル、もしくは同一ナビゲーション内の画面遷移)として完結させる。iframeタブでの寄せ集めはやめる
  • 3
    25カード全てについて、mockのカードタイプ(A/C/D/E)ごとの挙動・デザイン・GUIDEを実データに対して忠実に再現する

🚨 進捗データの保全(絶対に壊さない・実装前提条件)

⚠️ 白井さんより明確な指示:「BUYMA管理アプリに既に入っている進捗状況(ロジック・データ)を絶対に壊さないこと。壊れた場合に復元できる手段を確保してから実装にあたること」

バックアップ取得済み(2026-07-02 11:27実施・実装着手前の状態を保全)

ファイル内容件数
バックアップ/buyma_listings_backup_20260702_112701.json旧共有プロジェクト(pgoxywakdxekffibghve)の出品進捗全件22件
バックアップ/buyma_tasks_backup_20260702_112701.json旧共有プロジェクトのBUYMAタスク0件
バックアップ/buyma_confirmations_backup_20260702_112701.json旧共有プロジェクトの確認待ち1件
バックアップ/products_backup_20260702_112701.json新BUYMAカンパニー専用プロジェクト(svyddjimrdmwnuzpnwur)の商品カードデータ9件
バックアップ/restore.py復元スクリプト。python3 restore.py <table名> <backupファイル> でUPSERT復元可能(id一致行は上書き、新規行は追加。既存データを無条件で消すことはない)

運用ルール(実装中〜完了まで厳守)

  • 1
    🚨 productsテーブルのスキーマ変更(列追加・削除・型変更)を行う前に、必ずその時点の最新データを再バックアップする
  • 2
    🚨 既存のpipeline_statuscurrent_stepdraft_urlpurchase_deadline等の進捗系カラムの値を、実装作業の都合で消去・上書きしない(統合実装後もこれらの値は保持されたまま引き継ぐ)
  • 3
    🚨 破壊的なSQL(DELETETRUNCATEDROP/スキーマ変更を伴うALTER TABLE)を実行する場合は、事前に白井さんに確認する(実行前提条件)
  • 4
    実装の各ステップ完了後、productsテーブルの件数・主要フィールド(seq_no・pipeline_status)をバックアップ時点と突合し、差分がないか確認してから次のステップに進む
  • 5
    万が一データが壊れた場合は python3 バックアップ/restore.py <table名> <backupファイル> で直前のバックアップ状態に復元する

全体の作業フロー

Step
1
mock_webapp_v4.htmlの全画面・全機能を棚卸し
出品一覧/出品作業(25カード分の型・編集・メモ機能)/完了画面/クララチェック画面の仕様を一覧化
Step
2
統合アプリの土台を作成
mock_webapp_v4.htmlをベースに、進捗管理(BUYMA管理.html相当)と出品作業を1つのナビゲーションに統合
Step
3
出品一覧画面をSupabase実データに接続
8ステップフロー・ステータス更新・maiko依頼文モーダル・期限切れバッジを実データで動作させる
Step
4
出品作業画面(25カード)をmock準拠で実装
カードメモ・編集機能・型番2段構成・購入期限自動計算・GUIDE文をSupabase実データに対して実装
Step
5
完了画面をmock準拠で実装
セルフチェックリスト・備考メモ・下書きURL保存・クララチェック依頼を実データで動作させる
Step
6
統合アプリを一通り試用
実際に1〜2商品分の出品作業を通しで行い、mockと体験が一致しているか確認
白井さん
Step
7
Stage B(maikoさんリスト→Supabase取り込み)の仕様検討に着手
別途、取り込みロジック・自動化のタイミングを設計する
両方

Stage分け

Stage内容状態
Stage A(今回)統合Webアプリ化。mock_webapp_v4準拠のUI/UXを実データ(Supabase buyma-company)に実装プラン確定・実装未着手
Stage B(別途)maikoさんの元リストからSupabaseへの自動取り込みパイプライン仕様未検討
Stage C(将来)白井カンパニー側(D027・GASスプシ)からの完全離脱・廃止未着手

🔔 方針確定(2026-07-02):お試し並行稼働2〜3日→D001に一本化予定、進捗管理はD001がメイン
⚠️ 白井さんより明確化:「恒久的な並行稼働ではない。2〜3日使ってみて問題なければD001アプリのみにしたい。進捗管理はD001で実施すればよい。D027は白井さんが更新したい時だけ口頭指示でソラが手動更新する」
対象運用方針
商品データ・出品作業(GASウェブアプリ+出品アシスタントスプシ)念のため2〜3日は現行のGASウェブアプリ運用も残す(お試し並行稼働)。D001アプリで問題なく作業できることを確認できたら、GASウェブアプリ運用は終了しD001アプリに一本化する
進捗管理(確認待ち・タスク・出品進捗・開発進捗)D001(BUYMA管理.html)を今後のメイン運用先とする。D027側の自動同期・追加実装は行わない。白井さんが「D027も更新しておいて」と口頭指示した時だけ、ソラがD027側を手動で更新する(現状のD027の画面・書き込み機能はそのまま残すが、能動的なメンテナンス対象からは外す)

Step 6(旧:D027からBUYMA関連コード削除)は実施しない — ただし理由は「恒久並行稼働のため」ではなく「D027を消さなくてもD001さえ機能すれば実務上困らないため(コード自体は残置、運用の主従が入れ替わるだけ)」。無理に消すリスクを取る必要がなくなった、という整理。

全体の作業フロー
Step
1
モック最終確認
mock_webapp_v3.html を仕上げ、白井さんに確認
Step
2
モックフィードバック
ブラウザで操作して気になる点を伝える
白井さん
Step
3
Phase1実装(スプシ並行・読み取り専用)
Cloudflare Pages + スプシ読み取り。出品作業カードUIを本番化
Step
4
Phase1動作確認
実際の商品データで出品作業フローを通しテスト
白井さん
Step
5
Phase2実装(Supabase完全移行)
今週中が目標。スプシ廃止・書き込みをSupabaseに切り替え
Step
6
Phase2動作確認・スプシ廃止承認
問題なければスプシを読み取り専用に変更
白井さん
Phase 1:スプシ並行・出品作業Webアプリ化

実装スコープ

  • 1
    Cloudflare Pages にデプロイ(URL:buyma-assistant.pages.dev
  • 2
    スプシから商品データを読み取ってカード表示(書き込みはソラがGAS経由で継続)
  • 3
    白井さんの作業:25枚カードをコピペ → 完了 → BUYMA下書きURL保存

カード構成(25枚)

#カード名種類担当
1商品コメント(6ブロック一括)一括コピーソラ生成
2商品タイトルコピーソラ生成
3カテゴリコピーソラ設定
4色名(売名)コピーソラ設定
5型番/識別メモインラインコピーソラ設定
6販売価格コピーソラ計算(Phase2自動化)
7個数コピーソラ設定
8購入期限コピー自動計算(第2・第4月曜)
9買付地コピーソラ設定
10発送地コピーソラ設定
11配送方法コピーソラ設定
12関税コピーソラ設定
............
25買付先ショップ名コピーソラ設定

完了画面のセルフチェックリスト

⚠️ 内容は白井さんと要確認(2026-06-30時点で未決定)

仮案(BUYMAで忘れがちな操作):

  • 1
    「自分で撮影」にチェックを入れた?
  • 2
    「選択を完了」ボタンを押した?
  • 3
    各サイズの「在庫なし」を設定した?
  • 4
    購入期限は第2/第4月曜日になっている?
Phase 2:Supabase完全移行(今週中)

移行対象

  • 1
    商品情報DB:スプシ44列 → Supabase products テーブル
  • 2
    ソラのデータ書き込み:GAS API → Supabase REST API
  • 3
    価格設定表:スプシ(手動)→ Supabase price_rules テーブル(自動計算)

主な変更点

  • 1
    ソラがmaikoリスト検出 → Supabase直接INSERT
  • 2
    白井さんのBUYMA下書きURL入力 → Supabase UPDATE
  • 3
    クララチェック結果 → Supabase check_results テーブルに保存
  • 4
    商品管理番号の採番・書き込みもSupabase化

Phase 2.5以降:追加改善(案B/C/D)

内容優先度
案CEnterキーで「コピーして次へ」Phase 1と並行
案B価格自動算出・38文字バリデーションPhase 2と同時
案Dクララチェック自動トリガー(実装前に議論)Phase 2.5
案EBUYMA直接入力(誤りリスクゼロになってから)将来
アーキテクチャ
Cloudflare Pages(SPA)
  ↕ REST API
Supabase(PostgreSQL)
  ├ products(商品情報)
  ├ price_rules(価格設定表)
  ├ check_results(クララチェック結果)
  ├ confirmations(確認フォームキュー)
  └ tasks(席外しバッチキュー)
リスク総点検(白井さんの懸念への回答)
⚠️ 懸念:「DBが壊れないか」「スキルが壊れないか」「進捗更新が壊れないか」→ 結論:3点とも壊れません。移行するのは「D027の画面とAPIコードだけ」で、データの置き場所(Supabase)と自動化の仕組み(夜間バッチ・スキル)には一切手を入れないためです。
懸念結論理由
Supabase DBが壊れないか壊れない移行対象は「D027の画面・APIコード」のみ。Supabaseプロジェクト(pgoxywakdxekffibghve)・テーブル(tasksconfirmationsbuyma_listingsbuyma_tasksbuyma_confirmations)はそのまま。テーブル名もAPIキーも変更しない
スキルが壊れないか壊れない/buyma-listing-prep等のBUYMAカンパニースキルはD027のAPIを一切経由せず、Supabaseに直接curlしている(BUYMAカンパニーCLAUDE.md §9参照)。D027のフロント・APIを消してもスキルの動作には無関係
進捗更新が壊れないか壊れない夜間バッチ・2時間ポーリングのステータス更新(status=doneのPATCH等)もSupabaseへの直接curl。D027のダッシュボードは「見るだけ」の画面であり、書き込みパイプラインには入っていない
現状の依存関係(なぜ壊れないと言えるか)
【現状】
夜間バッチ・2時間ポーリング・BUYMAスキル ──curlで直接書き込み──▶ Supabase(tasks/confirmations/buyma_*テーブル)
                                                                        ▲
                                                            D027ポータンが「見るだけ」で参照

D027のindex.html「BUYMA管理」ページとfunctions/api/[[route]].js/buyma/*ルートは、Supabaseの閲覧・簡易操作を提供しているだけで、自動化パイプライン(夜間バッチ・2時間ポーリング・スキル)はD027を一切経由せずSupabaseに直接読み書きしている。したがって「D027の画面を消す」ことと「自動化が止まる」ことは無関係。

D027・D001 運用移行フロー(旧:D027移行の作業フロー)
Step
1
現状コード調査・依存関係の完全洗い出し
D027のBUYMA関連コード(index.html・API・データ)を一覧化。すでに完了
Step
2
D001アプリにBUYMA管理タブを新規実装(読み取り専用)
mock_webapp_v4のデザインで確認待ち・タスク・フォロー・月次サマリ・出品一覧・開発進捗を再現。同じSupabaseテーブルを参照。すでに完了
Step
3
D001側のBUYMA管理タブを2〜3日実際に使ってみる
D027側と見比べず、D001だけで進捗確認・出品作業が回るか試す(お試し並行稼働期間)
白井さん
Step
4
D001アプリにAPI(/buyma/*相当)を実装し書き込み機能を追加
D027のfunctions/api/].jsのBUYMA関連ルートと同等の処理をD001側に実装。Supabaseテーブル・スキーマは変更しない
Step
5
2〜3日後に判定
問題なければ「D001アプリのみ」に一本化を宣言。GASウェブアプリでの出品作業運用を終了。D027のBUYMA進捗表示は能動更新の対象外にする(口頭指示があった時のみソラが手動更新)
白井さん
Step
6
参照先の最終更新
BUYMAカンパニーCLAUDE.md §9等の参照URLをD001アプリに更新してクローズ
D027・D001 機能対応表
D027(既存・コードは残置)内容D001(新規・メイン運用へ)備考
public/index.html #page-buyma確認待ち/タスク/出品進捗の3カードUIBUYMA管理.htmlとして複製実装済みD001をメインで見る。D027は白井さんの口頭指示時のみソラが手動確認・更新
functions/api/[[route]].js /confirmations確認フォームの汎用API(case_code絞り込み)気づきフォーム.htmlは既にSupabaseへ直接POSTしているため無改修気づきフォーム自体は改修不要・対象外
/buyma/listings /buyma/dev-cases /buyma/tasks /buyma/confirmationsBUYMA専用CRUD API(読み書き)D001アプリの新functions/api/にStep 4で同等実装(読み書き対応)Supabaseテーブル名・スキーマは変更なしでそのまま流用
public/buyma-cleanup.html public/buyma-refs.html補助ページ今回は複製対象外必要になれば後日検討
🚨 変更しないこと(安全策の明記)
  • 1
    🚨 Supabaseプロジェクト(pgoxywakdxekffibghve)・テーブル名・publishable/service_roleキーは一切変更しない
  • 2
    🚨 BUYMAカンパニーのスキル(/buyma-listing-prep等)のコードは変更しない(そもそもD027を参照していないため無関係)
  • 3
    🚨 夜間バッチ・2時間ポーリングのcurlコマンド・launchd設定は変更しない
  • 4
    D027のコード自体は削除しない(残置)が、進捗管理の能動的な運用先はD001に一本化する
実行ログ
2026-06-30 00:00アプローチ再検討レポート作成・白井さんから4件の確認フォーム回答を受領

Phase2タイミング:今週中に確定。ChatWork取り込みはFAQアプリ修正後に追加。 案D(クララチェック自動トリガー)は実装前に改めて議論が必要と確認。 コピーカード操作性の大幅見直しはPhase1完了後に検討予定。

2026-06-30 00:01D001 plan.md 新規作成
2026-07-01 18:10D027(白井カンパニーポータル/yukichi-taskmanager.pages.dev)にBUYMA管理機能(確認待ち・タスク・出品進捗)が同居していることを調査で確認

functions/api/[[route]].jsの/buyma/listings・/buyma/dev-cases・/buyma/tasks・/buyma/confirmationsルート、public/index.htmlの#page-buymaを特定 自動化(夜間バッチ・2時間ポーリング・BUYMAスキル)はD027を経由せずSupabaseに直接curlしていることを確認 → 移行してもDB・スキル・進捗更新は壊れないと判断 D027からD001への移行計画(目的・リスク総点検・作業フロー・移行対象詳細・変更しないことの明記)を追記

2026-07-01 18:30Step 2着手:D001アプリ内に「BUYMA管理.html」を新規実装(読み取り専用・並行稼働)

確認待ち/タスク/フォロー/月次サマリ/出品一覧(8ステップフロー)をSupabaseから直接読み取り表示(publishable keyで直接fetch、D027のAPIは経由しない) D027の開発・改善系セクション/重要資料リンク/ソラマニュアルリンクは今回のスコープ外(後日追加を検討) D001_ポータル.htmlに「BUYMA管理(並行稼働)」「移行計画」タブを追加

2026-07-01 18:45白井さんより「進捗もこの出品アプリに移行予定」と依頼を受け、D027の「開発・改善系」セクション(BUYMAタグの案件×タスク進捗、page_tags=buyma&status=active)もBUYMA管理.htmlに追加実装

cases/tasksテーブルを直接読み取り。7日以上前に完了したタスクは「過去分」として折りたたみ表示。D027と同じロジックを踏襲

2026-07-02 08:55白井さんの承認を得てCloudflare Pagesに初回デプロイ完了

プロジェクト名:buyma-assistant/本番URL:https://buyma-assistant.pages.dev デプロイ元:D001_BUYMAアシスタント/public/(index.html=旧D001_ポータル.html、mock_webapp_v4.html、BUYMA管理.html、plan.html、気づきフォーム.html、コピー範囲認識合わせ.html) 白井カンパニーポータル(D027/yukichi-taskmanager)とは別プロジェクトのため無関係・無影響

2026-07-02 09:20白井さんより方針の指示(一次回答):「D027の進捗更新の仕方はそのまま残す。BUYMA側は別途進捗管理を行う。両方で進捗管理をしてほしい」→ 恒久並行稼働と解釈しplan.mdを更新
2026-07-02 09:35白井さんより訂正:「恒久的な並行稼働ではない。2〜3日お試しで問題なければD001アプリのみにしたい。進捗管理はD001をメインにし、D027は口頭指示があった時だけソラが手動更新する」

誤解を修正し、plan.mdを「お試し並行稼働2〜3日→D001一本化予定」「進捗管理はD001メイン・D027は手動更新のみ」の内容に書き直し

2026-07-02 10:05D001_ポータル.htmlのタブ名称・アプリ内バッジを「D001」→「バイマウェブアプリ」に修正しデプロイ
2026-07-02 10:20白井さんの指摘によりBUYMA管理.htmlの「フォロー」セクション(数日間動いていない/今日期限)を削除。UI・JS(renderFollow関数)とも完全削除しデプロイ
2026-07-02 10:40白井さんのフィードバックに対応:

①出品アシスタントスプシからseq_no 13/15/16/17(CHANEL商品)の仕入先URL・購入期限(2026-06-22)を実データで補完(Supabase buyma_listings直接PATCH) ②seq_no 18〜22(Tiffany商品)の購入期限(2026-07-13)補完は自動承認が下りず白井さんに確認中 ③出品一覧の色合いを控えめに調整(ステップサークルsc-done/sc-wipを淡い色に、期限切れボーダー・urgent文字色も淡いトーンに変更) ④下書きURL編集ボタン(✏️)を追加:未設定の下書きURLをプロンプト入力→Supabase直接PATCHで保存 ⑤出品一覧を「進行中/出品済み」タブで分離。デフォルト表示は進行中のみ ⑥「📋 CW用コピー」ボタンを追加:管理番号+商品名/仕入れ先URL/下書きURLをチャットワーク貼り付け用フォーマットでクリップボードにコピー

2026-07-02 11:30白井さんより「出品作業アプリの実データ化を急ぎたい。DBは白井カンパニーと完全に分離すべき」と方針決定

新規Supabaseプロジェクト「buyma-company」(project_id: svyddjimrdmwnuzpnwur)を作成(Free/月額$0) テーブル作成:products(出品カード25項目)/tasks・cases・confirmations(Stage 2用に先行作成) 出品アシスタントスプシから通番13,15,16,17,18,19,20,21,22(進行中商品9件)の全25カード分の実データを取得しproductsテーブルに投入 新規ファイル「出品作業.html」を作成:products実データから25カードを動的生成し、コピー→次へのワークフロー・完了画面(ステータス更新・下書きURL保存)を実装。D001_ポータルに「出品作業(実データ)」タブとして追加 Stage 2(既存buyma_listings等のデータ・自動化を新プロジェクトへ本移行、D027からBUYMA完全削除)は未着手

2026-07-02 12:15白井さんより指摘:「出品作業.htmlはmock_webapp_v4.htmlの内容を反映していない。なぜHTMLか理解できない」「進捗も出品作業もまとめて管理したい」

誤解を解消:HTML/CSS/JSは本番Webアプリの正規の作り方(D027ポータルも同じ技術)であり、モックでも簡易版でもない。ただし複数ファイル・iframeタブでバラバラに実装している構成自体は改善が必要と認める 確認事項2点「①スプシ廃止・maikoリスト起点でSupabase投入」「②進捗管理と出品作業を1アプリに統合」は両方合意 「作業についてもう一度プランでまとめてほしい。mockの内容を確認してしっかり落とし込んでほしい」との指示を受け、mock_webapp_v4.htmlを再確認 plan.mdに【最新・最上位プラン】セクションを新設:mock機能の棚卸し表(カードメモ・編集機能・型番2段構成・購入期限自動計算・GUIDE文・8ステップフロー統合・完了画面のセルフチェック等、出品作業.htmlに未反映の項目を明記)、Stage A/B/C分け、作業フロー7ステップを記載 実装はまだ着手していない。白井さんの確認待ち

2026-07-02 12:30白井さんより追加指示:「BUYMA管理アプリの進捗状況(ロジック・データ)を絶対に壊さないこと。復元手段を確保してから実装にあたること。プランにも明記」

実装着手前に旧共有プロジェクト(buyma_listings 22件・buyma_tasks 0件・buyma_confirmations 1件)と新BUYMAカンパニー専用プロジェクト(products 9件)の全件バックアップを取得(バックアップ/フォルダにJSON保存) 復元スクリプト(バックアップ/restore.py)を作成:id一致行はUPSERTで復元、既存データを無条件に消さない設計 plan.mdに「🚨 進捗データの保全」セクションを新設:バックアップ一覧・運用ルール(スキーマ変更前の再バックアップ・破壊的SQLは要確認・各ステップ後の件数突合)を明記