Androidアプリとしてリリースしました。WordPressでブログを作りました。(アプリ内で表示)2020/1/4・iOSで1,000インストール到達しました。2019/12/8・匿名ログインを追加しました。Google導入しました。2019/11/3・PCとスマホ用のランディングページ作成しました。2019/10/20・チュートリアルを追加しました。(iOSのみ)2019/10/07・Twitterログインを追加しました。2019/09/15・ワンちゃんといいねボタンを追加しました。APIを使用してレシート読み取りを追加しました。TouchLifeとはお金の支出と収入を記録していく、いわゆるシンプルな家計簿アプリです。記録していけばいくほど、より細かく分析して今の状況を教えてくれるというのが一番の特徴です。面倒な計算をユーザーがしなくて良いように、というコンセプトで作りました。普段は自分もエンジニアとして会社に所属しているので、その合間で開発を進めました。デザイン、自分がエンジニアリングを担当。以下、技術メインで紹介できればと思います。Playにリリースするのに必要なipa、apkファイルを生成することが可能です。CSSのWebの技術で作ることができます。完成したアプリはWebViewで表示するハイブリットなものではなくObjective-CやJavaに変換されネイティブに動作するのでパフォーマンスもネイティブに近いものになります。Nativeのバージョンアップに追従させる時や何か特別なことを入れようとする度にエラーとなってしまう事が多く、機能の開発よりそのエラーの解決に労力が割かれてる感がずっと気になっていました。これはいかんということでExpoで1から作り直したのですが、この開発体験がびっくりするぐらい良かったです。基本Expoのレール上の実装になるので機能はExpoで提供されているものに制限されるデメリットはありますが、その分エラーになる事がほとんどなくなり、結果的にそれまでの2倍ぐらいの開発スピードになったと思います。今回のアプリの要件がExpoの提供範囲内で十分開発可能だったこともExpo移行の理由でした。ClientのiPhoneアプリを通じて遠隔地でもビルドなしでiPhoneの実機でさっと確認可能で、これが大変役に立ちました。Firebaseユーザー認証やデータベースへの保存の仕組みが必要で、認証の仕組みが予め備わっていてモバイルアプリに特化しているFirebaseを使う事にしました。Hostingの4つです。Authenticationメールアドレス/パスワード認証Facebook/Google認証の2つを実装しました。DBにencryptして保存のような実装もいらなくなるので、その分メインの開発に時間を割く事が出来ました。Firestoreユーザー情報とそれに紐づく支出、収入のデータのDB保存が必要だったので、Firestoreを使いました。usersコレクションにユーザーごとのデータ、その中に支出、収入のサブコレクションを持つ構成にしました。リリースしたばかりなので無料の範囲内で利用できています。Functionsお問い合わせすると、その内容をGmailに送信する必要があったのでFunctionsを使って実装しました。内部でNodemailerを使っています。下記の記事が非常に参考になりました。functionsでお問い合わせフォームを作成するHosting主に利用規約、プライバシーポリシーの静的ページの為に使いました。ExpoのWebViewを使って、アプリ内から参照するようにしています。メール認証した後にアプリに戻すリダイレクトが必要だったため、リダイレクト専用のhtmlファイルも配置しています。ランディングページにも利用する事になりそうです。その際は現行のフロントエンドのベストプラクティスが詰まってるNuxtのgenerateで作るのが良いかなと思ってます。Navigationで実装しました。Navigationに変更しました。Navigationで良い印象です。thunk状態管理はreact-reduxまたDBへのアクセス時に非同期通信が必要なので、ミドルウェアはredux-thunkを入れました。redux-sagaの選択肢もありましたが、thunkの方がなじみがあったのでこちらにしました。Sentryバグ検知はExpoで公式にサポートされているSentryを導入。Slackに通知が飛ぶようになっています。sentry-expoを使っていて、今のところ無料範囲内で利用できています。Analyticsを導入しました。expo-analyticsを使っています。踏み込んだ分析をする場合は、Amplitudeなどを導入すると良さそうです。以下、TouchLifeで使った主なライブラリ一覧です。date-fns5月1日(水)のような日本語にフォーマットされた日付が必要だったので使いました。date-fnsUltraDate.js給料日が土日祝の場合はその前の平日を取得するなどが必要で、そちらが取得できるUltraDate.jsを使いました。実装すると面倒な祝日やうるう年の計算など、Dateオブジェクトを便利に拡張したライブラリです。d3-shape円グラフの為に使いました。最初はreact-native-pie-chartを使っていたのですが、円グラフをアニメーションさせようとするとreact-native-pie-chartだと難しそうでこちらを使いました。(アニメーションしない円グラフだけの表示ならreact-native-pie-chartでも十分だと思います)d3-shapeで円のデータを作成、それをreact-native-svgで描画する流れです。下記の記事が参考になりました。yupメールアドレスやパスワードなどフォームのバリデーションが扱いやすくなるので使いました。Reactの公式ドキュメントでも紹介されているものです。別の選択肢だとredux-formもあり、こちらはフォームの状態をreduxのstoreに保存するようですが、Reactコミュニティの一般的な見解だとフォームの状態をreduxで管理しない方向のようで、formikやreact-final-formを使うのが良いとのことでした。formikyupnative-base主にフォームのセレクトボックスで使用。最初セレクトボックスは、react-native-picker-selectを使っていたのですが、Androidで見た時に表示がおかしかったので、安定していたnative-baseに切り替えました。native-basereact-native-calendarsカレンダーの実装に使っています。monthFormat={"yyyy年MM月"}などで日本語のフォーマットでカスタマイズ可能なのも良かったです。react-native-calendarsreact-native-easy-toastマイページなどユーザー情報を変更した時の、成功、失敗をユーザーに知らせる目的で使いました。表示する位置や色は自由にカスタマイズ出来ます。react-native-easy-toastreact-native-keyboard-aware-scroll-view画面の下の方にInput要素があると、キーボードが下から出てきた時に入力している部分が隠れてしまい何が入力されているのか分からない問題があったのですが、その部分が隠れないようにスクロールしてくれるモジュールです。自分で実装するとそれなりに大変そうだったので助かりました。react-native-keyboard-aware-scroll-viewreact-native-modalシンプルなモーダルです。簡単に表示、非表示が出来て、スタイルもカスタマイズ可能です。react-native-modalreact-native-scrollable-tab-view-universalタブ切り替えが必要な箇所に使いました。スワイプ操作にも対応しているのでUXも良い印象です。最初は、react-native-scrollable-tab-viewを使っていましたが、ScrollViewの中で使おうとするとAndroidだけ中の要素が表示されない不具合があり、それが解決されているuniversalを使うことにしました。universalもreact-native-scrollable-tab-viewをForkしてるものになるので、この不具合が修正が改善されれば、react-native-scrollable-tab-viewで良いと思います。react-native-scrollable-tab-view-universalreact-native-snap-carouselオープニングやグラフのカルーセルに使いました。次や前の月のグラフもちょっと見せるUIにしかったので、それが可能だったこちらを使いました。react-native-snap-carouselreact-native-walkthrough-tooltipツールチップの表示に使いました。アプリの使い方を伝える最初のチュートリアルにも使えそうです。ツールチップが画面外にはみ出ないように、ライブラリ側で位置を自動計算してくれて使う側がそこを意識しなくてよいのが良かったです。react-native-walkthrough-tooltipnpm-run-all実践Expoに書いてあって初めて知ったんですが、これが便利でした。build:iosすると、ios:runやios:fileなどのios:*のscriptsが順番に実行される、というものです。いう感じで無事リリース出来ました。AnalyticsやSentryの設定方法も載っていて、とても為になりました。Expoで開発する場合はオススメの一冊です。Native良いですね。開発途中でAndroidで実機確認したんですが、最初にAndroidでiPhoneと同じように動作した時は感動しました。途中からExpoで作り直したのも良かったなと思っています。Nativeに戻せるというのも移行した理由になりました。TouchLifeも定期的に更新して、常に改善している事を感じてもらえるアプリにしていきたいと思います。etc..主にフロントエンドを中心に発信しています。