2時間ぐらいで、iPhoneアプリ作るの楽しいかも!と思ってもらえるようなチュートリアルです。
ちょっとした画面遷移と、フィルターアプリを簡単に作ってみることで、iPhoneアプリ開発に興味を持ってもらい、今後の一歩になればと思います。
また、cocoapodsを使うことで、便利なライブラリーを簡単に使うことができるようになり、より高速なアプリ開発ができるようになります。
それでは初めて行きましょう!
プロジェクトを作る
まずはXcodeを開いてCreate a new Xcode projectを選択しよう。
つぎに、今回は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を探して、真ん中の画面にドロップしましょう
次に、さらに右下のメニューから、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
これで、実行すると、スライダーを変更するとコントラストがリアルタイムで変更されます!
参考
フィルターをもう少し詳しくこちらに書いているので、参考にしてくだい http://blog.kasajei.com/entry/2013/03/09/%E3%80%8C%E8%9C%B7%E5%B7%9D%E5%AE%9F%E8%8A%B1%E7%9B%A3%E4%BF%AE%E3%82%AB%E3%83%A1%E3%83%A9%E3%82%A2%E3%83%97%E3%83%AAcameran%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E6%95%99
あとオススメの参考書です。
現場で通用する力を身につける iPhoneアプリ開発の教科書 【iOS 7&Xcode 5対応】 (教科書シリーズ)
- 作者: 森巧尚,まつむらまきお
- 出版社/メーカー: マイナビ
- 発売日: 2014/01/25
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (4件) を見る
- 作者: 荻原剛志
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2011/12/23
- メディア: 単行本
- 購入: 14人 クリック: 98回
- この商品を含むブログ (25件) を見る
- 作者: 所友太,京セラコミュニケーションシステム株式会社
- 出版社/メーカー: リックテレコム
- 発売日: 2010/01/12
- メディア: 単行本
- 購入: 25人 クリック: 329回
- この商品を含むブログ (42件) を見る