*

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

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


スポンサードリンク



「Xcodeの使い方[エディタエリアの環境設定]」に引き続き「 Xcode5のエディタエリアの使い方[テキストエディタの使い方]」となります。

Xcode5(iOS7対応バージョンのアプリケーション開発用の統合開発環境)のエディタエリアの説明をさせていただきます。

なんだかんだ言っても、アプリ開発時に最も良く利用するのがエディタエリアであることは衆目の一致するところです。

利用しているXcodeはXcode5(5.0.2)となります。

まずは、

Xcodeの使い方[エディタエリアのJump BarのThe related items menu]
Xcodeの使い方[エディタエリアの環境設定]
をご覧ください。

Xcodeの使い方[エディタエリアのJump BarのThe related items menu]では「Jump Bar」の「The related items menu」を扱いました。
Xcodeの使い方[エディタエリアの環境設定]では「Jump Bar」の「The related items menu」以外の部分、テキストエディタの各種設定を扱いました。

Xcode5のエディタエリアの説明 [後編]では、いよいよ「エディタエリア」のテキストエディタの利用方法を扱います。
繰り返しになりますが、アプリ開発時に最も長い時間、目線が置かれている所だと思います。

画面画像取得の為にMastarDetailテンプレートのプロジェクトを作成し、そのプロジェクトを利用しております。
(プロダクト名はMastarDetailAppとしています。)

本エントリーの内容は以下の通りです。

  1. 「テキストエディタ」の基本的な使い方
  2. 「テキストエディタ」の便利な使い方

 

1 「テキストエディタ」の基本的な使い方

基本的な利用方法は、他の統合開発環境(Eclipse、Visual Studio)と同じで、ファイルリストの任意のファイルをクリックするとその内容が表示されます。

一般的なソースファイルの表示

ナビゲーションエリアでプロジェクト作成時に生成されたAppDelegate.mファイルをクリックすると、エディタエリアにAppDelegate.mの内容が表示されます。
スクリーンショット 2014-02-26 14.26.57

.storyboardファイルの表示

Main.storyboardを実際に開いてみます。すると以下の様な画面が表示されます。
これもVisual Studio等と同様ですが、UIを管理するファイルを開いた時はグラフィカルな画面が表示されます。
なお、この画面は「Canvas」と呼ばれています。
スクリーンショット 2014-02-26 14.48.41

この画像の下部に数個ボタンが存在しています。

「Show Document outline」

まずは左下の「Show Document outline」です。現時点では右向きの矢印です。
スクリーンショット 2014-02-26 15.41.21

クリックするとボタン内部の矢印が左向きになり、Document outlineが表示されます。
スクリーンショット 2014-02-26 15.54.41

プロジェクトの新規生成時に作成されたControllerが3つ並んでいるだけですが、この領域で、各Controllerの配下の面表示用のコンポーネントの階層構造を確認することができます。

とりあえず全てのControllerとコンポーネントを開いてみます。
この様にコンポーネントの存在だけでなく親子の関係も確認できます。
スクリーンショット 2014-02-26 16.02.54

当然の機能ですが、Document outlineで選択したコンポーネントは、ストーリーボードのGUIでもハイライトされ、GUI上のどの部分に存在しているかも確認できます。
以下の画像は「Detail View Controller」-「View」-「Label」を選択した状態で取得した画面イメージです。
スクリーンショット 2014-02-26 16.08.16

上記画像で十分かとは思いますが、加工した画像は以下の通りです。
スクリーンショット 2014-02-26 16.08.16

再度「Show Document outline」ボタンをクリックすると「Document outline」は非表示となります。

「Form Factor」切り替えボタン

このボタンは1回毎に「Apply Retina 3.5 inch Form Factor」、「Apply Retina 4 inch Form Factor」と動作が切り替わります。
3.5インチ、4インチの両方のデバイス(iPhone)に対応させる場合はこのボタンをクリック後に、GUIコンポーネントの調整を行う必要があります。

逆の面から見ると、3.5インチ、4インチ両方のiPhoneのアプリ開発時にGUIコンポーネントの配置を意識できる開発環境となっていると言えると思います。

アンドロイドのアプリ開発時はなかなかそうは行きませんよね、だって画面サイズのバリエーションが多すぎて無理ですよね。今後iPhoneの画面も大きくなると私的には思っておりますので、その時にXcodeがどんな機能を提供するか楽しみです。

前置きが長くなりましたが、以下のボタンが表示されているときは、4インチ用のGUIを編集する画面です。
スクリーンショット 2014-02-26 16.50.17

以下のボタンが表示されているときは、3.5インチ用のGUIを編集する画面です。
スクリーンショット 2014-02-26 16.53.35

エディタエリアが4インチ用の編集画面の時
スクリーンショット 2014-02-26 16.57.01

エディタエリアが3.5インチ用の編集画面の時
スクリーンショット 2014-02-26 16.58.31

「Align」、「Pin」、「Resolve Auto Layout issues」、「Resizing BehaVior」

「Align」を含む下記画像の赤枠の部分のボタンはiOS6から導入された「Auto Layout」の各種設定にアクセスするメニューとなります。
スクリーンショット 2014-02-26 18.16.19

「Auto Layout」の詳細は別エントリーを作成しますので、このボタン群の説明は省略いたします。

「Zoom Out」、「toggle zoome」、「Zoom In」

「Zoom Out」は縮小表示を行うボタン
「toggle zoome」は1回毎に縮小表示と、拡大表示の処理がを行うボタン
「Zoom In」は拡大表示を行うボタン
となります。

以下の画像の赤枠部分の左から「Zoom Out」、「toggle zoome」、「Zoom In」ボタンとなります。
なお、表示しているCanvasは「Zoom Out」ボタンを1回クリックした状態となっております。
スクリーンショット 2014-02-26 18.36.16

2 「テキストエディタ」の便利な使い方

コード補完の利用

コード補完とは、利用者が入力した一部のコードから、何を入力しようとしているのかを類推し、類推したコードの一覧が表示される機能のことです。

一言に、コード補完と言っても、色々な動きがありますし、コード補完の設定によっても動作に差異が有ります。
コード補完の設定については、デフォルトのままの状態で以降の説明は記載させていただきます。

なお、コード補完の詳細な設定については、Xcodeの使い方[エディタエリアの環境設定]の「Code completion」をご覧ください。

コード補完の開始

コード入力中に自動的にコードの候補一覧が表示されます。
NSSとエディタエリアで入力します。すると以下の様なコード補完の一覧が表示されます。
スクリーンショット 2014-02-27 14.31.26

NSStringに上下のカーソル移動ボタンで移動、もしくはマウスのクリックでNSStringを選択し、「Return」ボタンをクリックしてください。この結果、エディタエリアには以下のようにNSStringが表示されるはずです。
スクリーンショット 2014-02-27 14.36.39

この状態でNSStringの直後にカーソルを移動した状態で、「option」+「Esc」ボタンを入力します。
すると以下の様ななコード補完の一覧が再度表示されます。
一旦入力が確定した状態からでも、再度コード補完一覧を表示することが可能です。
スクリーンショット 2014-02-27 14.39.00

 

コード補完候補の一部確定

「Tab」ボタンを入力することで、候補の絞り込みが行えます。
再度エディタエリアでNSSと入力してみます。するとNSSの直後に”tringとの文字列が灰色で表示されます。
これは、コード補完の開始時にも同じ事が起こっていたのですが・・・
スクリーンショット 2014-02-27 14.46.47

この状態で「Tab」ボタンを入力するとNSStringとの文字列がエディタエリアに表示されます。
という事で、Tab」ボタンは灰色で表示されている候補を確定する働きを果たします。

今の例では「Tab」ボタンの入力が1回で入力したいコードが確定できましたが、「Tab」ボタンを複数入力して、入力したいコードを確定することも可能です。

まずは「Tab」ボタンを複数入力できるようにコード補完機能に学習をしてもらいます。
エディタエリアでNSDiと入力してください。すると以下の様なコード補完一覧が表示されます。
スクリーンショット 2014-02-27 14.59.07

NSDiから始まるコードに対して、コード補完が示した第一候補はNSDictionaryとなっていますが、
NSDirectoryEnumerationSkipsHiddenFilesを選択して「Return」ボタンを入力してください。

再度、エディタエリアでNSDiと入力してください。すると以下の様なコード補完一覧が表示されます。
一目瞭然ですが、一覧でNSDirectoryEnumerationSkipsHiddenFilesが選ばれるようになりました。

本筋の話とは関係ないですが、一番始めにXcode5のコード補完の一覧が表示された時に選択されるデフォルトの選択肢が何になるかは不明ですが、この事実から学習機能があることは歴然(単純に前回選択したのを選択かも・・・)です。
スクリーンショット 2014-02-27 15.03.01

この状態で「Tab」ボタンを押してみます。
スクリーンショット 2014-02-27 15.20.23

するとエディタエリアにNSDirectoryEnumerationSkipsHiddenFilesが表示されると思ったのですが、
エディタエリアの文字列はNSDirectoryで後ろに灰色の文字列が表示されており、コード補完の一覧も表示されています。
スクリーンショット 2014-02-27 15.20.23

この動きがコード補完の絞り込み機能です。
「Tab」ボタンを入力し、その結果エディタエリアに表示される(黒文字+灰色文字)コードとコード補完が示した候補の一覧に同じ文字列で始まる候補が含まれる場合は、一致する文字列までがコード補完の結果として表示されます。

あーーー、またイマイチな日本語書いてもた、っていつもか・・・

実際にNSDiを入力後に「Tab」ボタンだけでNSDirectoryEnumerationSkipsHiddenFiles(黒文字)をエディタエリアに表示する手順を以下に記載いたします。

[手順1]
NSDiを普通に入力する。
[手順2]
コード補完の一覧(選択コードはNSDirectoryEnumerationSkipsHiddenFiles)、
エディタエリアの文字列はNSDi(黒文字)+rectoryEnumerationSkipsHiddenFiles(灰色文字)が表示される。
[手順3]
「Tab」ボタンを叩く
[手順4]
コード補完機能がエディタエリアに表示する文字列を考える、当然「Tab」叩かれたので出来るだけ長いコードを確定しようと考え、NSDirectoryで始まる候補が複数個あることに気付く
結果として、エディタエリアにはNSDirectory(黒文字)+EnumerationSkipsHiddenFiles(灰色文字)が表示され、コード補完の一覧(選択コードはNSDirectoryEnumerationSkipsHiddenFiles、NSDirectoryから開始するコードのみ表示)となる。
[手順5]
「Tab」ボタンを叩く
[手順6]
コード補完機能が考慮した結果、NSDirectoryEnumeration(黒文字)+SkipsHiddenFiles(灰色文字)がエディタエリアに表示される。
コード補完の一覧にもNSDirectoryEnumerationから開始するコードのみ表示される。
[手順7]
「Tab」ボタンを叩く
[手順8]
コード補完機能が考慮した結果、NSDirectoryEnumerationSkips(黒文字)+HiddenFiles(灰色文字)がエディタエリアに表示される。コード補完の一覧にもNSDirectoryEnumerationSkipsから開始するコードのみ表示される。
[手順9]
「Tab」ボタンを叩く
[手順10]
新しい候補の文字列を追加したら、もうこれ前方一致するコードが存在しないことにコード補完機能が気付きNSDirectoryEnumerationSkipsHiddenFilesエディタエリアに表示され、コード補完の一覧が非表示となる。

以上の様に「Tab」キーは、候補の絞り込みと候補の確定の両方を行うことが可能です。

コード補完候補の確定

  1. コードの候補一覧で確定したい結果の行に上下ボタン、もしくはマウス選択した後に「Return」キーを入力する。
  2. コードの候補一覧で確定したい結果の行をマウスでダブルクリックする。
  3. タブキーを入力した時点で、テキストエリアに表示されている文字列+新たに追加する候補の文字列で始まるコード候補が1つしかない時(前述の[手順10])はコードが確定となる。

“{“括弧等に対応する”}”括弧等の自動挿入

この動きに関しては特に説明は不要と思います。括弧開いたら、「Return」ボタン押すと勝手に括弧閉じが挿入されるやつです。
“{“以外にも自動補完される文字が存在します。
詳細はXcodeの使い方[エディタエリアの環境設定]の「Code completion」をご覧ください。

Assistant Editorの利用

Assistant Editorを表示するには、以下の画像の赤枠のボタンをクリックします。
スクリーンショット 2014-02-27 19.25.26

Assistant Editorに関する詳細な説明は「Xcode5のツールバーの説明」のAssistant Editorの項目をご覧ください。
「テキストエディタ」を使う際に便利なショートカットキーについては、「Xcode5を軽快に利用するためのショートカット[基本編] 」をご覧ください。

「Xcode5のエディタエリアの説明 [後編]」のエントリーは以上です。実際のアプリ開発時に利用可能な情報が含まれていることを祈願して、最後とさせていただきす。ってなんか結婚式の挨拶の締めくくりみたい・・・


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcode5を軽快に利用するためのショートカット[基本編]

「Xcode5のエディタエリアの説明 」 「Xcode5のエディタエリアの説明 [中編]」 「X

記事を読む

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

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

記事を読む

iOS(Xcode6とObjective-C)におけるマルチスレッド処理の実装方法その1[NSThreadクラスの簡単な利用例]

「iOS(Xcode6)におけるマルチスレッド処理の実装方法その1」に引き続きiOSに置けるマルチス

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

Xcodeのユーティリティエリアの使い方[ソースファイル表示時]

本エントリーでは、Xcodeの「ユーティリティエリア」の使い方を説明させていただきます。 利用

記事を読む

Xcode6からはProjectName-Prefix.pchは自動的に生成されませんが、それでもpchファイルを利用したい時の利用方法

小ネタですが、Xcode6からはProjectName-Prefix.pchは自動的に生成されなくな

記事を読む

iOS(Xcode6とObjective-C)におけるマルチスレッド(非同期)処理の実装方法その2[GCD(Grand Central Dispatch)の利用]

本エントリーではGCD(Grand Central Dispatch)を利用したiOSのマルチスレッ

記事を読む

Xcode5で画面にツールバーを配置して利用する。

「ナビゲーションバー」と同様に「ツールバー」もナビゲーションコントローラ(UINavigationC

記事を読む

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 ↑