mymizu

ネイティブ体験、開発スピード、長期的な省コストに焦点を当てたソーシャルイノベーションスタートアップのiOS、Androidアプリのデザイン、開発

  • design-icon

    デザイン - モバイルアプリのUI/UXデザイン

  • development-icon

    開発 - React Nativeを使用したiOS、Androidのアプリ構築

  • design-icon

    Design - モバイルアプリのUI/UXデザイン

  • development-icon

    Development - React Nativeを使用したiOS、Androidのアプリ構築

mymizuは日本のソーシャルイノベーションムーブメントの中で代表的な存在です。彼らのミッションは日本とインターナショナルのユーザーに環境を汚染するペットボトルを使わずに水分補給させること、したがって、ペットボトルの消費を最小限にし、使い捨てプラスチック消費量関連の問題の認知を上げることです。

このミッションを達成するための主な戦略はmymizuアプリです。2019年の夏にiOSのプロトタイプ版をリリースして以降、消費者やメディアから注目を集め、可能性があることを確証しました。

コーポレートパートナーからの新たなサポートで、Androidサポートや新機能の追加、ユーザー体験の改善を含むアプリの長期的な計画にコミットをすることが可能となりました。彼らがTacchiにアプローチをしてきたときには迷わずにこのプロジェクトに加わることに決めました。


ユーザーエクスペリエンスデザイン

使えてモダンで、すべてのサイズや型のスマートフォンで日本語と英語の両方に効果的に機能するUIデザインを制作するために、mymizuチームと協業しました。

位置情報マップ

ボトルに水を補充できる場所を見つけることができるマップ機能がアプリの中心にあります。水飲み機のような公共の場所に加え、増加している無条件に給水を行う加盟店も含まれます。

元のアプリにあったデザインを基に、給水場所を案内し、それらの場所の詳細を閲覧するときの新しいレベルのインタラクション、ビジュアルの改善を加えました。

給水トラッキング

新しいバージョンのアプリは個人とユーザー全体の給水、そして環境への影響のデータをトラッキングし表示します。給水した場所のログを地図上、もしくは家やオフィスなどのプライベートスポットで残すことができます。

React Nativeでのモバイルアプリ開発

mymizuチームはiOSとAndroidでアプリをリリースすることを時間的余裕のないリリース日の中で希望し、また長期的な開発の効率性も意識していたため、弊社はReact Nativeがこのアプリに適切だと考えました。iOSのSwiftやObjective-C、AndroidのKotlinやJavaといった従来の方法では不可能でしたが、React Nativeは一つのコードベースでiOSとAndroidをサポートすることが可能です。

プラットフォームに合わせたネイティブエクスペリエンス

何年にも渡り従来のiOS、Android開発経験に基づいた、React Nativeを用いたクロスプラットフォームアプリのデザイン、開発の経験によりアプリがiOSユーザーにとってiOSアプリの感覚、AndroidユーザーにはAndroidアプリの感覚を提供することが可能になりました。

これらのモバイルプラットフォームが将来発展したときにもいいエクスペリエンスが継続するよう、弊社でよく使っているライブラリ(React Native Navigation)を利用し、アプリ内のスクリーン間のナビゲーションを構築しました。興味がありましたらReact Nativeでのナビゲーションという記事をご覧ください。

mymizu webサービスとの統合

多くのモバイルアプリで共通であるように、給水場所やユーザーデータ、その他のコンテンツが格納されているデータベースをホストしている中心的なWebサービスからデータを取り、送ることが必要でした。

mymizuの内部で開発された既存のWebサーバーにRESTful APIがあったので、アプリのネットワークリクエスト、ローカルデータストレージの部分を扱うためにRedux Axios Middlewareと合わせReduxを使用しました。

この業界基準の組み合わせによりネットワーク、データ蓄積、viewロジックを分断し、特に開発チームの拡大や、プロダクトが複雑になっていくに連れ開発スピードが落ちないようそれらを明確に別々にしました。

一度に数百の店舗をマップで表示


React Native MapsはReact Nativeでマップに取り組む際、事実上のソリューションになります。マップの部分は多くの位置情報をきれいに表示するためピンをクラスタリングして表示する必要があり、React Native Mapsはクラスタリングに対応していないため、これに対応するベストなソリューションを考える必要がありました。

ピンをクラスタリングするいくつかのJavaScriptベースのアドオンがありますが、このプロジェクトのニーズに十分なパフォーマンスがあるとは思いませんでした。そのため、React Native Mapsのネイティブコードに編集を加えることにしました。GoogleのiOSAndroid用のSDKからのコードをネイティブレベルで統合することでマップのピンクラスタリングの表示とパフォーマンスをコントロールすることができるようになりました。

自動化テストでアプリの安定性を実現

最後に、新機能や変更にもコードベースが正しく継続的に機能するようDetoxインターフェーステストライブラリを活用しました。リグレッション(前には正しく動いていた機能で発生するバグ)のためのテストをマニュアルで行う時間を減らし、より早い開発、リリースプロセスを可能にします。

他のプロジェクト

一緒に働きませんか?

プロジェクトに関するご相談やご質問など、お気軽にお問い合わせください。