initial commit

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-30 21:22:21 +09:00
commit 6cba1f1351
47 changed files with 13482 additions and 0 deletions
@@ -0,0 +1,125 @@
+#!/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}"