Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
mixi2 の技術スタックを探ってみる (アプリ編)
Search
Ichiki
December 19, 2024
Technology
0
290
mixi2 の技術スタックを探ってみる (アプリ編)
2024年12月19日に行われたマイベスト社内LT発表資料です!
Ichiki
December 19, 2024
Tweet
Share
More Decks by Ichiki
See All by Ichiki
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
540
React Native 製アプリで Android 版をリリースする際にハマったポイント 2 選
ichiki1023
0
130
Other Decks in Technology
See All in Technology
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
180
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
180
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
270
LLMを搭載したプロダクトの品質保証の模索と学び
qa
1
1.1k
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
470
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
580
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
230
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.4k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.2k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
200
テストを軸にした生き残り術
kworkdev
PRO
0
220
20250913_JAWS_sysad_kobe
takuyay0ne
2
260
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Into the Great Unknown - MozCon
thekraken
40
2k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Docker and Python
trallard
46
3.6k
Practical Orchestrator
shlominoach
190
11k
Unsuck your backbone
ammeep
671
58k
For a Future-Friendly Web
brad_frost
180
9.9k
Automating Front-end Workflow
addyosmani
1370
200k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Optimizing for Happiness
mojombo
379
70k
Transcript
mixi2 の技術スタックを探ってみる (アプリ編) 2024-12-19 マイベスト社内 LT / Ichiki Sato (@ichiki1023)
みなさん!
先日 mixi2 がリリースされましたね! 懐かしさと新しさが入り混じった良いアプリ!
今日はそんな mixi2 の技術スタックを調べてみました
きっかけ mixi2 が先日(2024/12/16)にリリースされた X で Flutter 製だよ、という噂を見たので真実かどうか確かめたくなった アプリが良い感じなのでついでに他の周辺技術も気になったので調べてみたくな った
大前提 犯罪に触れることはしていません mixi2 と言いつつ方法論的な話をメインにするので他でも使えます
アプリの気になりポイント アプリの言語は? (Swift or Kotlin, Dart(Flutter), React(React Native), ...Other?) API
の通信手段は? (REST, GraphQL, gRPC?) 使っているライブラリは? (State 管理は?, Analytics は? Logging は?) メディアファイル系の置き場所は? (s3? Cloud Storage? imagix?)
(補足) 今回やらなかったこと 開発者に直接聞く 採用情報から調べる 見た限りだと特に mixi2 のエンジニア募集はなかった (2024/12/18 時点) https://mixigroup-recruit.mixi.co.jp/jobs/?cats=engineer
2 つのアプローチ 1. ライセンス表記から探る 2. Proxy 経由でリクエストを覗き見る
1. ライセンス表記から探る 2. Proxy 経由でリクエストを覗き見る
Apple 公式の App Review ガイドラインからの引用 https://developer.apple.com/jp/app-store/review/guidelines/ 5.2.1 全般:商標、著作権取得済みの作品、特許取得済みのアイデアなどの保護さ れたサードパーティ製の素材をアプリで許可なく使用することはできません。ま た、誤解を招く、虚偽の、または模倣の描写、名前、メタデータを
App Bundle (アプリバンドル)やデベロッパ名に含めることは許可されません。アプリは、 知的財産権およびその他の関連する権利を所有する、またはそのライセンスを受 けている個人または法人によって提出される必要があります。 1. ライセンス表記から探る
つまり、アプリを公開するなら利用している OSS の ライセンス表記はほぼほぼ必須 対応していない場合は Reject をもらう可能性も。 。 Apple を例に出したが
Google も同様 (参照) 1. ライセンス表記から探る
なのでこのライセンス表記から使用している技術を探 っていきます 1. ライセンス表記から探る
実際に見てみる 1. ライセンス表記から探る
ライセンス一覧の場所はアプリによってまちまち (iOS の場合) 大抵は端末のアプリ設定 or アプリ内の設定にある mixi2 はアプリ内だった プロフィール →
設定 →mixi2 について → ライセンスで辿れます 1. ライセンス表記から探る
こんな感じ mixi2 mybest ChatGPT mixi2 同様マイベストもアプリ内、ChatGPT は端末のアプリ設定にあった 1. ライセンス表記から探る
mixi2 やっぱり Flutter だった 1. ライセンス表記から探る
その他発見した技術スタック 気になったやつだけ PickUp! - Dart, Flutter - Bugsnag - Firebase関連
(Firebase Analytics, Firebase Crashlytics, ...etc) - Google fonts - Noto Serif Japanese - gRPC - protobuf - lottie - rxdart - web_socket - GitHub Copilot (??) 技術スタック見るとツヨツヨエンジニアがいそうな雰囲気? (rxDart とか gRPC とか) 1. ライセンス表記から探る
1. ライセンス表記から探る 2. Proxy 経由でリクエストを覗き見る
2. Proxy 経由でリクエストを覗き見る Proxyman や Charles などを使って HTTP リクエストの中身を覗いてみる その情報を元に使用している技術を推測する
2. Proxy 経由でリクエストを覗き見る
しかし、 、 、 2. Proxy 経由でリクエストを覗き見る
Flutter だと見れなかった。 。 https://docs.proxyman.io/debug-devices/flutter#id-4.-flutter-with-android-emulator Flutter 製のアプリだとシステムレベルでの Proxy が使えないらしく通信内容を見る ことができなかった 通信を見たい場合はコードを修正する必要があるらしい。なので本番では見れな
い (学び) 2. Proxy 経由でリクエストを覗き見る
一応 マイベストのアプリを Proxyman for iOS で見るとこ んな感じ リクエストの内容から、以下の推測ができる Firebase 使っている
imgix 使っている (レスポンスのヘッダで判別で きる) Sentry 使っている KARTE 使っている 2. Proxy 経由でリクエストを覗き見る
さいごに mixi2 の技術スタック答え合わせ アプリの言語は? Dart, Flutter API の通信手段は? おそらく gRPC
(だと思う。いつか公式で出た情報で答え合わせをする) 使っているライブラリは? Firebase 諸々, Bugsnag, rxDart, Lottie, Google Fonts, ...etc メディアファイル系の置き場所は? (s3? Cloud Storage? imagix?) Proxy が使えなかったのでわからず。 。
まとめ アプリ側だけでフォーカスして見れば PC 使わずとも大体使っている技術が何かわ かる (ただし Flutter 製アプリだと情報が少ない) Web の場合だと最近は便利な
Chrome 拡張があるのでもっと簡単にわかる (はず)