
ðVuetify3 ã«çœ®ãæãäžãªãã ããã¬ã€ã¢ãŠããã¹ã«ã¹ã«ã«ãªã£ãŠããŸãâŠâŠ
ããããç»é¢ã«åãããŠãã£ã¡ãè©°ããã®ã¯ãã§ããªããã ãã

ðããã°ã£ãŠééãè©°ããŠããããããã
åæã«ã¹ããã«ã察å¿ããããšãããããããã¹ã¯ãããç»é¢ã«ããã¿ãªèª¿æŽããããšããããšã¯ã§ããªãããããªãã®ïŒ
次ã¯ããã£ãã®ã¢ããªãã³ããŒããŠãããã·ãã£ãäœããã

ã¹ãŒããŒã»ãã¡ãã³ã³çã®ã·ã ã»ã·ãã£ã®ãã¯ãªãäœããã ãã
ãã£ããããããã¯ã©ãã³ãã£ãŒã®ããŒã ããŒãžãã€ãŸãããã«ãç§»æ€ãããã
ããã£ïŒãç»åã衚瀺ãããªãïŒ
ãªãã§åã Vue 3 ãªã®ã«ããã®ãŸããŸç§»æ€ã§ããªãã®ïŒ
HTML ã®ãœãŒã¹ã« <v-img> ã¿ã°ããã®ãŸããŸåºåãããŠãâŠâŠã
Nuxt ã« Vuetify3 ã飿ºãããŠããªããã ã
ãããã飿ºããã ãã
pnpm remove vuetify
pnpm add vuetify@next sass @mdi/font
pnpm add -D vite-plugin-vuetify
ð nuxt.config.ts ãç·šéã
以äžã¯è¿œå éšåã
export default defineNuxtConfig({
css: ["vuetify/styles", "@mdi/font/css/materialdesignicons.css"],
build: {
transpile: ["vuetify"],
},
})
ð plugins ãã©ã«ããŒãäœæã
ð vuetify.ts ãã¡ã€ã«ãäœæã
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
components,
directives,
});
nuxtApp.vueApp.use(vuetify);
});
以äžã®ã³ãã³ããæéµã
pnpm install
ãµã€ããèœã¡ãŠããã
ã¢ãžã¥ãŒã«ã®ããŒãžã§ã³ãåã£ãŠãªããš Nuxt ã¯å®¹èµŠãªãèœãšããããã
ð package.json ãã¡ã€ã«ã®äžã®ããŒãžã§ã³æå®ãä¿®æ£ãããã
ãªãã sudo ã§ build ã³ãã³ããå©ããŠããŸã£ããããããã£ã¬ã¯ããªãŒã®ããŒããã·ã§ã³ãrootã«ãªã£ãŠãŠã
ã¢ã¯ã»ã¹æš©éããªããšããããšã©ãŒãåºãŠãã
ãã£ã¬ã¯ããªãŒã®ããŒããã·ã§ã³ãubuntuã«çŽããã
http://localhost:3000/wara-city/mapãšãããã¹ã§ã¯è¡šç€ºãããŠã
https://warabenture.com/wara-city/mapãšãããã¹ã§ã¯è¡šç€ºãããªãã
Nuxt ã¯ãªããã«ãŒãã£ã³ã°ã«æµåãããã®ããªïŒ
https://warabenture.com/wara-city/mapã§ã¯è¡šç€ºãããªããã
http://warabenture.com/wara-city/map/ãªã衚瀺ãããâŠâŠã
ãªãã§ãªã³ã¯ãã¯ãªãã¯ããããhttpãåæã«httpsã«å€ããããŠããŸãã®ïŒ
ãããã€ã³ã¿ãŒãããã§ç°¡åã« https ã«å¯Ÿå¿ããŠããããµãŒãã¹ãšããªãããªãâŠâŠã
ã¹ã¿ãŒãã¢ããã»ã¹ã¯ãªãããå®è¡ããããã«ãOSã®åã€ã³ã¹ããŒã«ãããªããã°ãªããªãã¿ããã ãã
ããããªããã
ã¹ã¿ãŒãã¢ããæã§ãªããŠããä»ã¹ã¯ãªãããå®è¡ããããšã¯ã§ããªãã®ïŒ
ç¡ããOSã®åã€ã³ã¹ããŒã«ã¯å¿
é ã
Web ãµãŒããŒãåæ§ç¯ããããã®æé ã¿ãããªãã®ã¯ãŸãšããŠãªãã®ïŒ
èšæ¶ã®äžã«ãããªãâŠâŠã
ufw ã«ããããŒãã®éæŸã
nginx ã®èšå®ãã¡ã€ã«ã
ä»ãäœãããïŒ
SSH æ¥ç¶ã®ããã® cert èªèšŒãã¡ã€ã«ã
ã¹ãã¬ãŒãžã®ã¹ã±ãŒã«ã¢ããã« 5000åãããåºããæ°ããããªããããŠããã®èšå®ã
nginx ã®èšå®ã
ãã£ã¬ã¯ããªãŒã®ããŒããã·ã§ã³èšå®ã
git ã®ã€ã³ã¹ããŒã«ãããã®ãããïŒ
/etc/nginx/sites-enabled/default ãæå¹ã«ãªã£ãŠãã®ã¯åé¡ããã£ãã®ã§ã
unlink ãããšããã¡ã¢æžãã¯æ®ã£ãŠããã
ããããªãããããããªããOS ã®åã€ã³ã¹ããŒã«ãå§ãããã
ãã£ïŒããããã®VPSã¯ãUbuntu çšã® Let's Encrypt ã®ã¹ã¿ãŒãã¢ããã¹ã¯ãªãããç¡ããïŒ
èªåã§ Let's Encrypt ã®èšå®ãããã«ããŠããèªåæŽæ°ã®ã¹ã¯ãªãããæžããªããšãããªããªãã®ãããïŒ
cron ã䜿ãã£ãŠããšã ãã
ããã©ããã Nuxt ã®æ¹ã§ https ã«é£ã°ãªãããã«ããæ¹æ³ã¯ãªãã®ãã ãïŒ
ãã®èšå®ã¯ãã£ãšããã©ãããã
ããããSSLèšŒææžãèªåã§åãã
# Ubuntu 24.04
# Update packages and install Certbot
sudo apt update
# Step 1: Install Certbot on Ubuntu 24.04
sudo apt install -y certbot
# For Nginx users
sudo apt install -y python3-certbot-nginx
# Step 2: Install a Letâs Encrypt Certificate Using Certbot
sudo certbot --nginx -d example.com ðexample.com ã®ãšããã«ã¯ãSSL蚌æããããã¡ã€ã³ãå
¥ããããšã
# Step 3: Configuring Nginx with Let's Encrypt Certificates
sudo nano /etc/nginx/sites-enabled/default
ðããã§ nginx ã®èšå®ãã¡ã€ã«ãæžããšããã ããæ¢åã®èšå®ãã¡ã€ã«ã¯ä»¥äžã®éãã
ð/etc/nginx/sites-enabled/warabenture-2025
server {
listen 80;
server_name ïŒðIPã¢ãã¬ã¹ïŒ ïŒðãã¡ã€ã³ïŒ;
root /home/ubuntu/warabenture-2025/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
ðèšäºã®ãµã³ãã«ã¯ä»¥äžã®éãã ããæ¢åã®èšå®ããããâŠâŠã
server {
listen 80;
listen [::]:80;
server_name www.example.com;
access_log off;
location / {
rewrite ^ https://$host$request_uri? permanent;
}
}
server {
listen 443 ssl;
listen [::]:443 ssl;
server_name www.example.com; ð
root /var/www/html;
index index.php index.html index.htm index.nginx-debian.html;
autoindex off;
ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem; ð
ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem; ð
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php-fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
ðããããã°ããã®ãïŒ
ð/etc/nginx/sites-enabled/warabenture-2025
server {
listen 80;
server_name ïŒðIPã¢ãã¬ã¹ïŒ ïŒðãã¡ã€ã³ïŒ;
root /home/ubuntu/warabenture-2025/dist;
index index.html;
ssl_certificate /etc/letsencrypt/live/warabenture.com/fullchain.pem; ð
ssl_certificate_key /etc/letsencrypt/live/warabenture.com/privkey.pem; ð
location / {
try_files $uri $uri/ /index.html;
}
}
ð fullchain.pem ãã¡ã€ã«ãšã眮ããŠãªããã©âŠâŠã
ããäœãããŠãã®ãïŒ æ¬¡ãžã
sudo nginx -t
sudo systemctl restart nginx
Step 4: Verifying Your Let's Encrypt Certificate Information
ããã§ Let's encrypt ã®èšå®ãçµãã£ãŠãã¯ãã ãã
å¥ã«äœãå€ãã£ãŠãããã«ã¯èŠããªããªâŠâŠã
TCPããŒã80ïŒHTTPïŒãšã443ïŒHTTPSïŒãéããŠããå¿
èŠãããããã ãã
ãããã®VPSã®ã³ã³ãããŒã«ããã«ã®ãã±ãããã£ã«ã¿ãŒãèŠããšãã©ã¡ããå
šãŠèš±å¯ããŠããã
ããããéããŠãªãã®ã¯ Ubuntu ã®æ¹ãïŒ
ufw ã³ãã³ãã䜿ã£ãŠéããŠã¿ããïŒ
sudo ufw status
Status: inactive
sudo ufw allow 22
Rules updated
Rules updated (v6)
sudo ufw enable
Command may disrupt existing ssh connections. Proceed with operation (y|n)? y
Firewall is active and enabled on system startup
sudo ufw status
Status: active
To Action From
-- ------ ----
80 ALLOW Anywhere
443/tcp ALLOW Anywhere
22 ALLOW Anywhere
80 (v6) ALLOW Anywhere (v6)
443/tcp (v6) ALLOW Anywhere (v6)
22 (v6) ALLOW Anywhere (v6)
ããã§ããŒãã¯éããŠããšæããããŸã ãã¡ãã
sudo certbot certonly --webroot --webroot-path /var/www/html -m ïŒðã¡ãŒã«ã¢ãã¬ã¹ïŒ -d warabenture.com --agree-tos -n
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Certificate not yet due for renewal
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Certificate not yet due for renewal; no action taken.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ðäžã®ã³ãã³ããå
¥åãããšã
ðprivkey.pemã ðfullchain.pem ãäœããããããã
sudo systemctl restart nginx
å€ããããæ¬¡ã¯ Grok ã«èããŠã¿ããâŠâŠã
sudo apt update && sudo apt upgrade -y
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d warabenture.com ðãã®ã³ãã³ãã¯ïŒåç®ã ããã倱æãã
ð /etc/letsencrypt/live/example.com/ ãã£ã¬ã¯ããªãŒã®äžã«ã¯ãã¡ã€ã«ãäœãããŠããã
sudo systemctl status certbot.timer
sudo certbot renew --dry-run
sudo ufw status
ð 80 ãš 443 ãéããŠããããšã確èªãã
Grok ã«èããŠã¿ããã
ð80ã®åãããSSLã®èšè¿°ãåé€ã
server {
listen 80;
server_name 49.212.140.81 os3-288-33577.vs.sakura.ne.jp warabenture.com www.warabenture.com; ðãã¡ã€ã³è¿œå ã
root /home/ubuntu/warabenture-2025/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
ð80ã®åãäžžããšã³ããŒããŠãå°ãå€ããŠã443ã®åãäœãã
server {
listen 443 ssl;
server_name 49.212.140.81 os3-288-33577.vs.sakura.ne.jp warabenture.com www.warabenture.com;
root /home/ubuntu/warabenture-2025/dist;
index index.html;
ssl_certificate /etc/letsencrypt/live/warabenture.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/warabenture.com/privkey.pem;
location / {
try_files $uri $uri/ /index.html;
}
}
sudo nginx -t
sudo systemctl reload nginx
sudo certbot install --cert-name warabenture.com --nginx
sudo certbot --nginx -d warabenture.com -d www.warabenture.com
ð 質åãããã®ã§ãšãããã 1 ãéžã¶
éã£ããnginxã®èšå®ã¯ã80 ãš 443 ã®ïŒã€æžãå¿
èŠããã£ãã®ãã
csv-cleaning-2-on-tauriãªããžããªãŒã®ããã±ãŒãžäŸåé¢ä¿ããããããããã
ðcargo.tomlãã¡ã€ã«ãããapi-allãã£ãŒãã£ãŒãé€å»ã
ð æ¬¡ã«ãcargoãæŽæ°ã
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>ã䜿ãã¿ããã ãïŒ
ããããèªåçã«ã¬ã¹ãã³ã·ãã»ãã¶ã€ã³ã«å¯Ÿå¿ããŠãããã«ã¯ãïœ
ïœãµã€ãã«ç¹åãããã¬ãŒã ã¯ãŒã¯ã«äžžæãããæ¹ãããã®ãâŠâŠã
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 ã«å°ããŠã¿ããšãæ¥æ¬ã®å°å³ããŒã¿ãç¡æå
¬éããŠããã®ã¯ä»¥äžã®ïŒã€ã§ã
åœåå°çé¢ïŒœã®æ¹ã¯äžç®ã®ç²ŸåºŠãŸã§ã ãããæ®ãã®ã¯ïŒ»G空éæ
å ±ã»ã³ã¿ãŒïŒœã®äžæã ãã
G空éæ
å ±ã»ã³ã¿ãŒïŒœã®å°å³ããŒã¿ã¯ã粟床ã圢åŒãæã£ããã®ã§ã¯ãªãããã©ãã©ã ããã ãã
Grok ãããã€ãç¥ã£ãŠããããšãããã
QGIS ã䜿ã£ãŠã¿ããã ãã

ðããã£ãæã£ããããªå°å³ãšéãâŠâŠã
äžåç£å±ãç»èšããåå°ããå
¥ã£ãŠãªãããããªãã®ïŒ
䜿ãããŒããããåœåå°çé¢ïŒœã®æ¹ãèŠãŠã¿ããâŠâŠã

ðãã®å°å³ãã©ããã£ãŠ .geojson 圢åŒã«å€æãããã ãïŒ
ãšããããå·Šã®ãµã€ãã¡ãã¥ãŒã®ä¿åãã¿ã³ãæŒããŠã¿ãã ãã
.json 圢åŒã§ã¯ä¿åã§ãããã.geojson 圢åŒã§ã¯ãªãã£ããã
ãããå°å³è¡šç€ºã¯è«ŠããŠãããŒã¿ã»ã¯ãªãŒãã³ã°ã®æ¹ã«éç¹çã«åãæãããã ãã

ðå·Šã®è¡šã¯ä»€å7幎5æ1æ¥çŸåšã®ïŒ»åŒççã®
åžåºçºæå¥äžåž¯æ°ã»äººå£ã ãã
å³ã®è¡šã¯ãç¶ããåœå¢èª¿æ»ïŒœããæã£ãŠããŠç·šéããŠãã衚ã ãã
ãã®ããã«ãã«ããŽãªãŒåãããåã
ã®é
ç®åãæã£ãŠããªãããåããã®ã衚ããŠããã¯ãã®ïŒã€ã®è¡šãã
è¡ãæããŠããŒã¿ãèŠããŠãããããŒã«ãäœã£ãŠããã ãã

ðããããšããããã巊衚ããïŒååã£ãŠïŒ»åå2ãå³è¡šããïŒååã£ãŠïŒ»åå1ãšããŠãåžåºçºæåã以äžã®ïŒã€ã®ã°ã«ãŒãã«åãããã ãã
- 䞡衚ã«å«ãŸããåžåºçºæå
- 巊衚ã«ã ãå«ãŸããåžåºçºæå
- å³è¡šã«ã ãå«ãŸããåžåºçºæå

ðïŒåãç¬ç«ããŠæé ãœãŒããããã ãã
浊åã®æµŠãã²ãããªããæåã³ãŒããå°ããã®ãæå³ãããããâŠâŠã

ðæã§æ¯ãåãããã

ðæã§ååã®è¡šèšæºããä¿®æ£ããŠïŒè¡ãïŒè¡ã«ãŸãšãããããŠã
ãããŠãäºè¡šä»®çªïŒœãšããååã§åãäœã£ãŠãé£çªãæ¯ããã
倿Žåã®ååã¯æ®ããŠãããªããšãããšã§ã©ã®è¡ã ã£ãã®ãããããªããªãããããªãã®ïŒ
ããããå€ãååã¯æ®ããŠãããŠããã ãã
ããããä»åæã§è¡ã£ãæäœãèªååããã¢ããªãäœã£ãŠããã ãã
ã¢ããªã±ãŒã·ã§ã³ã®åå㯠column-names-sync-on-tauri ãšãã§ããããªã
ããã£ïŒ Cãã©ã€ãã®æ®ã容éã 5 GB ãããªãïŒïŒ
Tauri 㯠debug ãã©ã«ããŒããã«ã§ããããã ãã
Grok ã«å¯ŸçãèããŠã¿ããã
以äžã®ã³ãŒããããã£ãšå®è¡ã
ãªãªãŒã¹ããããã°ãã©ã¡ããå«ã㊠14.3 GiB ããã¡ã€ã«ãæ¶ããâŠâŠã
Tauri æããããªâŠâŠã
仿¥ã¯ãå®¶ã®æé€ãããããã
ããããé¢šåæ¡¶ãæé€ããŠããã ãã
â
颚åãšæŽé¢æã䟿åšãæãæé€ãããã
ãããããç¶ãã¯ãã®é¢šåã«å
¥ãã ãã
â
颚åã«å
¥ã£ãŠãµãããªãããã
âãæ¹¯ãå
¥ããŠããã¯ããªã®ã«ãã¬ããŸæ¹¯ã«ãªã£ãŠãããâŠâŠ
ã¬ã¹ä»£ã®æ¯æããæ»ã£ãŠããã®ãããããïŒ
ãããæ¬¡ã¯ããç¶ãã¯æŒé£¯ãé£ã¹ãã ãã
â
æŒé£¯ãé£ã¹ããã
ïŒæéãããããã£ãããããšæéããããªã
çåœã®ç¶æã«å¿
èŠãªæŽ»åã§ããããã
ãããæ¬¡ã¯ãã³ãŒããŒã飲ãã§ãæ¯ã磚ãã ããæ¯éãã©ã·ã䜿ããã
â
ã³ãŒããŒã飲ãã§æ¯ã磚ããããæ¯éãã©ã·ã䜿ã£ãã
ãããæ¬¡ã¯ããã£ãããã¹ãžã ã«è¡ãã ããè¡ãããªã«ã¯æŒ«ç»æ¬ãBook-Offã«å£²ã£ãŠããŠããã ãã
åž°ãã«ã¯ææ¥ã®é£¯ïŒé£åãè²·ã£ãŠããã ãã
äœè£ãããã°ãºãã³ã®è£Ÿäžãã®ããã®è£çž«ã»ãããè²·ã£ãŠããã ãã
ãºãã³ã®è£Ÿäžãã®ããã®è£çž«ã»ããã£ãŠã©ãã«å£²ã£ãŠãã®ïŒ
ã»ãã³ã€ã¬ãã³ãããã€ãœãŒãªã©ã«å£²ã£ãŠãã ãã
åãã£ãããè¡ã£ãŠãããã
åž°å®
ãªãã
â
ãã£ãããã¹ãžã ã«è¡ã£ãŠãããã
â
è¡ãããªã«æŒ«ç»æ¬ã売ã£ãŠããããïŒïŒåãããã§ 2000 åãããã«ãªã£ããã
ð€ããããäœå·»ãŸã§è²·ã£ããã®ã¡ã¢æžããã©ãã«ä¿ç®¡ããŠããããåé¡ã ãã
â
åž°ãéã«ã¯ãœãŒã€ã³ã°ã»ãããè²·ã£ãŠãããã
ãŠã¶ã¯ã€ã§ã¹ããŒããŒã®çµµæãå
¥ã£ããã€ã ããïŒïŒïŒïŒïŒåã
ïŒïŒïŒïŒïŒåã¯é«ããªããå
ãåãããã«äœæ¬ã®ãºãã³ã®è£Ÿãäžããã€ããã ãïŒ
ïŒæ¬ïŒïŒïŒïŒïŒåã®è£Ÿäžãããã
å€ã¯éäžåãèœã¡ãŠãããã§ããºãã³ã®è£Ÿäžãã¯ææ¥ã®æã«ããã ãã
ã²ãšãŸããã«ãã§ã€ã³ã¬ã¹ã»ãã©ãã¯ã³ãŒããŒã§ã飲ãã§äŒãã ãã
æšæ¥ãšè©±ãã¯å€ãã£ãŠã課é¡No.2ã ãã
ãã£ã¬ã¯ããªãŒãæå®ãããããã®çŽäžã®ãã¡ã€ã«åãäžèЧããŠãããã¢ããªãäœã£ãŠããã ãã
ãããããã¡ã€ã«ãã¹ãå
¥ããããã¹ãããã¯ã¹ãšããã¡ã€ã«éžæãã€ã¢ãã°ããã¯ã¹ãéããã¿ã³ã
ãã¡ã€ã«ã®äžèŠ§ïŒœãšããã®è¡šç€ºãæŽæ°ãã衚瀺ãã¿ã³ãããã°ãããã ãã
仿¥ã®ãã£ãã·ãã£ïŒäœæ¥ã«äœ¿ããæéïŒã¯ 6 ãšãããã
æšæ¥äœã£ãã¢ããªããSaveæ©èœãåé€ããŠãããã¹ãããã¯ã¹ããªã¹ãããã¯ã¹ãžä»ãæ¿ãã
ããšã¯ããã¡ã€ã«åãäžèЧããæ©èœãäœãããã©ããã®èª¿æ»ãšå®è£
ã ããã
調æ»ãéãã«èŠãŠããšãã©ãŒãïŒäœæ¥ã«ãããæéèŠç©ïŒã¯ 2 ã£ãŠãšããããã

ð æšæ¥äœã£ãããã°ã©ã ããã.gitãšnode_modules以å€ã®ãã©ã«ããŒãšãã¡ã€ã«ãã³ããŒãããã

ð ðfile-list-on-tauriãäœã£ãŠãäžèº«ã貌ãä»ãã

ð ãã®ãã©ã«ããŒã VSCode ã§éããã

git init
ð ïŒãã¯ãŒã·ã§ã«ã§ã¯ãªããŠïŒã³ãã³ãããã³ãããéããŠãäžèšã®ã³ãã³ããæéµãããã
ããã«ãããã«ã¬ã³ããã£ã¬ã¯ããªãŒã« ð.gitã£ãŠããé ããã©ã«ããŒãäœæããããã
ããã§ããŒã«ã«ïŒ°ïŒ£ã«ïŒ»ããŒã«ã«ã»ãªããžããªãŒïŒœãäœã£ãã
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>
ð ãªã¹ãããã¯ã¹ã«é
ç®ã䞊ã¹ãèãæ¹ã¯ãäžèšã®ã³ãŒãã§ç€ºãããã

ð ãããããœãŒã¹ã³ãŒãã¯äžèšãªæãã§æŽæ°ã

ð ããããªã¹ãããã¯ã¹ã«ãã¡ã€ã«åãå
¥ã£ããã
ãã£ããªïŒãããã§èª²é¡No.2 ãã¯ãªã¢ãŒã ãïŒ
ããã£ãæé㯠5 ã£ãŠãšããããã
èŠç©ãã§ã¯ 2 ãããã ã£ãããã調æ»ã« 1.5 åã¯åãããã£ãŠãšãããã
ããã³ããšã³ãã« Vueãããã¯ãšã³ãã« Tauri ã䜿ã£ãŠããã¹ã¯ãããã¢ããªå¶äœãç·Žç¿ããŠã¿ãããïŒ
ãã£ããããã®ããã°ãæå¹çã«äœ¿ãå§ãããã
ããã¯ããã°ãããªãã®ãã
ã¿ã°ã®çŽæã¡ã§ãæç« èŒããã ãã«ããŠã¯ãããåŽåâŠâŠã
ããã°ã©ãã³ã°ç·Žç¿ã®æåã®èª²é¡ã§ããããã®ã¯ã¡ã¢åž³ã ãªã
ããã¹ãããã¯ã¹ã«æç« ãå
¥åããŠãä¿åãã¿ã³ãæŒããããã¡ã€ã«ã«ä¿åã§ããŠã
èªèŸŒïŒœãã¿ã³ãæŒãããããã¹ããã¡ã€ã«ãèªèŸŒããã ãã
Tauri ã®å
¬åŒããŒã ããŒãžã¯ããã«ãããã
ð
Tauri 2.0 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 è¡ã ãã
ãã¡ã€ã«ãã¹ãå
¥ããããã¹ãããã¯ã¹ãšããã¡ã€ã«ãéžæãããã€ã¢ãã°ããã¯ã¹ãåºãŠãããã¿ã³ã欲ãããã

ð ããã¹ãããã¯ã¹ãšããã¿ã³ã®èŠãç®ã«éããå°ããã®ã€ã±ãŠãªããã
ã¹ã¿ã€ã«ã®ä¿®æ£ã¯åŸåãã«ãããã
ãã€ã¢ãã°ããã¯ã¹ãåºãã«ã¯ãäœãèšå®ãèŠããã ããªã
調ã¹ããã
ð
TAURIãïŒãDialogpnpm tauri add dialog

ð ãªããç¥ãããã©ãšã©ãŒåºãã

ð ããŒãšãã€ãŸãã"permissions": []ã«"dialog:default"ã远å ããããšãããã
ãã远å ãããŠããããšã©ãŒã£ãŠããšãã ãïŒ
ããã"dialog:default"ãæ¶ããšãããã

ð å€åãéã£ããïŒ

ð ãããªæãã§æ¹é ããŠâŠâŠã

ð ãã¡ã€ã«éžæãã€ã¢ãã°ããã¯ã¹ãåºããããªãã±ãŒã
ã¢ã³ããã€ããã¢ã€ãã©ã³ã§ã¯ããã¡ã€ã«éžæãã€ã¢ãã°ããã¯ã¹ã¯åºããªãããã ãã
ãã¡ã€ã«éžæãã€ã¢ãã°ããã¯ã¹ã§æåã«éããŠãããã©ã«ããŒã¯ã
ããã¹ãããã¯ã¹ã«æžããŠãã£ããã¹ã«ããŠããã ãã
ð API ã¯ä»¥äžã®ããŒãžã«æžããŠããããâŠâŠã
ð
OpenDialogOptions ããèªãã§çŽããŠãããã ãã

ð ïŒè¡è¿œå ããã ãã§ãããã
ããšã¯ããã¡ã€ã«ã®æžèŸŒã¿ãšèªèŸŒã¿ããã
ð ãã¡ã€ã«ã®èªã¿æžãã® API ã¯ä»¥äžã®ããŒãžã«æžããŠããããâŠâŠã
ð
File System ããŒãžã®äžããé çªã«èªãã§å®è£
ããããã
pnpm tauri add fs

ð ããã¹ããèªã¿èŸŒãæ¹ã¯äžèšã®éãã§ãããã

ð ããã¹ããæžãèŸŒãæ¹ã¯ã€ã±ãŠãªããäœãããŒããã·ã§ã³èšå®ã§ãè¶³ããŠãªãã®ãïŒ
ð èª¬ææžã¯ãããã©ã
ð
Examples
ð ãªããåãã£ãŠãªããã©ããã®ããã«æžããããã¡ã€ã«ãžã®ããã¹ãæžã蟌ã¿ã¯ã§ããã
ãã£ããªïŒã埮é埮é²ãé
ã
åé²ã ãïŒ