ページ

▼

2013-07-29

iOSアプリ開発事始07：「Xcode」のワークスペースの機能構成をざっくり学んじゃいましょう！

iOSアプリ開発事始も今回で7回目となりました。実際のアプリ開発は中々進みません（涙）。でも地道が肝心ですよね。今回は前回に続いて「Xcode」についてです。前回はXcodeについての概要と新規プロジェクトを作成するところまででした。今回は実際にプログラムを作成していくのに肝心のワークスペースについてです。ワークスペースの機能が画面構成の中でどのように配置されていて、その機能がどのような内容なのかをまとめて行こうと思いま。


ワークスペースの構成について


ワークスペースは5つのエリアに大別できます。ツールバー、ナビゲータ、エディタ、ユーティリティ、そしてデバッグの各エリアです。画面を開くと分かるのですが、盛りだくさんの画面構成で込み入った印象を受けます。作業効率を図る上で、各機能の表示･非表示切り替えが出来るようになっています。


Toolbar


ツールバーにはプロジェクト全体の設定･操作を行なうためのボタンなどが配置されています。
  1. iOS Simulator
    2.  iOSシミュレータは作成したプロジェクト（iOSアプリ）をテストする際に使用するツールです。

    • Run：プロジェクト（iOSアプリ）の実行
    • Stop：プロジェクト（iOSアプリ）の停止
    • Scheme：プロジェクト（iOSアプリ）を実行するデバイスやOSを選択


  2. BreakPoints
    3.  ソースコードにプレークポイントを設定してある際に、そのプレークポイントの有効／無効を切り替えます。ちなみに、ソースコード実行時にブレークポイントを設定するには、ソースコードファイルを開いたエディタで実行を中断したい箇所の左側にあるガター部分をクリックします。


  3. Activity Monitor
    4.
    実行中のタスクの進行状況などを表示。プロジェクトファイル名の下にあるモニタ窓、ここに現在のアプリの状況がコメントされます。プログラム内のエラーや処理の状況などが表示されます。


  4. Editor
    5.
    Editorには3つのボタンがあります。エディタエリアの表示にアシスタント・エディタやバージョン･エディタを追加表示します。

    • Standard editor
      • 編集したいメインのファイルのみエディタに表示されます。
    • Assistant editor
      • 編集しているメインのファイルの右側に、そのファイルに関連するファイルが表示されます。
    • Version editor
      • 編集しているメインのファイルの右側に、そのファイルの最後にコミットしたリビジョンが表示されます。エディタ下部に表示される「Local Revision」の部分をクリックすると、他のリビジョンを表示することもできます。バージョン管理エディタですね。


  5. View
    6.
    Viewには3つの切り替えボタンがあります。左からナビゲータエリア、デバッグエリア、ユーティリティエリアです。各ボタンをクリックすると、それぞれの画面表示・非表示を切り替えることが出来ます。


  6. Organizer
    7.
    オーガナイザウィンドウを表示。作ったアプリを実機でテストしたくなった際にお世話になる機能です。実機テストを行なうには、iOS Developer Programを購入しないとできないんですね。



Navigator area


ナビゲータ・エリアは主にプロジェクトで管理されているファイル情報にアクセスするための情報を表示します。ナビゲータエリア上部には7つのナビゲート・メニューがあります。


  1. Project Navigator（プロジェクト・ナビゲータ）
    2.  プロジェクトのファイルを管理するための画面、ファイル一覧をツリー構造で表示します。編集したいファイルを選ぶとエディタ・エリアに内容表示します。ファイルの追加・削除なんかもここで出来てしまう。たとえば、ファイル選択状態で右クリック（control+クリック）すると、コンテキストメニューが表示され、各種操作を行なえる。まずはこのProject Navigator（プロジェクト・ナビゲータ）をしっかり使えるようになろう。


    コンテキストメニューでいろんな操作が行なえるわけだが、その中で特に以下の4つは覚えておいた方がいいでしょう。他のものはおいおい覚えましょう。

    1. Show in Finder：現在のプロジェクト、または選択中のファイルの場所をFinderで表示
    2. New File：現在のプロジェクトに新しくファイルを追加
    3. Add File to“…”：現在のプロジェクトに既存のファイルを追加
    4. Delete：選択しているファイルを現在のプロジェクトから削除


  2. Symbol Navigator（シンボル・ナビゲータ）
    3.  プロジェクト内の分類されたシンボルを閲覧できます。プロジェクトで作成したクラスやメソッドの一覧を表示する画面です。シンボル・ナビゲーターの上部にある「Flat」ボタンを選択すると、すべてのクラスをアルファベット順に表示します。「Hierarchical」ボタンを選択すると、クラス階層を表示します。


    一覧に表示されているそれぞれのアイコンの意味は以下のようになっています。

    • C：クラス
    • Pr：プロトコル
    • M：メソッド
    • A：IBAction
    • V：インスタンス変数
    • P：プロパティ
    • O：IBOutlets
    • C ：カテゴリ

  3. Search Navigator（検索ナビゲータ）
    4.  検索ナビゲーターは、ファイル検索するための画面です。検索窓にキーワードを入力して、Enterを押すと検索が実行されます。リスト表示された項目をクリックするとエディタエリアのコードの中の検索ワードに該当するワードを知られてくれます。


  4. Issue Navigator（問題ナビゲータ）
    5.  プロジェクト内で発生したエラーや警告を表示してくれる画面です。プログラムに間違いがある場合や設定に不備がある場合などをまとめて表示します。警告は黄色の三角形、エラーは赤丸の各々！マークで知らせてくれます。プログラムの問題である場合には、表示項目をクリックすると該当の場所を表示します。


  5. Debug Navigator（デバッグ・ナビゲータ）
    6.  プログラムをデバッグするときに使用するナビゲータです。プログラムを書き終わった後でビルドすると、プログラムの記述に問題がある場合や推奨されない書き方をしている箇所を探し、何処にどのような問題が発生しているかをリストアップしてくれます。

  6. Breakpoint Navigator（ブレークポイント・ナビゲータ）
    7.  プロジェクトで設定されているブレークポイントを確認・管理するためのナビゲータです。エディタでブレークポイントを設定すると、ブレークポイント・ナビゲータの画面に追加されます。ブレークポイントの有効・無効の設定、削除が行なえます。

  7. Log navigator（ログナビゲータ）
    8.  過去のビルド結果やデバッグ時に出力したログなどの履歴を参照する画面です。過去のビルドやデバッグの実行履歴が一覧で表示されます。


Editor area


プログラムの編集や画面の作成など、開発の中心となるのがこのEditor Areaです。エディタ・エリアでは、プロジェクト、コード、Interface Builder などのさまざまな開発ツールを扱います。プロジェクト・ナビゲータで選ばれたファイルに対して、そのファイルに該当するエディタを表示して開発を支援してくれます。

  1. プロジェクト・エディタ
    2.  ナビゲータ・エリアのプロジェクト・ナビゲータでプロジェクト・ファイルを選択すると、プロジェクト・エディタが表示されます。


  2. コード・エディタ
    3.  ナビゲータ・エリアのプロジェクト・ナビゲータで、「.h」や「.m」ファイルを選択すると、コード・エディタが表示されます。


  3. Interface Builder
    4.  ナビゲータ・エリアのプロジェクト・ナビゲータで、storyboardやxibファイルを選択すると、Interface Builder（インターフェイス・ビルダ）のエディタ画面が表示されます。

表示された各種エディタ画面の処理を行なっているときに、Toolbar（ツールバー）の「Editor」や「View」で画面の表示切替やアシスタント、バージョン・エディタを表示して開発作業を行ないます。

Utility area

Utility area（ユーティリティ・エリア）では、画面に配置したパーツに関する情報の閲覧や設定を行なう「インスペクタ」と「ライブラリ」で構成されています。

  • インスペクタ
    •  インスペクタはインスペクタペイン上部に表示されるタブメニューで切り替えることが出来ます。選択中のファイルにオプション情報を付加したり、クイックヘルプを見たりといった6つの機能ボタン（ボタン左からFile、Quick Help、Identity、Attributes、Size、Connectionsの各インスペクタ）が用意されています。


    1. File Inspector（ファイルインスペクタ）
      2. 開いているファイル情報のデータ表示、設定・編集を行なう。


    2. Quick Help Inspector（クイックヘルプインスペクタ）
      3. カーソルを合わせているワードなど、パーツについてのクイックヘルプを表示します。


    3. Identity Inspector（アイデンティティインスペクタ）
      4. 選択したパーツの名前やID、使用クラスなどの設定を行います。


    4. Attributes Inspector（属性インスペクタ）
      5. 選択したパーツの細かな属性を設定します。色などのパーツ編集を行なうインスペクタなので、アプリ開発の上で利用する頻度は高いですね。


    5. Size Inspector（サイズインスペクタ）
      6. 選択したパーツのサイズなどの細かな属性、レイアウト位置の編集･設定を行ないます。


    6. Connections Inspector（コネクションインスペクタ）
      7. インターフェイスとアクションを結びつけ設定を管理するインスペクタです。Interface Builderで配置したパーツとソースコードの中のプロパティやメソッドとの関係を確認、コネクション設定を行なうことができます。



  • ライブラリ
    •  「部品ボックス」です。いろいろなアイコンが並んでいて、アプリに取り入れたい機能にあったパーツを選んで配置します。使いたい位置にドラッグ & ドロップします。ライブラリのは4つの選択メニューがあります。左からFile Template、Code Snippet、Object、Mediaの各種ライブラリです。


    1. File Template Library
      2.  ファイルのテンプレートのライブラリです。


    2. Code Snippet Library
      3.  コードのテンプレート・ライブラリです。


    3. Object Library
      4.  インターフェイスのオブジェクトのライブラリです。


    4. Media Library
      5.  画像やアイコン などを表示する各種ライブラリです。


Debug area

デバック情報を表示するエリアですね。

今回はXcodeのワークスペースについての概略の理解ということで、「こんな画面やあんな用語があったな」といった理解でいきましょう。まだまだ先はながいですからね。千里の道も一歩から、って感じの一里塚ですね。

関連記事　－iOSアプリ開発事始

時刻:

0 件のコメント:

コメントを投稿