クリエイター手抜きプロジェクト[125]Illustrator CS2編 CSVデータ値に対応したメッシュを描く/古籏一浩

投稿:  著者:  読了時間:6分(本文:約2,700文字)


天気予報で雲の動きなどをメッシュにして表示してくれますが、今回のスクリプトはそのようなメッシュを描くものです。メッシュ情報の元となるのはCSV形式のデータになります。例えば以下のようなデータです。

0,10,20,30,40
22,15,6,9,32
16,22,18,2,0
15,19,25,30,25
40,35,45,5,15
25,19,25,35,22
7,11,9,5,15
35,25,35,40,9


これらの数値の範囲に応じて四角形と色を使って表現します。データの横の個数や縦の個数は自動判別されるため、特に指定する必要はありません。

スクリプトの使い方ですが、あらかじめCSV形式のデータを用意しておいてから実行してください。CSVファイルを選択するように尋ねてくるので、用意したCSVファイルを指定します。


rectW = 10; // メッシュの横幅
rectH = 10; // メッシュの縦幅
startX = x = 0; // 開始X座標
y = 400; // 開始Y座標
docObj = app.activeDocument;
filename = File.openDialog("CSVファイルを指定してください");
if (filename)
{
fileObj = new File(filename);
flag = fileObj.open("r");
if (flag == true)
{
while (!fileObj.eof)
{
pointData = fileObj.readln();
data = pointData.split(",");
for (i=0; i< data.length; i++)
{
drawRect(x, y, data[i]);
x = x + rectW;
}
x = startX;
y = y - rectH;
}
fileObj.close();
}else{
alert("CSVファイルが開けませんでした");
}
}

function setColor(r,g,b)
{
var tmpColor = new RGBColor();
tmpColor.red = r;
tmpColor.green = g;
tmpColor.blue = b;
return tmpColor;
}

function drawRect(x, y, value)
{
var drawColor = setColor(0,0,0);
if (value < 10) drawColor = setColor(0,0,128); // 暗い青
if ((value >= 10) && (value < 20)) drawColor = setColor(128,0,0);
// ↑暗い赤
if ((value >= 20) && (value < 30)) drawColor = setColor(0,128,0);
// ↑暗い緑
if ((value >= 30) && (value < 40)) drawColor = setColor(0,0,255);
// ↑明るい青
if (value >= 40) drawColor = setColor(255,255,192);
// ↑明るい黄色
var pObj = docObj.pathItems.rectangle(0,0,rectW,rectH);
pObj.filled = true; // 塗りあり
pObj.stroked = true; // 線あり
pObj.strokeWidth = 1; // 線幅1ポイント
pObj.fillColor = drawColor; // 塗りの色を指定
pObj.strokeColor = setColor(0,0,0); // 線の色を指定
pObj.translate(x,y); // 指定座標に移動
}


メッシュの色ですが、以下の部分で指定しています。

if (value < 10) drawColor = setColor(0,0,128); // 暗い青
if ((value >= 10) && (value < 20)) drawColor = setColor(128,0,0);
// ↑暗い赤
if ((value >= 20) && (value < 30)) drawColor = setColor(0,128,0);
// ↑暗い緑
if ((value >= 30) && (value < 40)) drawColor = setColor(0,0,255);
// ↑明るい青
if (value >= 40) drawColor = setColor(255,255,192);
// ↑明るい黄色

setColor()のカッコ内の値が「赤の輝度,緑の輝度,青の輝度」の順番になっています。value >=の後の数値を変更すると、どの範囲だったらこの色にするか、という指定ができます。色の指定範囲が多い場合には if ((〜〜〜)) の行をコピーして増やしてください。


【古籏一浩】openspc@po.shiojiri.ne.jp
< http://www.openspc2.org/ >

先日リサージュとかいう名前の会社から、スーツ買わないかみたいな勧誘の電話がかかってきました。電話帳には載せていないので、Webから入手した電話番号かなと思ったら、相手は住所を知りませんでした。Webには住所が掲載されているので、Webから入手すれば知っていて当然。となると、個人情報の出所が気になるところ。

まず、卒業名簿と、最初と二番目に入った会社は異なる電話番号なのでこれはありえません。地域の農事優先放送やタウンページなどNTT関連には掲載されていないので、これもないでしょう。市役所で閲覧できる住民情報は住所が掲載されているので、これも多分違う。

住所は長野県松本市○○1-3-3アとか長野県松本市○○1-3-3イのようにしておくか、長野県松本市○○1-3-3 2Fのようにしておけば個人情報の出所が分かるけど、相手はこちらの住所が分かっていないので、電話番号だけで推測するのは限界がありそう。もしくは単純に安い名簿を買っただけかもしれないけど。

ただ、電話を出た時に、裏で他の勧誘している女性の声が聞こえたので専門の会社に発注してやらせているのでしょう。ちゃんとデータベースに情報が入っているんだろうなと思って、職業を偽ったら、何と紙に鉛筆書きされたものを見ながら話している様子(笑) ナイスな会社!


photo
改訂第4版 JavaScript ポケットリファレンス
古籏 一浩
技術評論社 2006-10-18
おすすめ平均 star
starJavaScript仮免者以上の方へ
starバランスの良いバイブル
star中級者向けです。

[改訂版] PHP ポケットリファレンス 改訂新版 SQLポケットリファレンス 標準DOMスクリプティング JavaScript+DOMによるWebアプリデザインの基礎 JavaScript [改訂版] VBScriptポケットリファレンス




photo
Ajax逆引きクイックリファレンスWeb2.0対応for Windows & Macintosh
古籏 一浩
毎日コミュニケーションズ 2006-03
おすすめ平均 star
starAjaxの基本的な用途がわかる
starみやすくわかりやすい
star入門は不要な人向け
star知ってる人は使いやすい
starサンプル多いのが良い

Ajaxイン・アクション Ajax 実装のための基礎テクニック AJAX Webアプリケーション アイデアブック JavaScript逆引きクイックリファレンスfor Windows & Macintosh Googleマップ+Ajaxで自分の地図をつくる本  Google Maps API徹底活用

by G-Tools , 2007/04/16