parpue.net » flickr http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 マッシュアップ地図アルバムを作ってみる[Flickr+GoogleMaps+Flash] http://parpue.net/web/1070 http://parpue.net/web/1070#comments Sun, 19 Jul 2009 20:53:13 +0000 okm http://parpue.net/?p=1070 title

ちょっと前にas3flickrlibを使ってFlickrの緯度経度情報の取り方を調べた。

緯度経度情報が取れたのなら、やることはひとつ、
GoogleMaps上に表示だ。
さっそくGoogleMaps Flash API のリファレンスを見ながらしこしこ作ってみた。

以前の記事の下北GPSログの情報を流用した。

マーカーをクリックで該当箇所の画像が見られる。
地図上のラインは、KMLから緯度経度ルート情報を作成した、
外部ファイルから取得している。
リストはこんな感じ。
突貫で作ったので、今度余裕があったらコレをオサレ化してみようと思う。

Google API Key、 Flickr API Keyは伏せたソース一覧↓
＊以下のファイル他、as3flickrlibにちょっと手をいれてます。

GPSPhoto.as(メイン)

>>text
ACTIONSCRIPT:
  1. package {
  2. import com.adobe.webapis.flickr.PhotoSet;
  3. import com.google.maps.LatLng;
  4. import flash.display.Sprite;
  5. import flash.events.Event;
  6. import flash.events.IOErrorEvent;
  7. import flash.net.URLLoader;
  8. import flash.net.URLRequest;
  9.  
  10. public class GPSPhoto extends Sprite
  11. {
  12. private var csvURL:String = "shimokita.csv";
  13. private var setid:String = "72157620666800332";
  14.  
  15. private var gpsLoader:URLLoader;
  16. private var map:Gmap;
  17. private var flcon:FlickerConnector;
  18. private var flickrImageList:Array;
  19. private var photoSet:PhotoSet;
  20.  
  21. public function GPSPhoto()
  22. {
  23. // パラメータでGPSリストとPhotoSetのID取得
  24. if(loaderInfo.parameters.propertyIsEnumerable("csvURL")) this.csvURL = loaderInfo.parameters["csvURL"];
  25. if(loaderInfo.parameters.propertyIsEnumerable("setid")) this.csvURL = loaderInfo.parameters["setid"];
  26.  
  27. stage.align = "TL";
  28. stage.scaleMode = "noScale";
  29. map = new Gmap(750,600,this.mapReadyHandler);
  30. map.onMarkerClick = this.onMarkerClickHandler;
  31. this.addChild(map);
  32. }
  33.  
  34. private function mapReadyHandler(event:Event):void{
  35. var url:String = csvURL;
  36. var request:URLRequest = new URLRequest(url);
  37. gpsLoader = new URLLoader(request);
  38. gpsLoader.addEventListener(Event.COMPLETE, loadCompleteHandler);
  39. gpsLoader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
  40.  
  41. flcon = new FlickerConnector;
  42. flcon.onFail = this.onFlickrFailHandler;
  43. flcon.onGetInfo = this.onGetInfoHandler;
  44. flcon.onGetPhotos = this.onGetPhotosHandler;
  45.  
  46. flcon.getInfo(setid);
  47. }
  48.  
  49. private function onMarkerClickHandler(id:String):void{
  50. for(var i:Number = 0; this.flickrImageList.length; i++){
  51. var image:FlickrImage = flickrImageList[i];
  52. if(image.id == id){
  53. this.map.showPhoto(image.width_m, image.height_m, new LatLng(parseFloat(image.latitude), parseFloat(image.longitude)), image.title, image.url_m);
  54. break;
  55. }
  56. }
  57. }
  58.  
  59. private function loadCompleteHandler(event:Event):void{
  60. var lineGeoCSV:String = String(gpsLoader.data);
  61. var geoList:Array = lineGeoCSV.split(" ");
  62. var pointList:Array = new Array;
  63. for(var i:Number=0; i
  64. if(String(geoList[i])=="") continue;
  65. var infos:Array = String(geoList[i]).split(",");
  66. pointList.push(new LatLng(infos[1], infos[0]));
  67. }
  68. map.drawPolyline(pointList);
  69. }
  70.  
  71. private function onGetInfoHandler(photoset:PhotoSet):void {
  72. this.photoSet = photoSet;
  73. this.flcon.getPhotos(this.setid);
  74. }
  75.  
  76. // 画像一覧情報ロードの完了
  77. private function onGetPhotosHandler(flickrImageList:Array):void {
  78. this.flickrImageList = flickrImageList;
  79.  
  80. /*　次への布石
  81. for (var i:Number = 0; i <flickrImageList.length; i++) {
  82. var image:FlickrImage = flickrImageList[i];
  83. this.addChild(image.image);
  84. }*/
  85.  
  86. map.drawMarkers(flickrImageList);
  87. }
  88.  
  89. private function onFlickrFailHandler():void {
  90. // (^-^;;
  91. }
  92.  
  93. private function ioErrorHandler(event:IOErrorEvent):void{
  94. // (^-^;;
  95. }
  96. }
  97. }

Gmap.as 地図管理用

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3. import com.google.maps.InfoWindowOptions;
  4. import com.google.maps.LatLng;
  5. import com.google.maps.Map;
  6. import com.google.maps.MapEvent;
  7. import com.google.maps.MapMouseEvent;
  8. import com.google.maps.controls.MapTypeControl;
  9. import com.google.maps.controls.ZoomControl;
  10. import com.google.maps.overlays.Marker;
  11. import com.google.maps.overlays.MarkerOptions;
  12. import com.google.maps.overlays.Polyline;
  13. import com.google.maps.overlays.PolylineOptions;
  14. import com.google.maps.styles.FillStyle;
  15. import com.google.maps.styles.StrokeStyle;
  16.  
  17. import flash.display.Sprite;
  18. import flash.geom.Point;
  19. import flash.text.StyleSheet;
  20.  
  21. /**
  22. * ...
  23. * @author okm
  24. */
  25. public class Gmap extends Sprite
  26. {
  27. private var map:Map;
  28. private var markerList:Array;
  29.  
  30. public var onReady:Function;
  31. public var onMarkerClick:Function;
  32.  
  33. public function Gmap(width:Number,height:Number, onReady:Function)
  34. {
  35. this.onReady = onReady;
  36.  
  37. markerList = new Array;
  38.  
  39. map = new Map;
  40. map.addEventListener(MapEvent.MAP_READY, onReady);
  41. map.key = "Google Maps APIキー";
  42. map.addControl(new MapTypeControl());
  43. map.addControl(new ZoomControl());
  44. map.setSize(new Point(width, height));
  45.  
  46. this.addChild(map);
  47. }
  48.  
  49. public function drawPolyline(pointList:Array):void{
  50. var polyline:Polyline = new Polyline(
  51. pointList,
  52. new PolylineOptions({ strokeStyle: new StrokeStyle({
  53. color: 0x6481F5,
  54. thickness: 4,
  55. alpha: 0.7})
  56. }));
  57. this.map.addOverlay(polyline);
  58. this.map.setCenter(pointList[0],17);
  59. }
  60.  
  61. public function drawMarkers(flickrImageList:Array):void{
  62. for(var i:Number = 0; i <flickrImageList.length; i++){
  63. var image:FlickrImage = flickrImageList[i];
  64. var marker:Marker = new Marker(new LatLng(parseFloat(image.latitude), parseFloat(image.longitude)),
  65. new MarkerOptions({
  66. strokeStyle: new StrokeStyle({color: 0x666666}),
  67. fillStyle: new FillStyle({color: 0x6481F5, alpha: 0.8}),
  68. radius: 12,
  69. hasShadow: true
  70. }));
  71. marker.addEventListener(MapMouseEvent.CLICK, onMarkerClickHandler, false, 1, true);
  72. this.markerList.push({id:image.id, marker:marker});
  73. this.map.addOverlay(marker);
  74. }
  75. }
  76.  
  77. private function onMarkerClickHandler(event:MapMouseEvent):void{
  78. for(var i:Number = 0; i <markerList.length; i++){
  79. if(markerList[i].marker == event.target){
  80. if(this.onMarkerClick != null) this.onMarkerClick(markerList[i].id);
  81. continue;
  82. }
  83. }
  84. //map.panTo(event.target.getLatLng()); //マーカー座標へ移動
  85. }
  86.  
  87. public function showPhoto(width:Number, height:Number, latlng:LatLng, title:String, imageUrl:String):void {
  88. var style:StyleSheet = new StyleSheet();
  89.  
  90. var heading:Object = new Object();
  91. heading.fontWeight = "bold";
  92. heading.color = "#FF0000";
  93.  
  94. var body:Object = new Object();
  95. body.fontStyle = "italic";
  96. body.textAlign = "center";
  97.  
  98. style.setStyle(".heading", heading);
  99. style.setStyle("body", body);
  100.  
  101. // インフォウィンドウ　オープン
  102. map.openInfoWindow(latlng, new InfoWindowOptions( { width:width+20, height:height+35,hasCloseButton: true, contentHTML:"<span class="heading">"+title+"</span>
  103. <img src="&quot;+imageUrl+&quot;" alt="" />", contentStyleSheet:style, hasTail:false}));
  104. }
  105.  
  106. }
  107. }

FlickerConnector.as Flickr管理用

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3. import com.adobe.webapis.flickr.events.FlickrResultEvent;
  4. import com.adobe.webapis.flickr.FlickrService;
  5. import com.adobe.webapis.flickr.methodgroups.Photos;
  6. import com.adobe.webapis.flickr.methodgroups.PhotoSets;
  7. import com.adobe.webapis.flickr.Photo;
  8. import flash.display.Loader;
  9. import flash.display.LoaderInfo;
  10. import flash.display.Sprite;
  11. import flash.events.Event;
  12. import flash.events.IOErrorEvent;
  13. import flash.net.URLLoader;
  14. import flash.net.URLRequest;
  15. import flash.text.TextField;
  16.  
  17. /**
  18. * ...
  19. * @author okm
  20. */
  21. public class FlickerConnector
  22. {
  23. private var fls:FlickrService;
  24. private var photos:Photos;
  25. private var photoSets:PhotoSets;
  26. private var photoIndex:Number = 0;
  27.  
  28. private var _imageList:Array;
  29. private var _thumnailList:Object;
  30.  
  31. private var imageLoader:Loader; // 画像ローダ
  32.  
  33. public var onGetPhotos:Function;
  34. public var onGetInfo:Function;
  35. public var onFail:Function;
  36.  
  37. public function FlickerConnector()
  38. {
  39. this._imageList = new Array;
  40.  
  41. fls = new FlickrService("Flickr API キー");
  42.  
  43. photoSets = new PhotoSets(fls);
  44.  
  45. fls.addEventListener(FlickrResultEvent.PHOTOSETS_GET_PHOTOS, GetPhptosComplete)
  46. fls.addEventListener(FlickrResultEvent.PHOTOSETS_GET_INFO, GetInfoComplete)
  47.  
  48. }
  49.  
  50. public function getPhotos(setid:String):void{
  51. photoSets.getPhotosExtras(setid);
  52. }
  53.  
  54. public function getInfo(setid:String):void {
  55. photoSets.getInfo(setid);
  56. }
  57.  
  58. // 写真情報取得完了
  59. private function GetPhptosComplete(e:FlickrResultEvent):void {
  60. if (!e.success &amp;&amp; this.onFail != null) onFail();
  61.  
  62. //photoSetの写真のタイトルとURLを配列に格納
  63. for (var i:uint; i &lt;e.data.photoSet.photos.length ; i++) {
  64. var flickrImage:FlickrImage = new FlickrImage(e.data.photoSet.photos[i]);
  65. this._imageList.push(flickrImage);
  66. }
  67.  
  68. if (this.onGetPhotos != null) this.onGetPhotos(this._imageList);
  69. //getNextPhoto();
  70. }
  71.  
  72. /* 次への布石
  73. private function getNextPhoto():void {
  74. if (this.photoIndex&gt;= this._imageList.length) {
  75. // ロード完了
  76. if (this.onGetPhotos != null) this.onGetPhotos(this._imageList);
  77. return;
  78. }
  80. var image:FlickrImage = this._imageList[photoIndex];
  82. imageLoader = new Loader();
  84. var imageURLreq:URLRequest = new URLRequest(image.url_t);
  85. var imgInfo:LoaderInfo = imageLoader.contentLoaderInfo;
  86. imgInfo.addEventListener(Event.INIT, onImageInit);
  87. imgInfo.addEventListener(IOErrorEvent.IO_ERROR, onImageIOError);
  88. imageLoader.load(imageURLreq);
  89. }
  90. */
  91.  
  92. private function onImageInit(event:Event):void{
  93. var image:FlickrImage = this._imageList[photoIndex];
  94. image.image = this.imageLoader;
  95. this.photoIndex++;
  96. //getNextPhoto();
  97. }
  98.  
  99. private function onImageIOError(event:Event):void {
  100. if (this.onFail != null) onFail();
  101. }
  102.  
  103. private function GetInfoComplete(e:FlickrResultEvent):void {
  104. if (!e.success &amp;&amp; this.onFail != null) onFail();
  105. if (this.onGetInfo != null) this.onGetInfo(e.data.PhotoSet);
  106. }
  107.  
  108. }
  109.  
  110. }

FlickrImage.as　画像情報オブジェクト

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3. import com.adobe.webapis.flickr.Photo;
  4. import flash.display.DisplayObject;
  5.  
  6. /**
  7. * ...
  8. * @author okm
  9. */
  10. public class FlickrImage
  11. {
  12. public var id:String;
  13. public var title:String;
  14. public var latitude:String;
  15. public var longitude:String;
  16. public var url_m:String;
  17. public var url_t:String;
  18. public var width_t:Number;
  19. public var height_t:Number;
  20. public var width_m:Number;
  21. public var height_m:Number;
  22. public var image:DisplayObject;
  23.  
  24. public function FlickrImage(photo:Photo)
  25. {
  26. this.id = photo.id;
  27. this.title = photo.title;
  28. this.longitude = photo.longitude;
  29. this.latitude = photo.latitude;
  30. this.longitude = photo.longitude;
  31. this.url_m = photo.url_m;
  32. this.url_t = photo.url_t;
  33. this.width_m = photo.width_m;
  34. this.height_m = photo.height_m;
  35. this.width_t = photo.width_t;
  36. this.height_t = photo.height_t;
  37. }
  38. }
  39.  
  40. }
]]> http://parpue.net/web/1070/feed 0 Flashで緯度経度情報つきの画像情報をFlickrから受け取る。 http://parpue.net/web/996 http://parpue.net/web/996#comments Sun, 12 Jul 2009 17:42:36 +0000 okm http://parpue.net/?p=996 ちょっと前にも書いた気がするが、
最近は画像に、撮影した場所の緯度経度情報が埋め込める。
そんでもって、緯度経度の情報付きの画像を、
Flickrに保存しておくことができる。

というわけで、Flickrに位置情報付きの画像を置いておいて、
Flash＋GoogleMaps上に展開とかしたいなーと思って調べてみたところ、
FlsahからFlickrに接続するためのas3flickrlibというのを発見。
しかしこのライブラリが長いこと更新されていない・・・。

というわけで、作りたいものの下調べがてら、
このライブラリで位置情報である、
ジオタグ付きの情報を取得できるようにするやり方を調べた。

Photos.as, PhotoSets.asの２つのファイル
（訂正）Photos.as, PhotoSets.as, MethodGroupHelper.asの３つのファイルを、
以下な感じで修正すれば、ジオタグを取得できる。

■ Photos.as

>>text
ACTIONSCRIPT:
  1. private var _notes:Array;
  2.         private var _tags:Array;
  3.         private var _urls:Array;
  4.        
  5.         // okm add
  6.         private var _latitude:String;
  7.         private var _longitude:String;
>>text
ACTIONSCRIPT:
  1. public function get latitude():String {
  2.             return _latitude;
  3.         }
  4.         public function set latitude(value:String):void {
  5.             _latitude = value;
  6.             return;
  7.         }
  8.        
  9.        
  10.         public function get longitude():String {
  11.             return _longitude;
  12.         }
  13.         public function set longitude(value:String):void {
  14.             _longitude = value;
  15.             return;
  16.         }

■PhotoSets.as

>>text
ACTIONSCRIPT:
  1. //　okm add
  2.         public function getPhotosExtras( photoset_id:String ):void {
  3.             MethodGroupHelper.invokeMethod( _service, getPhotos_result,
  4.                                    "flickr.photosets.getPhotos",
  5.                                    false,
  6.                                    new NameValuePair( "photoset_id", photoset_id ),
  7.                                    new NameValuePair( "extras", "geo" )
  8.                                    );
  9.         }

extras にとりたい情報を適当に追加すれば、返してくれる情報も増える。

■MethodGroupHelper.as

>>text
ACTIONSCRIPT:
  1. for each ( var p:XML in xml.photoset.photo ) {
  2.                 var photo:Photo = new Photo();
  3.                 photo.id = p.@id.toString();
  4.                 photo.secret = p.@secret.toString();
  5.                 photo.title = p.@title.toString();
  6.                 photo.server = parseInt( p.@server );
  7.                
  8.                 // okm add
  9.                 photo.latitude = p.@latitude.toString();
  10.                 photo.longitude = p.@longitude.toString();
  11.                
  12.                 photoSet.photos.push( photo ); 
  13.             }

あとは、↓な感じで情報を取得すればOK.

>>text
ACTIONSCRIPT:
  1. fls = new FlickrService("APIキー");
  2. photoSets = new PhotoSets(fls);
  3. fls.addEventListener(FlickrResultEvent.PHOTOSETS_GET_PHOTOS, GetPhptosComplete);
  4. photoSets.getPhotosExtras("SetsのID");
  5. 〜〜〜〜
  6. private function GetPhptosComplete(e:FlickrResultEvent):void{
  7.     //photoSetの写真のタイトルとURLを配列に格納
  8.     for(var i:uint; i <e.data.photoSet.photos.length ;i++){
  9.         trace(e.data.photoSet.photos[i].title);
  10.         trace(e.data.photoSet.photos[i].id);
  11.         trace(e.data.photoSet.photos[i].latitude);     // 緯度経度も取得可能
  12.         trace(e.data.photoSet.photos[i].longitude);  //
  13.     }
  14. }

こんな感じで返してくれます。

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <rsp stat="ok">
  3. <photoset id="72157620666800332" primary="3666954753" owner="25111802@N08" ownername="----" page="1" per_page="500" perpage="500" pages="1" total="24">
  4.         <photo id="3666954753" secret="----" server="3541" farm="4" title="shimokita_0024" isprimary="1" latitude="35.665071" longitude="139.66531" accuracy="16" place_id="dtJZJhabCZm.78Qz9A" woeid="28528566" />
  5.         <photo id="3667761046" secret="----" server="3338" farm="4" title="shimokita_0023" isprimary="0" latitude="35.665002" longitude="139.665412" accuracy="16" place_id="dtJZJhabCZm.78Qz9A" woeid="28528566" />
  6.         <photo id="3666954587" secret="----" server="3323" farm="4" title="shimokita_0022" isprimary="0" latitude="35.663729" longitude="139.666517" accuracy="16" place_id="INaV6gKbCZlVrYnlFA" woeid="28528453" />
  7.         <photo id="3667760848" secret="----" server="2563" farm="3" title="shimokita_0020" isprimary="0" latitude="35.663106" longitude="139.667609" accuracy="16" place_id="INaV6gKbCZlVrYnlFA" woeid="28528453" />
  8.         <photo id="3667760770" secret="----" server="3300" farm="4" title="shimokita_0021" isprimary="0" latitude="35.662354" longitude="139.666976" accuracy="16" place_id="INaV6gKbCZlVrYnlFA" woeid="28528453" />
  9. </photoset>
  10. </rsp>

次は、実際にFlashでGoogleMapsへの展開を挑戦予定！

]]> http://parpue.net/web/996/feed 1