splatone 0.0.5 → 0.0.6

package/README.md

@@ -14,10 +14,9 @@ SNSのジオタグ付きポストをキーワードに基づいて収集する
 ## 既知のバグ
 
 - <s>JSON.stringify(json)で変換できる大きさに制限があり、数十万件等の大きな結果を生み出すクエリは、クロール後、結果のブラウザへの転送で失敗します。</s>
-- サイズの問題は一部解決しました。ただし、**データの保存(ダウンロード)はまだできません。**
-  - 問題はサーバからブラウザへ結果を渡す時にJSON.stringify(obj)で結果データをJSON文字列にする時にヒープを食いつぶしています。 とりあえず可視化だけ出来るように、データが大きいと自動で分割して送信するようにしています。ただし、送受信に時間がかかります。（左下のプログレスバーに進捗が表示されます）
-  - **--chopped**オプションをつけると強制的に分割送信します。(ただ遅くなるだけなので意味ないです)
-  - データ保存(ダウンロード)する際にブラウザ上でJSON.stringify(json)を呼ぶ必要があり、そこで詰まります。これの解決策は別途実装します。
+- サイズの問題は、一度ファイルに書き出す事で解決しました。(v0.0.6)
+  - **--no-filed**オプションを付ける事で、従来の方法で実行できます。(ファイルに書き出すより多少速い)
+- 以下の画像のように大きな範囲で多くのジオタグが収集できるようになりました。
 
 ![](/assets/screenshot_massive_points_bulky.png)
 
@@ -31,14 +30,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]

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, saveGeoJsonObjectAsStream } from './lib/splatone.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -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();
@@ -601,10 +612,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 +624,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 +632,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.6",
   "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
+      });
     });
 
     // 地図