【連載】iOS/Androidアプリ開発入門「サーバ連動アプリを開発しよう！」 (5) コントローラーとビューの実装

2015/03/10 2015/03/12

みなさん、こんにちは！

第4回「(4) モデル実装」の続編です。

前回同様、本格的なアプリを開発するためには「何を知っておかなければならないか」「何を勉強すればいいか」を中心に書いていきたいと思います。

今回は、コントローラーとビューを実装していきたいと思います。

早速はじめていきましょう。

ビューを実装する

まずビューから実装していきましょう。

投稿一覧のビュー

Storyboard（iOS）またはXMLのレイアウトファイル（Android）を使って、ビューを実装しましょう。

iOSの場合、UIViewControllerの上にUITableViewを載せて、delegateとdata sourceを設定します。

Androidの場合、FragmentのLinearLayoutの中にListViewを入れ、idを付与してコントローラーでfindViewById()します。

このあたりはすでに経験済みだと思いますので、詳細は割愛します。

新規投稿フォームのビュー

こちらもStoryboard（iOS）またはXMLレイアウトファイル（Android）で作っていきます。

iOSの場合、UIViewControllerの上にUITextFieldとUIButtonを作り、コントローラーにIBOutletとIBActionを設定します。

Androidの場合、FragmentのLinearLayoutの中にEditTextとButtonを追加し、idを付与してコントローラーでfindViewById()します。

このあたりも定番処理ですので、詳細は割愛します。

コントローラーを実装する

次にコントローラーを実装しましょう。

コントローラーの作成とビューとの紐付け

iOSの場合、UIViewControllerを継承したPostsViewControllerクラスを作成します。ビューとの紐付けも行います。

Androidの場合、Fragmentを継承したPostsFragmentクラスを作成します。ビューとの紐付けも行います。

APIの呼び出し処理の追加

ここまでできたら、APIの呼び出し処理をコントローラーに追加しましょう。

「送信」ボタンが押されたら、send()メソッドが呼ばれるようにビューを設定しておきます。

API呼び出し処理の例（Android）

public void send() {

  Post aPost = new Post(editText.getText().toString()); ・・・(1)
  
  if (aPost.validate()) { ・・・(2)
    api.addPost(aPost, callback); ・・・(3)
  } else {
    // Show dialog ・・・(4)
  }

}

実装のポイントは以下のとおりです。

(1) ビューからモデルにデータを渡します。
(2) モデルのバリデーションメソッドを呼び出します。
(3) バリデーション成功時は、APIを呼び出します。
(4) バリデーション失敗時は、ダイアログを表示します。

エラーハンドリングに注意する

APIの呼び出し処理は、非同期処理となります。

すなわち、サーバにリクエストを送信したら、一旦プログラムが待ち状態に入ります。

サーバからレスポンスがあると、再びプログラムが動き出し、画面を更新するなどの処理を行います。

このとき、通信状態が悪いと、サーバからレスポンスがなく、一定時間後にタイムアウトします。

また、サーバ側でエラーが起きて、エラーレスポンスが返ってくる場合もありますし、データが壊れている場合もあります。

従って、APIの呼び出し処理を書く場合、以下のようなエラーのハンドリングに注意します。

初めからネットワークにつながらない場合
タイムアウトした場合
サーバからエラーレスポンスが返ってきた場合
サーバから返ってきたデータが不正だった場合

コールバック処理の追加

APIの呼び出しが成功した場合も、失敗した場合も、コールバック関数というものが呼び出されます。

コールバック関数の中では、以下のような処理を行います。

ステータスコードを見て、エラーがないか判断する
JSONデータを見て、エラーがないか判断する
JSONデータをモデルに変換する

コールバック処理の例（Android）

callback = new Callback<Post>() {

  @Override
  public void success(Post post, Response response) {
    switch (response.getStatus()) {
      case 200:
      // 通信成功時の処理（＝画面更新）
    }
  }

  @Override
  public void failure(RetrofitError error) {
    // 通信失敗時の処理（＝エラーダイアログ）
  }

};