ページ

2013-08-02

iOSアプリ開発事始08:iOSアプリ開発の第1歩!Objective-Cでプログラム入門の定番「Hello World!」表示プログラム

Xcodeについての概略も理解したことですし(?)、この辺りで定番の入門プログラムを作ってみましょう。そう、例の「Hello World!」です。いよいよiOSアプリ開発の第一歩、ワクワクが止まらないぜ!! …ということで、始まり始まり~っ。


プロジェクトの作成

  1. プロジェクトの新規作成

  2. Xcodeを起動。これをやらなければ何も始まりませんね。Xcodeを起動したら、通常、「Welcome to Xcode」が表示された「Xcode launches」画面が表示されます(画面下の「Show this window when Xcode launches」のチェックが外れていると表示されません)。ここで「Create a new Xcode project」ボタンをクリックします。起動画面が表示されていない場合には、「shift+cmd+N」かメニューバーの「File」→「New」→「project」で同様に新規プロジェクト画面が表示されます。


  3. テンプレートを選択
  4. Choose a template for your new project」という新規プロジェクト作成用のテンプレートをチョイスするダイアログが表示されます。複数のテンプレートが並んでいる中から、今回は最も基本的なテンプレート「Single View Application」を選んで「Next」ボタンをクリックします。


  5. プロジェクト情報を入力
  6. Choose options for your new project」という新規プロジェクトの情報を入力するダイアログが表示されます。プロジェクト名、作者名などの基本情報を入力します。「Campany Identifier」はAppleDeveloperとしてのドメイン名を逆順にした識別子(例: net.life-gp)を入力するのが普通のようです。AppleDeveloperに未加入の場合や、この欄の意味がわからなければ、デフォルトのcom.yourcompanyのままで。入力指定が終わったら、最後に「Next」ボタンをクリックします。

    ・Product Name:Hello World!
    ・Organization Name:(自分の名前をアルファベット小文字で入力)
    ・Campany Identifier:(ドメインを逆順にした識別子(例: net.life-gp))
    ・ClassPrefix:Hello
    ・Device Family:iPhone
    ・Use Storyboards:(チェックを入れる)
    ・Use Automatic Reference Counting:(チェックを入れる)
    ・Include Unit Tests:(チェックなしのままでOK)


  7. 新規作成プロジェクトを保存
  8. 新しく作成したプロジェクトを保存するファインダーが表示されたら、保存場所(ここでは「書類」を選択)を指定して「Create」ボタンをクリックします。その際、「Create local git repository for this project」のチェックを外しておきます。これにチェックを入れておくと、XcodeからGitHubのリポジトリを使うことができるようになります。まだ、今はその段階ではないので、ここはチェックを外して「Create」ボタンをクリックです。


  9. 作成したプロジェクト画面
  10. Create」ボタンをクリックすると、作成されたプロジェクトのワーク画面が表示されます。新しいプロジェクト「Hello World!」のワークスペースができました。この画面で色々な設定やプログラムのコマンド入力やらを行ないます。


  11. iOSシュミレータを動かしてみる
  12. このままの状態でiPhone Simulatorを動かしてみましょう。画面左上にある「RUN」コマンドをクリックしてみましょう。


  13. 真っ白な画面を表示
  14. 左上の「Run」コマンドボタンをクリックすると、iPhoneシミュレータが起動して真っ白な画面を表示します。何も表示されてないですが、何もプログラムを作成していないので当たり前です。今は入れ物の"箱"を作っただけの段階です。さて、ここからが今回のお題の「Hello World!」表示プログラム作成の本題です。


  15. 「ViewController.m」を選んでプログラムを表示
  16. Xcodeのワーク画面に戻って、画面左サイドのファイル情報(ナビゲーター・エリア)に表示されている「ViewController.m」を選んでプログラムを表示します。今回はプロジェクト情報を入力する際に「ClassPrefix」に「Hello」を入力しているので、ファイル名の頭に「Hello」をつけて「HelloViewController.m」と表示されているやつをクリックします。


  17. エディタ・エリアにプログラムを表示
  18. HelloViewController.m」を選択すると、エディタ・エリアにプログラムが表示されます。


  19. プログラムの中身を見てみましょう
  20. @(あっとマーク)」ばかりが目立つ、何やら見慣れないプログラムが表示されていますね。「viewDidLoad」というのも何やら目に付きますね。この「viewDidLoad」というのは、このプログラムのviewが読み込まれた(DidLoadされた)時に、そのあとの括弧{ }の中の命令を実行しろということです。「[super viewDidLoad];」の後の行をみると、緑色の文言が書かれています。「//」が先頭にありますね。これはコメント行です。現在は実行すべきプログラムが書かれていない状態です。


  21. プログラムを記述
  22. 上の図の「[super viewDidLoad];」の下に以下のプログラムを記述します。「//」が先頭にある緑色の文字はコメント行です。何が書かれているか分かりやすくするために記したものなので、このコメント行はプログラムに書かなくってもプログラムは動きます。
    以下のプログラムでは色やフォント、フォントサイズなどの装飾も設定しています。画面の中央に「Hello WORLD!」の文字を表示するだけなら、コメント行「ラベルの設置」「テキストの設定」テキストの画面表示位置の設定」「ラベルをビューに追加」の4項目を記述すればOKです。
        // 今回追加したプログラム
        // ラベルの設置
        UILabel *label = [[UILabel alloc] init];
        // テキストを設定
        label.text = @"Hello WORLD!";
        // テキストのフォントを設定
        label.font = [UIFont fontWithName:@"Helvetica" size:24];
        // テキストの色を設定
        label.textColor = [UIColor orangeColor];
        // テキストに影を付ける設定
        label.shadowColor = [UIColor grayColor];
        label.shadowOffset = CGSizeMake(2, 2);
        // テキストの画面表示位置を設定
        [label sizeToFit];
        label.center = self.view.center;
        // ラベルをビューに追加
        [self.view addSubview:label];
        // 追加行はここまで
    

  23. コード・エディタをみるとこんな感じ
  24. 実際にコード・エディタに記述した画面が下図です。


  25. 「RUN」コマンドで動かしてみる
  26. iOSシュミレータを「RUN」コマンドで起動してみましょう。


    「RUN」コマンドをクリックした際に以下の「Stop "Hello World!"?」ダイアログが表示されたら「Stop」ボタンをクリックします。先ほどの白い画面を表示したシュミレータが起動中だということです。


  27. 「Hello World!」の文字が画面中央に
  28. 今度は白い画面でなく、iPhone シュミレータ画面の中央に「Hello WORLD!」の文字が表示されましたね。「Hello WORLD!」の文字は指定通りにオレンジにグレーの影つき文字になっています。

無事に「Hello World!」の文字を表示することができました。記述されているプログラムもコメント行を読みながら眺めると、何やら意味が読み取れますね。今回はここまでです。


関連記事 -iOSアプリ開発事始

NewsSource

0 件のコメント:

コメントを投稿