LoginSignup
0

More than 1 year has passed since last update.

NCMBとFramework7を使った情報リスト画面コンポーネントの紹介と使い方

Posted at

NCMBはモバイルアプリ開発におけるバックエンド機能(認証、データストア、ファイルストア、プッシュ通知など)を提供しています。バックエンドなのでAPIベースで利用するのが基本で、UI(アプリ側)は各自で開発する仕組みになっています。

現在、数多くのアプリが存在し、その中には定番とも言える機能があります。そうした定番機能を各フレームワークごとに実装しておくことで、再利用性高くNCMBが利用できるかと思います。

今回はFramework7で作った情報リスト画面コンポーネントを紹介します。Monacaアプリでも利用可能です。

UIについて

コンポーネントは1つのHTMLだけで実装されているのが特徴です。そのため、基本的には以下の方法で導入・利用ができます。

  1. 必要なSDKの読み込み
  2. 必要なキーの取得
  3. NCMBの初期化
  4. 情報リスト画面の設置

用意されている画面(機能)は次の通りです。

情報リスト画面

FireShot Capture 153 - 20220307133148 Information - localhost.jpg

アプリに関連する情報を一覧表示する画面です。たとえばソーシャルメディアやサポートページ、ライセンス情報などを一覧表示します。一覧からタップした後は、httpからはじまっていればIn App Browser(または別タブ)で開き、それ以外はFramework7のルーティングで処理します。

必要なライブラリ・SDKの読み込み

今回利用しているライブラリ・SDKは次の通りです。

  • NCMB JavaScript SDK

これらを www/index.html で読み込みます。

<script src="js/ncmb.min.js"></script>

必要なキー・トークンの取得

NCMBのアプリケーションキーとクライアントキーを取得します。

NCMBの初期化

www/js/app.js にてNCMBを初期化します。今回は www/js/config.json というファイルにキーを記述しているので、以下のように読み込みを行っています。

const $ = Dom7;
(async () => {
  const device = Framework7.getDevice();
	// 設定ファイルの読み込み
  const config = await (await fetch('./js/config.json')).json();
	// NCMBの初期化
  window.ncmb = new NCMB(config.applicationKey, config.clientKey);

  // Framework7の初期化
  window.app = new Framework7({
    name: 'NCMB Profile',
    theme: 'auto',
    el: '#app',
    id: 'com.nifcloud.mbaas.map',
    store: store,
    routes: routes,
    input: {
      scrollIntoViewOnFocus: device.cordova && !device.electron,
      scrollIntoViewCentered: device.cordova && !device.electron,
    },
    statusbar: {
      iosOverlaysWebView: true,
      androidOverlaysWebView: false,
    },
    on: {
      init: function () {
        if (this.device.cordova) {
          cordovaApp.init(this);
        }
      },
    },
  });
})();

ルーティングの設定

ルーティングは /information になります。

const routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    path: '/information',
    componentUrl: './pages/information.html',
  },
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];

そして、今回は www/index.html にて情報一覧画面のURLを指定します。

<div id="app">
	<div class="view view-init safe-areas" data-url="/information">
	</div>
</div>

情報一覧画面の追加

information.htmlをダウンロードして、 www/pages/information.html として配置します。

データストアの設定

NCMBの管理画面にてデータストアのクラス Information を作成します。フィールドは次の通りです。

フィールド名 説明
icon 文字列 Framework7 Iconsのアイコン名を利用できます。他に linehatebufeedly も利用できます。
label 文字列 一覧時に表示するラベルです。
path 文字列 タップした際に遷移するURLです。
color 文字列 アイコンの色です。

path は URLまたはFramework7のルーティング設定に沿って指定してください。

FireShot Capture 154 - 20220307133357 ニフクラ mobile backend - console.mbaas.nifcloud.com.jpg

謝意

LINE、はてなブックマーク、FeedlyのアイコンはアイコンフォントでLINE、はてなブックマーク、feedlyを作ってみる | Webお役立ちネタ帳で紹介されている方法に沿って作成しています。アイコン自体はブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい! | ドウラク-douraku-:webとゲームで道楽人生にて配布されているものになります。

まとめ

情報一覧画面はアプリでよく使われる画面になります。アプリ内に直書きでも良いですが、データストアから取るようにすればメンテナンスが簡単になります。仕組みはシンプルなので、ぜひご利用ください。

mBaaSでサーバー開発不要! | ニフクラ mobile backend

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0