mymizuは日本のソーシャルイノベーションムーブメントの中で代表的な存在です。彼らのミッションは日本とインターナショナルのユーザーに環境を汚染するペットボトルを使わずに水分補給させること、したがって、ペットボトルの消費を最小限にし、使い捨てプラスチック消費量関連の問題の認知を上げることです。
このミッションを達成するための主な戦略はmymizuアプリです。2019年の夏にiOSのプロトタイプ版をリリースして以降、消費者やメディアから注目を集め、可能性があることを確証しました。
コーポレートパートナーからの新たなサポートで、Androidサポートや新機能の追加、ユーザー体験の改善を含むアプリの長期的な計画にコミットをすることが可能となりました。彼らがTacchiにアプローチをしてきたときには迷わずにこのプロジェクトに加わることに決めました。
使えてモダンで、すべてのサイズや型のスマートフォンで日本語と英語の両方に効果的に機能するUIデザインを制作するために、mymizuチームと協業しました。
ボトルに水を補充できる場所を見つけることができるマップ機能がアプリの中心にあります。水飲み機のような公共の場所に加え、増加している無条件に給水を行う加盟店も含まれます。
元のアプリにあったデザインを基に、給水場所を案内し、それらの場所の詳細を閲覧するときの新しいレベルのインタラクション、ビジュアルの改善を加えました。
新しいバージョンのアプリは個人とユーザー全体の給水、そして環境への影響のデータをトラッキングし表示します。給水した場所のログを地図上、もしくは家やオフィスなどのプライベートスポットで残すことができます。
個人として約
6
本のペットボトルを削減しました！
mymizuコミュニティとして約
101,300
本のペットボトルを削減しました！
個人として約
6
本のペットボトルを削減しました！
mymizuコミュニティとして約
101,300
本のペットボトルを削減じました！
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でのナビゲーションという記事をご覧ください。
多くのモバイルアプリで共通であるように、給水場所やユーザーデータ、その他のコンテンツが格納されているデータベースをホストしている中心的なWebサービスからデータを取り、送ることが必要でした。
mymizuの内部で開発された既存のWebサーバーにRESTful APIがあったので、アプリのネットワークリクエスト、ローカルデータストレージの部分を扱うためにRedux Axios Middlewareと合わせReduxを使用しました。
この業界基準の組み合わせによりネットワーク、データ蓄積、viewロジックを分断し、特に開発チームの拡大や、プロダクトが複雑になっていくに連れ開発スピードが落ちないようそれらを明確に別々にしました。
React Native MapsはReact Nativeでマップに取り組む際、事実上のソリューションになります。マップの部分は多くの位置情報をきれいに表示するためピンをクラスタリングして表示する必要があり、React Native Mapsはクラスタリングに対応していないため、これに対応するベストなソリューションを考える必要がありました。
ピンをクラスタリングするいくつかのJavaScriptベースのアドオンがありますが、このプロジェクトのニーズに十分なパフォーマンスがあるとは思いませんでした。そのため、React Native Mapsのネイティブコードに編集を加えることにしました。GoogleのiOSとAndroid用のSDKからのコードをネイティブレベルで統合することでマップのピンクラスタリングの表示とパフォーマンスをコントロールすることができるようになりました。
最後に、新機能や変更にもコードベースが正しく継続的に機能するようDetoxインターフェーステストライブラリを活用しました。リグレッション(前には正しく動いていた機能で発生するバグ)のためのテストをマニュアルで行う時間を減らし、より早い開発、リリースプロセスを可能にします。
True love
This app is what I wanted for so long, since I have quit using single-use plastic
bottle in 2016.
If you wondered “hey does this work only in japan?” because the name is MyMizu which means my water in Japanese, please try flying over US or basically anywhere in the world and see what happens. Amazing.
Looking forward to using this to find my MyMizu spot.
こんなアプリ探してた！
給水できる場所がすぐわかるから、マイボトルさえ持っていれば、ペットボトル飲料を買わずに済む！少しずつできるエコ活動！
healthy, fun, educational!
The mymizu app has allowed me to be more conscious on my water
intake!
With its educational and fun
twist, it’s been exciting to track my refills and see the impact I personally have been making as well as
the collective impact of the mymizu community - environmentally, health wise and economically!
すっごくすごく楽しみにしていた、水を補給できる場所を探せるアプリ。一目でみてわかるのが使いやすく、出先で持っていたのみものが無くなったときに、ペットボトルを買わなくてすむ！
What an awesome way to create a valuable app. No more buying water bottles from convenience stores! I wish everyone had this app and we could save billions of plastic bottles every year!!!
Awesome app! Who'd have thought there are so many refilling stations in my neighborhood! I just wish the pop-up that shows up after logging a refill doesn't have to show up every time. Maybe every 10 or 100 refills? Or better yet just show it once and give us an option to view it anytime via a menu item thereafter.
