AIチュートリアル

AI Writerで商品画像から多言語ECコピーを作成

商品画像からEC向けコピーを生成するExpressアプリケーション、AI Writerのインストール、設定、使い方を解説します。自動・手動セットアップ、多言語生成、ページ画像の取得、翻訳、クレジット、実験的な動画処理、テスト、本番環境でのセキュリティ上の注意点を取り上げます。

2026年10月12日約15分で読了

AI Writerとは？

AI Writerは、商品写真を編集可能なEC向け説明文に変換するオープンソースアプリケーションです。1～8個の公開HTTPS画像URLを指定し、出力言語を選択すると、OpenAIのビジョン対応Chat Completionsモデルを使用して下書きを作成できます。

このアプリケーションは、英語、トルコ語、スペイン語、ドイツ語、フランス語、中国語に対応しています。また、アカウント認証、ブラウザ上での編集、翻訳、MySQLを基盤とするクレジットシステムも備えています。

AI Writerは、検証済みの商品仕様ではなく下書きを作成します。画像だけでは寸法、素材の組成、認証などの詳細を確実に証明できないため、公開前にすべての説明文を確認してください。

主な機能

画像を使った文章作成: 公開アクセス可能なHTTPS商品画像を1～8枚使用して文章を生成します。
商品ページの取得: Puppeteerを使用して、公開商品ページから画像リンクを収集します。
6つの出力言語: 英語、トルコ語、スペイン語、ドイツ語、フランス語、中国語でコンテンツを生成します。
編集と翻訳: ブラウザ上で生成された下書きを整え、コピーし、1回の操作で翻訳できます。
アカウントとクレジット: bcryptパスワード、MySQLセッション、並行利用による過剰な支出を防ぐ残高管理を使用します。
失敗時の返還: 対応する生成リクエストが失敗した場合、予約済みクレジットを返還します。
実験的な動画入力: 短いYouTube動画から最大8フレームを抽出し、視覚入力として使用します。

前提条件

インストール前に、以下を準備してください。

Node.js 22.12以降とnpm。
Compose付きのDocker、またはMySQL 8以降の既存サーバーへのアクセス。
ビジョン対応Chat CompletionsモデルにアクセスできるOpenAI APIキー。
商品ページから画像を取得する場合は、Puppeteer経由でインストールされたChrome。
実験的な動画処理を試す場合は、PATHから利用できるFFmpegとFFprobe。

画像から説明文を生成するだけの場合、FFmpegは任意です。

AI Writerを自動でインストールする

対話形式のセットアップスクリプトは、最も簡単なインストール方法です。リポジトリをクローンし、そのディレクトリに移動してインストーラーを実行し、アプリケーションを起動します。

git clone https://github.com/csadigital/ai-writer.git
cd ai-writer
npm run setup
npm start

インストーラーはアプリケーションの依存関係とChromeをダウンロードし、入力内容を表示せずにOpenAI APIキーを尋ね、データベースとセッションのシークレットを作成して、MySQLを初期化します。既存の.envの値は保持され、ローカルバックアップが作成されます。

セットアップ中にdockerを選択すると、永続的なMySQLコンテナが自動的に起動します。Dockerはあらかじめインストールされ、起動している必要があります。自分のMySQLサーバーに接続する場合はexistingを選択します。管理者の認証情報があれば、インストーラーは専用のデータベースとアプリケーションユーザーを作成できます。管理者パスワードは保存されません。

起動後、ブラウザでhttp://localhost:3000を開きます。

Dockerデータベースを停止する

永続データを削除せずにローカルのMySQLコンテナを停止するには、次を実行します。

docker compose -f compose.mysql.yml stop

.envでデータベースの認証情報を変更しても、初期化済みのDockerボリュームはリセットされません。元の認証情報を保持するか、計画的にデータベースを移行してください。

AI Writerを手動でインストールする

手動セットアップでは、環境とデータベース設定を直接管理できます。プロジェクトをクローンし、指定された依存関係をインストールして、環境ファイルを作成します。

git clone https://github.com/csadigital/ai-writer.git
cd ai-writer
npm ci
cp .env.example .env
node -e "console.log(require('node:crypto').randomBytes(32).toString('hex'))"

生成された値を.envのSESSION_SECRETにコピーします。シークレットには32文字以上を指定してください。次に、OpenAI APIキーとMySQL接続設定を追加します。新しい認証情報を使用し、.envファイルは決してコミットしないでください。

MySQL管理者でデータベースとアプリケーションユーザーを作成し、そのユーザーにデータベースへのアクセス権を付与して、schema.sqlでテーブルを初期化します。

mysql -h 127.0.0.1 -u ai_writer -p ai_writer < schema.sql
npm start

http://localhost:3000を開き、アカウントを作成してサインインします。

環境を設定する

このアプリケーションは、環境変数から設定を読み込みます。少なくともOpenAIの認証情報、セッションシークレット、データベース接続を設定してください。

OPENAI_API_KEY: 必須のOpenAI API認証情報。
OPENAI_MODEL: ビジョン対応Chat Completionsモデル。デフォルトはgpt-4.1-miniです。
SESSION_SECRET: 32文字以上のランダムな値を含む必須のシークレット。
DB_HOSTおよびDB_PORT: MySQLのアドレス。デフォルトは127.0.0.1および3306です。
DB_USERおよびDB_PASSWORD: ローカルMySQLのアプリケーション認証情報。
DB_NAME: データベース名。デフォルトはai_writerです。
PORT: アプリケーションのHTTPポート。デフォルトは3000です。
NODE_ENV: 実行モード。デフォルトはdevelopmentです。
TRUST_PROXY: アプリケーションが1つのHTTPSリバースプロキシを信頼するかどうかを設定します。デフォルトは0です。

選択したモデルは、Chat Completions APIを通じた画像入力に対応している必要があります。互換性のあるリクエスト動作については、OpenAI公式の画像入力ガイドを参照してください。

最初の商品説明を生成する

アカウントを作成する: ローカルアプリケーションから登録してサインインします。新しいアカウントには最初に10クレジットが付与されます。
商品写真を追加する: 公開されたHTTPS画像URLを1～8件指定します。モデルがこれらのURLにアクセスできる必要があります。
言語を選択する: 英語、トルコ語、スペイン語、ドイツ語、フランス語、中国語から選択します。
下書きを生成する: 画像を送信して、視覚分析と説明文の生成を行います。
結果を編集する: ブラウザーで下書きを確認し、根拠のない主張、文体、商品情報を修正します。
テキストをコピーする: 修正した説明文をEC運用にコピーします。

説明文の生成に成功すると、1クレジットを消費します。生成リクエストが失敗した場合、アプリケーションは予約済みクレジットを返却します。

画像ワークフローの例

複数の角度から撮影した商品では、次のような直接画像URLを少数指定します。

https://example.com/products/item-front.jpg
https://example.com/products/item-side.jpg
https://example.com/products/item-detail.jpg

公開されたHTTPSアドレスのみを使用してください。複数の視点を提供するとモデルが利用できる視覚的な文脈が増えますが、商品カタログで確認済みの仕様の代わりにはなりません。

商品ページから画像を取得する

すべての画像URLを手作業で集める代わりに、AI WriterではPuppeteerを使用して公開商品ページを調査し、画像リンクを収集できます。このワークフローには、Puppeteerが管理するChromeのインストールが必要です。

ページ取得ワークフローに公開商品ページのURLを指定します。
アプリケーションが候補画像リンクを収集するまで待ちます。
取得結果から適切な商品写真を選択します。
通常どおり説明文を生成して確認します。

使用する権限のあるページと画像のみを処理してください。公開環境では、ブラウザー自動化をサンドボックス化し、ネットワークアクセスを制限する必要があります。

既存の下書きを翻訳する

説明文を生成または編集した後、翻訳アクションを使用して、別の対応言語の文章を作成できます。翻訳に成功すると、1クレジットを消費します。公開する前に、商品用語、ブランドボイス、事実の正確性を確認してください。

実験的な動画ワークフローを使用する

AI Writerでは、短いYouTube動画から最大8フレームを抽出し、それらのフレームを視覚的な文脈として送信できます。localhostの画像リンクはAPIからアクセスできないため、ローカルのフレームはデータURLとしてモデルに送信されます。

動画は次の制限をすべて満たす必要があります。

ライブ動画でないこと。
3分以内であること。
50 MB以下であること。
FFmpegとFFprobeがPATH上で利用できること。
メディアを処理する権限があること。

この機能は上流のYouTubeダウンローダーの可用性に依存しており、YouTubeが自動ダウンロードを拒否する場合があります。処理に失敗した場合、予約済みクレジットが返却されます。

開発とテスト

アプリケーションの変更中は、開発用コマンドを使用します。

npm run dev

プロジェクトのチェック、自動テスト、本番依存関係の監査を次のコマンドで実行します。

npm run check
npm test
npm audit --omit=dev

テストスイートは、認証、セッションローテーション、CSRF対策、URL検証、エスケープ済み出力、画像生成、翻訳、クレジット返却、並行したクレジット消費を対象としています。ローカルテストではデータベースとAIサービスを分離しているため、本番の認証情報を使用したり、有料APIを呼び出したりすることはありません。継続的インテグレーションでは、一時的な実MySQLサーバーも作成し、インストーラーによるスキーマ作成とデータベースユーザーへの権限付与を検証します。

応用のヒント

画像を慎重に選ぶ

商品を役立つ角度から写した、鮮明な写真を使用してください。画像は1～8枚の制限内に収めます。画像を増やす場合は、同じ視点の繰り返しではなく、意味のある視覚情報を追加してください。

事実情報を視覚的な推測に委ねない

寸法、組成、認証に関する生成された主張を、正確な情報として扱わないでください。編集時に、在庫システムまたは商品情報システムで確認済みの仕様を追加します。

秘密情報とデータベースアクセスを保護する

.envを非公開に保ち、専用のデータベース認証情報を使用し、APIキーやセッションシークレットをコミットしないでください。既存のMySQLサーバーを使用する場合は、アプリケーションユーザーに目的のデータベースへのアクセスだけを付与します。

公開デプロイの前に準備する

AI Writerをインターネットに公開する前に、リポジトリのデプロイガイドを読んでください。公開サーバーには、HTTPS、制限されたネットワーク送信、サンドボックス化されたブラウザーが必要です。DNS検証だけでは、DNSリバインディングに対する完全な防御にはなりません。

組み込みのクレジットによって支出は制限されますが、このプロジェクトには課金連携、自動クレジット購入、パスワード回復、メール認証は含まれていません。リポジトリを公開しても、ホストされたアプリケーションやライブデモが作成されるわけではありません。

主なプロジェクトファイルを理解する

app.js：Expressアプリケーション、アカウントおよびクレジット関連のルート。
db.js：MySQL接続プール。
youtube.js：制限付きの実験的な動画ワークフロー。
lib/ai.js：モデルへのリクエストと多言語プロンプト。
lib/network.js：公開HTTPS URLの検証。
views/：EJSページと共有レイアウト。
public/：スタイル、ブラウザコード、ブランディング。
schema.sql：アカウントデータベーステーブル。
scripts/setup.js：対話型インストーラー。
compose.mysql.yml：任意で使用できるローカルMySQLサービス。
test/：自動回帰テスト。

まとめ

AI Writerは、商品写真を多言語のECサイト用下書きに変換する、実用的なローカルワークフローを提供します。対話型インストーラーから始め、画像認識に対応したOpenAIモデルを接続し、公開HTTPS画像を追加したうえで、公開前にすべての結果を確認してください。アカウント、クレジット、翻訳、テスト機能が堅 solidな基盤を提供しますが、本番環境へのデプロイでは、ブラウザーの分離、ネットワーク制御、HTTPSに引き続き慎重な対応が必要です。