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

Adobe の Creative SDK

LINE Camera や Instagram のような画像加工機能を手軽に実装できる

Creative SDK の Image Editor UI

サポートされている機能

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

etc.

導入事例

iOS

https://creativesdk.adobe.com/apps.html

Android

加工の用途

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

お高いんでしょう？

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

留意点

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

Creative SDK の導入手順

STEP

Adobe ID を作成済みであること（無料）

STEP

API Key Client secret Redirect URI 発行のためアプリ登録を行う
- https://creativesdk.zendesk.com/hc/en-us/articles/216369343-Why-and-how-to-register-my-app-

STEP

発行した 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 の場合）

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

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

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

Image Editor UI をカスタマイズ

iOS の場合

https://creativesdk.adobe.com/docs/ios/#/articles/imageeditor/index.html

Android の場合

Creative SDK 側で定義されている string や dimen などのリソースを自身のプロジェクト側で上書きする
- https://creativesdk.adobe.com/docs/android/#/articles/imageediting/index.html

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

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

結果

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

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);