KingFisherでダウンロードした画像にぼかし（Blur）を入れよう

## はじめに
KingFisherはWebから画像をダウンロードしてキャッシュするための、軽量で純粋なSwiftライブラリです。

ソースはこちら　https://github.com/onevcat/Kingfisher

最も簡単な使用方法は、UIImageView拡張を利用した方法です。

```
let url = URL(string: "https://autolap.jp/img/Top1.jpg")
imageView.kf.setImage(with: url)
```

これで、ネットワーク経由で画像をダウロードして、キャッシュしてUIImageViewに表示してくれます。キャッシュがあれば再取得を行わずにそれが利用されます。

## Xcodeプロジェクトへライブラリのインストール

それではさっそくライブラリをプロジェクトに追加します。
今回はCarthageを利用します。
利用したいXcodeのプロジェクトディレクト移動します。

### Cartfileの作成
下記の内容で`Cartfile`という名前でファイルを作成します。

```
github "onevcat/Kingfisher" ~> 4.8
``` 
執筆時点での最新バージョンを指定しておきます（指定しないとその時の最新になります）

### ライブラリのダウンロード＆ビルド
今回はiOS以外は利用しないので「--platform ios」を指定

```
$ carthage update --platform ios
```

ビルドされたバージョンはCartfile.resolvedに記述されます。

```
github "onevcat/Kingfisher" "4.8.0"
```

### Xcodeのプロジェクトにビルドしたライブラリの導入

ターゲットプロジェクトのGeneral > Linked Frameworks and Librariesの+ボタンから追加します。
![スクリーンショット 2018-06-14 8.15.17.png](https://qiita-image-store.s3.amazonaws.com/0/262203/095c3d4b-b836-701f-0e02-41da9350681b.png)

フレームワークの選択ダイアログが表示されたら、Add Other...をクリックします。
![スクリーンショット 2018-06-14 8.15.29.png](https://qiita-image-store.s3.amazonaws.com/0/262203/ccbfb74c-5448-a7e4-aa70-6a23b75d127a.png)

ビルドしたフレームワークを選択します。
プロジェクトフォルダ > Carthage > Build > iOS > Kingfisher.framework
を選択してOpenをクリックします。

![スクリーンショット 2018-06-14 8.17.19.png](https://qiita-image-store.s3.amazonaws.com/0/262203/091dec80-d454-96bf-12b3-dd3a275af2be.png)

Linked Frameworks and LibrariesにKingfihser.frameworkが追加されます。
![スクリーンショット 2018-06-14 8.17.28.png](https://qiita-image-store.s3.amazonaws.com/0/262203/da05ea14-0261-68e7-e798-8c4fc4e67126.png)

### Runスクリプトの設定
ターケットプロジェクトのBuild Phases > +ボタン > New Run Script Phaseをクリックします。
![スクリーンショット 2018-06-14 8.21.44.png](https://qiita-image-store.s3.amazonaws.com/0/262203/fe5118ce-4eb1-7e1c-1d2b-84ee065fff21.png)

Shellのところに`/usr/local/bin/carthage copy-frameworks`と記述します。
*carthageがインストールされているパスが違う場合は適宜変更してください。*

Input Filesには`$(SRCROOT)/Carthage/Build/iOS/Kingfisher.framework`と記述します。
![スクリーンショット 2018-06-14 8.23.24.png](https://qiita-image-store.s3.amazonaws.com/0/262203/3daa0829-1cde-a66e-5cfc-09ec972bc59e.png)


以上でプロジェクトにKingFisherのライブラリの導入は完了です。

## 使ってみる
Kingfisherにはたくさんの処理オプションが用意されていますが、今回は下記4点を使ったケースについて説明します。

### 1. Placeholder画像の設定
Placeholder画像はダウンロードされるまで代わりに表示させておきたい画像になります。
`placeholder`に画像が表示されるまで、表示しておきたいUIImageを設定

### 2. 画像表示時のTransitionの設定
`options`に`.transition(ImageTransition)`を指定
今回はFadeの効果を5秒で設定
`.transition(.fade(5.0))`

### 3. 画像のぼかし効果
`options`に`.processor(ImageProcessor）`を指定
今回は`BlurImageProcessor`で`blurRadius`を10に設定

### 4. エラー時の画像表示
エラーが発生した場合にImageViewにエラー時用イメージを設定

### コード全体
ImageViewへの処理全体

```
let blurRadius = CGFloat(10.0)
let url = URL(string: "https://autolap.jp/img/Top1.jpg")
let processor = BlurImageProcessor(blurRadius: blurRadius) // Blur with a radius
cell.imageView.kf.setImage(with: url, placeholder: placeholderImage, options: [.transition(.fade(5.0)), .processor(processor)], progressBlock: nil, completionHandler: { (image, error, cachType, url) in
	cell.setErrorImageIfNeeded(error: error)
})
```

エラー処理はCell側で実施していますが、コードは下記のとおりです。

```
class CollectionViewCell: UICollectionViewCell {
    - 省略 -
    private let noImage = UIImage(named: "NoImage")
    func setErrorImageIfNeeded(error: NSError?) {
        if error != nil { imageView.image = noImage }
    }
}
```

実際のプロジェクトで導入する際には、画像の取得は認証が必要であったり、キャッシュのライフサイクルなどを管理しなければいけないケースも出てくるかと思います。
リクエスト処理、キャッシュ処理、画像処理などを独自に実装して適用することも可能ですので、是非色々とチャレンジしてみてください。

全てのコードは下記にありますのでご自由にお試しください。
https://github.com/alyousecond/KingfisherExample

動作はこんな感じになります。

<img width="375" alt="Simulator Screen Shot - iPhone 8 - 2018-06-14 at 09.52.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/262203/de1fdf3c-3417-6710-0a26-a327a9aab190.png">
<img width="375" alt="Simulator Screen Shot - iPhone 8 - 2018-06-14 at 09.52.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/262203/fe096ce7-70e2-ce9b-9e59-8d67feb9742b.png">

左下の「No Image」はエラー時のハンドリングで設定した画像が表示されています。
右下の「Now loading...」はエラー時のハンドリングを行なっていないため、Placeholderの画像がそのまま表示され続けます。