NAV Navbar
html

紹介

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.init YMK.init(args)
    パラメーター:
  • args: JSONObject
    • autoOpen(任意): ブール値の既定値は FALSE です。スクリプト読込後に、 YMK Web モジュールを自動的に起動するかしないかを決めます。
    • hideButtonsOnResult(任意): ブール値の既定値は FALSE です。結果ページのボタンを非表示にするかしないかを決めます。
    戻り値: なし
    初期値を変更することで、YMK モジュールの既定動作を変更します。
YMK.open YMK.open([loadLiveMode, image])
    パラメーター:
  • loadLiveMode(任意): ブール値、YMK Web モジュールのライブ モードを開くか開かないかを決めます。
  • image(任意): base64OrBlob、YMK Web モジュールのフォト モードを開くか開かないかを決めます。 base64 形式の画像または画像オブジェクトの BLOB に対応します。
    戻り値: なし
    YMK Web モジュールを開きます。
YMK.applyMakeupBySku YMK.applyMakeupBySku(skuId, callback)
    パラメーター:
  • skuId: ストリング、SKU ID
  • callback(任意): 関数、メイク効果を適用後に発火します。
    戻り値: なし
    指定される SKU ID によりメイク効果を変更します。Perfect コンソールから SKU 情報を取得できます。
YMK.applyMakeupByLook YMK.applyMakeupByLook(lookId, callback)
    パラメーター:
  • lookId: ストリング、ルック の ItemGUID
  • callback(任意): 関数、メイク効果を適用後に発火します。
    戻り値: なし
    指定されるルックの ItemGUID によりメイク効果を変更します。Perfect for SMB からルック情報を取得できます。
YMK.addEventListener YMK.addEventListener(eventName, handlerFunction)
    パラメーター:
  • eventName: ストリング、イベント名。
  • handlerFunction: 関数、ハンドラー関数。
    戻り値: EventListenerIdentifier
    指定するイベント名にリスナーを追加します。 removeEventListener で使われるこのリスナーの識別子を戻します。
YMK.removeEventListener YMK.removeEventListener(EventListenerIdentifier)
    パラメーター:
  • EventListenerIdentifier: 整数
    戻り値: なし
    上の YMK.addEventListner によって戻される特定のリスナーを削除します。
YMK.reset YMK.reset()
    パラメーター: なし
    戻り値: なし
    メイク画面で適用中のすべてのメイク効果を削除します。
YMK.closeEngine YMK.closeEngine()
    パラメーター: なし
    戻り値: なし
    メイク画面を閉じてトップ ページに戻ります。
YMK.close YMK.close()
    パラメーター: なし
    戻り値: なし
    YMK モジュールを閉じます。
YMK.pause YMK.pause()
    パラメーター: なし
    戻り値: なし
    ライブ メイク モードでのみ作動します。 カメラ映像を一時停止します。
YMK.resume YMK.resume()
    パラメーター: なし
    戻り値: なし
    ライブ メイク モードでのみ作動します。 カメラ映像を再開します。
YMK.snapshot YMK.snapshot(contentType, callback)
    パラメーター:
  • contentType: ストリング、有効値:['base64', 'blob']
  • callback: 関数
    • base64OrBlob: base64 形式またはバイナリ形式の画像。
    戻り値: なし
    現在のメイク画像のスナップショットを取得し、任意のコールバック関数から返されたオブジェクトを取得します。
YMK.isLoaded YMK.isLoaded()
    パラメーター: なし
    戻り値: なし
    ライブ メイク モードまたはフォト メイク モードを読み込んでいるかをチェックします。
YMK.getTuner YMK.getTuner(type)
    パラメーター:
  • type: ストリング、有効値:['eyebrow']
    戻り値: チューナー オブジェクト
    詳細は、EyebrowTuner をご確認ください。
YMK.enableCompare YMK.enableCompare()
    パラメーター: なし
    戻り値: なし
    比較モードを有効にします。
YMK.disableCompare YMK.disableCompare()
    パラメーター: なし
    戻り値: なし
    比較モードを無効にします。

イベント

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

イベント
cameraClosed function()
    引数: なし
このイベントは、カメラを閉じると発火します。
cameraFailed function()
    引数: なし
このイベントは、カメラが起動失敗すると発火します。 ユーザーがカメラへのアクセス権を拒否したか、アプリがカメラ映像を正常に取得できなかったなど、カメラが起動できなかった場合に発火します。
cameraOpened function()
    引数: なし
このイベントは、カメラが起動すると発火します。
compare function()
    引数: なし
このイベントは、比較モードが有効になると発火します。
compareDisabled function()
    引数: なし
このイベントは、比較モードが無効になると発火します。
closed function()
    引数: なし
このイベントは、YMK モジュールを閉じると発火します。
engineClosd function()
    引数: なし
このイベントは、メイク画面からユーザーがトップ ページに戻ると発火します。
loaded function()
    引数: なし
このイベントは、指定される画像やカメラ映像がメイク画面に読み込まれると発火します。
loading function(progress)
    引数:
  • progress: 整数、10~100
このイベントは、YMK モジュールが実行開始すると発火します。
opened function()
    引数: なし
このイベントは、YMK モジュールを開くと発火します。
photoLoaded function()
    引数: なし
このイベントは、指定される画像がメイク画面に読み込まれると発火します。
photoSaved function()
    引数: なし
このイベントは、写真を保存すると発火します。
reset function()
    引数: なし
このイベントは、すべてのエフェクトがリセットされると発火します。
videoLoaded function()
    引数: なし
このイベントは、カメラ映像がメイク画面に読み込まれると発火します。
zoom function()
    引数: なし
このイベントは、ズーム時に発火します。