中学生からわかるiPhoneアプリ開発入門。中学生からわかるiPhoneアプリ開発入門。中学生からわかるiPhoneアプリ開発入門。awesomeAボタンとラベルがあるアプリを作ってみよう!@akio0911です。iPhoneレッスンノート」を執筆(共著)したり、アプリクリエイターにインタビューするポッドキャスト「ハイパーアプリクリエイターズ」を制作・配信したりしています。拡張現実ライフというブログを運営しているブロガーでもあります。中学生からわかるiPhoneアプリ開発入門。第1回の記事はこちら→中学生からわかるiPhoneアプリ開発入門。今回は、アプリの画面にボタンとラベルを配置します。見た目を作っていくわけです。はじめましょう!Xcode4の起動まずはXcode4を起動します。前回の記事でDockにXcodeのアイコンを追加した方は、DockにあるXcodeのアイコンをクリックして下さい。Dockに追加していない方は、ぜひこの機会に追加してしまいましょう。DockにあるFinderのアイコンをクリックします。Finderのウィンドウが開きます。Finderのメニューの「移動」をクリックしてから、「コンピュータ」をクリックします。HD]→[Developer]→[Applications]と開いていき、[Xcode.app]をDockにドラッグ&ドロップします。以上の操作でXcodeがDockに追加され、すぐに起動できるようになります。プロジェクトの作成まずはXcodeのプロジェクトを作成していきます。プロジェクトとはXcodeで扱うもので、基本的には1つのアプリにつき1つのプロジェクトを作成する必要があります。project」をクリックします。テンプレートの選択ウィンドウが表示されます。Xcodeにはプロジェクトのテンプレートがいくつか用意されており、これらのテンプレートを使うことによって、アプリを素早く作成することができます。左側のバーから[iOS]の[Application]をクリックします。Application]をクリックして、[Next]ボタンをクリックします。Storyboard]にチェックを入れます。Storyboardとは?StoryboardはXcode4.2にて追加された機能です。Storyboardを使うと、画面間の遷移の流れをマウス操作だけで設定することができます。Storyboardを使って作ったアプリはiOS5でしか動作しないので、注意が必要です。Tests]のチェックをオフにしたら、[Next]ボタンをクリックします。Counting)とは?iOSアプリ開発では、メモリ管理という難解な作業をアプリ開発者が行う必要があります。Xcode4.2から使えるようになったARCを利用すると、メモリ管理を簡略化することができます。プロジェクトの保存先を聞かれます。ここでは、デスクトップを保存先に指定してみました。Control]のチェックをオフにして、[Create]ボタンをクリックします。Controlを使うと、作成したアプリのファイルを複数人で共有して作業したり、作成しているアプリを昨日や1週間前の状態に戻すこと(バージョン管理)ができます。今回は使わないのでオフにしています。作成したプロジェクトのウィンドウが表示されます。今回はテンプレートからプロジェクトを作成したので、実はこの状態でいきなりアプリを実行することができます。Xcodeでアプリを実行する時には、シミュレータで実行するのか、実機で実行するのかを選択できるようになっています。ここでは、シミュレータで実行されるように設定しましょう。Simulator]になっていることを確認します。4]などと表示されている場合は、下図の赤枠で囲まれている部分をクリックします。Simulator]をクリックします。これで、アプリがシミュレータで実行されるように設定できました。[Run]ボタンをクリックします。iOSシミュレータが起動し、真っ白な画面のアプリが起動します。画面が真っ白とはいえ、アプリを動かすことができました!アプリの実行を終了させるアプリの実行を停止するには、Xcodeのツールバーにある[Stop]ボタンをクリックします。iOSシミュレータの終了Xcodeでアプリを終了させただけだと、iOSシミュレータは起動した状態で残ります。シミュレータを終了させるには、iOSシミュレータのメニューから[iOSシミュレータ]をクリックして、[iOSシミュレータを終了]をクリックします。これでiOSシミュレータが終了します。Storyboardを表示するさて、先ほど説明したStoryboard機能を使って、画面のデザインをいじっていきましょう。navigator)から[MainStoryboard.storyboard]をクリックします。すると、Xcodeウィンドウの中央に画面デザインが表示されます。これがStoryboardです。Outline]を表示しておくと、部品の階層構造や選択状況などが分かるので便利です。Outline]を表示するには、Storyboard領域の左下にある三角形のボタンをクリックします。Outline]が表示されます。隠すには、三角形のボタンをもう1回クリックです。Airなど画面の狭いMacを使っていると、Storyboardの表示領域が狭くて見づらいかもしれません。Area]・[Utilities]という領域があり、これらは必要に応じて表示・非表示を切り替えることができます。その方法を覚えましょう。Navigator]ボタンをクリックします。1回クリックすると、再表示されます。area]ボタンをクリックします。1回クリックすると、再表示されます。Utilities]ボタンをクリックします。1回クリックすると、再表示されます。Area]・[Utilities]をすべて非表示にすると、Storyboardの表示領域がかなり広くなります。行う作業に応じて表示・非表示を切り替えていくようにしましょう。画面の色を変更するStoryboardの領域を広くしたところで、まずは画面の色を変更してみましょう。inspector]を使います。inspector]を表示します。Storyboard内で画面の白い部分をクリックしましょう。Outline]の中で[View]が選択されていることを確認します。Controller]と呼ばれる別の領域が選択されてしまうので注意しましょう。inspector]内の[Background]をクリックします。[Colors]という小さなウィンドウが開くので、丸い領域をクリックして色合いを指定し、縦長のバーの領域をドラッグして明るさを指定しましょう。画面の色が変わるので、閉じるボタン(赤いボタン)をクリックして[Colors]ウィンドウを閉じましょう。これで画面の色の設定は終了です。ボタンを配置する次にボタンを画面に配置してみましょう。library]をクリックしてください。画面に配置できる部品の一覧が表示されます。一覧の表示形式を選択できるので、[IconView]ボタンをクリックして下さい。一覧の中に白いボタンのアイコンがあるので、これを画面へドラッグします。画面にボタンが配置されました。ボタンの文字を設定しましょう。ボタンをダブルクリックすると入力可能な状態になるので、ボタンの名前を入力してから、キーボードの[return]キーを押しましょう。ボタンの名前が変更されたのが確認できると思います。ラベルを配置するラベルを画面に配置してみましょう。ラベルとは、画面に文字を表示するための部品です。library]の部品一覧からラベルを見つけて、画面へドラッグします。画面にラベルが配置されました。ラベルをダブルクリックすると入力可能な状態になるので、ラベルの名前を入力してから、キーボードの[return]キーを押しましょう。ここでは「Menu」と入力します。ラベルの名前が変更されたのが確認できると思います。部品のレイアウトを調整する配置したボタンやラベルのレイアウトを調整してみましょう。位置を変更するボタンやラベルをドラッグすると、画面内で位置を変更することができます。画面の端や他の部品の近くに移動すると青いガイドラインが自動で表示されるので、これをうまく利用して位置をキレイに調整してみましょう。サイズを変更するボタンのサイズを変更してみましょう。ボタンをクリックすると、ボタンの周りに水色の小さな丸が8つ表示されます。水色の小さな丸をドラッグすると、ボタンの大きさを変更することができます。ラベルのサイズも同じように変更できます。アプリを実行するここでアプリを実行してみましょう。Xcodeのツールバーにある[Run]ボタンをクリックです。iOSシミュレータが起動し、Storyboardでデザインした画面が表示されます。まとめいかがでしたでしょうか?Storyboardを使ってボタンやラベルを配置し、それをiOSシミュレータの中で動かすことができました。次回はStoryboardの他の機能を使って、ミニ写真集的なアプリを作っていきます。4対応版】という書籍を参考にしてみて下さい。配置方法や見た目のカスタマイズ方法について、部品ごとに画面写真付きで詳しく解説されています。拡張現実ライフ筆者プロフィールTwitterアカウントは@akio0911。iPhoneレッスンノート」の執筆(共著)、アプリクリエイターにインタビューするポッドキャスト「ハイパーアプリクリエイターズ」の配信、個人ブログ拡張現実ライフの運営など、アプリを中心に様々な活動をしています。