MonacaとNCMBで簡単なアプリを作ってみるハンズオンの資料です。今回はタスク管理アプリを作ってみます。初回となる今回はアプリの仕様と画面を説明します。なおコードはNCMBMania/task_appにて公開しています。
仕様について
このアプリの主な機能です。
- 認証
- ID/パスワード認証を利用します
- タスク登録
- タスクで扱うのは次のデータです
- 期限
- タスク名
- タスク詳細
- タスクは自分だけ閲覧、更新や削除が可能とします
- タスクで扱うのは次のデータです
- タスク一覧
- 登録したタスクを一覧します
- タスク編集
- 登録したタスクを編集します
利用した技術
今回はjQueryとOnsen UIを利用しています。
画面
タスク管理アプリの画面は全部で3つです。
- ログイン/新規登録画面
- タスク登録画面
- タスク一覧画面
- タスク編集画面
タスク一覧画面
最初に表示される画面です。ただし認証されていない場合はログイン/新規登録画面へ遷移します。この画面では登録したタスクを一覧表示します。
一覧からタスク登録画面、編集画面に移動したり、タスクを完了させられます。
ログイン/新規登録画面
ログインと新規登録は処理が似ているので一つの画面にまとめてしまいました。ID/パスワードで認証しています。
タスク登録/編集画面
タスク一覧から選んでタスクを追加、または編集します。add.html と edit.html に分けていますが、基本的に同じです。
まとめ
今回はタスク管理アプリの仕様と画面について紹介しました。次回は認証機能を実装します。
