アプリ化のロードマップ

ノート

以下のロードマップはあくまでも一例です。 対象とする問題に有効な表示を考える・自分が伝えたいことを表現するために何が必要かの意識が重要です。

段階的なロードマップ

このロードマップは、「まずは UX から考える」「伝えるためのアプリ開発」で書いた方針を、
実際の Streamlit アプリの UI 作成に落とし込んだものです。

• ユーザーが画面上で何をするかを明確にすること
• 「入力（ユーザーが決める）」と「出力（システムが計算する）」を分けて見せること
• 「なぜその結果になったか」を背景と一緒に説明すること

を意識しながら、UI を段階的に育てていきます。

---

超初級：とりあえず「解けた」を見せる

ゴール

• 「QUBO を解くと、こういう 010101... な解が出るんだ」という事実を、アプリ上で動く形で見せる。

UI でやること

• 解きたい最適化問題の、超ざっくりした説明テキストを入れる
  • 例：「ナップザック問題：限られた重さの中で、価値が最大になるような荷物の詰め方を探します」
• 「計算を実行」ボタンを置く
• QUBO を解いて得られた バイナリ列（0101...）をそのまま表示 する
  • 例：x = 01001101
• 可能なら、エネルギー値（目的関数値）だけ添えて表示する

この段階で “あえてやらない” こと

• バイナリを意味づけして解釈する
• パラメータの入力フォームを作り込む
• レイアウトをきれいに整える

まずは「黒魔術ではなく、きちんと解いている」ことを見せるのが目的です。

---

初級

ゴール：010101... を「意味のある答え」に変換

• バイナリ列を「人間が読める答え」に変換することで、ユーザーが 自分の問題に引き寄せて理解できる ようにする。

UI でやること

例：ナップザック問題なら

• バイナリ → 問題ドメインの説明 を追加

  • $x_i=1$ → 品物 $i$ を入れる
  • $x_i=0$ → 品物 $i$ は入れない
  • 表形式で、「品物名」「入れる/入れない」「重さ」「価値」を表示するとわかりやすい

• 簡単なパラメータ入力フォーム を追加

  • ナップザックの容量（最大重さ）
  • 品物の個数（小さい範囲で OK）
  • 「ユーザーが決めるもの」と「システムが計算するもの」を UI 上で分ける

• テキストでの補足説明

  • この最適化は何が目標で、あなたは何を入力できて、結果として何が見れるのかを書く。

この段階で意識すること

• 「ユーザーの入力」と「計算結果の出力」を、説明文と UI 両方で表現する。
• まだソルバーの種類やパラメータは触らせなくてもよい（デフォルトの SA などで十分）。

---

中級

ゴール：レイアウト・ソルバー選択・可視化を整える

• 「単に答えが出る」から一歩進めて、「触りながら理解できる」UI にする。
• 最適化問題ごとに それっぽいレイアウト・コンポーネント を用意する。

UI でやること

• 問題に合わせたレイアウト作り

  • 左側：ユーザー入力（パラメータ設定パネル）
  • 右側：結果表示（表・グラフ・説明文）
  • 例：
    • ナップザック：品物一覧を表で表示、選ばれた品物だけハイライト
    • 割当問題：行＝作業員, 列＝タスクのマトリックス表示

• ソルバー選択 UI

  • セレクトボックスなどで、SA / SQA / QA などを選べるようにする
  • 選んだソルバー名を結果表示の上部に明示する
  • 「どのソルバーで解いた結果なのか」が一目でわかるようにする

• バイナリの表示方法をドメインごとに最適化

  • ナップザック：選ばれた品物のリストと合計価値・合計重さを見やすく表示
  • 割当：ヒートマップや表形式で、「誰がどのタスクを担当しているか」を色付きで表示

• 結果の可視化

  • サンプリング結果を複数回取って、
    • エネルギー値（コスト）のヒストグラム
    • 最良解のエネルギーと、その他の解の分布
  • 「最適解だけを見るのではなく、多様な解の分布」を軽く見せる

この段階で意識すること

• アプリでやりたいこと、実装意図を汲み取って貰えるようなUIやアプリレイアウトを考える。
• 最適化結果の見せ方を工夫する。自分自身でアプリを使いたくなる機能をつける

---

上級

ゴール：シナリオ比較と UX 視点の説明を組み込む

• 「最適解が出た」で終わらず、
  • 条件を変えたシナリオ比較
  • 解の多様性・エネルギーギャップの解釈
  • なぜその結果になったかの説明

を UI の一部として組み込む。

UI でやること

• シナリオ比較タブ

  • タブ A：シナリオ1（例：容量 10、コスト重視）
  • タブ B：シナリオ2（例：容量 15、価値重視）
  • 条件の違いと結果の違いを並べて表示
  • 「シナリオを複製」ボタンで、現在の条件をコピーして少し変えて再計算できるようにする

• ソルバー比較タブ

  • 同じ問題設定について、SA / SQA / QA の結果を並べる
  • 各ソルバーごとに
    • 最良エネルギー
    • エネルギーヒストグラム
    • 最良解が何回出現したか（頻度）
  • 「どのソルバーがどのような特徴（精度・多様性・計算時間）を持つか」を視覚的に示す
    • SAやQAであれば、Sampleset.info に計算時間などの情報が格納されます

• エネルギーギャップの可視化

  • 最良解のエネルギーを基準にしたギャップ分布
  • 「最良解にかなり近い解がたくさんある」ケースが、「最適性を多少犠牲にしてでも、選択肢が多いから嬉しい」状況なのか、それとも最適解のみが意味を持つのか。

• 結果の「背景・操作・例示」をセットで説明

  • 結果パネルの横に、次のような説明枠を用意
    • 背景：どのような制約・重みで解いているか
    • 操作：ユーザーが変えられるパラメータは何か
    • 例示：条件を変えると何がどう変わりそうかの一言コメント
  • 「システムが勝手に決めている」印象を避け、「ユーザーはこれで何ができるのか」が伝わる工夫をする

---

まとめ

上で説明したロードマップはあくまでもひとつの例です。 最初から壮大なアプリを実装するのではなく、小さなことから着実に作成していくのがアプリ作成のコツです。 ChatGPTを使えば非常に高速・高精度な実装が可能になった時代ですので、自分のアイデアを表現するための手段としてアプリ開発を楽しんでください。