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



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