「TAURI」で気象庁の「CSVデータ」を解析する
はじめに
今回は「CSV」データを解析してテーブル表に一覧表示したり、グラフを表示したりするデスクトップアプリを開発します。CSVデータとは「,(カンマ)」で区切られただけの、Excelの表データを超シンプルにしたような文字列データのことです。
CSVデータの例として、気象庁のWebサイトから無料のCSV形式のファイルをダウンロードして使います。気象庁ではカスタマイズして気象データをダウンロードできますが、今回は1地域の1日ごとの平均気温を1年間分だけ取得し、図1のように1年間の平均気温のグラフと、数値のテーブル表をWebページで表示するデスクトップアプリを開発します。
図1：完成した画面
ただし、気象庁でダウンロードできるCSVファイルは2024年4月現在、文字列のエンコードが「Shift_JIS」形式です。プログラミング言語「Rust」では「UTF-8」形式が標準なので、コードを書く中でShift_JISからUTF-8に変換します。予めテキストエディタでエンコード変換しておく必要はありません。
気象庁のデータをダウンロード
それでは早速、気象庁の気象データをダウンロードするページにアクセスしましょう。「気象庁|過去の気象データ・ダウンロード」というタイトルのWebページが開かれます。
できれば一発でダウンロードできるCSVファイルにリンクしたかったのですが、いろいろと探したもののちょうど良いCSVファイルが見つからなかったため、以下の手順に従ってください。
- 図2のように「地点を選ぶ」ボタンを押して、任意の「都道府県」を図から1つ選びます。
図2：「地点を選ぶ」ボタンで「都道府県」を選ぶ
- 図3のように任意の「地点」を図から1つ選びます。
図3：「地点を選ぶ」ボタンで「地点」を選ぶ
- 図4のように「項目を選ぶ」ボタンを押して「データの種類」を「日別値」だけ、「項目」を「気温」の「日平均気温」だけのチェックボタンを押します。
図4：「項目を選ぶ」で「日別値」の「日平均気温」を選ぶ
- 図5のように「期間を選ぶ」ボタンを押して、「期間」の「最近1年」ボタンを押すと最近1年間の期間が入力されます。
図5：「期間を選ぶ」ボタンで最近1年の期間を選ぶ
- 最後に「CSVファイルをダウンロード」ボタンを押して「data.csv」ファイルをダウンロードします。
TAURIプロジェクトの作成
それでは、いつものようにTAURIプロジェクトを「$ cargo create-tauri-app csv」のように新規作成し、カレントディレクトリを「csv」フォルダに変更します。
TAURIのデフォルトのクレートに加えて、今回は「Shift_JIS」を「UTF-8」に変換するための文字列エンコーダー「encoding_rs」クレートの読み込みも「Cargo.toml」に追記します。
・「src-tauri」→「Cargo.toml」ファイルのサンプルコード[package]
name = "csv"
version = "0.0.0"
description = "A Tauri App"
authors = ["you"]
license = ""
repository = ""
edition = "2021"
[build-dependencies]
tauri-build = { version = "1.2", features = [] }
[dependencies]
tauri = { version = "1.2", features = ["shell-open"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
encoding_rs = "0.8.34" # 文字列エンコーダー
[features]
custom-protocol = ["tauri/custom-protocol"]
先ほどダウンロードした「data.csv」ファイルを「src-tauri」フォルダ内にコピー＆ペーストします。おそらく「data.csv」ファイルは「ダウンロード」フォルダに入っているはずです。
HTMLのコーディング
最終的に、HTMLファイルにはグラフとテーブル表だけを表示します。それぞれ365日分(366日分の場合もあるかも)のデータを表示します。まだCSVファイルを読み込んでいないため「$ cargo-tauri dev」コマンドを実行しても何も表示されません。真っ黒なWebページが表示されるだけです。
・「src」→「index.html」ファイルのサンプルコード<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri App</title>
<script type="module" src="/main.js" defer></script>
</head>
<body>
<article></article>
<table></table>
</body>
</html>
【サンプルコードの解説】
「article」タグにグラフを表示します。
「table」タグにテーブル表を表示します。
スタイルシートのコーディング
白と黒だけでWebデザインします。最初グラフは折れ線グラフにしようとしたのですが、できるだけシンプルにWebデザインできる棒グラフにしました。なお、デザインとしては全体の背景色を真っ黒に、テーブル表の文字列の部分の背景色を真っ白にします。そして棒グラフの黒棒ではなく、白い部分を白い背景色で切り抜きます。
・「src」→「styles.css」ファイルのサンプルコードhtml,
body {
background-color: #000;
}
td {
background-color: #fff;
width: 171px;
padding: 5px;
}
article {
width: 750px;
height: 550px;
}
div {
float: left;
width: 2px;
background-color: #fff;
}
【サンプルコードの解説】
「html」「body」タグの背景色を真っ黒にします。
「td」タグでセルの背景色を真っ白にします。
「article」タグの幅高さをセットします。
「div」タグで幅2pxの真っ白の棒グラフを並べます。
