紹介

JavaScript SDK は、Webサイトにバーチャルメイク機能を埋め込む基本セットです。

基本設定

HTML ページには、次のコード スニペットが含まれます。

<script>
  (function (d,k) {
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://plugins-media.perfectcorp.com/smb/sdk.js?apiKey=' + k;
    var x = d.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })(document, 'for-draft');
</script>
<div id="YMK-module"></div>

for-draft を API キーと置き換えてください。

本 JavaScript SDK は、ファイルのダウンロードやインストールは不要です。代わりに、JavaScript コードを HTML ページ (非同期で SDK を Web ページに読み込み) に記述することで動作します。非同期読み込みとは、Web ページの他の要素の読み込みを遮らないという意味です。Web モジュールを表示するには、ページの HTML コードの タグの冒頭に、 次のコード スニペットを挿入します。

コード スニペットとは SDK を読み込み、初期化するものです。ページが初期化されると、グローバル変数である “YMK” が認識されます。この変数は、Web ページが SDK と通信するためのものです。

定義済みコールバック

Web ページでグローバル関数 'window.ymkAsyncInit' を宣言します。SDK の読み込みが完了すると、モジュールが有効化されます。

<script>
  window.ymkAsyncInit = function() {
    YMK.init();
  }
</script>

メイク エフェクトを適用

以下のようなコードを使用することで、メイクエフェクトを適用することができます。詳細は以下のメソッドを参照してください。

<button onClick="YMK.applyMakeupBySku('LIP_COLOR_01_01')">
Apply Lip Color
</button>

参照

メソッド

イベント

YMK JavaScript API イベント モデルは、下記のイベントを組み合わせて使用できます。