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: