Swift2で写真を合成するiPhoneアプリを作ってみた

17686 ワード
Swift2.0 XCode7 Swift アプリ iPhone iPhone テキストリンク

はじめに

iPhoneのカメラ機能を使って、あらかじめ用意したスタンプ画像と合成するアプリを作ってみました。どこを撮影しても小さなオジサンが写り込みます。笑

完成イメージはこんな感じ(Youtube)です。Xcode7とSwift2での作り方を紹介します。

開発環境

Xcode 7.1
Swift 2.1
iOS 9.0
OS X v10.11

作り方

１．プロジェクトを作る

Xcodeから[iOS]-[Application]をクリックし、[Single View Application]を選択する。

２．スタンプ画像を用意する

PNG形式のスタンプ画像を用意する。背景は透過、サイズは320x426です。

３．スタンプ画像をプロジェクトに読み込む

Xcodeの[File]-[Add Files to プロジェクト名]をクリックし、スタンプ画像を選択する。

オプションの[Copy items if needed]にチェックを入れ、[Add]ボタンをクリックする。

４．アプリを縦画面のみに設定する

プロジェクト設定の[General]-[Deployment info]-[Device Orientation]にある、[Landscape Left]と[Landsape Right]のチェックを外す。

５．オートレイアウトを解除する

Xcodeの[Main storyboard]をクリックし、[Use Auto Layout]のチェックを外す。

ダイアログが表示されるので[Disable Size Classes]ボタンをクリックする。

６．コンポーネントを配置する

ViewControllerに[Image View]を配置する。サイズは幅320px、高さ426pxにする。

同じように[Button]を配置する。ボタンの表示文字列を[撮影]にする。

７．コンポーネントをプログラムに接続する

[Image View]をソースコードに[control]キーを押しながらドラッグし、Outletを作成する。ここでは[cameraImgView]とした。

同じように[Button]をドラッグし、[btnPushed]という名前のActionを作成する。

８．カメラを起動するプログラムを書く

UIViewControllerクラスにUIImagePickerControllerDelegateとUINavigationControllerDelegateクラスを継承させる。

UIImagePickerController型の変数を作成し、presentViewControllerメソッドでカメラ機能が立ち上がる。
引数に[UIImagePickerControllerSourceType.Camera]を指定することを忘れずに。

シャッターが押された際の動作は、imagePickerControllerメソッド内で指定できる。

ViewController.swift
import UIKit

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    @IBOutlet weak var cameraImgView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func btnPushed(sender: AnyObject) {
        // ----- カメラを起動する
        let picker = UIImagePickerController()
        picker.sourceType = UIImagePickerControllerSourceType.Camera
        picker.delegate = self
        presentViewController(picker, animated: true, completion: nil)
    }

    func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage, editingInfo: [String : AnyObject]?) {
        cameraImgView.image = image                             // 撮影した画像をセットする

        dismissViewControllerAnimated(true, completion: nil)    // アプリ画面へ戻る
    }

}

iPhoneアプリを起動してみるとこんな感じ。⇒ Youtube動画

９．スタンプ画像を合成して保存する

UIImage型の変数を定義して、スタンプ画像を読み込みます。
addSubviewメソッドで撮影した画像とスタンプ画像を合成します。

ViewController.swift
import UIKit

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    @IBOutlet weak var cameraImgView: UIImageView!
    let stamp = UIImage(named: "ojisan.png")            // スタンプ画像

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func btnPushed(sender: AnyObject) {
        // ----- カメラを起動する
        let picker = UIImagePickerController()
        picker.sourceType = UIImagePickerControllerSourceType.Camera
        picker.delegate = self
        presentViewController(picker, animated: true, completion: nil)
    }

    func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage, editingInfo: [String : AnyObject]?) {
        let stampViews = cameraImgView.subviews
        for stampView in stampViews {
            stampView.removeFromSuperview()                     // スタンプをリセットする
        }
        cameraImgView.image = image                             // 撮影した画像をセットする
        cameraImgView.addSubview(UIImageView(image: stamp))     // スタンプ画像を合成する

        dismissViewControllerAnimated(true, completion: nil)    // アプリ画面へ戻る
    }

}

１０．合成した画像を保存する

合成した画像を保存するには、imagePickerControllerメソッドを次のように修正します。

ViewController.swift
    func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage, editingInfo: [String : AnyObject]?) {
        let stampViews = cameraImgView.subviews
        for stampView in stampViews {
            stampView.removeFromSuperview()                     // スタンプをリセットする
        }
        cameraImgView.image = image                             // 撮影した画像をセットする
        cameraImgView.addSubview(UIImageView(image: stamp))     // スタンプ画像を合成する

        // ----- 合成した画像を保存する
        UIGraphicsBeginImageContext(cameraImgView.bounds.size)
        cameraImgView.layer.renderInContext(UIGraphicsGetCurrentContext()!)
        UIImageWriteToSavedPhotosAlbum(UIGraphicsGetImageFromCurrentImageContext(), self, nil, nil)
        UIGraphicsEndImageContext()

        dismissViewControllerAnimated(true, completion: nil)    // アプリ画面へ戻る
    }

サンプルダウンロード

GitHubに完成品をアップロードしておいたので、どうぞご参考ください。
⇒ ダウンロード

参考サイト

iPhoneアプリ開発のためのSwiftレシピ