replica-diff について
replica-diffは、Python標準ライブラリだけで動く、アプリクローンの機能・レイアウト・動作の一致度を評価するツール群です。差分から次の開発項目を整理し、元アプリとのピクセル単位の一致は目標にしません。
主な機能
- 01重み付き機能一致度スコア
- 02未実装機能の開発リスト
- 03スクリーンショットのレイアウト比較
- 04ピクセルモードの回帰比較
- 05動作差分の記録
- 06一致度レポートの生成
活用シーン
- 01リリース前に未完成機能を特定
- 02同じ画面のクローンレイアウトを比較
- 03クローンのバージョン間で視覚的回帰を追跡
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ jakeschincariol/ replica-skill --skill replica-diffインストール後、Claude Code で/replica-diffを入力して読み込まれたか確認します。
同梱ファイルimgdiff.pyparity.py
詳細
replica-diff
このフォルダーには、標準ライブラリだけを使うPython製のツールが2つあります。インストールは不要です。
python3 parity.py replica/features.csv # feature parity + missing list
python3 imgdiff.py replica/screens/S07.png replica/clone-screens/S07.png --out diff-S07.png
python3 imgdiff.py a.png b.png --json > replica/diffs/S07.json # for parity.py --visual
python3 parity.py replica/features.csv --visual replica/diffs/*.json --markdown > replica/parity.md
ここでいうパリティ
パリティとは、見た目が同じではなく、同じ役割を果たすことです。 重要なのは機能スコアです。ユーザーがオリジナルでできることをすべて実行できるかどうかを測ります。レイアウトスコアでは、構造(情報が同じ場所に、同じ階層で配置されているか)を確認します。それによって、乗り換えたユーザーが違和感なく使えるようになるためです。replica-brandでは意図的にすべての色を変えているため、色は評価対象外です。オリジナルとのピクセル単位の一致を目指さないでください。オリジナルの正確な外観はトレードドレスであり、ローンチ前に変更されます。
ステップ1:機能パリティ
replica/features.csv が最新であることを確認してください。各行の clone 列には、yes、partial(注記付き)、no、または skip(理由付き)のいずれかを指定します。次に、以下を実行します。
python3 parity.py replica/features.csv
mustは3、shouldは2、couldは1として重み付けし、partialは半分として計算します。skip の行と、オリジナルにはない追加行は除外します。次の内容が出力されます。スコア、完了したmust-haveの件数と総数、各領域(スコアの低い順)、および実装順の未対応項目一覧です。未対応のmust-haveがある場合は出荷不可と判断され、その旨が表示されます。
ステップ2:レイアウトの差分
主要な各画面について、同じビューポート(デスクトップは1440x900、モバイルは390x844)で、同じ状態(データの形状、開いているタブ、ログイン状態が同じ)にしてスクリーンショットを2枚撮影します。オリジナルのスクリーンショットは公開ページまたはユーザー自身のアカウントから取得し、replica/screens/ に保存します。クローンのスクリーンショットは replica/clone-screens/ に保存します。
python3 imgdiff.py replica/screens/S07.png replica/clone-screens/S07.png --out replica/diffs/S07.png
レイアウトモード(デフォルト)では、両方をエッジマップに変換し、グリッドに分割して、何かが配置されているセルのみを対象に、要素の位置を比較します。スコア(一致は90以上、近似は75以上、一部一致は50以上、相違あり)、異なる領域(オリジナルのピクセル座標で大きい順)、およびクローンのページが大幅に長い、または短い場合は高さの差を報告します。Retinaと非Retinaのスクリーンショットは、どちらも同じ幅に拡大縮小されるため、問題なく比較できます。
--mode pixel は厳密な比較を行います。オリジナルとの比較ではなく、クローンの今日の状態と先週の状態など、独自のリグレッション確認に使ってください。
ステップ3:動作の差分
両方のアプリで各フローを実行し、スコアでは確認できない内容を比較します。コアフローを完了するまでのクリック数、エラー発生時の動作、訪問間で保持される情報、届くメールを確認してください。オリジナルよりクリック数が少なければ、改善です。各差分を次の形式で記録してください。フロー、オリジナルの動作、クローンの動作、修正または維持。
ステップ4:レポート
replica/parity.md には、総合スコア、機能スコア、画面ごとのレイアウトスコア、実装順の未対応機能、動作の差分、および次の判定を記載します。
- 出荷不可:must-haveが1つでも未対応、または未解決のS1バグがある
- 出荷可能:すべてのmust-haveに対応済み、機能スコアが80以上、未解決のS1またはS2がない
- オリジナルより優れている:出荷可能であり、replica-entrepreneurによる改善も反映済み。これが目標です。単なるコピーには存在意義がありません。
数値は正直に報告してください。クローンのスコアが62%なら、62%です。
出力
replica/parity.md、差分画像、次に実装する優先度の高い項目5つを出力します。
不足分への対応には /replica-build を、パリティが達成できている場合は /replica-entrepreneur を実行してください。