csv-cleaning-2-on-tauriリポジトリーのパッケージ依存関係がおかしいらしい。
📄cargo.tomlファイルから、api-allフィーチャーを除去。
cd src-tauri
cargo update
cargo clean
pnpm install
pnpm dev
cd ..
pnpm add @tauri-apps/cli@latest @tauri-apps/api@latest
pnpm tauri info
> notepad-on-tauri@0.1.0 tauri C:\Users\muzud\OneDrive\ドキュメント\GitHub\csv-cleaning-2-on-tauri
> tauri "info"
[✔] Environment
- OS: Windows 10.0.26100 x86_64 (X64)
✔ WebView2: 138.0.3351.77
✔ MSVC:
- Visual Studio Build Tools 2022
- Visual Studio Community 2022
✔ rustc: 1.87.0 (17067e9ac 2025-05-09)
✔ cargo: 1.87.0 (99624be96 2025-05-06)
✔ rustup: 1.28.2 (e4f3ad6f8 2025-04-28)
✔ Rust toolchain: stable-x86_64-pc-windows-msvc (default)
- node: 22.16.0
- pnpm: 10.11.0
- npm: 10.8.2
[-] Packages
- tauri 🦀: 2.6.2
- tauri-build 🦀: 2.3.0
- wry 🦀: 0.52.1
- tao 🦀: 0.34.0
- @tauri-apps/api : 2.6.0
- @tauri-apps/cli : 2.6.2
[-] Plugins
- tauri-plugin-dialog 🦀: 2.3.0
- @tauri-apps/plugin-dialog : 2.2.2 (outdated, latest: 2.3.0)
- tauri-plugin-fs 🦀: 2.4.0
- @tauri-apps/plugin-fs : 2.3.0 (outdated, latest: 2.4.0)
- tauri-plugin-opener 🦀: 2.4.0
- @tauri-apps/plugin-opener : 2.2.7 (outdated, latest: 2.4.0)
[-] App
- build-type: bundle
- CSP: unset
- frontendDist: ../dist
- devUrl: http://localhost:1420/
- framework: Vue.js
- bundler: Vite
rustup update
cd src-tauri
cargo add tauri-plugin-fs
pnpm add @tauri-apps/plugin-fs
cd ..
pnpm dev
直らん。 📁node_modules フォルダーを削除して、pnpm tauri devを打鍵。
コンパイル・エラーの数はだいぶ減った。
pnpm install
pnpm tauri dev
cd src-tauri
cargo add csv
cd ..
pnpm tauri dev
コンパイル・エラーは取れて、ウィンドウも表示されたけど、ウィンドウの内側は真っ白だ……。

👆 シュリンクして、テキストだけ表示できるように直した。
逐次的に<main class="container">なんてコツコツ書かずに、
構造的に<v-app><v-main>を使うみたいだぜ?
そうか、自動的にレスポンシブ・デザインに対応してもらうには、Webサイトに特化したフレームワークに丸投げした方がいいのか……。
CSV ファイルを読み込んだら、表形式のコントロールで表示してくれだぜ。
データテーブルは HTML にないので、
データテーブルのあるVuetify 3をフロントエンドに使ってみるかな。
csv-cleaning-on-tauriリポジトリーから、自動生成したフォルダーを除いた部分をコピーして、
csv-cleaning-2-on-tauriリポジトリーを作成するぜ。
pnpm install
pnpm add vuetify
👆Grok に聞いた、Vuetify 3 をインストールするコマンドを打鍵。
import { createApp } from 'vue';
import App from './App.vue';
import 'vuetify/styles'; // VuetifyのCSSをインポート
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
// Vuetifyインスタンスを作成
const vuetify = createVuetify({
components,
directives,
theme: { defaultTheme: 'light' }, // テーマ設定(任意)
});
// VueアプリにVuetifyを登録
createApp(App).use(vuetify).mount('#app');
これも👆Grok に聞いたやつで、📄src/main.tsを上記のように編集すればいいらしい。
pnpm add @tauri-apps/api
cd src-tauri
cargo clean
※targetフォルダーがあれば削除。 rm -rf target
pnpm install
pnpm tauri dev
👆リポジトリーをコピーしたからか、わけわからんエラーが出たので、
キャッシュをクリアーしてやり直し。

👆前(2025-06-12_Thu)言ってたツールを作ったぜ。
じゃあ次の課題だぜ。
埼玉県新座市内の丁目、番地の形を図形として切り出して表示するソフトを作ってくれだぜ。
Grok に尋ねてみると、日本の地図データを無料公開しているのは以下の2つで、
[国土地理院]の方は丁目の精度までだから、残るのは[G空間情報センター]の一択だぜ。
[G空間情報センター]の地図データは、精度や形式が揃ったものではなく、バラバラだそうだぜ。
Grok がいくつか知ってたが、とりあえず
QGIS を使ってみるかだぜ。

不動産屋が登記した土地しか入ってないんじゃないの?
使えねー。じゃあ[国土地理院]の方を見てみるか……。

👆この地図をどうやって .geojson 形式に変換するんだぜ?
とりあえず左のサイドメニューの保存ボタンを押してみろだぜ。
.json 形式では保存できるが、.geojson 形式ではなかったぜ。
じゃあ地図表示は諦めて、データ・クリーニングの方に重点的に取り掛かるかだぜ。

👆左の表は令和7年5月1日現在の[埼玉県]の
市区町村別世帯数・人口だぜ。
右の表はお父んが[国勢調査]から持ってきて編集している表だぜ。
このように、カテゴリー分けや、個々の項目名が揃っていないが、同じものを表しているはずの2つの表を、
行を揃えてデータを見せてくれるツールを作ってくれだぜ。

👆じゃあとりあえず、左表から1列取って[名前2]、右表から1列取って[名前1]として、市区町村名を以下の3つのグループに分けるかだぜ。
- 両表に含まれる市区町村名
- 左表にだけ含まれる市区町村名
- 右表にだけ含まれる市区町村名

👆2列を独立して昇順ソートするかだぜ。
浦和の浦がひらがなより文字コードが小さいのが意味わからんが……。


👆手で名前の表記揺れを修正して2行を1行にまとめたりして、
そして、[二表仮番]という名前で列を作って、連番を振るぜ。
変更前の列名は残しておかないと、あとでどの行だったのかわからなくなるんじゃないの?
じゃあ、今回手で行った操作を自動化するアプリを作ってくれだぜ。
アプリケーションの名前は column-names-sync-on-tauri とかでいいかな。
あれっ? Cドライブの残り容量が 5 GB しかない!?
Tauri は debug フォルダーがバカでかいそうだぜ。
Grok に対策を聞いてみるか。
以下のコードをさくっと実行。
リリースもデバッグもどちらも含めて 14.3 GiB もファイルが消えた……。
✅風呂に入ってサッパリしたぜ。
❌お湯を入れていたはずなのに、ぬるま湯になっていたが……
✅ 昼飯を食べたぜ。
1時間ぐらいかかった。わりと時間かかるな。
じゃあ次は、コーヒーを飲んで、歯を磨けだぜ。歯間ブラシも使えよ。
✅ コーヒーを飲んで歯を磨いたぜ。歯間ブラシも使った。
じゃあ次は、フィットネスジムに行けだぜ。行きしなには漫画本をBook-Offに売ってきてくれだぜ。
帰りには明日の飯2食分を買ってこいだぜ。
余裕があればズボンの裾上げのための裁縫セットを買ってこいだぜ。
ズボンの裾上げのための裁縫セットってどこに売ってんの?
帰宅なう。
✅フィットネスジムに行ってきたぜ。
✅行きしなに漫画本を売ってきたぜ。30冊ぐらいで 2000 円ぐらいになったぜ。
🤔しかし、何巻まで買ったかのメモ書きをどこに保管しておくかが問題だぜ。
✅帰り際にはソーイングセットを買ってきたぜ。
ユザワヤでスヌーピーの絵柄が入ったやつだぜ、6,000円。
6,000円は高いなあ。元を取るために何本のズボンの裾を上げるつもりだぜ?
夜は集中力が落ちているんで、ズボンの裾上げは明日の朝にしろだぜ。
ひとまず、カフェインレス・ブラックコーヒーでも飲んで休めだぜ。
昨日と話しは変わって、課題No.2だぜ。
ディレクトリーを指定したら、その直下のファイル名を一覧してくれるアプリを作ってくれだぜ。
じゃあ、ファイルパスを入れるテキストボックスと、ファイル選択ダイアログボックスを開くボタン、
[ファイルの一覧]と、その表示を更新する[表示]ボタンがあればいいかだぜ。
今日のキャパシティ(作業に使える時間)は 6 とするぜ。
昨日作ったアプリから[Save]機能を削除して、テキストボックスをリストボックスへ付け替え、
あとは、ファイル名を一覧する機能が作れるかどうかの調査と実装だから、
調査を重めに見て、エフォート(作業にかかる時間見積)は 2 ってところねえ。

👆 昨日作ったプログラムから、.gitとnode_modules以外のフォルダーとファイルをコピーするぜ。

👆 📁file-list-on-tauriを作って、中身を貼り付け。


git init
👆 (パワーシェルではなくて)コマンドプロンプトを開いて、上記のコマンドを打鍵するぜ。
これにより、カレントディレクトリーに 📁.gitっていう隠しフォルダーが作成されるぜ。
これでローカルPCに[ローカル・リポジトリー]を作った。
git add .
👆 続いて、上記のコマンドを打鍵するぜ。
LF を CRLF に変更するぞ、とか改行の変更の警告も出ているがまあいいだろう。
これで、全てのファイルを[ステージ]に上げた。
git commit -m "Initial commit"
👆 続いて、上記のコマンドを打鍵するぜ。
[ステージ]にあったファイルを[ローカル・リポジトリー]へコミットした。
コミットってのはファイルを置いたぐらいの感覚を持っていればいい。

👆 続いて、Git Hub で、初期ファイルは何もなしでfile-list-on-tauriリモート・リポジトリーを新規作成、
[ローカル・リポジトリー]との紐付け方法の説明が書いてあるぜ。

git remote add origin https://github.com/muzudho/file-list-on-tauri.git
git branch -M main
git push -u origin main
👆 上記のコマンドを打鍵するぜ。[ローカル・リポジトリー]に[リモート・リポジトリー]の場所を教えて、
[ブランチ]を選び、そこへ[ローカル・リポジトリー]のファイルをプッシュしたぜ。

👆 これで、[リモート・リポジトリー]にソースコードを置けたぜ。
pnpm install
👆 続いて、上記のコマンドを打鍵。
📁node_modules が自動生成されるぜ。

👆 続いて、📄src-tauri/tauri.conf.jsonファイルの内容を編集するぜ。
また、 📄src/App.vueファイルから[Save]機能を削除し、
[Load]ボタンは[Refresh]とラベルを変えておくぜ。
pnpm tauri dev
👆 続いて、上記のコマンドを打鍵。
数分待てだぜ。
開発モードでデスクトップアプリが起動するぜ。

👆 こんな感じで、デスクトップアプリのベースをコピーする方法は確立できたな。
じゃあ、とりあえず、そのテキストボックスに
指定のディレクトリーの直下にあるファイル名を一覧してくれだぜ。
ファイル名を調べるのとか、フロントの機能じゃないだろうから、
バックエンドの Tauri フレームワークを使うんだろな、なら言語は Rust か?

👆 とりあえず、テンプレートを上記のように変更。
Rust で定義している、ファイル一覧を読取るget_file_names関数を TpyeScript 側から呼び出しているぜ。

👆 Rust 言語の方に、ファイル名一覧を読取る関数を追加。
invoke_handlerってあたりに関数の名前を追加するのを忘れてはいけないぜ。

キャパシティ(作業に使える時間)をもう 4 は消費してるわよ。
残りは 2 よ。
まあ、コード書いたが動かないとか、動かない理由の調査とか、思ったよりしてるしな。
<script setup lang="ts">
const itemsVM = ref(["apple", "banana", "cherry"]);
</script>
<template>
<select size="5">
<option v-for="item in itemsVM" :key="item" :value="item">{{ item }}</option>
</select>
</template>
👆 リストボックスに項目を並べる考え方は、上記のコードで示したぜ。


かかった時間は 5 ってところねえ。
見積りでは 2 ぐらいだったから、調査に 1.5 倍は取られるってとこねえ。
フロントエンドに Vue、バックエンドに Tauri を使って、デスクトップアプリ制作を練習してみようぜ?
これはブログじゃないのよ。
タグの直打ちで、文章載せるだけにしてはすごい労力……。
プログラミング練習の最初の課題でよくあるのはメモ帳だな。
テキストボックスに文章を入力して、[保存]ボタンを押したらファイルに保存できて、
[読込]ボタンを押したらテキストファイルを読込むんだぜ。
Tauri の Get Started を読んでいけだぜ。
インストールの説明は省くからな。

pnpm create tauri-app


👆 Git Hub と連携しておいた。フォルダーの中身はこうなった。

👆 VSCode で開く。 下側のステータスバーを見ると cargo がディレクトリーをチェックしてるので
わたしの PC はCPU処理がビジーだとフリーズすることがあるので、終わるまで待って……。

pnpm install
👆 (パワーシェルではなく)コマンドプロンプトで開いて、
上記のコマンドを打鍵。

👆 📁[node_modules]というバカでかいフォルダーが自動生成される。
pnpm tauri dev
上記のコマンドを打鍵。
わたしのケースでは、 379 個の大量のプログラムのコンパイルが走るので数分かかる。

👆 途中で[http://localhost:1420/]という URL が出てくるが、気にしないでほしい。
ウェブブラウザーでは、フロントエンドの画面表示のテストはできるが、バックエンドのテストはできない。
動作確認に使うには不完全。

👆 コンパイルが終わると、デスクトップアプリが出てくる。
動作確認はこれに対して行う。
じゃあ、テキストボックスと、[保存]ボタン、[開く]ボタンを置いてくれだぜ。

👆 📄 src/App.vueファイルの <template>タグの中に、いわゆる HTMLタグを打ち込んでいけばいいはずだぜ。


👆 スタイルを除くと、ソースはたったの 24 行だぜ。
ファイルパスを入れるテキストボックスと、ファイルを選択するダイアログボックスが出てくるボタンが欲しいぜ。

👆 テキストボックスと、ボタンの見た目に違いが小さいのイケてないが、
スタイルの修正は後回しにしよう。
pnpm tauri add dialog


👆 えーと、つまり、"permissions": []に"dialog:default"を追加しようとしたら、
もう追加されてたからエラーってことかだぜ?
じゃあ"dialog:default"を消しといたれ。



👆 ファイル選択ダイアログボックスが出たぜ、オッケー。
アンドロイドやアイフォンでは、ファイル選択ダイアログボックスは出せないそうだぜ。
ファイル選択ダイアログボックスで最初に開いているフォルダーは、
テキストボックスに書いてあったパスにしてくれだぜ。

👇 ファイルの読み書きの API は以下のページに書いてあるから……。
📖
File System ページの上から順番に読んで実装しようぜ。
pnpm tauri add fs


👆 テキストを書き込む方はイケてない。何かパーミッション設定でも足りてないのか?

👆 なんか分かってないけど、このように書いたらファイルへのテキスト書き込みはでけた。
なんか画像がボヤけてない?
サイズもマチマチだし。
グレードダウンしてない?
さっそくイラストを新調したか、
グレードダウンしてないかだぜ?
Grok に描かせようと、Super Grok にプラン変更しようとしたら、
クレジットカードを拒否されたので、あんたのお父んの手描きになったのよ。
何でクレジットカードが拒否されたのか知らんけど。
このトップページは近況を書く日記かだぜ?
メインのコンテンツは何かないのかだぜ?