AIに頼り切って家計簿アプリを追加開発する。：レシートドラッグドロップ対応

はじめに

前回までで、家計簿アプリの設計からOCR処理までの実装を行いました(AIがやりました)
今回はレシートのドラッグドロップ処理を実装します。

プロンプト

レシート画像をドラッグドロップで取り込みたい。
コードを出力してください。

回答

WinFormsでは:

AllowDrop = true

を設定し、

• DragEnter
• DragDrop

イベントを実装します。

以下コードで:

• レシート画像をフォームへドラッグ
• OCR自動実行
• OCR結果を画面へ反映

まで実装できます。

---

1. フォーム設定

支出登録画面コンストラクタへ追加。

---

ExpenseRegisterForm.cs

public ExpenseRegisterForm()
{
    InitializeComponent();

    InitializeDragDrop();
}

---

InitializeDragDrop

private void InitializeDragDrop()
{
    this.AllowDrop = true;

    this.DragEnter += Form_DragEnter;

    this.DragDrop += Form_DragDrop;
}

---

2. DragEnter

ドラッグ可能判定。

---

Form_DragEnter

private void Form_DragEnter(
    object sender,
    DragEventArgs e)
{
    if (e.Data.GetDataPresent(
        DataFormats.FileDrop))
    {
        e.Effect = DragDropEffects.Copy;
    }
    else
    {
        e.Effect = DragDropEffects.None;
    }
}

---

3. DragDrop

ここでOCR実行。

---

Form_DragDrop

private void Form_DragDrop(
    object sender,
    DragEventArgs e)
{
    try
    {
        string[] files =
            (string[])e.Data.GetData(
                DataFormats.FileDrop);

        if (files.Length == 0)
        {
            return;
        }

        string imagePath = files[0];

        // 画像チェック
        if (!IsImageFile(imagePath))
        {
            MessageBox.Show(
                "画像ファイルを選択してください。");

            return;
        }

        ExecuteReceiptOcr(imagePath);
    }
    catch (Exception ex)
    {
        MessageBox.Show(
            ex.Message,
            "エラー");
    }
}

---

4. 画像判定

---

IsImageFile

private bool IsImageFile(string path)
{
    string ext =
        Path.GetExtension(path)
            .ToLower();

    return
        ext == ".png" ||
        ext == ".jpg" ||
        ext == ".jpeg" ||
        ext == ".bmp";
}

---

5. OCR実行

---

ExecuteReceiptOcr

private void ExecuteReceiptOcr(
    string imagePath)
{
    OcrService service =
        new OcrService();

    OcrResult result =
        service.Execute(imagePath);

    ApplyOcrResult(result);
}

---

6. OCR結果反映

---

ApplyOcrResult

private void ApplyOcrResult(
    OcrResult result)
{
    // 日付
    if (result.Date != null)
    {
        dtpDate.Value =
            result.Date.Value;
    }

    // 合計
    txtAmount.Text =
        result.TotalAmount.ToString();

    // 商品一覧
    dgvItems.Rows.Clear();

    foreach (OcrItem item
        in result.Items)
    {
        dgvItems.Rows.Add(
            item.Name,
            "",
            item.Amount,
            item.Quantity,
            item.TaxRate,
            item.Note);
    }
}

---

7. DataGridView列順

前提。

Index	列
0	商品名
1	商品区分
2	金額
3	数量
4	税率
5	備考

---

Designer設定（重要）

フォームの:

AllowDrop

を:

True

にしてください。

コードのみでも可。

---

8. PictureBoxプレビュー（推奨）

画像表示したい場合。

---

PictureBox追加

名前:

picReceipt

---

OCR前に追加

picReceipt.Image =
    Image.FromFile(imagePath);

---

最終動作

レシート画像をフォームへドラッグ。

↓

OCR自動実行。

↓

以下自動入力。

項目	内容
日付	OCR結果
合計	OCR結果
商品一覧	OCR結果

かなり実用レベルになります。

起動、確認

起動、動作確認してみます。

問題なく動作しました。

最後に

次回は一覧画面を開発します。