はじめに
ついに本連載も今回で最終回となります。第1回から前回まで付いてこられたのであれば、それなりのアプリは作れるようになったのではと思います。ある程度Webページの知識があることが前提ですが、Rustも基本的なことなら使えるようになったのではないでしょうか。
コンピューターは簡単に言えば「OS」＋「アプリ」＋「データ」でできています。そこで今回は、その中でもデータベースでデータを使用することを中心に解説していきたいと思います。データベースには、現在で最も普及していると言えるデータベースシステムの1つである、無料の「SQLite3」を使います。
恐らくThink ITの読者の方なら何らかのデータベースを使ったことがあるでしょうから、TAURIでもRustのクレートを使えばデータベースが扱えるという例を紹介したいと思います。
図1：完成した画面
TAURIプロジェクトの作成
それでは、いつものようにTAURIプロジェクトを「$ cargo create-tauri-app database」のように新規作成し、カレントディレクトリを「database」フォルダに変更します。
TAURI用のデフォルトのクレートに加えて、SQLite3を扱う「sqlite」クレートを追記します。ググると「rusqlite」クレートの方が人気があるようですが、より他のプログラミング言語と似ている「sqlite」クレートを使います。
・「src-tauri」→「Cargo.toml」ファイルのサンプルコード
04 | description = "A Tauri App" |
11 | tauri-build = { version = "1.2", features = [] } |
14 | tauri = { version = "1.2", features = ["shell-open"] } |
15 | serde = { version = "1.0", features = ["derive"] } |
17 | sqlite = "0.34.0" # SQLite3 |
20 | custom-protocol = ["tauri/custom-protocol"] |
HTMLのコーディング
まずはWebページを準備します。今回のWebページは第14回とよく似ています。JavaScriptのプログラムも第14回とよく似ています。
テンプレートの「index.html」ファイルの内容を削って、本文(body)で「table」タグを追加してテーブル表を表示するだけです。
・「src」→「index.html」ファイルのサンプルコード
04 | <meta charset="UTF-8" /> |
05 | <link rel="stylesheet" href="styles.css" /> |
06 | <title>Tauri App</title> |
07 | <script type="module" src="/main.js" defer></script> |
【サンプルコードの解説】
tableタグにテーブル表を表示します。
JavaScriptのコーディング
今回はtableタグ内にヘッダーの「th」タグも使います。thタグはデフォルトでは文字のアライン(整列)が中央寄せで太字(bold)です。テーブル表にはデータベースの「ID」「動物名」「動物の種類」のヘッダーと一覧を表示します。まだデータベースを読み込んでいないため「$ cargo-tauri dev」コマンドを実行しても何も表示されません。
・「src」→「main.js」ファイルのサンプルコード
01 | const { invoke } = window.__TAURI__.tauri; |
05 | async function setTable() { |
06 | let data = await invoke("select"); |
07 | let html = "<tr><th>ID</th><th>動物名</th><th>動物の種類</th></tr>"; |
09 | html += "<tr><td>"+d[0]+"</td><td>"+d[1]+"</td><td>"+d[2]+"</td></tr>" |
11 | table.innerHTML = html; |
13 | // index.htmlのDOMが読み込まれた場合 |
14 | window.addEventListener("DOMContentLoaded", () => { |
15 | table = document.querySelector("table"); |
【サンプルコードの解説】
「setTable」関数でテーブル表を表示します。
DOMが全て読み込まれたら、tableタグを取得して「table」変数に代入し、setTable関数を呼び出します。
スタイルシートのコーディング
tableタグのセル(th,td)に枠線(border)を装飾します。ヘッダー(th)は黒い背景色に白字です。
・「src」→「styles.css」ファイルのサンプルコード
02 | background-color: #000; |
08 | border: 1px solid #000; |
【サンプルコードの解説】
thタグは黒背景、白文字です。
thタグとtdタグのセルの全てを、余白を空けて黒い枠線を書いて最低200ピクセルの幅にします。
