T&T United Inc.

Knowledge over the Air

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

      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) {
    // 通信失敗時の処理(=エラーダイアログ)
  }

};

第5回のまとめ

モデルが実装できたら、コントローラーとビューを実装しましょう。

  • コントローラーに、APIの呼び出し処理を書く
  • APIを呼び出す前に、データのバリデーションと、ネットワーク接続状態の確認を行う
  • API呼び出し後のタイムアウト、サーバ側エラー、データ破損に対応するプログラムを書く

本日は以上です。

連載目次

iOS/Androidアプリ開発入門「サーバ連動アプリを開発しよう!」

(10) 開発の旅をうまく乗り切る(最終回)
(9) バックグラウンドでメール送信
(8) サーバの監視とデータのバックアップ
(7) リモートサーバ(本番環境)の構築
(6) ローカルでの単体・結合テスト
(5) コントローラーとビューの実装
(4) モデル実装
(3) API実装
(2) 画面設計・データベース設計・API設計
(1) 開発環境の構築

スポンサーリンク

 - コラム, 連載 ,