ClippingMagic.js

ClippingMagic.js は、Clipping Magic エディターをお客様ウェブサイトに便利に統合します。 1 枚の画像をフロントページで編集したり、バルククリッピングのように一連の画像を編集したりすることができます。

試してください

数枚の画像をアップロードした後、ブラウザーで右下の例を実行することができます。「試してください」ボタンを押してください。

通常の Clipping Magic エディターと API エディターの間には、若干の違いがあります。

  • カスタムデフォルト設定はご利用になれません。
  • ヘルプスプラッシュ画面は表示されません。

設定

ClippingMagic.js を使用するには、編集を行おうとするページで ClippingMagic.js を含めて初期化し、起動します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://clippingmagic.com/api/v1/ClippingMagic.js" type="text/javascript"></script>
<script type="text/javascript">
  var errorsArray = ClippingMagic.initialize({apiId: 123});
  if (errorsArray.length > 0) alert("すみません、ブラウザーが必要な機能に欠けています: \n\n " + errorsArray.join("\n "));
</script>

ClippingMagic.js は、jQuery に依存するので、ClippingMagic.js のロード前に jQuery をロードしてください。


1 枚の画像の編集

エディターは、以下のように 1 枚の画像用に表示することができます。

ClippingMagic.edit({
    "image" : {
      "id" : 2345,
      "secret" : "image_secret"
    },
    "locale" : "ja-JP"
  }, callback);

コールバック関数は、result-generated または editor-exit のいずれか(両方ではなく)で呼び出されます。 両方は、エディターが閉じたことを示します。

この呼び出しは、DOM を参照するので ドキュメントレディイベントにしてください。


連続的に複数の画像を編集

エディターは、以下のように複数の画像を編集するよう表示することができます。

ClippingMagic.edit({
    "images" : [ {
      "id" : 2345,
      "secret" : "image_secret"
    }, {
      "id" : 2346,
      "secret" : "image_secret2"
    } ],
    "locale" : "ja-JP"
  }, callback);

コールバック関数は、ユーザーが生成する結果ごと(「完了」をクリックするごと)に毎回 result-generated で呼び出されます。 終わりに、1 回の editor-exit 呼び出しがあり、ユーザーが X をクリックしたが、編集すべき画像がもうないことによりエディターが終了したことを示します。 ユーザーが画像をスキップしたときにはコールバックはありません。

この呼び出しは、DOM を参照するので ドキュメントレディイベントにしてください。


コールバック function(opts)

edit 関数は、callback 関数をパラメータとして扱います。 このコールバックによって、ユーザーアクションに対応し、バックエンドサーバーに画像編集の進捗を通知することができます。

コールバックシグネチャは、function(opts) で、例外または返された値は無視されます。 opts パラメータは、PlainObject で、以下が含まれます。

event

今起きたことを示すストリング。以下の表を参照してください。

image オプション。 画像 JSON オブジェクト(id およびシークレットのみが含まれます)。
error オプション。 エラー JSON オブジェクト
イベント画像がありますか?エラーが発生しましたか?意味
result-generatedはいいいえ ユーザーが「完了」をクリックしました。結果は生成され、バックエンド API を使用してただちにダウンロードすることができます。 1 枚の画像モードでは、エディターは終了しています。
editor-exitいいえいいえ ユーザーが右上隅の赤い X をクリックしてエディターを終了させたか、複数画像モードで編集すべき画像がなくなったかです。 エディターは終了しました。
errorいいえはい エラーが発生しました。詳細は、error 値を調べてください。 エディターは終了しました。

エディター終了後ただちに再度 edit() を呼び出すことができます(その前に行った呼び出しは例外となります)。

コールバック呼び出しの例

callback({
  "event" : "result-generated",
  "image" : {
    "id" : 2345,
    "secret" : "image_secret"
  }
}); 

関数の説明

ClippingMagic.initialize(opts) -> array_of_missing_features

initialize 関数は、初期化を設定するキー/値ペアを含む PlainObject を取ります。

apiId
必須 API Id。

関数は、現在のブラウザーでは欠如しているがエディターを実行するには必要な機能を説明するストリングを含む JavaScript 配列を返します。 この配列が空の場合、edit 関数を呼び出すことができます。

ClippingMagic.edit(opts, callback)

edit 関数は、以下のパラメータを取ります。

opts

必須 初期化を設定するキー/値ペアを含む PlainObject

image オプション。 画像 JSON オブジェクト(id およびシークレットのみが必須です)。
images オプション。 画像 JSON オブジェクト の配列(id およびシークレットのみが必須です)。
locale オプション。 エディターで使用する表示言語。省略された場合は、デフォルトで英語になります。有効な値は以下です。
コード表示言語
en-US English (英語)
de-DE Deutsch (ドイツ語)
es-ES Español (スペイン語)
fr-FR Français (フランス語)
it-IT Italiano (イタリア語)
ja-JP 日本語
ko-KR 한국어 (韓国語)
pt-BR Português (ポルトガル語)
zh-Hans-CN 简体中文 (中国語)
callback

必須 詳細については、上記のコールバックの項を参照してください。

このメソッドは値を返しません。 このメソッド呼び出しの前に、initialize が呼び出されていない場合、または initialize が空でない配列を返した場合、あるいはエディターウィンドウがすでに開いている場合、例外が発生します。