iOS Developerの道 - Hello World (Storyboards)


はじめに

まずは、よくあるHelloWorldを表示するアプリを作ります。
因に、「私プログラム初めてなんです。」という人は、Objective-Cではじめるプログラム入門?を参考にしてね。

成果物

ボタンを押したら、HelloWoldという文字列を表示します。
ありきたりですね。

前提条件

  • Xcode4.2をインストール

Agenda

  1. プロジェクトの新規作成
  2. Xcode4.2の各画面の説明
  3. コントロールを配置してみる
  4. ロジックを書いてみる
  5. キーボードを隠せるようにしてみる(デリゲート)

HelloWolrdの作成

プロジェクトの新規作成

  1. Xcodeを起動します。
  2. File->New->New Projectを選択し、「Choose a template for your new project.」ダイアログを表示します。
  3. Single View Applicationを選択します
Single View Applicationこのテンプレートは、単一のビューを使用するアプリケーションのテンプレートを提供します。このテンプレートにはViewControllerおよびViewが含まれるStoryboardsもしくはxlibファイルが用意されます。
  1. 「Next」を押します。
  2. 各項目を入力しろと言われるので次のとおりに入力します。
項目名入力値説明
Product NameHelloWorldプロダクトの名前ですね
Company Identifieredu.self会社識別情報。なければこれで
Class PrefixHelloWorldプロダクト名と同じにしておきます。ここに設定した値はXXXAppDeletegeとかの名前に使われます
Use StroybaordチェックありXcode4.2からの新機能ですね。まずはつかってみましょう
Use Automatic Reference CountingチェックありARCですね。これも新機能。使いましょう
Include Unit Testチェックなしユニットテストの追加有無。よくばらずにいきましょう

とりあえず、プロジェクトはこれで作り終わりました。
左上の「Runボタン(再生マークみたいなの)」を押して実行してみてください。
シュミレーターが起動して、真っ白い画面がでてくればOKです。

Xcode4.2の各画面の説明

がんばって、SSとろうとしたんですけど面倒くさいのであきらめました
最低限のところだけ説明します。

Project navigator

画面左にあるWindowsのExplorerみたいなものです。
ここにプロジェクトに必要な各種フォルダやファイルがあります。
Supporting Files/main.m
メインファイルですね。ARCにするとここに次のようなコードが記載されます。
    @autoreleasepool {
        return UIApplicationMain(argc, argv, nil, NSStringFromClass([HelloWorldAppDelegate class]));
    }
Supporting Files/HelloWorld-Info.plist
設定ファイルですね。
HelloWorldプロジェクトでは、Storyboardsを使用するとしたので、設定ファイルには、
このアプリケーション起動時に読み込まれるStoryboardsファイルが記載されています。
Main storyboard file base name   String MainStoryboard
HelloWorld/MainStoryboard.stroyboard
このアプリケーションのstoryboardファイルですね。
アプリが起動されると、MainStoryboard.storyboardファイルがロードされ、StoyBoardにあるビューコントローラーがインスタンス化されます。
HelloWorld/HelloWolrdAppDelegate.h HelloWorldAppDelegate.m
main.mで指定されているように、UIApplicationのDelegateを担当するクラスですね。
stroyboardを利用している場合、次2点に注目箇所でしょうか。
  • ViewControllerをプロパティに持っていない。
#import <UIKit/UIKit.h>

@interface HelloWorldAppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@end
  • didFinishLaunchingWithOptionsのコーディング
いままでは、didFinishLaunchingWithOptionsにwindowをallocして、ViewCotrollerをallocして、プロパティに突っ込んで、windowのrootViewControllerプロパティに突っ込んでなどなどアプリのWindows生成とView生成を書いていましたが、今回はこれらの仕事をstorybordファイルが担当するようです。
なので、didFinishLaunchingWithOptionsには特に何の処理を書かれていません。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    return YES;
}
アプリの起動時の内部処理もかわっているようで、APIに次のように書いてありました。
During setup, the application object performs the following tasks:

1.Loads the main storyboard file. 
 main storybordファイルを読み込みます。

2.Gets the window object from the app delegate (or creates a new instance of UIWindow and associates it with the app delegate).
delegateからwindow objectを作るぜ。

3.Instantiates the storyboard’s initial view controller and assigns it as the window object’s root view controller.
ストーリーボードの最初のビューコントローラをインスタンス化し、windowオブジェクトのroorViewControllerとして割り当てる。


だそうです。

コントロールを配置してみる

それじゃ、とりあえずコントロールを配置してみましょうか。
作業を始める前に、MainStoryboard.storyboardファイルを開いてみてください。簡単な説明でもしちゃいましょうか。

Storyboardで重要なキーワードは次の2つだそうです。
  • シーン(sene)
  • セグエ(segue)
名前説明
シーンシーンは、コンテンツのある領域を管理するビューコントローラを表す
セグエセグエはView間の切り替わり効果を表す

今回は、SingleViewTemplateを選択したので、シーンは1個、segueは0個ですね。(個と数えるかはしらない。羽じゃないきがする)
今回でいうと、シーンは左からのびている矢印につながっているViewの画面エディタと下のDoc部分を示すらしい。(らしいですからね)

さて、前置きが長くなりましたが、配置をしていきましょう。基本はxlibとかわりませんので詳細は省きます。
本家Appleサイトにいけば、xlibバージョンなら日本語のテキストがありますしね。
次ように配置してみてください。

とりあえず、実行してみましょう。
まだ、ボタンを押しても反応はない(青くはなりますけど)し、テキストボックスに文字を入力しようものなら、キーボードが隠れてくれません。
ボタンにActionを結びつける
i.Assistant Editorのボタン(右上の蝶ネクタイアイコン)を押して、エディタモードを変更します。
右側のコード部分には、HelloWorldViewController.hが表示されていることを確認してくださいね。
ii.ボタンの上でCtrlキーを押しながら、左側のコード部分にドラッグ&ドロップします。

iii.ポップアップがでてくるので項目を入力します。

すると、HelloWorldViewController.hは次のようになります。
#import <UIKit/UIKit.h>

@interface HelloWorldViewController : UIViewController
- (IBAction)createMessage:(id)sender;
@end
また、HelloWorldViewController.mには次のコードが追加されます。
- (IBAction)createMessage:(id)sender {
}
textFiled,LabelのOutletを作成します。
textfieldの上でCtrlキー押したまま右のコードエディタにD&Dすると、ポップアップ項目が表示されるので次のように項目に入力します。
項目名説明
NametxtNameOutletの名前になります。わかりやすいものにしてください。
StorageWeaktextFieldは、ViewControllerのViewオブジェクトのSubViewです。つまり、Viewに所有されているため、Weakが適切です。
labelも似たように設定してください。Nameは「lblMessage」としておきます。
ここでの注目ポイントは、次の2点です。
  • HelloWorldViewController.hに次のプロパティができている
#import <UIKit/UIKit.h>

@interface HelloWorldViewController : UIViewController
@property (weak, nonatomic) IBOutlet UITextField *txtName;
@property (weak, nonatomic) IBOutlet UILabel *lblMessage;
- (IBAction)createMessage:(id)sender;

@end
  • HelloWorldViewController.mファイルのviewDidUnloadメソッドで各プロパティにnilが代入されていること
- (void)viewDidUnload
{
    [self setTxtName:nil];
    [self setLblMessage:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}