Hello iOS and Objective-C !

UIKit/Foundation Frameworks

compatible with

iOS5.x

Nobuhiro TakahashiOS X / iOS Developer

http://feb19.jp

Mac OS X Appスマホサイト画像最適化ツール

ImageBind

Presenter

http://itunes.apple.com/jp/app/image-bind/id530343153?mt=12

iPhone を買った。Mac を買った。Xcode を入れた。アプリを作ろう。でも何を知ればいいの？ Objective-C？フレームワーク？まずは

UIKit/Foundation Frameworksを触ってみよう。

フレームワークとはクラスの集まりのことUIKit Frameworks は Foundation Framework の NSObject を源流に持つiOS 用コンポーネント群のフレームワーク

NSObject

NSString NSArray

UIResponder

UIView UIViewController

UIControl

UIButton

UIKitFramework

FoundationFramework

FoundationFramework

Chapter #1

プリミティブ型のクラスやネットワーク接続用のクラスなどを提供する

Objective-C でプログラミングするなら必ず使う基本フレームワーク

Foundation Framework 代表的なクラス

NSObject

NSString

NSNumber

NSData

NSDate

NSURL

NSArray

NSDictionary

NSSet

全てのクラスのルートクラス (生成、比較、メモリ管理)alloc, init isEqual: retain, release, autorelease, dealloc

様々なエンコード (ASCII, UTF-8 など) の文字列をラップするクラス※Objective-C の「プリミティブ型」的なものは、全て「ラッパークラス」

配列をラップするクラス

連想配列をラップするクラス

バイナリデータをラップするクラス

様々な数字をラップするクラス

日付をラップするクラス

URL をラップするクラス

オブジェクトの集まりをラップするクラス

NSString

文字列を格納する

Objective-C の文字列は @”hello” と書くObjective-C は C 言語をラップしたような言語なので、他の言語を触ってきた人には変な言語に見えるかもしれない。

char *str = "Hello";printf("%s", str);

[C言語] 文字列の生成と出力

NSString *str = @"Hello";NSLog(@"%s", str);

[Objective-C] 文字列の生成と出力

NSString *str = [[NSString alloc] initWithString:@"Hello"];NSLog(@"%s", str);

[Objective-C] 別の書き方

NSString *str = [NSString stringWithString:@"Hello"];NSLog(@"%s", str);

[Objective-C] さらに別の書き方

NSString

文字列の結合や文字列比較には演算子ではなく専用のインスタンスメソッドを使用する

NSString *str1 = @"Hello";NSString *str2 = [str1 stringByAppendingString:@" world!"];NSLog(@"%s", str2);

[Objective-C] 文字列の結合

NSString *str = @"Hello";if ([str isEqualToString:@"Hello"]) { NSLog(@"Hello.");}

[Objective-C] 文字列の比較

NSString *str = @"1000";if ([str intValue] > 500) { NSLog(@"ok");}

[Objective-C] 数値に変換

NSMutableString

ミュータブルな String＝変化できる String（ミュータブルはミュータントの形容詞）ミュータブルストリングではないただのストリングは途中で内容の変更ができないただしただのストリングの方がメモリの使用量などは少ない　※初心者は全部ミュータブルにしてしまえ！

NSMutableString *str = [NSMutableString string];[str appendString:@"Hi"];[str appendFormat:@", my favorite number is %d.", 128];[str appendString:@" Thank you."];NSLog(@"%s", str);

[Objective-C] 一つの文字列を変化させていく一連のコード

他にも NSArray に対しての NSMutableArrayNSData に対しての NSMutableDataNSDictionary に対しての NSMutableDictionary NSSet に対しての NSMutableSet などが用意されている

NSNumber に対しての NSMutableNumber は無い

NSArray

オブジェクトを保持する順番リスト（配列）を格納する

NSArray *array = [NSArray arrayWithObjects:@"Red", @"Blue", @"Green", nil];if ([array indexOfObject:@"Purple"] == NSNotFound) { NSLog(@"No color purple.");}

[Objective-C] 配列を作成してオブジェクトが存在するか確認する

NSArray に格納されるオブジェクトは Objective-C のオブジェクトなのでint や float や char などは格納できないので、NSNumber や NSString に変換する

NSMutableArray *array = [NSMutableArray arrayWithObjects:@"first", nil];NSNumber *number = [NSNumber numberWithInt:1000];[array addObject:number];char *c = "aaa";NSString *string = [NSString stringWithCString:c encoding:NSUTF8StringEncoding];[array addObject:string];

[Objective-C] int や char を NSMutableArray に追加する

NSDictionary

キーから値を取りだす「辞書」を格納する

NSDictionary *colors = [NSDictionary dictionaryWithObjectsAndKeys:@"Red", @"Color 1", @"Green", @"Color 2", @"Blue", @"Color 3", nil];

NSString *firstColor = [colors objectForKey:@"Color 1"];

[Objective-C] 辞書を作成してオブジェクトを取り出す

UIKitFramework

Chapter #2

Mac OS X との違いを補完しiOS 用のユーザーインターフェースを用意するフレームワーク

iOS 特有の「タッチできるぐらい大きいボタン」や「一度に表示する画面はただ一つ」「項目が縦に並ぶリスト」など見た目や

iOS には不要な情報を捨てて、iOS 独自の情報を取得できるクラスも用意「デバイスの傾き」「バッテリー残量」「iOS に最適化した画像データ」

UIKit には iOS 用コンポーネント群が定義されている

ViewController

Table ViewController

NavigationController

Tab BarController

Split ViewController

Page ViewController

GLKit ViewController

Object

Label

Round RectButton

SegmentedControl

Text Field

Slider

Switch

ActivityIndicatorView

ProgressView

Page Control

Stepper

TableView

TableViewCell

ImageView

TextView

WebView

MapView

ScrollView

DatePicker

PickerView

iAdBannerView

GLKitView

TapGestureRecognizer

PinchGestureRecognizerRotation

GestureRecognizer

SwipeGestureRecognizerPan

GestureRecognizer

LongPressGestureRecognizer

View

NavigationBar

NavigationItem

SearchBar Search Bar

and SearchDisplayController

Toolbar

BarButtonItem

FixedSpace BarButtonItem

FlexibleSpace BarButtonItem

Tab Bar

Tab BarItem

※一部 UIKit 以外のフレームワークのコンポーネントが含まれています

UIKit のユーザーインターフェース系のクラスでは「タッチイベント」を受け取ることができる

touchesBegan:withEvent:touchesMoved:withEvent:touchesEnded:withEvent:touchesCancelled:withEvent:

UIWindow

スクリーンに表示するアプリケーションのウィンドウを管理する

アプリにつき一つだけ存在する

View1

UIView

画面上に設置する矩形の表示エリア

テキストラベル、ボタン、画像など様々なタイプがある表示オブジェクトアプリにつき無数に存在する

View の中に View を入れて入れ子にすることもできる(位置情報に注意)

(0,0)+ x

y

View2

(70,170)

SubView1(10,100)

SubView2(10,60)

ViewController’sView

UIViewController

UIView などの表示オブジェクトを管理する一つのシーン、画面に対して一つが一般的

タブ、ナビゲーションなどが使用されている場合は複数使うこともある

ViewController 自体が View を持っている (ViewController.view) ので、そこに色々 View (ラベル、ボタン、画像など) を配置する

UIScreen

UIImageUIFont

UIDevice

UIColor UIAcceleration

UIView

ユーザーインターフェース以外を操作することができる UIKit のクラス

ユーザーインターフェース系のクラス

UIKit

UIWindow

UIViewController

色

画面情報

フォント

加速度

デバイス情報

画像データ

画面

ビュー

シーン

UIResponder

タッチに反応するオブジェクト

他色々 他色々

Single View Application

基本的には Xcode で新規作成するプロジェクトはこれを使おう

Window が生成されていて一つその中に ViewController が用意されているテンプレートUIWindow にルート用の ViewController を指定されている

この ViewController に色んな View を生成して乗せることでアプリを作っていくことをまずは覚えてみよう

UIViewChapter #2-2

座標 (10, 10) に大きさ (300, 100) で View を生成して、親のビュー（スーパービュー）に乗せる

UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(10,10,300,100)];[superView addSubview:aView];

- (void)removeFromSuperview;- (void)insertSubview:(UIView *)view atIndex:(NSInteger)index;- (void)bringSubviewToFront:(UIView *)view;

UIView の主なメソッド

(CGRect) frame(BOOL) hidden(BOOL) userInteraction

UIView の主なプロパティ

View 0-0

View 1-1 View 1-2View 1-0

View 2-0 View 2-1

View 1-2 に対しての Superview

View 1-2 に対しての Subview

表示リストSubview は一つの Superview を持つSuperview は複数の Subview を持つことができる

UIView

View Class HierarchyUIView クラスを基底にして無数のサブクラスが存在するUIView クラスの機能はサブクラスに継承される

UIView

UIWindow UILabel UIPickerView UIProgressView UIActivityIndicatorView

UIImageView UITabBar UIToolBar UINavigationBar UITableViewCell

UIActionSheet UIAlertView UIScrollView UIWebView UIControl

UITableView UITextView

UIButton UIDatePicker UIPageControl

UISegmentedControl UITextField UISlider

UISwitch

UILabel

read-only なテキスト表示用ビュー

こんにちは

UIImageView

画像を表示する用のビュー ‘ ‘

UIImage *image = [UIImage imageNamed:@"illustration.png"];UIImageView *imageView = [[[UIImageView alloc] initWithImage:image] autorelease];[window addSubview:imageView];

生成と設置UIImage というオブジェクトを作成して UIImageView にはめ込むXcode のプロジェクトペインにドラッグアンドドロップしてインポートした画像を使用してみましょう

[imageView removeFromSuperview];

生成と設置

取り除く

UIImageView UIImage

Other View

setImage:

addSubview:

UIView

UIWindow UILabel UIPickerView UIProgressView UIActivityIndicatorView

UIImageView UITabBar UIToolBar UINavigationBar UITableViewCell

UIActionSheet UIAlertView UIScrollView UIWebView

UITableView UITextView

UIControl

UIButton UIDatePicker UIPageControl

UISegmentedControl UITextField UISlider

UISwitch

UIControl

タッチイベントを検知して「コントロール機能」を提供するビュー

指定されたイベントが発生したらターゲットオブジェクトへアクションメッセージを送信する

UIButton

ボタン用のビュー色んな形のボタンが用意されている

UIControl のサブクラス

He l lo

[button addTarget:self action:@selector(buttonWasTapped:) forControlEvents:UIControlEventTouchUpInside];

[Objective-C] ボタンがタップされたら自分 (self) に buttonWasTapped: を送信するよう設定

- (void) buttonWasTapped:(id)sender{ NSLog(@"Button Was Tapped!");};

[Objective-C] メッセージを受け取ったら実行するメソッド

ボタンのインタラクションUIButton など UIControl 系のビューは「～されたらメッセージを送信する」ことができる※「メッセージを送信する」＝メソッドを呼び出す（この言い方はこの言語の成りたちに由来している）

[UIControl addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents];

[Objective-C] UIControl のメソッド。controlEvents が発生したら target に action を送信する

XcodeChapter #3

(応用編)今までのスライドの知識を使ってアプリを作る

Xcode でアプリケーションを新規作成

適当な場所に保存するとプロジェクトが作成され、Xcode の画面に戻る

画面左上が iPhone x.x Simulator となっているのを確認して ▶ Run をクリックするとMac 上で iOS シミュレータが動作して空のアプリが実行されるのを確認する

Xcode のメニューから File ＞ New ＞ Project ＞ iOS ＞ Application ＞ Single View Application を選択

ProductNameHello World (アプリ名)

Organization NameTakahashi Nobuhiro (制作者名)

Company Identifierjp.feb19 (アプリ ID)

Class Prefix

DevicesiPhone (ターゲットデバイス)

Use StoryboardsNO

Use Automatic Reference CountingYES

Include Unit TestNO

- (void)viewDidLoad{ [super viewDidLoad];! // Do any additional setup after loading the view, typically from a nib. UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,320,30)]; label.text = @"Hello World."; [self.view addSubview:label];}

[Objective-C] UILabel を表示する

再度 ▶ Run すると画面に Hello World. と表示されることを確認する

新規作成したプロジェクトに自前のコードを加えていく左側にあるプロジェクトファイルペインから ViewController.m を選択してコードエディタを表示ちょっとだけコードを足してみよう

Hello World

UILabel *label_;

- (void)viewDidLoad{ [super viewDidLoad];! // Do any additional setup after loading the view, typically from a nib. UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,320,30)]; label.text = @"Hello World."; [self.view addSubview:label]; label_ = label; UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; button.frame = CGRectMake(110, 200, 100, 50); [button setTitle:@"CLEAR" forState:UIControlStateNormal]; [self.view addSubview:button]; [button addTarget:self action:@selector(clearLabel:) forControlEvents:UIControlEventTouchUpInside];}

- (void)clearLabel:(UIButton *)button{ [label_ removeFromSuperview];}

[Objective-C] UIButton を作成してラベルを消す

再度 ▶ Run して、ボタンをタップするとラベルが消えることを確認する

新規作成したプロジェクトに自前のコードを加えていく2さらにコードを加えてみようボタンを設置してラベルを消してみよう

Hello World

CLEAR

UILabel *label_;int count = 0;

- (void)viewDidLoad{ [super viewDidLoad];! // Do any additional setup after loading the view, typically from a nib. UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,320,30)]; label.text = @"Hello World."; [self.view addSubview:label]; label_ = label; UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; button.frame = CGRectMake(110, 200, 100, 50); [button setTitle:@"CLEAR" forState:UIControlStateNormal]; [self.view addSubview:button]; [button addTarget:self action:@selector(clearLabel:) forControlEvents:UIControlEventTouchUpInside];}

- (void)clearLabel:(UIButton *)button{ NSArray *array = [NSArray arrayWithObjects:@"いっかいめ", @"にかいめ", @"さんかいめ", @"それいじょう", nil]; label_.text = [array objectAtIndex:count]; if (count < 3) { count++; }}

[Objective-C] UIButton を作成してラベルを消す

再度 ▶ Run して、ボタンをタップするたびにラベルの表示が変わることを確認する

新規作成したプロジェクトに自前のコードを加えていく3さらにコードを加えてみよう条件分岐や NSArray を使ってボタンをタップすると表示を変えてみる

Hello World

CLEAR

Let’s make an application!

♂♀クイズ

①Google 画像検索などで

　「ニューハーフ」「美しすぎる男性」などと検索して

　男性か女性か分かりにくい画像を探してください

②UIImageView を使って画像を表示してください

③UIButton を押すと、UILabel で答えを表示してください

④10問出題してください

⑤最後は UILabel で「お疲れさまでした！」表示と

　とびきりの画像を見せてあげてください

♂♀クイズ

♂ ♀

正解!

残り 3/10 残り 4/10

次へ 最初から

THANK YOUFOR PLAYING!

正解率 50%

♂♀クイズ

最後に実践チャレンジ！

UICatalog必見！UIKit を一通り触ることができる Apple 製サンプルコードhttp://developer.apple.com/library/ios/#samplecode/UICatalog/

iColors - Color SwatchesiPhone 上で RGB カラーチップを確認、作成できるユーティリティツール作成したカラーを HTML 化してメールでエクスポートすることも

http://itunes.apple.com/jp/app/icolors-color-swatches/id414588543?mt=8

お疲れさまでした！

Hello iOS and Objective-C !

UIKit/Foundation Frameworks