API Gateway WebSocket を使ってリアルタイム共同お絵描きアプリを作ってみた

import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as dynamodb from 'aws-cdk-lib/aws-dynamodb';
import * as go from '@aws-cdk/aws-lambda-go-alpha';
import * as apigatewayv2 from 'aws-cdk-lib/aws-apigatewayv2';
import { WebSocketLambdaIntegration } from 'aws-cdk-lib/aws-apigatewayv2-integrations';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as origins from 'aws-cdk-lib/aws-cloudfront-origins';
import * as iam from 'aws-cdk-lib/aws-iam';
import * as path from 'path';

/**
 * リアルタイム共同お絵描きアプリのCDKスタック
 */
export class RealtimeDrawingStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // ========================================
    // DynamoDB
    // ========================================
    const connectionsTable = new dynamodb.Table(this, 'ConnectionsTable', {
      partitionKey: {
        name: 'connectionId',
        type: dynamodb.AttributeType.STRING,
      },
      billingMode: dynamodb.BillingMode.PAY_PER_REQUEST, // 従量課金モード
      removalPolicy: cdk.RemovalPolicy.DESTROY, // スタック削除時にテーブルも削除
      timeToLiveAttribute: 'ttl', // 接続情報の自動削除用TTL属性
    });

    // Lambda関数用の共通環境変数
    const lambdaEnvironment = {
      CONNECTIONS_TABLE_NAME: connectionsTable.tableName,
    };

    // ========================================
    // Lambda関数（Go）
    // ========================================
    const connectHandler = new go.GoFunction(this, 'ConnectHandler', {
      entry: path.join(__dirname, '../../backend/connect'),
      runtime: cdk.aws_lambda.Runtime.PROVIDED_AL2023,
      architecture: cdk.aws_lambda.Architecture.ARM_64,
      timeout: cdk.Duration.seconds(10),
      environment: lambdaEnvironment,
    });

    const disconnectHandler = new go.GoFunction(this, 'DisconnectHandler', {
      entry: path.join(__dirname, '../../backend/disconnect'),
      runtime: cdk.aws_lambda.Runtime.PROVIDED_AL2023,
      architecture: cdk.aws_lambda.Architecture.ARM_64,
      timeout: cdk.Duration.seconds(10),
      environment: lambdaEnvironment,
    });

    const drawHandler = new go.GoFunction(this, 'DrawHandler', {
      entry: path.join(__dirname, '../../backend/draw'),
      runtime: cdk.aws_lambda.Runtime.PROVIDED_AL2023,
      architecture: cdk.aws_lambda.Architecture.ARM_64,
      timeout: cdk.Duration.seconds(10),
      environment: lambdaEnvironment,
    });

    const defaultHandler = new go.GoFunction(this, 'DefaultHandler', {
      entry: path.join(__dirname, '../../backend/default'),
      runtime: cdk.aws_lambda.Runtime.PROVIDED_AL2023,
      architecture: cdk.aws_lambda.Architecture.ARM_64,
      timeout: cdk.Duration.seconds(10),
      environment: lambdaEnvironment,
    });

    // DynamoDBへのアクセス権限
    connectionsTable.grantReadWriteData(connectHandler);
    connectionsTable.grantReadWriteData(disconnectHandler);
    connectionsTable.grantReadWriteData(drawHandler);

    // ========================================
    // API Gateway WebSocket API
    // ========================================

    /**
     * WebSocket API - クライアントとの双方向通信を実現
     */
    const webSocketApi = new apigatewayv2.WebSocketApi(this, 'DrawingWebSocketApi', {
      apiName: 'DrawingWebSocketApi',
      // $connectルート: 接続確立時
      connectRouteOptions: {
        integration: new WebSocketLambdaIntegration('ConnectIntegration', connectHandler),
      },
      // $disconnectルート: 切断時
      disconnectRouteOptions: {
        integration: new WebSocketLambdaIntegration('DisconnectIntegration', disconnectHandler),
      },
      // $defaultルート: ルートが見つからない時
      defaultRouteOptions: {
        integration: new WebSocketLambdaIntegration('DefaultIntegration', defaultHandler),
      },
    });

    // カスタムルートの追加
    webSocketApi.addRoute('draw', {
      integration: new WebSocketLambdaIntegration('DrawIntegration', drawHandler),
    });

    webSocketApi.addRoute('clear', {
      integration: new WebSocketLambdaIntegration('ClearIntegration', drawHandler),
    });

    /**
     * WebSocket Stage
     * stageName: 'v1' - APIバージョン管理
     * autoDeploy: true - コード変更時に自動デプロイ
     */
    const webSocketStage = new apigatewayv2.WebSocketStage(this, 'WebSocketStage', {
      webSocketApi,
      stageName: 'v1',
      autoDeploy: true,
    });

    /**
     * WebSocket APIへの接続権限を付与
     * Lambda関数が@connections APIを使用するために必要
     */
    const webSocketPolicy = new iam.PolicyStatement({
      actions: ['execute-api:ManageConnections'],
      resources: [
        `arn:aws:execute-api:${this.region}:${this.account}:${webSocketApi.apiId}/${webSocketStage.stageName}/*`,
      ],
    });

    connectHandler.addToRolePolicy(webSocketPolicy);
    disconnectHandler.addToRolePolicy(webSocketPolicy);
    drawHandler.addToRolePolicy(webSocketPolicy);

    // WebSocketエンドポイントをLambda環境変数に設定
    const webSocketEndpoint = `${webSocketApi.apiId}.execute-api.${this.region}.amazonaws.com/${webSocketStage.stageName}`;
    connectHandler.addEnvironment('WEBSOCKET_API_ENDPOINT', webSocketEndpoint);
    disconnectHandler.addEnvironment('WEBSOCKET_API_ENDPOINT', webSocketEndpoint);
    drawHandler.addEnvironment('WEBSOCKET_API_ENDPOINT', webSocketEndpoint);

    // ========================================
    // フロントエンド: S3 + CloudFront
    // ========================================

    // S3バケット（非公開）
    const websiteBucket = new s3.Bucket(this, 'WebsiteBucket', {
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
    });

    // CloudFront Distribution
    const distribution = new cloudfront.Distribution(this, 'Distribution', {
      defaultBehavior: {
        // S3BucketOrigin.withOriginAccessControl で以下が自動設定される：
        // - OAC（Origin Access Control）の作成
        // - S3バケットポリシーの追加
        // - CloudFrontとS3の紐付け
        origin: origins.S3BucketOrigin.withOriginAccessControl(websiteBucket),
        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
        allowedMethods: cloudfront.AllowedMethods.ALLOW_GET_HEAD_OPTIONS,
        cachedMethods: cloudfront.CachedMethods.CACHE_GET_HEAD_OPTIONS,
        compress: true, // Gzip圧縮を有効化
      },
      defaultRootObject: 'index.html',
      // SPA対応：すべてのエラーをindex.htmlにリダイレクト
      errorResponses: [
        {
          httpStatus: 403,
          responseHttpStatus: 200,
          responsePagePath: '/index.html',
          ttl: cdk.Duration.minutes(5),
        },
        {
          httpStatus: 404,
          responseHttpStatus: 200,
          responsePagePath: '/index.html',
          ttl: cdk.Duration.minutes(5),
        },
      ],
    });

    // フロントエンドのデプロイ
    new s3deploy.BucketDeployment(this, 'DeployWebsite', {
      sources: [s3deploy.Source.asset(path.join(__dirname, '../../frontend/build'))],
      destinationBucket: websiteBucket,
      distribution,
      distributionPaths: ['/*'], // デプロイ時にキャッシュをクリア
    });

    // CloudFormation Outputs
    new cdk.CfnOutput(this, 'WebSocketURL', {
      value: webSocketStage.url,
      description: 'WebSocket API URL',
    });

    new cdk.CfnOutput(this, 'WebsiteURL', {
      value: `https://${distribution.distributionDomainName}`,
      description: 'CloudFront Website URL',
    });
  }
}

package main

import (
	"context"
	"fmt"
	"os"
	"time"

	"github.com/aws/aws-lambda-go/events"
	"github.com/aws/aws-lambda-go/lambda"
	"github.com/aws/aws-sdk-go-v2/config"
	"github.com/aws/aws-sdk-go-v2/service/dynamodb"
	"github.com/aws/aws-sdk-go-v2/service/dynamodb/types"
)

var (
	dynamoClient *dynamodb.Client
	tableName    string
)

func init() {
	cfg, err := config.LoadDefaultConfig(context.TODO())
	if err != nil {
		panic(fmt.Sprintf("unable to load SDK config: %v", err))
	}
	dynamoClient = dynamodb.NewFromConfig(cfg)
	tableName = os.Getenv("CONNECTIONS_TABLE_NAME")
}

func handler(ctx context.Context, request events.APIGatewayWebsocketProxyRequest) (events.APIGatewayProxyResponse, error) {
	connectionID := request.RequestContext.ConnectionID
	timestamp := time.Now().Unix()
	ttl := timestamp + 86400 // 24時間後

	fmt.Printf("Connect event: connectionId=%s\n", connectionID)

	// DynamoDBに接続情報を保存
	_, err := dynamoClient.PutItem(ctx, &dynamodb.PutItemInput{
		TableName: &tableName,
		Item: map[string]types.AttributeValue{
			"connectionId": &types.AttributeValueMemberS{Value: connectionID},
			"timestamp":    &types.AttributeValueMemberN{Value: fmt.Sprintf("%d", timestamp)},
			"ttl":          &types.AttributeValueMemberN{Value: fmt.Sprintf("%d", ttl)},
		},
	})

	if err != nil {
		fmt.Printf("Error saving connection: %v\n", err)
		return events.APIGatewayProxyResponse{
			StatusCode: 500,
			Body:       fmt.Sprintf("Failed to connect: %v", err),
		}, nil
	}

	return events.APIGatewayProxyResponse{
		StatusCode: 200,
		Body:       "Connected",
	}, nil
}

func main() {
	lambda.Start(handler)
}

package main

import (
	"context"
	"fmt"
	"os"

	"github.com/aws/aws-lambda-go/events"
	"github.com/aws/aws-lambda-go/lambda"
	"github.com/aws/aws-sdk-go-v2/config"
	"github.com/aws/aws-sdk-go-v2/service/dynamodb"
	"github.com/aws/aws-sdk-go-v2/service/dynamodb/types"
)

var (
	dynamoClient *dynamodb.Client
	tableName    string
)

func init() {
	cfg, err := config.LoadDefaultConfig(context.TODO())
	if err != nil {
		panic(fmt.Sprintf("unable to load SDK config: %v", err))
	}
	dynamoClient = dynamodb.NewFromConfig(cfg)
	tableName = os.Getenv("CONNECTIONS_TABLE_NAME")
}

func handler(ctx context.Context, request events.APIGatewayWebsocketProxyRequest) (events.APIGatewayProxyResponse, error) {
	connectionID := request.RequestContext.ConnectionID

	fmt.Printf("Disconnect event: connectionId=%s\n", connectionID)

	// DynamoDBから接続情報を削除
	_, err := dynamoClient.DeleteItem(ctx, &dynamodb.DeleteItemInput{
		TableName: &tableName,
		Key: map[string]types.AttributeValue{
			"connectionId": &types.AttributeValueMemberS{Value: connectionID},
		},
	})

	if err != nil {
		fmt.Printf("Error deleting connection: %v\n", err)
		return events.APIGatewayProxyResponse{
			StatusCode: 500,
			Body:       fmt.Sprintf("Failed to disconnect: %v", err),
		}, nil
	}

	return events.APIGatewayProxyResponse{
		StatusCode: 200,
		Body:       "Disconnected",
	}, nil
}

func main() {
	lambda.Start(handler)
}

package main

import (
	"context"
	"encoding/json"
	"fmt"

	"github.com/aws/aws-lambda-go/events"
	"github.com/aws/aws-lambda-go/lambda"
)

type ErrorResponse struct {
	Error            string   `json:"error"`
	Message          string   `json:"message"`
	SupportedActions []string `json:"supportedActions"`
}

func handler(ctx context.Context, request events.APIGatewayWebsocketProxyRequest) (events.APIGatewayProxyResponse, error) {
	fmt.Printf("Default route triggered: %s\n", request.Body)

	var body map[string]interface{}
	json.Unmarshal([]byte(request.Body), &body)

	action := ""
	if val, ok := body["action"].(string); ok {
		action = val
	}

	response := ErrorResponse{
		Error:            "Unknown action",
		Message:          fmt.Sprintf("Action '%s' is not supported", action),
		SupportedActions: []string{"draw", "clear"},
	}

	responseBody, _ := json.Marshal(response)

	return events.APIGatewayProxyResponse{
		StatusCode: 400,
		Body:       string(responseBody),
	}, nil
}

func main() {
	lambda.Start(handler)
}

package main

import (
	"context"
	"fmt"
	"os"
	"strings"

	"github.com/aws/aws-lambda-go/events"
	"github.com/aws/aws-lambda-go/lambda"
	"github.com/aws/aws-sdk-go-v2/config"
	"github.com/aws/aws-sdk-go-v2/feature/dynamodb/attributevalue"
	"github.com/aws/aws-sdk-go-v2/service/apigatewaymanagementapi"
	"github.com/aws/aws-sdk-go-v2/service/dynamodb"
	"github.com/aws/aws-sdk-go-v2/service/dynamodb/types"
)

var (
	dynamoClient *dynamodb.Client
	apiGwClient  *apigatewaymanagementapi.Client
	tableName    string
)

type Connection struct {
	ConnectionID string `dynamodbav:"connectionId"`
}

func init() {
	cfg, err := config.LoadDefaultConfig(context.TODO())
	if err != nil {
		panic(fmt.Sprintf("unable to load SDK config: %v", err))
	}
	dynamoClient = dynamodb.NewFromConfig(cfg)
	tableName = os.Getenv("CONNECTIONS_TABLE_NAME")
	endpoint := os.Getenv("WEBSOCKET_API_ENDPOINT")

	// https:// を明示的に追加
	fullEndpoint := "https://" + endpoint
	fmt.Printf("WebSocket endpoint: %s\n", fullEndpoint)

	apiGwClient = apigatewaymanagementapi.NewFromConfig(cfg, func(o *apigatewaymanagementapi.Options) {
		o.BaseEndpoint = &fullEndpoint
	})
}

func handler(ctx context.Context, request events.APIGatewayWebsocketProxyRequest) (events.APIGatewayProxyResponse, error) {
	connectionID := request.RequestContext.ConnectionID

	fmt.Printf("Draw event: connectionId=%s, body=%s\n", connectionID, request.Body)

	// すべての接続を取得
	result, err := dynamoClient.Scan(ctx, &dynamodb.ScanInput{
		TableName: &tableName,
	})
	if err != nil {
		fmt.Printf("Error scanning connections: %v\n", err)
		return events.APIGatewayProxyResponse{
			StatusCode: 500,
			Body:       fmt.Sprintf("Failed to get connections: %v", err),
		}, nil
	}

	var connections []Connection
	err = attributevalue.UnmarshalListOfMaps(result.Items, &connections)
	if err != nil {
		fmt.Printf("Error unmarshaling connections: %v\n", err)
		return events.APIGatewayProxyResponse{
			StatusCode: 500,
			Body:       fmt.Sprintf("Failed to parse connections: %v", err),
		}, nil
	}

	fmt.Printf("Broadcasting to %d connections\n", len(connections))

	messageData := []byte(request.Body)

	for _, conn := range connections {
		// 自分自身には送信しない
		if conn.ConnectionID == connectionID {
			continue
		}

		_, err := apiGwClient.PostToConnection(ctx, &apigatewaymanagementapi.PostToConnectionInput{
			ConnectionId: &conn.ConnectionID,
			Data:         messageData,
		})

		if err != nil {
			fmt.Printf("Failed to send to %s: %v\n", conn.ConnectionID, err)

			// 410 Gone エラーの場合、接続を削除
			if isGoneError(err) {
				fmt.Printf("Removing stale connection: %s\n", conn.ConnectionID)
				dynamoClient.DeleteItem(ctx, &dynamodb.DeleteItemInput{
					TableName: &tableName,
					Key: map[string]types.AttributeValue{
						"connectionId": &types.AttributeValueMemberS{Value: conn.ConnectionID},
					},
				})
			}
		}
	}

	return events.APIGatewayProxyResponse{
		StatusCode: 200,
		Body:       "Message sent",
	}, nil
}

func isGoneError(err error) bool {
	if err == nil {
		return false
	}
	errStr := err.Error()
	return strings.Contains(errStr, "GoneException") || strings.Contains(errStr, "410")
}

func main() {
	lambda.Start(handler)
}

import React, { useEffect, useRef, useState, useCallback } from 'react';
import './App.css';

const WS_URL = process.env.REACT_APP_WS_URL || '';

interface Point {
  x: number;
  y: number;
}

interface DrawData {
  action: 'draw';
  startX: number;
  startY: number;
  endX: number;
  endY: number;
  color: string;
  lineWidth: number;
}

interface ClearData {
  action: 'clear';
}

type Message = DrawData | ClearData;

const COLORS = [
  { name: '黒', value: '#000000' },
  { name: '赤', value: '#FF0000' },
  { name: '青', value: '#0000FF' },
  { name: '緑', value: '#00FF00' },
  { name: '黄', value: '#FFFF00' },
  { name: 'オレンジ', value: '#FFA500' },
  { name: '紫', value: '#800080' },
  { name: 'ピンク', value: '#FF69B4' },
];

const LINE_WIDTHS = [
  { name: '細', value: 2 },
  { name: '普通', value: 5 },
  { name: '太', value: 10 },
  { name: '極太', value: 20 },
];

function App() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const wsRef = useRef<WebSocket | null>(null);
  const [isDrawing, setIsDrawing] = useState(false);
  const [lastPoint, setLastPoint] = useState<Point | null>(null);
  const [selectedColor, setSelectedColor] = useState('#000000');
  const [selectedLineWidth, setSelectedLineWidth] = useState(5);
  const [isConnected, setIsConnected] = useState(false);

  // Canvasに線を描画
  const drawLine = useCallback(
    (
      startX: number,
      startY: number,
      endX: number,
      endY: number,
      color: string,
      lineWidth: number
    ) => {
      const canvas = canvasRef.current;
      if (!canvas) return;

      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      ctx.strokeStyle = color;
      ctx.lineWidth = lineWidth;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';

      ctx.beginPath();
      ctx.moveTo(startX, startY);
      ctx.lineTo(endX, endY);
      ctx.stroke();
    },
    []
  );

  // Canvas全消去
  const clearCanvas = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }, []);

  // WebSocket接続
  useEffect(() => {
    if (!WS_URL) {
      console.error('REACT_APP_WS_URL is not set');
      return;
    }

    console.log('Connecting to:', WS_URL);
    const ws = new WebSocket(WS_URL);

    ws.onopen = () => {
      console.log('WebSocket接続成功');
      setIsConnected(true);
    };

    ws.onclose = () => {
      console.log('WebSocket切断');
      setIsConnected(false);
    };

    ws.onerror = (error) => {
      console.error('WebSocketエラー:', error);
    };

    ws.onmessage = (event) => {
      const message: Message = JSON.parse(event.data);

      if (message.action === 'draw') {
        drawLine(
          message.startX,
          message.startY,
          message.endX,
          message.endY,
          message.color,
          message.lineWidth
        );
      } else if (message.action === 'clear') {
        clearCanvas();
      }
    };

    wsRef.current = ws;

    return () => {
      ws.close();
    };
  }, [drawLine, clearCanvas]);

  // マウスダウン
  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
    const rect = canvasRef.current?.getBoundingClientRect();
    if (!rect) return;

    setIsDrawing(true);
    setLastPoint({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  };

  // マウスムーブ
  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
    if (!isDrawing || !lastPoint) return;

    const rect = canvasRef.current?.getBoundingClientRect();
    if (!rect) return;

    const currentPoint = {
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    };

    // ローカルに描画
    drawLine(
      lastPoint.x,
      lastPoint.y,
      currentPoint.x,
      currentPoint.y,
      selectedColor,
      selectedLineWidth
    );

    // WebSocketで送信
    if (wsRef.current?.readyState === WebSocket.OPEN) {
      const message: DrawData = {
        action: 'draw',
        startX: lastPoint.x,
        startY: lastPoint.y,
        endX: currentPoint.x,
        endY: currentPoint.y,
        color: selectedColor,
        lineWidth: selectedLineWidth,
      };
      wsRef.current.send(JSON.stringify(message));
    }

    setLastPoint(currentPoint);
  };

  // マウスアップ
  const handleMouseUp = () => {
    setIsDrawing(false);
    setLastPoint(null);
  };

  // マウスリーブ
  const handleMouseLeave = () => {
    setIsDrawing(false);
    setLastPoint(null);
  };

  // 全消去
  const handleClear = () => {
    clearCanvas();

    if (wsRef.current?.readyState === WebSocket.OPEN) {
      const message: ClearData = {
        action: 'clear',
      };
      wsRef.current.send(JSON.stringify(message));
    }
  };

  return (
    <div className="App">
      <header className="header">
        <h1>🎨 リアルタイム共同お絵描きアプリ</h1>
        <div className="connection-status">
          {isConnected ? (
            <span className="status-connected">● 接続中</span>
          ) : (
            <span className="status-disconnected">● 切断</span>
          )}
        </div>
      </header>

      <div className="toolbar">
        <div className="tool-group">
          <label>色:</label>
          <div className="color-picker">
            {COLORS.map((color) => (
              <button
                key={color.value}
                className={`color-button ${selectedColor === color.value ? 'selected' : ''}`}
                style={{ backgroundColor: color.value }}
                onClick={() => setSelectedColor(color.value)}
                title={color.name}
              />
            ))}
          </div>
        </div>

        <div className="tool-group">
          <label>太さ:</label>
          <div className="width-picker">
            {LINE_WIDTHS.map((width) => (
              <button
                key={width.value}
                className={`width-button ${selectedLineWidth === width.value ? 'selected' : ''}`}
                onClick={() => setSelectedLineWidth(width.value)}
              >
                {width.name}
              </button>
            ))}
          </div>
        </div>

        <div className="tool-group">
          <button className="clear-button" onClick={handleClear}>
            🗑️ 全消去
          </button>
        </div>
      </div>

      <div className="canvas-container">
        <canvas
          ref={canvasRef}
          width={1200}
          height={700}
          className="canvas"
          onMouseDown={handleMouseDown}
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
          onMouseLeave={handleMouseLeave}
        />
      </div>

      <footer className="footer">
        <p>友達と一緒に絵を描こう! 🖌️</p>
      </footer>
    </div>
  );
}

export default App;

/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

/* メインコンテナ */
.App {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  min-height: 100vh;
}

/* ヘッダー */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header h1 {
  font-size: 28px;
  color: #333;
  margin: 0;
}

.connection-status {
  font-size: 16px;
  font-weight: bold;
}

.status-connected {
  color: #10b981;
}

.status-disconnected {
  color: #ef4444;
}

/* ツールバー */
.toolbar {
  display: flex;
  gap: 30px;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
}

.tool-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-group label {
  font-weight: bold;
  color: #555;
  font-size: 16px;
}

/* 色選択 */
.color-picker {
  display: flex;
  gap: 8px;
}

.color-button {
  width: 40px;
  height: 40px;
  border: 3px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}

.color-button:hover {
  transform: scale(1.1);
}

.color-button.selected {
  border-color: #333;
  box-shadow: 0 0 0 2px white, 0 0 0 4px #333;
}

/* 線の太さ選択 */
.width-picker {
  display: flex;
  gap: 8px;
}

.width-button {
  padding: 8px 16px;
  border: 2px solid #ddd;
  border-radius: 5px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s;
}

.width-button:hover {
  background: #f3f4f6;
  border-color: #667eea;
}

.width-button.selected {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* 全消去ボタン */
.clear-button {
  padding: 10px 20px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.clear-button:hover {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.clear-button:active {
  transform: translateY(0);
}

/* キャンバスコンテナ */
.canvas-container {
  background: white;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  padding: 10px;
  margin-bottom: 20px;
}

/* キャンバス */
.canvas {
  display: block;
  border: 2px solid #e5e7eb;
  border-radius: 5px;
  cursor: crosshair;
  touch-action: none;
  /* タッチデバイスでのスクロール防止 */
}

/* フッター */
.footer {
  color: white;
  font-size: 18px;
  text-align: center;
  margin-top: 20px;
}

.footer p {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 1280px) {
  .canvas {
    width: 100%;
    height: auto;
  }

  .header h1 {
    font-size: 20px;
  }

  .toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .App {
    padding: 10px;
  }

  .header {
    flex-direction: column;
    gap: 10px;
  }

  .header h1 {
    font-size: 18px;
  }

  .color-button {
    width: 35px;
    height: 35px;
  }

  .width-button {
    padding: 6px 12px;
    font-size: 12px;
  }
}