*

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アドセンス




関連記事

Objective-C(Xcode)でイメージのアニメーション表示を行う。

「Xcode5でイメージ(画像)を表示&操作する」では画面に表示されているイメージをタップし

記事を読む

Xcode5でSchemeを利用する。[前編]

Xcode5の「Scheme」の作成方法や使い方のエントリーとなります。 思った以上に内容が多くな

記事を読む

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

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

記事を読む

no image

Xcode5のナビゲーションエリア[問題ナビゲータ]の使い方

Xcode5のナビゲーションエリアの使い方では、アプリ開発に最も不可欠は、プロジェクトとシンボルナビ

記事を読む

iOS(Xcode6)におけるマルチスレッド処理の実装方法[iOSのマルチスレッド処理の概要]

iOSにおけるマルチスレッド処理の実装方法を数回に分けて説明させていただきます。 開発環境のXco

記事を読む

Xcode&Objective-Cの文字列処理をユニットテスト(XCTestフレームワーク)で確認する。[NSStringを数値に変換する方法]

「Xcode&Objective-Cの文字列処理をユニットテスト(XCTestフレームワーク)で確認

記事を読む

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

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

記事を読む

Objective-Cでコールバック処理を@Selectorで実現する方法

最近はSwiftばっかり読み書きしていますが、既存のライブラリをカスタマイズして使うことも多いので

記事を読む

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

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

記事を読む

Xcodeの使い方[ツールバー]

Xcode5(iOS7対応バージョンの統合開発)の「ツールバー」の使い方のエントリーとなります。

記事を読む

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 ↑