【アプリ紹介】お買い物リスト – 夫婦・家族・友達でシェア＆買い忘れゼロ

「お遣い頼まれたけど、似た商品がいっぱい…どれを買えばいいんだ？」

「お遣いのリストはもらったけど、この商品名だけだとどれか分からないよ…」

「家族と買い物リストを共有したいけど、LINEで送ると埋もれちゃう…」

そんな経験、ありませんか？ 🤔💭

『お買い物リスト-ShoppingTodo-』は、夫婦・家族・友達と買い物リストを共有できるアプリです。
さらに、買うものにURLを添付できるので「どの商品かわからない！」も解決！
チェックリスト機能で、買い忘れも防げます！

アプリをダウンロード

本記事公開時点ではリリースに向けて準備中です！

iOS版は審査依頼を提出いたしました。
正式リリースされましたら、こちらにリンクを配置予定ですので何卒よろしくお願いいたします。

2025/4/16（水）にiOS版をリリースしました！

iOS版

1.主な機能

1-1.ユーザー認証

Googleアカウント、AppleIDのいずれかを利用してログイン出来ます。

1-2.買い物リスト登録

• グルーピング
  買う物をグループに分けて登録できます。
  (例) 作り置きするメニューごと、同じお店の中でも各売り場ごと等
• 買い物リンク(URL)添付
  URLを添付すると品名がリンクになります。
  タップすることでブラウザが開いて該当のWebページを表示します。
• 閲覧者/管理者登録
  買い物リストを共有する相手を設定できます。
  こちらで設定したユーザーは同じ買い物リストを共有できます。
  管理者に設定されたユーザーの場合、買い物リストを作成したユーザーでなくとも編集/削除を行うことができます。
  なお、閲覧者/管理者の追加・削除は買い物リストを作成したユーザーのみ可能です。
  閲覧者/管理者には他に共有されているユーザーをアプリ上から特定することはできません。
  ※買い物リストに閲覧者・管理者を設定するには事前に「共有者リスト」に対象のユーザーを登録しておく必要があります。

1-3.買い物リスト一覧表示

自身が登録した買い物リストや、自身が閲覧者/管理者に登録されている買い物リストが一覧表示されます。

タップすることで詳細画面が表示されます。

1-4.買い物リスト詳細表示(閲覧/編集/削除)

登録した買い物リストを表示します。
チェックリストで買い忘れを防止します。

各グループは展開アイコン（▲/▼）をタップすることで開閉できます。

1-5.共有者リスト登録/削除

買い物リストを共有したいユーザーを登録できます。
買い物リストを登録する際に閲覧者・管理者に選択できるのはこちらで登録したユーザーのみです。

2.操作方法

2-1.初回起動時

• Googleアカウント、AppleIDのいずれかからログインする

2-2.買い物リスト登録

1. 画面右上の「+」ボタンをタップする
2. 買い物をする日、場所、買い物リスト、閲覧者、管理者をそれぞれ入力する
   ※場所、閲覧者、管理者は任意入力
3. グループを追加したい場合、グループ最後尾の「+」ボタンをタップする
4. 画面右下の「登録」ボタンをタップする

2-3.買い物リスト表示

1. 買い物リスト一覧から、表示したい買い物リストをタップする
   ※一覧を上から下に引っ張ることでデータを更新出来る

2-4.共有者リスト登録

1. 画面左上のハンバーガーメニュー（≡）をタップし、「共有者リスト」をタップする
2. 共有したいユーザーのメールアドレス、ニックネームを入力する
   ※ニックネームは買い物リストの「閲覧者」「管理者」に登録する際に表示されます。メールアドレスは表示されません。
3. 画面右下の「登録」ボタンをタップする

2-5.共有者リスト削除

1. 画面左上のハンバーガーメニュー（≡）をタップし、「共有者リスト」をタップする
2. プルダウンから、削除したいユーザーを選択する
3. プルダウン右下の「削除」ボタンをタップする

3.アプリ利用規約

4.プライバシーポリシー

5.お問い合わせ先

アプリの気になった点や改善点、こういった機能が欲しい等のご要望は以下からお問い合わせください。

本ブログお問い合わせページ

6.今後のアップデート予定

私たちが欲しい機能を羅列してます。
一部通信量に伴う維持費次第では断念するものもあるかもしれないです…💦

追加予定機能

• 買い物リスト複製
  • 毎回新規で作る手間を省く
• 買い物リスト検索
  • 買い物リスト一覧を絞り込み表示することで目的の買い物リストを探す手間を省く
• 買い物リスト登録通知
  • 連携者に自身が設定されていた買い物リストが登録された際にスマホに通知が来る
• 画像添付機能
  • URLリンクだけでなく画像等を添付することで、より正確な情報を共有出来る
• 設定変更機能(買い物グループの初期表示→開/閉等)
• 買い物リストのリアルタイム同期機能
  • 買い出しを複数人で手分けする時に、チェックリスト等の状態をリアルタイムに同期することで効率的に買い出しを済ませる

〜ここからはエンジニア、または技術等に興味がある方向けの話題でございます〜

7.主な使用言語・フレームワーク・ライブラリ・サービス

• TypeScript
• React Native
• Firebase Cloud Firestore
• Google Mobile Ads
• cryptojs

ある程度は以下の記事でご紹介しておりますので、こちらの記事には載っていないものをご紹介します。

Google Mobile Ads

Googleの広告をモバイルアプリに表示出来ます。
はい、皆さんがよく見るアレです。
アプリ利用に支障が出るレベルでは表示しないようにしておりますのでご了承ください。

cryptojs

Firebase自体が暗号化技術を使用しておりますのでそもそも安全ではあるのですが、私たちのようなDB管理者は登録している値が普通に見えます。はい、見えるんです。怖いですよね。

私たちとしても利用者の個人情報をパッと見て入手出来てしまうのは普通に怖いですしリスクは回避したいので、Firebaseの暗号化に加えて独自で暗号化を実施しています。
その際にcryptojsを利用しております。

独自で暗号化することでDB管理者がFirebaseのデータを見ても下図のように見えるので、何が書いているのかは意図的に復号しないと把握出来ません。

もちろん、私たちが意図的に復号して情報を取得することはございません。
※やむを得ない事情（開示請求のような法的措置等）は除きます。やむを得ない事情にならないように、利用規約の遵守をよろしくお願い申し上げます。

8.技術選定理由

React Native

React Nativeは私たちのどちらも未経験でしたが、Reactは経験があったため習得しやすいかと思い選定しました。

Firebase

DBサーバーを運用するのはちょっとしんどいなと思いまして、クラウドサービスを利用しようと思いつきました。
その際「React Native クラウドDB 」的な文言で検索するとFirebaseの記事が多かったためFirebaseにしました。

9.なぜ本アプリを作ろうと考えたか

「業務上で得られる経験だけでは今後置いていかれる、スキルアップを目的に何かしらアプリを作ってみよう」と私たちの間で会話がありました。
本ブログ自体も同じ経緯から始めたものですが、始まりは本アプリでした。

GitHubのプライベートリポジトリでソース管理をしているのですが、今見たら最初のコミットが2020/08/08でした…ｗ
約5年前ってマジか(;’∀’)
期間だけ見たらどれだけ規模が大きいアプリなのかと(;^_^

まぁ普通に仕事しながらちゃんとリリースまで持ってきた自分たちを素直に褒めたいと思います！

-閑話休題-

実は冒頭に書いている困りごとはすべて私たちの困りごとでした。
アプリを作るなら自分たちの困りごとを解決出来るものが良いよねとなり、本アプリの要求定義をし始めて、ここまで至る、といった経緯でございます。