splatone 0.0.22 → 0.0.23

package/.API_KEY.Flickr

@@ -0,0 +1 @@
+469d6cabae53805a18b68d5d56fd9738

package/README.md

@@ -18,6 +18,16 @@ SNSのジオタグ付きポストをキーワードに基づいて収集する
 
 ## Change Log
 
+### v0.0.22 → →　v0.0.23
+
+* ブラウズモードの追加
+  * ダウンロードした結果ファイルを閲覧するモード
+  * ハンバーガーメニューの拡充
+    * 結果の統計情報の追加
+    * CLIコマンドの表示
+* カラーパレット生成ツールの改良
+  * ブラウザ上でカラーの確認と調整を可能に
+
 ### v0.0.18 → →　v0.0.22
 
 * **[可視化モジュール]** ```--vis-voronoi```追加
@@ -58,17 +68,30 @@ $ npx -y -p splatone@latest crawler --help
 使い方: crawler.js [options]
 
 Basic Options
-  -p, --plugin    実行するプラグイン[文字列] [必須] [選択してください: "flickr"]
-  -k, --keywords  検索キーワード(|区切り)                  [文字列] [デフォルト:
+  -p, --plugin       実行するプラグイン    [文字列] [選択してください: "flickr"]
+  -k, --keywords     検索キーワード(|区切り)               [文字列] [デフォルト:
                        "nature,tree,flower|building,house|water,sea,river,pond"]
-  -f, --filed     大きなデータをファイルとして送受信する
+  -f, --filed        大きなデータをファイルとして送受信する
                                                        [真偽] [デフォルト: true]
-  -c, --chopped   大きなデータを細分化して送受信する
+  -c, --chopped      大きなデータを細分化して送受信する
                                              [非推奨] [真偽] [デフォルト: false]
+      --browse-mode  ブラウズ専用モード（範囲描画とクロールを無効化）
+                                                      [真偽] [デフォルト: false]
 
 Debug
       --debug-verbose  デバッグ情報出力               [真偽] [デフォルト: false]
 
+UI Defaults
+      --ui-cell-size  起動時にUIへ設定するセルサイズ (0で自動)
+                                                          [数値] [デフォルト: 0]
+      --ui-units      セルサイズの単位 (kilometers/meters/miles)
+       [文字列] [選択してください: "kilometers", "meters", "miles"] [デフォルト:
+                                                                   "kilometers"]
+      --ui-bbox       UI初期表示の矩形範囲。"minLon,minLat,maxLon,maxLat" の形式
+                                                                        [文字列]
+      --ui-polygon    UI初期表示のポリゴン。Polygon/MultiPolygonを含むGeoJSON文
+                      字列                                              [文字列]
+
 For flickr Plugin
       --p-flickr-APIKEY    Flickr ServiceのAPI KEY                      [文字列]
       --p-flickr-Extras    カンマ区切り/保持する写真のメタデータ(デフォルト値は
@@ -78,7 +101,7 @@ For flickr Plugin
                     [選択してください: "upload", "taken"] [デフォルト: "upload"]
       --p-flickr-Haste     時間軸分割並列処理          [真偽] [デフォルト: true]
       --p-flickr-DateMax   クローリング期間(最大) UNIX TIMEもしくはYYYY-MM-DD
-                                               [文字列] [デフォルト: 1763354933]
+                                               [文字列] [デフォルト: 1763465845]
       --p-flickr-DateMin   クローリング期間(最小) UNIX TIMEもしくはYYYY-MM-DD
                                                [文字列] [デフォルト: 1072882800]
 
@@ -146,7 +169,7 @@ For voronoi Visualizer
 
 オプション:
       --help     ヘルプを表示                                             [真偽]
-      --version  バージョンを表示                                         [真偽]      
+      --version  バージョンを表示                                         [真偽]
 ```
 
 ## 最小コマンド例
@@ -165,6 +188,26 @@ For voronoi Visualizer
 $ npx -y -p splatone@latest crawler -p flickr -k "canal,river|street,alley|bridge" --vis-bulky --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
 ```
 
+## ブラウズ専用モード
+
+ダウンロードした結果ファイルをブラウザ上で閲覧するためのモードです。
+
+```bash
+npx -y -p splatone@latest browse
+```
+
+あるいは
+
+```bash
+npx -y -p splatone@latest crawl --browse-mode
+```
+
+- ブラウザ上に result*.json（`crawler` が保存したファイル）をドラッグ＆ドロップすると、その場で結果が地図へ描画されます。ズームやパン等Leafletの機能が使えます。
+- CLI コマンド生成欄には、この結果を生成したコマンドが表示さるため、同じ条件をベースに新たなクエリを発行できます。
+ 
+
+
+
 # 詳細説明
 
 ## Plugin (クローラー)
@@ -341,6 +384,8 @@ MinSiteSpacingMetersによる間引きは、各サイト周辺 (MinSiteSpacingMe
 
 ## キーワード指定方法
 
+キーワードとはソーシャルデータを検索する単語の事で、複数のキーワードをしていする事で、地理的な出現頻度・分散を比較できます。
+
 ### 比較キーワードの指定
 
 複数のキーワードでジオタグ付きポストを集め分布を比較します。比較キーワードは「|」区切りで指定します。例えばseaとmountainの分布を調べたい場合は以下のようにします。この例では、seaとタグ付けられたポストとmountainとタグ付けられたポストが色分けされて分布を表示します。
@@ -391,14 +436,21 @@ npx -y -p splatone@latest color <count> <sets>
 npx -y -p splatone@latest color 6 3
 ```
 
-- オプション:
+- ブラウザでプレビューするか聞かれるのでYとすると、ブラウザ上で実際の色が確認できます。
+  - カラーピッカーになっていますので、微調整も可能です。
+  - カラーコードをクリックするとコピーされます。
 
-- `--no-ansi` : ANSI カラーシーケンスを出力せず、プレーンなカンマ区切りの HEX を出力します（パイプやログ向け）。
+![](assets/screenshot_color_picker.png?raw=true)
+
+- オプション:
+  - `--no-ansi` : ANSI カラーシーケンスを出力せず、プレーンなカンマ区切りの HEX を出力します（パイプやログ向け）。
 
 ```bash
 npx -y -p splatone@latest color --no-ansi 6 3
 ```
 
+
+
 ## ダウンロード
 
 ### 画像のダウンロード
@@ -413,9 +465,6 @@ npx -y -p splatone@latest color --no-ansi 6 3
 * クロール結果をデータとしてダウンロードしたい場合は凡例の下にあるエクスポートボタンをクリックしてください。
   * 指定したビジュアライザ毎にFeature Collectionとして結果が格納されます。
   * クローリングしたデータそのものが欲しい場合はBulky等、単純なビジュアライザを指定してください。
-
-![](assets/icon_data_export.png?raw=true)
-
 ### 広範囲なデータ収集例
 
 * クエリ数はおおよそ1 query/secに調整されますので、時間はかかりますが大量のデータを収集する事も可能です。

package/browse.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+const BROWSE_FLAG = '--browse-mode';
+if (!process.argv.includes(BROWSE_FLAG)) {
+  process.argv.splice(2, 0, BROWSE_FLAG);
+}
+
+await import('./crawler.js');

package/color.js

@@ -1,6 +1,12 @@
 #!/usr/bin/env node
 
+import fs from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+import readline from 'node:readline';
 import paletteGenerator from './lib/paletteGenerator.js';
+import open from 'open';
+import chroma from 'chroma-js';
 
 // Usage: node color.js <count> <sets>
 // Example: node color.js 6 3
@@ -26,6 +32,8 @@ async function main() {
 
     const count = parseInt(argv[0], 10) || 8;
     const sets = parseInt(argv[1], 10) || 1;
+    const generatedPalettes = [];
+    const poolSize = Math.max((count || 1) * 3, (count || 1) + 6);
 
     for (let s = 0; s < sets; s++) {
         // Try to generate a palette via paletteGenerator; if it fails, fallback to HSL per-set
@@ -35,7 +43,7 @@ async function main() {
                 Math.random.seed(Date.now() + s);
             }
             cols = paletteGenerator.generate(
-                count,
+                poolSize,
                 function (color) {
                     var hcl = color.hcl();
                     return hcl[0] >= 0 && hcl[0] <= 360
@@ -63,12 +71,16 @@ async function main() {
             return `#${f(0)}${f(8)}${f(4)}`;
         }
 
-        const hexes = (cols ? cols.map(c => (typeof c.hex === 'function' ? c.hex() : String(c))) :
-            Array.from({ length: count }, (_, i) => {
-                const hue = Math.round(((i / count) * 360 + s * 37) % 360);
+        const rawHexes = (cols ? cols.map(c => (typeof c.hex === 'function' ? c.hex() : String(c))) :
+            Array.from({ length: poolSize }, (_, i) => {
+                const hue = Math.round(((i / poolSize) * 360 + s * 37) % 360);
                 return hslToHex(hue, 0.65, 0.5);
             })
         );
+        const uniqueHexes = [...new Map(rawHexes.map(h => [String(h).toUpperCase(), normalizeHex(h)])).values()];
+        const hexes = selectDiverseColors(uniqueHexes, count);
+
+        generatedPalettes.push(hexes);
 
         if (noAnsi) {
             console.log(hexes.join(','));
@@ -87,6 +99,8 @@ async function main() {
             console.log(out);
         }
     }
+
+        await maybeLaunchPreview(generatedPalettes);
 }
 
 main().catch(err => {
@@ -94,4 +108,346 @@ main().catch(err => {
     process.exit(1);
 });
 
+function isInteractive() {
+        return Boolean(process.stdout.isTTY && process.stdin.isTTY);
+}
+
+async function maybeLaunchPreview(palettes) {
+        if (!isInteractive() || palettes.length === 0) {
+                return;
+        }
+        const answer = await promptYesNo('Open browser preview? [y/N]: ');
+        if (!/^y(es)?$/i.test(answer.trim())) {
+                return;
+        }
+        try {
+                await launchPreview(palettes);
+        } catch (err) {
+                console.warn('[color.js] Failed to open preview:', err?.message || err);
+        }
+}
+
+function promptYesNo(question) {
+        return new Promise((resolve) => {
+                const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+                rl.question(question, (answer) => {
+                        rl.close();
+                        resolve(answer || '');
+                });
+        });
+}
+
+async function launchPreview(palettes) {
+        const dir = await fs.mkdtemp(path.join(os.tmpdir(), 'splatone-colors-'));
+        const filePath = path.join(dir, 'index.html');
+        const html = buildPreviewHtml(palettes);
+        await fs.writeFile(filePath, html, 'utf8');
+        await open(filePath, { wait: false });
+}
+
+function buildPreviewHtml(palettes) {
+        const paletteData = JSON.stringify(palettes);
+        return `<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Splatone Color Preview</title>
+    <style>
+        :root {
+            font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+            color-scheme: light dark;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            background: #0f0f0f;
+            color: #f5f5f5;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            font-size: 16px;
+        }
+        main {
+            width: min(960px, 100%);
+            padding: 32px 24px 48px;
+        }
+        h1 {
+            margin-top: 0;
+            font-size: clamp(1.5rem, 2vw, 2rem);
+        }
+        .palette {
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: 16px;
+            margin-bottom: 24px;
+        }
+        .palette h2 {
+            margin: 0 0 12px;
+            font-size: 1rem;
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+            color: #9acdff;
+        }
+        .color-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 16px;
+        }
+        .color-card {
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 10px;
+            padding: 12px 12px 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+        }
+        .swatch {
+            width: 100%;
+            aspect-ratio: 5 / 3;
+            border-radius: 8px;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            transition: transform 0.15s ease;
+        }
+        .swatch:hover {
+            transform: scale(1.02);
+        }
+        .color-picker {
+            width: 100%;
+            height: 40px;
+            border: none;
+            border-radius: 6px;
+            padding: 0;
+            background: transparent;
+            cursor: pointer;
+        }
+        .hex-code {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            padding: 10px;
+            border-radius: 6px;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            background: rgba(255, 255, 255, 0.05);
+            color: inherit;
+            font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
+            font-size: 0.95rem;
+            letter-spacing: 0.08em;
+            cursor: pointer;
+            transition: background 0.15s ease, border-color 0.15s ease;
+        }
+        .hex-code:hover {
+            background: rgba(255, 255, 255, 0.12);
+            border-color: rgba(255, 255, 255, 0.4);
+        }
+        .toast {
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            padding: 12px 20px;
+            border-radius: 999px;
+            background: rgba(0, 0, 0, 0.8);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            opacity: 0;
+            transform: translateY(12px);
+            transition: opacity 0.2s ease, transform 0.2s ease;
+            pointer-events: none;
+            font-size: 0.95rem;
+        }
+        .toast.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        @media (prefers-color-scheme: light) {
+            body {
+                background: #fafafa;
+                color: #111;
+            }
+            .palette {
+                background: #fff;
+                border-color: rgba(15, 23, 42, 0.08);
+            }
+            .color-card {
+                background: #f8fafc;
+                border-color: rgba(15, 23, 42, 0.08);
+            }
+            .hex-code {
+                background: rgba(15, 23, 42, 0.04);
+                border-color: rgba(15, 23, 42, 0.1);
+            }
+            .hex-code:hover {
+                background: rgba(15, 23, 42, 0.08);
+            }
+            .toast {
+                background: rgba(15, 23, 42, 0.9);
+                color: #fff;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Splatone Palette Preview</h1>
+        <p>Use the color pickers to fine-tune each swatch. Click any hex code to copy it to your clipboard.</p>
+        <div id="palettes"></div>
+    </main>
+    <div class="toast" id="copy-toast">Copied</div>
+    <script>
+        const palettes = ${paletteData};
+        const container = document.getElementById('palettes');
+
+        function createPaletteSection(colors, index) {
+            const section = document.createElement('section');
+            section.className = 'palette';
+            const heading = document.createElement('h2');
+            heading.textContent = 'Set ' + (index + 1);
+            section.appendChild(heading);
+            const grid = document.createElement('div');
+            grid.className = 'color-grid';
+            colors.forEach((hex, colorIdx) => {
+                grid.appendChild(createColorCard(hex, index, colorIdx));
+            });
+            section.appendChild(grid);
+            return section;
+        }
+
+        function createColorCard(hex, setIdx, colorIdx) {
+            const card = document.createElement('article');
+            card.className = 'color-card';
+            const swatch = document.createElement('div');
+            swatch.className = 'swatch';
+            swatch.style.background = hex;
+            swatch.dataset.hex = hex;
+
+            const picker = document.createElement('input');
+            picker.type = 'color';
+            picker.className = 'color-picker';
+            picker.value = hex;
+            picker.setAttribute('aria-label', 'Adjust color ' + (colorIdx + 1) + ' in set ' + (setIdx + 1));
+
+            const hexButton = document.createElement('button');
+            hexButton.type = 'button';
+            hexButton.className = 'hex-code';
+            hexButton.dataset.hex = hex.toUpperCase();
+            hexButton.textContent = hex.toUpperCase();
+
+            picker.addEventListener('input', () => {
+                const value = picker.value.toUpperCase();
+                swatch.style.background = value;
+                hexButton.dataset.hex = value;
+                hexButton.textContent = value;
+            });
+
+            hexButton.addEventListener('click', () => copyHex(hexButton.dataset.hex));
+
+            card.appendChild(swatch);
+            card.appendChild(picker);
+            card.appendChild(hexButton);
+            return card;
+        }
+
+        function renderPalettes() {
+            container.innerHTML = '';
+            palettes.forEach((colors, idx) => {
+                container.appendChild(createPaletteSection(colors, idx));
+            });
+        }
+
+        async function copyHex(hex) {
+            try {
+                await navigator.clipboard.writeText(hex);
+                showToast(hex + ' copied');
+            } catch (err) {
+                showToast('Clipboard unavailable');
+            }
+        }
+
+        let toastTimer = null;
+        function showToast(message) {
+            const toast = document.getElementById('copy-toast');
+            toast.textContent = message;
+            toast.classList.add('visible');
+            clearTimeout(toastTimer);
+            toastTimer = setTimeout(() => toast.classList.remove('visible'), 1600);
+        }
+
+        renderPalettes();
+    </script>
+</body>
+</html>`;
+}
+
+function normalizeHex(value) {
+    const hex = String(value || '').trim();
+    if (!hex) return '#000000';
+    if (hex.startsWith('#')) {
+        if (hex.length === 4) {
+            return '#' + hex.slice(1).split('').map(ch => ch + ch).join('').toUpperCase();
+        }
+        return '#' + hex.slice(1, 7).padEnd(6, '0').toUpperCase();
+    }
+    if (/^[0-9a-f]{6}$/i.test(hex)) {
+        return '#' + hex.toUpperCase();
+    }
+    return '#000000';
+}
+
+function labDistance(hexA, hexB) {
+    try {
+        const [L1, a1, b1] = chroma(hexA).lab();
+        const [L2, a2, b2] = chroma(hexB).lab();
+        const dL = L1 - L2;
+        const da = a1 - a2;
+        const db = b1 - b2;
+        return Math.sqrt(dL * dL + da * da + db * db);
+    } catch {
+        return 0;
+    }
+}
+
+function selectDiverseColors(hexes, count) {
+    if (!Array.isArray(hexes) || hexes.length === 0) {
+        return [];
+    }
+    if (hexes.length <= count) {
+        return hexes.slice(0, count);
+    }
+    const pool = hexes.slice();
+    const selected = [];
+    let firstIdx = 0;
+    let bestVariance = -Infinity;
+    for (let i = 0; i < pool.length; i++) {
+        const [L, a, b] = chroma(pool[i]).lab();
+        const variance = (L - 50) * (L - 50) + a * a + b * b;
+        if (variance > bestVariance) {
+            bestVariance = variance;
+            firstIdx = i;
+        }
+    }
+    selected.push(pool.splice(firstIdx, 1)[0]);
+    while (selected.length < count && pool.length) {
+        let bestIdx = 0;
+        let bestScore = -1;
+        for (let i = 0; i < pool.length; i++) {
+            const candidate = pool[i];
+            let minDistance = Infinity;
+            for (const chosen of selected) {
+                minDistance = Math.min(minDistance, labDistance(candidate, chosen));
+                if (minDistance === 0) break;
+            }
+            if (minDistance > bestScore) {
+                bestScore = minDistance;
+                bestIdx = i;
+            }
+        }
+        selected.push(pool.splice(bestIdx, 1)[0]);
+    }
+    return selected;
+}
+