126 lines
4.5 KiB
Bash
Executable File
126 lines
4.5 KiB
Bash
Executable File
#!/bin/bash
|
||
# 図解 HTML にコメントウィジェットの script タグを注入して surge.sh に公開する。
|
||
#
|
||
# 使い方: deploy-diagram.sh <HTMLファイル> [スラッグ]
|
||
#
|
||
# ウィジェットの配信元 URL とトークンは、セットアップスキルが
|
||
# リポジトリルートに生成する fb-tool-url.txt / fb-api-token.txt から読む。
|
||
set -e
|
||
|
||
HTML_FILE="${1:?使い方: deploy-diagram.sh <HTMLファイル> [スラッグ]}"
|
||
SLUG="${2:-}"
|
||
|
||
GREEN='\033[0;32m'
|
||
YELLOW='\033[1;33m'
|
||
RED='\033[0;31m'
|
||
NC='\033[0m'
|
||
|
||
if ! command -v node &>/dev/null; then
|
||
echo -e "${RED}エラー: Node.js がインストールされていません${NC}" >&2
|
||
echo "Node.js をインストールしてから、もう一度試してください。" >&2
|
||
exit 1
|
||
fi
|
||
|
||
if [ ! -f "$HTML_FILE" ]; then
|
||
echo -e "${RED}エラー: $HTML_FILE が見つかりません${NC}" >&2
|
||
echo "先に図解を生成してください。" >&2
|
||
exit 1
|
||
fi
|
||
|
||
if [ -n "$SLUG" ]; then
|
||
DOMAIN="diagram-${SLUG}.surge.sh"
|
||
else
|
||
DOMAIN="diagram-$(date +%y%m%d%H%M).surge.sh"
|
||
fi
|
||
|
||
# このスクリプトは <ルート>/.claude/skills/creating-visual-explainers/scripts/ に置かれる前提。
|
||
# 4階層上 = このスキル一式が置かれているリポジトリのルート
|
||
ROOT_DIR="$(cd "$(dirname "$0")/../../../.." && pwd)"
|
||
|
||
FB_URL_FILE="$ROOT_DIR/fb-tool-url.txt"
|
||
if [ ! -f "$FB_URL_FILE" ]; then
|
||
echo -e "${RED}エラー: fb-tool-url.txt が見つかりません${NC}" >&2
|
||
echo "チャット欄で「セットアップして」と伝えてください。" >&2
|
||
exit 1
|
||
fi
|
||
FB_URL=$(cat "$FB_URL_FILE")
|
||
|
||
FB_TOKEN_FILE="$ROOT_DIR/fb-api-token.txt"
|
||
if [ ! -f "$FB_TOKEN_FILE" ]; then
|
||
echo -e "${RED}エラー: fb-api-token.txt が見つかりません${NC}" >&2
|
||
echo "セットアップが完了していない可能性があります。チャット欄で「セットアップして」と伝えてください。" >&2
|
||
exit 1
|
||
fi
|
||
API_TOKEN=$(cat "$FB_TOKEN_FILE")
|
||
|
||
if [[ ! "$FB_URL" =~ ^https:// ]]; then
|
||
echo -e "${RED}エラー: fb-tool-url.txt の URL が https:// で始まっていません${NC}" >&2
|
||
exit 1
|
||
fi
|
||
if [[ "$FB_URL" =~ [\\|\&$'\n'] ]]; then
|
||
echo -e "${RED}エラー: fb-tool-url.txt に不正な文字が含まれています${NC}" >&2
|
||
exit 1
|
||
fi
|
||
if [[ "$API_TOKEN" =~ [\\|\&$'\n'\ ] ]]; then
|
||
echo -e "${RED}エラー: fb-api-token.txt に不正な文字が含まれています${NC}" >&2
|
||
exit 1
|
||
fi
|
||
|
||
if ! grep -q '</body>' "$HTML_FILE"; then
|
||
echo -e "${RED}エラー: $HTML_FILE に </body> タグが見つかりません${NC}" >&2
|
||
echo "HTML ファイルの構造が壊れている可能性があります。" >&2
|
||
exit 1
|
||
fi
|
||
|
||
TEMP_DIR=$(mktemp -d)
|
||
trap 'rm -rf "$TEMP_DIR"' EXIT
|
||
|
||
SNIPPET="<script src=\"${FB_URL}/widget.js\" data-token=\"${API_TOKEN}\"></script></body>"
|
||
|
||
# 最後の </body> だけを置換する。図解の題材が HTML やコードだと本文中にも
|
||
# </body> が現れうるため、一括置換すると script タグが複数挿し込まれて壊れる。
|
||
awk -v snippet="$SNIPPET" '
|
||
{ line[NR] = $0; if (index($0, "</body>")) last = NR }
|
||
END {
|
||
for (i = 1; i <= NR; i++) {
|
||
if (i == last) {
|
||
# 該当行の最後の </body> を置換する（sub は先頭一致なので位置を自力で求める）
|
||
s = line[i]; pos = 0; from = 1
|
||
while ((p = index(substr(s, from), "</body>")) > 0) {
|
||
pos = from + p - 1
|
||
from = pos + 7
|
||
}
|
||
printf "%s%s%s\n", substr(s, 1, pos - 1), snippet, substr(s, pos + 7)
|
||
} else {
|
||
print line[i]
|
||
}
|
||
}
|
||
}
|
||
' "$HTML_FILE" > "$TEMP_DIR/index.html"
|
||
|
||
printf "User-agent: *\nDisallow: /\n" > "$TEMP_DIR/robots.txt"
|
||
|
||
echo -e "${YELLOW}公開中...${NC}"
|
||
npx --yes surge "$TEMP_DIR" --domain "$DOMAIN"
|
||
|
||
touch "$ROOT_DIR/deploy-history.log"
|
||
echo "$(date '+%Y-%m-%d %H:%M:%S') | https://${DOMAIN}" >> "$ROOT_DIR/deploy-history.log"
|
||
|
||
echo ""
|
||
echo -e "${GREEN}完了！${NC}"
|
||
echo "URL: https://${DOMAIN}"
|
||
|
||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||
echo "https://${DOMAIN}" | pbcopy
|
||
echo -e "${GREEN}URLをクリップボードにコピーしました${NC}"
|
||
open "https://${DOMAIN}"
|
||
elif command -v clip.exe &>/dev/null; then
|
||
echo -n "https://${DOMAIN}" | clip.exe
|
||
echo -e "${GREEN}URLをクリップボードにコピーしました${NC}"
|
||
start "https://${DOMAIN}" 2>/dev/null || true
|
||
elif command -v xdg-open &>/dev/null; then
|
||
xdg-open "https://${DOMAIN}"
|
||
fi
|
||
|
||
echo -e "${YELLOW}削除するとき: npx surge teardown ${DOMAIN}${NC}"
|