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

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

Monaca + NCMBでカメラメモアプリを作る【その1:仕様と画面の説明】

MonacaとNCMBで簡単なアプリを作ってみるハンズオンの資料です。今回はカメラメモアプリを作ってみます。カメラで写真を撮影し、そこにメモ書きを追加して保存しておくというアプリです。初回となる今回はアプリの仕様と画面を説明します。なおコードはNCMBMania/camera_appにて公開しています。

仕様について

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

  • 認証する
    • ID/パスワード認証を利用します
  • 写真を撮影する
    • スマートフォンの標準機能を使います
  • メモを書く
  • 写真とメモを一緒に保存する
    • 写真はファイルストアに、メモはデータストアに保存します
  • 写真一覧を表示する
    • メモからデータを取得します
  • 写真とメモを表示する

主な利用想定として、メモを残す際にテキストだけでは不十分だったり、写真で撮影してしまった方が早い場合に使うメモアプリです。

利用した技術

今回はOnsen UIを利用しています。JavaScriptは素のJavaScriptで、jQuery/Vue/React/Angularなどは利用していません。

画面

カメラメモアプリの画面は全部で3つです。

  • ログイン/新規登録画面
  • カメラ画面
  • メモ画面
  • 写真一覧画面
  • 写真/メモ画面

ログイン/新規登録画面

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

f:id:mbaasdevrel:20201204214258p:plain

カメラ画面

カメラアイコンが表示されています。アイコンのクリックでファイル選択(カメラ)が立ち上がります。

f:id:mbaasdevrel:20201204214313p:plain

メモ画面

撮影した写真のプレビューと、説明欄が表示されます。メモを残しておきます。

f:id:mbaasdevrel:20201204214324p:plain

写真一覧画面

データストアに保存されているメモ情報を取得し、そこに紐付いている写真を一覧表示します。

f:id:mbaasdevrel:20201204214415p:plain

写真/メモ画面

写真一覧画面で写真をタップすると、写真の拡大表示とメモを表示します。

f:id:mbaasdevrel:20201204214428p:plain

まとめ

今回はカメラメモアプリの仕様を画面について紹介します。次回は認証機能を実装します。

Monaca + NCMBでカメラメモアプリを作る シリーズリンク

中津川 篤司

中津川 篤司

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