画像キャプチャツール : バージョンの最新化(v1.9→2.1) / TypeScriptからの脱却

Author: ics-ikeda

.gitignore

@@ -11,3 +11,4 @@ html/styles/.sass-cache/*
 html-build/.sass-cache
 html-build/node_modules
 html-build/typescript/main.js.map
+/tool-generate-captures/package-lock.json

tool-generate-captures/ReadMe.md

@@ -15,7 +15,7 @@ npm install
 コマンドラインで次の命令を実行して、1分ぐらい待ちます。
 
 ```
-node index
+npm run capture
 ```
 
 実行が終わると(終了しないので、[cmd]+[c]で終了します)、imgsフォルダにキャプチャ画像が生成されます。

tool-generate-captures/index.js

@@ -1,46 +1,52 @@
-///<reference path="libs/node/node.d.ts" />
-///<reference path="libs/phantom/phantom.d.ts" />
-"use strict";
-// gazo_fileがあるかないかの確認
-var fs = require('fs');
-var childProcess = require('child_process');
-var phantomjs = require('phantomjs');
-let binPath = phantomjs.path;
-let render = "render.js";
-// この辺が引数みたいな感じで渡したい
-const width = "180";
-const height = "80";
-const IGNORE_LIST = [".idea", ".DS_Store", "imgs", "css"];
-fs.readdir("../samples", (err, files) => {
-    let promises = [];
-    for (let i = 0; i < files.length; i++) {
-        if (IGNORE_LIST.indexOf(files[i]) > -1) {
-            continue;
-        }
+// 定数宣言 (必要に応じて書き換えてください)
+const TARGET_FOLDER = '../samples'; // キャプチャーしたいHTMLのフォルダー
+const OUTPUT_FOLDER = '../imgs'; // 保存先のフォルダー
+const IGNORE_LIST = ['.DS_Store', 'Thumbs.db', '.idea']; // 無視リスト
+const PHANTOM_JS_FILE = 'render.js'; // PhantomJSのパス
 
-        let outputFilePath = `../imgs/${files[i]}.png`;
-        let url = `../samples/${files[i]}`;
-        let options = ["render.js", url, outputFilePath, width, height];
-        let childPromise = new Promise((resolve) => {
-            console.log(`${i} : ${outputFilePath}`);
-            // ここでrender.jsをphantomjsで呼び出して実行する
-            childProcess.execFile(binPath, options, (error, stdout, stderr) => {
-                if (error != null) {
-                    console.error(stderr);
-                }
-                else {
-                    console.log(stdout);
-                }
-                resolve();
-            });
+// 具体的な処理
+const fs = require('fs');
+const childProcess = require('child_process');
+const phantomjs = require('phantomjs');
+const binPath = phantomjs.path;
+const render = 'render.js';
+
+fs.readdir(TARGET_FOLDER, (err, files) => {
+  const promises = [];
+  files.map(file => {
+    if (IGNORE_LIST.includes(file) === false) {
+      const targetFilePath = `${TARGET_FOLDER}/${file}`;
+      const outputFilePath = `${OUTPUT_FOLDER}/${file}.png`;
+      const options = [
+        PHANTOM_JS_FILE,
+        targetFilePath,
+        outputFilePath,
+      ];
+      const childPromise = new Promise((resolve) => {
+        // ここでrender.jsをphantomjsで呼び出して実行する
+        childProcess.execFile(binPath, options, (error, stdout, stderr) => {
+          // プロセスの対象を出力
+          console.log(`${file} をPhantomJSで変換を試みました`);
+          // PhantomJS側のconsole情報を出力
+          console.log(stdout);
+          if (error) {
+            // 書き出し失敗の詳細情報を出力
+            console.error(error);
+          } else {
+            // 書き出し成功
+          }
+          resolve();
         });
-        promises.push(childPromise);
+      });
+      promises.push(childPromise);
     }
-    Promise
-        .all(promises)
-        .then((results) => {
-        console.log("finish!!!");
+  });
+
+  console.log(`${TARGET_FOLDER} フォルダーのキャプチャーを始めます。ちょっとまってね！`);
+
+  Promise
+    .all(promises)
+    .then((results) => {
+      console.log(`${TARGET_FOLDER} のキャプチャーが終わったので ${OUTPUT_FOLDER} に入れておきました!!`);
     });
-    console.log("step - 2");
-});
-console.log("step - 1");
+});

tool-generate-captures/index.js.map

@@ -1,23 +1,8 @@
 {
-  "name": "tutorial-createjs",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "capture": "node index.js"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://ics-ikeda@github.com/ics-creative/tutorial-createjs.git"
-  },
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/ics-creative/tutorial-createjs/issues"
-  },
-  "homepage": "https://github.com/ics-creative/tutorial-createjs#readme",
   "devDependencies": {
-    "node-phantom": "^0.2.5",
-    "phantomjs": "^1.9.18"
+    "phantomjs": "^2.1.7"
   }
 }

tool-generate-captures/index.ts

@@ -1,32 +1,30 @@
-var page = require('webpage').create();
+const page = require('webpage').create();
+const system = require('system');
 
 // argsは、phantom.argsでアクセスできる。
-var address = phantom.args[0];
-var output = phantom.args[1];
-var width = phantom.args[2];
-var height = phantom.args[3];
-
-console.log(address + " : " + output);
+const address = system.args[1];
+const output = system.args[2];
 
 page.viewportSize = {
-	width: width,
-	height: height,
-	margin: "0px",
-	padding: "0px"
+  margin: '0px',
+  padding: '0px'
 };
 
 page.open(address,
-	function (status) {
-		console.log("status : " + status);
-		if (status == 'success') {
-			setTimeout(function () {
-				// 出力
-				page.render(output);
-				// 終了
-				phantom.exit();
-			}, 500);
-		} else {
-			console.log('error');
-		}
-	}
+  function (status) {
+    if (status === 'success') {
+      setTimeout(function () {
+        // 出力
+        page.render(output);
+        console.error('キャプチャーに成功しました');
+        // 成功として終了
+        phantom.exit(0);
+      }, 50)
+
+    } else {
+      console.error('キャプチャーに失敗しました');
+      // エラーとして終了
+      phantom.exit(1);
+    }
+  }
 );