Swift Chartsの紹介

♪ヒップホップ音楽♪ ♪ こんにちは Dominikです 今日はSwift Chartsを ご紹介します Swift ChartsはSwiftUIで 便利なグラフを作るための Appleの新しい フレームワークです 私たちは世界を理解し より良い決定を下すための 前例のないリソースを提供 するデータに囲まれています それでも データだけでは ほとんど役に立ちません データを有用なものにする ためにはデータの理解が必要です アクセス可能で適切に デザインされたデータの視覚化 複雑なデータを明確に 伝えることができ データを理解と知識に 変えます Appleは視覚化のための ベストプラクティスの 研究に何年も 費やしてきました グラフはデータに関する 有用かつ追加となるコンテキストを 示すために最も効果的で あることがわかりました 例えばある時間の範囲での 株価の傾向や変動 先ほど行った トレーニング中の心拍数 そして夕方のいつ頃 涼しくなるかなどです これらは全プラットフォーム においてグラフを使う 例のほんの一部です 新しいフレームワークを 今日はご紹介します App内で便利で楽しい グラフが作成できます これが Swift Chartsです Swift Chartsは Appleデザインの グラフを作成することのできる 柔軟なフレームワークです SwiftUIと同じ 宣言型構文を使うので 皆さんもこの言語は すでにご存じですね 今日はSwift Chartsを 使って楽しく有益で アクセスしやすいように 視覚化してみましょう 私たちチームは Appを使って フードトラックの売上追跡を 支援してきました トラックはカチャパや インジェラ クレープ チェンピン ドーサ アメリカンパンケーキなど 国際色豊かで様々な パンケーキを提供しています これらのスタイルのものを 過去30日間に渡って 4500食以上を 売り上げました 最も人気はカチャパで Appのタイトルには すでに最も重要な情報が 表示されています 6つのパンケーキにおける 詳細な内訳を示す グラフを追加しましょう Swift Chartsで この視覚化を行うには SwiftUIと同じ 宣言型構文を使います このAppでは 構成ごとに作成します 棒グラフの主な 構成要素はバーで バーがデータ内の各アイテム の視覚的な要素です Swift Chartsはこの視覚的な 要素をマークと呼んでいます Xcodeで このグラフを作りましょう まずはグラフを追加して 始めます 棒グラフを作るにはグラフに BarMarkを追加します カチャパの数の棒グラフを 表示するには 名前と売上を 設定する必要があります

パンケーキの名前の値から 導き出されるバーの Xの値を設定します この場合はカチャパです .valueファクトリ メソッドの最初の引数は 1つ目が値の説明 そして2つ目はその値です するとプレビューに棒が1つ 表示されています Y属性で表される 各バーの高さは カチャパの売上の916 に設定する必要があります バーの位置または高さを 直接設定していない ということを示すため .valueを使用します Swift Chartsは バーだけでなく バーの長さが示す X軸とY軸のバーのラベルも 自動的に作成します 次にインジェラの2番目の バーを追加しましょう インジュラは850食 売れました

個々のマークを作成できて Appに表示されるのは 嬉しいですね ただし 通常は一連の 構造体の配列などに よって表される グラフを作成します まずパンケーキの売上の 構造体を追加します

これには名前 つまり文字列があります そして 販売したパンケーキの数 つまりこれは整数です 繰り返し使用したいので Identifiableにします

そして名前を返すID-Computed 属性を定義すると パンケーキの配列による データセットが作成できます これを外部データソース からロードできますが ここではコードで 定義しましょう カチャパとインジェラに クレープも追加します ForEachで棒グラフの データを指定します まず2つ目のバーを 取り外します

あとはForEachで BarMarkを繰り返すだけです

ループ内の変数の名前として elementを選択します

element.name をXに

element.sales をYにそれぞれ使います

ForEachがグラフの 唯一のコンテンツの場合 データを Chartのイニシャライザに 直接入れることもできます

では残りの3つの エントリを追加しましょう シャンピン ドーサ アメリカンパンケーキです

配列にエントリを 追加しながら グラフに新しい バーマークを追加していきます するとラベル同士が 近づいてきました XとYを入れ替えると グラフが反転して 各バーのラベルのスペースが 広がります Swift Charts フレームワークは自動的に グラフを見やすくする 軸スタイルを選択します Swift Chartsを 使った初めての データの視覚化が これで完了しました そしてXcodeの 新しいバリアント機能を使って このグラフは 美しいダークモードや さまざまな フォントサイズ

デバイスのサイズや 方向に適応し アクセシビリティに 対応することが確認できます

視覚的に表現される データにアクセスするには そのデータを見ることが 必要になります Swift Chartsは 視覚的なデータをVoiceOver化し 誰にでも人気商品の詳細が わかるようにします 音声でグラフを ナビゲートすると 販売されたパンケーキの 名前と数を言います 音声：カチャパ 916 インジェラ 850 クレープ 802 シャンピン 753 ドーサ 654 アメリカン 618 もちろんグラフには 可聴化を含む 2021年にAppleが 発表した オーディオグラフ機能も サポートしています 音声：グラフの説明 グラフの詳細 オーディオグラフを再生 完了 Swift Chartsを使って フードトラックのAppに 有益なグラフを追加しました グラフは各スタイルの パンケーキの 売上を示しています 各スタイルのパンケーキの 概要に加えて 1日あたりの売上データも 見ることができます トラックで行けるのは クパチーノとサンフランシスコです 曜日によって駐車すべき 場所を調べるのを 手伝いたいと思います この質問に答えるためには 2つの都市の時系列として データを視覚化してみます 様々なデザインの探索が いかに簡単かを見るには グラフを3つ イテレーションしておきます クパチーノの棒グラフを 最初に作ったら 次は サンフランシスコのデータと ピッカーを追加します そして最後に1つの 多系列折れ線グラフに データを結合します 曜日ごとの パンケーキの売上の 平均数を示す 棒グラフから始めましょう 売上データには平日が 日付として保存されていて パンケーキの販売数が 整数で保存されています クパチーノのデータは変数 cupertinoDataにあります BarMarkを使って 以前同様にグラフを作ります バーのX位置は 日付から

高さは売上から 導き出されるよう設定します

これがグラフの 最初のイテレーションとなって クパチーノの曜日ごとの 売上データを示します 2つ目にサンフランシスコの データを追加しましょう このグラフを使って平日 トラックがどこに 駐車するべきかを確認する 手伝いをしたいと思います サンフランシスコのデータは sfData変数にあります 2つの都市を切り替えて 各都市の棒グラフを 見てみましょう まず状態変数cityを 追加したら都市の SwiftUIピッカーを ビューに追加します

city変数を介して 2つの都市の売上概要を 切り替えるには データ変数の切り替え ステートメントを追加します

あとはクパチーノのデータを 2つを切り替えるトグルで クパチーノと サンフランシスコで 置き換えるだけです トグルを切り替えると 2つの都市の間で グラフが切り替わります SwiftUIアニメーション が動作するので easyInOutによる トランジションを 設定すると 2つの都市を切り替えると バーがアニメーション化され また一度に一か所のみを 表示するようになります

これでAppに適切な 外観になりました 最後のイテレーションとして 両方の系列を 折れ線グラフで 表示しましょう この折れ線グラフを 作成するには先ほど使った クパチーノの棒グラフから 始めます サンフランシスコと クパチーノのデータは Seriesの配列にあります Series構造体には都市と 販売のデータがあります 両方の系列を表示する前に クパチーノのデータに 焦点を当てましょう グラフではseriesDataを ループできます Chartイニシャライザは ForEachのように 動作することを 覚えておいてください

次にクパチーノの 特定のデータを seriesのsalesデータと 置き換えます

2つの都市のデータを 区別するには バーの色は街に応じて 変えたいと思います フォアグラウンドスタイルを 設定して seriesのcityから 色を導かせます

どの色がどの都市を 示しているかは グラフの下に表示される 凡例から分かります 次に2番目の場所の データを追加します

プレビューでわかるように Swift Chartsが サンフランシスコの色を 自動的に選択し グラフには両方の都市の バーが表示されています グラフは特定の コンテキストの データを示すので データや質問が変われば 視覚化を変更する 必要があるかもしれません Swift Chartsを使うと 様々なデザインを 探索しながら グラフの変更が楽にできます 積み上げ棒グラフは 1日あたりの 総平均売上高を 表示するのに最適ですが 2つの都市間で 比較をしたい場合は どうでしょう？ 点グラフか折れ線グラフ の方が良いでしょう マークタイプをBarMarkから PointMarkに変更して 販売されたパンケーキを 点で表示するか LineMarkにして 折れ線グラフで表示します 折れ線グラフは曜日ごとに 2つの都市を 比較できるため 売上データに適しています グラフには複数のマークを 組み合わせることができます 例えばPointMarkを 追加してみます

色なしで系列を 区別できるようにするには 都市に属する symbolを設定します

これで各点は色と シンボルで都市を示します 点は線の上に表示するのが 一般的なので Swift Chartsには これの省略形があり symbolモディファイアを LineMarkに適用します 点のスタイルは 線に適応します とてもいいグラフですね 1週間の売上動向が 簡単に比較できます 日曜日の サンフランシスコで 特に売上が 高いことがわかります Swift Chartsを 使えばわずか数分で 簡単に多くのデザインを 作り出すことができます 最後にSwift Chartsを 使ったイテレーションの簡単さ シームレスに独自スタイルに 統合できる柔軟性が 備っていることが おわかりだと思います Swift Chartsでは マークプロパティを持つ マークの構成で グラフを作成します パンケーキAppでは 3つの異なるマークと 4つのマーク属性で グラフを作成しました 例えばXとY属性を持つ バーマークとして 簡単な棒グラフを 作成しました またマークを変更して 点グラフや XとY属性を持つ ラインマークを使った 折れ線グラフなどの デザインを すばやく探索できるように したうえ

フォアグラウンドスタイル などの属性を追加して 多系列を折れ線グラフに できることもわかりました グラフのマークは 1つである必要はありません 点と線を組み合わせて 2つのマーク属性で 同じ値を示しました Swift Chartsは今日 使った以外にも 多くのマークとマークプロパティを サポートしています 拡張も可能でカスタムマーク を追加することも可能です Swift Chartsはマークと マークのプロパティにより 少ない宣言型構成要素で 幅広いグラフデザインが 可能です この構成要素を 組み合わせ 優れたデータ視覚化を 実現する方法が 多くあります SwiftUIですでに 実行できることと 組み合わせれば 可能性は実に無限大です そしてさっきお見せしたように ダークモードのサポート 様々なデバイスの画面サイズ ダイナミックタイプや音声 オーディオグラフは タダで手に入ります さらにハイコントラスト モードもサポートしています Swift Chartsは どんな場所でも 複数のプラットフォームで 機能します 同じコードのグラフは Appleプラットフォーム のすべてで動作します そして同じカスタマイズが どこでも機能するので 各プラットフォームに応じて グラフを調整できます 今日はSwift Chartsが SwiftUIの構成構文を使って より少ないコードで より多くのグラフを 作成するできるかを 紹介しました Swift Chartsには 豊富な カスタマイズオプション のセットもあるので Appに合わせた スタイル設定が可能です 新しい領域のグラフ化と グラフの作成方法 文書でカスタマイズする 方法を学んだ今 次回はあなたが その水準を上げることでしょう ♪