ワラベンチャー

👆Vuetify3 に置き換え中なんだが、レイアウトがスカスカになってしまう……

じゃあ、画面に合わせてきっちり詰めるのは、できないんだろ。

👆がんばって隙間を詰めてもこれぐらい。

勝手にスマホにも対応しようとされるから、デスクトップ画面にピッタリ調整しようとすることはできないんじゃないの？

次は、さっきのアプリをコピーして、わらシティを作ろう。

何だぜ、これ？

スーパー・ファミコン版のシム・シティのパクリを作るんだぜ。

さっそくこれを、ワラベンチャーのホームページ、つまりここにも移植しよう。

あれっ？　画像が表示されない？

なんで同じ Vue 3 なのに、そのまんま移植できないの？

HTML のソースに <v-img> タグがそのまんま出力されてる……、
Nuxt に Vuetify3 が連携されていないんだ。

じゃあ、連携しろだぜ。

👇以下の記事を頼りに Nuxt と Vuetify3 を連携する。

📖Vue3 + Nuxt3 + 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 に対応してくれるサービスとかないかなあ……。

👇これを読めだぜ。

📖Let's Encrypt

スタートアップ・スクリプトを実行するために、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証明書、自力で取る。

👇これを読めだぜ。

📖Let’s Encryptで無料SSL証明書を取得する

Let's encript を入れるには、Certbot というツールをインストールしたらいいらしい。
👇Certbot のインストール方法。

📖How To Install Certbot on Ubuntu 24.04: Set Up Let’s Encrypt for Apache and Nginx

# 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 が開いていることを確認する

👇設定は以上なので、設定できているか確認する。

📖https://www.whynopadlock.com/
📖https://www.ssllabs.com/ssltest/

設定できてないな。

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

👆リポジトリーをコピーしたからか、わけわからんエラーが出たので、
キャッシュをクリアーしてやり直し。