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

## Adobe の [Creative SDK](https://creativesdk.adobe.com/) :information_desk_person:

---

## [LINE Camera](https://play.google.com/store/apps/details?id=jp.naver.linecamera.android) や [Instagram](https://play.google.com/store/apps/details?id=com.instagram.android) のような画像加工機能を手軽に実装できる :frame_photo:

---

## [Creative SDK](https://creativesdk.adobe.com/) の Image Editor UI

![white (2).png](https://qiita-image-store.s3.amazonaws.com/0/6881/8105594b-09bd-2434-d4c2-16b64ac76cbf.png)

---

### サポートされている機能

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

etc.

---

## 導入事例

### iOS

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

### Android

- [フリマjp-出品手数料無料！中古ブランド品・アウトレット通販ショッピング,フリマアプリ](https://play.google.com/store/apps/details?id=jp.co.crooz.android.snaps)
- [売る・あげるフリマアプリ『ガレージセール』](https://play.google.com/store/apps/details?id=jp.co.webshark.GarageSale)

#### 加工の用途

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

---

## お高いんでしょう？

- [Creative SDK](https://creativesdk.adobe.com/) は **無料** でご利用いただくことができます :ok_hand_tone1:

---

## 留意点 :warning:

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

![fabrika_example.jpg](https://qiita-image-store.s3.amazonaws.com/0/6881/c8171ffb-ee03-d5dd-6f95-4aef701bc3c9.jpeg)

---

## [Creative SDK](https://creativesdk.adobe.com/) の導入手順 :arrow_right:

---

### STEP :one:

- [Adobe ID](https://accounts.adobe.com/) を作成済みであること（無料）

---

### STEP :two:

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

<img width="814" alt="スクリーンショット 2017-08-19 10.51.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/6881/249d30b6-2add-8474-2a76-071b8d568119.png">

---

### STEP :three:

- 発行した `API Key` `Client secret` `Redirect URI` をプロジェクト内に記述

``` Java
/* 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 の審査](https://creativesdk.zendesk.com/hc/en-us/articles/204601215-How-to-complete-the-Production-Client-ID-Request) を突破する必要があります :dash:
 - “*Creative Cloud Connected*” が画面に表示されていることを証明できるスクリーンショットを送付など :iphone:
 - Apple Inc. さんの審査基準ほど厳しくはないと思います :apple:

<img width="1285" alt="スクリーンショット 2017-08-19 16.59.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/6881/ab68ad1a-cb77-ce91-c78a-727b89a3ef50.png">

---

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

---

### iOS の場合

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

---

### Android の場合

- [Creative SDK](https://creativesdk.adobe.com/) 側で定義されている `string` や `dimen` などのリソースを自身のプロジェクト側で上書きする :pen_fountain:

 - https://creativesdk.adobe.com/docs/android/#/articles/imageediting/index.html

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

![スクリーンショット 2017-08-19 14.24.54.png](https://qiita-image-store.s3.amazonaws.com/0/6881/2af3f467-2f2e-a147-c534-d1c337ee2c6a.png)

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

---

#### 結果

![white (4).png](https://qiita-image-store.s3.amazonaws.com/0/6881/9ea6c01b-77b6-1245-35be-f3481b4206f0.png)

---

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

---

### Android の場合

#### 例： `変形` と `赤目補正` のみに限定

``` Java
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](https://qiita-image-store.s3.amazonaws.com/0/6881/181227ae-09ee-0ebc-e002-d3068529f158.png)

---

## 補足 :information_source:

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

---

## [Creative SDK](https://creativesdk.adobe.com/) が提供する他の機能

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

---

### User Auth UI

- [Adobe ID](https://accounts.adobe.com/) のログイン画面を提供

![white (4).png](https://qiita-image-store.s3.amazonaws.com/0/6881/685b2c0d-597d-b5b0-26b5-cf9f11791acc.png)

---

### Asset Browser UI

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

![white (3).png](https://qiita-image-store.s3.amazonaws.com/0/6881/56987037-9fb9-5806-61ac-d0d95b3ab10e.png)

---

### Send To Desktop API

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

![send-to-desktop-flow.jpg](https://qiita-image-store.s3.amazonaws.com/0/6881/e746f3c9-2d23-0046-1663-9259dc56b5fa.jpeg)


---

### Typekit UI

- Typekit フォントへのアクセスを提供

| ALL FONTS | SYNCED FONTS |
|:------:|:-------:|
|![typekit-selector.png](https://qiita-image-store.s3.amazonaws.com/0/6881/a9d6798a-ac93-870f-3697-cc0ba0dc8a89.png)|![typekit-synced-fonts.png](https://qiita-image-store.s3.amazonaws.com/0/6881/8b73eb11-d83b-26ea-cf3a-fbb3eaa82780.png)|

---

## 分析系 :bar_chart:

---

### Integration Analytics

- [コンソール](https://console.adobe.io) で [Creative SDK](https://creativesdk.adobe.com/) の API コール数等が確認できます :eyes:

<img width="1118" alt="スクリーンショット 2017-09-30 21.09.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/6881/5108d2fb-ecf5-3081-9a01-9e81b0e246c8.png">


---

## 歴史的経緯

---

### [Aviary SDK](https://developers.aviary.com/)

- iOS, Android & Web に画像編集機能を授ける [Aviary SDK](https://developers.aviary.com/) が 2014 年に Adobe に買収され [Creative SDK](https://creativesdk.adobe.com/) の一部となりました
- [Aviary SDK](https://developers.aviary.com/) のサポートは終了しており [Creative SDK](https://creativesdk.adobe.com/) への移行が推奨されています

#### 追記 :pen_fountain:

- [関西モバイルアプリ研究会 #24](https://kanmoba.connpass.com/event/64315/) の LT 終了後、「[Aviary SDK](https://developers.aviary.com/) では課金すると画像エディターの UI をカスタマイズすることができた」という補足をして頂きました :bow_tone1:

---

## 第二の [Creative SDK](https://creativesdk.adobe.com/) :interrobang:

---

### [PhotoEditor SDK](https://www.photoeditorsdk.com/) という競合が存在

- [無料ではない](https://www.photoeditorsdk.com/pricing#contact)（見積もりは要相談）
- Adobe の [Creative SDK](https://creativesdk.adobe.com/) より高機能であると[謳っている](https://www.photoeditorsdk.com/imgly-aviary-comparison)
 - スタンプやフレームがカスタマイズできる等

---

## [Creative SDK](https://creativesdk.adobe.com/) まとめ

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

---

## [Creative SDK](https://creativesdk.adobe.com/) 公式のサンプルコード

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

---

## :end: