*

Xcodeのユーティリティエリアの使い方[ストーリーボード表示時の「File」,「Quick Help」,「Identity」]

公開日: : 最終更新日:2014/06/11 Objective-C


スポンサードリンク



本エントリーでは、「Xcodeのユーティリティエリアの使い方[ソースファイル表示時]」に引き続き、「ストーリーボード」表示時の「ユーティリティエリア」の使い方を説明させていただきます。

利用しているXcodeはXcode5(5.1.1)となります。
ちなみに昨日アップデートしました。

1 前回の復習

ユーティリティエリアの構成

ユーティリティエリアは大別すると2つの部分から構成されています。

  • Inspector pane(インスペクタ パネ)
  • Library pane(ライブラリ パネ)

スクリーンショット 2014-05-27 12.04.32

Inspector bar(インスペクタセレクタバー)に表示されるボタンは、
エディタエリアに実装ファイルやヘッダーファイルが表示されている時と、
ストーリーボードが表示されている時では異なります。

Library bar(ライブラリセレクタバー)はどちらが表示されていても同じ内容が表示されます。

「Library bar」とエディタエリアに実装ファイルやヘッダーファイルが表示されている時の
「ユーティリティエリア」の使い方については前回のエントリーをご覧ください。

2 ストーリーボード表示時のユーティリティエリアの使い方

ストーリーボード表示時のInspector paneの表示項目

ストーリーボード表示時のInspector bar(インスペクタセレクタバー)に表示されるボタンは、以下のようになります。
スクリーンショット 2014-05-31 16.12.30

以降では、上記画像の「File」、「Quick Help」、「Identity」
の各Inspectorを説明させていただきます。
「Attribute」、「Size」、「Connection」は次回とさせていただきます。

File Inspector

Identity And Type

「Identity And Type」に関しては、エディタエリアに実装ファイルやヘッダーファイルが表示されている時
と同じ内容が表示されていますので、前回のエントリーをご覧下さい。

唯一異なるのが、Locationが変更不可になっていることだけです。

interface builder document

・Opens in

どのバージョンのXcodeで開くファイルにするかを指定します。
スクリーンショット 2014-05-31 17.55.45

「Xcode 4.6」を選択すると以下の様な画面が表示されます。
スクリーンショット 2014-05-31 17.57.18

「Xcode 4.6」形式のファイルに変換するかどうかの確認画面です。
変換してしまうと、Xcode5系では開けなくなりますので注意してください。

・Builds for
「Builds for」では以下の値が選択可能です。
スクリーンショット 2014-05-31 18.01.40

「iOS 6.1 and Later」を選択すると「View as」項目で「iOS 6.1 and Earlier」が選択可能になります。

・View as
「View as」では以下の値が選択可能です。
また、この値を変更するとストーリボードの画面自体も、選択したiOS用の画面に表示が切り替わります。
スクリーンショット 2014-05-31 18.07.01

「Builds for」の欄でも記載しましたが、「Builds for」で「iOS 6.1 and Later」等の「iOS 6.1 and Earlier」に対応した値を選択していない場合は、iOS 6.1 and Earlier」はグレーアウトされ選択できません。
スクリーンショット 2014-05-31 18.10.35

複数のバージョンのiOSに対応するためには、「View as」で画面を切り替えながら、
画面コンポーネントのサイズや位置を調整し、対応するiOS全てで画面が正常に表示されるようにする必要があります。

iOS7.0 and LaterとiOS7.0 and Laterの時の画面
スクリーンショット 2014-05-31 18.14.51

iOS5.1 and LaterとiOS6.1 and Earlierの時の画面
スクリーンショット 2014-05-31 18.15.02

・Use Auto Layout
オートレイアウトを利用する場合チェックします。
オートレイアウトに対応していないiOS(iOS 5以前)への後方互換が必要な場合は、必ずチェックを外してください。

オートレイアウトにつきましては、
「Xcode5でAuto Layout を利用する[基礎知識と制約(Align:アライメント)の設定方法]」に詳細な説明を記載しておりますので、是非ご覧ください。

・Global Tint
“Global Tint”は、ボタン等のタップ可能な画面コンポーネントの文字色となりますので、
アプリケーションのカラーイメージにあわせて、”Global Tint” を設定します。
デフォルトは青となっています。

localization

ストーリボードのローカライズに関する設定が行えます。
スクリーンショット 2014-05-31 18.38.10

設定を行いたい言語を追加するために、プロジェクトのルートを選択、表示される「+」ボタンをクリックします。
スクリーンショット 2014-05-31 19.52.41

追加する言語の選択肢が表示されますので、追加したい言語を選択します。
スクリーンショット 2014-05-31 19.59.58

とりあえずJapanese(ja)を選択してみます。
スクリーンショット 2014-05-31 20.02.31

すると以下の画面が表示されるので、なにも変更せずに「Finish」ボタンをクリックしてください。
(Main.storyboardに追加するので変更は不要)
スクリーンショット 2014-05-31 20.08.53

Japaneseが追加されました。
スクリーンショット 2014-05-31 21.15.21

「File Inspector」のlocalizationにもJapaneseが追加されました。
スクリーンショット 2014-05-31 21.17.27

各localizationの右側にある「localizable Strings」ですが、
Localizable.stringsで各言語のストーリボードに表示する文字列を切り替える設定となります。

ここをクリックすると以下のリストが表示されます。
スクリーンショット 2014-06-01 14.04.59

「Interface Builder Cocoa Touch Storyboard」を選択すると、各言語用のStoryboardが作成され、
各言語用のStoryboardにローカライズした文字列を埋め込んで行く作業が必要になりますので、
「localizable Strings」のまま多言語化を行うのが一般的です。

ローカライズの説明を始めると長くなりますので、本エントリーではここまでとさせていただきます。

ローカライズにつきましては以下のサイトが大変参考になります。
「XcodeでStoryboardをローカライズして自動でstringsをアップデート」

Target Membership

プロジェクト内に複数のターゲットが存在する場合で、かつ現在選択しているファイルを
他の任意のターゲットにも属させたい場合に、任意のターゲットにもチェックを入れます。
スクリーンショット 2014-05-31 21.21.01

Source Control

ソース管理に関する項目です。
ソース管理に関しては画像のみとさせていただきます。
スクリーンショット 2014-05-31 21.21.01

Quick Help

実装ファイルや、ヘッダーファイルで任意のクラスのクイックヘルプを表示する時と同じ事ができます。
異なるところは、画面コンポーネントを選択した時に「Quick Help」が表示されるとことです。

UIButton選択時の表示

スクリーンショット 2014-06-01 14.12.57

UIViewController選択時の表示

スクリーンショット 2014-06-01 14.13.22

Identity Inspector

「Identity Inspector」で表示され項目は、エディタ画面で選択している物によって変化します。
以下の画面がフルフル表示されている時の画面です。
スクリーンショット 2014-06-01 14.28.05

以下の表は、一般的な部品(「Layout Guide」、「First Responder」、「UIViewController」、「一般的な画面コンポーネント」)
毎の「Identity Inspector」で表示されるエリアを現しています。「表示」が表示されるエリアで、何も記載されていない=「非表示」となります。

「一般的な画面コンポーネント」の中にはたまに例外もありますのでご注意ください。

種別 Custom Class Identity User Defined

Runtime Attributes

Document Accesibility
Layout Guide 表示 表示 表示
First Responder 表示
UIViewController 表示 表示 表示 表示
一般的な画面コンポーネント 表示 表示 表示 表示 表示

 

Exitとセグエ選択時には何も表示されません。
スクリーンショット 2014-06-01 14.45.24

Custom Class

ボタンであれば既定値はUIButtonです。この既定値をUIButtonを継承したクラスに変更することにより
ボタンの動作を変更することが可能です。

Identity

ViewController選択時の画面項目は以下のようになります。
「Storyboard id」と「Restoration id」が指定可能です。
スクリーンショット 2014-06-01 16.21.31

それ以外の物を選択時の画面項目は以下のようになります。
「Restoration id」のみ指定可能です。
スクリーンショット 2014-06-01 16.22.48

「Restoration id」については以下のページが参考になります。
「アプリ終了時の画面を復元する処理を実装したい・・・」

User Defined Runtime Attributes

「User Defined Runtime Attributes 」を利用することで、独自に実装したクラスのプロパティを「Interface Builder」から設定することが可能になっています。

例えばHogeHogeViewControllerにcolorValueというプロパティが存在しているとします。
この時「User Defined Runtime Attributes 」で以下のように設定すると
HogeHogeViewControllerのcolorValueにRedが設定できます。
スクリーンショット 2014-06-01 16.34.28

なお、指定できるTypeは以下の通りです。
スクリーンショット 2014-06-01 16.39.51

この機能を利用すれば、単純な値を指定するようなObjective-Cのコードが削減できますが、
設定したプロパティの値は、initWithCoder:メソッドの実行後、awakeFromNibメソッド実行前に、セッターメソッドを介して設定されますので、このタイミングを考慮した利用方法を想定しておく必要があります。

Document

・Label
Labelに値を設定すると「Document Outline」に表示されるラベルを変更できます。

以下の画像の2つの赤枠が対応します。左の赤枠を含む領域が「Document Outline」です。
スクリーンショット 2014-06-01 17.54.48

Labelの値を”ビューです。”に変更してみました。すると画面は以下のように変わりました。
スクリーンショット 2014-06-01 18.04.20

・Label下のタグ
Finderでマスクをかけて表示を切り替えるためには、タグを選択する必要があります。
どうやってボタンをFinderで表示するか謎です。

・Object ID
選択しているオブジェクトを一意に識別できる値です。
先ほど出てきたLocalizable.stringsで、「Object ID」を指定して、ローカライズされた文字列を指定します。

・Lock
プロパティが変更できないようにロックをかける対象を指定します。

以下の値が選択可能です。
スクリーンショット 2014-06-01 18.34.03

各値の意味は以下の通りです。

  • inherited:上位の画面コンポーネントの値を継承する。
  • Nothing:ロックを行わない。
  • All Properties:全てのプロパティをロックする。
  • Localizable Properties:ローカライズ可能なプロパティのみロックする。
  • Non-Localizable Properties:ローカライズ不可能なプロパティのみロックする。

inheritedの補足ですが、画面(UIViewController)に貼られたボタン(UIButton)を例にすると、
画面のLock値がボタンにそのまま反映されることを意味します。

・Notes
画面項目は以下のようになっています。
スクリーンショット 2014-06-01 19.22.21

利用用途が不明です。いろいろ調べたり、試行錯誤してみたのですが、全く意味不明です。

StackOverflowに以下の様な記述がありました。
「What is the Inspector Notes section for in IB X Code 4」

実装者のためのノートですか・・・、それにしてはテキストの色、背景、フォントまで指定できるなんて・・・
ハイスペックすぎます。ってかオーバースペックです。

Accesibility

音声読み上げブラウザ等を考慮したアクセシビリティ対応を行う時に設定する項目です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

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

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

記事を読む

Xcode5の「Auto Layout」機能の使い方[Pin制約の設定方法]

「基礎知識と制約(Align:アライメント)の設定方法」に引き続き、「Auto Layout」に必要

記事を読む

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

前回は、NSStringの定義、分割、検索の各処理を確認しました。 二回目は、NSStringの比

記事を読む

Xcode&Objective-Cのまとめエントリー

エントリーもまずまず揃ってきたので、まとめのエントリーを作成しておこうと思います。 基本的には、各

記事を読む

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

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

記事を読む

Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[後編:データのやり取り]

では、セグエを利用した画面遷移を実装しました。 後編では、各画面間でデータのやり取りを行えるよ

記事を読む

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

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

記事を読む

Xcodeの使い方[エディタエリアのテキストエディタ]

「Xcodeの使い方」に引き続き「 Xcode5のエディタエリアの使い方[テキストエディタの使い方]

記事を読む

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

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

記事を読む

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

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

記事を読む

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 ↑