ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Monaca + NCMBでタスク管理アプリを作る【その1:仕様と画面の説明】

f:id:mbaasdevrel:20201119154758p:plain

MonacaとNCMBで簡単なアプリを作ってみるハンズオンの資料です。今回はタスク管理アプリを作ってみます。初回となる今回はアプリの仕様と画面を説明します。なおコードはNCMBMania/task_appにて公開しています。

仕様について

このアプリの主な機能です。

  • 認証
    • ID/パスワード認証を利用します
  • タスク登録
    • タスクで扱うのは次のデータです
      • 期限
      • タスク名
      • タスク詳細
    • タスクは自分だけ閲覧、更新や削除が可能とします
  • タスク一覧
    • 登録したタスクを一覧します
  • タスク編集
    • 登録したタスクを編集します

利用した技術

今回はjQueryとOnsen UIを利用しています。

画面

タスク管理アプリの画面は全部で3つです。

  • ログイン/新規登録画面
  • タスク登録画面
  • タスク一覧画面
  • タスク編集画面

タスク一覧画面

最初に表示される画面です。ただし認証されていない場合はログイン/新規登録画面へ遷移します。この画面では登録したタスクを一覧表示します。

一覧からタスク登録画面、編集画面に移動したり、タスクを完了させられます。

f:id:mbaasdevrel:20201119180640p:plain

ログイン/新規登録画面

ログインと新規登録は処理が似ているので一つの画面にまとめてしまいました。ID/パスワードで認証しています。

f:id:mbaasdevrel:20201119180656p:plain

タスク登録/編集画面

タスク一覧から選んでタスクを追加、または編集します。add.html と edit.html に分けていますが、基本的に同じです。

f:id:mbaasdevrel:20201119180713p:plain

まとめ

今回はタスク管理アプリの仕様と画面について紹介しました。次回は認証機能を実装します。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。