ON-BLOG

CGのこと、あれこれ書いてます。

簡単動画管理ツールについて

WSH

以前作っていた、動画をまとめるスクリプトを色々カスタムしてみました。
というにも、資料の管理が煩雑になってきたので、自宅NASにサーバーとして
管理したいなぁーと思っていたので作りました。
仕事では、引き出し用に使ってたりします。

本当は「WhiteBrowser」とか使いたいんですが、あれインストールがいるんで
正直手を広げにくいです。

なのでブラウザベースで「簡単」「軽い」「分かり易い」を
元にざっくりなものとなります。

用意するのは画像みたいな階層です。
f:id:tommy_on:20150521112327j:plain
フォルダ名はなんでもOKです。


こんな感じで今回は軽めで用意してみました。
中身はこんな感じ。
数は少なめ。
f:id:tommy_on:20150521133407p:plain

私が持っている素材【MOV】が圧倒的に多いので、ブラウザ表示に関しては
Movと少しだけ対応しております。
もちろん追加も可能です。後述致します。

んで、まずは動画をコンバートツールにドロップします。
ちなみにコンバートツールの中身はこんな感じ。
f:id:tommy_on:20150521112608j:plain

ではドロップ。
すると、こんなウィンドウで止まると思います。
f:id:tommy_on:20150521133456p:plain
文字化けしてますが、今回はスルーで。
特に問題ありません。

これでOK押していただくとOKです。
※FFMEPGについてはググる等でお調べ頂くと
　本当に得しますので、おすすめです。

この状態で以下の画像みたいに「.Gif」画像ができていると思います。
f:id:tommy_on:20150521133513p:plain

これがブラウザで表示する本体になります。
※このGIF化はFFMEPGが対応する全てのフォーマットでコンバート可能となります。


であとは、下記に記載するスクリプト【Make_HTML.wsf】を実行して下さい。
こんな感じになるかと思います。
入力する名前は、【フォルダ名】にして下さい。
ここに記載されたフォルダを見て、HTMLファイルを作る感じになります。
f:id:tommy_on:20150521133546p:plain

色々入ってますが、今はスルーで。
実行完了すると画像みたいに、フォルダ名のHTMLファイルが出来ていると思います。
f:id:tommy_on:20150521133608p:plain

でそれをブラウザで確認すると以下のHTMLファイルが立ち上げると思います。
f:id:tommy_on:20150521133621p:plain

はい。これでほぼ完了です。
あとはTOP画像とか、任意の画像をHTMLファイルにテキストで書き込んであげると完成です。

一応TOP画像はこんな感じにしてます。
※超簡単な感じです。
f:id:tommy_on:20150521133645p:plain

HTMLは詳しくないのでこんな感じしかできませんでした。
色々フリーのツール使うといいかもですね。

要はサムネイルが欲しかっただけんです笑
なんで作ってみました。
現状だと数は少ないので見た目がスカスカですが
お見せできない資料なども含めると30Pぐらい埋まってます笑
これがiPhoneで見れると一番いいですけどね…


ってことでコード
FFMEPGコンバートツールについては、以前の記事を参考下さい。
ココtommy-on.hatenablog.com

ではコード↓↓↓

<job id="foo">

<script language="VBScript">

 'InputBoxを出して、ユーザから入力された値を返す関数

 function vbinput(msg)

    vbinput = InputBox(msg,"makehtml")

 end function

</script>



<script language="JavaScript">
//上で定義した関数を呼び出す
var name = vbinput("書き出すIDを記入して下さい");
var objShell = new ActiveXObject("Shell.Application");
var fs = WScript.CreateObject("Scripting.FileSystemObject");
var targetPath = "D:\\動画まとめサイト\\"+name;

var enuItems = new Enumerator (objShell.Namespace(objShell.Namespace(targetPath)).Items());

var Array_hako = new Array();
var file = fs.CreateTextFile(targetPath+"\\"+name+".html",true);


for (; !enuItems.atEnd(); enuItems.moveNext()) {
	var item = enuItems.item();
	var ntime = item.ExtendedProperty("Duration");
	var time_math = ntime / 10000000;
	var frame = time_math * 30;
	var time_number = new Number(frame);
	var time = Math.round(time_number);
	var type = item.ExtendedProperty("Type");
	if(type == "QuickTime ムービー" || type == "ビデオ クリップ" || type == "AVI ファイル")
		{
			//WScript.Echo( item.Name );
			var Item_Name = item.name;
			var Out = Item_Name.lastIndexOf(".");
			var Final_Name = Item_Name.slice(0,Out);

			Array_hako.push(Final_Name);
			Array_hako.push(time+"フレーム");
			//file.WriteLine( item.Name );
			//file.WriteLine( time+"フレーム" );
		}
}
//Array_hako.sort();
//WScript.Echo( Array_hako );
//ここからHTML作成
file.WriteLine( '<?xml version="1.0" encoding="Shift_JIS"?>' );
file.WriteLine( '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' );
file.WriteLine( '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">' );
file.WriteLine( '<head>' );
file.WriteLine( '	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">' );
file.WriteLine( '	<title>'+name+'</title>' );
file.WriteLine( '	<link rel="stylesheet" type="text/css" href="../layout.css" />' );
file.WriteLine( '	<style type="text/css">' );
file.WriteLine( '		div.imagebox {' );
file.WriteLine( '		   border: solid 2px #000000;' );
file.WriteLine( '		   background-color: #eeeeff;' );
file.WriteLine( '		   width: 350px;' );
file.WriteLine( '		   float: left;' );
file.WriteLine( '		   margin: 5px;' );
file.WriteLine( '		}' );
file.WriteLine( '		p.image, p.caption {' );
file.WriteLine( '		   text-align: center;' );
file.WriteLine( '		   margin: 5px;' );
file.WriteLine( '		}' );
file.WriteLine( '		p.caption {' );
file.WriteLine( '		   border: solid 1px #000000;' );
file.WriteLine( '		   font-size: 80%;' );
file.WriteLine( '		   color: darkblue;' );
file.WriteLine( '		}' );
file.WriteLine( '		p.exp {' );
file.WriteLine( '			clear: left;' );
file.WriteLine( '		}' );
file.WriteLine( '	</style>' );
file.WriteLine( '</head>' );
file.WriteLine( '<body>' );
file.WriteLine( '	<!-- ヘッダ -->' );
file.WriteLine( '	<div id="footer"><h1><a href="../top.htm">'+name+'              Topへ</a></h1>' );
file.WriteLine( '	</div>' );


	for(var i=0; i<Array_hako.length; i++)
		{
			//WScript.Echo( Array_hako[i] );
			file.WriteLine( '	<div class="imagebox">' );
			file.WriteLine( '		<p class="image"><img src="'+Array_hako[i]+'.gif" alt="'+Array_hako[i]+'" ></p>' );
			file.WriteLine( '		<p class="caption">'+Array_hako[i]+'</p>' );
			file.WriteLine( '		<p class="caption">フレーム数：'+Array_hako[i+1]+'</p>' );
			file.WriteLine( '	</div>' );
			i = i + 1;
		}
file.WriteLine( '</body>' );
file.WriteLine( '</html>' );
file.Close();
fs = null;
objShell = null;

</script>
</job>

色々なサイトを参考にさせて頂きました。
ありがたやありがたや…
で、最後に上記で記載していたMov、AVI以外の対応ですが、
スクリプト38行目の
「 if(type == "QuickTime ムービー" || type == "ビデオ クリップ")」
この部分に動画ファイルの形式を【||】で追加していって下さい。
とりあえずAVIを足すなら、こんな感じです。
「 if(type == "QuickTime ムービー" || type == "ビデオ クリップ" || type == "AVI ファイル")」
これてAVIがHTMLに追加されると思います。

今後はこれをベースにPythonでもっと高機能な物を
作っていきたいですね。


以上です。