# ワラベンチャー
今さら、手作りのホームページ。（Created by むずでょ）
## [2025-06-04_Wed]
👇 今日は Grok に聞いて、コードのワーニングを掃除しただけだぜ。
👆 変数名、関数名をsnake_caseからcamelCaseに変えたぜ。
👆 Rust で作った関数の戻り値を、TypeScript 側できっちり受け取れるように修正したぜ。
## [2025-06-03_Tue]
昨日と話しは変わって、課題No.2だぜ。
ディレクトリーを指定したら、その直下のファイル名を一覧してくれるアプリを作ってくれだぜ。
ディレクトリーを指定したら、その直下のファイル名を一覧してくれるアプリを作ってくれだぜ。
じゃあ、ファイルパスを入れるテキストボックスと、ファイル選択ダイアログボックスを開くボタン、
［ファイルの一覧］と、その表示を更新する［表示］ボタンがあればいいかだぜ。
［ファイルの一覧］と、その表示を更新する［表示］ボタンがあればいいかだぜ。
今日のキャパシティ（作業に使える時間）は 6 とするぜ。
昨日作ったアプリから［Save］機能を削除して、テキストボックスをリストボックスへ付け替え、
あとは、ファイル名を一覧する機能が作れるかどうかの調査と実装だから、
調査を重めに見て、エフォート（作業にかかる時間見積）は 2 ってところねえ。
あとは、ファイル名を一覧する機能が作れるかどうかの調査と実装だから、
調査を重めに見て、エフォート（作業にかかる時間見積）は 2 ってところねえ。
👆 昨日作ったプログラムから、.gitとnode_modules以外のフォルダーとファイルをコピーするぜ。
👆 📁file-list-on-tauriを作って、中身を貼り付け。
👆 そのフォルダーを VSCode で開くぜ。
git init
👆 （パワーシェルではなくて）コマンドプロンプトを開いて、上記のコマンドを打鍵するぜ。
これにより、カレントディレクトリーに 📁.gitっていう隠しフォルダーが作成されるぜ。
これでローカルＰＣに［ローカル・リポジトリー］を作った。
これにより、カレントディレクトリーに 📁.gitっていう隠しフォルダーが作成されるぜ。
これでローカルＰＣに［ローカル・リポジトリー］を作った。
git add .
👆 続いて、上記のコマンドを打鍵するぜ。
LF を CRLF に変更するぞ、とか改行の変更の警告も出ているがまあいいだろう。
これで、全てのファイルを［ステージ］に上げた。
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 が自動生成されるぜ。
📁node_modules が自動生成されるぜ。
👆 続いて、📄src-tauri/tauri.conf.jsonファイルの内容を編集するぜ。
また、 📄src/App.vueファイルから［Save］機能を削除し、
［Load］ボタンは［Refresh］とラベルを変えておくぜ。
［Load］ボタンは［Refresh］とラベルを変えておくぜ。
pnpm tauri dev
👆 続いて、上記のコマンドを打鍵。
数分待てだぜ。
開発モードでデスクトップアプリが起動するぜ。
数分待てだぜ。
開発モードでデスクトップアプリが起動するぜ。
👆 こんな感じで、デスクトップアプリのベースをコピーする方法は確立できたな。
じゃあ、とりあえず、そのテキストボックスに
指定のディレクトリーの直下にあるファイル名を一覧してくれだぜ。
指定のディレクトリーの直下にあるファイル名を一覧してくれだぜ。
ファイル名を調べるのとか、フロントの機能じゃないだろうから、
バックエンドの Tauri フレームワークを使うんだろな、なら言語は Rust か？
バックエンドの Tauri フレームワークを使うんだろな、なら言語は Rust か？
👆 とりあえず、テンプレートを上記のように変更。
Rust で定義している、ファイル一覧を読取るget_file_names関数を TpyeScript 側から呼び出しているぜ。
Rust で定義している、ファイル一覧を読取るget_file_names関数を TpyeScript 側から呼び出しているぜ。
👆 Rust 言語の方に、ファイル名一覧を読取る関数を追加。
invoke_handlerってあたりに関数の名前を追加するのを忘れてはいけないぜ。
invoke_handlerってあたりに関数の名前を追加するのを忘れてはいけないぜ。
👆 ファイル名の一覧をカンマ区切りで取れたぜ。
リストボックスに入れてくれだぜ。
キャパシティ（作業に使える時間）をもう 4 は消費してるわよ。
残りは 2 よ。
残りは 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>
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>
👆 リストボックスに項目を並べる考え方は、上記のコードで示したぜ。
👆 じゃあ、ソースコードは上記な感じで更新。
👆 よし、リストボックスにファイル名が入ったぜ。
やったな！ これで課題No.2 もクリアーだぜ！
かかった時間は 5 ってところねえ。
見積りでは 2 ぐらいだったから、調査に 1.5 倍は取られるってとこねえ。
見積りでは 2 ぐらいだったから、調査に 1.5 倍は取られるってとこねえ。
## [2025-06-02_Mon]
フロントエンドに Vue、バックエンドに Tauri を使って、デスクトップアプリ制作を練習してみようぜ？
さっそく、このブログを有効的に使い始めたか。
これはブログじゃないのよ。
タグの直打ちで、文章載せるだけにしてはすごい労力……。
タグの直打ちで、文章載せるだけにしてはすごい労力……。
プログラミング練習の最初の課題でよくあるのはメモ帳だな。
テキストボックスに文章を入力して、［保存］ボタンを押したらファイルに保存できて、
［読込］ボタンを押したらテキストファイルを読込むんだぜ。
テキストボックスに文章を入力して、［保存］ボタンを押したらファイルに保存できて、
［読込］ボタンを押したらテキストファイルを読込むんだぜ。
Tauri の Get Started を読んでいけだぜ。
インストールの説明は省くからな。
インストールの説明は省くからな。
pnpm create tauri-app
👆 こんな感じでコマンドを打鍵すればいいはず。
👆 色々尋ねられるので、こんな感じで進めたぜ。
👆 Git Hub と連携しておいた。フォルダーの中身はこうなった。
👆 VSCode で開く。 下側のステータスバーを見ると cargo がディレクトリーをチェックしてるので
わたしの PC はCPU処理がビジーだとフリーズすることがあるので、終わるまで待って……。
わたしの PC はCPU処理がビジーだとフリーズすることがあるので、終わるまで待って……。
pnpm install
👆 （パワーシェルではなく）コマンドプロンプトで開いて、
上記のコマンドを打鍵。
上記のコマンドを打鍵。
👆 📁［node_modules］というバカでかいフォルダーが自動生成される。
pnpm tauri dev
上記のコマンドを打鍵。
わたしのケースでは、 379 個の大量のプログラムのコンパイルが走るので数分かかる。
わたしのケースでは、 379 個の大量のプログラムのコンパイルが走るので数分かかる。
👆 途中で［http://localhost:1420/］という URL が出てくるが、気にしないでほしい。
ウェブブラウザーでは、フロントエンドの画面表示のテストはできるが、バックエンドのテストはできない。
動作確認に使うには不完全。
ウェブブラウザーでは、フロントエンドの画面表示のテストはできるが、バックエンドのテストはできない。
動作確認に使うには不完全。
👆 コンパイルが終わると、デスクトップアプリが出てくる。
動作確認はこれに対して行う。
動作確認はこれに対して行う。
じゃあ、テキストボックスと、［保存］ボタン、［開く］ボタンを置いてくれだぜ。
👆 📄 src/App.vueファイルの <template>タグの中に、いわゆる HTMLタグを打ち込んでいけばいいはずだぜ。
👆 ひとまず、こんな感じか。
👆 スタイルを除くと、ソースはたったの 24 行だぜ。
ファイルパスを入れるテキストボックスと、ファイルを選択するダイアログボックスが出てくるボタンが欲しいぜ。
👆 テキストボックスと、ボタンの見た目に違いが小さいのイケてないが、
スタイルの修正は後回しにしよう。
スタイルの修正は後回しにしよう。
pnpm tauri add dialog
👆 なんか知らんけどエラー出た。
👆 えーと、つまり、"permissions": []に"dialog:default"を追加しようとしたら、
もう追加されてたからエラーってことかだぜ？
じゃあ"dialog:default"を消しといたれ。
もう追加されてたからエラーってことかだぜ？
じゃあ"dialog:default"を消しといたれ。
👆 多分、通ったか？
👆 こんな感じで改造して……。
👆 ファイル選択ダイアログボックスが出たぜ、オッケー。
アンドロイドやアイフォンでは、ファイル選択ダイアログボックスは出せないそうだぜ。
アンドロイドやアイフォンでは、ファイル選択ダイアログボックスは出せないそうだぜ。
ファイル選択ダイアログボックスで最初に開いているフォルダーは、
テキストボックスに書いてあったパスにしてくれだぜ。
テキストボックスに書いてあったパスにしてくれだぜ。
👆 １行追加するだけでいけた。
あとは、ファイルの書込みと読込みねぇ。
pnpm tauri add fs
👆 テキストを読み込む方は上記の通りでいけた。
👆 テキストを書き込む方はイケてない。何かパーミッション設定でも足りてないのか？
👇 説明書はあるけど。
📖 Examples
📖 Examples
👆 なんか分かってないけど、このように書いたらファイルへのテキスト書き込みはでけた。
やったな！ 微速微進、遅々前進だぜ！
Git Hub のリポジトリーへのリンクも貼っておきましょう。
📖 muzudho / notepad-on-tauri
📖 muzudho / notepad-on-tauri
## [2025-06-01_Sun]
文字は出せるかだぜ？
出せてるぜ。
なんか画像がボヤけてない？
サイズもマチマチだし。
グレードダウンしてない？
サイズもマチマチだし。
グレードダウンしてない？
まあ、そこはゆくゆくは修正だな。
さっそくイラストを新調したか、
グレードダウンしてないかだぜ？
グレードダウンしてないかだぜ？
Grok に描かせようと、Super Grok にプラン変更しようとしたら、
クレジットカードを拒否されたので、あんたのお父んの手描きになったのよ。
何でクレジットカードが拒否されたのか知らんけど。
クレジットカードを拒否されたので、あんたのお父んの手描きになったのよ。
何でクレジットカードが拒否されたのか知らんけど。
このトップページは近況を書く日記かだぜ？
メインのコンテンツは何かないのかだぜ？
メインのコンテンツは何かないのかだぜ？
## [2025-05-24_Sat]
Grok の助けを得て、ホームページ作成中（＾ｑ＾）
