クリエイター手抜きプロジェクト[185]Adobe Photoshop CS/CS2/CS3編 グーグルマップの色違いマーカーを大量生成する/古籏一浩

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


───────────────────────────────────
ルート案内機能がついて、ますます便利になったグーグルマップ。使っている人もたくさんいるでしょう。グーグルマップはAPIが公開されているので、自分のページに組み込んだりして使っている人もいるかと思います。

そのグーグルマップに表示されるピン=マーカーですが、赤色と決まっていて自由な色にすることができません。自由な色や形状にするカスタムマーカーの機能がありますが、作るのも面倒くさい人もいるはずです。

デフォルトのマーカーはG_DEFAULT_ICON.imageにマーカー画像のURLが入っており、ここを変更するだけで自由なマーカーを表示することができます。

そこで、Photoshopを使って、あらかじめ色が異なるマーカーを大量に作成してしまおうというのが今回のネタです。ネタとしては、かなりの力わざですが。



作成した色違いのマーカー画像をサーバーに用意しておけば、G_DEFAULT_ICON.imageにURL+カラーコードを指定するだけで使えるという手軽さです。なお、カラーコードはスタイルシートのfeaなど3桁で指定するものとし、先頭には16進数であることを示す0xをつけます。

●サンプル(一部のみ抜粋)

var marker = new GMarker(new GLatLng(38,138));
G_DEFAULT_ICON.image = "http://www.openspc2.org/Google/Maps/marker/color/0x"+"f0f"+".png";
map.addOverlay(marker);

マーカー画像はPNG形式になっていますが、一旦PSD形式で保存し後からバッチ処理でPNG形式に変換するものとします。

まず、マーカー画像の元ファイルを用意します。以下のようにレイヤーとアルファチャンネルを設定します。

●Photoshopのレイヤー構成
 レイヤー1(ここは乗算モードにしアクティブにした状態で保存)
 レイヤー0(マーカーのイラスト。通所のモード)
------------
 アルファチャンネルRGB
 アルファチャンネル レッド
 アルファチャンネル グリーン
 アルファチャンネル ブルー
 アルファチャンネル1(ここにマスクを作成しておく。色を変更する部分を白に)
------------

作成したら、ホームフォルダにdefault.psdという名前で保存します。ホームフォルダにmarkerという名前のフォルダを作成してから、以下のスクリプトを実行します。

16×16×16個、つまり4096個の色違いのマーカーを作成するので結構時間がかかります。食事前か寝る前に実行させておきましょう。無事にマーカーが作成できたら、バッチ処理でPNG形式に変換しサーバーにアップロードすればできあがりです。これで色違いのマーカーを手軽に使うことができます。

●スクリプト

(function(){
var colObj = new SolidColor();
for (var R=0; R< 256; R+=16) {
for (var G=0; G< 256; G+=16){
for (var B=0; B< 256; B+=16){
open(new File("%7E/default.psd"));
colObj.rgb.red = R;
colObj.rgb.green = G;
colObj.rgb.blue = B;
var chObj = activeDocument.channels[3];
activeDocument.selection.load(chObj);
activeDocument.selection.fill(colObj,ColorBlendMode.NORMAL, 100, false);
var RR = "00"+R.toString(16);
var GG = "00"+G.toString(16);
var BB = "00"+B.toString(16);
var Rstr = RR.substring(RR.length-2, RR.length-1);
var Gstr = GG.substring(GG.length-2, GG.length-1);
var Bstr = BB.substring(BB.length-2, BB.length-1);
var fileObj = new File("%7E/marker/"+"0x"+Rstr+Gstr+Bstr+".psd");
activeDocument.saveAs(fileObj);
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
}
}
}
})();


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

先々週の原稿で読者から質問があり、回答をデジクリブログに掲載してありますのでそちらを参照して下さい。
< http://bn.dgcr.com/archives/20081027140200.html#comment-8881 >

Bento2買ってみました。うまくスケジュール管理に使えるかどうかは謎ですが。
あと、今月末にInDesign CS2/CS3の自動化本がでます。
詳細は次回お知らせします。

photo
Google Maps API逆引きクイックリファレンス―WEB2.0対応
古籏 一浩
毎日コミュニケーションズ 2006-09
おすすめ平均 star
star簡単にできます
starようやく出ました。使えるGoogleMapsリファレンス。

Google Maps API徹底活用ガイド Google Maps APIv2活用リファレンス Google Maps Hacks 第2版 ―地図検索サービスをもっと活用するテクニック Googleマップ+Ajaxで自分の地図をつくる本  Google Maps API徹底活用 入門Webマッピング―自分で作るオリジナルのデジタル地図

by G-Tools , 2008/11/10