iPhoneアプリ初心者向けフィルターアプリ講座 ~ cocoapodsでGPUImageを使って楽ちんに高速フィルター開発のチュートリアル

2時間ぐらいで、iPhoneアプリ作るの楽しいかも！と思ってもらえるようなチュートリアルです。

ちょっとした画面遷移と、フィルターアプリを簡単に作ってみることで、iPhoneアプリ開発に興味を持ってもらい、今後の一歩になればと思います。

また、cocoapodsを使うことで、便利なライブラリーを簡単に使うことができるようになり、より高速なアプリ開発ができるようになります。

それでは初めて行きましょう！

プロジェクトを作る

まずはXcodeを開いてCreate a new Xcode projectを選択しよう。

Xcodeをひらいて、Create a new Xcode project

つぎに、今回はSingle View Applicationを選びます

Single View Applicationを選択

自分のプリの情報を入れましょう。

項目	入力する値
Prodcut Name	アプリの名前
Organaization Name	組織の名前 or 自分の名前
Company Identifier	ドメインを持っている場合はそれの逆にしたものを入れるのが一般的。世界でユニークであれば何でも良い。
Class Prefix	作成したクラスの接頭語としてつく文字列。空白でも良い
Devices	対応するデバイス。UniversalはiPhoneとiPadのどちらもという意味

アプリの情報をいれる

自分の好きなところに保存して、Createボタンをクリック。あとで、ターミナル操作に慣れてない人はあとでわかりやすくするために、デスクトップに保存しておいてください。

プロジェジェクトの作成場所

ここで、command+R（もしくは、メニューバーでProdcut>Runを選択 or Xcodeの左上の再生ボタン）で実行してみましょう！

すると、ソースコードがコンパイルされて、iPhoneシュミレーターが起動されます

シュミレーターで実行できた

Storyboardで画面遷移してみる

次に、Storyboardを使って、画面遷移をしてみましょう。

まずは、左のファイルメニューから、Main.storyboardを探して、クリックします。

そして、右下のメニューから、View Controllerを探して、真ん中の画面にドロップしましょう

ViewControllerを追加

次に、さらに右下のメニューから、Buttonを探して、もともとあった画面にドロップしましょう（矢印が付いている方の画面です）

ボタンを画面に載せた

次にcontrolボタンを押しながら、先ほど置いたボタンをドラッグして、新しく追加した画面に線を引きましょう

ボタンを紐付け

そうすると、Action Segueとポップアップされて

push
modal
custom

と選べるので、modalを選択。すると、画面の間に矢印が出現しました。これで、ボタンを押したら、矢印の先の画面へ遷移することができるようになりました。

また遷移先の画面をわかりやすく背景を黒色にしておきましょう。あとで追加した画面をクリックすると、左のViewの詳細が書いてあるところで、どちらの画面かがわかるので、そのなかのViewを選択して、Background Colorを黒にしましょう

画面を黒くする

再び、command+Rで実行してみましょう！ボタンをクリックすると、黒い画面がしたから出てくるかと思います！

UIImageViewで画像を表示させる

まずは適当な画像ファイルをプロジェクトに追加しましょう

画像を追加

次のような画面が出てくるので、

Add to targetsにチェクが入っていることに気をつけて、Finishをクリック

次に、右下から、Image Viewを探して、黒い画面の方にドロップして、右上の設定で、先ほど追加した画像をImage Viewのimageに設定しましょう。すると、画像が表示されます。

実行すると、ボタンを押したあと、画面遷移したあとが黒い画面だったところに写真が表示されましたね。こんな感じで画面遷移などを作っていったりします。Storyboardを使うと簡単にモックを作れるので、これだけ使えるのも価値があると思います。

cocoapodsをインストールする

iOSアプリ開発には様々な便利なライブラリーがあります。今回は超高速フィルターを実現するためにGPUImageというライブラリーを使います。

そのライブラリーを簡単に使うために、cocoapodsというシステムを使います。cocoapodsを使うのが今風なので、最初から覚えて使ってしまいましょう。

まず、ターミナル.appを開いてください。そして、

sudo gem install cocoapods

と入力して、Enterボタンを押してください。パスワードが求められるので、パソコンに設定しているパスワードを入力してください。これで、cocoapodsのインストールは完了です。

これが、うまくいかない場合は、以下を一行ずつ順番に実行してください

sudo gem install rubygems-update
sudo update_rubygems
sudo gem install cocoapods

cocoapodsでGPUImageをインストールする

さて、次にターミナルで、自分の作業しているプロジェクトがあるフォルダに移動してください

cd 作業しているフォルダパス

プロジェクトを作るときに、デスクトップに保存した人は

cd ~/Desktop/FilterAppSample

です。ここで、lsと入力して、Enterを押すことで、FilterAppSample.xcodeprojが表示されることを確認して下さい

さて、Podfileを作ります

touch Podfile

とすると、Podfileができます。それを画像の時と同じように、Xcodeにドロップして追加します。それをXcodeで選択して、以下のように書きましょう

platform :ios, '6.0'
inhibit_all_warnings!

pod 'GPUImage'

そして、一度、Xcodeを閉じてください。そして、また、ターミナルに戻って、

pod install

とします。すると、FilterAppSample.xcworkspaceが新しく生成されるので、これからはこれを使って作業をします

これをダブルクリックするとXcodeが立ち上がります。一度、command+Rで実行して、先程まで動いていたものが動くことを確認しましょう

フィルターをかけてみよう！

いよいよ、フィルターを作っていきましょう！まずはセピアフィルターを試してみましょう。

まずは、左画の画面に、右下メニューからViewを探して、ドロップして、そのViewを先ほどと同様の手順で背景を黒色にして、つぎに、Custom ClassのClasssのところをGPUImageViewにしましょう。

次に、option+command+Enterとすると、次のような画面になります。この画面で、Storyboardとコードをつなげていきます。いよいよ、コードの登場です！

右側が、FASViewController.hであることを右の画面の上のところで確認して下さい

ボタンでつなげた時と同じように、controlを押しながら、ドラッグすると、青い線が出ます。

Nameのところに、imageViewといれて、Connectボタンを押します。

すると、FASViewController.hは以下のようになります。こうすることで、コードから、Storyboardの画面の要素にアクセスすることができ、さまざまな動作をコードで書くことができます。

#import <UIKit/UIKit.h>

@interface FASViewController : UIViewController
@property (weak, nonatomic) IBOutlet GPUImageView *imageView;

@end

しかし、このままではエラーがでるので、#import <GPUImage.h>を追加して以下のようにします。これはライブラリーを追加するおまじないです。

#import <UIKit/UIKit.h>
#import <GPUImage.h>

@interface FASViewController : UIViewController
@property (weak, nonatomic) IBOutlet GPUImageView *imageView;

@end

さて、次は、FASViewController.mを編集していきます。最初は以下のようになっていると思います。

#import "FASViewController.h"

@interface FASViewController ()

@end

@implementation FASViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

}

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

@end

これの、viewDidLoadの中をいかよう用にします

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
     // 画像を作る
    UIImage *image = [UIImage imageNamed:@"photo.jpg"];
    GPUImagePicture *imagePicture = [[GPUImagePicture alloc] initWithImage:image];
    
    // コントラストフィルター
    GPUImageContrastFilter *contrastFilter = [[GPUImageContrastFilter alloc] init];
    // コントラストを設定する。コントラストは0~4の間の値で、1が普通
    [contrastFilter setContrast:4];
    
    // 画像 → コントラストフィルターをつなげる
    [imagePicture addTarget:contrastFilter];
    
    // コントラストフィルター → imageViewをつなげる
    [contrastFilter addTarget:self.imageView];
    
    // フィルター実行！
    [imagePicture processImage];
}

そして、保存して、実行すると、写真がコントラストが強い写真になってます！

UISliderでコントラストの調整

次はUISliderをつかって、インタラクティブにコントラストを変えてみましょう。まずは、Storyboardで、Sliderを探して、ドロップしましょう。そして、設定で、値を0から4までの値を移動できるようにします.

ふたたび、コードとSliderをつなげるために、option+command+Enterを押しましょう。そして、Controlをおしながら、Sliderから、FASViewController.hに青い線を引っ張ります。

こんどは、ConnectionのところをActionに変えて、NameをchangedSliderValueとでもしましょう。また、TypeをUISliderにしておきましょう。そして、connectボタンを押します

そして、FASViewController.mに戻ってみると以下の様なコードが生成されています。この中にコードを書くことで、Sliderの値が変わるたびに様々な動作をさせることができます。

- (IBAction)changedSliderValue:(id)sender {
    
}

試しに、スライダーの値をログに出してみましょう。

- (IBAction)changedSliderValue:(UISlider *)sender {
    NSLog(@"%f", sender.value);
}

さて、この値を元に、写真のコントラストを変えてみましょう。まずは、変更するフィルターと元写真をインスタンス変数にする必要があるので、以下のようにコードを変更します。

#import "FASViewController.h"

@interface FASViewController ()
// あとで変更が必要あなものをインスタンス変数にする
@property(nonatomic) GPUImagePicture *imagePicture;
@property(nonatomic) GPUImageContrastFilter *contrastFilter;
@end

@implementation FASViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 画像を作る
    UIImage *image = [UIImage imageNamed:@"photo.jpg"];
    self.imagePicture = [[GPUImagePicture alloc] initWithImage:image];
    
    // コントラストフィルター
    self.contrastFilter = [[GPUImageContrastFilter alloc] init];
    // コントラストを設定する。コントラストは0~4の間の値で、1が普通
    [self.contrastFilter setContrast:1];
    
    // 画像 → コントラストフィルターをつなげる
    [self.imagePicture addTarget:self.contrastFilter];
    
    // コントラストフィルター → imageViewをつなげる
    [self.contrastFilter addTarget:self.imageView];
    
    // フィルター実行！
    [self.imagePicture processImage];
}

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


- (IBAction)changedSliderValue:(UISlider *)sender {
    NSLog(@"%f", sender.value);
    // コントラストをスライダーの値にする
    [self.contrastFilter setContrast:sender.value];
    
    // フィルターを実行する
    [self.imagePicture processImage];
}
@end