MonacaとNCMBで簡単なアプリを作ってみるハンズオンの資料です。今回はカメラメモアプリを作ってみます。カメラで写真を撮影し、そこにメモ書きを追加して保存しておくというアプリです。初回となる今回はアプリの仕様と画面を説明します。なおコードはNCMBMania/camera_appにて公開しています。
仕様について
このアプリの主な機能です。
- 認証する
- ID/パスワード認証を利用します
- 写真を撮影する
- スマートフォンの標準機能を使います
- メモを書く
- 写真とメモを一緒に保存する
- 写真はファイルストアに、メモはデータストアに保存します
- 写真一覧を表示する
- メモからデータを取得します
- 写真とメモを表示する
主な利用想定として、メモを残す際にテキストだけでは不十分だったり、写真で撮影してしまった方が早い場合に使うメモアプリです。
利用した技術
今回はOnsen UIを利用しています。JavaScriptは素のJavaScriptで、jQuery/Vue/React/Angularなどは利用していません。
画面
カメラメモアプリの画面は全部で3つです。
- ログイン/新規登録画面
- カメラ画面
- メモ画面
- 写真一覧画面
- 写真/メモ画面
ログイン/新規登録画面
ログインと新規登録は処理が似ているので一つの画面にまとめてしまいました。ID/パスワードで認証していますが、追加で表示名も登録できます。
カメラ画面
カメラアイコンが表示されています。アイコンのクリックでファイル選択（カメラ）が立ち上がります。
メモ画面
撮影した写真のプレビューと、説明欄が表示されます。メモを残しておきます。
写真一覧画面
データストアに保存されているメモ情報を取得し、そこに紐付いている写真を一覧表示します。
写真/メモ画面
写真一覧画面で写真をタップすると、写真の拡大表示とメモを表示します。
まとめ
今回はカメラメモアプリの仕様を画面について紹介します。次回は認証機能を実装します。
Monaca + NCMBでカメラメモアプリを作る シリーズリンク
