はじめに
アプリ開発中、画像のサイズを変更するということはよくあります。その時毎回デザイナーさんに頼み、新しい画像をもらってそれをアップロードするという流れは非常に時間が掛かります。
そんな時役に立つのが 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 には他にも面白い機能が沢山あるので、ぜひ皆さんも試してみてください。
![http://res.cloudinary.com/da6d5qvbf/image/upload/c_thumb,g_face,h_90,r_max,w_90/sampleImage.png"](http://res.cloudinary.com/da6d5qvbf/image/upload/c_thumb,g_face,h_90,r_max,w_90/sampleImage.png"){kind=link}