ドキュメント

開発の背景

Alter Productは、インタラクティブな商品表示、構成設定、カスタマイズのためのモダンなウェブアプリケーションです。プリントオンデマンド事業者、カスタマイズを提供するメーカー、オンラインストア、そして動的で完全にインタラクティブな3D環境で商品を紹介したいクリエイター向けに開発されました。

このプラットフォームでは、次のツールを一連のECワークフローで使用できます。

• Designer – バリエーション、印刷領域、商品、ランタイム設定を定義する中央ワークスペース
• Viewer – 商品を視覚的に紹介するEC向け3D商品ビューアー
• Configurator – 商品バリエーションやパラメーター（サイズ、素材、色など）を選択するEC向け3Dコンフィギュレーター
• Customizer – 商品にグラフィック、文字、レイアウト、印刷要素を追加する高度なECデザインツール
• 3Dモデルジェネレーター – 編集可能な型紙、縫い目、寸法を基に、パラメトリックな3Dモデルを作成・調整

Viewer、Configurator、Customizerは、iframeでウェブサイトに埋め込み、URLパラメーターで設定し、安全なpostMessage通信で連携できます。

Designerモジュールは中央管理機能を担い、バリエーション、印刷領域、ランタイム設定を定義します。Viewer、Configurator、Customizerは、これらの設定とDesignerで準備したデザインを使ってEC向けの画面を表示します。Designerワークスペース自体を開くわけではありません。販売者向けの業務ではDesignerも埋め込めます。埋め込みやローカル保存を使う構成では、アセットとデザインデータは自分のサーバーに保存され、Alter Productがライセンスとランタイムへのアクセスを管理します。

連携用にAlter Productは専用のPublic APIを提供しており、ストアやバックエンドからデザインデータを取得し、Customizerの注文を同期できます。WordPress/WooCommerceストアには公式WordPressプラグインもあります。設定の詳細はWooCommerce連携ガイドをご覧ください。

3Dモデルジェネレーター

ジェネレーターのテンプレート、またはジェネレーター付きの既存モデルから始めます。型紙、縫い目、寸法を編集し、マネキン上で仕上がりを確認してテクスチャを適用します。ジェネレータープロジェクトを保存し、その保存済みリビジョンをデザインで使用します。生成されたモデルは、Designer、および既存のCustomizer、Configurator、Viewerの製品ワークフローに対応します。

WordPressでは、再利用するテンプレート、マネキン、テクスチャライブラリを「アセット」で管理します。HDRI環境には共通の環境ライブラリを使用します。「モデルジェネレーター」にはローカルプロジェクトが表示され、ジェネレーター付きモデルをインポートできます。スターターパックでは、選択したモデルとそのジェネレーター、テンプレート、関連アセットをダウンロードします。両方のマネキンも含まれます。プロジェクトとファイルはWordPressに保存されますが、カタログ更新、インポート、フロントエンド、アクセス確認には引き続きAlter Productを使用します。

クイックスタート

次の手順でAlter Productをストアに接続できます。

1. アカウントを作成し、連携方法を選ぶ 登録またはログインします。WooCommerceストアでは公式プラグインとAuto Connectを、独自ストアやヘッドレス構成ではPublic APIを利用してください。
2. ストアにインストールして接続する WordPress/WooCommerceではプラグインをインストールし、パーマリンクを有効にしてWordPress管理画面から接続します。詳しい手順はWooCommerce連携ガイドをご覧ください。独自構成では、サーバー側のAPI認証情報を作成し、ストアのドメインを許可します。
3. デザインを作成して紐付ける WooCommerceの商品編集ページでAlter Productタブを開き、デザインを作成または選択します。Designerでバリエーション、印刷領域、ランタイム設定を定義し、Viewer、Configurator、Customizerが正しいEC画面を表示できるようにします。
4. 選んだツールを埋め込み、ランタイムイベントを処理する WooCommerceプラグインでは、商品ページやWordPressページに選んだツールを表示できます。独自連携ではiframeを埋め込み、バックエンドで有効期間の短い埋め込みセッショントークンを作成し、postMessageでカート追加、現在のペイロード取得、Customizer注文同期を処理します。