2015年7月14日火曜日

SwiftでOpenCVを使う その2 ViewControllerに画像とボタンのシンプルな画面を作成する

  • 公開日:2015年07月14日

記事概要


SwiftでOpenCVの使い方を学習します。
その1の続きの記事になります。

開発環境

  • Xcode 6.4
  • Swift 1.2

難易度


★★★★☆(中級)

プロジェクトのひな形の作成


まずはOpenCVの動作を確認するのに必要な画面から作成していきます。
画像とボタンだけのシンプルな画面を作成します。

1. Main.storyboardを選択します。

2. UIImageViewをView Controllerにドラッグします。

3. ButtonをView Controllerにドラッグします。

4. コントローラーにUIImageViewとButtonの@IBOutletを関連づけます。
キーボードのshiftボタンとマウスドラッグでViewControllerにオブジェクトを関連づけます。

Asset Catalogで画像管理


UIImageViewに表示する画像はAsset Catalogで管理します。
Asset Catalogを使うことで、画像を一元管理出来るようになり、画像ファイルの追加・削除・修正を行ってもプロジェクトファイル(.pbxproj)は変更されなくなり、バージョン管理が楽になります。

*以前の記事に説明があります。参考にどうぞ。

1. まず、3つのサイズの画像を用意します。

2. Images.xcassestsを選択し、右クリックでNew Image Setを選択します。

3. sampleと命名し、1x, 2x, 3xに画像をドラッグします。

各サイズは以下の端末が対応になります。

  • iPhone 6 Plus (@3x)
  • iPhone 6 and iPhone 5 (@2x)
  • iPhone 4s (@2x)
  • iPad and iPad mini (@2x)
  • iPad 2 and iPad mini (@1x)

4. Asset Catalogで管理している画像をUIImageViewに表示できるように以下のように実装します。

【swift】

import UIKit

class ViewController: UIViewController {


    @IBOutlet weak var arrange: UIButton!
    @IBOutlet weak var imageView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let sampleImg = UIImage(named:"sample");
        imageView.image = sampleImg;
        
        // 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.
    }

}

Images.xcassestsのsampleをimageViewに設定しているだけです。
ビルドして画面を立ち上げて確認します。

画面が確認できました。続いて、ボタン処理を記述します。

UIButtonでクリック処理


【swift】

import UIKit

class ViewController: UIViewController {


    @IBOutlet weak var arrange: UIButton!
    @IBOutlet weak var imageView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let sampleImg = UIImage(named:"sample");
        imageView.image = sampleImg;
        
        arrange.addTarget(self, action: "onClickArrangeBtn:", forControlEvents:.TouchUpInside);
        
        // 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.
    }
    
    // click arrange button
    internal func onClickArrangeBtn(sender: UIButton) {
        println("click");
    }


}

ボタンクリックの処理を追加しただけです。ボタンをクリックすると、ログに以下のように出力されます。

これでOpenCVを使う準備が整いました。
次回はswiftを使ってOpenCVを動かしていきます。
…といきたいところだったのですが、swiftではうまくopenCVのコンパイルを通すことができませんでした。
原因は多分cocoapodsです。バージョンの問題だと思うのですが…。
今は原因をゆっくり調査する時間がないので、まずはObjective-Cで実装することにしました。
また時間があるときに挑戦して続きを記載したいと思います。(もしくはcocoapodsなしで利用)
なので、次はObjective-CでのOpenCVの使い方の説明になってしまいます。すいません。
でわ。

ps: なかなかObjective-Cからswiftに移行できません。オープンソース化でもう少し使いやすくなると実際に利用できるかもしれません。

Swiftでのiphoneアプリ開発にオススメの本


詳細swiftよりこちらの本をオススメします。
objective-cの経験がある人や、初心者から中級者までの開発者はこの本のほうが役に立ちます。
ただし、swiftはバージョンアップの速度が早いので、購入するときは自分が利用しているswiftのバージョンでも役に立つことを確認してから購入するように注意してください。

OpenCvでの開発にオススメの本


OpenCVはこの本一択です。長く利用できるコストパフィーマンスに優れた良書です。
あとは公式サイト(とgoogle検索と試行錯誤)で大丈夫です。

参考サイト

関連記事

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

0 件のコメント:

コメントを投稿

Related Posts Plugin for WordPress, Blogger...