【連載】iOS/Androidアプリ開発入門「サーバ連動アプリを開発しよう！」 (2) 画面設計・データベース設計・API設計
2015/03/15
みなさん、こんにちは！
第1回「(1) 開発環境の構築」の続編です。
前回同様、本格的なアプリを開発するためには「何を知っておかなければならないか」「何を勉強すればいいか」を中心に書いていきたいと思います。
今回はアプリの設計を進めていきましょう。
本格的なアプリの開発には、本格的な設計プロセスが欠かせません。
早速はじめていきましょう。
作るのはユーザー投稿型アプリ
今回開発するのは、ユーザー投稿型アプリの短文投稿機能の部分とします。
機能仕様は、以下のとおりとします。
- アプリを起動すると、最新の投稿一覧と、新規投稿フォームが表示される
- フォームにテキストを入力し、「送信」ボタンを押すと、サーバに投稿が送信される
- 送信に成功すると、画面上の投稿一覧が更新され、最新の投稿が表示される
設計は画面から、実装はAPIから
設計は画面→データ→APIの順に行い、実装は逆向きにAPI→データ→画面の順に行うと無駄なく作業を進めることができます。
設計を飛ばしていきなりプログラミングを始めるのは、設計図なしに家を建てるようなものです。
無駄な手戻りを生み、アプリ開発の効率を大きく落としますから、避けるようにしましょう。
(1) 画面設計
i) 画面遷移図
画面設計は、ノートに鉛筆でスケッチを書くことからはじめます。
最初に描くのは画面遷移図です。
1つ1つの画面シーンをボックスで表し、画面シーン間の動きを矢印で示します。
このとき、各画面内の項目はおおまかでよく、画面内のレイアウトや要素の過不足にはこだわりません。
ii) ワイヤーフレーム
画面遷移図ができたら、次に、画面内のレイアウトと要素を詳細に検討し、決定します。
レイアウトと要素が確定したら、エクセルやパワーポイントを使ってワイヤーフレームを描きます。
iii) デザイン
ワイヤーフレームができたら、関係者で合意をとった後、デザイナさんに渡してデザイン作業に入ってもらいます。
デザイナさんには、「カンプ」と呼ばれる各画面の完成図を作ってもらったり、アプリ内に組み込む細かなPNGファイルを端末のサイズに合わせて「切り出して」もらったりします。
デザイン作業は、PhotoshopやIllustratorという、Adobe製品を使って行うのが一般的です。
(2) データ設計
i) ER図
データ設計は、ER図を書くことからはじめます。
画面遷移図と同様、まずはノートに鉛筆でおおまかな構造を書きます。
今回の例では、掲示板の投稿1つが1レコードとなる、シングルテーブルのデータ設計となります。
データベースの構造が複雑になったときは、正規化と呼ばれる作業によってデータの重複をなくします。
ii) スキーマ
ER図が書けたら、前回インストールしたXAMPPについてくるphpMyAdminというデータベース管理ツールを使って、実際にデータベースを作りながら詳細を決めていきます。
MVCフレームワークとしてCakePHPを使う場合、各テーブルにid（主キー）, created, modifiedという3つのカラムを足しておきます。
最後に、phpMyAdminからデータベースの構造（スキーマ）をSQLファイルでエクスポートし、開発用フォルダに/sqlといったフォルダを作って保存して、Gitにcommitしたらデータ設計は完了です。
今回設計したテーブル「posts」は、以下のようになりました。
id int(11) NOT NULL 主キー AUTO_INCREMENT text varchar(256) NOT NULL created datetime NOT NULL modified datetime NOT NULL
(3) API設計
i) REST
API設計は、「REST」と呼ばれるAPI設計思想を参考にするとうまくいきます。
RESTに倣うと、アプリからサーバへのリクエストは、データを取得するときはGET、追加するときはPOST、更新するときはPUT、削除するときはDELETEというメソッドを使います。
また、サーバからアプリに返すレスポンスは、ステータスコード（200とか404とか）に意味をもたせ、JSONと呼ばれるデータ形式を使ってデータをやりとりします。
今回の件では、例えばhttp://localhost/postsといったURIを持つAPIを作ります。
これらはRESTの思想ですが、必ずしも厳格にRESTfulなAPIにする必要はなく、思想さえ理解していれば柔軟に変更しても構いません。
ii) REST適用
MVCフレームワークとしてCakePHPを使う場合、RESTの思想を適用するのは簡単で、routes.phpファイルに数行追加するだけで済みます。
CakePHPに関する情報は、公式のCookbookのほか、Googleで検索すればたくさん出てきます。
ゲームやチャットなどリアルタイムなデータのやりとりが必要な場合、ソケット通信を使うことになります（今回は割愛します）。
今回設計したAPIは、以下のようになりました。
- 投稿一覧取得
GET /posts
レスポンス
[{"id":1,"text":"hoge"},{"id":2,"text":"hoge"},...] - 新規投稿
POST /posts
リクエスト
{"text":"hoge"}
第2回のまとめ
プログラミングを始める前に、設計しましょう。
- 設計は画面→データ→APIの順に、実装はAPI→データ→画面の順に行うと無駄がない
- 画面設計は、画面遷移図→ワイヤーフレーム→デザインの順に行う
- データ設計は、ER図→phpmyadmin等のツールで詳細検討→出力の順に行う
- API設計は、RESTと呼ばれる思想を参考にし、データのやりとりにはJSONを使う
本日は以上です。
連載目次
iOS/Androidアプリ開発入門「サーバ連動アプリを開発しよう！」
(10) 開発の旅をうまく乗り切る（最終回）
(9) バックグラウンドでメール送信
(8) サーバの監視とデータのバックアップ
(7) リモートサーバ（本番環境）の構築
(6) ローカルでの単体・結合テスト
(5) コントローラーとビューの実装
(4) モデル実装
(3) API実装
(2) 画面設計・データベース設計・API設計
(1) 開発環境の構築