MonacaとNCMBで通貨換算アプリを作る（その1: 画面の仕様とSDKの初期化）

2023年現在、円安が止まりません。そのため、海外旅行していて気になるのは、表記されている金額が円にすると幾らになるかではないでしょうか。昔は気にならなかった金額換算も、今ではびっくりするくらいの金額になっているかも知れません。

スマホアプリとして通貨換算アプリは幾つかありますが、今回はその簡易版をMonacaアプリで開発してみます。換算履歴はNCMBのデータストアに保存し、後で確認できるようにします。

まず最初の記事では画面の説明とSDKの導入までを進めます。

## コードについて

今回のコードは[currency-converter-monaca](https://github.com/NCMBMania/currency-converter-monaca) にアップロードしてあります。実装時の参考にしてください。

## 利用技術について

今回は次のような組み合わせになっています。

- Monaca
- Framework7
- [ExchangeRate-API](https://exchangerate-api.com/)

## 仕様について

通貨換算レートはExchangeRate-APIを呼び出しています。APIは認証なしでも使えるようですが、ユーザー登録した上で実行しています（一定数の呼び出しまで無料で利用できます）。

## 利用する機能について

通貨換算アプリで利用するNCMBの機能は次の通りです。

- データストア
  - データ登録
  - データ取得

## 画面について

今回は以下の2つの画面があります。

### www/pages/convert.html

![1659 localhost - 1009010144.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/4ae96a04-2b96-8a09-408b-0b99f66f89e0.jpeg)


通貨の選択（変換元、変換先）、数値の入力、通貨の換算処理を行います。

### www/pages/history.html

![1660 localhost - 1009010212.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/1951a027-8c95-eaa6-87b3-575f801f68c9.jpeg)


通貨の換算履歴を表示します。

### SDKのインストール

今回はMonacaのJS/CSSコンポーネントの追加と削除より、NCMBを追加します。アプリのテンプレートはFramework7のJavaScript版（VueやReactではなく）を選択しています。

## NCMBのAPIキーを取得

[mBaaSでサーバー開発不要！ | ニフクラ mobile backend](https://mbaas.nifcloud.com/)にてアプリを作成し、アプリケーションキーとクライアントキーを作成します。

## js/config.jsonの作成

js/config.jsonを作成し、その中に先ほど取得したNCMBのAPIキーを設定します。内容は次のようになります。

```json
{
	"applicationKey": "YOUR_APPLICATION_KEY",
	"clientKey": "YOUR_CLIENT_KEY"
}

```

## 初期化

初期化は `js/app.js` にて行います。config.jsonを読み込む関係上、非同期処理内にて行います。cordovaの有無（アプリまたはプレビューの違いを検知）によって初期化時のイベント処理を変えています。

```jsx
// NCMBの初期化を行う
// window.cordovaが存在する場合は'deviceready'、それ以外の場合は'DOMContentLoaded'イベントが発火した時に実行
const event = window.cordova ? 'deviceready' : 'DOMContentLoaded';
document.addEventListener(event, async (e) => {
  // この中に処理を書きます
});
```

config.jsonの内容を読み込んで、NCMBとFramework7の初期化を行います。

```jsx
// 設定ファイルを非同期で取得
const config = await (await fetch('./js/config.json')).json();
// NCMBのインスタンスを作成
window.ncmb = new NCMB(config.applicationKey, config.clientKey);
// Framework7のインスタンスを作成
window.app = new Framework7({
  name: 'My App', // アプリ名
  theme: 'auto', // テーマの自動検出
  el: '#app', // アプリのルート要素
  store: store, // 状態管理ストア
  routes: routes, // ルーティング設定
});
```

これでNCMBの初期化が完了します。

## ルーティング設定

今回は地図画面、ノート画面、リスト画面の3画面になります。これを `js/routes.js` に定義します。

```jsx
const routes = [
  {
    path: '/',
    url: './index.html',
  },
  // 通貨換算ページ
  {
    path: '/convert/',
    componentUrl: './pages/convert.html',
  },
  // 履歴ページ
  {
    path: '/history/',
    componentUrl: './pages/history.html',
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];
```

## ストア

ストアはアプリ全体で利用する変数です。今回は利用できる通貨のリスト、現在選択されている通貨（変換元、変換先）を保存しています。

```jsx
// Framework7のcreateStore関数を使いやすくするためのショートカットを定義します。
const createStore = Framework7.createStore;

// ストアを作成します。このストアはアプリケーションの状態を保持します。
const store = createStore({
  // `state`オブジェクトは、アプリケーションの状態を保持します。
  state: {
    // 為替情報のリストを保持する配列
    currencies: [],
    // 利用者が前回選択した起源通貨を保存またはデフォルト値としてUSDを使用
    originCurrency: localStorage.getItem('originCurrency') || 'USD',
    // 利用者が前回選択したターゲット通貨を保存またはデフォルト値としてJPYを使用
    targetCurrency: localStorage.getItem('targetCurrency') || 'JPY',
  },
  // `getters`オブジェクトは、状態を取得するためのメソッドを提供します。
  getters: {
    // currenciesの値を取得するゲッター
    currencies({ state }) {
      return state.currencies;
    },
    // originCurrencyの値を取得するゲッター
    originCurrency({ state }) {
      return state.originCurrency;
    },
    // targetCurrencyの値を取得するゲッター
    targetCurrency({ state }) {
      return state.targetCurrency;
    },
  },
  // `actions`オブジェクトは、状態を変更するためのメソッドを提供します。
  actions: {
    // originCurrencyを設定し、localStorageに保存するアクション
    setOriginCurrency({ state }, currency) {
      state.originCurrency = currency;
      localStorage.setItem('originCurrency', currency);
    },
    // targetCurrencyを設定し、localStorageに保存するアクション
    setTargetCurrency({ state }, currency) {
      state.targetCurrency = currency;
      localStorage.setItem('targetCurrency', currency);
    },
    // 通貨情報を非同期にフェッチし、状態を更新するアクション
    async getCurrencies({ state }) {
      // currencies.jsonファイルから通貨データをフェッチします。
      const res = await fetch('/js/currencies.json');
      // レスポンスをJSONとして解析し、通貨の状態を更新します。
      state.currencies = await res.json();
    }
  },
});
```

## 利用できる通貨について

通貨換算できるのはExchangeRate-APIで取得できる通貨に依存します。これは[ExchangeRate\-API \- Supported Currency Codes and Countries](https://www.exchangerate-api.com/docs/supported-currencies)に記載されています。

一覧を `/js/currencies.json` として保存しています。以下はその一部です。

```json
[
	{"code": "AED", "name": "UAE Dirham", "country": "United Arab Emirates"},
	{"code": "AFN", "name": "Afghan Afghani", "country": "Afghanistan"},
	  :
	{"code": "ZMW", "name": "Zambian Kwacha", "country": "Zambia"},
	{"code": "ZWL", "name": "Zimbabwean Dollar", "country": "Zimbabwe"}
]
```

## まとめ

今回は通貨換算アプリの仕様と画面、NCMBの初期化までを解説しました。次は[通貨関連処理と履歴の保存処理を実装します](https://qiita.com/goofmint/items/f7740429904d263289b0)。