【連載】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) 開発環境の構築