「TAURI」で気象庁の「CSVデータ」を解析する

開発言語

技術解説

連載 [第14回] :

「TAURI」＋「Rust」ではじめるデスクトップアプリ開発

2024年5月1日(水)

大西武 (オオニシタケシ)

第14回の今回は気象庁のWebサイトから指定した地域の1年間の気象データをダウンロードして「TAURI」で解析していきます。

はじめに

今回は「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の真っ白の棒グラフを並べます。