昨日と話しは変わって、課題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 にプラン変更しようとしたら、
クレジットカードを拒否されたので、あんたのお父んの手描きになったのよ。
何でクレジットカードが拒否されたのか知らんけど。
このトップページは近況を書く日記かだぜ?
メインのコンテンツは何かないのかだぜ?