iphone5s

iPhoneアプリ開発をします。

iPhoneアプリ開発は初心者です。
これから開発を進めていって、基礎のキソからメモっていきますね。
この記事の通り進めていけばアプリが作れるようにメモっていきます。
(自分が次に作るときに再現できるように)

Xcodeのインストール

App Store⇒カテゴリ開発ツール⇛Xcode

インストールは完了!
Xcodeを起動します。

プロジェクトを作る

「Create a new Xcode project」を選択し、Next
⇛「Single View Application」を選択し、Next
⇛名前を「testApp」としてNext
⇛保存するディレクトリを選んでCreate

xcode1

セットアップ完了です。

各ファイルの構成

ViewController.mとViewController.h

画面(View)の動きをコントロール(Controller)します。

ViewController.h (interfaceですね)

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

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

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end

MainStoryboard,storyboard

画面デザインを作るためのファイル

AppDelegate.hとAppDelegate.m

アプリの基本動作を書くファイル
アプリ起動時、アプリ終了時の動きを書くとこです。

AppDelegate.h (interface)

#import <UIKit/UIKit.h>

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@end

AppDelegate.m

#import "AppDelegate.h"

@implementation AppDelegate

@synthesize window = _window;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    return YES;
}
							
- (void)applicationWillResignActive:(UIApplication *)application
{
    // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
    // Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.
}

- (void)applicationDidEnterBackground:(UIApplication *)application
{
    // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later. 
    // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
}

- (void)applicationWillEnterForeground:(UIApplication *)application
{
    // Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.
}

- (void)applicationDidBecomeActive:(UIApplication *)application
{
    // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
}

- (void)applicationWillTerminate:(UIApplication *)application
{
    // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
}

@end

その他

◎Supporting Files
アプリの画像等、アプリを作成するのに必要なサポートファイルを置くフォルダ

◎testApp-info.plist (プロジェクト名)
アプリ設定ファイル(あまり触れることは無い)

◎Frameworks
アプリ開発のフレームワークです。触ることは無いでしょう。

◎testApp.app (プロジェクト名)
アプリの実行ファイルです。

さて、ここで試しにRunボタンを押してみましょう。
真っ白なページですが、シミュレータが起動します。

simulator
では実装・デザインしていきます。

画面をデザイン

Mainstoryboaard.storyboardを使います。

ライブラリからLabelをドラッグしてきます。

step1

※GUIで直感的にわかりますが、当然ソースコードで実装もできます。
※右向きの矢印がありますよね、「→」は最初に表示する画面を表して

部品とプログラムをつなげる

右上にアシスタントエディターというボタンがあります。
ネクタイみたいなボタンです。
アシスタントエディター

押してあげると、こうなります。
部品(オブジェクト)とプログラムに関連をつけていきます。

アシスタント

いじるソースコードはViewController.mです。

さて、画面に配置した部品をcontrol+クリックし、ViewConttoller.mの@interface @endの間にドラッグ&ドロップします。
そうして、出てきたポップアップに名前をつけてあげて下さい。
すると、ソースコードに自動で反映されます!(すげぇ!)

ViewController.m
choice

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UISegmentedControl *choice;

@end

@implementation ViewController
@synthesize choice;

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

- (void)viewDidUnload
{
    [self setChoice:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end

変化点は
5行目に@property (weak, nonatomic) IBOutlet UISegmentedControl *choice;
10行目に@synthesize choice;
20行目に[self setChoice:nil];
が追加されていることです。

実装するよ

ざっくりというと、選ぶ部品はSegmented Controlというオブジェクトです。choiceという名前で宣言しました。
それを選択されている状態でswitch文で背景色を変えています。
背景色を変えるのは[UIColor redColor]というやり方で変えられます。

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController{
    UISegmentedControl *choice;
}

@property (nonatomic, retain) IBOutlet UISegmentedControl *choice;

- (IBAction)SegChanged:(id)sender;

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize choice;


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


-(IBAction)SegChanged:(id)sender{
    switch (choice.selectedSegmentIndex) {
        case 0:
            NSLog(@"赤が選択されています");
            self.view.backgroundColor = [UIColor redColor];        
            break;
        case 1:
            NSLog(@"黄が選択されています");
            self.view.backgroundColor = [UIColor yellowColor];        
            break;            
        default:
            break;
    }
}


- (void)viewDidUnload
{
//    [self setChoice:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end

ViewControllerとxibの紐付けを行う

部品オブジェクトを選択して、右側の「→」を選びます。

xib2

ValueChangedをcontrol+クリックで部品オブジェクトに紐付けます。

xib

これで、「赤」「黄」を選んだことがメソッドと紐付きます。

デモ

起動時

first

黄を選ぶ

yellow

赤を選ぶ

red

感想

Xcodeはツールとして機能が多すぎて、振り回された印象です。
部品とメソッドをつなぐところがかなり複雑(慣れればどうってことないんでしょうが)
とはいえ設定ファイルをベタ書きするわけにもいかずXcodeに早くなれるべきですね。

アプリはガワで、INPUTのUIを良くして、通信し裏のAPIサーバでゴリゴリと処理させた方が良い印象です。
次回は、もっと凝ったアプリを作ってみます。