第2回で、発注ツールの心臓部——在庫切れを予測する計算（コア）が完成しました。ただ、今のままでは黒い画面で動かす部品で、現場の人は使えません。今回は、そのコアを一切変えずに、上から画面（UI）をかぶせて、誰でも使える道具にします。
1. 今回作るUIとは
第1回で「計算（コア）と画面（UI）は分けて設計する」と決めました。その分けておいた効果が、今回出ます。コアはそのまま、画面だけを新しく作って、上からつなぐ。
作るのは、生産管理担当者1人が使う個人向けの最小UI。1つのウィンドウで完結します。やることはシンプルです。
3つのCSV（在庫リスト・製造計画・配合表）を選ぶ → 「計算する」 → 優先順位の表（危険＝赤・注意＝黄で色分け）が出る → 品目を選ぶと在庫推移グラフが出る → 「発注リストを発行」でExcelに出力
2. 画面の設計と使用するライブラリー
画面表示の設計
画面は1ウィンドウの縦並び。上にファイル選択と「計算する」、中央に優先順位の表、下に在庫推移グラフを置きます。専門用語は出さず、「在庫切れ予定日」「緊急度」など現場の言葉で表示します。失敗してもダイアログで止めず、状況ラベルに「エラー：列名が見つかりません」のように原因を出して、やり直せるようにします。
ここで第2回の宿題が一つ片づきます。コードに固定されていた緊急度のしきい値（危険・注意とする残り日数）を、画面から入力できるようにします（既定は3日・7日、変更可）。現場の人が、コードを触らず調整できる。ただ、設定したものは立ち上げと同時に既定に戻ってしまう仕様にして作ります。この点は第6回で、設定を覚えておけるように改善します。
使用するライブラリー
表示方法は、なるべく軽く。理由とセットで選んでいます。
- tkinter（Python標準）… 追加インストール不要で、Windows/Mac/Linuxで動く。個人向けには十分。
- ttk.Treeview… 表の表示と、緊急度ごとの行の色分けに使う。
- matplotlib（埋め込み）… 在庫推移グラフを画面の中に表示する。別ソフトを開かない。
作成したUI設計仕様書
これらを定義したのが、今回配るUI設計仕様書です。
3. コード：コアプログラムとUIのつなぎ方
コアプログラムとの関係性
UIは、コアの関数を直接呼ぶだけです。別プロセスを起動するのではなく、同じPythonの関数呼び出しでつなぐ。「計算する」を押したら、コアに3つのCSVを渡して結果をもらい、表に流し込む——それだけです。on_calc_click()、on_select_row(item)、on_export_click()はボタン操作に対応する機能として定義しています。
実装コードを見る（コアとUIのつなぎ方）
# src/ui.py の実装イメージ（コアの関数を直接呼ぶ）
from src.loader import load_three_lists # 3つのCSVを読む
from src.core import build_rows # 各品目の行を作る
from src.exporter import export_to_excel
def on_calc_click():
set_status("計算中...")
try:
inv, plan, recipe = load_three_lists(paths)
danger, warn = get_threshold_inputs() # 未入力なら既定値
rows = build_rows(inv, plan, recipe, danger, warn)
# rows: 在庫切れ予定日順。各行に緊急度・推奨発注数・在庫系列を持つ
fill_table(rows) # 緊急度で行に色タグを付与
set_status("完了")
except Exception as e:
set_status(f"エラー：{e}")
def on_select_row(item): # 表の行クリック
draw_burndown(item.series) # 在庫推移グラフを再描画
def on_export_click():
targets = [r for r in current_rows if r.needs_order]
output = export_to_excel(targets, output_dir)
ask_open_file(output)色分け表示のコード
緊急度で行に色を付けるのは、Treeviewのタグでやります。危険・注意それぞれに背景色を定義し、行にタグを付けるだけ。
実装コードを見る（緊急度の色分け）
tree.tag_configure("危険", background="#f6c6c6")
tree.tag_configure("注意", background="#f7e1b5")
tree.insert("", "end", values=row.values, tags=(row.risk,)) # risk: 危険/注意/空4. Claude Codeに渡して実装する
Planモードによる実装
第2回と同じ流れです。プロジェクトにUI設計仕様書を置き、Claude CodeにPlanモードでこう頼みます。コアを変更させないよう、ひとこと添えるのがコツです。
このUI設計仕様書のとおりに、画面（UI）を作ってください。
計算は既存のコアの関数をそのまま呼び出すこと。コアのコードは変更しないでください。完成しました。私が作った環境ではmain.pyがコアの計算、ui.pyが今回実装したUIの表示になります。pythonで起動する場合、以下の操作をTerminalで行います。
python ui.pyわからない場合はClaude Codeに「設計したUIを起動して」と自然言語で依頼すると起動してくれます。
実装したUIの動作確認
動かすと、ウィンドウが開きます。3つのCSVを選んで「計算する」を押すと、優先順位の表に全品目が在庫切れ予定日の近い順で並び、生イーストが赤（危険）で表示される。
品目をクリックすれば、その在庫推移グラフが下に出る。生イーストであれば、在庫切れ期間が3日以内。
バターなら在庫切れは9日後にグラフは表示される。
製造ラインで使われなかった薄力粉なら在庫の消費がないため、変化無し。
言葉の説明だけになりますが、「発注リストを発行」を押すと発注リストのExcelファイルが出力される動きも確認しました。
これも「動いた」の確認まで。境界値や壊れた入力まで含めて正しく動くかを検証するのは、次の第4回（テスト編）です。
5. まとめ
- UIはコアを一切変えず、上からかぶせるだけ（第1回の分離設計が効く）
- 個人向け最小UI：tkinter＋Treeview（色分け表）＋matplotlib（グラフ）
- UIはコアの関数を直接呼ぶ（別プロセスではない）
- クリックすることで在庫の消費日数を確認できるUIを作った
次回は第4回。ここまで「動いた」は確認しましたが、仕様どおり“正しく”動くかは、まだ確かめていません。正常・境界・異常の3種類のデータでテストして、この道具を信頼できるものにします。
使用しているデータ・製品名・取引先名はすべて架空のものです。コードは解説用の実装例で、各ツールの仕様・料金は記事公開時点のものです。
コメント