Webブラウザだけで動作するシンプルな「Tsui Editor」

Tsui Editorというシンプルなエディタがリリースされました。公開サイトにアクセスするだけで使えます。持ち運びたい場合も、単一のHTMLファイルなのでインストール不要でちょっと編集したい時に便利。Chromium系ブラウザ（Chrome / Edge / Opera / Brave）専用とはなりますが、ちょっとした場面で役立つのでは。

公開サイトアクセスでも使えるし、単一HTMLファイルを持ち運んでも良いので、あえてセルフホストしなくても構わないかもしれませんが。
一応、LXDコンテナ内で、Tailscale ServeによってHTTPS化して公開するスクリプトです。

Tailscale有効なLXDコンテナ内で実行

#!/bin/bash
# ==============================================================
# Tsui Editor インストールスクリプト (Tailscale Serve版)
# tailscale serve で HTTPS公開 → File System Access API が動く
# ==============================================================

set -e

INSTALL_DIR="/opt/tsui-editor"
PORT="${TSUI_PORT:-8080}"
HTML_URL="https://raw.githubusercontent.com/hajimetwi3/misc/main/docs/tools/tsui-editor/tsui-editor.html"
SERVICE_NAME="tsui-editor"

echo "=== Tsui Editor セットアップ (Tailscale Serve) ==="

# ── 1. 依存パッケージ ──────────────────────────────────────────
install_deps() {
    if command -v apt-get &>/dev/null; then
        apt-get update -qq
        apt-get install -y -qq curl python3
    elif command -v dnf &>/dev/null; then
        dnf install -y -q curl python3
    elif command -v apk &>/dev/null; then
        apk add --no-cache curl python3
    else
        echo "[ERROR] 対応パッケージマネージャが見つかりません" >&2
        exit 1
    fi
}

echo "[1/5] 依存パッケージを確認中..."
if ! command -v curl &>/dev/null || ! command -v python3 &>/dev/null; then
    install_deps
fi
echo "      OK"

# ── 2. Tailscale 確認 ──────────────────────────────────────────
echo "[2/5] Tailscale を確認中..."
if ! command -v tailscale &>/dev/null; then
    echo "[ERROR] tailscale コマンドが見つかりません" >&2
    exit 1
fi
if ! tailscale status &>/dev/null; then
    echo "[ERROR] Tailscale が起動していません。'tailscale up' を先に実行してください" >&2
    exit 1
fi
echo "      OK"

# ── 3. HTMLファイル取得 ────────────────────────────────────────
echo "[3/5] tsui-editor.html を取得中..."
mkdir -p "$INSTALL_DIR"
curl -fsSL "$HTML_URL" -o "$INSTALL_DIR/tsui-editor.html"
echo "      保存先: $INSTALL_DIR/tsui-editor.html"

# ── 4. 起動スクリプト生成 & systemd ───────────────────────────
echo "[4/5] HTTPサーバーを設定中..."

cat > "$INSTALL_DIR/start.sh" << STARTSCRIPT
#!/bin/bash
PORT=\${TSUI_PORT:-${PORT}}
echo "Tsui Editor ローカルサーバー起動: http://127.0.0.1:\${PORT}"
cd "$INSTALL_DIR"
exec python3 -m http.server "\$PORT" --bind 127.0.0.1
STARTSCRIPT
chmod +x "$INSTALL_DIR/start.sh"

if [ -d /usr/local/bin ]; then
    ln -sf "$INSTALL_DIR/start.sh" /usr/local/bin/tsui-editor
fi

# systemd サービス登録
if command -v systemctl &>/dev/null && systemctl is-system-running &>/dev/null 2>&1; then
    cat > "/etc/systemd/system/${SERVICE_NAME}.service" << UNIT
[Unit]
Description=Tsui Editor HTTP Server (local)
After=network.target

[Service]
Type=simple
WorkingDirectory=${INSTALL_DIR}
ExecStart=/usr/bin/python3 -m http.server ${PORT} --bind 127.0.0.1
Restart=on-failure
RestartSec=5

[Install]
WantedBy=multi-user.target
UNIT

    systemctl daemon-reload
    systemctl enable --now "${SERVICE_NAME}"
    echo "      systemd サービス '${SERVICE_NAME}' 起動済み"
else
    echo "      systemd なし → バックグラウンドで起動します"
    nohup "$INSTALL_DIR/start.sh" > "$INSTALL_DIR/server.log" 2>&1 &
    sleep 1
fi

# ── 5. Tailscale Serve 設定 ────────────────────────────────────
echo "[5/5] tailscale serve を設定中..."

# 既存設定をリセット
tailscale serve reset 2>/dev/null || true

# ローカルHTTPサーバーをHTTPSで公開
tailscale serve --bg "http://127.0.0.1:${PORT}"

# ドメイン取得
TAILSCALE_DOMAIN=$(tailscale status --json | python3 -c "
import sys, json
d = json.load(sys.stdin)
name = d.get('Self', {}).get('DNSName', '').rstrip('.')
print(name)
")

# ── 完了メッセージ ─────────────────────────────────────────────
echo ""
echo "============================================"
echo "  Tsui Editor セットアップ完了！"
echo "============================================"
echo ""
if [ -n "$TAILSCALE_DOMAIN" ]; then
    echo "  アクセスURL (HTTPS / Tailscaleネットワーク内):"
    echo "  https://${TAILSCALE_DOMAIN}/tsui-editor.html"
else
    echo "  アクセスURL: tailscale status で自分のドメインを確認してください"
    echo "  https://<your-device>.ts.net/tsui-editor.html"
fi
echo ""
echo "  ✅ HTTPS配信のためFile System Access APIが動作します"
echo "  ✅ Chromium系ブラウザからアクセスしてください"
echo ""
echo "  serve状態の確認: tailscale serve status"
echo "  serve停止:       tailscale serve reset"
echo ""