説明
DokimiAI はバーチャル試着サービス (https://dokimiai.io) です。このプラグインはその WooCommerce クライアントで、商品ページに「試着してみる」ボタンを追加し、顧客がウェブカメラを使ってピアス・イヤリングをリアルタイムに試着できるようにします。
プライバシー保護のため、試着そのものは買い物客のブラウザ内で完結して実行されます。ウェブカメラの映像がアップロードされることはなく、顔の特徴点もどこにも送信されません。顔追跡 (MediaPipe Face Mesh) と画像合成は訪問者の端末上でローカルに行われます。DokimiAI サービスが提供するのは試着ランタイム、すなわち試着モーダルを開いたときにブラウザがダウンロードする固定・バージョン付き・不変の静的アセット一式です (対象ファイルとチェックサムは下記「外部サービス」参照)。
アカウントは不要です。DokimiAI サービス (dokimiai.io) の有料プランはサービス側の追加機能を提供するものであり、このプラグインは単体で完全に動作します。
試着を開いたときにブラウザがサービスから試着ランタイムのアセットをダウンロードするため、インターネット接続が必要です。
機能
- 商品ページでのリアルタイムのピアス試着。「試着してみる」ボタンで開くモーダル内で動作します。
- モーダル内での色・サイズ選択: 色を選ぶとオーバーレイ画像が即座に切り替わり、選択した内容は商品ページの選択欄に反映されます。
- ピアスは指 1 本のドラッグで位置を微調整でき、3 本指のジェスチャーでカメラをズームできます。
- 結果をシェア: キャプションのコピー、スナップショットの保存、X への投稿やネイティブ共有シートの利用ができます。SNS 投稿向けに軽い艶肌補正 (任意) も用意しています。
- 商品ごとの有効化トグル、カテゴリー、色ごとのオーバーレイ画像に対応。
- 完全に翻訳可能: ソース言語は英語で、日本語翻訳を同梱しています。
外部サービス
このプラグインは DokimiAI バーチャル試着サービス (https://dokimiai.io) のクライアントであり、同サービスに依存するのはブラウザ試着ランタイムの配信という 1 点のみです。
バーチャル試着は、MediaPipe Face Mesh ランタイム (Google、Apache License 2.0) を使用して訪問者のブラウザ内で完結して動作します。可読でないランタイムおよびモデルのバイナリは、DokimiAI サービスが https://cdn.dokimiai.io/ から、固定・バージョン付き・不変のパスで配信します:
- /mediapipe/face_mesh/0.4.1633559619/face_mesh_solution_simd_wasm_bin.wasm
SHA256: fb9e9cfe8b83a914e40eab2efd3b0d92a61f82a7c968589f223ab2a7e331d314 - /mediapipe/face_mesh/0.4.1633559619/face_mesh_solution_packed_assets.data
SHA256: dbe5905c582c0462cdaea17e7e6ecea92edaa8cccc515c5e2e7291f2cbb5fb99 - /mediapipe/face_mesh/0.4.1633559619/face_mesh.binarypb
SHA256: 139546bf05aebb33e2611b6b945f3a1629c316ca924e33cec1547c85ddef9f53
これらは npm パッケージ @mediapipe/face_mesh バージョン 0.4.1633559619 (https://www.npmjs.com/package/@mediapipe/face_mesh) の無改変の成果物です。バージョン付きパスは不変で、ランタイムの更新時はこれらのファイルを上書きせず新しいバージョンディレクトリが公開されるため、配信されるバイトは常に上記のチェックサムと一致します。
訪問者が試着を有効化した商品ページで試着モーダルを開いたとき (そのときに限り)、ブラウザがこれら 3 つのファイルをダウンロードします。このリクエストで個人データが送信されることはありません。クエリ文字列、Cookie、訪問者識別子は一切付与されず、カメラのフレームと顔の特徴点がアップロードされることもありません。
このプラグインが使用する JavaScript は、MediaPipe Face Mesh ソリューションのエントリーポイントや WebAssembly / アセットローダーのグルーコードを含め、すべてプラグイン内に同梱され、自身のサイトから読み込まれます。サービスから配信されるのは、上記の可読でない 3 つのバイナリのみです。
任意の「Powered by DokimiAI」クレジット (既定はオフ) は dokimiai.io への通常のハイパーリンクであり、プラグインがその URL へデータを送信することはありません。
サービスの利用規約とプライバシー:
- 利用規約: https://dokimiai.io/legal/terms/
- プライバシーポリシー: https://dokimiai.io/legal/privacy/
同梱サードパーティライブラリとソースファイル
このプラグインは、次のサードパーティ JavaScript を同梱し、自身のサイトから配信します:
- MediaPipe Face Mesh および Camera Utils (Google) — Apache License 2.0。ソース: https://github.com/google-ai-edge/mediapipe ライセンス全文は assets/mediapipe/LICENSE に同梱しています。これは上流の LICENSE ファイルの逐語コピーです (Apache License 2.0 と、同ファイルが含む UTF-8 デコーダーの注記)。上流プロジェクトに独立した NOTICE ファイルはありません。
同梱している MediaPipe の JavaScript は、assets/mediapipe/ 以下の次のファイルのみです (無改変のベンダーファイル):
- camera_utils/camera_utils.js — カメラのフレームループ用ヘルパー。試着を有効化した商品ページでプラグインが読み込みます。
- face-mesh/face_mesh.js — Face Mesh ソリューションのエントリーポイント。camera_utils.js とともにプラグインが読み込みます。
- face-mesh/face_mesh_solution_packed_assets_loader.js — モデルアセットのローダー。試着開始時に face_mesh.js からリクエストされます (自身のサイトから)。
- face-mesh/face_mesh_solution_simd_wasm_bin.js — WebAssembly ランタイムのグルーコード。試着開始時に face_mesh.js からリクエストされます (自身のサイトから)。
- LICENSE — 上記ファイルおよびサービスから配信されるランタイムバイナリに適用される Apache License 2.0 の全文です (「外部サービス」参照)。
これらのファイルが読み込む可読でない 3 つのランタイムバイナリ (face_mesh_solution_simd_wasm_bin.wasm、face_mesh_solution_packed_assets.data、face_mesh.binarypb) は同梱されず、「外部サービス」に記載のとおり DokimiAI サービスから配信されます。
ソースコードとビルド
このプラグインは、可読な完全ソースを同梱しています。ブラウザ内試着ウィジェット (assets/js/dokimiai-tryon.js) は、build/src/ 以下に含まれる TypeScript ソースから esbuild でコンパイルされています。
ウィジェットをソースから再ビルドするには:
- Node.js 18 以降をインストールします。
- build/ ディレクトリで次を実行します: npm install
- 続いて次を実行します: npm run build:widget
これにより、build/build.mjs の esbuild 設定を使って build/src/tryon-core.ts から assets/js/dokimiai-tryon.js が再生成されます。node_modules ディレクトリは同梱されません。npm install により、build/package.json で宣言されたビルドツール (esbuild) が正確に復元されます。対応するソースのない縮小コードは同梱されていません。
インストール
- プラグインを
/wp-content/plugins/dokimiai-wooディレクトリにアップロードするか、プラグイン画面からインストールします。 - プラグイン画面からプラグインを有効化します。
- 商品を編集し、「DokimiAI Try-On」ボックスを開いて有効化し、カテゴリーを選択してオーバーレイ画像を設定します。
注: オーバーレイ画像には https:// の URL を使用してください。HTTPS 店舗では、http:// の画像は混在コンテンツとしてブラウザにブロックされ、表示されません。「画像を追加」ボタンを使うか、https:// の URL を入力してください。
注: 訪問者のブラウザは、初めて試着を開くときに「外部サービス」に記載のランタイムアセットをダウンロードするため、インターネット接続が必要です。取得後はブラウザにキャッシュされます。
FAQ
-
WooCommerce は必要ですか ?
-
はい。WooCommerce 10.9 以降がインストールされ、有効化されている必要があります。
-
プラグインは外部サーバーから何をダウンロードしますか ?
-
「外部サービス」に記載された 3 つの MediaPipe ランタイムバイナリのみで、DokimiAI サービスの CDN (cdn.dokimiai.io) から配信されます。試着モーダルを開いたときに訪問者のブラウザが取得し、以後はキャッシュされます。プラグインの JavaScript はすべて自身のサイトから読み込まれます。対象ファイル・チェックサム・プライバシーの詳細は「外部サービス」をご覧ください。
-
カメラ映像はどこかにアップロードされますか ?
-
いいえ。顔追跡と画像合成は訪問者のブラウザ内でローカルに実行されます。カメラ映像と顔の特徴点がアップロードされることはありません。
-
DokimiAI のアカウントは必要ですか ?
-
いいえ。アカウントもキーも不要です。このプラグインは単体で完全に動作します。
-
試着は開くが商品画像 (ピアス) が表示されない
-
オーバーレイ画像の URL には https:// を使用してください。HTTPS 店舗では、http:// の画像は混在コンテンツとしてブラウザにブロックされます。「画像を追加」ボタンを使うか、https:// の URL を入力してください。
評価
このプラグインにはレビューがありません。
貢献者と開発者
変更履歴
1.6.0
- Try-on images can now carry a real height in millimetres, and a separate height per size. Switching size during the try-on redraws the product at the size the shopper picked. Products with no height registered are unchanged: they draw exactly as before.
- Fixed the try-on stopping when MediaPipe’s initialisation ran twice at once and the two runs aborted each other’s graph.
- The product editor now explains that try-on images must be transparent PNGs, and warns after saving when an image is not a PNG or is hosted somewhere that does not send CORS headers. The save always goes through.
1.5.0
- 20 商品の上限を撤廃しました。試着は商品数の制限なく有効化できます。本プラグインには、いかなる組み込みの制限もありません。
- アンインストール時のクリーンアップを追加: プラグイン削除時に、プラグイン自身のオプションを削除します。商品ごとの試着設定は保持されるため、再インストールで復元されます。
1.4.0
- MediaPipe Face Mesh のランタイムバイナリ (.wasm / .data / .binarypb) は、プラグインへの同梱をやめ、DokimiAI サービスの CDN (cdn.dokimiai.io) から固定・バージョン付き・不変のパスで配信するようにしました。SHA256 チェックサムは readme に記載しています。これにより各店舗自身の帯域も削減されます。プラグインの JavaScript は引き続きすべて自身のサイトから読み込まれます。
- サービス系プラグインに関する WordPress.org のガイドラインに従い、サービスの内容、接続先サーバー、アカウント要否を記載した「外部サービス」の説明を追加しました。
- ブラウザがランタイムアセットを取得するためにインターネット接続が必要であることを明記しました。
1.3.2
- MediaPipe ランタイムから未使用の空 (0 バイト) ファイルを削除しました (face_mesh_solution_simd_wasm_bin.data — どこからも参照されていません)。
- readme に MediaPipe の全ファイル一覧を記載しました。すべてのファイルは、クリーンな WordPress 環境でのネットワークキャプチャにより実行時に読み込まれることを確認済みです。
1.3.1
- 残っていたプラン定数とフィルターを削除しました。本プラグインはプラン分岐のない単一の無料版です。
- 未使用の REST エンドポイント (ローカル利用カウンター) とその管理画面表示を削除しました。
- 機能一覧に 20 商品までの試着上限を明記しました。
1.3.0
- WordPress.org での最初のリリース。ピアス試着、シェア機能、任意の艶肌補正を提供します。
- 「試着してみる」ボタンの CSS は、インライン出力ではなく wp_add_inline_style() で読み込まれます。
- 試着は最大 20 商品で有効化できます。
- 完全に国際化: PHP の UI と JavaScript バンドルは翻訳可能です。ソースは英語で、日本語翻訳を同梱しています。