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

Rust側でCSVファイルの読み込み

CSVファイルはバックエンド側の「Rust」で読み込みます。単純にテキストファイルを読み込むだけです。表データの各セルは、その読み込んだテキストデータの文字列から「,(カンマ)」で区切った範囲の文字列で表現しています。

まず、読み込んだCSVデータをターミナルに文字列を表示するのみにして、それからCSVデータをテーブル表に表示し、最後にCSVデータを棒グラフで表示します。このようなとき、Excelなら簡単に様々なグラフに表せるので本当に便利だと感じます。

Shift_JISからUTF-8にエンコード

CSVファイルを読み込んでWebページにCSVデータを表示する前に、まずターミナルにCSVデータを表示してみます。その際、気象庁のCSVファイルは「Shift_JIS」形式なので、サンプルコードの中で「encoding_rs」クレートを使って「UTF-8」形式にエンコードします。

次のサンプルコードを記述して「$ cargo-tauri dev」コマンドを実行すると、ターミナルにCSVデータが表示されます。

・「src-tauri」→「src」→「main.rs」ファイルのサンプルコード

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
// クレート
use std::fs;
use encoding_rs::SHIFT_JIS;
// TAURIコマンド「open_csv」関数
#[tauri::command]
fn open_csv(filename: &str) -> Vec {
  let sjis = fs::read(filename).unwrap();
  // Shift_JISをUTF-8に変換
  let (res, _, _) = SHIFT_JIS.decode(&sjis);
  let text = res.into_owned();
  // CSVデータをcsv配列に
  let lines: Vec<&str> = text.split('\n').collect();
  let mut csv = Vec::new();
  for line in lines {
    if line.contains(',') {
      csv.push(line.to_string());
      println!("{:?}",line);
    }
  }
  csv
}
// メイン関数
fn main() {
  // CSVファイルの読み込み
  open_csv("data.csv");
  // open_csv関数の登録
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![open_csv])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

【サンプルコードの解説】
「use」文で「std::fs」クレートと「encoding_rs」クレートを読み込みます。
TAURIコマンド「open_csv」関数で引数のfilenameのCSVデータを読み込んで取得して、戻り値で「csv」配列を返します。
Shift_JISエンコードのバイト列(Vec)をUTF-8エンコードの文字列(String)に変換し「text」変数に代入します。
text変数を1行ずつに分割(split)して「lines」配列に代入し、「,(カンマ)」を含む行だけcsv配列に代入します。
メイン関数でTAURIコマンド「open_csv」関数を登録します。

テーブル表を表示するJavaScriptのコーディング

テーブル表は「table」タグで「tr」タグの行に「td」タグのセルを挿入して、そこに数値などの文字列を表示します。「table」変数の「innerHTML」プロパティにtableタグ内のHTML文を代入します。

次のサンプルコードを記述して「$cargo-tauri dev」コマンドを実行したら、図6のように1年間の平均気温の文字列がテーブル表に表示されます。

図6：1年間の平均気温のテーブル表を表示

・「src」→「main.js」ファイルのサンプルコード

const { invoke } = window.__TAURI__.tauri;
// tableタグ
let table;
// CSVデータをテーブル表に
async function csvTable(csv) {
  // CSVファイルの読み込み
  let data = await invoke("open_csv", { filename: csv });
  // tableタグにテーブル表のセルを挿入
  let html = "";
  for (let d = 0; d < data.length; d++) {
    let td = data[d].split(',');
    html += "<tr>";
    for (let t = 0; t < td.length; t++) {
      html += "<td>"+td[t]+"</td>";
    }
    html += "</tr>";
  }
  table.innerHTML = html;
}
// HTMLのDOMを全て読み込んだ場合
window.addEventListener("DOMContentLoaded", () => {
  // tableタグの取得
  table = document.querySelector("table");
  // "data.csv"ファイルの読み込み
  csvTable("data.csv");
})

【サンプルコードの解説】
「csvTable」関数でCSVファイルを読み込んで「data」変数に代入し、tableタグにtrタグとtdタグのHTML文をセットします。
index.htmlファイルのDOMが全て読み込まれたらindex.htmlファイルのtableタグを取得し、"data.csv"ファイルを読み込むようにcsvTable関数を呼び出しテーブル表を表示します。

グラフを表示するJavaScriptのコーディング

見た感じでは黒い棒グラフを「div」タグで描画しているように見えますが、実際は白いdivタグで黒色を消すように配置しています。できれば黒い棒グラフを配置した方がプログラムとしては分かりやすいのですが、より短いコードで済むようにしました。

次のサンプルコードを記述して「$cargo-tauri dev」コマンドを実行すると、図7のように1年間の平均気温の棒グラフが表示されます。

図7：1年間の平均気温のグラフを表示

・「src」→「main.js」ファイルのサンプルコード

(前略)
// articleタグ
let article;
// グラフの表示
async function csvGraph(csv) {
  // CSVファイルの読み込み
  let data = await invoke("open_csv", { filename: csv });
  // divタグの挿入
  let html = "";
  for (let d = 0; d < data.length; d++) {
    let height = 350-parseFloat(data[d].split(',')[1])*7;
    html += '<div style="height:'+height+'px;"></div>';
  }
  article.innerHTML = html;
}
// HTMLのDOMを全て読み込んだ場合
window.addEventListener("DOMContentLoaded", () => {
  table = document.querySelector("table");
  csvTable("data.csv");
  // articleタグの取得
  article = document.querySelector("article");
  // "data.csv"ファイルの読み込み
  csvGraph("data.csv");
});

【サンプルコードの解説】
「csvGraph」関数でCSVファイルを読み込んで「data」変数に代入し、divタグで棒グラフを白抜きにします。
index.htmlファイルのDOMが全て読み込まれたらindex.htmlからarticleタグを取得し、"data.csv"ファイルをcsvGraph関数で読み込んで棒グラフを表示します。