iOS 16が公開された！ Swift Charts触っていくぞ！
本記事では実装の細部には触れず、WWDC22のセッション内容に沿ってグラフを構築する。
開発環境
> xcodebuild -version Xcode 14.0 Build version 14A309
モチベーション
運動のモチベーションにムラがある。継続的に運動を続けたい。アプローチとして、iOS 16から利用できるようになったSwift Chartsを使って過去の運動のデータを可視化する。ただグラフを構築するのではなく、WWDC22のセッションにあるように目的を意識してグラフを構築する。今回は「月ごとのサイクリングとランニングの走行距離を確認して、月ごとの走行距離の推移を見たい」という目的を持ってグラフを構築する。
WWDC22のセッション
Swift Charts関連で参考にしたセッションは以下。本記事では基本的に以下の2つ目のセッションの内容に沿ってグラフを構築した。
- Design app experiences with charts - WWDC22 - Videos - Apple Developer
- Design an effective chart - WWDC22 - Videos - Apple Developer
つくったもの
グラフ構築の手順
- グラフの目的を考える
- グラフの表示方法を考える
1. グラフの目的を考える
モチベーションにも書いたが、"運動を継続的に行うために、月ごとのサイクリングとランニングの走行距離を確認して、月ごとの走行距離の推移を見たい" が目的。
コードに落とし込むために言い換えると、"過去一年間の月ごとのサイクリングとランニングの走行距離の合算をグラフで表示する"。
2. グラフの表示内容を考える
- 月ごとの走行距離を表示し、浮き沈みを見てパターンがあるか調べる
- 過去一年間の任意の月の走行距離を調べる
- 最高走行距離を記録した月を調べる
- 外れ値
- 気温などの外的要因による走行距離の変動を調べる
などなど、色々考えられる。今回の題材だと、全体像として月ごとのパターンを見たい。また、特定の月の走行距離を調べたい。ということで、以下に着目してグラフを構築する。
- 月ごとに走行距離を表示する
- 何かしらのアクションで特定の月の走行距離を表示する
3. グラフの表示形式を考える
今回は並べてデータの変化具合を見たいので棒グラフを選択する。走行距離のような累積的な概念は棒グラフが適していそう。
棒グラフでグラフを構築した。横軸は時間、縦軸は走行距離（km）。
4. グラフの軸を考える
構築したグラフの軸の粒度を考える。
横軸は時間。今回は月ごとのデータを表示するので最も細かい粒度は一月（ひとつき）になる。最も荒い粒度は半月？ 今回は月ごとの走行距離を表示し、浮き沈みを見てパターンがあるか調べたい目的がある。各データが何月かひと目で分かるようにしたいのでデータ毎に何月かを表示する。
縦軸は走行距離。上記の添付画像の通りで問題ないのでこのままでいく。
5. グラフの説明文を考える
グラフをより分かりやすくするために説明文を追加する。
要約文を表示することでグラフの全体像をユーザーに伝えられるようになった。
6. グラフのインタラクションを考える
インタラクションはタップやVoiceOverなど様々な観点があるが、今回はグラフをタップしたときの挙動に絞って考える。 が、公式のデモアプリ*1を見る感じ、便利プロパティがあるわけではなくGeometryReaderを使って素直に実装していく必要があり、面倒くさいので今回はスキップ。（え？）
7. グラフの色を考える
東京都カラーユニバーサルデザインガイドラインを参考にして多様な色覚に対してデータを区別できるようにグラフに色を加える。
青と緑はP型、D型のどちらの色覚でも区別ができそうだったので採用した。色を加えることでサイクリングとランニングの割合が可視化されるようになった。
今後の展望
- アクセシビリティ対応
