ミクシィでは2020年6月末に、新感覚スポーツベッティングサービス『TIPSTAR(ティップスター)』をリリースしました。『TIPSTAR』は365日配信されるライブ動画と、現在は競輪を友達と一緒に楽しむことができるサービスです。

『TIPSTAR』のスマホアプリは、ミクシィが有するUI/UX技術を駆使して、エンターテインメント性の高いサービスを目指しました。アニメーションやレイアウトの表現といった表面的な部分から、ユーザーの操作性を邪魔しない裏側のシステムに至るまで、さまざまな工夫が凝らされています。今回は、iOSアプリエンジニアである堀江（写真 左）と寺田（写真 右）、そしてAndroidアプリエンジニアである山田（写真 右奥）に、ネイティブアプリ開発のこだわりについて語ってもらいました。

『TIPSTAR』の過去の記事について
♯1 低コストで高品質って両立できるの？ 『TIPSTAR』の“映像伝送システム”の仕組みとは
♯2 AIが勝手に映像を編集？ 映像自動編集の仕組みに迫る
♯3 「現場の負担を軽減しなければ……」 実現したのは、ブラウザでの映像編集
♯4フロントはReact、バックエンドはGo、DBはCloud Spanner。 さて、その理由は？

アニメーションを多用するためMVVMを採用

━━まずはこれまでの開発プロジェクトの流れを教えてください。

堀江 2019年に『TIPSTAR』の前身となるサービスの開発が始まり、8月のコンセプト＆UIの見直しを経て、iOS先行で開発がスタートしました。iOSは10月頃から、Androidは11月頃から着手しました。

山田　実は8月頃までは、動画視聴サービスというコンセプトは変わらないものの、シンプルに車券購入ができることを重きに置いたアプリを開発していました。見やすさと利便性を重視した開発ですね。

堀江　確か、2タップで車券を購入できるような設計でしたよね。デザインも黒と白をベースにしたシンプルなものでした。その後、何度か方針転換があり、今の形になったんです。車券購入アプリではなく、新しいエンターテインメントを体現するプロダクトの姿を追求した結果ですが。ダイナミックな変更が多かったので、変化に強いコードを書こうという意識がチーム内で高まったのは良かったと思います。

━━iOSとAndroidの違いはどんなところにありますか？

山田　UIパーツは一部が異なりますが、画面遷移や機能面ではほぼ同じです。

━━なるほど。見た目や操作性の部分は同じように作られているんですね。まずはiOSアプリの技術構成について伺いたいのですが。

堀江　言語はSwiftで、アーキテクチャーはMVVMを採用しています。Swiftを選択したのは、そもそもiOSの開発言語には、メジャーなObjective-CとSwiftとそんなに選択肢がない中で、Swiftのほうが新しくできた言語ということもあり書きやすかったから。なので、必然的にSwiftを選択したというのが正直なところです。MVVMについては、割と一般的なアーキテクチャーではあると思います。『TIPSTAR』は映像や動画を見るだけでなく、アニメーションを多用したアプリになるので、コードでアニメーションを表現するためにStoryboardではなくMVVMを採用しています。

━━MVVMを使うメリットはどういったところで現れてくるんでしょうか。

寺田　Storyboardでの開発はほとんどコードを書く必要がなく、画面にパーツを置いていくだけなので比較的進めやすい利点もあるのですが、端末の画面サイズに対してアジャストさせていくのが難しいという問題があるので、コードでレイアウトを作る方法を選択したんですよね。

堀江　そうですね。他にも無限スクロールでMVVMが活きています。『TIPSTAR』は動画サービスなので、メモリの消費を抑えながら別映像の無限スクロールを可能にするにはどうすべきか、を考えるのが至難の業でした。具体的には、決められた領域をスクロールさせてエンドが近づいてきたら、シュッと自然に戻らないといけない。動画も再生しているのでメモリの使用量は結構重たい。だからこそ、最低限の数で回せるようにしています。

━━もしメモリの使用量を気にしないのであれば、どのような対処になりますか？

堀江　スクロール位置のエンドが近づいたらスタートに戻すというのを何も気にせずやるだけですね。例えば、一つの画面をコピーして、一枚目から二枚目に切り替わったときに、無限スクロールに見せるように同じように表示していく。完全に移動が完了したら位置を入れ替えていくことによって、スクロールしているように見せかける。ただその場合、同じものをコピーしているので、2倍領域を使ってしまいます。さらに動画配信をしているので、軽はずみにコピーしてしまうと再生位置がズレてしまう。こっちの映像は30秒を経過していて、一方の動画は10秒しか経過していないというように、というように。iOSの場合はロードを挟みたくなかったので、真ん中を契機にして情報を切り替えて再生を切り替えています。

━━すごく細かいけれど大変な調整になるんですね…！Androidの技術構成についても聞かせていただけますか？

山田　言語はKotlinで、アーキテクチャーはiOSと同じMVVMです。アニメーションを表現するため、AndroidXのコンポーネントにあるMotionLayoutに依存しています。世に出ているアプリの中で採用されていないようなものなので、これは結構特徴的なところかもしれませんね。データのやりとりはLiveDataを使用。画面起動時ではなく、データが必要になったタイミングで処理をする設計になっています。動画再生はExoPlayerを使っています。

Unityを組み込んだ理由

━━iOSとAndroidにおいて、どんな技術的チャレンジに取り組まれてきたんでしょうか。

堀江　『TIPSTAR』のネイティブアプリどちらにも共通しているのが、ガチャの部分はUnityを入れて開発しているところです。・・・続きはこちら