Android
iOS
Web
画像加工
AdobeCreativeSDK

iOS, Android & Web で容易く画像加工機能を実装してみた件 〜Adobe's Creative SDK 入門篇〜

More than 1 year has passed since last update.

Adobe の Creative SDK :information_desk_person:


LINE CameraInstagram のような画像加工機能を手軽に実装できる :frame_photo:


Creative SDK の Image Editor UI

white (2).png


サポートされている機能

  • フィルタ
  • スタンプ(利用時にダウンロード :inbox_tray:
  • フレーム(利用時にダウンロード :inbox_tray:
  • トリミング :scissors:
  • 明るさ・彩度 :high_brightness:
  • ぼかし
  • 回転・反転 :arrows_counterclockwise:
  • テキスト追加
  • 落書き :paintbrush:
  • Redo & Undo
  • チュートリアル

etc.


導入事例

iOS

Android

加工の用途

  • プロフィール画像 :bust_in_silhouette:
  • 撮影した出品物の写真 :camera_with_flash:

お高いんでしょう?

  • Creative SDK無料 でご利用いただくことができます :ok_hand_tone1:

留意点 :warning:

  • Creative Cloud Connected” のロゴを表示して Adobe の技術であることを明記する必要がある :copyright:

fabrika_example.jpg


Creative SDK の導入手順 :arrow_right:


STEP :one:

  • Adobe ID を作成済みであること(無料)

STEP :two:

スクリーンショット 2017-08-19 10.51.04.png


STEP :three:

  • 発行した API Key Client secret Redirect URI をプロジェクト内に記述
/* Be sure to fill in the two strings below. */
private static final String CREATIVE_SDK_CLIENT_ID      = "<YOUR_API_KEY_HERE>";
private static final String CREATIVE_SDK_CLIENT_SECRET  = "<YOUR_CLIENT_SECRET_HERE>";
private static final String CREATIVE_SDK_REDIRECT_URI   = "<YOUR_REDIRECT_URI_HERE>";

(※ Android の場合)


アプリをリリースするために :earth_asia:


Adobe の審査 を突破する必要があります :dash:

  • Creative Cloud Connected” が画面に表示されていることを証明できるスクリーンショットを送付など :iphone:
  • Apple Inc. さんの審査基準ほど厳しくはないと思います :apple:

スクリーンショット 2017-08-19 16.59.00.png


Image Editor UI をカスタマイズ :hammer_pick:


iOS の場合


Android の場合

例:日本語のテキストを変更してみる

スクリーンショット 2017-08-19 14.24.54.png

(※ 自身のプロジェクトに res > values-ja > values-ja.xml が無ければ作成します)


結果

white (4).png


Image Editor UI が提供する加工機能を絞る :hammer_pick:


Android の場合

例: 変形赤目補正 のみに限定

ToolsFactory.Tools[] tools = {ToolsFactory.Tools.PERSPECTIVE, ToolsFactory.Tools.REDEYE};
Intent imageEditorIntent = new AdobeImageIntent.Builder(MainActivity.this)
        .setData(mSelectedImageUri)
        .withToolList(tools)
        .build();
startActivityForResult(imageEditorIntent, REQ_CODE_CSDK_IMAGE_EDITOR);

結果

white (5).png


補足 :information_source:

  • ユーザーが Image Editor UI を利用する際に、Adobe アカウントでログインする必要はありません

Creative SDK が提供する他の機能

  • Image Editor UI 以外にも機能が充実 :honey_pot:
    • User Auth UI
    • Asset Browser UI
    • Send To Desktop API
    • Typekit UI

User Auth UI

  • Adobe ID のログイン画面を提供

white (4).png


Asset Browser UI

  • Creative Cloud へのアクセスを提供

white (3).png


Send To Desktop API

  • モバイル端末からデスクトップの Adobe 製アプリにデータを送信 :desktop:

send-to-desktop-flow.jpg


Typekit UI

  • Typekit フォントへのアクセスを提供
ALL FONTS SYNCED FONTS
typekit-selector.png typekit-synced-fonts.png

分析系 :bar_chart:


Integration Analytics

スクリーンショット 2017-09-30 21.09.08.png


歴史的経緯


Aviary SDK

  • iOS, Android & Web に画像編集機能を授ける Aviary SDK が 2014 年に Adobe に買収され Creative SDK の一部となりました
  • Aviary SDK のサポートは終了しており Creative SDK への移行が推奨されています

追記 :pen_fountain:


第二の Creative SDK :interrobang:


PhotoEditor SDK という競合が存在


Creative SDK まとめ

  • iOS, Android & Web に対応できる
  • 短期間でアプリに画像加工機能を導入せざるを得ないときに選択肢の1つとしていかがでしょうか

Creative SDK 公式のサンプルコード

  • https://github.com/CreativeSDK/
    • 発行した API Key Client secret Redirect URI に書き換えるとビルドできます
    • Pull request と Issue は歓迎らしいです

:end: