簡単なプログラムを作る - storyboardの便利な使い方

今回は「Hello World」と呼ばれる簡単なiPhoneアプリを作成する。「Hello World」は、未経験者が最初に作成するプログラムとして一般的なものだ。難しい要素はないので、気軽にチャレンジしてほしい。

開発環境の準備

iPhoneアプリを作るためには、まず開発環境を準備する必要がある。前回説明したとおり、iPhoneアプリの開発は、Xcodeによって行う。Xcodeは、Mac App Storeから無料でダウンロード可能だ_※1。

※1 iPhoneアプリの開発には、Xcode をインストールできるMac OS Xが必要。

iPhoneアプリの開発環境は、プロジェクト(Project)と呼ばれるプログラムファイル群で構成される。プロジェクトを作成するには、アプリケーションからXcodeを起動し、「Create a new Xcode project」を選択。次の画面で、テンプレートとして「Single View Application」を選び、「Next」をクリックしてほしい。

続いて、プロジェクトファイルの名前を決める。ファイル名は英数字にする必要がある。ここでは仮に、Project Nameを「Hello World」とし、Organization NameとCompany Identifierは「STS」と入力しよう(名前は自由に決められる)。入力が終わったら、「Next」をクリックする。

最後に、ファイルの保存場所を指定する。ここでは仮に「デスクトップ」を指定しよう(自由に指定できる)。保存先を選択したら、「Create」をクリックしてほしい。

以上を終えると、プログラムを作成する画面が表示される。画面は複数のエリアで構成されており、右上のタブを切り替えることで自由に変更できる。

画面デザインの作成

さあ、ここからは、いよいよアプリを作成して行こう。

iPhoneアプリは、大きく2つの要素によって構成される。1つは画面で、もう1つはプログラムだ。したがって、iPhoneアプリを作成するうえでは、画面デザインとプログラミングの2つの作業が必要になる。

まずは、画面デザインの作成から始めよう。

1. ナビゲーターエリアにて、「MainStoryboard_iPhone.storyboard」を選択する。
2. エディタエリアでViewを一度クリックし、選択状態にする。
3. ライブラリペインのタブを切り替えて、「Object library」(左から3つ目)が表示されている状態にする。
4. インスペクタペインで「Round Rect Button」(角丸ボタン)を選択し、ドラッグで配置する。

同様にテキストボックスも配置する。ライブラリペインで「Text Field」を選択し、ドラッグで配置する。

続いてボタンに名前を付ける。先ほど画面に配置した「ボタン」を選択し、ユーティリティエリア上方のアイコン(左から4つ目)で、インスペクタペインを「Attributes Inspector」に切り替えたうえで、「Title」に文字「Hello」を入力する。

以上で、今回のHello Worldアプリで必要な画面は完成だ。

プログラムの作成

画面デザインは完成したが、まだアプリは動かない。ここからはアプリを動作させるために、配置したボタンやテキストボックスにプログラムを紐付ける。

まず、ナビゲーターエリアにて「 ViewController.h 」を選択してソースコードを表示し、次のように、{}を入力しよう。

@interface ViewController : UIViewController
{     //この行を追加
}     //この行を追加
@end

※2 「//」(コメント)を書くと、その行はプログラムとして動作しない。説明を記載するために使う。

次に「ボタン」のデザインとプログラムの紐付けを行う。

1. ユーティリティエリア上方にあるアイコンから「Assistant Editor」(Editorの左から2つ目)を選択したうえで、ナビゲーターエリアで「MainStoryboard_iPhone.storyboard」をクリックし、プログラムと画面デザインを両方表示させる。
2. エディタエリアの右画面にプログラム「 ViewController.h 」を表示させるため、エディタエリア上方のメニューを使ってファイルを選択する。
3. 「ボタン」をプログラムの｛｝内側にControl キーを押しながらドラッグすると_※3、「ボタン」用プログラム追加画面が表示されるので、ConnectionがOutletと記載されていることを確認し、名前(Name)に「hellobtn」(自由に決められる文字)を入力する。

※3 誤って{}の外にドラッグした場合は、エディタエリア右画面と左画面の両方で「メニュー」-「Edit」-「Undo」で戻してやり直す。

同様に「テキストボックス」のデザインも紐付ける。「テキストボックス」をプログラムの｛｝内側にControl キーを押しながらドラッグすると、テキストボックス用のプログラム追加画面が表示されるので、ConnectionがOutletと記載されていることを確認し、名前(Name)に「hellolbl」(自由に決められる文字)と入力する_※4。

※4 Strongの項目に関しては、strong、weakのどちらでもよい。

さらに、「ボタン」の動作とプログラムの紐付けを行う。方法はデザインとプログラムの紐付けと似ているが、今回はプログラムの｛｝内側ではなく、外側にControl を押しながらドラッグする。そこで表れる画面においてConnectionをOutletではなく、Actionに変更し、名前(Name)に「push_btn」(自由に決められる文字)を入力する。

最後にプログラム(処理)を記述する。ここでは、ボタンを押した際に文字列「Hello World」を表示させることにしよう。

ViewController.hからViewController.mに切り替えたうえで表示、「push_btn」の｛｝内側へ次のように(2、3行目)記述する。

- (IBAction)push_btn:(id)sender {
  //Hello World
  hellolbl.text = @"Hello World";
}

iPhoneアプリの実行

さあ、これでプログラムが完成した。左上がiPhoneシミュレーターとなっていることを確認し、三角ボタンを押して、プログラムを実行しよう。

iPhoneシミュレーターにて作成したiPhoneアプリ画面が表示される。ボタンを押して、テキストボックスに「Hello World」が表示されたら成功だ。

これで、最初のiPhoneアプリの完成である。ボタンを押したら文字列が表示されるだけの単純なものではあるが、グラフィカルな開発環境で簡単にアプリを作れることがご理解いただけたと思う。おそらく、「プログラミング」という言葉から皆さんがイメージする内容よりも簡単だったのではなかろうか。

次回から徐々にアプリの内容を高度にしていこう。

執筆者紹介

福島 賢治(FUKUSHIMA Kenji)

株式会社システムサポート 大阪支店 ビジネス推進課所属。コンシューマ向けゲーム会社を経て、現職。組み込み開発、Web開発やインフラ構築などに携わり、iOS系では自社アプリ「猫と学ぶ旅行英語 Lite(e-messe kanazawa 2011優良企画案賞)」の企画・開発にも携わる。

現在は、自社アプリ「マッププランニング」の開発を担当。また、iPadアプリ作成をテーマとした高校生向け教材も作成し、2012年関西大学高等部、2013年岸和田高校へ提供した。