お酒のレビューアプリ「Nonda」をリリースした際の技術選定（Expo, ReactNative, Supabase）

はじめに

こんにちは、@mewutoです。
2024年3月、@kuraと共同創業し、お酒のレビューアプリ「Nonda（ノンダ）」のβ版をリリースしました。お酒のレビューアプリ「Nonda」を一言で表すなら写真メインのSNSアプリです！
作るべき機能やデザインはkuraにすべて任せ、私は開発にのみ集中するという体制を取ったため、今回は「Nonda」の開発の裏側を話します。

本稿では、画像や検索を主要機能とするアプリを開発する際に直面した課題とその解決策に絞って説明します。
また、記事の終わりに「Nonda」のテストユーザ募集セクションを設置しています。触りながら記事を読むもよし、読んでから興味が出てテストユーザ申し込みするも良しです。

では、本題へ。

直面した課題

ネイティブ（iOS）のSNSアプリを作るにあたって、以下の2点の課題に直面しました。

• iOSプラットフォーム開発に関する知見がない
• 画像配信、検索機能が想定されるが、うまい解決策を持っていない

iOSプラットフォーム開発に関する知見がない

私はネイティブアプリ開発の経験がなく、AppStoreへのリリース方法やiOSプラットフォーム独自の知見がありませんでした。
しかし、Webアプリ開発などを通して、プログラミング言語を用いて実装していくことに関しては解像度が高かったため、AppStoreへのリリースやiOSプラットフォーム独自の面倒な部分を簡単に実現できそうな技術を最優先で検討しました。

画像配信、検索機能が想定されるが、うまい解決策を持っていない

以下に示す通り、それぞれの機能を実装する際の課題は認識できていたのですが、これらのうまい解決策を持ち合わせていませんでした。

• 画像配信

  • 画像はデータサイズが大きいので、大抵はコストを抑えるために画像圧縮をする
  • ストレージへのリクエストに課金が発生する場合、うまく配信、キャッシュしないと想定外のコストがかかってしまう

• 検索機能

  • 検索がうまく機能することとアプリの満足度は比例するので、下手なものは作れない
  • そもそも日本語での検索は難しい（"日本"が"にほん"でヒットするかどうかなど）
  • エンベッディングとかベクトル検索とかを用いると良いらしいのだが、よくわかっていない

解決策

上述した課題を解消するために技術スタックとして以下の技術を採用しました。

• Expo
• Supabase

Expo

ExpoはReactNativeで開発するためのプラットフォームです。以下に私が感じたメリットとその理由を記載します。

• AppStoreへのリリースプロセスを意識する必要がない
  Expoは、EAS（Expo Application Services）というビルドプロセスやアプリの配布をクラウドベースで管理するサービスを提供しています。
  他の技術だと、ビルド時に依存関係の複雑さに悩まされることや配布の管理が面倒だと思いますが、EASだと、クラウドでグラフィカルにビルドプロセスを監視でき、バージョンの管理も容易です。

• クロスプラットフォーム（iOS, Android, Web）
  エンジニアリソースは私1人なので、この恩恵は大きいです。

• ネイティブ部分を隠蔽
  もし仮にSwiftなどを用いてiOSアプリを開発する場合、iOSプラットフォームに関するUIの構築方法やiOS固有のAPIへの理解が求められます。これらの仕様は、現状、エンジニアリソースの観点から負荷が大きすぎると判断しました。
  そのため、Expoを採用することでネイティブ部分を隠蔽し、Webアプリのように作れるというのは私にとってかなりメリットが大きいと感じました。

他にもメリットは色々ありますが、特にEASやTypeScriptの知識を流用したかったという背景でFlutterではなくReactNative（Expo）を採用しました。

Supabase

SupabaseはDBの中でもかなりリッチな機能を有しています。（実際、機能を100%使いこなせている実感はありません。）Supabaseの説明をしているとそれだけで記事が1本書けてしまいそうなので、また今度として、ここではSupabaseが提供している機能をピックアップし、上述の課題をどのように解決したかを説明します。

• アプリ開発の面倒な部分を簡単に実現できる
  SupabaseのAuthを利用することで、ユーザの認証認可やユーザのセッション管理などのアプリ開発における面倒な部分を意識せず、全てSupabase側に任せることができます。

• 画像配信
  Supabaseの課金版では、Smart CDNという機能があります。画像のキャッシュや配信に関することを課金するだけでよしなにやってくれます。個人開発などの場合、こういった最適化オペレーションに対してリソースを割けない場合がほとんどだと思いますので、かなり良い機能だと感じました。画像サイズなどに関しても、ストレージのイメージオプティマイザーに全任せしています。

• 検索機能
  SupabaseはAI&ベクトルにかなり力を入れています。機能は豊富にありますが、現在のアプリの検索アルゴリズムではPGroongaという拡張機能を利用しています。日本語での全文検索が可能になります。テーブルのカラムにインデックスを貼るだけで実現できました。
  その他、要件に応じて検索アルゴリズムを使い分けることができる点も良いです。

結果的に画像配信は課金するだけ、検索機能は検索をかけたいテーブルのカラムにインデックスを貼るだけで上述した2つの課題を解決することができました。

まとめ

今回は写真メインのSNSアプリを開発する上で直面した課題とその解決策に絞って説明しました。
推測可能な難しい課題に対して、技術選定の段階で解決策を用意しておくことで、想定より容易に問題を解決できました。

一方で、想定外の難しい課題にも直面しました。 その1つがルーティング（ページ間ナビゲーション）です。タブやスタックの概念が必要になり、これらをうまくレイアウトするにはWebルーティングとは異なる知識が必要でした。良い実装を学ぶにしても、ExpoSKDの早い進化や参考文献の少なさにより難しかったです。個人的なベストプラクティスなるものを定義できなかったので、本筋からは省きましたが、もしこれからネイティブアプリを作る際はルーティングも事前に考慮しておくのが良いでしょう。参考までに、「Nonda」と同等の機能を持ったルーティングを考える場合は公式ドキュメントやGithubのsample実装を参照するのが良いと思います（全部英語ですが、、、）。

以上、ここまで読んでいただきありがとうございました！
今後の「Nonda」の技術的な動向が気になる方はぜひ@mewutoをフォローお願いします！

宣伝

最後までご覧いただきありがとうございました！
冒頭に記載したとおり、2024年5月現在、お酒のレビューアプリ「Nonda」はテストユーザを募集中です！
できたてほやほやのアプリを触ってみたい方、ユーザーフィードバックにご協力いただける方、是非ベータ版にお申し込みください。

Nonda（ノンダ）は、お酒のレビュー・記録アプリです。

ワイン・日本酒・ビール等、あらゆるお酒のレビューをチェック・投稿できる機能をベースに「飲んだお酒の記録」「飲みたいお酒のメモ」「お酒の感想や情報をシェアして楽しむコミュニケーションツール」としてご利用いただけます。

ベータ版お申し込みフォーム

2024年5月現在、
iOSアプリとして限定的にベータ版の提供を開始しております。

テストプレイにご協力いただける方は、下記フォームよりお申し込みください。（通常1~2営業日以内にβ版のご案内をお送りします。）

https://docs.google.com/forms/d/e/1FAIpQLSe8vwLYHRKTU_SVa2G1gBBH78tFZhlfMq1IxWRHZ11nMlSBeQ/viewform