ほんの出品準備室 v2.0
漫画・書籍セットの出品準備専用PWAです。せどりスカウターとは別アプリ・別データベースです。公開サイトへのデプロイ・有料契約・AIへの実画像送信は行っていません。
最初に使う方法(無料の静的版)
1. 配布ZIPを展開します。
2. CloudflareのWorkers & Pagesで新しいPagesプロジェクトを作成し、静的ファイルのアップロードを選びます。
3. **`dist`フォルダの中身**をアップロードします。`index.html`が公開サイトの直下にある構成にします。配布ZIP全体やfunctionsフォルダを公開フォルダへ入れないでください。
4. HTTPSのURLをAndroid Chromeで開きます。
5. Chromeのメニュー →「ホーム画面に追加」または「アプリをインストール」を選びます。
6. カメラか写真選択から追加 → 自動補正 → 無料OCR候補を確認 → 作品名を選択/修正 → 冊数・巻番号・状態を確認 → 出品文を生成します。
7. 写真を保存し、タイトル・説明文を各サービスへコピーして最終確認します。自動で出品する処理はありません。
静的版だけで画像補正・OCR・ISBN/書名検索・文章生成・端末内保存・コピーが使えます。**表紙の絵柄を理解するAI認識は、静的ファイルをアップロードしただけでは動きません。** OCRの初回はCDNと日本語モデルを取得するためネット接続が必要です。CDNが遮断される環境ではOCRを利用できません。書籍検索も通信が必要で、検索先の利用制限・CORS等により失敗する場合があります。
写真をAndroidへ保存
個別の「補正写真を保存」はJPEGをダウンロードします。通常はChromeのダウンロード先に入ります。写真アプリへすぐ現れることは保証しません。Files等から開くか共有をご利用ください。「補正写真をZIP保存」は全写真を1つのZIPにします。出品アプリへ渡す前にFiles等で展開してください。元写真は変更せず別Blobで保存しています。保存ボタンはブラウザへの保存開始要求で、端末での完了はChromeの通知で確認してください。
下書き
入力後約0.6秒でIndexedDBへ自動保存し、最後の下書きを再開します。写真の追加ごとにも保存します。商品別の一覧から再編集できます。メルカリとYahoo!フリマの文章を別々に保持します。「下書きを書き出す」は元画像・補正後JPEGと入力内容をJSONにまとめます。「バックアップを復元」は既存下書きを上書きせず新しい商品として読み込みます。端末やドメインを変える場合は書き出して移してください。
ブラウザのサイトデータ削除、端末容量不足、OSによるデータ整理で下書きが失われる可能性があります。重要な下書きはバックアップしてください。複数タブで同じ下書きを同時編集する運用は想定していません。
外部AIを追加する方法(任意・サーバーが必要)
`functions/api/recognize.js`はCloudflare Pages Functions用です。APIキーをHTML/JSやGitへ書き込まないでください。**Cloudflareダッシュボードの静的なドラッグ&ドロップだけではFunctionsは配備されません。** Git連携またはWranglerで配備してください。本納品では実行していません。
Git連携の場合:
1. このフォルダの`dist`・`functions`・`package.json`をGitリポジトリに配置します。秘密情報は含めません。
2. PagesでGitを接続し、プロジェクトルートはこのフォルダ、フレームワークはNone、ビルド出力は`dist`とします。ビルド工程は不要です。
3. Pages設定のVariables and Secretsで、Production用の**Secret**を2つ設定します。
- `GEMINI_API_KEY`:自身のGoogle AI Studioで取得したキー。
- `APP_PASSWORD`:十分に長く推測できない、このアプリ専用パスワード。
- 任意の通常変数`GEMINI_MODEL`:省略時は`gemini-2.5-flash`。
4. Secretの反映後に再デプロイします。
5. アプリの「外部AIで表紙・背表紙を認識」を開き、**APP_PASSWORDのみ**入力します。APIキーを画面に入れる場所はありません。
6. 写真ごとの送信チェックと注意事項を確認し、送信ボタンで実行します。
Wranglerを使う場合も、このフォルダをカレントにして実行します(コマンドは説明用で、本納品では未実行)。
```
npx wrangler pages project create YOUR_PROJECT
npx wrangler pages secret put GEMINI_API_KEY --project-name YOUR_PROJECT
npx wrangler pages secret put APP_PASSWORD --project-name YOUR_PROJECT
npx wrangler pages deploy dist --project-name YOUR_PROJECT
```
Secretは対話入力し、コマンド引数やファイルへキー自体を記載しないでください。個人利用を想定しています。パスワードを共有すると、その相手もAPIを使えます。公開利用へ拡大する際には、Cloudflare Access等の追加認証・アカウント別の回数制限を設けてください。本版には日次の課金上限を強制する機構はありません。Google側の割当量・請求設定を確認してください。Cloudflare側の利用上限・追加料金も別途適用されます。
外部送信・料金
- 送信チェックした写真のみ、元写真から長辺最大1500pxのJPEG(品質85%)にして送ります。元画像ファイルそのもの・EXIF・下書き文章・端末内の他画像は送信しません。
- 経路:ブラウザ → 自分のCloudflare Pages Function → Google Gemini。
- APIキーはCloudflareのSecret。アプリパスワードは実行中の画面メモリのみで、下書き・localStorageへ保存しません。
- 画像・住所・顔等の自動検出や自動マスキングはありません。写り込んだ写真はチェックを外し、必要なら個人情報を除いて撮り直してください。
- Google公式料金表(2026-10-30確認):Gemini 2.5 Flashの有料標準枠は画像/テキスト入力100万トークン0.30米ドル、出力100万トークン2.50米ドル。仮に入力3,000+出力1,000なら0.0034米ドル。画像数・解像度・応答量で変わり、この金額を1回あたりの保証額とはしません。
- Googleの無料枠ではコンテンツがサービス改善に利用されます。有料枠は料金表上ではサービス改善への利用なしとされています。利用前に最新の条件を確認してください。登録・課金有効化は利用者の判断です。本納品で契約は行っていません。
認識・画像補正の限界
- 無料OCR:Tesseract.js 5.1.1、日本語+英語。端末内の文字認識で、作品の画像理解ではありません。小さな縦書き文字や反射のある背表紙で精度は下がります。読んだ文字を候補として示すだけで、巻数・全巻・状態を自動確定しません。
- ISBN:対応ブラウザのBarcodeDetectorでEAN-13を補助読取します。未対応の場合はOCRまたは手入力でISBNを指定できます。Google Booksへ検索語だけを送り、書名・作者・出版社の候補を出します。収録外・誤書誌はあります。写真と版を照合してください。
- 外部AI:表紙・背表紙・裏表紙・ISBNの視覚証拠を組み合わせる処理を実装。写真別の推定冊数・読めた巻番号・根拠を返し、作品候補を利用者が選択します。同じ本が複数写真に写るため冊数を合算しません。実APIと実写での精度は未検証です。
- 冊数・巻番号・刊行全巻数は独立入力。背表紙境界から冊数を断定する処理は使用していません。全巻数は別途確認します。「全巻確認済み」は冊数・巻番号・全巻数に一致がなく、重複や不足がある場合に生成を拒否します。複数作品混在や上下巻・特装版は補足欄に明記してください。現版の巻番号照合は整数1〜999が対象です。
- 補正:元画像の長辺を最大2200pxに縮小し、輝度中央値に応じたハイライト保護型の明暗・コントラスト調整を実行。低彩度画素から色利得を最大±1%に抑えて推定し、黄ばみを白く消しません。十分明るい画像では原則色・明暗を維持。色かぶりが強い場合は再撮影が必要です。
- 傾き:高い縦エッジ整列スコアが得られる場合のみ±4度以内で推定回転。画像全体を拡張して保持し、商品を切り落としません。誤推定時は「傾きを戻す」。遠近補正や大きな傾きには対応しません。
- 消し込み・生成AIによる文字や図柄の描き直し・傷消しはありません。ただし明暗補正で状態の見え方は変わるため、比較して実物と違う場合は元画像を使ってください。
- 表示と保存に同一の補正JPEG Blobを使用します。白飛び表示はJPEG圧縮前の画素計測で、品質保証の点数ではありません。
文字数・手数料
公式仕様を調べ、タイトル上限をメルカリ40文字/Yahoo!フリマ65文字で検知します。超過しても勝手に切り捨てず警告します。説明文は両方1,000文字のチェックを設けていますが、Yahoo!フリマの説明上限を明記する公式ページは今回の調査では確認できませんでした。Yahoo側は暫定のアプリ内チェック値で、最終出品画面を優先してください。絵文字等の数え方は出品先で差が出る場合があります。Yahooのタグは20個まで・1個30文字までを検知。メルカリでタグを本文に貼り付ける際は、タグ込みで1,000文字チェックが必要です。
通常手数料:メルカリ10%(1円未満切捨ての概算)、Yahoo!フリマは税抜4.54%を四捨五入し、その消費税10%を切捨てて加算します。例えば5,000円は249円になり、単純な5%の250円とは1円差が出ます。送料は選択額を双方に適用。3項目未入力なら未計算。キャンペーン・販促・梱包費・振込費は含めません。最終手数料は出品フォームで確認してください。
検証・開発
`node --test tests/*.test.mjs`。画像ファイル再読込テストは任意の`@napi-rs/canvas`が必要(未導入時はその2件だけskip)。生成ZIPの展開検査も実施。詳細はTEST-REPORT.mdに記録。
既存v1.2を最初に確認し、補正前後に同じ保存Blobを使う方針を引き継ぎました。過分割を冊数と扱わず、白背景への過剰処理を避けるため画像処理を簡素化し、商品管理を作り直しています。既存アプリのキャッシュ・下書きは移行しません。別URLで導入してください。
確認に使用した公式情報
- メルカリ出品・40文字・写真20枚:https://help.jp.mercari.com/guide/articles/62/
- メルカリ手数料:https://help.jp.mercari.com/guide/articles/65/
- メルカリ公式説明欄の1,000文字(画面資料):https://pdf.irpocket.com/C4385/hUeO/I2Qm/DaED.pdf
- Yahooタイトル65文字への拡張:https://paypayfleamarket.yahoo.co.jp/notice/function/266/
- Yahoo出品・タグ制限:https://support.yahoo-net.jp/SccPaypayfleamarket/s/article/H000008388
- Yahoo手数料の端数処理:https://support.yahoo-net.jp/SccPaypayfleamarket/s/article/H000008384
- Google AI料金:https://ai.google.dev/gemini-api/docs/pricing?hl=ja
- Google AI生成API:https://ai.google.dev/api/generate-content
- Cloudflare Direct Upload:https://developers.cloudflare.com/pages/get-started/direct-upload/
- Google Books検索:https://developers.google.com/books/docs/v1/using