たくさんの画像の大きさをバブルチャートでだいたい把握する

ruby exif jQuery

たくさんの画像を扱わなければならない時、だいたいどんな大きさの画像が含まれているか確認しておきたいですよね。バブルチャートでぱっと見られたら便利かな、と思って書いてみました。

バブルチャートは横軸が幅（Image Width）、縦軸が高さ（Image Height）、それぞれ丸の大きさがファイル数を表しています。表はすべてのファイルのピクセル数と解像度が一覧でき、カラムごとにソートできるようになっています。
やってることは至って簡単です。rubyからExifToolでexifを得てHTML出力です。バブルチャートはjqPlot、表のカラムソートはTablesorterを使っています。どちらもjQueryのプラグインです。適宜ファイルパスなどを変えてお使いください。

#!/usr/bin/ruby
# -*- coding: utf-8 -*-

# pixels_statistical_chart.rb
# 2012-04-01

require 'mini_exiftool'

dot_size = 1 #バブルチャートの最小ドットサイズ

##exifデータの多重配列を得る（数字はString）
data_list = []
ARGV.each do |my_file|
	tmp_f = MiniExiftool.new(my_file)
	tmp_f_width = tmp_f['ImageWidth']
	tmp_f_height = tmp_f['ImageHeight']
	next if tmp_f_width === nil#幅がなければ次へ
	data_list.push([
		tmp_f['FileName'], 
		tmp_f_width.to_s, 
		tmp_f_height.to_s, 
		(tmp_f_width * tmp_f_height).to_s,
		tmp_f['XResolution'].to_s
	])

end


#同じサイズの画像の出現回数をカウント
count_hash = Hash.new(0)
data_list.each{|d_list|
	count_hash[d_list[1] + ',' + d_list[2]] += dot_size
}


#count_hashからチャート用データを生成
chart_data =[]
count_hash.each{|key, value|
	chart_data.push("[#{key},#{value}]")
}
chart_data = chart_data.join(',')


#data_listからtable用データを生成
table_data = ''
data_list.each{|item|
	table_data += "\t\t\t<tr>\n"
	item.each{|child_item|
		table_data += "\t\t\t\t<td>#{child_item}</td>\n"
	}
	table_data += "\t\t\t</tr>\n"
}


#ヒアドキュメントでHTML出力
print <<ENDHTML
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<title>pixels_statistical_chart</title>
		<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script language="javascript" type="text/javascript" src="dist/jquery.jqplot.min.js"></script>
		<script language="javascript" type="text/javascript" src="dist/plugins/jqplot.bubbleRenderer.min.js"></script>
		<script language="javascript" type="text/javascript" src="__jquery.tablesorter/jquery.tablesorter.js"></script>
		<link rel="stylesheet" type="text/css" href="main.css" />
		<link rel="stylesheet" type="text/css" href="dist/jquery.jqplot.min.css" />
		<link rel="stylesheet" type="text/css" href="__jquery.tablesorter/themes/blue/style.css" />
		
		<script>
jQuery( function() {
    jQuery . jqplot(
        'jqPlot-chart',
        [
            [ #{chart_data} ]
        ],
        {
            title: {
                text: 'ピクセル分布',
                show: true,
                fontFamily: 'sans-serif',
                fontSize: '20px',
                textAlign: 'center',
                textColor: '#704D22',
            },
            seriesDefaults: {
                renderer: jQuery . jqplot . BubbleRenderer,
            }
        }
    );
} );
		</script>

		<script>
$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 
		</script>
	</head>
	<body>
		<div id="jqPlot-chart" style="height: 500px; width: 500px;"></div>
		<table id="myTable" class="tablesorter" cellspacing="1">
		<thead> 
			<tr>
				<th>ファイル名</th>
				<th>幅（x pixcel）</th>
				<th>高さ（y pixcel）</th>
				<th>総ピクセル数（pixcel）</th>
				<th>解像度</th>
				</tr>
		</thead> 
		<tbody> 
#{table_data}
		</tbody> 
		</table>

	</body>
</html>
ENDHTML