先日リリースした Travel Currency Converter は React Native を利用して開発を行いました。
Android 向け通貨換算アプリ Travel Currency Converter を公開しました
開発に関してあれこれ
ReactNative を採用したのは
- Android iOS 両対応のアプリを開発したいけどそれぞれネイティブで書くのは面倒くさい
- ちょっと前に Xamarin いじってたときに何となくしっくり来なかった
といった感じの状態のときに偶々 Web アプリを React.js で作ったらまぁまぁ良い感じしたのでそれならばと ReactNative を使って作ってみたという感じです。
このアプリではあまり凝ったことはしてないので Swift や Java 等ネイティブコードは一行も書いておらず、99% JavaScript です。残りの1%は国一覧とか通貨一覧データを生成するのに Ruby のスクリプトを書いた程度ですが後から考えたら別に JavaScript でも何の問題も無い事に気づきました。自分でネイティブコード書かないかわりいくつか npm を利用しています。
現時点での JavaScript のソースコード行数は 2611 行、Ruby は 34 行でした。ファイル数は js が 20 個, 各種データを保存した json が 5 個です。多いのか少ないのかはわかりませんが規模感こんな感じです。
一応フリーランスを名乗っていますが最近は殆ど仕事受けてないのでその暇を活かして開発しました。開発期間は開始してから数えると3ヶ月ですが、実際にコード書いてたのは1ヶ月程度でしょうか。9月に至ってはタイとミャンマーに旅行に行っていて全く作業していません。とはいえ実際にこのアプリを活用していたのでデバッグと言えるかも。
実装の際に React Native の様々な機能を利用したので順次ブログに利用方法を記述したいところです。
一度に何個も新しい事覚えられるほど器用ではないので Flux は使わず JavaScript ゴリゴリ書いてたけど先に勉強するべきだったかもしれません。
そんな感じで React Native 利用してこんな感じにアプリ作れますよという事で宜しくお願いします。
動作確認した端末、環境
動作確認は Nexus 5(Android 6), Nexus 5X(Android8), Moto G5 Plus(Android7) で行いました。一応 API 的には Android 4.1 あたりから動くみたいだけど未確認です。シェア見ると 4.1 以上が 95% 以上らしいですね。
一人で開発してると Android 端末多すぎて把握できないし、特定の端末で不具合が出るとかあると対処しにくい。エミュレーターでも再現しないバグとか出ると諦める事になります。
iOS 版もエミュレーター上では特に問題なく動いてます。若干デザインの修正が必要なのとアプリ内課金が未実装に加え、自分が iPhone を持っていないので実機での動作確認ができない状態です。Android 版の売上次第では iOS 版もリリースしたいところです。
利用したパッケージ
以下の npm パッケージを利用しています。
画面遷移とドロワーに利用しました。
ボタン等表示するのに利用してます。
ダイアログを表示するのに利用。
多言語対応するのに利用。現在は日本語と英語のみですがもうちょっと対応言語増やしたいですね。
設定やレート情報を保存するのには Realm を利用しています。
AdMob を表示するのに react-native-admob を利用しました。アプリ内課金で消えます。
アプリ内課金機能は react-native-billing を利用しました。これは Android のみ対応かな。
利用 API
以下の API を利用しています。
レート情報を取得する為に currencylayer の API を利用しています。
Google Maps API | Google Developers
端末オンライン時には位置情報から国情報を取得するのに Google Maps API を利用しています。
GeoLite2 << MaxMind Developer Site
GPS での位置情報が取得できない、Google Maps API の制限にかかった場合に備えて MaxMind の GeoLite2 も利用しています。
コメント