【インターンレポート】LINEのiOSアプリのコンテンツ推薦に関連するメトリクス計測機能の実装&チャットタブUI改善の提案

By | 2021.01.08

はじめに

こんにちは。8/17から6週間、LINEの技術職 就業型コースのインターンシップに参加しました五島剛です。

私は今回のインターンで、LINEアプリのiOSクライアント開発チームのうちApp Dev 5チームに所属し、iOSアプリのコンテンツ推薦に関連するメトリクス(性能指標)計測機能の実装とチャットタブのUI改善の提案を行いました。本記事では、それらの内容について紹介します。

コンテンツ推薦に関連するメトリクス計測機能の実装

問題

LINEアプリのホームタブには、ユーザの行動履歴（どの広告をタップしたか、どの広告がどれくらいの時間画面に表示されていたか、など）に基づいてそれぞれのユーザに合ったコンテンツを推薦する機能が実装されています。
この機能は一般的な実装とは異なり、レイアウト情報をJSON形式で記述し解析してレンダリングする、というブラウザがHTMLを解釈するのと似た形式で実装されています。

このコンテンツの推薦は以下のような動作から構成されています。

  1. サーバからJSON形式のレイアウト情報を受け取る。
  2. キャッシュ、またはサーバから受け取った推薦コンテンツを描画する。
  3. どのコンテンツがどのくらいの時間表示されていたかのログを取り、サーバに送る。

現在、App Dev 6のチームの方々が、これらの動作の実行時間の改善に取り組まれています。

例えば、コンテンツの描画については、

  • JSONデータと、そこから生成されるViewの構造の改善。不要なViewの削除や、ネストされた構造を単純化する。
    余白を開けるだけならば、UIViewで実装可能だが、JSONデータの中に余白かどうかの情報がないため、今は他のコンテンツと同様に余白を作る際もUICollectionViewを生成してしまっている。
  • Viewが生成されるときに重たい処理となっているサイズ計算の改善。

などが提案されています。

しかし、これらの改善で実際にどれくらい実行時間が速くなるのか、を計測するための機能はまだ実装されておらず、今回、インターンの課題として、MetricKitというフレームワークを用いてその計測のための機能を実装することになりました。

計測機能の実装

今回は、コンテンツの推薦機能の関連動作の中でも、推薦コンテンツを描画する部分に注目しました。そのメトリクス（性能指標）を実環境で計測し、対象ユーザからのみ計測したデータがサーバに送信される機能を実装しました。

メトリクスの計測

今回はMetricKitというフレームワークを用いて、メトリクスの計測を実装しました。MetricKitには以下の特徴があります。

  • 開発環境ではなく、実環境で使用されている時のメトリクスを計測。
  • メトリクスは個人が特定されない形で集められる。
  • 様々なメトリクス（CPU・GPU時間、画面の消費電力、アプリの起動時間、など）を計測可能。
  • 任意のコードブロックのメトリクスを計測可能。
  • データの受け取りの実装が簡単。
  • 24時間に高々一度しかデータを受け取れず、データが送られるタイミングは開発者側でコントロールできない。

最後の部分は注意が必要で、実際に計測されたデータを見るためには24時間待つ必要があります。ただ、ダミーデータであれば、開発環境でも好きなタイミングで受け取ることができるため、MetricKitが動作しているかを確認することは可能です。

データの受け取りの実装は、以下を行うだけです。

  1. didReceive関数を実装して、MXMetricManagerSubscriberに準拠させたクラスを作成。
  2. アプリ起動時にMXMetricManagerSubscriberに準拠させたクラスをメトリックマネジャーに登録。

データの収集も簡単で、mxSignpost(_:dso:log:name:signpostID:_:_:)を使うだけで、好きなコードブロックのメトリクスを計測することが可能です。
今回は、mxSignpostを適用することで、推薦コンテンツを描画する部分のメトリクスの計測を試みました。

計測データの送信

計測したデータは、最終的にはデータ専門のチームに送り、解析していただきます。ただ、今回は簡単のため、NELO2というログ管理システムを使用し、サーバに実際に送信されることの確認までを行いました。

データを収集するユーザの限定

ここまでで、推薦コンテンツの描画時のメトリクスを計測し、計測データをサーバに送る部分は実装できました。

ここで一つ問題があり、LINEアプリはそのユーザ数の多さ故、全ユーザから一気に計測データが送られるとサーバがパンクしてしまいます。そのため、計測したデータを収集するユーザを限定する必要があります。

LINEアプリは日本に加えて、台湾、タイ、インドネシアでよく使われています。今回は、その中でもコンテンツの推薦機能が全てのユーザにリリースされている日本に着目し、さらにその一部のユーザからのみ計測データが送られるよう設定しました。

こちらについては、任意のユーザ属性を設定できるLINE Developer Toolsという社内ツールを使用しました。
このツールに今回対象とするユーザの属性（日本のユーザの一部）を設定することで、アプリ内で対象のユーザかどうかを判別できるようになります。

結果

MetricKitで推薦コンテンツの描画時のメトリクスを計測することができ、NELOにも計測されたデータが送られました！

チャットタブのUI改善の提案

iOS14から、UIButtonやUINavigationBarButtonItemからでもUIMenuを表示できるようになりました。こちらのタスクは、その機能を使ってUIを改善できそうな部分をLINEアプリから見つけて、実装してみる、というものでした。

チャットタブのソートオプションの表示部分にうまく適用できそうだったので、その実装を行い、UI改善の提案を行いました。

問題

iOSのLINEアプリのチャットタブには、チャットを、

  • 受信時間
  • お気に入り
  • 未読メッセージ

の順に並べ替えられる便利なソート機能がついています。

チャットタブのナビゲーションバーの真ん中の小さな三角形を押すと、ソートのオプションが表示され、オプションを選択することで、チャットが並び替えられます。

ただ、三角形は画面の上部、ソートのオプションは画面の下部に表示されるため、ユーザが三角形を押してから、ソートのオプションを選択するまでに、目線や指の大きな移動が発生してしまいます。iPhoneの画面がより大きくなっている昨今、これはユーザにとって負担になりえます。

このソートのオプションが三角形の近くに表示されると、ユーザビリティが向上しそうです。

UIの改善

先ほど紹介したソートのオプション表示にはUIActionSheetというものが使われています。
このUIActionSheetと同じように使える機能としてUIMenuというものが存在します。
UIActionSheetとUIMenuには、以下のような違いが存在します。


UIActionSheetUIMenu
アイテムが表示される位置画面下部対象のボタンのそば
表示幅画面幅いっぱいに表示されるアイテムの要素の文字列長に合わせられる
アイテムの選択方法Tap・Tap
・Long-Press
キャンセルボタン必要不要
画面の明るさの変化アイテムの表示と同時に画面全体が暗くなる（描画の処理が重たい）画面全体の明るさは変わらない（描画の処理が軽い）

今回は、UIMenuを使って三角形の近くにソートのオプションが表示されるようにしてはどうか、という提案を行いました。

実装

ソートオプションにUIMenuを使用することで、三角形の近くにソートオプションが表示されるようになりました。これで、ユーザビリティが向上していそうです。

チャットタブ担当者の方からも「LINEアプリ内の他の箇所との一貫性も考える必要があるので（LINEアプリ全体のデザインを考えている）LINE Design Systemチームと相談する必要がありますが、個人的にアクションボタンと選択肢の一覧は近い方が目線が移動しなくて済み、ユーザビリティ的に良いと思います。」という意見をいただき、リリース版への正式採用を前向きに検討していただけそうです！

まとめ

今回のインターンでは、「コンテンツ推薦に関連するメトリクス計測機能の実装」と「チャットタブのUI改善の提案」に取り組ませていただきました。
これまでちゃんとアプリ開発に取り組んだことがなく始まる前は不安もありましたが、メンターの小俣さんの大きな助けもあって、無事どちらのタスクも形にすることができ、自分としてはとても満足のいく成果が得られたと感じています！
開発中はビルドにかなり時間がかかったり、最初はどこに何が書いてあるか全然わからなかったりと、大規模アプリならではの経験もできて良かったです。
オンラインでの作業でしたが、ノートパソコンだけでなく68cmのディスプレイやヘッドホンも貸し出していただき、むしろいつもより作業効率は良かったかもしれません(笑)。

また、上記のタスク以外にも、Code readability sessionsという1時間×8回のイベントに参加し、コードの可読性を向上させる方法について学んだり、CTOと直接お話しできる座談会や、App Dev 5チーム内や他のチームのメンバーとの交流会に参加させていただいたり、一度直接オフィスにも訪問させていただいたりと、とても充実した時間を過ごさせていただきました。

大規模アプリの開発もそうですが、普段から使っているアプリの開発に携われることはとても面白い経験になると思うので、興味がある人はLINEのインターンにぜひチャレンジしてみてください！

Related Posts

©LINE Corp Privacy Policy