エンジニアはどのように他のアプリのUXを参考にすべきか

問題意識

エンジニアのタイプを分けるとき、大雑把に「サービス志向」と「技術志向」みたいな分け方をすることが、僕の周りではよくあります。

個人的にはこの分け方は必ずしも良いものとは言えないと思います。少しエンジニアのことをサービスと距離のある人種として捉えてるように感じるからです。

技術志向だからってサービスのことを考えてないということではなく、「よりセキュアな技術を採用する」「効率的で安全なデプロイができるフローを構築する」などなど、技術向上を通じてユーザー体験をよくしよう、としているはずです。

ただ、デザインを良くしたり読み込みスピードを早くしたりなど、「目に見える範囲で改善する施策」を考え、実行しなければ、プロデューサー的な人からすれば「何やってんだろうな〜」と、エンジニアはブラックボックス的な人に見えてしまうこともあると思います。

じゃあ他のアプリをいじってみたりして、サービス勘みたいなものを養えばいいのでしょうか。自分はもともとそういう行為は好きなのですが、単に闇雲にアプリをいじくり回すのはエンジニアとしての長所を生かしたものとは言えないなーとおもったりして、モヤモヤしていました。

経験則ベースでの推察

ちょっとしたきっかけで、「Tiktokの動画読み込みがめっちゃ速いよね」という話が上がりまして、なんでだろうなと考えてました。

このとき、単純に考えれば「HLS形式で配信してて逐次読み込みしてるから速いのか？」「そもそもの動画サイズが小さい？」「CDNの設定？」「一覧画面など、概要だけ読み込む場面ではgifを配信してる？」などの考えが浮かびます。

このように”技術的な背景を推測する”ことができるのはエンジニアの長所だとは思います。ただ、あくまで「経験則」でしかなく、必ずしも実態とは関係がなかったりします。

サービスの実際を覗き見る

じゃあ経験則をとっぱらってみなければならない、ということですよね。そのUXの技術的な中身を実際に調べてみたら良い、ということなのでしょう。

Tiktokの場合、スクロールして都度ロードされる動画の初期読み込みがかなり速く、ストレスなく連続的に見ることができます。動画周りを少し触った方なら、まあ気になる人も多いかなと思います。同じ趣旨のアプリを作ろうとしている人ならなおさらです。

ここで第一に取るべき戦略は、「中の実装を読む」ということだと思います。OSSのアプリなら、githubのコードを見ると思います。

最近だと仮想通貨walletのbreadというアプリがOSSになってて、デザインも綺麗だし興味が湧いたりします。こういうのは設計の参考にもなるしいいですね。

しかし、普通の商業的なアプリの場合OSSになっていないのが大半だと思います。その場合、第二に取る手段として、リバースエンジニアリングするみたいな方法もあると思いますが、色々と渋いので、「通信をのぞいて見る」程度のことをしてみれば、ヒントが掴めそうです。

通信からヒントを得てみる

じゃあみんな大好きパケットキャプチャをしましょう、ということになります。

iPhoneをPCに繋いで、UDIDを控えたあと、Remote Virtual Interfaceを作成します。tcpdumpでパケットをみていくのもいいのですが、せっかくなのでWiresharkを入れて、GUIでみやすくしてみます。

その後、Tiktokを起動して動画の一覧画面をみてみます。調べたいことは「スクロール中に都度読み込まれる動画が速く、ストレスがない」というUXの根拠でした。なので、スクロールしながらキャプチャされた通信の一覧をみてみます。

きっとCDNなどから読み込まれてるはずなので、httpでフィルターをかけつつ眺めていると、スクロールを一回するたびに３度ほど動画のようなものをロードしていることがわかりました。２個目の動画のURLらしきものからリンクに飛んだところ、今表示してるものと同じ動画が読み込まれました。そして、１個目、３個目はその前後にあるものでした。

ということは、スクロールのたびに、次のスクロールの準備のために前後の動画もprefetchしてるのだろうと推察できます。

動画サイズはどうでしょうか？実際にダウンロードしてみたところ、2.5MB~50MBくらいのものまでばらついていましたが、どれも１秒かからずさくっと読みこまれていました。この動画はどこからロードされているのでしょう？

Web Consoleでreq/resを見ると、CDN経由なのはまあ当然のごとくわかります。ホストは v16-tk.ixigua.com で、hostコマンドで調べると、ixigua.comというところが管理しているAkamaiのCDNへのエイリアスのようです。ダウンロードできる動画のサイズはめちゃくちゃに小さいわけではないので、CDNの方のパフォーマンスだったり設定が良いのでしょう。ところでこのドメイン、なんなのでしょう。

このサービスがixigua.comなのですが、動画アップロードサービスのようです。youtubeに負けずおとらずこのサービスの動画の読み込み速度はかなり速いことが、いくつか動画を開いて見るとわかります。

このサービス上のprivateアカウントなのか法人アカウントなのかわかりませんが、API経由であれこのCDNを利用して配信すると、高速にロードできるのかもしれませんね。

サービスの中身を参考になったこと

自分の経験則だけで、なんとなく技術的にわかるだるうという考えで浅くサービスを触ってしまう癖があったりしたのですが、「サービス初期はAPI経由で動画配信するのもありだな」とか、「一画面に一同がしか表示しないから、prefetchの回数も抑えられているな。デザインの勝利ぽい」などなど、普段とは違った視点から中身を見ることができて新鮮でした。

より目に見えるUXをエンジニア的な視点から考えるときにどうすればいいのか、少しヒントが掴めた気がしました。

単にデザイン面ではなく、機能を深掘りしてアプリを触ってみれば、エンジニアと企画双方にとって納得のいく妙案のタネが得られるかもしれないと、ワクワクしました。次は通信だけではなく、違う視点を見つけて参考となるUXを調べてみたいと思います。

もし別の手段があれば、是非教えてください。