iOS Tech Talk【みてね x Mirrativ】イベントレポート

2022年3月15日に開催されたiOS Tech Talk【みてね×Mirrativ】。iOSアプリ開発に携わるエンジニアに向けてライブ配信された本イベントは、各社のプロダクト開発最前線を走るiOSエンジニアが、日頃の取り組みや最新事例について等身大で語りました。本レポートでは、パネルディスカッション内容を中心にその一部をお届けします。

【登壇者】
株式会社ミクシィ みてね事業部 プロダクト開発グループ エンジニア 岩名 勇輝
2018年に新卒でミクシィに入社し、そのままみてね事業部へジョイン。
スマブラが好き。
@_rockname

株式会社ミクシィ みてね事業部 プロダクト開発グループ エンジニア 佐藤 光
2021年に中途でミクシィに入社し、みてね事業部へジョイン。
主にiOSアプリの開発を担当。
@hicka04

株式会社ミラティブ 技術部 クライアントエンジニア 竹澤 俊季
いくつかのメディア系サービスに関わった後、2021年6月にミラティブに中途入社。
iOSアプリの開発を担当。
@to4iki

株式会社ミラティブ 技術部 クライアントマネージャー 千吉良 成紀
2018年12月にミラティブに入社し、Mirrativアプリの開発業務に従事。iOSリード兼マネージャー。
Horizon Forbidden Westにのめり込んでいる。
@_naru_jpn

【モデレーター】
株式会社ミクシィ みてね事業部 プロダクト開発グループ　マネージャー 酒井篤
「家族アルバム みてね」創業時にエンジニアとしてジョイン。
以後、クライアント・サーバーサイドの開発に関わり、現在はマネージャーとしてピープルマネジメントや組織開発などにコミット。
@_atsushisakai

「みてね」と「Mirrativ」――人と人をつなぐ両プロダクトのこだわりとは

株式会社ミクシィが提供する「家族アルバム みてね（以下、みてね）」は、子どもの写真や動画を家族で共有し、そこから生まれるコミュニケーションを楽しむサービスです。
2021年3月に利用者数は1,000万人を突破しており、2022年4月にはリリース7周年を迎えようとしています。多言語対応も進め、世界中から愛されるサービスへと成長しました。「子育てをもっと楽しく」をコンセプトに、世界中の家族の“こころのインフラ”となるべく、アプリを通じたフォトブック作成、フォトプリント、出張撮影など多様なサービスを展開しています。

一方、株式会社ミラティブのゲーム配信プラットフォーム「Mirrativ」は、スマホ一台で気軽にゲーム配信できる環境と、そこから生まれるコミュニケーションを提供するサービスです。配信者数は現在360万人以上、スマホゲーム配信者数は国内No.1を誇ります。「わかりあう願いをつなごう」をミッションに掲げ、インターネットを通じて互いの理解が叶う場作りを目指しています。

両者共にコミュニケーションを通じて豊かな世界を創るサービスを開発していることから、今回のイベントが実現しました。

イベント前半のLTでは、toCサービスかつスマホにおけるユーザー体験の向上が提供価値に直結する両プロダクトのiOSエンジニアが、それぞれの現場で試みている挑戦について語りました。

「みてね」開発に携わる岩名勇輝氏は「Optimistic Updates」を取り入れるメリットと実装例について発表。ユーザーの操作を中断させることなくシームレスな体験を実現することが、同社プロダクトのUX向上につながることを示しました。コメント送信機能をOptimistic Updatesで実装する事例を挙げ、詳しく解説しています。

また、同サービス開発を担う佐藤光氏は「Swift Concurrency」導入で決めたことをテーマに発表。Swift Concurrencyの基礎知識を紹介した後、実際の導入時に検討した選択肢と、結果決めたことをフェーズに分けて解説しました。こうして手探りしながら得られた知見は、今後順次発信予定です。

「Mirrativ」の開発を行う竹澤俊季氏も「Swift Concurrency」の利用例について発表。UIViewController表示の排他制御をテーマに、具体的な実装例について解説しました。

同サービス開発を担う千吉良成紀氏は「PiPで実現するミラティブの配信コメントバー」をテーマに発表。PiPの自由度が高まったことに触れつつ、アプリ負荷を配慮して実現した実装の詳細について解説しました。

パネルディスカッション

イベント後半はLT発表者4名がパネルテーマに対して回答。モデレーターを「みてね」プロダクト開発グループマネージャーの酒井篤氏が務めました。

モデレーター：酒井篤
パネリスト　：岩名勇輝、佐藤光、竹澤俊季、千吉良成紀

パネルテーマ①UI/UXで意識していること

酒井：それでは、パネルディスカッションを始めます。はじめのテーマは「UI/UXで意識していること」です。各社がUI/UXを考える際、エンジニアとデザイナーでどのような協働が行われているかお聞かせください。また、コードベース上でのデザインに対する工夫についてもお伺いできればと思います。まずはミラティブの竹澤さんからお願いします。

竹澤：「Mirrativ」の特性として、内部でUnity製のゲームを表示する場合があります。この際、どこまでをUnity上の体験として扱うべきか考えることが多いですね。例えば、エラーのダイアログひとつ表示するにしても、Unity上で表現すべきか、iOSクライアントでエラーのメッセージを受け取ったものとして標準コンポーネントを用いるか悩みます。基本的にはガイドラインに従いつつ、日々検討しているところです。

酒井：なるほど。「みてね」とは事情が違うので、興味深いです。独自の社内ガイドラインがあるのでしょうか。

竹澤：いえ、各ゲームの最適解が異なるなかで、共通化できそうな部分をすり合わせているような状態です。

酒井：具体的な方針を示す際は、エンジニア側から働きかける場面が多いのでしょうか。

竹澤：エンジニアとデザイナー間で都度コミュニケーションを取りながら方向性を決めています。

酒井：ありがとうございます。続いて「みてね」の岩名さんはいかがでしょうか。

岩名：「みてね」は基本的にデザイナーが主体となって仕様を考えます。その後、ミーティングでその仕様について、エンジニアも交えて議論を重ねます。「このUIや仕様だと直感的に実装できないから、このように変更してみてはどうか」など、エンジニアの視点からの意見を伝え、双方が納得する仕様の着地点を模索していきます。

酒井：なるほど。iOSエンジニアの声も交えつつ、精度を上げていくのですね。

岩名：そうですね。仕様をより良いものにすべく、一方通行ではなく双方向に作用するコミュニケーションを意識しています。

酒井：ミラティブの千吉良さんにもお伺いします。機能やUIの仕様は、どのようなきっかけで生まれ、そこから練り上げていくのでしょうか。

千吉良：ミラティブの場合は、PMが前提や大枠を作って、デザイナーがその詳細を考える場合が多いです。例えば「Mirrativ」の配信画面や視聴画面では、いわばゲーミング性の強いUIが求められるケースもあります。「ユーザーさんにどのような体験を提供したいか」という部分にデザイナーのこだわりが出るので、そのこだわりを再現することを意識しつつ、仕様を練り上げていきます。

酒井：ありがとうございます。主にUIにおいて、デザインプロセス上の効率化のために工夫している点があれば教えてください。コードベース上でも、開発プロセス上でもかまいません。「みてね」の岩名さん、いかがでしょうか。

岩名：デザインシステムを2019年から継続的に運用しています。現在は、デザイナーにデザインをFigmaで共有してもらい、デザインシステムに定義された色などがコードに反映されるようにしています。また、ボタンなど主に使うコンポーネントは、すでに定義してあるものを使うようにしているので、UIは簡単に作れる仕組みができています。

酒井：なるほど。ミラティブにもデザインシステムは存在しているんですか。

千吉良：存在しています。カラーコードと色の名前を紐付けて定義していますし、テキストも決められた複数のスタイルから採用しています。コード上も同じ構造になっているので、意識せずとも実装とデザインが同じ形になるようにしています。

酒井：ありがとうございます。それでは、次のテーマに進めていきましょう。

パネルテーマ②開発効率を上げるために取り組んでいること

酒井：次のテーマは、「開発効率を上げるために取り組んでいること」です。開発効率における課題はさまざまな場面で挙げられると思いますが、各社で導いた解決策や対応について教えてください。「みてね」の佐藤さん、いかがでしょうか。

佐藤：「みてね」ではビルドの速度対策に力を入れています。一切使われていないコードを検出し、適宜削除しています。また、ビルド速度を定点観測して結果をSlackに投稿し、遅くなっているところがあればアクションできるよう準備しています。

酒井：ビルドの速度問題は常にどこでも出てくる問題だと思うのですが、ミラティブではどのような対策をされているのでしょうか。

竹澤：スペックの良いMacを買う、ですかね（笑）

一同：（笑）

竹澤：まだ十分とは言えませんが、モジュール分割は対策の一つと言えますし、不要なリソース対策もそうですね。不要なコードや画像がまだまだ残っているので、未使用のそれらを検知して削除する取り組みをiOSチームの目標に据え、タスクを可視化し、対策を進めています。

酒井：チームの目標にすることで「絶対に解決するぞ」という意気込みが生まれそうです。

竹澤：そうですね。ミラティブでは四半期ごとに開発目標を立てています。したがって、スキマ時間で対策を進めるというよりは、明文化することで優先度を高め、チームで同じ目標に向かって効率化に向き合っています。

岩名：「みてね」も同じように、チームで目標を立ててやっています。定例会を毎週開き、iOSエンジニア同士で課題を挙げます。そこで挙がった課題をプールしておくボードがあり、そこを各自チェックしながら課題を順次クリアしています。ただし、どうしても時間が取れない問題もあるため、週1日はメインのプロジェクト以外の課題に取り組む時間を確保できるような仕組みが導入されています。

酒井：ミラティブはメインのプロジェクトがある中で、どのように課題解決の時間を捻出しているのでしょうか。

千吉良：イベント関連の実装があるときは、どうしても時間の確保が難しくなります。なので、週に何時間など決まった形で、都度タイミングを計りながら課題に向き合っています。

酒井：なるほど。メリハリをつけてやれるときに集中して取り組むイメージですね。ありがとうございます。

このほか、イベント当日は視聴者の質問に応える時間が設けられました。ライトニングトークとパネルディスカッションの詳細を知りたい方は、ぜひYouTubeのアーカイブ動画をご覧ください。

■みてね
みてねエンジニアブログ
ミクシィグループエンジニアブログ
Youtubeチャンネル：mixi Tech Talk

■ミラティブ
ミラティブテックブログ
エンジニア向け会社紹介資料/Engineer's Handbook
ミラティブ会社紹介資料