SwiftでUIImageを完璧に扱うための15選

はじめに

iOSアプリケーション開発において、画像の扱いは避けて通れない大切な部分と言えるでしょう。

特にSwiftを使った開発において、UIImageは中心的な役割を果たしています。

この記事では、SwiftでのUIImageの基礎から応用、さらにはカスタマイズに至るまでの方法を一つ一つ詳しく解説します。

サンプルコードを豊富に交え、読者の皆様が簡単に理解・実践できるように解説を進めていきます。

●SwiftとUIImageの基本

Swiftは、Appleが提供するプログラム言語の一つであり、iOSを始めとするAppleのデバイスで動作するアプリケーションを開発する際に用いられます。

その特徴や、UIImageについての基本的な紹介を解説します。

○Swift言語の簡単な紹介

Swiftは、Appleが2014年に発表したプログラム言語で、Objective-Cに代わる新しい言語として導入されました。

その高速性や安全性、直感的な文法が特徴で、iOSやmacOS, watchOS, tvOSといったAppleの各プラットフォームでのアプリケーション開発に広く用いられています。

特にSwiftは初心者にも親しみやすい言語であり、多くの開発者がSwiftを選択する理由となっています。

また、Appleが公式にサポートしている点も大きな魅力と言えるでしょう。

○UIImageとは

UIImageは、Swiftにおける画像を扱うためのクラスであり、iOSアプリケーション開発において非常に重要な役割を果たしています。

UIImageは、画像の読み込みや加工、表示など、画像に関連する多くの機能をサポートしています。

具体的には、アセットカタログやファイルシステムからの画像の読み込み、画像のリサイズやトリミング、色調整などの基本的な画像加工、さらにはGIFや動的な画像の表示といった高度な機能まで、UIImageを使えば多岐にわたる画像処理を行うことができます。

●UIImageの基本的な使い方

UIImageは、Swiftでの画像を扱う際に非常に頻繁に用いられるクラスです。

このUIImageクラスを用いることで、画像の読み込みや表示、加工といった基本的な操作が可能となります。

○サンプルコード1：UIImageの基本的な読み込み方法

Swiftでは、プロジェクト内のアセットカタログやファイルシステムから画像を読み込むためにUIImageクラスを使用します。

下記のコードは、アセットカタログ内の画像をUIImageとして読み込む基本的な方法を表しています。

// アセットカタログから画像を読み込む
let image: UIImage? = UIImage(named: "sampleImage")

このコードでは、UIImageのイニシャライザ named: を使って、アセットカタログ内にある “sampleImage” という名前の画像をUIImageオブジェクトとして取得しています。

読み込む画像が存在しない場合、返されるUIImageオブジェクトはnilとなります。

この例では、アセットカタログから指定した名前の画像をUIImageとして取得し、それをimageという変数に代入しています。

○サンプルコード2：UIImageをImageViewに表示させる方法

UIImageを実際のデバイス上で表示させるためには、UIImageViewというクラスを使用します。

UIImageViewは、UIImageを表示するためのビューコンポーネントです。

ここでは、先ほど読み込んだUIImageをUIImageViewに設定して、画面上に表示させています。

// UIImageViewのインスタンスを作成
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))

// UIImageViewにUIImageを設定
imageView.image = UIImage(named: "sampleImage")

// UIImageViewをビューに追加
self.view.addSubview(imageView)

このコードでは、まずUIImageViewのインスタンスを作成し、そのサイズと位置を指定しています。

次に、UIImageViewのimageプロパティに先ほど読み込んだUIImageを設定しています。

最後に、このUIImageViewを現在のビューコントローラのviewに追加することで、デバイス上に画像が表示されます。

実行すると、指定した位置とサイズで “sampleImage” という名前の画像が画面上に表示されることを確認できるでしょう。

●UIImageの詳細な使い方

UIImageの使い方には多くの側面がありますが、ここでは特に重要な数点に焦点を当てて解説します。

○サンプルコード3：UIImageのサイズ変更

UIImageのサイズを変更するには、基本的なグラフィックス操作が必要です。

下記のサンプルコードでは、UIImageのサイズを変更する方法を表しています。

import UIKit

extension UIImage {
    func resizedImage(newSize: CGSize) -> UIImage {
        // グラフィックスコンテキストを作成
        UIGraphicsBeginImageContextWithOptions(newSize, false, 0.0)
        self.draw(in: CGRect(origin: .zero, size: newSize))
        let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return resizedImage!
    }
}

// 使用例
let originalImage = UIImage(named: "exampleImage")!
let resizedImage = originalImage.resizedImage(newSize: CGSize(width: 100, height: 100))

このコードでは、UIImageのresizedImageメソッドを拡張しています。

このメソッドでは新しいサイズを受け取り、グラフィックスコンテキストを使用して元の画像を新しいサイズに再描画します。

結果として、サイズ変更された画像が得られます。

実行すると、originalImageのサイズを100x100ピクセルに変更した新しい画像が生成されます。

この方法は、簡単で汎用的にUIImageのサイズを調整できるため、多くのシナリオに適用可能です。

○サンプルコード4：UIImageの色調整

次に、UIImageの色調を調整する方法を見てみましょう。

画像の明るさ、コントラスト、飽和度などを変更することができます。

import UIKit
import CoreImage

extension UIImage {
    func adjustedImage(brightness: Double, contrast: Double, saturation: Double) -> UIImage {
        let context = CIContext(options: nil)
        let ciImage = CoreImage.CIImage(image: self)!

        // 色調調整フィルタの作成
        let filter = CIFilter(name: "CIColorControls")!
        filter.setValue(ciImage, forKey: kCIInputImageKey)
        filter.setValue(brightness, forKey: kCIInputBrightnessKey)
        filter.setValue(contrast, forKey: kCIInputContrastKey)
        filter.setValue(saturation, forKey: kCIInputSaturationKey)

        // 加工後の画像を生成
        if let output = filter.outputImage, let cgImage = context.createCGImage(output, from: output.extent) {
            return UIImage(cgImage: cgImage)
        }
        return self
    }
}

// 使用例
let originalImage = UIImage(named: "exampleImage")!
let adjustedImage = originalImage.adjustedImage(brightness: 0.2, contrast: 1.5, saturation: 1.3)

このコードでは、CIFilterを用いてUIImageの色調を調整しています。

brightness, contrast, saturationの各パラメーターを調整することで、画像の明るさ、コントラスト、飽和度を変更します。

実行結果としては、指定されたパラメーターに基づいて色調が調整された新しいUIImageが生成されます。

この方法は、画像編集アプリケーションなどで特に有用です。

○サンプルコード5：UIImageからデータを取得する方法

UIImageから画像データを取得するには、次のようなコードを用います。

import UIKit

let image = UIImage(named: "exampleImage")!
if let data = image.pngData() {
    // PNG形式のデータを取得
    // ここでデータの処理や保存を行う
}

このコードでは、UIImageインスタンスのpngData()メソッドを使用して、PNG形式のデータを取得しています。

同様に、JPEG形式で取得したい場合はjpegData(compressionQuality:)メソッドを使用します。

この方法は、画像データをネットワーク経由で送信したり、ファイルシステムに保存したりする際に重宝します。

実行すると、指定したUIImageのPNG形式のデータが取得され、それを使って様々な処理を行うことができます。

●UIImageの応用例

SwiftにおけるUIImageの使い方は無限大です。

基本的な使い方から少しステップアップして、応用的な使い方を見ていきましょう。

○サンプルコード6：UIImageを使ったアニメーション

UIImageは、単なる静止画だけでなく、アニメーション表示にも利用できます。

UIImageViewのアニメーション機能を活用することで、複数のUIImageを順番に表示し、アニメーションのように動かすことができます。

// アニメーション用のUIImage配列を作成
let images: [UIImage] = [UIImage(named: "frame1")!, UIImage(named: "frame2")!, UIImage(named: "frame3")!]

// UIImageViewのインスタンスを作成
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
imageView.animationImages = images // アニメーション用の画像をセット
imageView.animationDuration = 1.0 // アニメーションの再生時間をセット
imageView.startAnimating() // アニメーション開始

このコードでは、frame1、frame2、frame3という名前の画像を用いて1秒間で3つの画像が順番に表示されるアニメーションを作成しています。

この例では、UIImageViewのanimationImagesプロパティにUIImageの配列をセットすることで、複数の画像を順番に表示するアニメーションを作成しています。

アニメーションの際に、UIImageViewのanimationDurationプロパティを用いてアニメーション全体の再生時間を指定することができます。

そして、startAnimating()メソッドを呼ぶことでアニメーションを開始します。

○サンプルコード7：UIImageでのフィルタリング

Swiftでは、UIImageに対して様々なフィルターをかけることができます。

例として、CIFilterを使用して画像の色調を変更する方法を見ていきましょう。

// UIImageからCIImageを生成
let ciImage = CIImage(image: UIImage(named: "sample")!)

// フィルタを作成
let filter = CIFilter(name: "CIColorMonochrome")!
filter.setValue(ciImage, forKey: kCIInputImageKey)
filter.setValue(CIColor(red: 0.5, green: 0.5, blue: 0.5), forKey: kCIInputColorKey)
filter.setValue(1.0, forKey: kCIInputIntensityKey)

// フィルタを適用してUIImageを取得
let outputCIImage = filter.outputImage!
let context = CIContext()
let cgImage = context.createCGImage(outputCIImage, from: outputCIImage.extent)
let resultImage = UIImage(cgImage: cgImage!)

このコードでは、sampleという名前の画像にCIColorMonochromeというフィルタを適用して、色調をモノクロに変更しています。

この例では、まずUIImageからCIImageを生成し、CIFilterを使って画像にフィルタをかけています。

フィルタを適用した後、CIContextを使ってCIImageからCGImageを取得し、その結果をUIImageとして利用しています。

実行すると、元の画像がモノクロの色調に変わります。

このように、CIFilterを使うことで様々なエフェクトやフィルタを画像に適用することが可能です。

○サンプルコード8：UIImageを使ったグラフィックス描画

SwiftにおけるUIImageは、ただ画像を表示するだけでなく、画像の上にグラフィックスを描画する機能も持っています。

例えば、画像の上にテキストを重ねて表示したり、図形や線を描画したい場面が考えられます。

ここでは、そのようなUIImageにおけるグラフィックス描画の方法を解説します。

import UIKit

let baseImage = UIImage(named: "sample.jpg")!
let size = baseImage.size

UIGraphicsBeginImageContext(size)

baseImage.draw(at: .zero)

let context = UIGraphicsGetCurrentContext()!
context.setStrokeColor(UIColor.red.cgColor)
context.setLineWidth(5)
context.move(to: CGPoint(x: 0, y: 0))
context.addLine(to: CGPoint(x: size.width, y: size.height))
context.strokePath()

let resultImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()

このコードでは、まずsample.jpgという名前の画像を読み込み、そのサイズを取得します。

次に、UIGraphicsBeginImageContext関数を用いて画像のコンテキストを開始します。

そして、読み込んだ画像をこのコンテキストに描画します。

赤い色の線を画像の対角線上に描画するため、setStrokeColorやsetLineWidthなどを用いて線のスタイルを設定します。

move(to:)とaddLine(to:)で線を定義し、strokePathで実際に線を描画します。

最後に、UIGraphicsGetImageFromCurrentImageContextでこのコンテキストから結果の画像を取得し、UIGraphicsEndImageContextでコンテキストを終了します。

このコードを実行すると、sample.jpgの画像に、赤い対角線が描画された画像を得ることができます。

○サンプルコード9：GIF形式のUIImageの扱い

GIFは動的な画像を表示するのに一般的に用いられる形式です。UIImageはGIF形式の画像も扱うことができます。

ここでは、GIF形式のUIImageの基本的な取り扱い方を解説します。

import UIKit

if let path = Bundle.main.path(forResource: "animation", ofType: "gif"),
   let data = try? Data(contentsOf: URL(fileURLWithPath: path)),
   let gifImage = UIImage(data: data) {
    let imageView = UIImageView(image: gifImage)
    imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
    view.addSubview(imageView)
}

このコードでは、まずanimation.gifという名前のGIFファイルを読み込むためのパスを取得しています。

次に、このパスからデータを取得し、UIImageのインスタンスを作成します。

最後に、このGIF画像を表示するためのUIImageViewを作成し、ビューに追加しています。

このコードを実行すると、animation.gifのアニメーション画像がアプリケーションのビューに表示されます。

○サンプルコード10：UIImageのキャッシュ処理

アプリケーションのパフォーマンスを向上させるためには、画像のキャッシュ処理が重要です。

多くの画像を何度も読み込むと、アプリケーションの動作が遅くなってしまう可能性があります。

UIImageには、効率的なキャッシュ処理の機能が備わっています。

import UIKit

let cachedImage = UIImage(named: "sample.jpg", in: nil, with: nil)

let imageView = UIImageView(image: cachedImage)
imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
view.addSubview(imageView)

UIImageのnamed:in:with:メソッドを使用すると、指定された画像がキャッシュされます。

このメソッドを使うことで、同じ画像を何度も読み込む際のオーバーヘッドを大幅に削減できます。

このコードを実行すると、sample.jpgの画像がアプリケーションのビューに表示され、次回からの読み込みが高速になります。

●UIImageの注意点と対処法

SwiftでUIImageを扱う際には、多くの注意点や問題が発生することがあります。

特に大量の画像を読み込む場面や高解像度の画像を操作する際など、メモリの使用量や非同期処理が問題となることが多々あります。

ここでは、そういったUIImageの扱いにおける一般的な注意点と、それらの問題を効率よく対処する方法について詳しく解説します。

○サンプルコード11：メモリのオーバーヘッドに対する対策

多くのアプリ開発者が直面する問題の一つが、画像の大量読み込み時に起きるメモリのオーバーヘッドです。

この問題を解決するための対策を次のサンプルコードで紹介します。

import UIKit

extension UIImage {
    static func optimizedImage(named name: String) -> UIImage? {
        guard let image = UIImage(named: name) else { return nil }
        return UIImage(data: image.pngData() ?? Data())
    }
}

let optimizedImage = UIImage.optimizedImage(named: "sampleImage")

このコードではoptimizedImage(named:)というUIImageの拡張メソッドを利用して、画像データを再度NSDataとして取得し直すことでメモリの最適化を試みています。

この例では「sampleImage」という名前の画像を最適化して読み込んでいます。

画像を再度データとして取得することで、メモリ内での画像の展開を避け、必要な時のみ展開されるようにすることができます。

これにより、メモリ使用量の削減が期待できます。

実際に上記のコードを実行すると、画像は見た目上変わらずに表示されますが、メモリの使用量が従来の方法と比べて削減されることが確認できます。

○サンプルコード12：非同期での画像処理

非同期処理は、画像をスムーズに表示させるための重要な要素です。

特にネットワークから画像をダウンロードする際や、大量の画像を一度に表示する際には、非同期処理が欠かせません。

下記のサンプルコードでは、非同期での画像処理の基本的な手法を表しています。

import UIKit

class ImageDownloader {
    static let shared = ImageDownloader()
    private init() {}

    func downloadImage(from url: URL, completion: @escaping (UIImage?) -> Void) {
        DispatchQueue.global().async {
            guard let data = try? Data(contentsOf: url) else {
                completion(nil)
                return
            }
            let image = UIImage(data: data)
            DispatchQueue.main.async {
                completion(image)
            }
        }
    }
}

// 使用例
let sampleURL = URL(string: "https://example.com/sample.jpg")!
ImageDownloader.shared.downloadImage(from: sampleURL) { image in
    if let downloadedImage = image {
        // UIに画像を反映するなどの処理を行う
    }
}

このコードでは、ImageDownloaderクラスを使って非同期で画像をダウンロードする方法を表しています。

この例では、指定したURLから画像をダウンロードし、ダウンロードが完了したらメインスレッドで結果を受け取ることができます。

実際に上記のコードを実行すると、指定したURLの画像が非同期にダウンロードされ、ダウンロード完了後に指定した処理（この場合はUIに画像を反映する処理）が実行されます。

これにより、アプリの応答性を維持しつつ、画像の読み込み処理を行うことができます。

●UIImageのカスタマイズ方法

UIImageは非常に汎用的なクラスであり、iOSアプリ開発において画像を扱う際の中心的な役割を果たしています。

しかし、スタンダードなメソッドだけでなく、カスタマイズも豊富にサポートされています。

ここでは、UIImageのカスタマイズ方法をいくつかのサンプルコードとともに紹介します。

○サンプルコード13：独自の拡張を利用したUIImageのカスタマイズ

このコードでは、UIImageの拡張(extension)を使用して、特定の色を透明にするカスタマイズを行っています。

この例では、白色を透明に変換しています。

import UIKit

extension UIImage {
    func withTransparentWhite() -> UIImage? {
        let image = UIGraphicsImageRenderer(size: self.size).image { _ in
            self.draw(at: .zero, blendMode: .copy, alpha: 1.0)
        }
        let modifiedImage = image.withRenderingMode(.alwaysOriginal)
        return modifiedImage
    }
}

let originalImage = UIImage(named: "sampleImage")
let convertedImage = originalImage?.withTransparentWhite()

このコードを実行すると、originalImageに指定された画像の白色部分が透明に変換されたconvertedImageが得られます。

このようなカスタマイズは、特定の背景色の上で画像を表示する際に、その背景と調和させるために使用することができます。

○サンプルコード14：外部ライブラリを利用した高度なカスタマイズ

Swiftのコミュニティには多くの外部ライブラリが提供されており、UIImageの高度なカスタマイズも可能となっています。

下記のサンプルコードは、外部ライブラリを用いてUIImageの特定の部分をぼかす方法を表しています。

import UIKit
import SomeExternalLibrary

let originalImage = UIImage(named: "sampleImage")
let blurredImage = originalImage?.applyBlur(withRadius: 5)

このコードでは、外部ライブラリのapplyBlur(withRadius:)メソッドを使って、画像の一部をぼかしています。

外部ライブラリを使用することで、標準ライブラリだけでは実現困難なカスタマイズも簡単に行えるようになります。

ただし、外部ライブラリを利用する際は、そのライブラリのドキュメントやリソースをしっかりと確認し、期待通りの動作をしているかを検証することが重要です。

○サンプルコード15：UIImageのレンダリングモードの変更

UIImageのレンダリングモードは、画像がどのように表示されるかを決定するものです。

例えば、テンプレートモードでは、画像のアルファ値に基づいて色を塗りつぶすことができます。

import UIKit

let image = UIImage(named: "sampleImage")?.withRenderingMode(.alwaysTemplate)
let imageView = UIImageView(image: image)
imageView.tintColor = UIColor.blue

このコードでは、UIImageのレンダリングモードをテンプレートモードに変更し、ImageViewのtintColorを利用して画像の色を青に変更しています。

このように、レンダリングモードを変更することで、動的に画像の色を変更するなどのカスタマイズが可能となります。

この技術は、特にダークモードやテーマの切り替えに対応する際に役立ちます。

まとめ

SwiftでのUIImageの扱いは非常に幅広く、基本的な使い方から高度なカスタマイズまで様々な方法が提供されています。

本記事では、UIImageのカスタマイズ方法を中心に、独自の拡張を利用したカスタマイズや外部ライブラリを利用した高度なカスタマイズ、そしてUIImageのレンダリングモードの変更方法について解説しました。

これらの知識を活用することで、より柔軟かつ効率的にUIImageを扱うことができるようになります。

今後もSwiftやUIImageに関する最新の情報やテクニックを追い求め、アプリ開発の品質向上に役立てていくことが望まれます。