Init.

AspectCalc.js

@@ -0,0 +1,149 @@
+/**
+ * AspectCalc.js - アスペクト比計算ライブラリ
+ * 縦解像度と横解像度から3種類のアスペクト比を計算します
+ *
+ * MIT License
+ * 
+ * Copyright (c) 2025 SenY
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+class AspectCalc {
+    /**
+     * 最大公約数を計算する関数
+     * @param {number} a - 数値1
+     * @param {number} b - 数値2
+     * @returns {number} 最大公約数
+     */
+    static gcd(a, b) {
+        while (b !== 0) {
+            let temp = b;
+            b = a % b;
+            a = temp;
+        }
+        return a;
+    }
+
+    /**
+     * 2つの数値の最大公約数で割って、最も簡単な整数比を求める
+     * @param {number} width - 幅
+     * @param {number} height - 高さ
+     * @returns {Object} {x: number, y: number} の形式
+     */
+    static getIntegerRatio(width, height) {
+        const divisor = this.gcd(width, height);
+        return {
+            x: width / divisor,
+            y: height / divisor
+        };
+    }
+
+    /**
+     * 縦横共に20以下の整数比で表せる最も近似のアスペクト比を求める
+     * @param {number} width - 幅
+     * @param {number} height - 高さ
+     * @returns {Object} {x: number, y: number} の形式
+     */
+    static getApproximateRatio(width, height) {
+        const targetRatio = width / height;
+        let bestRatio = { x: 1, y: 1 };
+        let minError = Math.abs(targetRatio - 1);
+
+        // 1から20までの全ての組み合わせを試す
+        for (let x = 1; x <= 20; x++) {
+            for (let y = 1; y <= 20; y++) {
+                const ratio = x / y;
+                const error = Math.abs(targetRatio - ratio);
+                if (error < minError) {
+                    minError = error;
+                    bestRatio = { x, y };
+                }
+            }
+        }
+
+        return bestRatio;
+    }
+
+    /**
+     * 一般的なディスプレイアスペクト比の中で最も近似のものを求める
+     * @param {number} width - 幅
+     * @param {number} height - 高さ
+     * @returns {Object} {x: number, y: number} の形式
+     */
+    static getStandardRatio(width, height) {
+        const targetRatio = width / height;
+        
+        // 一般的なアスペクト比のリスト（正規化された値）
+        const standardRatios = [
+            { x: 1, y: 1 },      // 1:1
+            { x: 16, y: 9 },     // 16:9
+            { x: 4, y: 3 },      // 4:3
+            { x: 8, y: 5 },      // 8:5
+            { x: 3, y: 2 },      // 3:2
+            { x: 5, y: 4 },      // 5:4
+            { x: 9, y: 16 },     // 9:16 (16:9の逆)
+            { x: 3, y: 4 },      // 3:4 (4:3の逆)
+            { x: 5, y: 8 },      // 5:8 (8:5の逆)
+            { x: 2, y: 3 },      // 2:3 (3:2の逆)
+            { x: 4, y: 5 }       // 4:5 (5:4の逆)
+        ];
+
+        let bestRatio = standardRatios[0];
+        let minError = Math.abs(targetRatio - (bestRatio.x / bestRatio.y));
+
+        for (const ratio of standardRatios) {
+            const error = Math.abs(targetRatio - (ratio.x / ratio.y));
+            if (error < minError) {
+                minError = error;
+                bestRatio = ratio;
+            }
+        }
+
+        return bestRatio;
+    }
+
+    /**
+     * メイン関数：3種類のアスペクト比を計算して返す
+     * @param {number} width - 幅
+     * @param {number} height - 高さ
+     * @returns {Object} 3種類のアスペクト比を含むオブジェクト
+     */
+    static calculate(width, height) {
+        if (width <= 0 || height <= 0) {
+            throw new Error('幅と高さは正の数である必要があります');
+        }
+
+        return {
+            integer: this.getIntegerRatio(width, height),
+            approximate: this.getApproximateRatio(width, height),
+            standard: this.getStandardRatio(width, height)
+        };
+    }
+}
+
+// モジュールエ��スポート対応
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = AspectCalc;
+}
+
+// グローバル変数としても利用可能にする
+if (typeof window !== 'undefined') {
+    window.AspectCalc = AspectCalc;
+}

index.html

@@ -1,19 +1,239 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AspectCalc サンプル</title>
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <style>
+        .drop-zone {
+            border: 2px dashed #dee2e6;
+            border-radius: 10px;
+            padding: 2rem;
+            text-align: center;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        
+        .drop-zone:hover {
+            border-color: #0d6efd;
+            background-color: #f8f9fa;
+        }
+        
+        .drop-zone.dragover {
+            border-color: #0d6efd;
+            background-color: #e7f3ff;
+        }
+        
+        .image-preview {
+            max-width: 100%;
+            max-height: 300px;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        
+        .aspect-ratio-card {
+            transition: transform 0.2s ease;
+        }
+        
+        .aspect-ratio-card:hover {
+            transform: translateY(-2px);
+        }
+        
+        .ratio-display {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #0d6efd;
+        }
+        
+        .copy-btn {
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+        
+        .aspect-ratio-card:hover .copy-btn {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body class="bg-light">
+    <div class="container py-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-10">
+                <!-- ヘッダー -->
+                <div class="text-center mb-5">
+                    <h1 class="display-4 fw-bold text-primary">
+                        <i class="fas fa-calculator me-3"></i>AspectCalc
+                    </h1>
+                    <p class="lead text-muted">画像の解像度からアスペクト比を計算するツール</p>
+                </div>
+
+                <!-- メインカード -->
+                <div class="card shadow-lg border-0">
+                    <div class="card-body p-4">
+                        <!-- 入力セクション -->
+                        <div class="row">
+                            <div class="col-md-6">
+                                <h4 class="mb-3">
+                                    <i class="fas fa-upload me-2"></i>画像の入力
+                                </h4>
+                                
+                                <!-- ドラッグ&ドロップエリア -->
+                                <div class="drop-zone mb-3" id="dropZone">
+                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
+                                    <p class="mb-2">画像をドラッグ&ドロップ</p>
+                                    <p class="text-muted small">または</p>
+                                    <button class="btn btn-outline-primary" id="fileSelectBtn">
+                                        <i class="fas fa-folder-open me-2"></i>ファイルを選択
+                                    </button>
+                                    <input type="file" id="fileInput" accept="image/*" class="d-none">
+                                </div>
+                                
+                                <!-- クリップボード貼り付け -->
+                                <div class="mb-3">
+                                    <button class="btn btn-outline-secondary w-100" id="pasteBtn">
+                                        <i class="fas fa-paste me-2"></i>Ctrl+V でクリップボードから貼り付け
+                                    </button>
+                                </div>
+                                
+                                <!-- 手動入力 -->
+                                <div class="card bg-light">
+                                    <div class="card-body">
+                                        <h6 class="card-title">
+                                            <i class="fas fa-keyboard me-2"></i>手動入力
+                                        </h6>
+                                        <div class="row g-2">
+                                            <div class="col-6">
+                                                <label for="widthInput" class="form-label small">幅 (px)</label>
+                                                <input type="number" class="form-control" id="widthInput" placeholder="1920" min="1">
+                                            </div>
+                                            <div class="col-6">
+                                                <label for="heightInput" class="form-label small">高さ (px)</label>
+                                                <input type="number" class="form-control" id="heightInput" placeholder="1080" min="1">
+                                            </div>
+                                        </div>
+                                        <button class="btn btn-primary btn-sm mt-2 w-100" id="calculateBtn">
+                                            <i class="fas fa-calculator me-2"></i>計算
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- プレビューエリア -->
+                            <div class="col-md-6">
+                                <h4 class="mb-3">
+                                    <i class="fas fa-eye me-2"></i>プレビュー
+                                </h4>
+                                <div id="previewArea" class="text-center">
+                                    <div class="text-muted">
+                                        <i class="fas fa-image fa-3x mb-3"></i>
+                                        <p>画像を選択してください</p>
+                                    </div>
+                                </div>
+                                
+                                <!-- 解像度情報 -->
+                                <div id="resolutionInfo" class="mt-3 d-none">
+                                    <div class="alert alert-info">
+                                        <h6 class="alert-heading">
+                                            <i class="fas fa-info-circle me-2"></i>解像度情報
+                                        </h6>
+                                        <p class="mb-0">
+                                            幅: <span id="actualWidth" class="fw-bold">-</span>px<br>
+                                            高さ: <span id="actualHeight" class="fw-bold">-</span>px
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 結果表示エリア -->
+                <div id="resultsArea" class="mt-4 d-none">
+                    <h4 class="mb-3">
+                        <i class="fas fa-chart-line me-2"></i>アスペクト比の結果
+                    </h4>
+                    <div class="row g-3">
+                        <!-- 整数比 -->
+                        <div class="col-md-4">
+                            <div class="card aspect-ratio-card h-100">
+                                <div class="card-body text-center">
+                                    <h5 class="card-title">
+                                        <i class="fas fa-hashtag me-2"></i>整数比
+                                    </h5>
+                                    <div class="ratio-display" id="integerRatio">-</div>
+                                    <p class="text-muted small mt-2">最大公約数で割った最も簡単な比</p>
+                                    <button class="btn btn-outline-primary btn-sm copy-btn" data-ratio="integer">
+                                        <i class="fas fa-copy me-1"></i>コピー
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- 近似比 -->
+                        <div class="col-md-4">
+                            <div class="card aspect-ratio-card h-100">
+                                <div class="card-body text-center">
+                                    <h5 class="card-title">
+                                        <i class="fas fa-search me-2"></i>近似比
+                                    </h5>
+                                    <div class="ratio-display" id="approximateRatio">-</div>
+                                    <p class="text-muted small mt-2">20以下の整数で最も近似の比</p>
+                                    <button class="btn btn-outline-primary btn-sm copy-btn" data-ratio="approximate">
+                                        <i class="fas fa-copy me-1"></i>コピー
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- 標準比 -->
+                        <div class="col-md-4">
+                            <div class="card aspect-ratio-card h-100">
+                                <div class="card-body text-center">
+                                    <h5 class="card-title">
+                                        <i class="fas fa-tv me-2"></i>標準比
+                                    </h5>
+                                    <div class="ratio-display" id="standardRatio">-</div>
+                                    <p class="text-muted small mt-2">一般的なディスプレイ比</p>
+                                    <button class="btn btn-outline-primary btn-sm copy-btn" data-ratio="standard">
+                                        <i class="fas fa-copy me-1"></i>コピー
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast通知 -->
+    <div class="toast-container position-fixed bottom-0 end-0 p-3">
+        <div id="toast" class="toast" role="alert">
+            <div class="toast-header">
+                <i class="fas fa-check-circle text-success me-2"></i>
+                <strong class="me-auto">成功</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" title="閉じる"></button>
+            </div>
+            <div class="toast-body" id="toastMessage">
+                コピーしました！
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap 5 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- AspectCalc.js -->
+    <script src="AspectCalc.js"></script>
+    
+    <!-- メインスクリプト -->
+    <script src="index.js"></script>
+</body>
 </html>

index.js

@@ -0,0 +1,288 @@
+/**
+ * AspectCalc サンプルページのメインスクリプト
+ */
+
+class AspectCalcApp {
+    constructor() {
+        this.initializeElements();
+        this.bindEvents();
+        this.setupClipboardPaste();
+    }
+
+    /**
+     * DOM要素の初期化
+     */
+    initializeElements() {
+        this.dropZone = document.getElementById('dropZone');
+        this.fileInput = document.getElementById('fileInput');
+        this.fileSelectBtn = document.getElementById('fileSelectBtn');
+        this.pasteBtn = document.getElementById('pasteBtn');
+        this.widthInput = document.getElementById('widthInput');
+        this.heightInput = document.getElementById('heightInput');
+        this.calculateBtn = document.getElementById('calculateBtn');
+        this.previewArea = document.getElementById('previewArea');
+        this.resolutionInfo = document.getElementById('resolutionInfo');
+        this.actualWidth = document.getElementById('actualWidth');
+        this.actualHeight = document.getElementById('actualHeight');
+        this.resultsArea = document.getElementById('resultsArea');
+        this.integerRatio = document.getElementById('integerRatio');
+        this.approximateRatio = document.getElementById('approximateRatio');
+        this.standardRatio = document.getElementById('standardRatio');
+        this.toast = document.getElementById('toast');
+        this.toastMessage = document.getElementById('toastMessage');
+    }
+
+    /**
+     * イベントリスナーの設定
+     */
+    bindEvents() {
+        // ファイル選択
+        this.fileSelectBtn.addEventListener('click', () => {
+            this.fileInput.click();
+        });
+
+        this.fileInput.addEventListener('change', (e) => {
+            this.handleFileSelect(e.target.files[0]);
+        });
+
+        // ドラッグ&ドロップ
+        this.dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            this.dropZone.classList.add('dragover');
+        });
+
+        this.dropZone.addEventListener('dragleave', () => {
+            this.dropZone.classList.remove('dragover');
+        });
+
+        this.dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            this.dropZone.classList.remove('dragover');
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                this.handleFileSelect(files[0]);
+            }
+        });
+
+        // 手動計算
+        this.calculateBtn.addEventListener('click', () => {
+            this.handleManualInput();
+        });
+
+        // Enterキーでの計算
+        this.widthInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                this.handleManualInput();
+            }
+        });
+
+        this.heightInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                this.handleManualInput();
+            }
+        });
+
+        // コピーボタン
+        document.querySelectorAll('.copy-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const ratioType = e.target.getAttribute('data-ratio');
+                this.copyRatio(ratioType);
+            });
+        });
+    }
+
+    /**
+     * クリップボード貼り付け機能の設定
+     */
+    setupClipboardPaste() {
+        // キーボードイベント（Ctrl+V）
+        document.addEventListener('keydown', (e) => {
+            if (e.ctrlKey && e.key === 'v') {
+                e.preventDefault();
+                this.handleClipboardPaste();
+            }
+        });
+
+        // 貼り付けボタン
+        this.pasteBtn.addEventListener('click', () => {
+            this.handleClipboardPaste();
+        });
+    }
+
+    /**
+     * ファイル選択の処理
+     */
+    handleFileSelect(file) {
+        if (!file || !file.type.startsWith('image/')) {
+            this.showToast('有効な画像ファイルを選択してください', 'error');
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            this.processImage(e.target.result, file.name);
+        };
+        reader.readAsDataURL(file);
+    }
+
+    /**
+     * クリップボード貼り付けの処理
+     */
+    async handleClipboardPaste() {
+        try {
+            const clipboardItems = await navigator.clipboard.read();
+            
+            for (const clipboardItem of clipboardItems) {
+                for (const type of clipboardItem.types) {
+                    if (type.startsWith('image/')) {
+                        const blob = await clipboardItem.getType(type);
+                        const reader = new FileReader();
+                        reader.onload = (e) => {
+                            this.processImage(e.target.result, 'クリップボード画像');
+                        };
+                        reader.readAsDataURL(blob);
+                        return;
+                    }
+                }
+            }
+            
+            this.showToast('クリップボードに画像が見つかりません', 'error');
+        } catch (error) {
+            console.error('クリップボード読み取りエラー:', error);
+            this.showToast('クリップボードの読み取りに失敗しました', 'error');
+        }
+    }
+
+    /**
+     * 手動入力の処理
+     */
+    handleManualInput() {
+        const width = parseInt(this.widthInput.value);
+        const height = parseInt(this.heightInput.value);
+
+        if (!width || !height || width <= 0 || height <= 0) {
+            this.showToast('有効な数値を入力してください', 'error');
+            return;
+        }
+
+        this.calculateAspectRatios(width, height);
+        this.showResults();
+    }
+
+    /**
+     * 画像の処理
+     */
+    processImage(imageSrc, fileName) {
+        const img = new Image();
+        img.onload = () => {
+            // プレビュー表示
+            this.showImagePreview(imageSrc, fileName);
+            
+            // 解像度情報表示
+            this.showResolutionInfo(img.width, img.height);
+            
+            // アスペクト比計算
+            this.calculateAspectRatios(img.width, img.height);
+            
+            // 結果表示
+            this.showResults();
+        };
+        img.onerror = () => {
+            this.showToast('画像の読み込みに失敗しました', 'error');
+        };
+        img.src = imageSrc;
+    }
+
+    /**
+     * 画像プレビューの表示
+     */
+    showImagePreview(imageSrc, fileName) {
+        this.previewArea.innerHTML = `
+            <div class="mb-2">
+                <img src="${imageSrc}" alt="プレビュー" class="image-preview">
+            </div>
+            <small class="text-muted">${fileName}</small>
+        `;
+    }
+
+    /**
+     * 解像度情報の表示
+     */
+    showResolutionInfo(width, height) {
+        this.actualWidth.textContent = width.toLocaleString();
+        this.actualHeight.textContent = height.toLocaleString();
+        this.resolutionInfo.classList.remove('d-none');
+    }
+
+    /**
+     * アスペクト比の計算
+     */
+    calculateAspectRatios(width, height) {
+        try {
+            const results = AspectCalc.calculate(width, height);
+            
+            // 結果の保存（コピー機能用）
+            this.currentResults = results;
+            
+            // 表示更新
+            this.integerRatio.textContent = `${results.integer.x}:${results.integer.y}`;
+            this.approximateRatio.textContent = `${results.approximate.x}:${results.approximate.y}`;
+            this.standardRatio.textContent = `${results.standard.x}:${results.standard.y}`;
+            
+        } catch (error) {
+            console.error('アスペクト比計算エラー:', error);
+            this.showToast('アスペクト比の計算に失敗しました', 'error');
+        }
+    }
+
+    /**
+     * 結果エリアの表示
+     */
+    showResults() {
+        this.resultsArea.classList.remove('d-none');
+        this.resultsArea.scrollIntoView({ behavior: 'smooth' });
+    }
+
+    /**
+     * アスペクト比のコピー
+     */
+    copyRatio(ratioType) {
+        if (!this.currentResults) {
+            this.showToast('コピーするデータがありません', 'error');
+            return;
+        }
+
+        const ratio = this.currentResults[ratioType];
+        const text = `${ratio.x}:${ratio.y}`;
+        
+        navigator.clipboard.writeText(text).then(() => {
+            this.showToast(`「${text}」をコピーしました！`);
+        }).catch(() => {
+            this.showToast('コピーに失敗しました', 'error');
+        });
+    }
+
+    /**
+     * トースト通知の表示
+     */
+    showToast(message, type = 'success') {
+        this.toastMessage.textContent = message;
+        
+        // アイコンの変更
+        const icon = this.toast.querySelector('i');
+        if (type === 'error') {
+            icon.className = 'fas fa-exclamation-circle text-danger me-2';
+        } else {
+            icon.className = 'fas fa-check-circle text-success me-2';
+        }
+        
+        // トーストの表示
+        const toast = new bootstrap.Toast(this.toast);
+        toast.show();
+    }
+}
+
+// アプリケーションの初期化
+document.addEventListener('DOMContentLoaded', () => {
+    new AspectCalcApp();
+});

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}