Start Developing iOS Apps Today(6)~チュートリアル:ストーリーボード

2014. 02. 24
●チュートリアル:ストーリーボード

このチュートリアルでは、最初のチュートリアル(チュートリアル:基礎)で作成したプロジェクトを利用します。
これまでのビュー、ビューコントローラ、アクション、そしてナビゲーションについて学んだものを使用して置いてみます。
インターフェイスの最初の設計工程に続いて、ToDoListアプリの主要なユーザインターフェイスフローの一部を作成し、既に作成したシーンに動作を追加します。

このチュートリアルでは以下の方法を教えます。

  • ユーザインターフェイスに柔軟性を追加するために自動レイアウトを採用
  • アプリのコンテンツとフローを定義するためにストーリーボードを使用
  • 複数のビューコントローラの管理
  • ユーザインターフェイスの要素にアクションを追加

このチュートリアルの全ての手順を完了すると、以下のような見た目のアプリになります。

ios_simulator_nav_bar_2x.png



●自動レイアウトの採用

作成した時にそうであったため、追加ToDo項目のシーンはポートレートモードで動作するように構成されています。
ユーザがデバイスを回転させるとどうなるでしょうか?
シミュレータでアプリを実行して試してください。


iOSシミュレータで回転する

  1. iOSシミュレータでアプリを起動します。

  2. Hardware > Rotate Leftを選択します。(または Command + 左カーソルキーを押します。)

    ios_simulator_landscape_2x.png

ご覧のように、テキストフィールドはかなり右に寄っています。
これを画面のほぼ中央に停止させます。
ポートレートモードの場合のように、テキストフィールドを全ての画面上で引き延ばす必要があります。
幸いなことに、Xcodeは自動レイアウトと呼ばれる強力な組み込みレイアウトエンジンを持っています。
自動レイアウトを使用すると、シーン内での要素の配置に意図を説明することで、レイアウトエンジンがその意図を実現するための最適な方法を決定します。
ある要素は他と関連して配置する必要がある、または然るべきサイズがある、あるいは2つの要素においてそれぞれに利用可能な空間を減らしたい時に最初に縮小するのはどちらか、といった制約規則を使用して意図を説明します。
追加ToDo項目のシーンのため、テキストフィールドの位置とサイズを設定する2セットの制約が必要です。

これらの制約の設定は、Interface Builderで容易に達成することができます。


自動レイアウトを使用したテキストフィールドの配置

  1. プロジェクトナビゲータでMain.storyboardを選択します。

  2. ストーリーボードでテキストフィールドを選択します。

  3. キャンバス上で、テキストフィールドからシーン上方の周囲に何も無い空間へ向かって、Control + ドラッグします。
    この空間はテキストフィールドのスーパービューです。

    ドラッグを話した場所にショートカットメニューが表示されます。

    autolayout_menu_2x.png

  4. ショートカットメニューから"Top Space to Top Layout Guide"を選択します。

    間隔制約は、テキストフィールドの上端とナビゲーションバーの間に作成します。

    別のショートカットメニューが表示された場合、例えばメニュー項目が"Leading Space to Container"となるのはおそらく別の方向にドラッグしたためで、画面上部に垂直にドラッグし直してください。
    Xcodeは、貴方が作ろうとしている制約の種類を理解するための方法としてドラッグの方向を使用しており、オブジェクトが制約によって関連付けされているかを理解するためにドラッグの始点と終点を使用しています。
    後ほど、使用可能な制約を確認するために別のドラッグ方向を試します。

  5. 試みが終わったら、テキストフィールドから右方向へ終端はスーパービュー内でControl + ドラッグをし、"Trailing Space to Container"制約を作成します。

  6. テキストフィールドから左方向へ終端はスーパービュー内でControl + ドラッグをし、"Leading Space to Container"制約を作成します。

これらの制約は、テキストフィールドの端とスーパービューとの間の間隔が変化しないように指定します。
これはデバイスの向きが変化した場合に、テキストフィールドがこれらの制約を自動的に満たすようにすることを意味します。

チェックポイント:アプリを実行します。
デバイスを回転させた場合に、テキストフィールドがデバイスの向きに応じて適切なサイズに伸張または収縮します。

期待した動作が得られなかった場合は、Xcodeの自動レイアウトのデバッグ機能が役立ちます。
Xcodeは上記の手順で説明した制約を設定しているので、テキストフィールドを選択した状態で、Editor > Resolve Auto Layout Issues > "Reset to Suggested Constraints"を選択します。
またはEditor > Resolve Auto Layout Issues > Clear Constraintsを選択してテキストビュー上の全ての制約を削除し、再度上記手順に従って試してください。

ios_simulator_landscape_al_2x.png

まだ追加項目シーンはあまり行われていませんが、基本的なユーザインターフェイスが在り機能しています。
開始時にレイアウトを考慮していると、その上に構築するための確固たる基盤を持っていることが保証されます。



●2つ目のシーンの作成

これまではToDoリストに項目を追加することができるページを表すための、ビューコントローラによって管理される単一のシーンで作業してきました。
今、ToDoリスト全体を表示するシーンを作成する時が来ました。
幸いなことに、iOSには項目のリストをスクロール表示するために特別に設計された、テーブルビューと呼ばれる強力な組み込みクラスが付属しています。


ストーリーボードへテーブルビューをシーンに追加

  1. プロジェクトナビゲータでMain.storyboardを選択します。

  2. ユーティリティ領域でオブジェクトライブラリを開きます。
    (メニューコマンドでライブラリを開くには、View > Utilities > Show Object Libraryを選択します。)

  3. リストからTable View Controllerオブジェクトをドラッグし、追加ToDo項目シーンの左側のキャンバス上にドロップします。
    必要な場合はドラッグするために十分な空間を取得するために、キャンバスの右下にあるZoom Outボタンzoom_out_2x.png を使用することができます。

    キャンバスにドラッグしようとした際、テーブルビューが見えるのに何も起こらなかった場合は、おそらくビューコントローラではなくテーブルビューをドラッグしています。
    テーブルビューはテーブルビューコントローラによって管理される物の一つですが、パッケージ全体が必要なので、テーブルビューコントローラを検索してキャンバスにドラッグします。

これでToDo項目のリストを表示するものと、追加ToDo項目用の2つのシーンを持つことになりました。

two_scenes_2x.png

アプリ起動時にユーザが最初に目にするものをリストにするのが理にかなっているので、最初のシーンとしてテーブルビューコントローラを設定することによってあなたの意図をXcodeに伝えます。


初期シーンとしてテーブルビューコントローラを設定

  1. 必要に応じてキャンバスの左下にあるボタンoutline_view_toggle_2x.png を使用してアウトラインビューを開きます。

  2. アウトラインビューで新たに追加したテーブルビューコントローラを選択します。

  3. テーブルビューコントローラを選択した状態で、ユーティリティ領域で属性インスペクタinspector_attributes_2x_20140209113430cca.png を開きます。

  4. 属性インスペクタでIs Initial View Controllerオプションのチェックボックスを選択します。

    initial_view_controller_2x.png

    またはキャンバス上で直接、XYZAddToDoItemViewControllerからテーブルビューコントローラに初期シーンインジケータをドラッグすることもできます。

    テーブルビューコントローラはストーリーボードで初期ビューコントローラとして設定し、アプリ起動時に読む込む最初のシーンを作成します。

チェックポイント:アプリを実行します。
テキストフィールドを持つ追加ToDo項目シーンの代わりに、(行に分割するための多数の仕切り線があるが、各行にはコンテンツが無い画面の)空のテーブルビュー表示されるはずです。

ios_simulator_empty_table_view_2x.png



●テーブルビューに静的コンテンツを表示

データの格納についてまだ学んでいないので、ToDo項目の作成と格納、およびテーブルビューでそれらの表示を行うには時期尚早です。
しかしユーザインターフェイスのプロトタイプを作成するためには、実際のデータである必要はありません。
XcodeはInterface Builderでテーブルビューの静的コンテンツを作成することができます。
これはユーザインターフェイスがどのように振る舞うかを非常に簡単に確認でき、様々なアイデアを試す有益な方法です。


テーブルビューでの静的セルの作成

  1. インターフェイス用のアウトラインビューで、Table View Controller下のTable Viewを選択します。

  2. テーブルビューを選択した状態で、ユーティリティ領域の属性インスペクタinspector_attributes_2x_20140209113430cca.png を開きます。

  3. 属性インスペクタで、ContentオプションのポップアップメニューからStatic Cellsを選択します。

    テーブルビューには3つの空のテーブルビューセルが表示されます。

  4. アウトラインビューまたはキャンバス上で、一番上のセルを選択します。

  5. 属性インスペクタで、StyleオプションのポップアップメニューからBasicを選択します。

    Basicスタイルはラベルを含んでおり、Xcodeはテーブルセルでテキスト"Title"というラベルを作成します。

  6. アウトラインビューまたはキャンバス上で、ラベルを選択します。

  7. 属性インスペクタで、ラベルのテキストを"Title"から"Mow the Lawn"に変更します。
    結果を有効にするには、Enterキーを押すか、ユーティリティ領域の外側をクリックします。

    あるいは、ラベルをダブルクリックすることによって直接テキストを編集することもできます。

  8. 他のセルでも手順4〜7を繰り返し、ToDo項目にありそうな他のテキストを与えます。

  9. 画面を埋めるのに十分な項目分のセルを作成します。
    コピー&ペースト、またはOptionキーを押しながらセルをドラッグすることで、新しいセルを作成することができます。

チェックポイント:アプリを実行します。
Interface Builderで追加した、事前構成済みのセルを持つテーブルビューが表示されるはずです。
スクロール時に新しいテーブルビューがどうなるか確認してください。
シミュレートしているデバイスを回転させ、テーブルビューが適切にコンテンツをレイアウトするように既に構成されていることに気付くでしょう。
テーブルビューを使用することによって、無償で多くの動作を得られます。

ios_simulator_static_table_view_2x.png


完了したら、先に作成した最初のシーンにToDo項目のリストで、ユーザが新しいToDo項目を作成することができるように、このテーブルビューから誘導する方法を提供していきます。



●先へ誘導するセグエの追加

貴方はストーリーボードに構成された2つのビューコントローラを持っていますが、それらの間は接続されていません。
シーン間の遷移はセグエと呼ばれています。

セグエを作成する前に、シーンを構成する必要があります。
最初にナビゲーションコントローラでXYZToDoListViewControllerを包みます。
インタラクションの定義」で、ナビゲーションコントローラがナビゲーションバーを提供し、ナビゲーションスタックの追跡を保持するという説明を思い出してください。
XYZAddToDoItemViewControllerシーンに移行するために、このナビゲーションバーにボタンを追加します。


テーブルビューコントローラへのナビゲーションコントローラの追加

  1. アウトラインビューでTable View Controllerを選択します。

  2. ビューコントローラを選択した状態で、Editor > Embed In > Navigation Controllerを選択します。

Xcodeはストーリーボードに新しいナビゲーションコントローラを追加し、それに初期シーンを設定して、新しいナビゲーションコントローラと既存のテーブルビューコントローラとの間に関係が作成されます。
キャンバス上で2つのシーンを結ぶアイコンを選択すると、それがルートビューコントローラの関係であることが分かります。
これはナビゲーションバーの下に表示されるコンテンツのビューがテーブルビューになることを意味します。
アプリ内で表示する全てのコンテンツ(つまりToDoリストと追加ToDo項目シーンの両方のコンテナ)を保持するため、初期シーンはナビゲーションコントローラに設定されます。

チェックポイント:アプリを実行します。
テーブルビューの上に追加された空間が表示されるはずです。
これはナビゲーションコントローラによって提供されたナビゲーションバーです。

ios_simulator_static_table_view_with_nav_2x.png

これでナビゲーションバーに(ToDoリストへの)タイトルと(追加ToDo項目を追加するための)ボタンを追加できます。


ナビゲーションバーの設定

  1. アウトラインビューまたはキャンバス上で、Table View Controller下のNavigation Itemを選択します。

    ナビゲーションバーそれ自身はタイトルを持っていないので、ナビゲーションコントローラで現在表示されているビューコントローラから自身のタイトルを取得します。
    ナビゲーションバー上に直接設定するのではなく、(テーブルビューコントローラの)ToDoリストのナビゲーション項目を使用してタイトルを設定します。

  2. 属性インスペクタで、Title欄にMy To-Do Listと入力します。

  3. 必要に応じてオブジェクトライブラリを開きます。

  4. テーブルビューコントローラのナビゲーションバーの右端に、リストからBar Button Itemをドラッグします。

    ドラッグしたバーボタンアイテムは、テキスト"Item"を含むボタンが表示されます。

  5. アウトラインビューまたはキャンバス上で、Bar Button Itemを選択します。

  6. 属性インスペクタで、Bar Button Item項のIdentifierオプションを探します。
    IdentifierのポップアップメニューからAddを選択します。

    ボタンが追加ボタン(+)に変更されます。

チェックポイント:アプリを実行します。
現在ナビゲーションバーは、タイトルと追加ボタンを持っているはずです。
ボタンはまだ何も行いません。
次で用意します。

ios_simulator_nav_bar_2x_20140211152717226.png

貴方は追加ボタンで追加ToDo項目シーンを表示したいでしょう。
シーンは既に(最初のシーンとして作成して)構成されていますが、他のシーンと接続されていません。
Xcodeは簡単に追加ボタンをタップした時に他のシーンを表示するように設定することができます。


追加ボタンの設定

  1. キャンバス上で追加ボタンを選択します。

  2. ボタンから追加ToDo項目ビューコントローラにControl + ドラッグします。

    drag_from_add_button_2x.png

    ドラッグを終了した場所にAction Segueというタイトルのショートカットメニューが表示されます。

    action_segue_menu_2x.png

    Xcodeではユーザが追加ボタンをタップした時に、ToDoリストから追加ToDo項目ビューコントローラに遷移する際に、使用する必要があるセグエの種類を選択することができます。

  3. ショートカットメニューから"push"を選択します。

Interface Builderのナビゲーションバーで確認できますが、Xcodeはセグエを設定し、ナビゲーションコントローラに表示される追加ToDo項目ビューコントローラを構成します。

この時点で、プロジェクトにいくつかの警告が生じていることに気付くことでしょう。
後ほど、誤りを確認するためにIssueナビゲータを開きます。

al_issue_navigator_2x.png

ナビゲーションスタックに追加ToDo項目シーンを追加したため、現在ナビゲーションバーが表示されています。
このバーはテキストフィールドのフレームを下に移動していたため、以前に指定した自動レイアウトの制約が既に満たされていることを意味します。
幸いなことに、これを修正するのは簡単です。


自動レイアウトの制約の更新

  1. アウトラインビューまたはキャンバス上で、テキストフィールドを選択します。

  2. キャンバス上でResolve Auto Layout Issuesポップアップメニューal_resolve_issues_2x.png を開き、Update Constraintsを選択します。

    またはEditor > Resolve Auto Layout Issues > Update Constraintsを選択することもできます。

    制約が更新され、Xcodeの警告が消えます。

チェックポイント:アプリを実行します。
追加ボタンをクリックすると、テーブルビューから追加ToDo項目ビューコントローラに移動することができます。
プッシュセグエにナビゲーションコントローラを使用しているため、戻る移動は自動で処理されます。
これはbackボタンをクリックしてテーブルビューに戻れることを意味します。

ios_simulator_navigation_2x.png

プッシュナビゲーションは、項目を追加する際に想定した動作をしますが、必ずしも貴方が望むものになるとは限りません。
プッシュナビゲーションは、ユーザが選択したものに関する詳細情報を提供する場合の、ドリルダウンインターフェイス用に設計されています。
項目の追加を別の視点で見ると、ユーザが完全な自己完結型のいくつかのアクションを実行し、その後そのシーンからメインのナビゲーションに復帰するモーダル操作です。
このシーンの種類を提示する適切な方法はモーダルセグエです。


セグエのスタイルの変更

  1. アウトラインビューまたはキャンバス上で、テーブルビューコントローラから追加ToDo項目ビューコントローラへのセグエを選択します。

  2. 属性インスペクタで、StyleオプションのポップアップメニューからModalを選択します。

モーダルビューコントローラはナビゲーションスタックに追加されないので、テーブルビューコントローラのナビゲーションコントローラからナビゲーションバーを取得しません。
しかし貴方は視覚的な連続性をユーザに提供するために、ナビゲーションバーを維持したいでしょう。
モーダルモードで表示する時に追加ToDo項目ビューコントローラにナビゲーションバーを与えるには、独自のナビゲーションコントローラを組み込みます。


追加ToDo項目ビューコントローラへのナビゲーションコントローラの追加

  1. アウトラインビューでView Controllerを選択します。

  2. View Controllerを選択した状態で、Editor > Embed In > Navigation Controllerを選択します。

前と同じように、Xcodeはナビゲーションコントローラを追加し、ビューコントローラの上部にナビゲーションバーを表示します。
次に、このシーンにはCancelとDoneの2つのボタンだけでなくタイトルを追加するため、このバーを設定します。
後に、これらのボタンにアクションをリンクします。


追加ToDo項目ビューコントローラのナビゲーションバーの設定

  1. アウトラインビューまたはキャンバス上で、View Controller下のNavigation Itemを選択します。

    必要に応じて属性インスペクタinspector_attributes_2x_20140209113430cca.png を開きます。

  2. 属性インスペクタで、Title欄にAdd To-Do Itemと入力します。

    Xcodeがシーンを容易に識別できるように、ビューコントローラの説明を"View Controller"から"View Controller - Add To-Do Item"に変更します。
    説明はアウトラインビューに表示されます。

  3. 追加ToDo項目ビューコントローラのナビゲーションバーの右端に、オブジェクトライブラリからバーボタンアイテムをドラッグします。

  4. 属性インスペクタで、IdentifierオプションのポップアップメニューからDoneを選択します。

    ボタンのテキストが"Done"に変更されます。

  5. 追加ToDo項目ビューコントローラのナビゲーションバーの左端に、オブジェクトライブラリから別のバーボタンアイテムをドラッグします。

  6. 属性インスペクタで、IdentifierオプションのポップアップメニューからCancelを選択します。

    ボタンのテキストが"Cancel"に変更されます。

チェックポイント:アプリを実行します。
追加ボタンをクリックします。
追加項目シーンはまだ表示されますが、ToDoリストに戻るためのボタンはもはや無く、代わりに追加したDoneとCancel2つのボタンが表示されます。
これらのボタンにはまだアクションがリンクされておらず、クリックすることはできますが何も行われません。
新しいToDo項目の編集を完了もしくはキャンセルするボタン(と、ユーザをToDoリストに戻す)の設定は次に行います。

ios_simulator_cancel_done_2x.png



●カスタムビューコントローラの作成

任意のコードを記述する必要無く、この構成の全てを達成することができました。
追加ToDo項目ビューコントローラを完成させるための設定にはいくつかのコードが必要ですが、それを置く場所も必要です。
ちょうど今、Xcodeは追加ToDo項目ビューコントローラと、汎用ビューコントローラとしてテーブルビューコントローラの両方を設定しています。
カスタムコードのための場所を確保するには、これらの各ビューコントローラのサブクラスを作成し、それらサブクラスを使用するためのインターフェイスを設定する必要があります。

まず、追加ToDo項目ビューコントローラのシーンに取り組みます。
このビューコントローラはToDoリストに新しい項目を追加するシーンを制御するため、カスタムビューコントローラクラスはXYZAddToDoViewControllerと呼ぶことにします。


UIViewControllerのサブクラスの作成

  1. File > New > Fileを選択します(またはCommand + Nを押します)。

  2. 表示されるダイアログの左側で、iOS下のCocoa Touchテンプレートを選択します。

  3. Objective-C Classを選択し、Nextをクリックします。

  4. Class欄で、XYZ接頭辞の後にAddToDoItemと入力します。

  5. ポップアップメニューの"Subclass of"でUIViewControllerを選択します。

    クラスのタイトルが"XYZAddToDoItemViewController"に変更されます。
    Xcodeは、カスタムビューコントローラを作成して名付ける際、それを明確にして助けます。
    それは素晴らしいことなので、新しい名前をそのままにしておきます。

  6. "Also create XIB file"オプションが選択されていないことを確認してください。

  7. Nextをクリックします。

  8. 保存場所はデフォルトでプロジェクトのディレクトリになっています。
    そのままにしておきます。

  9. Groupオプションはデフォルトでアプリ名のToDoListになっています。
    そのままにしておきます。

  10. Targetsセクションはデフォルトでアプリが選択、アプリのテストは非選択になっています。
    これは完璧なので、そのままにしておきます。

  11. Createをクリックします。

これでカスタムビューコントローラのサブクラスを作成したので、汎用ビューコントローラの代わりにカスタムクラスを使用するようにストーリーボードに指示する必要があります。
ストーリーボードファイルは、アプリによって実行時に使用されるオブジェクトの設定です。
アプリの機構としては、ストーリーボードで始めたときの汎用ビューコントローラの代わりにカスタムビューコントローラを用いるのは十分スマートですが、貴方が何をしたいのかをストーリーボードに指示する必要があります。


シーンのビューコントローラとしてクラスを関連付けする

  1. プロジェクトナビゲータでMain.storyboardを選択します。

  2. 必要に応じて、アウトラインビューoutline_view_toggle_2x.png を開きます。

  3. アウトラインビューで、"View Controller - Add To-Do Item"ビューコントローラを選択します。

    "View Controller - Add To-Do Item"シーンの三角ボタンをクリックし、シーンのオブジェクトを表示します。
    その最初はビューコントローラである必要があります。
    選択するためにクリックします。
    シーン行がビューコントローラ行と異なるアイコンを持っていることに注意してください。

  4. ビューコントローラを選択した状態で、ユーティリティ領域のアイデンティティインスペクタinspector_identity_2x_201402130135484b9.png を開きます。

    アイデンティティインスペクタは、左から三番目のボタンをクリックした時に、ユーティリティ領域の上部に表示されます。
    クラスなどのオブジェクトのアイデンティティに関連する、ストーリーボード内のオブジェクトのプロパティを編集することができます。

    select_identity_inspector_2x.png

  5. アイデンティティインスペクタで、Classオプションのポップアップメニューを開きます。

    Xcodeが知っている全てのビューコントローラクラスのリストが表示されます。
    リストの最後にカスタムビューコントローラXYZAddToDoItemViewControllerがあります。
    Xcodeに指示するため、このシーンにビューコントローラを使用するよう選択します。

ストーリーボードは実行時、汎用UIViewControllerの代わりに(カスタムビューコントローラのサブクラスである)XYZAddToDoItemViewControllerのインスタンスを作成します。
Xcodeは追加ToDo項目ビューコントローラのシーンの説明を"View Controller – Add To-Do Item"から"Add To Do Item View Controller – Add To-Do Item"に変更していることに注意してください。
Xcodeは現在このシーンのためにカスタムビューコントローラを使用しているを知り、ストーリーボードで何が起こっているかを容易に理解するためにカスタムクラス名を解釈します。

そしてテーブルビューコントローラも同様に行います。


UITableViewControllerのサブクラスの作成

  1. File > New > Fileを選択します(またはCommand + Nを押します)。

  2. 左側でiOS下のCocoa Touchを選択し、そしてObjective-C Classを選択します。
    このチュートリアルの最後の手順以来クラスを作成していなければ、おそらく既に選択されています。

  3. Nextをクリックします。

  4. Class欄でToDoListと入力します。
    Xcodeがクラス接頭辞として置いているXYZと、作成するものの種類であるViewControllerの間に挿入ポイントがあることに注意してください。

  5. "Subclass of"のポップアップメニューでUITableViewControllerを選択してください。

  6. "Also create XIB file"オプションが選択されていないことを確認してください。

  7. Nextをクリックします。

    保存場所はデフォルトでプロジェクトのディレクトリになっています。
    そのままにしておきます。

  8. Groupオプションはデフォルトでアプリ名のToDoListになっています。
    そのままにしておきます。

  9. Targetセクションはデフォルトでアプリが選択、アプリのテストは非選択になっています。
    これは完璧なので、そのままにしておきます。

  10. Createをクリックします。

再度、ストーリーボード内のカスタムテーブルビューコントローラであるXYZToDoListViewControllerの設定を確認する必要があります。


ストーリーボードの設定

  1. プロジェクトナビゲータでMain.storyboardを選択します。

  2. 必要に応じてアウトラインビューを開きます。

  3. アウトラインビューでテーブルビューコントローラを選択し、ユーティリティ領域でアイデンティティインスペクタinspector_identity_2x_201402130135484b9.pngを開きます。

  4. アイデンティティインスペクタで、ClassオプションのポップアップメニューからXYZToDoListViewControllerを選択します。

これでビューコントローラにカスタムコードを追加する準備ができました。



●戻る移動をするセグエで巻き戻す

プッシュとモーダルのセグエに加えて、Xcodeはアンワインドセグエも提供しています。
このセグエはユーザが特定のシーンから以前のシーンに戻ることができ、ユーザがそれらのシーン間を移動する時に実行される独自のコード追加するための場所を提供しています。
XYZAddToDoItemViewControllerからXYZToDoListViewControllerに戻る移動にアンワインドセグエを使用することができます。

アンワインドセグエは行き先のビューコントローラ(貴方が巻き戻ししたいビューコントローラ)にアクションメソッドを追加することによって作成されます。
巻き戻すことができるメソッドはアクション(IBAction)を返し、パラメータとしてストーリーボードセグエ(UIStoryboardSegue)を渡す必要があります。
XYZToDoListViewControllerに巻き戻りたい場合、XYZToDoListViewControllerのインターフェイスと実装に、このフォーマットでアクションメソッドを追加する必要があります。


XYZToDoListViewControllerに巻き戻す

  1. プロジェクトナビゲータでXYZToDoListViewController.hを開きます。

  2. @interface行の後に以下のコードを追加します。

    - (IBAction)unwindToList:(UIStoryboardSegue *)segue;

  3. プロジェクトナビゲータでXYZToDoListViewController.mを開きます。

  4. @implementation行の後に以下のコードを追加します。

    - (IBAction)unwindToList:(UIStoryboardSegue *)segue
    {

    }

アンワインドアクションには望む名前を付けることができます。
unwindToList:を呼び出すと、巻き戻す場所に明確に行くとこができます。
将来のプロジェクトのために同じような命名規則を採用するので、アクション名は巻き戻って行く場所を明確にします。

今のところ、このメソッドの実装は空のままにしておきます。
後ほど、ToDoリストに項目を追加するためにXYZAddToDoItemViewControllerからデータを取得する際に、このメソッドを使用します。

アンワインドセグエを作成するには、ソースビューコントローラであるXYZAddToDoItemViewContorllerのドック内にあるExitアイコンを介して、unwindToList:アクションにCancelとDoneボタンをリンクします。


unwindToList:アクションへのボタンのリンク

  1. プロジェクトナビゲータでMain.storyboardを選択します。

  2. キャンバス上で、追加ToDo項目シーンのCancelボタンからドック内にあるExit項目にControl + ドラッグします。

    drag_to_exit_icon_2x.png

    シーンドックにExit項目が表示されていなく、代わりにシーンの説明が表示されている場合は、表示されるまでキャンバス上のZoom In zoom_in_2x.png ボタンをクリックしてください。

    ドラッグを終了した場所にメニューが表示されます。

  3. ショートカットメニューからunwindToList:を選択します。

    これはXYZToDoListViewController.mファイルにアクションを追加したことになります。
    これはCancelボタンをタップした時にセグエが巻き戻り、このメソッドが呼び出されることを意味します。

  4. キャンバス上で、XYZAddToDoItemViewControllerシーンのDoneボタンからドック内にあるExit項目にControl + ドラッグします。

  5. ショートカットメニューからunwindToList:を選択します。

CancelとDoneボタンの両方に同じアクションを使用していることに注意してください。
次のチュートリアルで、アンワインドセグエを処理するためのコード記述する際に、2つの異なる状況を区別します。

チェックポイント:アプリを実行します。
起動するとテーブルビューが表示されますが、そこにデータはありません。
追加ボタンをクリックすると、XYZToDoListViewControllerからXYZAddToDoItemViewControllerに移動することができます。
テーブルビューに戻る移動をするためのCancelとDoneボタンをクリックすることもできます。

何故データが表示されないのでしょうか?
テーブルビューには静的または動的にデータを取得する2つの方法があります。
テーブルビューのコントローラが必要なUITableViewDataSourceメソッドを実装する際、静的データがInterface Builderで構成されているかどうかに関わらず、テーブルビューは表示するためのデータをビューコントローラに要求します。
XYZToDoListViewController.mを見ると、numberOfSectionsInTableView:tableView:numberOfRowsInSection:、そしてtableView:cellForRowAtIndexPath:の3つのメソッドが実装されていることに気付くでしょう。
これらのメソッドの実装をコメントアウトすることによって、再び表示するために静的データを取得することができます。
後にお好みで試してみてください。



●要約

この時点で、アプリのインターフェイスの開発が終わりました。
ToDoリストに項目を追加するものとリストを表示するものの2つのシーンを持ち、その間を移動することができます。
次にユーザが新しいToDo項目を追加し、リストに表示する機能を実装します。
次のモジュールは、この動作を実装するためのデータの操作を扱います。



参考文献

Apple/Start Developing iOS Apps Today

0 CommentsPosted in 資料

Start Developing iOS Apps Today(5)~インタラクションの定義

2014. 02. 17
●インタラクションの定義

ユーザインターフェイスをレイアウトした後、ユーザがそれらと対話できるようにする必要があります。
これはコントローラの出番です。
コントローラはユーザのアクションへの応答と、コンテンツをビューに挿入することによりビューをサポートします。
コントローラオブジェクトは、ビューがデータモデルの変化について、またはその逆を感知するための仲介役です。
ビューはアプリのコントローラを介してモデルデータの変更を通知し、コントローラはモデルオブジェクトに(テキストフィールドでのテキスト入力など)ユーザが始めた変更を通達します。
それらがユーザのアクションに応答するか、あるいはナビゲーションを定義しているかどうかといったアプリの動作をコントローラが実装します。

ModelViewController_c_2x.png



●ビューコントローラ

基本的なビュー階層を構築した後の次の工程は、視覚的要素の制御とユーザ入力への応答です。
iOSアプリでは、サブビューの階層を含むコンテンツビューの管理にビューコントローラ(UIViewController)を使用します。

view_layer_objects_2x_201401311159176df.png

ビューコントローラビュー階層の一部ではなく、インターフェイスの要素でもありません。
代わりに階層内のビューオブジェクトを管理し、それらの動作を提供します。
ストーリーボードで構築する各コンテンツビュー階層には対応するビューコントローラが必要であり、インターフェイス要素の管理と、ユーザとの相互作用に応答するタスクを実行する責任があります。
これは通常、各コンテンツビュー階層用にカスタムのUIViewControllerのサブクラスを記述することを意味します。
アプリが複数のコンテンツビューを持っている場合、各コンテンツビューに異なるカスタムビューコントローラクラスを使用します。

ビューコントローラは多くの役割を果たします。
コンテンツビューのライフサイクルの管理や、デバイスが回転した時に向きを変更する処理、アプリのデータモデルとデータを表示するビュー間の情報の流れを調整します。
しかし、おそらく最も明白な役割はユーザ入力への応答です。

またビューコントローラは、ある種のコンテンツから別のコンテンツへの遷移を実装するために使用します。
iOSアプリのコンテンツを表示する領域は僅かな量なので、ビューコントローラはあるビューコントローラからビューを削除して別のビューに置換するために必要な基盤を提供しています。

アプリの相互作用を定義するには、ストーリーボード内でビューと通信するビューコントローラファイルを作成します。
アクションとアウトレットを通じて、ストーリーボードとソースコード間の通信を定義することによって、これを行います。



●アクション

アクションは、アプリ内で発生する可能性があるいくつかのイベントへリンクされたコードの一部です。
イベントが発生すると、コードが実行されます。
データの一部の操作からユーザインターフェイスの更新まで、何らかを達成するためのアクションを定義することができます。
貴方はユーザまたはシステムのイベントに応答して、アプリの流れを駆動するためにアクションを使用します。

IBAction戻り値型とsenderパラメータを持つメソッドを作成および実装することによってアクションを定義します。

- (IBAction)restoreDefaults:(id)sender;

senderパラメータは、アクションをトリガするための責任を持つオブジェとへのポインタです。
IBAction戻り値型は特殊なキーワードでvoidキーワードに似ていますが、このメソッドがInterface Builder(キーワードがIB接頭辞を持つ理由)でストーリーボードから接続することができるアクションであることを示しています。
チュートリアル:ストーリーボード」で、ストーリーボードの要素にIBActionアクションをリンクする方法についての詳細を学びます。



●アウトレット

アウトレットは、(ストーリーボードに追加されたオブジェクトの)インターフェイスからソースコードファイル内のオブジェクトを参照する方法を提供します。
ビューコントローラファイルにストーリーボード内の特定のオブジェクトからControl + ドラッグすることによって、アウトレットを作成します。
これはビューコントローラファイル内にあるオブジェクトのプロパティを作成し、実行時にコードからオブジェクトにアクセスと操作をすることができます。
例えば2つ目のチュートリアルでは、コード内にあるテキストフィールドのコンテンツにアクセスできるように、ToDoListアプリのテキストフィールドにアウトレットを作成します。

アウトレットはIBOutletプロパティとして定義します。

@property (weak, nonatomic) IBOutlet UITextField *textField;

IBOutletキーワードは、Interface Builderからこのプロパティに接続することができることをXcodeに伝えます。
チュートリアル:ストーリーボード」で、ストーリーボードからソースコードにアウトレットを接続する方法についての詳細を学びます。



●コントロール

コントロールはユーザがコンテンツとの相互作用を操作するボタンやスライダ、またはスイッチなどのユーザインターフェイスオブジェクトで、入力の提供やアプリ内のナビゲート、貴方の定義した他のアクションの実行などを行います。
コントロールは、コードがユーザインターフェイスからのメッセージを受信するための方法を提供します。

ユーザがコントロールを操作すると、コントロールイベントが作成されます。
コントロールイベントは、コントロールから指を離す、コントロール上で指をドラッグする、テキストフィールド内をタッチするなど、ユーザがコントロール上で行う様々な物理的なジェスチャを表します。

イベントの種類には3つの一般的なカテゴリがあります。

  • タッチとドラッグイベント。
    タッチとドラッグイベントは、ユーザがタッチまたはドラッグでのコントロールを操作した時に発生します。
    タッチイベントには、いくつかの利用可能な段階があります。
    ユーザが最初にボタン上に指をタッチした時、Touch Down Insideイベントがトリガされますが、ユーザがボタンの外にドラッグするとそれぞれのドラッグイベントがトリガされます。
    Touch Up Insideは、ボタンの縁の境界内に留まったままボタンから指を離した時に送信されます。
    ユーザが指を離す前にボタンの外に指をドラッグした場合、実際にはタッチが無効となり、Touch Up Outsideイベントがトリガされます。

  • 編集イベント。
    ユーザがテキストフィールドを編集した時、編集イベントが発生します。

  • 値変更イベント。
    値変更イベントは、ユーザが一連の異なる値を発生させるためにコントロールを操作した時に発生します。

インタラクションを定義する際、アプリ内の全てのコントロールに関連付けられているアクションを知ることで、インターフェイスのユーザに対するコントロールの目的が明白になります。



●ナビゲーションコントローラ

アプリが1つ以上のコンテンツビュー階層を持っている場合、それらの間で移行できるようにする必要があります。
そのためにはナビゲーションコントローラ(UINavigationController)という特別な種類のビューコントローラを使用します。
ナビゲーションコントローラは、ユーザがiOSのMailアプリ内で、電子メールアカウントと受信トレイのメッセージ、そして個々の電子メール間を移動する際など、ビューコントローラの一連の前後の移動を管理します。

特定のナビゲーションコントローラによって管理されたビューコントローラのセットは、ナビゲーションスタックと呼ばれます。
ナビゲーションスタックはラストイン・ファーストアウトの、カスタムのビューコントローラオブジェクトのコレクションです。
スタックに追加された最初の項目がルートビューコントローラとなり、スタックからポップオフすることはありません。
他のビューコントローラは、ナビゲーションスタックにプッシュしたりポップオフすることができます。

ナビゲーションコントローラの主な仕事は、コンテンツビューコントローラの表示を管理することですが、自身のカスタムビューを表示する責任もあります。
具体的には、backボタンとカスタマイズ可能な他のボタンを含むナビゲーションバー(ナビゲーション階層におけるユーザの位置について、コンテキストを提供する画面上部にあるビュー)の表示です。

一般的に貴方がナビゲーションスタックからビューコントローラをポップオフする全ての作業を行う必要は無く、ナビゲーションコントローラによって提供されるbackボタンが処理します。
ただし、スタックへのビューコントローラのプッシュは手動で行う必要があります。
これらはストーリーボードを使用して行うことができます。



●ナビゲーションを定義するためにストーリーボードを使用

これまでは、アプリ内のコンテンツの単一画面を作成するためにストーリーボードを使用する方法について学びました。
ここではアプリに複数のシーン間のフローを定義するために使用する方法について学びます。

最初のチュートリアルでは、貴方の作業するストーリーボードはシーンを一つ持っていました。
ほとんどのアプリでは、ストーリーボードはそれぞれビューコントローラとそのビュー階層を表される一連のシーンで構成されます。
シーンは(ソースとデスティネーションの)2つのビューコントローラ間の遷移を表すセグエによって接続されています。

segue_2x.png

作成できるセグエにはいくつかの種類があります。

  • プッシュ。
    プッシュセグエはナビゲーションスタックに目的先のビューコントローラを追加します。
    プッシュセグエは、ソースビューコントローラがナビゲーションコントローラに接続されている時のみ使用することができます。

  • モーダル。
    モーダルセグエは、単にあるビューコントローラが別のコントローラにモーダルに表示するもので、アプリのメインフローに戻る前に、提示されたコントローラでいくつかの動作を実行するようにユーザに要求します。
    モーダルビューコントローラはナビゲーションスタックに追加されず、代わりに一般的には提示しているビューコントローラの子と見なされます。
    提示しているビューコントローラは、
    責任がある 却下する モーダルビューコントローラの作成と提示を却下する責任があります。

  • カスタム。
    UIStoryboardSegueをサブクラス化することによって、独自のカスタム遷移を定義することができます。

  • アンワインド。
    アンワインドセグエは、ビューコントローラの既存のインスタンスにユーザを戻すために、1つ以上のセグエを介して遡って移動します。
    逆方向のナビゲーションを実装するには、アンワインドセグエを使用します。

セグエの代わりにリレーションシップによってシーンを接続することもできます。
例えば、ナビゲーションコントローラとそのルートビューコントローラ間のリレーションシップがあります。
この場合、リレーションシップはナビゲーションコントローラによってルートビューコントローラの抑制を表します。

アプリのユーザインターフェイスの構想にストーリーボードを使用する際、ビューコントローラの1つが初期ビューコントローラとして印されていることを確認することが重要です。
実行時には、このビューコントローラがアプリの起動時に最初に表示されるコンテンツビューとなり、必要に応じて他のビューコントローラのコンテンツビューに遷移します。

これでストーリーボードのビューとビューコントローラでの作業の基礎を学んだので、次のチュートリアルでToDoListアプリにこの知識を取り入れる時が来ました。



参考文献

Apple/Start Developing iOS Apps Today

0 CommentsPosted in 資料

Start Developing iOS Apps Today(4)~ユーザインターフェイスの設計

2014. 02. 10
●ユーザインターフェイスの設計

ビューはユーザインターフェイスを構築するための構成要素です。
明快かつ洗練され、有用な方法でコンテンツを表示するために、どのようにビューを使用するかを理解することが重要です。
効果的にアプリのコンテンツを披露する優れたユーザインターフェイスを作成することは、成功するアプリを構築するために不可欠です。
この章では、インターフェイスを定義するためにストーリーボードでのビューの作成・管理について学びます。

ModelViewController_v_2x.png



●ビュー階層

ビューは自身を画面上に表示してユーザの入力に応答するだけではなく、他のビューのコンテナとして機能します。
その結果、アプリのビューはビュー階層と呼ばれる階層構造に配置されます。
ビュー階層は、他のビューに関してビューのレイアウトを定義します。
その階層内では、ビュー内に封入されたビューのインスタンスをサブビューと呼び、ビューを封入する親ビューをスーパービューと呼びます。
ビューのインスタンスは複数のサブビューを持つことができますが、スーパービューは1つのみ持つことができます。

ビュー階層の最上位はウィンドウオブジェクトです。
ウィンドウはUIWindowクラスのインスタンスによって表され、画面上に表示するためのビューオブジェクトを追加することができる基本的なコンテナとして機能します。
ウィンドウ自体はコンテンツを表示しません。
コンテンツを表示するには、ウィンドウに(サブビューの階層で)コンテンツビューを追加します。

コンテンツビューとそのサブビューをユーザに見えるようにするには、コンテンツビューをウィンドウのビュー階層に挿入する必要があります。
ストーリーボードを使用する場合、この配置は自動的に設定されます。
アプリケーションオブジェクトはストーリーボードを読み込み、適切なビューコントローラクラスのインスタンスを作成し、各ビューコントローラのコンテンツビュー階層をアンアーカイブして、ウィンドウへ初期ビューコントローラのコンテンツビューを追加します。
次の章でビューコントローラの管理について詳細を学びますが、今はストーリーボード内に単一のビューコントローラの階層を作成することに焦点を当てます。



●ビューを使用したインターフェイスの構築

アプリを設計する時、目的に応じて使用するビューの種類を知っておくことが重要です。
例えばユーザからテキスト入力を収集するために使用するビューの種類はテキストフィールドなどで、ラベルなどの静的テキストの表示に使用するものとは異なります。
描画用にUIKitのビューを使用するアプリは、すぐに基本的なインターフェイスを組み立てることができるので作成は容易です。
UIKitのビューオブジェクトは、UIViewクラスのインスタンスまたはサブクラスの一つです。
UIKitフレームワークは、データの表示や整理に役立つ多くの種類のビューを提供します。

各ビューは独自の特定の機能を持っていますが、UIKitのビューは7つの一般的なカテゴリに分類されています。

カテゴリ目的
views_content_2x.png
コンテンツ
画像やテキストなど、特定の種類のコンテンツ
を表示
イメージビュー、ラベル
views_collections_2x.png
コレクション
ビューのコレクションやグループを表示コレクションビュー、テーブルビュー
views_controls_2x.png
コントロール
アクションの実行や情報の表示ボタン、スライダ、スイッチ
views_bars_2x.png
バー
ナビゲートやアクションの実行ツールバー、ナビゲーションバー、タブバー
views_input_2x.png
入力
ユーザ入力テキストを受信検索バー、テキストビュー
views_containers_2x.png
コンテナ
他のビューのコンテナとして機能ビュー、スクロールビュー
モーダルユーザが何らかのアクションを実行できる
ように、アプリの通常のフローに割り込む
アクションシート、アラートビュー

Interface Builderを使用してグラフィカルにビューを組み立てることができます。
Interface Builderは、標準のビューやコントロール、そして貴方のインターフェイスを構築するのに必要な他のオブジェクトのライブラリを提供します。
ライブラリからこれらのオブジェクトをドラッグした後に、それらをキャンバス上にドロップし、貴方の望む方法でそれらを配置します。
次に、ストーリーボードでそれらを保存する前に、それらのオブジェクトを構成するためにインスペクタを使用します。
コードを記述すること無く、ビルドしてアプリを実行することで即座に結果を確認することができます。

UIKitフレームワークは多くの種類のコンテンツを表示するための標準ビューを提供していますが、UIView(またはその子孫)をサブクラス化することによって独自のカスタムビューを定義することができます。
カスタムビューは、貴方が描画やイベント処理タスクの全てを処理するUIViewのサブクラスです。
このチュートリアルではカスタムビューを使用していませんが、iOS Viewプログラミングガイドの「カスタムビューの定義(p.60)」でカスタムビューの実装について詳細を学ぶことができます。



●ビューのレイアウトにストーリーボードを使用

グラフィカルな環境でのビュー階層のレイアウトにはストーリーボードを使用します。
ストーリーボードは、ビューと連携しインターフェイスを構築する視覚的な方法を直接提供します。

最初のチュートリアルで見たように、ストーリーボードはシーンで構成され、各シーンは関連付けされたビュー階層を持っています。
シーンのビュー階層に自動的に追加するには、オブジェクトライブラリの外にビューをドラッグしてストーリーボードのシーンに配置します。
階層内のビューの位置は、それを置く場所によって決定されます。
シーンにビューを追加した後に、サイズ変更や操作、設定、キャンバス上での移動をすることができます。

またキャンバスはインターフェイス内のオブジェクトのアウトラインビューも表示します。
アウトラインビューはキャンバスの左側に表示され、ストーリーボード内のオブジェクトを階層表示で見ることができます。

outline_view_2x.png

ストーリーボードのシーンでグラフィカルに作成するビュー階層は、実際にはObjective-Cオブジェクトが"収縮包装された"セットです。
実行時には、これらの収縮包装されたオブジェクトはアンアーカイブされています。
つまりユーティリティ領域で様々なインスペクタを使用して視覚的に設定したプロパティで構成された、関連するクラスのインスタンスの階層です。



●ビューの設定にインスペクタを使用

ストーリーボードのビューを操作する時、インスペクタペインが不可欠なツールです。
インスペクタペインはオブジェクトライブラリの上のユーティリティ領域に表示されます。

inspector_pane_2x.png

各インスペクタは、インターフェイスの要素のための重要な構成オプションを提供します。
オブジェクトを選択した時、例えばストーリーボード内のビューの場合、そのオブジェクトの様々なプロパティをカスタマイズするためにインスペクタをそれぞれ使用することができます。

  • inspector_file_2x.png  ファイル。
    ストーリーボードについての一般的な情報を指定できます。

  • inspector_quick_help_2x.png  クイックヘルプ。
    オブジェクトについての有用なドキュメントを提供します。

  • inspector_identity_2x.png  アイデンティティ。
    オブジェクトのカスタムクラスを指定し、そのアクセシビリティ属性を定義できます。

  • inspector_attributes_2x_2014012909354809c.png  属性。
    オブジェクトの表示属性をカスタマイズできます。

  • inspector_size_2x.png  サイズ。
    オブジェクトのサイズと自動レイアウト属性を指定できます。

  • inspector_connections_2x.png  コネクション。
    インターフェイスとソースコード間の接続を作成できます。

最初のチュートリアルでは、属性インスペクタで作業を始めました。
ストーリーボード内のビューや他のオブジェクトを設定するために、チュートリアルの残りの部分でこれらのインスペクタを引き続き使用します。
特にビューの設定に属性インスペクタ、ビューコントローラの設定にアイデンティティインスペクタ、そしてビューとビューコントローラ間の接続の作成にコネクションインスペクタを使用します。



●ビューの配置に自動レイアウトを使用

ストーリーボードでビューの配置を始める際には、様々な状況を検討する必要があります。
iOSアプリは色々な画面サイズや向き、言語で、多くの様々なデバイスで実行されます。
静的インターフェイスを設計する代わりに、動的かつ画面サイズやデバイスの向き、ローカリゼーション、およびメトリクスの変更に対してシームレスに対応を貴方は望むでしょう。

汎用性の高いインターフェイスを作成するビューを使用し易くするため、Xcodeは自動レイアウトと呼ばれるツールを提供しています。
自動レイアウトは、アプリのユーザインターフェイスにビュー間の関係を表現するためのシステムです。
自動レイアウトは個々のビューまたはビューのセット間での制約の条件で、これらの関係を定義することができます。

自動レイアウトのメニューはキャンバスの右下の領域に常駐しており、4つのセグメントがあります。
キャンバス上のビューに様々な種類の制約を追加して、レイアウトの問題を解決し、サイズ変更動作による制約の決定するために、このメニューを使用します。

al_menu_2x.png

作業 簡潔に 自動レイアウト 2つ目のチュートリアル 追加 サポート ランドスケープモード ToDoListアプリにランドスケープモードのサポートを追加するために、2つ目のチュートリアルでは自動レイアウトで簡単な作業を行います。



参考文献

Apple/Start Developing iOS Apps Today

0 CommentsPosted in 資料

Start Developing iOS Apps Today(3)~アプリ開発の工程

2014. 02. 03
●アプリ開発の工程

アプリの開発作業は困難に思えるかもしれませんが、その工程はいくつかの理解し易い手順に分けることができます。
貴方が最初のアプリを開発するものとして、始めるのに役立ち、正しい方向へ案内する手順を以下に示します。

setup_2x.png



●コンセプトの定義

全ての素晴らしいアプリはコンセプトから始まります。

そのコンセプトを捻出する最良の方法は、貴方のアプリで解決したい問題を熟慮することです。
素晴らしいアプリは単一の明確な問題を解決します。
例えばSettingsアプリは、ユーザがデバイス上の全ての設定を調整をすることができます。
関連したタスクの配置を達成するため、ユーザのために単一のインターフェイスを提供します。

コンセプトを捻出する際に考慮すべき、いくつかの重要な質問を以下に示します。

視聴者は誰か?
アプリのコンテンツや体験は、子供用ゲームか、ToDoリストアプリなのか、または自身が学習するためのアプリとして記述しているのかによって異なります。

アプリの目的は何か?
明確に定義された目的を持つアプリであることが重要です。
目的の定義のひとつは、ユーザがアプリを使用する動機となるものを理解することです。

アプリで解決しようとしている問題は何か?
アプリは複数の異なる問題の解決策を提供しようとするのではなく、単一の問題を解決する必要があります。
貴方のアプリが関連の無い問題を解決しようとしていることが判明した場合、複数のアプリを記述することを検討してください。

どのようなコンテンツを組み込むのか?
コンテンツのタイプは、どのようにアプリがユーザに提示し対話するか検討してください。
アプリで提示するコンテンツのタイプを補完するために、ユーザインターフェイスを設計します。

アプリのコンセプトは完全に洗練したり、アプリの開発開始時に完了している必要はありません。
ですが、どのような方向性で何をする必要があるのかのアイデアを持つために役立ちます。



●ユーザインターフェイスの設計

アプリのコンセプトが決まった後は、優れたユーザインターフェイスを設計することが、成功するアプリを作成するための次の段階です。
ユーザには、できる限り最も簡単な方法でアプリのインターフェイスと対話できるようにする必要があります。
ユーザとのインターフェイスの設計は、効率的かつ明確で理解し易くすることを心掛けます。

おそらくユーザインターフェイスの構築で最も挑戦的なことは、設計にコンセプトを翻訳し、その設計を実装することです。
この工程の簡素化には、ストーリーボードの使用が役立ちます。
ストーリーボードでグラフィカルな環境を使用して、単一の工程でインターフェイスを設計し実装してみます。
構築していく過程で、その構築が正確かを確認し、動作しているかどうかについて即時にフィードバックを取得し、インターフェイスの視覚的な変更を行うことができます。

ストーリーボードでインターフェイスを構築する時は、ビューで作業します。
ビューはユーザにコンテンツを表示します。
チュートリアル:基礎」ではストーリーボードのシーンに単一のビューを使用して、ToDoListアプリのユーザインターフェイスを定義するために始めました。
より複雑なアプリを開発する際には、より多くのシーンやビューのインターフェイスを作成することになります。

チュートリアル:ストーリーボード」では別のコンテンツのタイプを表示するために、いくつかの異なるビューを使用して、ToDoListアプリのユーザインターフェイスを構築して完成させます。
ユーザインターフェイスの設計」でユーザインターフェイスの設計や作成で、ビューやストーリーボードでの作業についての詳細を学びます。



●インタラクションの定義

ユーザインターフェイスは、それを後援するロジック無しではほとんど何もしません。
インターフェイスを作成した後、インターフェイスでのユーザのアクションに応答するコードを記述することによって、表示するものとユーザと対話する方法を定義します。

インターフェイスの動作を追加することについて考え始める前に、iOSアプリはイベント駆動プログラミングを基板にしていることを理解することが重要です。
イベント駆動プログラミングでは、アプリの流れはイベント(システムイベントまたはユーザのアクション)によって決定されます。
ユーザはインターフェイスでアクションを実行することで、アプリ内部のイベントをトリガします。
これらのイベントはアプリのロジックの実行と、そのデータの操作となります。
ユーザのアクションへのアプリの応答は、インターフェイスに戻り反映されます。

ユーザがインターフェイスと対話することができる方法を定義するように、イベント駆動プログラミングの維持を心掛けてください。
なぜなら
開発者というよりユーザにとってはアプリのコードの特定の部分が実行された時の制御であるため、ユーザが実行できるアクションと何がそれらのアクションに応答して発生するかを正確に識別したいでしょう。

貴方はビューコントローラでのイベント駆動ロジックの大部分を定義します。
インタラクションの定義」でビューコントローラの処理についての詳細を学びます。
その後「チュートリアル:ストーリーボード」でToDoListアプリに機能とインタラクティビティを追加するために、これらのコンセプトを適用します。



●動作の実装

ユーザがアプリで実行することができるアクションを定義した後は、コードを記述して動作を実装します。

iOSアプリのコードを記述する時、ほとんどの時間はObjective-Cプログラミング言語での記述に費やされます。
3つ目のモジュールでObjective-Cについての詳細を学びますが、今のところは言語の語彙でいくつかの基本的な知識を持つと役立ちます。

Objective-CはCプログラミング言語の上に構築され、オブジェクト指向の機能と動的ランタイムを提供します。
プリミティブ型(int、floatなど)、構造体、関数、ポインタ、制御フロー構造(while、if...else、for文)など、一般的な要素を全て扱えます。
またstdlib.hやstdio.hで宣言されているような標準Cライブラリのルーチンへもアクセスできます。


オブジェクトはアプリの構成要素

iOSアプリを構築する時、ほとんどの時間はオブジェクトの操作に費やされます。

オブジェクトは関連付けされた動作とデータをパッケージします。
アプリは視覚的インターフェイスの表示や、ユーザの入力への応答、または情報の格納など、特定の問題を解決するために相互通信する相互連結されたオブジェクトの大きなエコシステムとして考えることができます。

貴方はアプリを構築するために、文字列や配列などのデータオブジェクトに加え、ボタンやラベルなどのインターフェイス要素に至るまで、多くの様々な種類のオブジェクトを使用します。


クラスはオブジェクトの青写真

クラスはオブジェクトの特定のタイプに共通する動作や特性を記述しています。

同じ方法で同じ青写真から構築された複数の建物は構造が一致しているように、クラスの全てのインスタンスはそのクラスの他の全てのインスタンスと同じプロパティと動作を共有しています。
貴方は独自のクラスを記述したり、貴方のために定義されたフレームワークのクラスを使用することができます。

貴方は特定のクラスのインスタンスを作成することによってオブジェクトを作ります。
貴方はそれを割り当て、許容可能なデフォルト値で初期化します。
オブジェクトを割り当てる時、オブジェクトのために十分なメモリを確保し、全てのインスタンス変数をゼロに設定します。
初期化はオブジェクトの初期状態(つまりインスタンス変数やプロパティ)を妥当な値に設定し、オブジェクトを返します。
初期化の目的は使用可能なオブジェクトを返すことです。
オブジェクトを使用可能にするには、割り当てと初期化の両方が必要です。

Objective-Cプログラミングの基本的な概念の一つはクラスの継承で、クラスは親クラスから動作を継承するという考えです。
あるクラスが別のクラスから継承している場合、子(またはサブクラス)は親によって定義された全ての動作やプロパティを継承します。
サブクラスは独自の追加動作やプロパティを定義したり、また親の動作をオーバーライドすることができます。
これは既存の動作を複製すること無く、クラスの動作を拡張する機能を提供します。


オブジェクトはメッセージを介して通信する

オブジェクトは実行時に互いにメッセージを送信することによって相互作用します。
Objective-Cの観点では、あるオブジェクトがそのオブジェクトのメソッドを呼び出すことによって、別のオブジェクトにメッセージを送信します。

Objective-Cでは、オブジェクト間でメッセージを送信するにはいくつかの方法がありますが、最も一般的なものは角括弧を使用した基本的な構文です。
クラスPersonのオブジェクトsomePersonがある場合、以下のようにsayHelloメッセージを送信することができます。

[somePerson sayHello];

左辺のsomePersonはメッセージのレシーバです。
右辺のsayHelloメッセージはレシーバを呼び出すメソッド名です。
言い換えると、上記のコード行が実行された時、somePersonはsayHelloメッセージを送信します。

programflow1_2x.png


プロトコルはメッセージの協約を定義する

プロトコルは指定された状況でのオブジェクトの予想される動作のセットを定義します。
プロトコルは任意のクラスの実装を選択することができるプログラムインターフェイスの形式で提供されます。
プロトコルを使用すると、XMLコードの構文解析やオブジェクトのコピーなど、継承によって離れて関連付けされた2つのクラスで特定の目的を達成するために相互に通信することができます。

protocol_2x_2014012613210513d.png

他のクラスに有用な動作を提供することができる任意のクラスは、匿名で動作を販売するためのプログラムインターフェイスを宣言することができます。
他のクラスはプロトコルを採用するか選択することができ、そのメソッドを1つ以上実装して動作を利用します。


データの組み込み

アプリの動作を実装した後、アプリのインターフェイスをサポートするためにデータモデルを作成します。
アプリのデータモデルは、アプリ内のデータを保持する方法を定義します。
データモデルは、オブジェクトの基本的な辞書から複雑なデータベースまで扱えます。

アプリのデータモデルは、アプリのコンテンツと目的を反映する必要があります。
たとえユーザが直接データをやり取りしなくても、インターフェイスとデータ間に明確な相互関係がある必要があります。

良いデータモデルは、アプリのための強固な基盤を作成するのに不可欠です。
それはスケーラブルなアプリの構築や機能性の向上、機能を変更を容易にします。
データの組み込み」で独自のデータモデルの定義についての詳細を学びます。


適切なリソースを使用する

デザインパターンは、アプリの一般的な問題を解決するためのベストプラクティスです。
アプリの残りの部分で、データモデルの構造とその相互作用を定義を支援するためにデザインパターンを使用してください。
貴方がデザインパターンを正しく理解し使用すると、単純で効率的なアプリをより簡単に作成することができます。
デザインパターンの使用」でデザインパターンについての詳細を学びます。

モデルの実装を開始した際と同様に、ゼロから全てを実装する必要は無いことを覚えておいてください。
構築するために既存の機能を提供するフレームワークがいくつかあります。
例えばFoundationフレームワークは(文字列や数字など)基本的なデータ型だけでなく、他のオブジェクトを格納するためのコレクションクラスを表すクラスが含まれています。
可能な場合、機能の再実装を試みる代わりに既存のフレームワーククラス(または独自のアプリ機能の追加するためにサブクラス)を使用することを推奨します。
このようにして効率的かつ機能的で洗練されたアプリを作成することができます。
Foundationでの処理」でFoundationフレームワークの機能についての詳細を学びます。

多くの場合、貴方はデータモデルの一部として独自のカスタムクラスを記述します。
カスタムクラスを記述することで、アプリの内部構造を整理する方法を細かく制御することができます。
カスタムクラスの記述」でカスタムクラスの作成について学びます。


実際のデータを組み込む

データモデルを最初にテストする時、静的または偽のデータを使用したいと思うでしょう。
この方法では、モデルが組み立てられて正確に接続されていることを知っているので、実際のデータを提供することについて心配することはありません。
正確に動作するデータモデルを定義した後、アプリに実際のデータを取り込みます。

このガイドの残りの部分では、これらの手順をより詳細に説明します。
アプリの開発工程を通して不可欠となる概念的な素材を学び、その後チュートリアルで使用していきます。



参考文献

Apple/Start Developing iOS Apps Today

0 CommentsPosted in 資料






Wave SoundTouch music system IV
Calendar
01 | 2014/02 | 03
Sun Mon Tue Wed Thu Fri Sat
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 -
Recent Articles
iTunes


Swift
Categories
Tips
Profile

水月杏香

Author:水月杏香
永遠の初心者プログラマ。

Wish List
WACOM


ARC
Technical Q&A
情報プロパティリストキー
Start Developing iOS Apps Today
BOSE

Wave SoundTouch music system IV
Reference
NSApplicationDelegateプロトコル
NSArrayクラス
NSAutoreleasePoolクラス
NSBundleクラス
NSBundle UIKit追加分
NSCalendarクラス
NSCoderクラス
NSCodingプロトコル
NSCopyingプロトコル
NSDataクラス
NSDateクラス
NSDateFormatterクラス
NSDictionaryクラス
NSEntityDescriptionクラス
NSEnumeratorクラス
NSErrorクラス
NSExceptionクラス
NSFetchRequestクラス
NSFileHandleクラス
NSFileManagerクラス
NSIndexPathクラス
NSIndexPath UIKit追加分
NSKeyedArchiverクラス
NSKeyedUnarchiverクラス
NSKeyValueCodingプロトコル
NSLocaleクラス
NSManagedObjectクラス
NSManagedObjectContextクラス
NSManagedObjectModelクラス
NSMutableArrayクラス
NSMutableCopyingプロトコル
NSMutableDictionaryクラス
NSMutableSetクラス
NSNotificationクラス
NSNotificationCenterクラス
NSNullクラス
NSNumberクラス
NSObjectクラス
NSObject UIKit追加分
NSObjectプロトコル
NSPersistentStoreクラス
NSPersistentStoreCoordinatorクラス
NSPredicateクラス
NSPropertyListSerializationクラス
NSRunLoopクラス
NSSetクラス
NSStringクラス
NSString UIKit追加分
NSTimerクラス
NSTimeZoneクラス
NSURLクラス
NSURLProtectionSpaceクラス
NSURLRequestクラス
NSUserDefaultsクラス
NSValueクラス

UIActionSheetクラス
UIActionSheetDelegateプロトコル
UIActivityIndicatorViewクラス
UIAlertViewクラス
UIAlertViewDelegateプロトコル
UIApplicationクラス
UIApplicationDelegateプロトコル
UIBarButtonItemクラス
UIBarItemクラス
UIButtonクラス
UIColorクラス
UIControlクラス
UIDatePickerクラス
UIDeviceクラス
UIEventクラス
UIFontクラス
UIGestureRecognizerクラス
UIImageクラス
UIImageViewクラス
UIKit Function
UILabelクラス
UINavigationControllerクラス
UINavigationItemクラス
UIPickerViewクラス
UIPickerViewDataSourceプロトコル
UIPickerViewDelegateプロトコル
UIPinchGestureRecognizerクラス
UIResponderクラス
UIScreenクラス
UIScrollViewクラス
UISearchBarクラス
UISearchBarDelegateプロトコル
UISegmentedControlクラス
UISliderクラス
UISwipeGestureRecognizerクラス
UISwitchクラス
UITableViewクラス
UITableViewCellクラス
UITableViewControllerクラス
UITableViewDataSourceプロトコル
UITableViewDelegateプロトコル
UITapGestureRecognizerクラス
UITextFieldクラス
UITextFieldDelegateプロトコル
UITextInputTraitsプロトコル
UITextViewクラス
UITextViewDelegateプロトコル
UIToolbarクラス
UITouchクラス
UIViewクラス
UIViewControllerクラス
UIWebViewクラス
UIWebViewDelegateプロトコル
UIWindowクラス

AVAudioPlayerクラス
AVAudioPlayerDelegateプロトコル

CADisplayLinkクラス
CAEAGLLayerクラス
CALayerクラス

CGAffineTransform
CGBitmapContext
CGColor
CGColorSpace
CGContext
CGGeometry
CGImage
CGPath

EAGLContextクラス
EAGLDrawableプロトコル

Foundation Constants
Foundation Data Types
Foundation Functions

MPMediaItemクラス
MPMediaItemArtworkクラス
MPMediaPlaylistクラス
MPMediaPropertyPredicateクラス
MPMediaQueryクラス
MPMusicPlayerControllerクラス

Randomization Services

System Sound Services
Amazon


OpenGL ES
SQLite
Monthly Archives
Recent Comments
Recent TrackBacks
RSS Link
Visitors
QR Code
QR