CrossBridge Lab

技術ネタ、デバイスネタを...

Adobe Creative SDK を使って30分で iOS の画像加工アプリを作る

はじめに

Adobe から公開されている Adobe Creative SDK を使って、 iOS の画像加工アプリを30分で作ってみようと思います。

f:id:crossbridge-lab:20160302073713p:plain

Adobe Creative SDK とは

Adobe Creative SDK とは、Adobe が公開している Creative Cloud の様々な機能やサービスをクラウド経由で簡単に利用することができるSDKです。ユーザが Adobe ID を使ってログインすることで Creative Cloud のストレージにアクセスすることもできます。

画像加工アプリ

で、今回は Adobe Creative SDK の機能のうち、画像エディタの機能を使ってみようと思います。

要件は簡単、以下の3つです。

  1. カメラロールとカメラ撮影で画像を用意する
  2. Adobe Creative SDK の機能で画像を加工する
  3. カメラロールに加工した画像を保存する

加工画面はこのような画面です。

f:id:crossbridge-lab:20160302084700p:plain

では、はじめましょう。

Adobe Creative SDK をダウンロードする

Adobe Creative SDK から iOSSDKをダウンロードします。

f:id:crossbridge-lab:20160302074530p:plain

Adobe ID が必要になるので持っていなければ作成しましょう。SDKをダウンロードしたら圧縮ファイルを解凍しておきます。

アプリを登録する

Adobe Creative SDK を使うには管理画面でアプリを登録し、ClientIDとSecretの文字列を取得する必要があります。登録すると開発中の ID が割り当てられます。AppStore に公開する際には、別途 Adobe に申請が必要になります。Secretは登録時にしか表示されないので忘れないようにしましょう。

f:id:crossbridge-lab:20160302084240p:plain

Xcode のプロジェクトを作成して SDK を使う準備をする

ダウンロードしたファイルから必要な framework と bundle を入れる

SDK くらい CocoaPods でさくっと入れたいところですが、前述のとおりホームページからダウンロードしてきたファイルを自分で組み込む必要があります。

ダウンロードして解凍したフォルダから以下の2つの framework をプロジェクトに追加します。

  • AdobeCreativeSDKCore.framework
  • AdobeCreativeSDKImage.framework

f:id:crossbridge-lab:20160302075610p:plain

これら framework 内の Resources フォルダに入っている bundle ファイルもそれぞれプロジェクトに追加します。

  • AdobeCreativeSDKCoreResources.bundle
  • AdobeCreativeSDKImageResources.bundle

f:id:crossbridge-lab:20160302075639p:plain

以下の4つが追加されていることを確認します

  • AdobeCreativeSDKCore.framework
  • AdobeCreativeSDKImage.framework
  • AdobeCreativeSDKCoreResources.bundle
  • AdobeCreativeSDKImageResources.bundle

f:id:crossbridge-lab:20160302075645p:plain

SDKが必要とする framework とライブラリを追加する

以下の framework とライブラリが必要になるので Link Binary With Libraries に追加します。

  • libc++.tbd
  • libz.tbd
  • libz.1.2.5.tbd
  • libsqlite3.0.tbd
  • MobileCoreServices.framework
  • SystemConfiguration.framework
  • Accelerate.framework
  • CoreData.framework
  • MessageUI.framework
  • OpenGLES.framework
  • QuartzCore.framework
  • StoreKit.framework

f:id:crossbridge-lab:20160302081158p:plain

Other Linker Flags に -ObjC と -all_load を追加する

カテゴリが定義されているStaticライブラリを使うので Other Linker Flags に -ObjC と -all_load を追加します。

f:id:crossbridge-lab:20160302081600p:plain

Bridge Header に import 文を追加する

今回は Swift でアプリを記述するので Objective-Cメソッドが呼び出せるように Bridge Header に import 文を追加します。

#import <AdobeCreativeSDKCore/AdobeCreativeSDKCore.h>
#import <AdobeCreativeSDKImage/AdobeCreativeSDKImage.h>

ClientIDとSecretの文字列を設定する

AppDelegate で SDKAPI を使って先ほど登録したアプリのClientIDとSecretの文字列を設定します

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Adobeの管理画面で登録したアプリのClientIDとSecretの文字列を設定する
    AdobeUXAuthManager.sharedManager().setAuthenticationParametersWithClientID("ほげほげ", clientSecret: "ほげほげ", enableSignUp: false)
    
    return true
}

UIImagePickerController で画像を撮影/選択する

UIImagePickerController を使って、加工するための画像を撮影/選択します。

f:id:crossbridge-lab:20160302082212p:plain

こんな感じにボタンを2つ用意してそれぞれの Action でライブラリの表示とカメラの起動を行います。

それぞれのボタンのアクションで UIImagePickerController を表示させます。

@IBAction func handleLibraryButton(sender: AnyObject) {
    if UIImagePickerController.isSourceTypeAvailable(UIImagePickerControllerSourceType.PhotoLibrary) {
        let pickerController = UIImagePickerController()
        pickerController.delegate = self
        pickerController.sourceType = UIImagePickerControllerSourceType.PhotoLibrary
        presentViewController(pickerController, animated: true, completion: nil)
    }
}

@IBAction func handleCameraButton(sender: AnyObject) {
    if UIImagePickerController.isSourceTypeAvailable(UIImagePickerControllerSourceType.Camera) {
        let pickerController = UIImagePickerController()
        pickerController.delegate = self
        pickerController.sourceType = UIImagePickerControllerSourceType.Camera
        presentViewController(pickerController, animated: true, completion: nil)
    }
}

画像加工エディタ(AdobeUXImageEditorViewController)を使う

UIImagePickerController の delegate メソッドで取得した画像を画像加工エディタに与えて表示させます。Adobe Creative SDK の画像加工エディタは AdobeUXImageEditorViewController という名前です。使い方は簡単で以下の通りとても簡単です。

  1. UIImageを与えてAdobeUXImageEditorViewControllerを初期化
  2. delegateをセット(AdobeUXImageEditorViewControllerDelegate)
  3. AdobeUXImageEditorViewController を表示
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
    
    if info[UIImagePickerControllerOriginalImage] != nil {
        let image = info[UIImagePickerControllerOriginalImage] as! UIImage
        
        dispatch_async(dispatch_get_main_queue()) {
            let adobeViewController = AdobeUXImageEditorViewController(image: image)
            adobeViewController.delegate = self
            self.presentViewController(adobeViewController, animated: true, completion:  nil)
        }
    }
    
    picker.dismissViewControllerAnimated(true, completion: nil)
}

画像の加工が終わるとphotoEditor: finishedWithImage:が呼ばれるのでそこでカメラロールに保存させます。キャンセルされた場合はphotoEditorCanceled:が呼ばれます。

// AdobeImageEditorで加工を完了したときに呼ばれる
func photoEditor(editor: AdobeUXImageEditorViewController, finishedWithImage image: UIImage?) {
    
    UIImageWriteToSavedPhotosAlbum(image!, nil, nil, nil)
    editor.dismissViewControllerAnimated(true, completion: nil)
}

// AdobeImageEditorで加工をキャンセルしたときに呼ばれる
func photoEditorCanceled(editor: AdobeUXImageEditorViewController) {
    editor.dismissViewControllerAnimated(true, completion: nil)
}

まとめ

Adobe Creative SDK を使うことでとても簡単にリッチな画像加工アプリを作ることができます。画像加工アプリは巷に溢れていて加工だけではアプリの差別化はできませんが、このように簡単に加工する機能をアプリに取り入れることができれば、その他の部分に時間をかけることができるようになって良いと思います。