メモ

監視しているSwiffyHTMLからJSONを抽出するnode.jsスクリプトを書いてみる

Posted on by seigo

ここのところ、JSFLでSwiffy出力後に手を加えたり抽出したりする仕組みを書いているのですが、実行し忘れたりすることも多いので、node.jsのファイル監視を利用して「監視しているSwiffyHTMLからJSONを抽出する」node.jsスクリプトを書いてみました。

今回の仕組み

  • node.jsスクリプト名はswiffywatch.jsとする
  • 特定のファイルを監視します
    • 今回はtest.flaから出力されるtest.swf.htmlをターゲットとします
  • 変化があるとtest.swf.html内のswiffyJSONをとりだす
  • 抽出したJSONはtest.jsonとして保存する

ファイル監視

当初、fs.watchを使っていたのだけどWindowsのせいかファイル監視タイミングが複数走るので以下のスクリプトを参考（というかそのままに）実装しました。

Swiffyの抽出

Swiffyの抽出部分はswiffyobject = 以降を正規表現で拾います。JSFLで整えた処理をそのまま使うことが出来ました。JavaScriptで出来ているコードで共通化できていいところ。

var pattern = new RegExp( 'swiffyobject = {(.*)}' , 'gi' );
var results = pattern.exec( htmlStr );
var swiffyStr = '{' + results[1] + '}';

参考までに最近のSwiffyHTMLを載せておきます。（JSON部分は大量なので省略）

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Swiffy output</title>
    <script src="https://www.gstatic.com/swiffy/v5.0/runtime.js"></script>

    <script>
      swiffyobject = {"tags":～～～（省略）～～～};
    </script>
    <style>html, body {width: 100%; height: 100%}</style>
  </head>
  <body style="margin: 0; overflow: hidden">
    <div id="swiffycontainer" style="width: 240px; height: 320px">
    </div>
    <script>
      
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
                                   swiffyobject);
      
      stage.start();
    </script>
  </body>
</html>

実際に書いたスクリプト

上記の事を加味して以下のように書いてみました。

swiffywatch.js

// 監視するファイル名
var filename = 'test.swf.html';

// __________________________________________________________________
// requireを使ったモジュール読み込み
var fs = require('fs');
var path = require('path')
// 対象ファイル
var file = __dirname + path.sep + filename;
// 開始タイトル
console.log( '[' + filename + '] ファイル監視');
console.log( '--------------------------------' );
// ファイル更新チェックプロセスの開始
if ( process.platform === 'win32' ) {
	// Windows用
	fs.watchFile( file, SaveSwiffyJSON );
} else {
	fs.watch( file, SaveSwiffyJSON );
}
// 対象のファイルからSwiffyの抽出
function SaveSwiffyJSON(){
	// readFileで対象ファイルを読み込んで処理開始
	fs.readFile( file , function ( err , data ) {
		// エラー処理
		if( err ) {
			console.error( 'ファイルが存在しません。' );
			process.exit(1);
		}
		// 実際の抽出
		var htmlStr = data;
		var pattern = new RegExp( 'swiffyobject = {(.*)}' , 'gi' );
		var results = pattern.exec( htmlStr );
		var swiffyStr = '{' + results[1] + '}';
		// 抽出したJSONデータの保存
		var jsonPath = path.dirname( file ) + path.sep + path.basename( file , '.swf.html' ) + '.json';
		var writableStream = fs.createWriteStream( jsonPath );
		writableStream.write( swiffyStr );
		writableStream.end();
		// 結果表示
		console.log( 'ファイルが更新されました' );
		console.log( '[' + jsonPath + '] に保存しました' );
		console.log( '--------------------------------' );
	});
}

実行してみた

実際に動かしてみます。

ファイル構成

ファイル構成はtest.flaと同階層にswiffywatch.jsがある構成となっています。

image_20130207_011612_3

監視開始

コマンドプロンプトを開いて

node 実行するフォルダパス\swiffywatch.js

と打って監視を開始します。

[test.swf.html] ファイル監視
--------------------------------

と出てきます。

test.flaからSwiffyを書き出す

早速、test.flaからSwiffyを書き出してみます。すると、SwiffyHTMLを書きだしたと同時に、先ほどのコマンドプロンプトでは以下のように反応します。

[test.swf.html] ファイル監視
--------------------------------
ファイルが更新されました
[C:\**********************\test.json] に保存しました
--------------------------------

と出て、フォルダ内以下のようになります。

image_20130207_012430_4

無事にtest.jsonにはtest.swf.htmlから抽出したJSONデータが出力されました！

以後、ファイル監視なので変更されれば随時書きだされます

このコードは当然ファイル監視なのでSwiffyHTMLの内容が変更されれば随時書きだされます。

おわりに

いかがでしたでしょうか。

node.jsはサーバーサイドスクリプトとして注目されていますが、このように手元の処理もフォローできるコードがすぐ書けるのも魅力ですね～。いろいろ使えそう。

今回もファイル一式置いておきます。

ファイル一式ダウンロード：node.js_swiffy_watch.zip

それでは、よき node.js Life を！

、、、
seigo