*

Xcodeの使い方[エディタエリアの環境設定]

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


スポンサードリンク



「Xcodeの使い方[エディタエリアのJump BarのThe related items menu]」に引き続き「Xcodeの使い方[エディタエリアの環境設定]」となります。

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

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

まずは、「Xcodeの使い方[エディタエリアのJump BarのThe related items menu]」をご覧ください。

「Xcodeの使い方[エディタエリアのJump BarのThe related items menu]」では、「The related items menu」の説明の分量が多く、この説明で終わってしまいました。
本エントリーでは、「Jump Bar」の残りの部分(The related items menu」以外)、
「環境設定のText Editing」、「環境設定のFonts&Colors」の利用方法について記載させていただきます。
またまた分量が多く「エディタエリア」の使い方[中編]」としました。

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

  1. 「Jump Bar」(「The related items menu以外」)説明
  2. 「Text Editing(Editingタブ)」の説明
  3. 「Text Editing(Indentationタブ)」の説明
  4. 「「Fonts&Colors設定」の説明

 

以降説明で記載する画面イメージは、「エディタエリア」の使い方[前編]で作成した「SimpleViewApp」のProjectを利用して取得しております。
SimpleView Applicationテンプレートでプロダクト名にSimpleViewAppを指定て作成しただけの物です。

1 「Jump Bar」(「The related items menu以外」)説明

「次へ」、「戻る」ボタン

以下の画像の赤枠の2ボタンで、見た目のまんまの動きをします。
左矢印ボタンを押すと、以前に表示されていたファイルが表示されます。更に左矢印ボタンを押すと、そのまた以前に表示されていたファイルが表示されます。
右矢印ボタンは、左矢印ボタンの真逆の動作をします。両ボタンとも、表示すべきファイルが存在しない場合はグレーアウトされます。
スクリーンショット 2014-02-23 16.36.35

「Click a level in the jump bar」

各レベルの「jump bar」を選択することで、そのレベル以下のフォルダやファイルを選択、表示することができます。
トップレベルの選択肢は、以下の赤枠の部分をクリックして表示します。
スクリーンショット 2014-02-23 16.49.17

トップレベルを選択し、その下のレベルを適当に選択していった時の画面イメージは以下の様になります。
スクリーンショット 2014-02-23 16.54.28

2番目の選択肢は、以下の赤枠の部分をクリックして表示します。
スクリーンショット 2014-02-23 16.56.35

2番目の選択肢をクリックした時は以下のように表示されます。選択したレベルと同じレベルの物も選択可能となっています。
スクリーンショット 2014-02-23 17.00.11

2番目の選択肢に表示されるファイル、もしくはフォルダ等は、2番目の配下の物となります。
3番目、4番目に表示される物も同様となります。

2 「Text Editing(Editingタブ)」の説明

「Text Editing」はエディタの設定となります。設定画面はXcode5のメニュー「Preferences」をクリックし
スクリーンショット 2014-02-23 18.25.01

表示された画面の「Text Editing」をクリックします。
スクリーンショット 2014-02-23 18.25.48

Show:表示系の設定

「Line numbers」

見たまんまですが、チェックすると行番号が表示されるようになります。
デフォルトでチェック無しです。
スクリーンショット 2014-02-23 18.37.35

「Code folding ribbon」

「Code folding ribbon」って・・・何だろう??、と思いますが、コードの纏まり(メソッド等)を白と黒の濃淡のリボンで表現してくれます。
以下の画像の赤枠の部分です。
スクリーンショット 2014-02-23 18.45.19

「Code folding ribbon」に関連付く設定として「Focus code blocks on hover」が有ります。
「Code folding ribbon」が設定されていて、「Focus code blocks on hover」を設定すると、マウスホバーの位置によって、対応するスコープ的な物が白黒で強調されます。
「Code folding ribbon」が未設定の場合は「Focus code blocks on hover」は無効となります。

クラスの実装部分(画像の赤枠部分)にマウスをホバーさせた場合の表示例が以下の画像となります。
スクリーンショット 2014-02-23 18.53.09

クラスのメソッド実装部分(画像の赤枠部分)にマウスをホバーさせた場合の表示例が以下の画像となります。
スクリーンショット 2014-02-23 18.55.42

「Page guide at column」

設定すると、行の80文字目にガイド(色が変わる)を表示してくれるようになります。
何文字目にの文字数も変更可能です。コーディング規約で1行は何文字までみたいな設定を決めている場合は、利用すると便利です。

80文字(デフォルト)でガイドを表示した画像
スクリーンショット 2014-02-23 19.10.12

40文字(デフォルト)でガイドを表示した画像
スクリーンショット 2014-02-23 19.14.06

Highlight instances of selected symbol

設定値としてDelayする秒を指定できます。
この値が設定されている場合、任意のクラスやメソッドがマウスでクリックされ、その状態がDelay以上続くと
以下の画像のようになります。

クラスの場合
スクリーンショット 2014-02-23 19.17.26

右端に表示されている下向きの三角ボタンをクリックした時に表示されるメニューは以下の様になります。
見たままなので、説明は省略いたします。
スクリーンショット 2014-02-23 19.17.58

メソッドの場合も同じ動きをします。
スクリーンショット 2014-02-23 19.21.16

「Code completion」:コード補完

コード補完の設定となります。

「Suggest completions while typing」

タイピングをしている時にコード補完を行う設定となります。
デフォルトでチェックされています。この状態でエディタエリアでNをタイプすると画面は以下のようになるはずです。
スクリーンショット 2014-02-23 19.33.19

「Suggest completions while typing」のチェックを外し、同じようにNをタイプしてみると、
コード補完が行われないことが確認できます。
以降の設定は「Suggest completions while typing」のチェックを外した状態の方が動作が分かりやすいため、このままの設定にしておきます。

「Use Escape key to completions」

この値をチェックしない場合は、「option」+「Esc」キーを押した時点でコード補完を行う設定となります。
この値をチェックした場合は、「Esc」キーを押した時点でコード補完を行う設定となります。
画面イメージは同じですので、チェック時の動作画面の画像は省略いたします。

こちらも画面イメージは同じですの省略いたします。

Automatically insert closing braces(“}”)

この設定のチェックを外すと入力した”{“に対応する”}”が自動的にインサートされなくなります。
“{“以外にダブルコーテーション、シングルコーテーション、括弧も自動的に対応する文字が自動的にインサートされます。

eclipseはデフォルトで自動的にインサートを行い、Visual StudioのC,C#等はデフォルトで自動的にインサートを行わないので、
好みでチェックを外しても良いかもしれませんが、個人的には、デフォルトのままチェックしておく方が良いと思います。

またまた私の事情になって申し訳無いのですが、次の「Enable type-over completions」を確認するために
本設定のチェックは一時的に外しておいてください。

「Enable type-over completions」

この設定がどうやっても理解不能です。

https://developer.apple.com/library/mac/releasenotes/DeveloperTools/RN-Xcode/#//apple_ref/doc/uid/TP40001051-SW302
のXcode 4.4 Release Notesに含まれる以下の記載の通り動かせません。

When the “Automatically insert closing braces” option in Text Editing preference is turned on, as you type an opening parenthesis, brace, or quotation mark, the source editor adds the corresponding closing character. When the “Enable type-over completions” option is turned on, the editor adds the closing character in a state in which you can type over the character. This feature reduces the appearance of duplicate closing characters, such as when you type both the open and close characters quickly. 3780948

Press Tab to jump over the closing character.

と書かれていますが、Enable type-over completionsがチェックされていても、いなくても同じ動きの様に見えます。
何か設定の組み合わせが悪いのでしょうか、なんでやねん!
あー、久々のなんでやねん出ました。
とさらに試行錯誤するうちに同一行における括弧閉じるの候補が複数存在する時、
それも”[“(ブラケット、角括弧)の時のみ候補が表示され、Tabボタンで確定することができる設定であると確認できました。
他の操作&括弧でもこの動きができるのかは疑問です。

確認できた動作で”]”候補が表示されている画像です。
少し分かりにくいですが、”]”がグレーで表示されていることが確認できます。
スクリーンショット 2014-02-24 15.32.23

上記の画像の状態で「Tab」ボタンを押した後の画像です。
“]”が確定され、通常の文字色となりました。
スクリーンショット 2014-02-24 15.33.16

「Enable type-over completions」は、結局今の時点でタイプが完了しているコードの直後に括弧しか存在し得ない
時にグレーで括弧閉じが表示される仕組みのようです。行数は関係ないようです。
言い換えると、コード補完が括弧閉じ以外の候補を提示できる状態の時には、グレーで括弧閉じは表示されません。
イマイチ言い換えできているか微妙ですね、40点ってことで・・・

While editing: 空白の扱い

「Automatically trim trailing whitespace」

チェックすると、自動的にソースコードの後方にある空白のフォーマットを行ってくれます。

例としてif(1){の後ろに半角スペースを10個打ち込みます。
この状態でリターンボタンクリック、もしくはエディタからフォーカスを外します。
すると自動的に10個のスペースがトリムされます。
スクリーンショット 2014-02-24 17.19.07

「Automatically trim trailing whitespace」の子要素の「Including whitespace-only lines」は
そのままですが、空白のみの行を削除するかどうかです。

「Automatically trim trailing whitespace」と
「Including whitespace-only lines」を両方チェックして
空白行を作成して動作を確認してみます。

作成する空白行のパターンは
・タブだけを含む行
・タブ、半角空白混在の行
・半角空白だけを含む行
です。さすがに全角空白は確認不要と思います。

この3種の空白行を入力後の画像が以下のようになります。
と言っても、画像からではタブか半角スペースか判別不能ですし、次行に移ったタイミングでトリムされるので画像は断念です。無念・・・

結論ですが、3パターンとも空白が除去され対象行のスペース位置がエディタの一番左端になり、行自体が無くなる訳ではありませんでした。

「Default text encoding」

ソースコードをどのエンコーディングで保管するかとの設定です。デフォルトはUTF-8となっています。

「Default line endings」

改行コードの指定を行う項目です。「iOS」、「OS X」はUnix系のOSなのでデフォルトはLFとなっています。

3 「Text Editing(Indentationタブ)」の説明

ソースコードのインデントに関する設定を行うタブとなります。
画面は以下の様になります。
スクリーンショット 2014-02-24 21.54.13

「Prefer indent using」

タブでソースコードを整形するか、半角スペースで整形するかを選択可能です。デフォルトはタブとなっています。

「Tab width」

タブが入力された時に、何文字の半角スペースをタブコードとして表示するかを設定します。
ちなみにですが、この値を4以外にすれば「Prefer indent using」で「Tabs」を選択していても、半角スペースの4文字で整形されるようになります。

「Indent width」

スコープ毎のインデントを区別する為にインサートする前方の空白部分を半角スペース何個分にするかを指定します。
またまたちなみにですが、「Tab width」の値と「Indent width」が同じ値で、「Prefer indent using」で「Tabs」の指定をしていれば、
インデントの空白部分は常にタブコードになります。

「Tab key」

Tabキーが押されたときの動作を指定可能です。デフォルト値は「Indents in leading whitespace」です。
・「Indents in leading whitespace」を選択時
現在の行のカーソル位置より前に半角スペースが存在する場合は、その半角スペースの数に対応するタブコードをインサートします。
自分で書いた日本語が理解できないので、何言ってんだこいつと思ってください。

例で行きます。
前に半角スペースが1つ存在する場所でタブキーを叩くと1/「Tab Width(値4と仮定)」+1のタブコードがインサートされますので、結果タブコードが1つだけ存在するようになる。
前に半角スペースが8つ存在する場所でタブキーを叩く8/「Tab (値4と仮定)」+1のタブコードがインサートされますので、結果タブコードが3つだけ存在するようになる。

・「Indents always」を選択時
インデントの指定した形に成っている場合はTabキーを叩いても無視されます。
それ以外の動きは「Indents in leading whitespace」の動作と同じです。

例として以下の様なメソッドを用意しました。

このソースのif(true)の先頭をカーソルのフォーカスを移動し、Tabキーを叩きます。すると以下のソースに変化します。

この後、何度Tabキーを叩いてもif(true) {の左側の空白の幅は変更されません。
インデントが正しければ、インデントを守るために無視する設定です。

・「Inserts tab character」を選択時
インデントなどお構いなしで、Tabキーが叩かれたら、素直にタブをインサートする設定となります。

「Line wrapping」

行の折り返しに関する設定が行えます。

「Wrap lines to editor witdh」

チェックすると行の折り返しが有効になります。大きなお世話だ!、って方はチェック外してください。
このサブ設定として、「indent wrapped lines by」があります。
折り返した次の行のインデント(半角スペースの数)を指定します。
1行目の先頭と2行目の先頭はこの設定分の空白が入り、自動折り返しが識別できます。

「Syntax-aware indenting」

ソースコードのインデントで、細かくカスタマイズ可能な設定を含みます。

Automatically indent based on syntax

このチェックを外すと、この設定の配下(Automatic indent forは何故か配下、と思ったら確かに数文字下がってる)の設定が無効になります。
当然ですが、「Editing」タブの「Automatically insert closing braces(“}”)」がチェックされていても
「Automatic indent for」の個別設定の項目に”}”の個別設定がありますので、
この設定も含めて無効になり、結果的に”}”の自動インサートが無効となります。

以降で「Automatically indent based on syntax」配下の個別設定を説明させていただきます。

・「indent solo “{” by:」
この設定の値はデフォルトの4のままでチェックを入れた後に
以下のコードのif(true){の)直後でリターンキーを叩くと

以下のコードに変わります。
デフォルト設定が4spacesとなっているので改行して4spaceの設定となっているタブが{の行をインデントするために前方にインサートされました。

「indent solo “{” by:」の値を04spacesに変更して,コードのif(true){の)の直後でリターンキーを叩くと以下の様なソースになります。

・「Indent // comments one level deeper」
チェックすると//のコメント行のインデントを1階層深い所に自動は位置されます。
コメント記載開始位置はif(true)のiの上として入力を実施しましたが、以下の様に自動的にを1階層深い所に移動されました。

・「Align consecutive // comments」
どんな設定か分かりません。チェック入れて考えられる限りの//開始のコメントを入力したのですが、動きの違いが見えませんでした。

iOS Reference Liblaryの「The Text Editor」の説明には

Choosing How to Indent C++-Style Comments
You can choose how to indent C++–style (//) comments when they appear on lines by themselves.
Note: You cannot automatically indent C++–style comments that appear at the end of code lines.
To specify whether to indent // comments and whether to align consecutive // comments, use the options for these comments in Indentation preferences.

との記載がありますが、理解できません。

「Automatic indent for」
“{“、”}”、Returnの各設定は予想通りの動きをしてくれますが、それ以外の設定はチェックしてもしなくても、何も変わらない様に思えます。
きっと使い方が悪いんだと思いますが、
こんなに色々試行錯誤して動きを理解できないオートフォーマット設定は存在意義があるのか疑問です。

この3つの中でもReturnは異色ですよね、Returnのチェックが付いてない場合に、任意の行でReturnを押すと
次行の先頭の前には空白がインサートされずに、常に同じ場所となります。

4 「Fonts&Colors設定」

画面は先ほどの「Text Editing」の隣のタブとなります。
画面は以下の通りです。
スクリーンショット 2014-02-25 15.28.30

タブ名そのままですが、FontsとColorが設定可能です。
Xcodeのデフォルトのフォントサイズだと見にくいとお思いの方は是非、この設定を変更してください。

Theme一覧

現在登録されているThemeが一覧で表示されます。
スクリーンショット 2014-02-25 15.34.24

Themeの新規追加と削除が行えます。

Themeの新規追加

以下の画像の「+」ボタンをクリックします。
スクリーンショット 2014-02-25 15.38.10

すると以下のメニューが表示されます。
一番上に表示されている「Duplicate “Basic”」は一覧で選択しているThemeの複製のメニューとなります。
今はたまたまBasicを選択したいたのでこのような表示となっております。
この下に「New Theme from Template」とのグレーなメニューの後にテンプレートの一覧が続いています。
スクリーンショット 2014-02-25 15.51.38

テンプレート「Bare」を選択して新しいThemeの作成を行ってみます。
「Bare」をクリックします。
スクリーンショット 2014-02-25 16.10.12

すると以下の様な画面に変わりますので、新しいThemeの名前を入力します。と言っても、Bareのままにしちゃいましたが・・・
スクリーンショット 2014-02-25 16.11.25

Themeの標準テンプレートには以下の物があります。

  • Bare
  • Basic
  • Default
  • Dusk
  • Low Key
  • Midnight
  • Presentation
  • Printing
  • Spartan
  • Sunset

標準以外でも、以下のパスに、カラーテーマファイル(拡張子.dvtcolortheme)を置くことでテンプレートを追加することが可能です。

置いた後Xcodeを再起動しないと新規のテンプレートは認識されません。

Themeの削除

削除したいThemeを一覧で選択し、「ー」ボタンをクリックします。ただそれだけです。

Themeの選択

Theme一覧で選択したThemeがXcodeに適用されます。
・Bare選択時の画面
スクリーンショット 2014-02-25 17.43.10

・Basic選択時の画面
スクリーンショット 2014-02-25 17.44.13

・Dusk選択時の画面
スクリーンショット 2014-02-25 17.45.02

・Low Key選択時の画面
スクリーンショット 2014-02-25 17.46.04

・Midnight選択時の画面
スクリーンショット 2014-02-25 17.46.56

・Presentation選択時の画面
いかにもプレゼンするときのテーマですね、もう二年ほどソースをプロジェクタに写してのプレゼンなんてやってまえんけど・・・
スクリーンショット 2014-02-25 17.47.50

・Printing選択時の画面
白黒だけで表現されるようになっており、白黒印刷を前提にしたてーまですね。
スクリーンショット 2014-02-25 17.50.18

・Spartan選択時の画面
スクリーンショット 2014-02-25 17.52.09

・Sunset選択時の画面
なるほど、そうきましたか。って感じですね。
スクリーンショット 2014-02-25 17.54.37

「Source Editor」タブ

「エディタエリア」に表示される各種情報のFontとColorを変更できます。
「Source Editor」で変更したい行を選択します。すると現在のその行の設定が下部に表示されます。

Theme「Bare」の「Plain Text」を選択した時の画面が以下のようになります。
FontはMenio Reqularのフォントサイズが11、色は文字で表現が困難ですが、黒であることが分かります。
スクリーンショット 2014-02-25 18.04.52

Fontに関する情報を変更したい場合は、以下の画像の赤枠の部分をクリックします。
スクリーンショット 2014-02-25 18.09.52

すると以下の画面が表示されますので、詳細なFontの設定を行います。
スクリーンショット 2014-02-25 18.14.53

Colorに関する情報を変更したい場合は以下の画面の赤枠の部分をクリックします。
スクリーンショット 2014-02-25 18.14.53

すると以下の画面が表示されますので、色を変更します。
スクリーンショット 2014-02-25 18.42.37

なお「Source Editor」で変更できる種別(Plain Text等)は以下のようになります。

  • Plain Text
  • Comments
  • Documentation Comments
  • Documentation Comment Keywords
  • Strings
  • Characters
  • Numbers
  • Keywords
  • Prreprocessor Statements
  • USLs
  • Attributes
  • Project Class Names
  • Project Function and Method Names
  • Project Constants
  • Project Type Names
  • Project Instance Variables and Globals
  • Project PreProcessor Macros
  • Other Class Names
  • Other Function and Method Names
  • Other Consttants
  • Other Type Names
  • Other Instance Variables Globals
  • Other Preprocessor Macros

「Console」タブ

「Source Editor」と同様に一覧から編集対象を選択し、Font情報やColorを変更できます。
なお「Console」タブで変更できる種別(Debugger Console Prompt等)は以下のようになります。

  • Debugger Console Prompt
  • Debugger Console Input
  • Debugger Console Output
  • Executable Console Input
  • Executable Console Output

Xcodeの使い方[エディタエリアの環境設定]は以上です。
「Xcodeの使い方[エディタエリアのテキストエディタ]」に続く。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

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

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

記事を読む

Xcode5の「Auto Layout 」機能の使い方[基礎知識と制約(Align)の設定方法]

Xcode4から導入された「Auto Layout」ですが、使いこなせるようになるのは骨が折れます。

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

Xcodeのナビゲーションコントローラの使い方[「Single View Application」テンプレートからナビゲーションコントローラを利用する方法]

「Master-Detail Application」テンプレートを利用すれば、始めから「ナビゲーシ

記事を読む

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

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

記事を読む

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

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

記事を読む

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 ↑