中学生からわかるiPhoneアプリ開発入門。第2回 。

ボタンとラベルがあるアプリを作ってみよう！

@akio0911です。

世田谷ものづくり学校の自由大学にてiPhoneアプリの作り方を学ぶ初心者向け講座「アプリクリエイター道場」を開講したり、iOSゲームアプリ開発の入門書「cocos2d for iPhoneレッスンノート」を執筆（共著）したり、アプリクリエイターにインタビューするポッドキャスト「ハイパーアプリクリエイターズ」を制作・配信したりしています。

また、拡張現実ライフというブログを運営しているブロガーでもあります。

さらに詳しいプロフィールはこちらの記事
→開発入門記事はすでに読まれましたか？講師 @akio0911 先生のご紹介。

中学生からわかるiPhoneアプリ開発入門。第2回です。

第1回の記事はこちら
→中学生からわかるiPhoneアプリ開発入門。第1回 。

今回は、アプリの画面にボタンとラベルを配置します。いよいよ見た目を作っていくわけです。早速はじめましょう！

Xcode4の起動

まずはXcode4を起動します。

前回の記事でDockにXcodeのアイコンを追加した方は、DockにあるXcodeのアイコンをクリックして下さい。

まだDockに追加していない方は、ぜひこの機会に追加してしまいましょう。

DockにあるFinderのアイコンをクリックします。

Finderのウィンドウが開きます。

Finderのメニューの「移動」をクリックしてから、「コンピュータ」をクリックします。

[Macintosh HD]→[Developer]→[Applications]と開いていき、[Xcode.app]をDockにドラッグ＆ドロップします。

以上の操作でXcodeがDockに追加され、すぐに起動できるようになります。

プロジェクトの作成

まずはXcodeのプロジェクトを作成していきます。プロジェクトとはXcodeで扱うもので、基本的には1つのアプリにつき1つのプロジェクトを作成する必要があります。

Xcodeを起動すると「Welcome to Xcode」というウィンドウが開くので、その中の「Create a new Xcode project」をクリックします。

テンプレートの選択ウィンドウが表示されます。

Xcodeにはプロジェクトのテンプレートがいくつか用意されており、これらのテンプレートを使うことによって、アプリを素早く作成することができます。

左側のバーから[iOS]の[Application]をクリックします。

テンプレートの中から[Single View Application]をクリックして、[Next]ボタンをクリックします。

プロジェクトのオプションを設定するウィンドウが表示されるので、[Product Name]に[SingleView]と入力し、[Device Family]で[iPhone]を選択し、[Use Storyboard]にチェックを入れます。

[Use Automatic Reference Counting]のチェックをオンにして、[Include Unit Tests]のチェックをオフにしたら、[Next]ボタンをクリックします。

プロジェクトの保存先を聞かれます。ここでは、デスクトップを保存先に指定してみました。

[Source Control]のチェックをオフにして、[Create]ボタンをクリックします。

アプリの実行

作成したプロジェクトのウィンドウが表示されます。

今回はテンプレートからプロジェクトを作成したので、実はこの状態でいきなりアプリを実行することができます。

Xcodeでアプリを実行する時には、シミュレータで実行するのか、実機で実行するのかを選択できるようになっています。

ここでは、シミュレータで実行されるように設定しましょう。
下図の赤枠で囲まれた部分が[iPhone 5.0 Simulator]になっていることを確認します。

もし[iPhone 5.0 Simulator]ではなく、[iPad 5.0 Simulator]や[xxxxx's iPhone 4]などと表示されている場合は、下図の赤枠で囲まれている部分をクリックします。

メニューが表示されるので、[iPhone 5.0 Simulator]をクリックします。

これで、アプリがシミュレータで実行されるように設定できました。

さて、いよいよアプリの実行です。[Run]ボタンをクリックします。

iOSシミュレータが起動し、真っ白な画面のアプリが起動します。

画面が真っ白とはいえ、アプリを動かすことができました！

アプリの実行を終了させる

アプリの実行を停止するには、Xcodeのツールバーにある[Stop]ボタンをクリックします。

iOSシミュレータの終了

Xcodeでアプリを終了させただけだと、iOSシミュレータは起動した状態で残ります。

シミュレータを終了させるには、iOSシミュレータのメニューから[iOSシミュレータ]をクリックして、[iOSシミュレータを終了]をクリックします。

これでiOSシミュレータが終了します。

Storyboardを表示する

さて、先ほど説明したStoryboard機能を使って、画面のデザインをいじっていきましょう。

Xcodeのウィンドウの左端にあるファイルの一覧(Project navigator)から[MainStoryboard.storyboard]をクリックします。

すると、Xcodeウィンドウの中央に画面デザインが表示されます。これがStoryboardです。

[Document Outline]の表示方法

Storyboardを使って画面をデザインしていくにあたって、[Document Outline]を表示しておくと、部品の階層構造や選択状況などが分かるので便利です。

[Document Outline]を表示するには、Storyboard領域の左下にある三角形のボタンをクリックします。

これで[Document Outline]が表示されます。隠すには、三角形のボタンをもう1回クリックです。

Storyboardの表示領域を広げる

MacBook Airなど画面の狭いMacを使っていると、Storyboardの表示領域が狭くて見づらいかもしれません。

Xcodeウィンドウには[Navigator]・[Debug Area]・[Utilities]という領域があり、これらは必要に応じて表示・非表示を切り替えることができます。まずはその方法を覚えましょう。

[Navigator]を非表示にするには、Xcodeのツールバーにある[Hide or show the Navigator]ボタンをクリックします。もう1回クリックすると、再表示されます。

[Debug Area]を非表示にするには、Xcodeのツールバーにある[Hide or show the Debug area]ボタンをクリックします。もう1回クリックすると、再表示されます。

[Utilities]を非表示にするには、Xcodeのツールバーにある[Hide or show the Utilities]ボタンをクリックします。もう1回クリックすると、再表示されます。

[Navigator]・[Debug Area]・[Utilities]をすべて非表示にすると、Storyboardの表示領域がかなり広くなります。行う作業に応じて表示・非表示を切り替えていくようにしましょう。

画面の色を変更する

Storyboardの領域を広くしたところで、まずは画面の色を変更してみましょう。

画面の色を変更するには、[Utilities]にある[Attributes inspector]を使います。

[Hide or show the Utilities]をクリックして[Utilities]を表示したら、[Show the Attributes inspector]をクリックして[Attributes inspector]を表示します。

Storyboard内で画面の白い部分をクリックしましょう。そして、[Document Outline]の中で[View]が選択されていることを確認します。

画面の白い部分ではなくステータスバーの部分をクリックしてしまうと[View Controller]と呼ばれる別の領域が選択されてしまうので注意しましょう。

[Attributes inspector]内の[Background]をクリックします。

[Colors]という小さなウィンドウが開くので、丸い領域をクリックして色合いを指定し、縦長のバーの領域をドラッグして明るさを指定しましょう。画面の色が変わるので、閉じるボタン（赤いボタン）をクリックして[Colors]ウィンドウを閉じましょう。

これで画面の色の設定は終了です。

ボタンを配置する

次にボタンを画面に配置してみましょう。

[Utilities]の[Object library]をクリックしてください。画面に配置できる部品の一覧が表示されます。一覧の表示形式を選択できるので、[IconView]ボタンをクリックして下さい。

一覧の中に白いボタンのアイコンがあるので、これを画面へドラッグします。

画面にボタンが配置されました。

ボタンの文字を設定しましょう。

ボタンをダブルクリックすると入力可能な状態になるので、ボタンの名前を入力してから、キーボードの[return]キーを押しましょう。ここでは[Photo 1]と入力します。

ボタンの名前が変更されたのが確認できると思います。

ラベルを配置する

ラベルを画面に配置してみましょう。ラベルとは、画面に文字を表示するための部品です。

[Object library]の部品一覧からラベルを見つけて、画面へドラッグします。

画面にラベルが配置されました。

ラベルをダブルクリックすると入力可能な状態になるので、ラベルの名前を入力してから、キーボードの[return]キーを押しましょう。ここでは「Menu」と入力します。

ラベルの名前が変更されたのが確認できると思います。

部品のレイアウトを調整する

配置したボタンやラベルのレイアウトを調整してみましょう。

位置を変更する

ボタンやラベルをドラッグすると、画面内で位置を変更することができます。
画面の端や他の部品の近くに移動すると青いガイドラインが自動で表示されるので、これをうまく利用して位置をキレイに調整してみましょう。

サイズを変更する

ボタンのサイズを変更してみましょう。

ボタンをクリックすると、ボタンの周りに水色の小さな丸が8つ表示されます。

水色の小さな丸をドラッグすると、ボタンの大きさを変更することができます。

ラベルのサイズも同じように変更できます。

アプリを実行する

ここでアプリを実行してみましょう。Xcodeのツールバーにある[Run]ボタンをクリックです。

iOSシミュレータが起動し、Storyboardでデザインした画面が表示されます。

まとめ

いかがでしたでしょうか？

Storyboardを使ってボタンやラベルを配置し、それをiOSシミュレータの中で動かすことができました。

次回はStoryboardの他の機能を使って、ミニ写真集的なアプリを作っていきます。お楽しみに！

ボタンやラベル以外の部品について知りたい方へ

iOSアプリ開発で利用出来る画面部品について詳しく知りたい方は、よくわかるiPhoneアプリ開発の教科書【Xcode 4対応版】という書籍を参考にしてみて下さい。

配置方法や見た目のカスタマイズ方法について、部品ごとに画面写真付きで詳しく解説されています。

関連 : Xcode4対応で死角なし！書評「よくわかるiPhoneアプリ開発の教科書【Xcode 4対応版】」 – 拡張現実ライフ

筆者プロフィール

Twitterアカウントは@akio0911。

iPhoneアプリの作り方を学ぶ初心者向け講座「アプリクリエイター道場」、iOSゲームアプリ開発の入門書「cocos2d for iPhoneレッスンノート」の執筆（共著）、アプリクリエイターにインタビューするポッドキャスト「ハイパーアプリクリエイターズ」の配信、個人ブログ拡張現実ライフの運営など、アプリを中心に様々な活動をしています。

さらに詳しいプロフィールはこちらの記事
→開発入門記事はすでに読まれましたか？講師 @akio0911 先生のご紹介。