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

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

Monacaで使えるFramework7向けUIコンポーネントの紹介

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コンポーネントを使うことも可能です。ぜひあなたのアプリ開発に活かしてください。

中津川 篤司

中津川 篤司

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