*

Xcode5のEmpty Application templateでStoryboardを利用する。

公開日: : 最終更新日:2014/04/04 Objective-C ,


スポンサードリンク



Xcode5のEmpty Application templateでStoryboardを利用する方法に関するエントリーです、
基本的には
Start Developing iOS Apps Todayの「Tutorial: Basics」を読みながらの試行錯誤の内容となります。

Storyboardを利用したアプリ開発を行うためには、
プロジェクト作成時にStoryboardが組み込まれたテンプレートを選択すれば済むのですが、
Storyboardの仕組みを知る上では有効であると思います。

対象プロジェクトの作成

アプリ開発を行うためのプロジェクトをまずは作成します。
Empty Application templateを指定して
Project NameにToDoList、Company Identifierにcom.exampleを指定しプロジェクトを作成してください。

Storyboardの作成

ナビゲーションセレクターバーをクリックします。
(デフォルトで選択状態ですが)
スクリーンショット 2013-12-17 15.16.29

プロジェクトのルートを選択し、マウスを右クリックします。
スクリーンショット 2013-12-17 15.22.35

すると以下のメニューが表示されますので、「New File…」をクリックします。
スクリーンショット 2013-12-17 15.22.52

ファイルの作成画面が表示されますので、iOSのUser InterfaceのStoryboardを選択し、「Next」ボタンをクリックします。
スクリーンショット 2013-12-17 15.26.09

次の画面は何も変更せずに「Next」ボタンをクリックします。
スクリーンショット 2013-12-17 15.28.57

次の画面の「Save as:」の欄にはMainと入力後に「Create」ボタンをクリックします。
スクリーンショット 2013-12-17 15.29.54

Main.storyboardが作成できました、
スクリーンショット 2013-12-17 15.33.52

作成したStoryboardをMain interfaceに設定

ToDoListアプリのメインインターフェースに作成したMain.storyboardを設定します。
Xcodeでは、複数のStoryboardでGUIや画面遷移を構成できます。メインインターフェースがデフォルトのStoryboardと考えてください。

プロジェクトのルートを選択します。
スクリーンショット 2013-12-17 15.22.35

エディタエリアの「Deployment Info」の「Main Interface」でMain.storyboardを選択します。
スクリーンショット 2013-12-17 15.45.59

Storyboardへのシーン追加

View Controllerの追加

まずはView Controllerを追加します。

ナビゲーションエリアのMain.storyboardをクリックしエディタエリアに表示します。
スクリーンショット 2013-12-17 15.52.06

なお、クリックではなくダブルクリックするとMain.storyboardを別画面で開くことが可能です。
Main.storyboardを表示したときにソースコードが表示される場合は、
下記画像の赤枠の部分をクリックして表示モードを変更してください。
スクリーンショット 2013-12-17 15.58.20

ユーティリティエリアのオブジェクトライブラリ(青い立体)を選択後に「View Controller」をキャンバスにドラッグします。
スクリーンショット 2013-12-17 16.02.58

なお、ユーティリティエリアが非表示になっている場合は
View > Utilities > Show Utilities
で表示可能です。
スクリーンショット 2013-12-17 16.09.23

Labelの追加

Labelを追加します。
スクリーンショット 2013-12-17 16.13.15

Labelをダブルクリックしてテキストを「Hello, World!」に変更します。
スクリーンショット 2013-12-17 16.16.22

作成したアプリの実行

早速実行してみたのですが、真っ白です。
スクリーンショット 2013-12-17 16.17.55

Empty Application templateの動きのままですね。
AppDelegate.mを変更するのを忘れてました。
アプリ起動時には「application:didFinishLaunchingWithOptions:」が呼び出され、ここでWindowの作成等を行っています。

変更前のdidFinishLaunchingWithOptions

self.windowの処理を除去してMain.storyboardに処理を委譲します。
変更後のdidFinishLaunchingWithOptions

修正後の実行結果は以下のようになりました。
スクリーンショット 2013-12-17 16.25.46

これでStoryboardを利用したアプリ開発が行えるようになりました。
「Xcode5のEmpty Application templateでStoryboardを利用する。」のエントリーは以上です。

他にもXcode5に関するエントリーがございますので、「Xcode5の使い方」
もしくは、ページ右側にある「カテゴリー」の「Objective-C」
もしくは、ページ上部にあるタブメニューの「Objective-C」をクリックしていただければ、
何らかお役に立てる情報があるかも知れません。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcode5でイメージ(画像)を表示&操作する[後編]

Xcodeでアプリ開発を行う時に、イメージ(画像)の表示とイメージ操作時のイベント処理は必須とまでは

記事を読む

Xcode&Objective-Cの文字列処理をユニットテスト(XCTestフレームワーク)で確認する。[NSStringの定義、分割、検索]

文字列の処理、操作は、どの言語でプログラムを作成するにしても重要で欠かせないものです。 Obj

記事を読む

Xcode5の「Auto Layout」機能の使い方[制約の編集方法]

Xcode5の「Auto Layout」機能の使い方と Xcode5の「Auto Layout

記事を読む

Xcode5のナビゲーションエリア[プロジェクト、シンボル、検索]の使い方

Objective-Cでコーディングを行うための統合開発環境のXcodeの利用方法のエントリーです。

記事を読む

Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[前編:モックの作成]

iPhoneアプリの画面遷移と言えば、真っ先に挙がるのが「ナビゲーションコントローラ」なのですが

記事を読む

Xcode5で画面コンポーネント(UIコンポーネント)配置して利用するための基本

iOSアプリケーションは当然ですが、画面がありますよね。 言わずもがなですが、iOS向けのアプ

記事を読む

Xcode5でUnitTest(XCTestフレームワーク)を利用してみる。

Xcode5(iOS7対応バージョンの統合開発)を利用するので、当然言語はObjective-Cです

記事を読む

Xcode6&Objective-Cにおけるブロック構文(Blocks記法)の利用方法

Xcode&Objective-CにおけるBlock構文の説明のエントリーとなります。 B

記事を読む

Xcode5のプロジェクトへのファイルやフォルダの追加方法

Xcodeでアプリ開発を行う時に、イメージ(画像)の表示は必須な処理であると言えます。 本エントリ

記事を読む

Xcodeのユーティリティエリアの使い方[ストーリーボード表示時の「Attributes」,「Size」,「Connections」Inspector]

本エントリーでは、「Xcodeのユーティリティエリアの使い方」に引き続き、「ストーリーボード」表示時

記事を読む

Message

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

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑