LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog

Blog


【インターンレポート】データ可視化プラットフォーム「OASIS」のフロントエンドの改善

 

はじめに

LINEの冬インターンで、Data Labsという組織に参加させていただいた坂口達彦と申します。
普段は HCI 分野で研究をしている大学院1年です。
インターンでは、Data Labs で開発しているデータ可視化プラットフォームである OASIS のフロントエンドの改善を行いました。
その成果についてご紹介できればと思います。

OASIS について

OASIS は Data Labs で開発されている、Hadoopクラスタに保存されたデータの可視化・分析を行うための Web インターフェースです。
詳しくは「LINE の全社員が必要に応じて担当サービスのデータを分析できる環境の構築」をご覧ください。
2019年3月現在で600ほどの社内ユーザがおり、また今後 OSS としての公開を予定しています。

フロントエンド改善

そんな OASIS ですが、フロントエンドのメンテナンスやアップデートを行う人員が不足しているという状況がありました。
そこで私はインターンシップにおいて次の5つのタスクに取り組みました。

  • 開発環境のアップデート
  • チャート作成ライブラリの置き換え
  • デザイン・UI の改善
  • Pivot table 機能の実装
  • 対応チャートの種類の追加

以降では、それぞれについて概要を述べていきます。

開発環境のアップデート

OASIS の開発が開始されてから1年ほど経過していたため、その期間にアップデートがあったライブラリなどの更新を行いました。
最初のタスクということもあり、コード理解も並行して進めました。
主にバージョンアップしたライブラリ・フレームワークは次の通りです。.

ライブラリ・フレームワーク旧バージョン新バージョン (2019/2/4 時点)
Vue.jsv2.5.2v2.5.22
Bootstrapv4.0.0-beta3v4.2.1
Vue CLIv2系v3.4.1
BootstrapVuev2.0.0-rc.1v2.0.0-rc.11
[caption id="attachment_36280" align="alignnone" width="800"] バージョンの更新例[/caption]

特に2点において大きな変更を行いました。

まず最新の Vue CLI では、これまでと異なりプロジェクトの webpack の設定などが Vue CLI 内部に移行したり、基本的なディレクトリ構造が変更されたりといった変更がありました。
そのため、今後のメンテナンス性を考え、従来の設定やディレクトリ構造は全て上で述べた Vue CLI 3 ベースに変更しました。
加えて、今後の開発をスムーズにするような変更も行いました。
例えば、これまでスタイルのカスタマイズは Bootstrap を丸ごとディレクトリに追加し一部を編集していたところを、custom.scss により行うことで Bootstrap 本体は npm で管理できるようにしました。

また、Code formatter を導入してフォーマットを自動で行えるようにしました。
大変だった点としては、エラーの解決が挙げられます。
ソースコードの理解と変更して行ったため、エラーが出た際にそれが自分の変更によるミスなのか、それともライブラリのバージョン違いに起因するものなのか、を判断するのに時間がかかってしまい想定以上に難航しました。

また、webpack なども元々の理解が足りず調べながら作業したため、これだけで最初の1-2週間を費やした印象です。
最も多かったのが、BootstrapVue のバージョンアップによる仕様変更に起因するバグで、仕様に合わせて書き換えることで対応できました。

チャート作成ライブラリの置き換え

一つ目のタスクで D3.js のバージョンを更新しようとしていたところ、従来使用していた NVD3 というチャート作成おライブラリの対応 D3.js のバージョンを超えてしまい、使えなくなるという問題が発生しました。

D3.js v4 以上に対応したバージョンも別リポジトリで開発されているのですが、今後のアップデートに追従するのかなどの懸念点があり、チャート作成ライブラリの置き換えをすることにしました。

ライブラリ選定の上では、次のような点を重視しました。

  • 基本的なチャートが描画でき、なるべく簡単に書ける
  • メンテナンス・アップデートの頻繁さ
  • フリーであること(今後の OSS を見据えているため)

有名なライブラリを調査した結果の表を次に示します。

ライブラリ名特徴など(star 数、バージョンは2019年2月x日時点)
Chart.js41,655 stars最新版 v2.7.3 released on 2018/10/16見た目が綺麗な人気のチャート作成ライブラリhttps://www.chartjs.org/
D3.js82,333 stars最新版 v5.9.0 released on 2019/2/8SVG の描画を主としているため、様々なチャートを作成するのはコード量を必要とするhttps://d3js.org/
D3.js の wrapperD3.js をラップして書きやすくしたものNVD3 と同様どこまで D3.js に追いついてくれるかが懸念があるhttps://c3js.org/ etc.
Apexcharts5.516 stars最新版 v3.3.1 released on 2019/2/17(v3.5.0 released on 2019/2/24)新進気鋭のチャートライブラリhttps://apexcharts.com/

以上より Chart.js と Apexcharts が適していると考え、これらに絞ってチャート作成の実装をしていたところ、Apexcharts の方が入力できるデータ形式が広く、全てのチャートで既存の NVD3 向けのデータ形式を流用できることから、Apexcharts を使う方向で決定しました。

データ形式を流用できるおかげで、データ処理部分のコード変更の必要がなく、デザインを既存の OASIS に近づけることでおよそ実装が完了しました。

ところで、事前にライブラリが生成するチャートの使用感を確かめるためのテストアプリケーションを作成していたのですが、それをユーザの方に触っていただいた際のフィードバックにおいて、Apexcharts は「Bar chart の描画が非常に遅い」ことが明らかになっていました。

オプションなどで高速化を試みたものの、改善が見込めなかったため、今後のアップデートで速度が改善されることを祈りながら、このタスクは pending となりました。
(実際インターン終了日までには v3.5.0 がリリースされており、描画速度が改善されたようです)

[caption id="attachment_36286" align="alignnone" width="800"] 作成したアプリケーション。OASIS のコードを流用したりグラフのデザインを近づけたりして使用感を近づけるよう工夫した。[/caption]

デザイン・UI の改善

次に、デザイン・UI の改善を試みました。
これらについては、PCの解像度の違いなどの多様な閲覧環境に対応させるなどの課題があり、UI と合わせてユーザの利用シーンや頻度、ユーザビリティを考慮して調整を提案しました。
改善した画面例の比較画像を次に示します。

[caption id="attachment_36293" align="alignnone" width="400"] 従来のデザイン[/caption][caption id="attachment_36299" align="alignnone" width="400"] 新しいデザイン[/caption]

変更点は大きく次の4点です。

ボタンサイズの小型化

もともとのボタンのサイズが大きめだったため、一回り小さくしました。
解像度が低いディスプレイではボタンが非常に大きく見えてしまう、という問題があったため、多少は改善されたと考えています。

ドロップダウンメニューの整理

文字だったラベルをアイコンに変更したり、配置を変更したりしました。
ダウンロードとパラグラフの設定という2つの異なる操作が一つの Settings というメニューになっていて分かりづらいと判断したため、ダウンロードと設定は別のメニューとし、わかりやすいアイコンを載せました。

カラースキームの変更

LINE のアプリケーションである、というイメージを印象付けるため、UI やグラフの色として、LINEが開発している管理画面向け CSS Toolkit である koromo のカラースキームを採用しました。
koromo については、下記をご覧ください。

フォントの変更

従来の Avenir から Roboto へ変更し、より素直な印象を与えるようにしました。

Pivot table 機能の実装

以前から社内で強い要望があったという、クエリの結果テーブルを pivot できる機能の実装を行いました。
実装にあたり、機能自体はライブラリである vue-pivot-table を用いました。
しかし、デザインが既存の OASIS とはマッチせず、またしばらく触っていると使いにくい部分が見つかるなど、デザイン・UI の双方で問題がありました。

そのためにはライブラリに直接変更を加える必要があったため、vue-pivot-table のソースを fork した後、デザインを OASIS にマッチするよう調整し、使いやすさ改善のため reset ボタンを実装するという独自の変更を行いました。 

[caption id="attachment_36305" align="alignnone" width="500"] 元の vue-pivot-table(https://github.com/MarketConnect/vue-pivot-table より引用)[/caption][caption id="attachment_36311" align="alignnone" width="300"] 新しい pivot table[/caption]

実装にあたっては、事前に pivot するにあたって欲しい機能についてのヒアリングを行いました。

元のライブラリや別の Pivot table が利用可能なツールでは集計するカラムが自動選択されていたのですが、今回はそれを選択するメニューが必要であるなど、事前に私が見落としていた部分がいくつかあったので、とても参考になりました。

また Pivot table についてはテスト環境にデプロイまで行うことができ、ユーザの方から実装後のフィードバックも数多くいただきました。
表のデータのソート機能など、今後の改善に役立つ様々な意見が集まりました。

対応チャートの種類の追加

元の OASIS では Line chart と Bar chart の描画を行うことができました。
他のタイプのチャートも欲しいという要望があったため、Area chart、Scatter chart、Pie chart を新たに追加する実装を行いました。
Area chart と Scatter chart については、グラフの見た目が変化するだけなので、ApexCharts の機能上チャートの type を変更するだけでほぼ終わりになります。
一方で Pie chart は表示するデータの性質が異なるチャートなので、もう少し実装を行う必要がありました。
そのため、あらかじめ Pie chart の使用イメージをユーザの方から伺い、それを元に専用のデータ処理などの実装を行いました。
加えて、自分で触っている中で必要と感じた、値やカテゴリでのソート機能、カテゴリ数の制限とその警告を実装しました。

[caption id="attachment_36317" align="alignnone" width="800"] 実装した円グラフ。カテゴリと集計のカラムの指定だけでなく、ソートについてもカテゴリと集計値の両方を基準にできるように実装した。[/caption]

まとめと感想

以上より、次の4つがインターンの成果となりました。

  • OASISフロントエンドの開発環境の最新化
  • OASISデザイン・UI の改善案の提示
  • Pivot Table 機能の実装・テスト環境へのデプロイ
  • チャートの種類追加

社内向けツールとのことで、自分にとってこれまでになくユーザの方との距離が近い環境で、様々なフィードバックの機会をいただけたのがとてもよかったと思っています。
特に デザイン・UI の面で、自分の実装によって多くの人が影響を受けるという状況を経験でき、常に緊張感を持って取り組めたと思います。
また、そのような状況で考えたり実装したりする楽しみも感じることができました。
最後になりましたが、インターンを受け入れてくださり、また様々なフィードバックを下さった Data Labs の方々に心よりお礼を申し上げます。

ありがとうございました!