Zenn
🕵️‍♂️

mixi2 の技術スタックを探ってみる (アプリ編)

2024/12/20に公開
アプリ
mixi2
tech

(この記事は マイベストの社内LTで発表したものを記事にしたものです！発表資料はこちら)

2024年12月16日にリリースされた mixi2。懐かしさと新しさが入り混じったこのアプリの技術スタックを調べてみました！

結論だけ知りたい方は こちらから見れます！

きっかけ

mixi2 がリリースされたとき、SNS 上で「mixi2 はFlutter 製っぽい」という噂を目にしたので、その真偽を確かめるべく実際に調査をしてみました。

大前提 🙋‍♂️

  • 違法行為は一切行っていません
  • 本記事では、mixi2 に限らず他のアプリでも応用可能な調査方法を紹介します
  • 記事を作成した時点では、 mixi2 はネイティブアプリのみリリースされていたので調査はiOSのアプリで実施しました

調査したいポイント

今回は以下あたりがわかるか調査してみました！

  1. アプリの言語は何を使用している？ (Swift, Kotlin, Dart(Flutter), React(React Native)?)
  2. API の通信手段は？ (REST, GraphQL, gRPC?)
  3. 使われているライブラリは？ (State 管理や Analytics、Logging周りは？)
  4. メディアファイル系の置き場所は？ (S3, Cloud Storage, imgix)

今回やらなかったこと

  • 開発者への直接的なインタビュー
  • 採用情報から調べる(2024年12月18日時点では mixi2 のエンジニア募集はありませんでした。)

実際にやったこと

調査1. ライセンス表記から探る

Apple/Googleのストアへアプリを公開する際には、審査のガイドライン上利用している OSS のライセンス表記がほぼほぼ必須かと思います。このライセンス情報を手がかりに、アプリで使われている技術を確認していきます。

実際の方法

ライセンス一覧の場所はアプリによってまちまちだと思いますが、基本的に設定アプリ内 or アプリ内の設定項目に含まれていることが多いです。

mixi2 はアプリ内の設定項目にあり、 プロフィール → 設定 → mixi2 について → ライセンス を辿ると確認できました。


mixi2のライセンス一覧

余談ですが ChatGPT のアプリを見ると、ChatGPT は端末の設定アプリ内にライセンスの記載がありました。


ChatGPTのライセンス一覧

発見した技術スタック

ライセンス表記を確認してどんなライブラリを使っているかがわかったので、自分が気になったPickupしてみました！

  • Dart, Flutter
  • Bugsnag
  • Firebase関連 (Analytics, Crashlytics, etc.)
  • Google Fonts (Noto Serif Japanese)
  • gRPC
  • Protobuf
  • Lottie
  • RxDart
  • WebSocket
  • GitHub Copilot (??)

やっぱり噂通り Flutterでしたね！

調査2. Proxyを利用してリクエストを確認する

次に、Proxyman や Charles などを使用して、アプリの HTTP リクエストを確認しました。この方法を行うことで通信内容からアプリで利用されている技術を推測することができます。

しかし、、Flutter製だと見れませんでした😇

Proxymanを使用して通信を確認しようとしたところ全くログが取れなくておかしいなぁと思っていたのですが、Proxymanのドキュメントに以下の記載がありました。

Currently, Flutter does not use the system-level proxy, so if you use Proxyman, you might not see any traffic from your Flutter Project.

引用: https://docs.proxyman.io/debug-devices/flutter#id-4.-flutter-with-android-emulator

どうやら　Flutter 製アプリでは、システムレベルでの Proxy が使用できず、通信内容を直接確認することはできないみたいです。。 (残念)

なので調査としてはここまでになります。。

(一応) マイベストを見てみる

今回リクエスト経由での mixi2 の調査はできませんでしたが、代わりに React Native 製のマイベストのアプリも見てみました。

画像は iOS 版の Proxyman のスクリーンショットでマイベストのアプリを開いた時に取れたログです。

こちらをみると以下の技術を使用していることが推測できます。

  • Firebase Remote Config (ドメイン名から)
  • Sentry (ドメイン名から)
  • KARTE (ドメイン名から)
  • imgix (スクリーンショットからだとわからないですがimg.my-best.comのリクエストヘッダから確認できます)

調査結果

2024年12月18日時点での　mixi2 の技術スタックについて以下が自分の見解です。

  • アプリの言語
    • Dart, Flutter
  • API の通信手段
    • おそらく gRPC
  • 使用しているライブラリ
    • Firebase (Analytics, Crashlytics など)
    • Bugsnag
    • RxDart
    • Lottie
    • Google Fonts
      • Noto Serif Japanese
  • メディアファイルの置き場所
    • Proxy を使用できなかったため不明

まとめ

  • アプリのライセンス表記を確認することで、使用されている OSS やライブラリをある程度把握可能。
  • Proxy を活用すれば、さらに通信に関する情報が得られる（ただし Flutter 製アプリでは難しい）。

他のアプリでも同様の方法で調べることができるのでそれもまた面白そうな気がします！
ではまた！👋

Discussion