splatone 0.0.5 → 0.0.7

package/README.md

@@ -11,15 +11,12 @@ SNSのジオタグ付きポストをキーワードに基づいて収集する
 - Bulky: クロールした全てのジオタグを小さな点で描画する
 - Marker Cluster: 密集しているジオタグをクラスタリングしてまとめて表示する
 
-## 既知のバグ
+## Change Log
 
-- <s>JSON.stringify(json)で変換できる大きさに制限があり、数十万件等の大きな結果を生み出すクエリは、クロール後、結果のブラウザへの転送で失敗します。</s>
-- サイズの問題は一部解決しました。ただし、**データの保存(ダウンロード)はまだできません。**
-  - 問題はサーバからブラウザへ結果を渡す時にJSON.stringify(obj)で結果データをJSON文字列にする時にヒープを食いつぶしています。 とりあえず可視化だけ出来るように、データが大きいと自動で分割して送信するようにしています。ただし、送受信に時間がかかります。（左下のプログレスバーに進捗が表示されます）
-  - **--chopped**オプションをつけると強制的に分割送信します。(ただ遅くなるだけなので意味ないです)
-  - データ保存(ダウンロード)する際にブラウザ上でJSON.stringify(json)を呼ぶ必要があり、そこで詰まります。これの解決策は別途実装します。
+### v0.0.6 →　v0.0.7
 
-![](/assets/screenshot_massive_points_bulky.png)
+* Hexサイズの自動設定モードが実装され、デフォルトとなりました。
+  * Web画面のハンバーガーメニューから変更できます。(サイズ0で自動)
 
 # 使い方
 
@@ -31,14 +28,15 @@ SNSのジオタグ付きポストをキーワードに基づいて収集する
 ```shell
 $ npx -y -- splatone@latest crawler --help
 使い方: crawler.js [options]
-
 Basic Options
   -p, --plugin    実行するプラグイン[文字列] [必須] [選択してください: "flickr"]
   -o, --options   プラグインオプション               [文字列] [デフォルト: "{}"]
   -k, --keywords  検索キーワード(|区切り)                  [文字列] [デフォルト:
                        "nature,tree,flower|building,house|water,sea,river,pond"]
-  -c, --chopped   大きなデータを細分化して送信する
+  -f, --filed     大きなデータをファイルとして送受信する
                                                        [真偽] [デフォルト: true]
+  -c, --chopped   大きなデータを細分化して送受信する
+                                             [非推奨] [真偽] [デフォルト: false]
 
 Debug
       --debug-verbose  デバッグ情報出力               [真偽] [デフォルト: false]
@@ -162,3 +160,8 @@ $ node crawler.js -p flickr -o '{"flickr":{"API_KEY":"aaaaaaaaaaaaaaaaaaaaaaaaaa
 
 ![](https://github.com/YokoyamaLab/Splatone/blob/main/assets/icon_data_export.png?raw=true)
 
+### 広範囲なデータ収集例
+
+* あまりにも大きいとFlickrから一時的にBANされることがありますので注意してください。
+
+![](/assets/screenshot_massive_points_bulky.png)

package/crawler.js

@@ -28,7 +28,7 @@ import { hideBin } from 'yargs/helpers';
 // -------------------------------
 import { loadPlugins } from './lib/pluginLoader.js';
 import paletteGenerator from './lib/paletteGenerator.js';
-import { dfsObject } from './lib/splatone.js';
+import { dfsObject, bboxSize, saveGeoJsonObjectAsStream } from './lib/splatone.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -108,7 +108,7 @@ try {
   // コマンド例
   // node crawler.js -p flickr -o '{"flickr":{"API_KEY":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}}' -k "商業=shop,souvenir,market,supermarket,pharmacy,store,department|食べ物=food,drink,restaurant,cafe,bar|美術 館=museum,art,exhibition,expo,sculpture,heritage|公園=park,garden,flower,green,pond,playground" --vis-bulky
   // node crawler.js -p flickr -k "水域=canal,channel,waterway,river,stream,watercourse,sea,ocean,gulf,bay,strait,lagoon,offshore|橋梁=bridge,overpass,flyover,aqueduct,trestle|通路=street,road,thoroughfare,roadway,avenue,boulevard,lane,alley,roadway,carriageway,highway,motorway|ランドマーク=church,sanctuary,chapel,cathedral,basilica,minster,abbey,temple,shrine" --vis-bulky
-  // node crawler.js -p flickr -k "水辺=sea,ocean,beach|山岳=mountain,mount,hill" --vis-bulky --chopped
+  // node crawler.js -p flickr -k "水辺=sea,ocean,beach|山岳=mountain,mount,hill" --vis-bulky --filed
   let yargv = await yargs(hideBin(process.argv))
     .strict()                        // 未定義オプションはエラー
     .usage('使い方: $0 [options]')
@@ -133,12 +133,19 @@ try {
       type: 'string',
       default: 'nature,tree,flower|building,house|water,sea,river,pond',
       description: '検索キーワード(|区切り)'
+    }).option('filed', {
+      group: 'Basic Options',
+      alias: 'f',
+      type: 'boolean',
+      default: true,
+      description: '大きなデータをファイルとして送受信する'
     }).option('chopped', {
       group: 'Basic Options',
       alias: 'c',
       type: 'boolean',
       default: false,
-      description: '大きなデータを細分化して送信する'
+      deprecate: true,
+      description: '大きなデータを細分化して送受信する'
       //    }).option('debug-save', {
       //      group: 'Debug',
       //      type: 'boolean',
@@ -169,6 +176,10 @@ try {
     if (Object.keys(all_visualizers).filter(v => argv["vis-" + v]).length == 0) {
       throw new Error('可視化ツールの指定がありません。最低一つは指定してください。');
     }
+    if (argv.filed && argv.chopped) {
+      console.warn("--filedと--choppedが両方指定されています。--filedが優先されます。");
+      argv.chopped = false;
+    }
     return true;
   });
   const argv = await yargv.parseAsync();
@@ -293,7 +304,7 @@ try {
       title: title,
       lat: DEFAULT_CENTER.lat,
       lon: DEFAULT_CENTER.lon,
-      defaultCellSize: 0.5,
+      defaultCellSize: 0,
       defaultUnits: 'kilometers',
       defaultKeywords: argv.keywords,
     });
@@ -346,19 +357,32 @@ try {
           console.warn("invalid sessionId:", req.sessionId);
           return;
         }
-        const { bbox, drawn, cellSize = 0, units = 'kilometers', tags = 'sea,beach|mountain,forest' } = req.query;
+        let { bbox, drawn, cellSize = 0, units = 'kilometers', tags = 'sea,beach|mountain,forest' } = req.query;
+        const boundary = String(bbox).split(',').map(Number);
         if (cellSize == 0) {
           //セルサイズ自動決定()
+          //console.log("[cellSize?]",boundary,units);
+          const { width, height } = bboxSize(boundary, units);
+          //console.log("","w=",width,"/\th=",height);
+          cellSize = Math.max(width / (3 * 30), height / (30 * Math.sqrt(3)));
+          if(cellSize==0){
+            cellSize=1;
+          }
+          const msg = "セルサイズを[ " + cellSize + ' ' + units + " ]に設定しました。";
+          console.log(msg)
+          io.to(sessionId).timeout(5000).emit('toast', {
+            text: msg,
+            class: "info"
+          });
         }
         const fallbackBbox = [139.55, 35.53, 139.92, 35.80];
         let bboxArray = fallbackBbox;
 
         if (bbox) {
-          const parts = String(bbox).split(',').map(Number);
-          if (parts.length !== 4 || !parts.every(Number.isFinite)) {
+          if (boundary.length !== 4 || !boundary.every(Number.isFinite)) {
             return res.status(400).json({ error: 'bbox must be "minLon,minLat,maxLon,maxLat"' });
           }
-          bboxArray = parts;
+          bboxArray = boundary;
         }
 
         const sizeNum = Number(cellSize);
@@ -601,10 +625,10 @@ try {
 
     console.log('[splatone:finish]');
     try {
-      if (argv.chopped) {
+      if (argv.chopped || argv.filed) {
         throw new RangeError("Invalid string length");
       }
-      await io.to(p.sessionId).timeout(5000).emitWithAck('result', {
+      await io.to(p.sessionId).timeout(120000).emitWithAck('result', {
         resultId,
         geoJson,
         palette: target["splatonePalette"],
@@ -613,7 +637,7 @@ try {
       });
     } catch (e) {
       if (e instanceof RangeError && /Invalid string length/.test(String(e.message))) {
-        const msg = (argv.chopped ? "ユーザの指定により" : "結果サイズが巨大なので") + "断片化モードでクライアントに送ります";
+        const msg = ((argv.chopped || argv.filed) ? "ユーザの指定により" : "結果サイズが巨大なので") + (argv.chopped ? "断片化送信" : "保存ファイル送信") + "モードでクライアントに送ります";
         if (argv.debugVerbose) {
           console.warn("[WARN] " + msg);
         }
@@ -621,50 +645,64 @@ try {
           text: msg,
           class: "warning"
         });
-        //サイズ集計
-        const total_features = ((s = 0, st = [geoJson], v, seen = new WeakSet) => { for (; st.length;)if ((v = st.pop()) && typeof v === 'object' && !seen.has(v)) { seen.add(v); if (Array.isArray(v.features)) s += v.features.length; for (const k in v) { const x = v[k]; if (x && typeof x === 'object') st.push(x) } } return s })();
-        let current_features = 0
-        await dfsObject(geoJson, async ({ path, value, kind, type }) => {
-          if (path.length !== 0) {
-            if (kind === "primitive" || kind === "null") {
-              //console.log(path.join("."), "=>", `(${kind}:${type})`, value);
-              const ackrtn = await io.to(p.sessionId).timeout(5000).emitWithAck('result-chunk', {
-                resultId,
-                path,
-                kind,
-                type,
-                value
-              });
-              //console.log("\tACK", ackrtn);
-            } else if (kind === "object") {
-              //console.log(path.join("."), "=>", `(${kind}:${type})`);
-              if (path.at(-2) == "features" && Number.isInteger(path.at(-1))) {
-                current_features++;
+        if (argv.chopped) {
+          //サイズ集計
+          const total_features = ((s = 0, st = [geoJson], v, seen = new WeakSet) => { for (; st.length;)if ((v = st.pop()) && typeof v === 'object' && !seen.has(v)) { seen.add(v); if (Array.isArray(v.features)) s += v.features.length; for (const k in v) { const x = v[k]; if (x && typeof x === 'object') st.push(x) } } return s })();
+          let current_features = 0
+          await dfsObject(geoJson, async ({ path, value, kind, type }) => {
+            if (path.length !== 0) {
+              if (kind === "primitive" || kind === "null") {
+                //console.log(path.join("."), "=>", `(${kind}:${type})`, value);
+                const ackrtn = await io.to(p.sessionId).timeout(120000).emitWithAck('result-chunk', {
+                  resultId,
+                  path,
+                  kind,
+                  type,
+                  value
+                });
+                //console.log("\tACK", ackrtn);
+              } else if (kind === "object") {
+                //console.log(path.join("."), "=>", `(${kind}:${type})`);
+                if (path.at(-2) == "features" && Number.isInteger(path.at(-1))) {
+                  current_features++;
+                }
+                const ackrtn = await io.to(p.sessionId).timeout(120000).emitWithAck('result-chunk', {
+                  resultId,
+                  path,
+                  kind,
+                  type,
+                  progress: { current: current_features, total: total_features }
+                });
+                //console.log("\tACK", ackrtn);
+              } else if (kind === "array") {
+                //console.log(path.join("."), "=>", `(${kind}:${type})`);              
+                const ackrtn = await io.to(p.sessionId).timeout(120000).emitWithAck('result-chunk', {
+                  resultId,
+                  path,
+                  kind,
+                  type
+                });
+                //console.log("\tACK", ackrtn);
               }
-              const ackrtn = await io.to(p.sessionId).timeout(5000).emitWithAck('result-chunk', {
-                resultId,
-                path,
-                kind,
-                type,
-                progress: { current: current_features, total: total_features }
-              });
-              //console.log("\tACK", ackrtn);
-            } else if (kind === "array") {
-              //console.log(path.join("."), "=>", `(${kind}:${type})`);              
-              const ackrtn = await io.to(p.sessionId).timeout(5000).emitWithAck('result-chunk', {
-                resultId,
-                path,
-                kind,
-                type
-              });
-              //console.log("\tACK", ackrtn);
+            } else {
+              //console.log("SKIP---------------------");
             }
-          } else {
-            //console.log("SKIP---------------------");
+          });
+          //console.log("finish chunks");
+        } else {
+          //保存ファイル送信(--filed)
+          try {
+            const outPath = await saveGeoJsonObjectAsStream(geoJson, 'result.' + resultId + '.json');
+            console.log('saved:', outPath);
+            const ackrtn = await io.to(p.sessionId).timeout(120000).emitWithAck('result-file', {
+              resultId,
+            });
+          } catch (err) {
+            console.error('failed:', err);
+            process.exitCode = 1;
           }
-        });
-        //console.log("finish chunks");
-        io.to(p.sessionId).timeout(10000).emitWithAck('result', {
+        }
+        await io.to(p.sessionId).timeout(120000).emitWithAck('result', {
           resultId,
           geoJson: null, /*geoJsonは送らない*/
           palette: target["splatonePalette"],

package/lib/splatone.js

@@ -1,6 +1,12 @@
 // 各種関数のまとめ場
 // @turf/turf v6/v7 どちらでもOK（rhumbDistanceはv7で統合済み）
 import { point, distance, rhumbDistance, bbox as turfBbox } from '@turf/turf';
+import { createWriteStream } from 'node:fs';
+import { mkdir } from 'node:fs/promises';
+import path from 'node:path';
+import { pipeline as pipelineCb } from 'node:stream';
+import { promisify } from 'node:util';
+import { JsonStreamStringify } from 'json-stream-stringify';
 
 /**
  * bbox の幅・高さを指定単位で返す
@@ -17,8 +23,8 @@ export function bboxSize(bbox, units = "kilometers", method = "geodesic") {
   const midLon = (minX + maxX) / 2;
 
   // 測りたい2点を作成
-  const west  = point([minX, midLat]);
-  const east  = point([maxX, midLat]);
+  const west = point([minX, midLat]);
+  const east = point([maxX, midLat]);
   const south = point([midLon, minY]);
   const north = point([midLon, maxY]);
 
@@ -26,7 +32,7 @@ export function bboxSize(bbox, units = "kilometers", method = "geodesic") {
   const distFn = method === "rhumb" ? rhumbDistance : distance;
 
   return {
-    width:  distFn(west, east,  { units }),
+    width: distFn(west, east, { units }),
     height: distFn(south, north, { units }),
     units
   };
@@ -127,9 +133,19 @@ function describeType(value) {
   const ctor = value?.constructor?.name ?? "Object";
   return { kind: "object", type: ctor, isLeaf: false, isNull: false };
 }
-
-
+const pipeline = promisify(pipelineCb);
+export async function saveGeoJsonObjectAsStream(geoJsonObject, outfile) {
+  const dir = path.join('public', 'out');
+  await mkdir(dir, { recursive: true });
+  const destPath = path.join(dir, path.basename(outfile));
+
+  // ここでも JSON.stringify は呼ばず、ストリームで直に文字列化
+  const src = new JsonStreamStringify(geoJsonObject);
+  const dest = createWriteStream(destPath, { flags: 'w' });
+  await pipeline(src, dest);
+  return destPath;
+}
 export default {
-    dfsObject,bboxSize
+  dfsObject, bboxSize, saveGeoJsonObjectAsStream
 };
 //const {width,height} = bboxSize(b, "kilometers", "geodesic");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "splatone",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Multi-layer Composite Heatmap",
   "homepage": "https://github.com/YokoyamaLab/Splatone#readme",
   "bugs": {
@@ -27,6 +27,7 @@
     "express": "^5.1.0",
     "flickr-sdk": "^7.1.0",
     "iwanthue": "^2.0.0",
+    "json-stream-stringify": "^3.1.6",
     "open": "^10.2.0",
     "piscina": "^5.1.3",
     "socket.io": "^4.8.1",

package/public/visualizer.js

@@ -61,4 +61,77 @@ function loadAsset(url) {
     }
 
     return Promise.reject(new Error(`Unsupported extension: ${url}`));
-}
+}
+
+async function fetchJsonObject(url, { signal } = {}) {
+    const res = await fetch(url, {
+        method: 'GET',
+        headers: { 'Accept': 'application/json' },
+        // same-originのときは不要。CORS越えならサーバ側のCORS許可が必要
+        signal,
+        cache: 'no-cache', // 必要なら更新を強制
+    });
+
+    if (!res.ok) {
+        // ステータスコード付きで例外
+        throw new Error(`HTTP ${res.status} ${res.statusText} for ${url}`);
+    }
+
+    // 自動で JSON parse され、JSオブジェクトになる
+    return await res.json();
+}
+
+/**
+ * 指定のサーバ上パス (filePath) から JSON を取得し、
+ * ブラウザで downloadFileName という名前でダウンロードさせる。
+ *
+ * @param {string} downloadFileName - 例: "data.geojson" / "result.json"
+ * @param {string} filePath - 例: "/public/out/data.geojson" or "https://example.com/data.json"
+ * @param {object} [opts]
+ * @param {number} [opts.timeoutMs=15000] - タイムアウト(ms)
+ * @param {RequestInit} [opts.fetchInit] - fetch の追加オプション（ヘッダ/credentials等）
+ */
+async function downloadJSONFile(downloadFileName, filePath, opts = {}) {
+  const { timeoutMs = 15000, fetchInit = {} } = opts;
+
+  // タイムアウト制御
+  const ac = new AbortController();
+  const timer = setTimeout(() => ac.abort(new Error('timeout')), timeoutMs);
+
+  try {
+    const res = await fetch(filePath, {
+      method: 'GET',
+      headers: { 'Accept': 'application/json', ...(fetchInit.headers || {}) },
+      signal: ac.signal,
+      // CORS が必要なら credentials / mode などを fetchInit で渡す（例: { credentials: 'include' }）
+      ...fetchInit,
+    });
+
+    if (!res.ok) {
+      throw new Error(`HTTP ${res.status} ${res.statusText} for ${filePath}`);
+    }
+
+    // そのまま Blob 化（JSON で返ってくる想定）
+    // MIME が不正のときもこちらで application/json に寄せる
+    const blob = await res.blob();
+    const type = res.headers.get('content-type');
+    const jsonBlob = type && type.includes('application/json')
+      ? blob
+      : new Blob([await blob.arrayBuffer()], { type: 'application/json;charset=utf-8' });
+
+    const url = URL.createObjectURL(jsonBlob);
+    try {
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = downloadFileName; // ダウンロード名を強制
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    } finally {
+      // 生成したオブジェクトURLは必ず破棄
+      URL.revokeObjectURL(url);
+    }
+  } finally {
+    clearTimeout(timer);
+  }
+}

package/views/index.ejs

@@ -151,6 +151,7 @@
     let sessionId = null;
     let visualizers = {};
     let results = {};
+    let files = {};
     let layerControl = null;
     socket.on("welcome", async (res) => {
       //console.log(`welcome ${res.sessionId} at ${new Date(res.time).toLocaleTimeString()}`);
@@ -251,19 +252,37 @@
     }
     socket.on("toast", (arg) => {
       const option = {
-        text:"",
-        duration:arg.close?-1:5000,
-        close:false,
-        gravity:'bottom',
-        position:'center',
-        className:"toast-" + arg.class,
-        ...arg};
+        text: "",
+        duration: arg.close ? -1 : 5000,
+        close: false,
+        gravity: 'bottom',
+        position: 'center',
+        className: "toast-" + arg.class,
+        ...arg
+      };
       Toastify(option).showToast();
       //https://apvarun.github.io/toastify-js/#
     });
+    socket.on("result-file", async(arg, callback) => {
+      try {
+        const file_path = '/out/result.' + arg.resultId + '.json';
+        latestFile = file_path;
+        files[arg.resultId] = file_path;
+        console.log("file path",file_path);
+        results[arg.resultId] = await fetchJsonObject(file_path);
+        console.log('結果ファイル取得完了');
+      } catch (e) {
+        console.error('結果ファイル取得失敗:', e);
+      }
+      //console.log("ARK");
+      callback({
+        pong: Date.now(),
+        ok: true
+      }); // only one argument is expected
+    });
     socket.on("result-chunk", (arg, callback) => {
-      if(arg.progress){
-        setProgress(document.getElementById("progressCrawl"),Math.round((arg.progress.current/arg.progress.total) * 100000) / 1000);
+      if (arg.progress) {
+        setProgress(document.getElementById("progressCrawl"), Math.round((arg.progress.current / arg.progress.total) * 100000) / 1000);
       }
       results[arg.resultId] ??= {};
       if (arg.kind === "primitive" || arg.kind === "null") {
@@ -293,19 +312,23 @@
         setAt(results[arg.resultId], arg.path, []);
       }
       //console.log("ARK");
-      callback({ pong: Date.now(), ok: true }); // only one argument is expected
+      callback({
+        pong: Date.now(),
+        ok: true
+      }); // only one argument is expected
     });
 
     let latestResult = {};
+    let latestFile = null;
     const overlays = {};
-    socket.on('result', async (res,callback) => {
+    socket.on('result', async (res, callback) => {
       //console.log("result");
       latestResult["_"]["visualizers"] = res.visualizers;
       latestResult["_"]["plugin"] = res.plugin;
       clearHexHighlight();
-      if(res.geoJson == null){
+      if (res.geoJson == null) {
         res.geoJson = results[res.resultId];
-      }else{
+      } else {
         results[res.resultId] = res.geoJson;
       }
       latestResult = {
@@ -324,7 +347,7 @@
           overlays[`[${vis}]`] = layers;
         } else {
           for (const name in layers) {
-            console.log("Lay",vis,name);
+            console.log("Lay", vis, name);
             overlays[`[${vis}] ${name}`] = layers[name];
           }
         }
@@ -354,12 +377,19 @@
       });
       layerControl.addTo(map);
       document.getElementById("map_legend")?.appendChild(ul);
-      document.getElementById("download-json").addEventListener("click", () => {
+      document.getElementById("download-json").addEventListener("click", async () => {
         const stamp = new Date().toISOString().replace(/[:.]/g, "-");
-        downloadJSON(`data-${stamp}.json`, latestResult);
+        if(latestFile===null){
+          downloadJSON(`splatone-${stamp}.json`, latestResult);
+        }else{
+          await downloadJSONFile(`splatone-${stamp}.json`, latestFile);
+        }
         let sessionId = null;
       });
-      callback({ pong: Date.now(), ok: true });
+      callback({
+        pong: Date.now(),
+        ok: true
+      });
     });
 
     // 地図