Alter Product を自社サイトに埋め込む：WordPress + WooCommerce または API

プラグインには WordPress と WooCommerce への対応が組み込まれています。API では、別のプラットフォーム、ヘッドレスアプリ、既存の注文システムとの接続を独自に開発できます。

サイトでお客様に行ってほしい操作に合わせて選びます。デザインとカスタマイズのルールは、あらかじめ Designer で準備します。

Alter Product を自社サイトに埋め込むには、有効な Business サブスクリプション、またはこの機能を含む上位プランが必要です。WordPress + WooCommerce プラグインと独自 API 連携の両方に適用されます。Personal FREE と Personal には、自社ショップへの埋め込みは含まれません。

プラグインを使う場合は、WooCommerce をインストールして有効化した WordPress と、Alter Product アカウントを用意します。ファイルを自社ホスティングに保存しても、必要なサブスクリプションの代わりにはなりません。アプリの提供と起動の認可は引き続き Alter Product が行います。

Alter Product はショップのページ内の iframe で動作します。ページがセキュアコンテキストを提供しない場合、ブラウザーはアプリが使用する一部機能を制限します。HTTPS は通信を暗号化し、有効な証明書はブラウザーによるドメインの確認を可能にします。

ブラウザーは iframe の親ページも確認します。そのため、ショップが HTTP で動作している場合、Alter Product アプリの URL が HTTPS であるだけでは不十分です。ツールを埋め込む自社ページも HTTPS にする必要があります。これは埋め込みアプリに対するブラウザーのセキュリティ規則によるものです。

自動接続では、Alter Product アカウントの認可とショップ設定を案内します。この方法では API キーを手作業でコピーする必要がありません。

WooCommerce の商品編集画面で Alter Product タブを開きます。新しいデザインを作るか既存のものを選び、Designer を開きます。その商品のプリント、選択可能なオプション、印刷領域を設定します。

プラグインは、モデル、ライブラリ、デザイン、モックアップ、注文のファイルを WordPress の保存領域に記録します。生成ツールのプロジェクトとそのリビジョンのデータも、この WordPress のデータベースに保存されます。

自社の素材を追加したり、Alter Product から選んだアセットをインポートしたりできます。ダウンロード後はローカルコピーを使用します。インポート、更新確認、新バージョンのダウンロードは、それぞれ別の操作です。

適切な権限で WordPress 管理画面からライブラリとデザインを管理します。お客様はショップで公開されたツールと素材を利用し、ライブラリの管理者向け編集機能にはアクセスしません。

どのデザインを商品に割り当てるか、どこにツールを表示するか、どのカスタマイズ機能を提供するかを決めます。埋め込み Customizer のライブラリで利用できるアセットも確認してください。デザインの割り当て後、商品ページの埋め込み表示が既定で有効になる場合があります。表示は商品設定で管理できます。

アセットは自社で保存し、ツールの画面は Alter Product から iframe に読み込みます。Alter Product はアカウントのアクセス権、プラン、セッションを確認し、インポート用カタログを提供します。この連携には同サービスへの接続が必要です。

バックアップでは、データベースとファイルディレクトリに加え、プラグインの暗号化データを読むために必要な WordPress のキーとソルトも保存してください。表示用画像だけでなく、作業継続に必要なデータも復元できます。

ショップの構成に合わせて、商品ページ内のツール、専用ページへのボタン、用意されたブロックやショートコードによる埋め込みを選びます。Viewer、Configurator、Customizer は役割が異なるため、すべてを同時に提供する必要はありません。

商品表示を自社ブランドに合わせます。プラグインでローカルの背景、ロゴ、埋め込みツールの外観設定を管理できます。各オプションの利用可否はプランによって異なります。

お客様がバリエーションを選び、カスタマイズします。プラグインは設定内容と保存したデザインをカート明細に関連付け、その後 WooCommerce の注文に引き継ぎます。モックアップがあれば、注文されたプリントを識別しやすくなります。

プラグイン設定でサービス事業者との接続を設定します。商品、バリエーション、プリント位置を事業者の商品に対応付け、ファイルを準備して WooCommerce から注文の製作を依頼します。

自分の AI 事業者接続を設定し、デザイン作業中に利用可能な画像生成や画像改善機能を使えます。プラグインのリクエストは WordPress から選択した事業者へ送信され、料金はその事業者の自分のアカウントに計上されます。

埋め込みツールの起動時に、連携システムが短期トークン、つまりセッションキーを取得します。アカウントの長期アクセス情報はサーバー側に残ります。お客様がキーをコピーしたり、運営者の Alter Product アカウントにログインしたりする必要はありません。

現在の実装では、トークンの既定の有効期間は 15 分です。サーバーが別の期間を指定することもあるため、連携システムは取得したセッションの有効期限に従います。トークンを再利用しても期限は延びません。期限後に再び認可するには、新しいセッションが必要です。

ツールの種類と、適切で有効なセッションが残っているかどうかによります。プラグインはすべての訪問者や商品に 1 つの共通セッションを使いません。以下は現在の動作です。

API が新しいトークンを正常に発行すると、カウンターが増えます。発行済みの有効なトークンを使用しても、新規発行にはなりません。プラン選びでは、注文数や訪問者数だけでなく、ツールの起動、再読み込み、再オープンも考慮してください。

同じショップの埋め込みツールは、月間セッション上限を共有します。カウンターはショップごとに分かれ、UTC の暦月単位で集計されます。WordPress 管理画面内の埋め込み Designer とモデル生成ツールの新規セッションも加算されます。インポート API で利用可能なモデルをダウンロードするだけでは、エディターのセッション開始にはなりません。

上限に達すると、新しいセッションの発行が拒否されます。これはサブスクリプションの利用枠です。現在の枠の大きさは契約プランで確認してください。

Public API は HTTP リクエストと JSON データを使います。そのため、バックエンドの言語や実行環境で独自の連携を開発できます。Alter Product を埋め込むために、ショップを WordPress に作り直す必要はありません。

以下はサーバー側の接続に使える技術の例です。どの技術でも、API 認可、ツールのセッション作成、商品・カート・注文と自社システムの関連付けという同じ手順を実装します。

ブラウザー側には React、Vue、Angular、または通常の HTML と JavaScript を使えます。通信処理の実装には TypeScript も適しています。ページは iframe を埋め込み、postMessage イベントを処理して、自社バックエンドに接続します。

フロントエンドはページの外観とカートの反応を、バックエンドは認証済みの Public API 呼び出しを担当します。Next.js のように両方を扱うフレームワークでは、長期キーの処理とセッション作成をサーバー側だけに配置します。

独自の購入手続き、決済システム、CMS、注文対応フローをそのまま利用できます。導入時に、これらをデザインデータと選択した Alter Product ツールのイベントに接続します。

Alter Product は 3D ツール、デザインデータ、セッションの仕組みを提供します。自社バックエンドがこれらを商品、顧客アカウント、カート、注文処理に接続します。ブラウザーに Alter Product のアクセス情報を公開せず、自社フロントエンド用の中継エンドポイントを作成できます。

まず 1 商品で接続と埋め込みセッションを動かします。その後、選択したツールに合わせて、設定、デザイン保存、注文の処理を追加します。

埋め込み手順にはパラメーターと例が記載されています。postMessage の章はページとの通信を説明し、API ドキュメントはバックエンド側の操作を説明します。

1 商品を準備したら、全工程を試します。その後で、確認済みの設定方法をほかの商品にも展開します。