気象データをチャートで表示する
WeatherKitから得られたデータを本連載の第4回で説明したChartsフレームと組み合わせて利用してみます。
気温の幅を棒グラフで表示する
前項で説明したとおり、日々の気象データを格納するDayWeatherオブジェクトには最高気温と最適気温が存在します。この日単位の最高気温と最低気温を棒グラフの上限と下限としてチャートに表示していきましょう。Chartsフレーム自体の説明については、本連載第4回を参照してください。
import SwiftUI
import WeatherKit
import CoreLocation
import Charts // ----①
# 略
struct ContentView: View {
@State var dayWeathers: [DayWeather] = []
var body: some View {
NavigationStack{
VStack(alignment: .leading, spacing: 8){
VStack {
Chart(dayWeathers, id: \.self.date) { weather in // ----②
// 最高気温と最低気温の幅を棒グラフで表示
BarMark(
x: .value("日付", weather.date, unit: .day),
yStart: .value("最高気温", weather.highTemperature.value),
yEnd: .value("最低気温", weather.lowTemperature.value)
)
.foregroundStyle(Color.blue.gradient)
}
}
.navigationTitle("WeatherKit Sample")
.task {
// 日々の気象データを取得
await getWeather()
}
}
}
.padding()
}
func getWeather() async {
# 略
}
}
チャートを表示するので、Chartsフレームワークをインポートします（①）。日々の気象データの取得に関しては、前節のサンプルと同じメソッドを利用します。
Chart構造体は、引数idに各要素を区別できるプロパティを指定することで、コレクションを変更することなくチャートを表示できます。このことを利用して、DayWeatherオブジェクトのdateプロパティを引数idに指定してチャートを表示します（②）。サンプル内の「\.self.date」はループする要素自身のdateプロパティという意味です。Chartブロックの中で、BarMark構造体のyStartに最高気温、yEndに最低気温を指定します。これで、最高気温から最低気温までを棒グラフとして表示できます。
気象データのオブジェクトの構造とChartsフレームワークの構文をうまく利用することで、WeatherKitから得られた気象データを特別に加工することなくチャートに表示できるのです。
天気のシンボルと降水確率をチャートに表示する
これまでに説明したとおり、WeatherKitから取得した気象データには天気のシンボルが含まれます。天気のシンボルと降水確率を棒グラフの上に配置してみましょう。
VStack {
Chart(dayWeathers, id: \.self.date) { weather in
BarMark(
x: .value("日付", weather.date, unit: .day),
yStart: .value("最高気温", weather.highTemperature.value),
yEnd: .value("最低気温", weather.lowTemperature.value)
)
.foregroundStyle(Color.blue.gradient)
PointMark( // ----①
x: .value("日付", weather.date, unit: .day),
y: .value("最高気温", weather.highTemperature.value)
)
.annotation(position: .overlay, alignment: .bottom) { // ----②
VStack(spacing: 2) {
// 天気のシンボルをアイコン画像で表示
Image(systemName: weather.symbolName)
// 降水確率を表示
Text("\(Int(weather.precipitationChance * 100))%" ).minimumScaleFactor(0.59).padding([.bottom], 4)
}
.imageScale(.large)
}
.symbolSize(0) // ----③
}
}
.navigationTitle("WeatherKit Sample")
.task {
await getWeather()
}
まず、チャート上に点を表示するPointMark構造体を配置します。PointMark構造体のxは棒グラフと同じ日付、yは最高気温とします（①）。配置したPointMark構造体のアノテーションを表示するannotationメソッドを用いて、配置したPointMark構造体の情報にオーバーレイでViewを配置できるようにします（②）。annotationメソッドのalignment引数は、配置したアノテーションから見てPointMark構造体がどの位置にあるかを指定するものです。天気のシンボルの画像から見ると、PointMark構造体は下方に位置するので、alignment引数には.bottomを指定します。
このアノテーションの中に、天気のシンボルをアイコン画像、降水確率をテキストで表示します。アノテーション内の余白とテキストの文字サイズを調整し、棒グラフに被らないように調整しています。
PointMark構造体で表示される点は、使用しないのでサイズを0にしてチャート上には表示されないようにします（③）。前回のサンプルに続いて、今回のサンプルでも特別にデータを加工したり新しく構造体を定義することなく、SwiftUIの機能のみでチャートが作成できました。
まとめ
全5回にわたってSwiftUI4/iOS16の主な新機能を紹介しました。SwiftUIで採用されたデータバインディングの概念により、UIKitよりもはるかに短いコードで機能を実装することができるようになりました。
SwiftUI4/iOS16で追加された機能に関しても、第4回のサンプルのようにSwiftUIの既存の機能と組み合わせたり、今回のサンプルのように新しい機能同士を組み合わせることで、それまでより高い機能を実装するマッシュアップも比較的容易になってきています。「アイデアを形にする」というアプリ開発の概念がより実現しやすくなったといえます。読者の皆様もぜひSwiftUIの機能を楽しみながら試してみてください。
