クリエイター手抜きプロジェクト[233]ストリートビューもどき編(1)360度見渡せる画像を作る/古籏一浩

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


今回は自動化の話ではなく、自分でグーグルストリートビューもどきを作ってみようというネタです。実際に作ってみたのが以下のページにあります。グーグルストリートビューと違って見上げることはできず、左右をぐるりと見渡せるだけのものです。

●Local View
< http://www.openspc2.org/LocalView/ >

グーグルストリートビューには、プライバシーの問題とかいろいろありますが、ここでは怒られない程度にPhotoshopなどで加工する、という前提にしておきます。加工しておくと望ましいものは

・人物(特定できないようにする)
・車(ナンバーが分からないようにする)
・室内が映っていたら消す

といったところです。グーグルでは自動的に処理させているようですが、ここでは手作業で行います(Photoshopでは顔や車のナンバーをピックアップして周辺をぼかす、という事がJavaScriptからはできない。不可能ではないが遅すぎて無理。ちなみにBridgeならピクセルの処理が高速なので可能かも。でも、私には技術がないので無理)。

次に機材ですが、一眼レフに魚眼レンズを付けて撮影するという手もありますが、ここでは先月発売されたSONYのbloggieというデジカメを使います。



SONY モバイルHDスナップカメラ bloggie PM5K ブルー MHS-PM5K/L●モバイルHDスナップカメラ ブロギー(MHS-PM5K)
< http://www.sony.jp/bloggie/ >
< http://www.sony.jp/bloggie/products/MHS-PM5K/ >

このカメラは付属の360ビデオレンズをくっつけると、360度の画像や映像を写すことができます。映像は、別の機会にやるとして、まずは360度の静止画を撮影してストリートビューもどきを作ります。

この360度の画像ですが、写した状態ではドーナツ型の画像になっています。このため、専用のアプリケーションを使って360度ビデオコンバートする必要があります。映像でなく静止画の場合でも、360度ビデオコンバートを選択します。

すると、横長の360度画像に変換されます。これをそのまま使ってもよいのですが、車のナンバーや人物の顔が特定できてしまうといけません。そこで、画像を縮小することでそれらをわかりにくくします。人物も縮小することで判別が難しくなります(実際には塩尻市には人が歩いていなくて、じっさい一人しか写りませんでした。人物がたくさん写るのは都会だけの話っぽいです)。画像の縮小処理はPhotoshopのバッチ処理で行います。

便利なカメラですが、ひとつ問題があります。それは、GPS機能が内蔵されていないことです。そこで、別途GPS機器を購入するか、GPSが搭載された携帯+サーバーでどうにかするしかありません。幸い手元にはGARMIN社のGPS機があるので、これを使って位置情報を記録します。

以前の連載でも、このGPS機からのデータをIllustratorにプロットしました。今回は座標値だけをピックアップしてテキストファイルに保存します。それが以下のスクリプトになります。PhotoshopでもIllustratorでもESTKでも動作します(旧マクロメディア系のアプリは駄目)。


(function(){
var fileObj = File.openDialog("GPSデータファイル選択してください", "*", false);
if (!fileObj) return;
var savefile = File.saveDialog("保存ファイル名を入れてください");
if (!savefile) return;
if (!fileObj.open("r")) { alert("開けません"); return; }
if (!savefile.open("w")){ alert("保存できません"); return; }
while(!fileObj.eof){
var txt = fileObj.readln();
if (txt.indexOf(" <wpt lat=") == -1) continue;
var s = txt.indexOf('"', 12);
var lat = txt.substring(12, s);
var s = txt.indexOf('lon="')+5;
var e = txt.indexOf('"', s+5);
var lon = txt.substring(s, e);
savefile.writeln(lat+","+lon);
}
savefile.close();
})();


ここでピックアップされた座標データを、そのままJPEG画像ファイル名にします。つまり、以下の座標がピックアップされたとします(緯度経度がカンマ区切り)。

35.9659179,137.8142582
35.9659210,137.8141263
35.9659419,137.8140177
35.9659652,137.8141651

これを、そのままJPEG画像のファイル名にしてしまうわけです。

35.9659179,137.8142582.jpg
35.9659210,137.8141263.jpg
35.9659419,137.8140177.jpg
35.9659652,137.8141651.jpg

360度の画像を表示する時には「緯度,経度.jpg」とすれば、該当する画像が表示されることになります。

次回はブラウザで360度ぐるぐる見渡せるようにしてみます。

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

ここではGPSの緯度経度と写真を関連付けていますが、G社の人から「GPS機の時間と、写真を撮影した時間を関連付けた方が楽」と言われました。確かに緯度経度も一意*だし、撮影時間も一意なので近い時間で関連付けた方が間違いがなさそうです。でも、とりあえず手遅れ(笑)

*他に同じものがない、という意味。英語だとUnique(ユニーク)

毎度おなじみASCII.jpの連載もどうぞ。ほとんど知られていませんが、Bridgeでピクセル処理を行うネタです。PhotoshopでやるよりBridgeでやる方が、ピクセル処理に関しては簡単です。
・Photoshopを超えた!? BridgeとJSで作る画像フィルター
< http://ascii.jp/elem/000/000/500/500608/ >

photo
改訂第4版 JavaScript ポケットリファレンス
技術評論社 2006-10-18
おすすめ平均 star
star実用的で分かり易い
starJavaScriptを使ったプロジェクトのお供に是非
starJavaScript仮免者以上の方へ
starバランスの良いバイブル
star中級者向けです。

改訂第6版 HTML&スタイルシート ポケットリファレンス (POCKET REFERENCE) [改訂版] PHP ポケットリファレンス (Pocket reference) JavaScriptワークブック―ステップ30 (情報演習 (5)) 正規表現ポケットリファレンス (POCKET REFERENCE) JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス



photo
組版時間を半減する! InDesign自動処理実例集
技術評論社 2008-11-25
おすすめ平均 star
starこんな本を探してました
starプログラミング経験のない方も気軽に挑戦してほしいです

1ランク上の技を身につけるInDesignの強化書 (MYCOMムック +DESIGNING Professional Bible) InCopyとInDesignによるワークフロー革命 CS4 & CS3 対応 for Macintosh & Windows Adobe InDesign「文字組み」徹底攻略ガイド InDesign CS3の仕事術 InDesignレイアウト手帖

by G-Tools , 2010/03/01