NCMBはmBaaS（mobile Backend As a Service）なので、基本的にアプリのUIにはタッチせず、あなたが自由にアプリを開発できます。しかし、イチからUIを作り上げるのは難しいですし、良くあるUIであれば使い回したいとも思うはずです。
そこでMonacaアプリでよく使いそうなUIをコンポーネント化し、簡単に導入できるようにしたコンポーネント群を作成中です。今回はこれまでに作成、公開しているコンポーネントを紹介します。詳しい使い方は各コンポーネントのリンク先を参照してください。
- 地図コンポーネント
- お知らせコンポーネント
- ギャラリーコンポーネント
- 認証コンポーネント
- リスト・詳細コンポーネント
- フォームコンポーネント
- スワイパーコンポーネント
- 設定画面コンポーネント
- プロフィール画面コンポーネント
- 情報リスト画面コンポーネント
- まとめ
地図コンポーネント
MapBoxと組み合わせて利用する地図コンポーネントです。データストアに登録したマーカーを表示したり、リストビューで自分の現在位置からの距離順に表示します。主に店舗情報や地域のスポット情報を表示する想定です。
NCMBとFramework7を使った地図コンポーネントの紹介と使い方 - Qiita
お知らせコンポーネント
アプリを開いた時にお知らせデータがあるかチェックし、あればモーダルを使って表示します。新機能紹介、キャンペーン開始のお知らせなどでの利用を想定しています。
NCMBとFramework7を使ったお知らせコンポーネントの紹介と使い方 - Qiita
ギャラリーコンポーネント
写真をグリッド表示します。写真をタップすると、Framework7のフォトブラウザーを使ってスワイプ切り替えできる拡大表示になります。写真はファイルストアに保存し、ファイル名によるフィルタリングが可能です。
NCMBとFramework7を使ったギャラリーコンポーネントの紹介と使い方 - Qiita
認証コンポーネント
いわゆるユーザー登録、ログイン、ログアウト機能を提供するUIです。メールアドレス認証のみをサポートし、パスワードリマインダー機能もあります。
NCMBとFramework7を使った認証コンポーネントの紹介と使い方 - Qiita
リスト・詳細コンポーネント
マスター・詳細画面です。ブログなどを取り込んで、サムネイル画像ともに一覧画面を作成します。一覧をタップすると、該当記事を詳細画面に表示します。
NCMBとFramework7を使ったリスト・詳細コンポーネントの紹介と使い方 - Qiita
フォームコンポーネント
汎用的なフォームです。テキスト入力やチェックボックス、画像アップロードが可能です。このフォームコンポーネントはカスタマイズ前提となっています。
NCMBとFramework7を使ったフォームコンポーネントの紹介と使い方 - Qiita
スワイパーコンポーネント
複数の画像がスライドしながら表示されるスワイプコンポーネントです。アプリの中でバナーを表示するのに利用できます。画像をタップした後はダミー画面に遷移するので、そこはカスタマイズ必須です。
NCMBとFramework7を使ったスワイパーコンポーネントの紹介と使い方 - Qiita
設定画面コンポーネント
ログインしたユーザーを対象に、プロフィールなどを設定する画面を表示します。公開して良い項目、駄目な項目を指定できます。プロフィール画像などもアップロードできます。
NCMBとFramework7を使った設定画面コンポーネントの紹介と使い方 - Qiita
プロフィール画面コンポーネント
ユーザーデータを使ってプロフィール画像を作成します。これは設定画面コンポーネントと組み合わせて利用するのが良いでしょう。
NCMBとFramework7を使ったプロフィール画面コンポーネントの紹介と使い方 - Qiita
情報リスト画面コンポーネント
アプリに関連する情報（ブログ、ソーシャル、Webサイトなど）を一覧表示する画面です。URLの場合はInApp Browser、パスの場合はFramework7のルーティングに応じて画面遷移します。
NCMBとFramework7を使った情報リスト画面コンポーネントの紹介と使い方 - Qiita
まとめ
これらのUIコンポーネントを組み合わせるだけで、リッチなUIのアプリが簡単に開発できます。また、メインの画面は自作しながら汎用的な部品だけUIコンポーネントを使うことも可能です。ぜひあなたのアプリ開発に活かしてください。
