第1回: Hello World



はじめに

iPhoneアプリ、自分でつくれたら面白そうだって思いませんか?でも最初から本格的なアプリを開発するのは大変です。まずはシンプルなアプリを作ってみましょう。本サイトでは、XCode4.2+iOS5.0以降を使っていることを前提とします。プログラム経験がなくても理解できるように努めますが、C言語の基本までは解説しませんのでご容赦ください。

前提条件

以下の条件を満たしている人を対象とします。

  • MacOSX10.6以降を搭載したMacを所有していること
  • Xcode4.2のインストールが完了していること
  • 半角スペースと全角スペースの違いを理解していること
  • iPhoneを愛していること

以下の条件を満たしていなくてもなんとかなります。

  • CやObjective-Cの知識
  • iPhoneの実機

1. NSLogでHelloWorld

NSLogは、Cのprintf、PHPのecho、JavaのSystem.out.printlnのように使える関数です。

ステップ1. プロジェクトを作る

XCodeを起動して、File > New > New Project から”Empty Application”を選択し新しいプロジェクトをすると、必要最低限の要素しか含まれていないアプリケーションが生成されます。

  1. “Empty Application”を選択
  2. プロジェクトの情報を入力しNextをクリック
    以下のように設定して下さい。

    • Product Name: HelloWorld
    • Campany Identifier: ドメインを逆順にした識別子(例: jp.php6)
    • ClassPrefix: Hello
    • Device Family: iPhone
    • Use Core Data: チェックを外す
    • Use Automatic Reference Counting: チェックする
    • Include Unit Tests: チェックを外す

    イメージ

  3. 保存先を指定してプロジェクトを作成
    書類などの中に保存して下さい。

ステップ2. ソースコードを編集

HelloAppDelegateを書き換えます。
編集前

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
return YES;
}

編集後

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.window.backgroundColor = [UIColor whiteColor];

NSLog(@"Hello World");//この行を追加

[self.window makeKeyAndVisible];
return YES;
}

スクリーンショット

左側にファイルの一覧が表示されているので、HelloAppDelegateを選択します。そうすると右側のウィンドウにソースコードが表示されるので、その中の該当部分にNSLog(@”Hello World”);を追加します。

ステップ3. 実行する

XCodeの左上のRunボタンをクリックすると、iPhoneシミュレータが起動して真っ白な画面が表示されます。Hello WorldはiPhoneシミュレータには表示されませんが心配しないでください。

コンソール
“Hello World”というメッセージは、Xcodeのコンソールに表示されています。スクリーンショット下部の赤枠で囲った領域です。この領域が表示されていなければ、右上のViewの真ん中のボタンをクリックしてください。

ポイント

  • Empty Projectで空のアプリケーションを作成できる。
  • アプリを起動すると「- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions」が実行される。
  • NSLogを使うとコンソールに結果を出力できる。
  • 文字列はダブルクオーテーションで囲んで先頭に@をつける。Hello World → @”Hello World”

2. UILabelでHello World

1のNSLogでHelloWorldではコンソールにメッセージを出力しましたが、さすがにこれではアプリとは言えません。UILabelでHello Worldでは、iPhoneの画面にメッセージを表示してみましょう。

先ほどのプロジェクトの***AppDelegate.mで、1で書き換えた関数を以下のように書き換えてください。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.window.backgroundColor = [UIColor whiteColor];

UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(20.0f, 100.0f, 280.0f, 100.f)];
label.text = @"Hello World!";
[self.window addSubview:label];

[self.window makeKeyAndVisible];
return YES;
}

スクリーンショット
iPhoneの画面に”Hello World!”と表示されました。たった3行でiPhoneにメッセージを表示できました!

解説

  • UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(20.0f, 100.0f, 280.0f, 100.f)];
    位置とサイズを指定してUILabelを作成しています。initWithFrameの引数は順にx座標、y座標、幅、高さです。
  • label.text = @”Hello World!”;
    ラベルにメッセージを指定します。
  • [self.window addSubview:label];
    ラベルを画面に貼り付けます。

課題

課題を解いて理解を深めましょう。

  1. 自分の好きなメッセージを表示してください。
    ヒント: @”Hello World”を書き換えればよさそうですね。
  2. 3つのメッセージを表示してください。
    ヒント: 追加した3行をコピペしてもうまく動きません。変数名”label”を”label1″, “label2”, “label3″などに変更してみましょう。
    ヒント: CGRectMakeの中の値を変更すると、表示する場所が代わります。
  3. 文字を大きくしてください。
    ヒント: [label setFont: [UIFont fontWithName: label.font.fontName size: ????]];

まとめ

NSLogでのコンソールへのメッセージ表示、UILabelを使ってiPhoneの画面へのメッセージ表示ができました。基本的な内容ですがどんなアプリでも必ずといっていいほど使う内容です。実際に手を動かして理解を深めることが上達への近道です。

次回予告

UIViewControllerを使って、iPhoneの回転に対応します。また、UINavigationViewを使った画面遷移も紹介する予定です。公開は11月23日(水)を予定しています。


Comments

comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です