swift で Cloudinary を使ってみよう

はじめに

アプリ開発中、画像のサイズを変更するということはよくあります。その時毎回デザイナーさんに頼み、新しい画像をもらってそれをアップロードするという流れは非常に時間が掛かります。

そんな時役に立つのが Cloudinary です。

Cloudinary とは

Cloudinary は、画像の保存や画像の加工を簡単に行えるクラウドサービスです。 指定する内容を埋め込んだ URL を使用すると、アップロードした画像をその指定した内容の通りに表示する事ができます。
もちろん、元の画像に影響は与えません。

例えば、元の画像がこれだとして

顔認識しリサイズという指定をすると、アバターに変身させることができます！

このようなことを簡単に行えるのが Cloudinary の良いところです。

事前準備

• 無料アカウントを登録

公式： http://cloudinary.com/ サインインしたら、以下のような情報が分かります。

• プロジェクトに Cloudinary のフレームワークを追加

ちなみに、Swift から Objective-C の Cloudinary iOS SDK を呼び出すためには、ブリッジングヘッダを追加する必要があります。

実装

• セットアップ
  二つの方法があります。

var cloudinary:CLCloudinary!
//一つ目の方法
cloudinary = CLCloudinary(url: "cloudinary://Your_API_Key:Your_API_Secret@Your_Cloud_Name")
//二つ目の方法
cloudinary = CLCloudinary()
cloudinary.config().setValue(Your_Cloud_Name, forKey: “cloud_name”)
cloudinary.config().setValue(Your_API_Key, forKey: “api_key”)
cloudinary.config().setValue(Your_API_Secret, forKey: “api_secret”)

• 画像のアップロード

    func uploadToCloudinary(){
        guard let uploadimageData = UIImagePNGRepresentation(self.image) else {
           return
        }
        let uploader = CLUploader(cloudinary, delegate: self)
        let public_id = "sampleImage"
        uploader.upload(uploadimageData, options: ["public_id":fileId],
            withCompletion:onCloudinaryCompletion, andProgress:onCloudinaryProgress)
    }

アップロードに成功すると、返ってくるレスポンスの中にこのような項目が含まれています。

{
 …
“url”:”http://res.cloudinary.com/da6d5qvbf/image/upload/v1466406252/sampleImage.png”
“public_id”:”sampleImage”
…
}

public_id はアップロードするときに設定したもので、未設定の場合はランダムの文字列になります。 つまり、uploader.upload(uploadimageData, options:nil, withCompletion:onCloudinaryCompletion, andProgress:onCloudinaryProgress) で画像をアップロードすることもできます。

• 画像の加工 今回はアバターのアイコンを作りたいので、顔を 90×90 のサムネイルにして円形に切り取るように指定してみます。

    func getAvatarIconUrl() -> String {
        let transform = CLTransformation()
        transform.width   = 90
        transform.height  = 90
        transform.crop    = "thumb"
        transform.radius  = "max"
        transform.gravity = "face" //顔認識
　　　　//ここではレスポンスの public_id の文字列を使用
        let source      =  "sampleImage.png"
        return self.cloudinary.url(source options: ["transformation": transform])
    }

これを実行すると以下の URL が生成されます。
"http://res.cloudinary.com/da6d5qvbf/image/upload/c_thumb,g_face,h_90,r_max,w_90/sampleImage.png"

管理画面

画像加工の設定は、管理画面でも行うことができます。

また、一回使ったことのある設定は「Transformations」に残ります。これをうまく利用すれば、swfit プロジェクトの画像加工はより便利になります。

この設定内容を編集し分かりやすいフィルタ名を与え、今後直接 CLTransformation の named プロパティにフィルタ名を設定すれば、指定する画像を取得できます。 具体的な実装：

このように編集したら、前のコードは以下のように変更できます。

    func getAvatarIconUrlWithTransformName() -> String {
        let transform = CLTransformation()
        transform.named = "avatarIconSetting"
        let public_id =  "sampleImage.png"
        return self.cloudinary.url(public_id, options: ["transformation": transform])
    }

非常に読みやすくなりました。

まとめ

今回は Cloudinary の最も基本的な画像加工について紹介いたしました。
Cloudinary には他にも面白い機能が沢山あるので、ぜひ皆さんも試してみてください。

Tweet