Androidにグラフ描画の公式APIがないので_Vicoを使ってみた

Transcript

1. 1 Androidにグラフ描画の公式 APIがないので、 Vicoを使ってみた kyu minne事業部 プロダクト開発チーム 2025.10.21
2. 2 ⾃⼰紹介 minne事業部 プロダクト開発チーム 北原義久 Yoshihisa Kitahara (kyu) minneのモバイルアプリエンジニアです。 現在、Androidアプリ開発の担当ですが、過去iOS 開発もやっていました。 • 最近は登⼭にハマっています。
3. 3 • 有料会員向けに作品へのアクセス数やクリック数、クリック 率などを表⽰する画⾯を実装することになった • 今まで、グラフの描画はWebViewを介してネイティブでは 実装していなかった ということで、Androidにおけるグラフの描画について調べた。 グラフ描画が必要になった
4. 4 • iOSには、Swift Charts があるのに、Androidには公式なし • XML時代のライブラリはいくつかあるが、Compose⾮対応※ 、またはメンテ停⽌の ものが多い  • ライブラリ使わない場合には、Canvas などを使って独⾃実装しないといけない Androidには公式グラフAPIがない ※ComposableのAndroidViewでの実装を必要とする
5. 調査後、いくつかのグラフライブラリを⽐較してみた 5 ライブラリ GitHubスター数（目安） Jetpack Compose対応 メンテナンス状況 グラフの種類 マルチプラットフォーム対応 カスタマイズ性 MPAndroidChart 約 38.1k ×（主に Android View） 古くからあるが最新の Android Compose対応と いう観点では限定的 Line, Bar, Pie, Radar, Bubble, Candlestickなど 豊富 Androidのみ 高い（多機能、拡張・カスタ マイズ可能） YCharts 約 676 〇（Jetpack Compose対 応） 更新頻度が低め（最新版か ら時間が経過） Line, Bar, Wave, Bubble, Pieなど豊富 Androidのみ 中程度（機能・カスタマイズ の記載少） Vico 約 2.8k 〇（Jetpack Composeネイ ティブ対応） 最近もリリースあり（例 ：v2.2.1 が 2025年10月6 日） 複数（Line, Bar, Columnな ど） Pieがない Compose Multiplatform 対応（Android／iOS／マル チ） 高い（拡張性・カスタマイズ 性が意識されている） Charts 約 738 〇（Jetpack Compose対 応） 更新状況：最後の大きなアッ プデートがやや前（ 3年以上 前）と見られる Pie, Line, Bar の記載あり で種類は少なめ Androidのみ 中程度以上（Compose用だ が機能面での記載少
6. • Compose ネイティブ＆マルチプラットフォーム(Compose Multiplatform) • 最低限のグラフ(Line chart / Bar chart) • 背景‧軸‧ラベル‧スクロールなど細かなカスタマイズが可能 • メンテナンスがされている • ドキュメント、サンプルアプリが充実 → 実装にすぐに取り掛かれそう ◦ https://www.patrykandpatrick.com/vico/guide 6 Vicoが最も良さそう
7. 簡単なVicoのコードを紹介 7 右のコードで簡単な棒グラフが表示できます CartesianChartHost ◦ グラフを描画するための⼤元のComposable関数。 CartesianChartModelProducer ◦ グラフを表⽰するためのデータを管理する。これにデータを渡して表⽰ CartesianChart ◦ グラフの⾒た⽬の設定をする • CartesianLayer: 描画するグラフの種類を設定する ◦ rememberColumnCartesianLayer: 棒線のグラフを表⽰するた めに設定、折れ線グラフを表⽰するには、 rememberLineCartesianLayerを定義する • VerticalAxis: y軸の設定 • HorizontalAxis: x軸の設定 改めて、簡単にグラフ描画できるし、良いなとなったのですが、 いざ実装してみると結構苦戦しました。。。
8. 8 実はカスタマイズ⼤変だった件 やりたいこと： グラフの色を変更したい 　　　　↓ どのクラスのどのプロパティ？ ドキュメントはあるだけど「欲しい情報」にたどり着けないということが結構あった
9. 9 実はカスタマイズ⼤変だった件 まずドキュメントをみる
10. 10 実はカスタマイズ⼤変だった件 さらにドキュメントをみる クラスの説明もほぼなく、何をどう設定したら 良いのかわからない🤦
11. 11 実はカスタマイズ⼤変だった件 サンプルアプリを確認 rememberLineComponentにFillでラップした Colorを渡すとできそう？ サンプルアプリのコードを確認 ひたすら「サンプルアプリとの差分で学習する」しかなかった • サンプルアプリに含まれる複数のグラフを並べて比較 ◦ 「このグラフは軸の色が違う → どのコードが変わってる？」という逆引き方式で理解 ◦ 慣れてくると、大体どれを設定すれば、 UIの調整ができるかわかってきた
12. 12 • Androidには公式のグラフAPIがなく、開発者はどのように実装するの か選択する必要がある • Vico はCompose、マルチプラットフォームにも対応しており、選択肢 としてはかなりあり • Vicoは導⼊実績があまりないのか、情報収集に⼿こずるので、カスタマ イズしたいとなると実装にそれなりに時間はかかるかもしれない、今後 に期待 感想‧まとめ
13. 13 朗報 公式ドキュメントの GitBook Assistantから チャットで質問できるようになっており、 検索が容易になっていた。 日本語で検索もしてみたが、問題なく回答が返ってきた
14. 14 ご清聴ありがとうございました