ラベル iphoneアプリ開発メモ の投稿を表示しています。すべての投稿を表示

2015年8月7日金曜日

Swiftではじめるアプリ作成　storyboardでUIViewに影や角丸を設定する

公開日：2015年08月07日

記事概要

Swiftを使ったアプリ作成で、storyboardでUIViewに角丸や影を設定する方法をまとめました

開発環境

Xcode 6.4
Swift 1.2

難易度

★★☆☆☆(易しい)

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

まず最初にiphoneプロジェクトのひな形から作成していきます。
今回は、AutoLayoutの記事で利用したプロジェクトをそのまま利用します。

UIViewに角丸を設定する

次に、Main.storyboradで画面UIを作成します。

上記の画面はUIViewを表示しています。このUIViewを角丸に設定します。
User-Defined Runtime Attributesの欄にkey Pathを設定します。
角丸を設定するにはlayer.cornerRadiusとlayer.masksToBoundsを設定します。

ビルドしてiphoneシュミレーターを立ち上げて画面を確認します。

UIViewが角丸になって表示されています。

UIViewに影を設定する

角丸の設定と同じで、User-Defined Runtime Attributesの欄にkey Pathを設定します。

影を設定するには、layer.shadowIBColor,layer.shadowOpacity,layer.shadowOffset,layer.shadowRadiusを設定します。

ここで大切なのは、上記で設定したlayer.masksToBoundsをfalseにすることです。
layer.masksToBoundsは、viewの境界をはみ出すかはみ出さないかを設定します。trueではみ出さないようにし、falseではみ出しますようにします。
影はviewの外側に表示します。なので、layer.masksToBoundsはfalseにする必要があります。

ビルドしてiphoneシュミレーターを立ち上げて画面を確認します。

UIViewの外側に影が表示されました。成功です。

storyboradを使ったほうがコードで書くよりも、バグの混入する確率が減ります。storyboradは積極的に利用していきたいですね。

以上です

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

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

他のswiftに関する記事

参考サイト

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

2015年7月31日金曜日

Swiftではじめるアプリ作成　UIをAutoLayoutで調整する

公開日：2015年07月31日

記事概要

Swiftを使ったアプリ作成で、storyboardを使用してAutoLayoutを設定する方法をまとめました

開発環境

Xcode 6.4
Swift 1.2

難易度

★★☆☆☆(易しい)

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

まず最初にiphoneプロジェクトのひな形から作成していきます。
xcodeを立ち上げて、プロジェクトを作成します。

iOS → Application → Single View Applicationを選択します。

Product Nameにautolayout-swiftと入力
Organization Nameに組織名称(ここではcom.masa)と入力
Organization Identifierに組織名称(ここではcom.masa)と入力
LangugageにSwiftを選択
Deviceにiphoneを選択
Use Core Dataのチェックボックスを外す

プロジェクトフォルダを選択すると、上記のようにプロジェクトが作成されます。

AutoLayoutの設定

次に、Main.storyboradで画面UIを作成します。
ViewControllerにUIViewオブジェクトを設定します。上下左右に余白ができるようにUIViewを配置します。

ビルドしてiphoneシュミレーターを立ち上げて画面を確認します。

上下左右に余白ができるように配置したはずのUIViewが画面からはみ出して表示されています。
意図した通りに表示されていません。
これを画面内に収まるように、AutoLayoutを使って修正します。

storyboradでUIViewを選択して、右下の四角ボタンをクリックします。

Add New Constraintsというポップアップ画面が表示されます。

上下左右に余白の値を設定します。線をクリックして太い赤線になることを確認してください。

add Constraintsボタンをクリックして、AutoLayoutを有効にします。

再ビルドして画面を確認します。

上下左右に余白ができて表示されました。成功です。

AutoLayoutをコードで実装すると、結構な量になります。なので、storyboradを使ったほうがコードで書くよりも、バグが混入する確率が減ります。AutoLayoutを利用する場合は、storyboradは積極的に利用していきたいですね。

以上です

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

他のswiftに関する記事

参考サイト

Utage Blog

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

2015年7月30日木曜日

Swiftではじめるアプリ作成　CocoaPodsでAlamofireとSwiftJsonを使ってアプリを作るその3

公開日：2015年07月30日

記事概要

その2の続きです。SwiftJsonを利用してjsonデータを扱います。
jsonデータは、livedoor天気情報のお天気Webサービス『Weather Hacks 』を使ってAlamofireから取得したデータを使って説明したいと思います。

開発環境

Xcode 6.4
Swift 1.2

難易度

★★★☆☆(普通)

Alamofireの実装

前回のプロジェクトで作成したViewControllerに処理を記載します。

【swift】

import UIKit
// 追加
import SwiftyJSON
import Alamofire


class ViewController: UIViewController {

    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.
    }


}

SwiftyJSONを利用するには、宣言に『import SwiftyJSON』と記載します。
Alamofireをimportしている場合は、『import Alamofire』の上に記載してください。
私の環境では、import Alamofire』の下に記載すると『load module error』が発生しました。

json処理

swiftのjsonを扱い方を学びます。

Dictionary処理

【swift】

    // AlamofireでGET REQUESTを送信し、JSONデータを加工する
    func requestAlamofire() {
        Alamofire.request(.GET, "http://weather.livedoor.com/forecast/webservice/json/v1", parameters: ["city": 200010])
            .responseJSON { (request, response, json, error) in
                if (response?.statusCode == 200) {
                    println("success")
                    var swiftJson = JSON(json!)
                    self.outputLocation(swiftJson)
                    
                } else {
                    // error
                    println(error)
                }
        }

    }

    // Locationデータを出力します
    func outputLocation(json : JSON) {
        if let location: Dictionary = json["location"].dictionary {
            println("dictionary data")
            println(location)
        } else {
            println("dictionary data")
        }

    }

上記はjsonファイルのlocationデータをswiftで扱えるように処理しています。
データはDictionaryデータです。

結果確認

上記のコードをビルドして、dubugログを見ると、以下のデータが出力されているのが確認できます。

【log】

success
dictionary data
[city: 長野, prefecture: 長野県, area: 信越・北陸]

jsonデータがきちんと取得できているのが確認できました。
このように出力したいデータを簡単に加工することができます。

まとめ

AlamofireとSwiftJsonを使うことで、アプリの作成時間を大幅に短縮できます。
その分UIやUXに時間を避けるはずです。
限られた時間をうまく使い、より良いアプリを作っていきましょう。

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

関連記事

参考サイト

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

2015年7月29日水曜日

Swiftではじめるアプリ作成　CocoaPodsでAlamofireとSwiftJsonを使ってアプリを作るその2

公開日：2015年07月29日
最終更新日：2015年07月30日

記事概要

その1の続きです。Alamofireを利用してWEB APIに接続します。
この記事では、livedoor天気情報のお天気Webサービス『Weather Hacks 』を使ってAlamofireの使い方を説明したいと思います。

開発環境

Xcode 6.4
Swift 1.2

難易度

★★★☆☆(普通)

Alamofireの実装

前回のプロジェクトで作成した(自動でされた)ViewControllerに処理を記載します。

【swift】

import UIKit
// 追加
import Alamofire


class ViewController: UIViewController {

    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.
    }


}

Alamofireを利用するには、宣言に『import Alamofire』と記載します。
こうすることでAlamofireのライブラリが利用可能になります。

request処理

最初に、request処理を記載します。
Weather HacksのAPIにGET処理を送ります。

【almojson/Gemfile】

import UIKit
import Alamofire


class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        requestAlamofire()
    }
    
    // AlamofireでGET REQUESTを送信
    func requestAlamofire() {
        Alamofire.request(.GET, "http://weather.livedoor.com/forecast/webservice/json/v1", parameters: ["city": 200010])
            .responseJSON { (request, response, JSON, error) in
                if (response?.statusCode == 200) {
                    println("success")
                    println(JSON)
                } else {
                    // error
                    println(error)
                }
        }

    }

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


}

第一引数にRESTの種類、第二引数にurl、第三引数にパラメーターを設定します。

結果確認

上記のコードをビルドして、dubugログを見ると、以下のデータが出力されているのが確認できます。

success
Optional({
    copyright =     {
        image =         {
            height = 26;
            link = "http://weather.livedoor.com/";
            title = "livedoor \U5929\U6c17\U60c5\U5831";
            url = "http://weather.livedoor.com/img/cmn/livedoor.gif";
            width = 118;
        };
        link = "http://weather.livedoor.com/";
        provider =         (
                        {
                link = "http://tenki.jp/";
                name = "\U65e5\U672c\U6c17\U8c61\U5354\U4f1a";
            }
        );
        title = "(C) LINE Corporation";
    };

    // 長いので省略
    publicTime = "2015-07-04T17:00:00+0900";
    title = "\U9577\U91ce\U770c \U9577\U91ce \U306e\U5929\U6c17";
})

jsonデータがきちんと取得できているのが確認できました。
次回は、SwiftJsonを使ってこのjsonデータを扱います。

以上です。

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

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

2015年7月28日火曜日

Swiftではじめるアプリ作成　CocoaPodsでAlamofireとSwiftJsonを使ったアプリを作るその1

公開日：2015年07月28日
最終更新日：2015年07月30日

記事概要

ネットワークでAPI等を利用するiphoneアプリを作成する場合、SwiftではAlamofireとSwiftJsonを利用すると便利です。
この記事では、CocoaPodsを使ったAlamofireとSwiftJsonの導入方法を丁寧に説明したいと思います。

開発環境

Xcode 6.4
Swift 1.2

難易度

★★★☆☆(普通)

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

まず最初にiphoneプロジェクトのひな形から作成していきます。
xcodeを立ち上げて、プロジェクトを作成します。

iOS → Application → Single View Applicationを選択します。

Product Nameにalmo-swiftと入力
Organization Nameに組織名称(ここではcom.masa)と入力
Organization Identifierに組織名称(ここではcom.masa)と入力
LangugageにSwiftを選択
Deviceにiphoneを選択
Use Core Dataのチェックボックスを外す

プロジェクトフォルダを選択すると、上記のようにプロジェクトが作成されます。
次は、iphoneアプリプロジェクトのパッケージ管理にcocoapodsを導入します。
cocoapodsは開発に便利なパッケージの導入や管理をしてくれるツールです。

では、xcodeを閉じましょう。macのターミナルを開いて、プロジェクトフォルダまで移動します。

【terminal】

// プロジェクトフォルダに移動
cd /Users/{username}/Documents/iworksample/almo-swift/

// Gemfileを作成
touch Gemfile

プロジェクト配下にGemfileを作成します。
作成したGemfileはcocoapodsのインストールに使用します。
GemfileはBundler用の設定ファイルです。Bundlerはgemのバージョン管理を行うプログラムです。
この辺の知識や技術はRubyの開発の経験があると理解しやすいのですが、cocoapodsの導入だけでRubyの学習をする必要はありません。なので、理解なしに手順通り作業を進めて問題ありません。

また、cocoapodsの導入にはRubyが必要なので、Rubyが未インストールの人は、最初にRubyをインストールしておく必要があります。(この記事ではRubyがインストール出来ている前提で話を進めます)

Gemfileの記載とCocoaPodsのインストール

Gemfileを記載してCocoaPodsをインストールします。
Gemfileには、以下のように記載します。

【almojson/Gemfile】

source 'https://rubygems.org'
gem 'cocoapods', '0.36.0'

上記のGemfileを保存します。
cocoapodsのバージョンは0.36.0を利用します。
cocoapodsのバージョンはプロジェクトの全員が同じバージョンを利用するようにしましょう。

次にRubyを使ってcocoapodsをインストールします。
ここでは、bundler(RubyのGemパッケージの管理)を使用しているので、bundle installコマンドを使います。

【terminal】

bundle install --path=vendor/bundle

Fetching gem metadata from https://rubygems.org/...........
Fetching additional metadata from https://rubygems.org/..
Resolving dependencies...
Installing i18n (0.7.0)
Installing json (1.8.3)
Installing minitest (5.7.0)
Installing thread_safe (0.3.5)
Installing tzinfo (1.2.2)
Installing activesupport (4.2.3)
Installing claide (0.8.2)
Installing fuzzy_match (2.0.4)
Installing nap (0.8.0)
Installing cocoapods-core (0.36.0)
Installing cocoapods-downloader (0.8.1)
Installing cocoapods-plugins (0.4.2)
Installing netrc (0.7.8)
Installing cocoapods-trunk (0.6.1)
Installing cocoapods-try (0.4.5)
Installing colored (1.2)
Installing escape (0.0.4)
Installing molinillo (0.2.3)
Installing open4 (1.3.4)
Installing xcodeproj (0.23.1)
Installing cocoapods (0.36.0)
Using bundler (1.5.1)
Your bundle is complete!
It was installed into ./vendor/bundle

インストールに成功すると、「Your bundle is complete!」のメッセージが表示されます。
プロジェクトのルートにはGemfile.lockというファイルが作成されています。このファイルには、プロジェクトで利用しているパッケージとバージョンの情報が記載されています。

不要ファイルだと勘違いして削除する人がいますが、削除してはいけません。
削除してしまうと、プロジェクトで利用しているパッケージとバージョンの情報がわからなくなってしまいます。
git等のソース管理ツールできちんと管理しましょう。

Podfileの記載とパッケージのインストール

【terminal】

// Podfileを作成
touch Podfile

プロジェクト配下にPodfileを作成します。
上記で作成したPodfileはswiftアプリで使うパッケージのインストールに使用します。

【almo-swift/Podfile】

platform :ios, '8.0'
use_frameworks!

pod 'Alamofire', '~> 1.2'
pod 'SwiftyJSON', '~> 2.2.0'

上記ではネットワーク接続に利用するAlamofireと手軽にjsonを扱うSwiftyJSONのパッケージを指定しています。
iosのバージョンはios8を指定します。今回利用するSwiftyJSONパッケージは、ios7に対応する場合は、CocoaPodsで利用することはできないので気をつけてください。

また、SwiftyJSONをCocoaPodsで利用するには、CocoaPods versionが0.36以上である必要があることも留意してください。

【terminal】

bundle exec pod install

Analyzing dependencies

CocoaPods 0.38.0.beta.1 is available.
To update use: `sudo gem install cocoapods --pre`
[!] This is a test version we'd love you to try.

For more information see http://blog.cocoapods.org
and the CHANGELOG for this version http://git.io/BaH8pQ.

Downloading dependencies
Installing Alamofire (1.2.3)
Installing SwiftyJSON (2.2.0)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `almo-swift.xcworkspace` for this project from now on.

パッケージの導入に成功したら、画面からプロジェクトフォルダに移動します。

{project-name}.xcworkspaceファイルをクリックします。

Xcodeが立ち上がり、作成したプロジェクトのPodsフォルダ以下にインストールしたパッケージが確認できます。
確認を終えたら、続けてソースコードをビルドします。

メニュー → Product → Buildを選択します。

インストールに成功していれば、コンパイルが成功します。iphoneシュミレーターを立ち上げて確認みましょう。

アプリが立ち上がり画面が表示されました。次はこのプロジェクトでAlamofireを利用していきます。

以上です。

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

関連記事

参考サイト

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

2015年7月15日水曜日

objective-cでOpenCVを使うその2

公開日：2015年07月14日

記事概要

objective-cでOpenCVの使い方を学習します。
その1に続きです。

開発環境

Xcode 6.4
Swift 1.2

難易度

★★★★☆(中級)

opencvのダウンロード

http://opencv.org/downloads.html OpenCV for iOSをダウンロードします。

ダウンロードしたopencv2.frameworkをプロジェクトから参照します。

プロジェクトフォルダ → TARGETS[opencv-obj-c] → Build Phaseを選択します。

Link Binary With Librariesの+を押し、add otherボタンからフレームワークを追加します。

OpenCVの実装

ViewController.mをViewController.mmに変更します。これによりC++が利用可能になります。
opencv の c++ ライブラリを使うための対策です。

[UIImageToMat]と[MatToUIImage]を使用するため、ライブラリをインポートします。
[UIImageToMat]はUIImage を cv::Mat に変換します。
[MatToUIImage]はcv::Mat を UIImage に変換します。
このパターンがopencvの基本的な使い方になります。

サンプルとしてグレースケールの実装を行ないます。

【objective-c/ViewController.mm】

#import "ViewController.h"
#import <opencv2/opencv.hpp>
#import <opencv2/imgcodecs/ios.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    UIImage* sampleImg = [UIImage imageNamed:@"sample"];
    self.imageview.image = sampleImg;
    
    // 元画像データを保存
    self.originalimageview = [UIImage imageWithCGImage:[self.imageview CGImage]];
    
    // 初期はNO
    self.imageswitch.on = NO;
    
    [self.imageswitch addTarget:self action:@selector(switchBtn:) forControlEvents:UIControlEventValueChanged];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)switchBtn:(id)sender
{
    NSLog(@"pushed");
    UISwitch *sw = sender;
    if (sw.on) {
        // グレースケール変換
        UIImage *edge = [self getEdgeImg:self.imageview.image];
        self.imageview.image = edge;
        //NSLog(@"スイッチがONになりました．");
    } else {
        self.imageview.image = self.originalimageview.image;
        //NSLog(@"スイッチがOFFになりました．");
    }
    
}

- (UIImage *)getEdgeImg:(UIImage *) img{
    
    // UIImage を cv::Mat に変換
    cv::Mat mat;
    UIImageToMat(img, mat);
    
    // グレイスケール変換
    cv::Mat gray;
    cv::cvtColor(mat, gray, CV_BGR2GRAY);
    
    // 画像のエッジを検出
    cv::Mat edge;
    cv::Canny(gray, edge, 200, 100);
    
    UIImage *edgeImg = MatToUIImage(edge);
    
    return edgeImg;
}

@end

ビルドし、アプリを立ち上げてみましょう。

SwitchがOFFの状態

SwitchがONの状態

OpenCVが実装できていますね。

以上です。

Objective-cでのiphoneアプリ開発にオススメの本

iphone開発の経験があり、より優れた設計のiphoneアプリを作りたい人向けの本です。
iphoneプログラミングをパーツ化するテクニックを学べます。アプリを量産したい人には必須の本です。

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

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

参考サイト

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

2015年7月14日火曜日

objective-cでOpenCVを使うその1

公開日：2015年07月14日

記事概要

objective-cでOpenCVの使い方を学習します。
SwiftでOpenCVを使うシリーズの派生記事です。

開発環境

Xcode 6.4
Swift 1.2

難易度

★★★★☆(中級)

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

まず最初にiphoneプロジェクトのひな形から作成していきます。
xcodeを立ち上げて、プロジェクトを作成します。

iOS → Application → Single View Applicationを選択します。

Product Nameにopencv-obj-cと入力
Organization Nameに組織名称(ここではcom.masa)と入力
Organization Identifierに組織名称(ここではcom.masa)と入力
Langugageにobjective-cを選択
Deviceにiphoneを選択
Use Core Dataのチェックボックスを外す

プロジェクトフォルダを選択すると、上記のようにプロジェクトが作成されます。
次にOpenCVの動作を確認するための画面を作成します。

ViewController

次にViewControllerに画像とボタンだけの画面を作成します。

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

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

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

Asset Catalogで画像管理

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

*SwiftでOpenCVを使うの記事や以前の記事に説明があります。参考にどうぞ。

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に表示できるように以下のように実装します。

【objective-c/ViewController.m】

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    UIImage* sampleImg = [UIImage imageNamed:@"sample"];
    self.imageview.image = sampleImg;
    
    // 初期はNO
    self.imageswitch.on = NO;
    
    [self.imageswitch addTarget:self action:@selector(switchBtn:) forControlEvents:UIControlEventValueChanged];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)switchBtn:(id)sender
{
    NSLog(@"pushed");
    UISwitch *sw = sender;
    if (sw.on) {
        NSLog(@"スイッチがONになりました．");
    } else {
        NSLog(@"スイッチがOFFになりました．");
    }
    
}

Images.xcassestsのsampleをimageViewに設定し、switchボタンをクリックするとメソッドが呼び出されるようにしています。
ビルドして画面を立ち上げて確認します。

画面が確認できました。続いて、OpenCVを導入します。

長い記事になってしまったので続きは次の記事で。

Objective-cでのiphoneアプリ開発にオススメの本

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

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

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で画像管理

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

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アプリ開発にオススメの本

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

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

参考サイト

Icon and Image Sizes

SwiftでOpenCVを使うその1 cocoapodsでOpenCVをインストールする

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

2015年7月12日日曜日

SwiftでOpenCVを使うその1 cocoapodsでOpenCVをインストールする

公開日：2015年07月12日

記事概要

SwiftでOpenCVの使い方を学習します。

開発環境

Xcode 6.4
Swift 1.2

難易度

★★★★☆(中級)

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

まず最初にiphoneプロジェクトのひな形から作成していきます。
xcodeを立ち上げて、プロジェクトを作成します。

iOS → Application → Single View Applicationを選択します。

Product Nameにopencv-swiftと入力
Organization Nameに組織名称(ここではcom.masa)と入力
Organization Identifierに組織名称(ここではcom.masa)と入力
LangugageにSwiftを選択
Deviceにiphoneを選択
Use Core Dataのチェックボックスを外す

プロジェクトフォルダを選択すると、上記のようにプロジェクトが作成されます。
次は、iphoneアプリプロジェクトのパッケージ管理にcocoapodsを導入します。
cocoapodsは開発に便利なパッケージの導入や管理をしてくれるツールです。

OpenCVもcocoapodsで取得することができます。
では、xcodeを閉じましょう。
macのターミナルを開いて、上記で作成したプロジェクトフォルダまで移動します。

【terminal】

// プロジェクトフォルダに移動
cd /Users/{username}/Documents/iworksample/opencv-swift/

// Gemfileを作成
touch Gemfile

プロジェクト配下にGemfileを作成します。
ここで作成したGemfileはcocoapodsのインストールに使用します。
GemfileはBundler用の設定ファイルです。Bundlerはgemのバージョン管理を行うプログラムです。
この辺の知識や技術はRubyの開発の経験があると理解しやすいのですが、cocoapodsの導入だけでRubyの学習をする必要はありません。わからなくても手順通り作業を進めて問題ありません。

また、cocoapodsの導入にはRubyが必要なので、Rubyが未インストールの人は、最初にRubyをインストールしておく必要があります。(この記事ではRubyがインストール出来ている前提で話を進めます)
*この記事でのrubyはversion2.2.2を使用しています。

Gemfileの記載とCocoaPodsのインストール

次にGemfileを使ってcocoaPodsをインストールします。
Gemfileは、以下のように記載します。

【Gemfile】

source 'https://rubygems.org'
gem 'cocoapods', '0.36.0'

上記のGemfileを保存します。
cocoapodsのバージョンは0.36.0を利用します。
cocoapodsのバージョンは、プロジェクトの全員が同じバージョンを利用するようにします。

次にRubyを使ってcocoapodsをインストールします。
この記事では、bundler(RubyのGemパッケージの管理)を使用しているので、bundle installコマンドを使います。

【terminal】

bundle install --path=vendor/bundle

Fetching gem metadata from https://rubygems.org/...........
Fetching additional metadata from https://rubygems.org/..
Resolving dependencies...
Installing i18n (0.7.0)
Installing json (1.8.3)
Installing minitest (5.7.0)
Installing thread_safe (0.3.5)
Installing tzinfo (1.2.2)
Installing activesupport (4.2.3)
Installing claide (0.8.2)
Installing fuzzy_match (2.0.4)
Installing nap (0.8.0)
Installing cocoapods-core (0.36.0)
Installing cocoapods-downloader (0.8.1)
Installing cocoapods-plugins (0.4.2)
Installing netrc (0.7.8)
Installing cocoapods-trunk (0.6.1)
Installing cocoapods-try (0.4.5)
Installing colored (1.2)
Installing escape (0.0.4)
Installing molinillo (0.2.3)
Installing open4 (1.3.4)
Installing xcodeproj (0.23.1)
Installing cocoapods (0.36.0)
Using bundler (1.5.1)
Your bundle is complete!
It was installed into ./vendor/bundle

インストールに成功すると、「Your bundle is complete!」のメッセージが表示されます。
プロジェクトのルートには『Gemfile.lock』というファイルが作成されています。
このファイルには、プロジェクトで利用しているパッケージとバージョンの情報が記載されます。

ネット上の情報の中には、このGemfile.lockを不要なファイルと勘違いして削除を促している人がいますが、削除してはいけません。削除してしまうと、プロジェクトで利用しているパッケージとバージョンの情報がわからなくなってしまいます。
『Gemfile.lock』は、git等のソース管理ツールできちんと管理してください。

Podfileの記載とパッケージのインストール

【terminal】

// Podfileを作成
touch Podfile

プロジェクト配下にPodfileを作成します。
上記で作成したPodfileはswiftアプリで使うパッケージのインストールに使用します。

【Podfile】

source 'https://github.com/Zi0P4tch0/Specs.git'

platform :ios, '7.0'

pod 'OpenCV', '2.4.9-zp'

iosのバージョンはios7を指定します。

【terminal】

bundle exec pod install

Analyzing dependencies
Downloading dependencies
Installing OpenCV (2.4.9-zp)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `opencv-swift.xcworkspace` for this project from now on.

パッケージの導入に成功したら、Xcodeを閉じます。
次に、GUI画面からプロジェクトフォルダに移動します。