T&T United Inc.

Knowledge over the Air

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

スポンサーリンク

 - コラム, 連載 ,