parpue.net » javascript http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 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 Google ストリートビューで鬼ごっこ http://parpue.net/web/259 http://parpue.net/web/259#comments Mon, 25 Aug 2008 11:07:00 +0000 okm http://parpue.net/?p=259 北海道までライジングサンを見に遊びにいってきました。ただいま！

今回は、現在までのストリートビューのプログラムを組み合わせて、
地図上を複数のキャラクターが動き回るサンプルを作ってみました。

クリックで新しいウィンドウにサンプル表示

一応IEでも確認しましたが、FireFox３環境を激しく推奨。
（IE謎のエラーがたまにでる・・・）

基本は、以前のサンプルの自動で動き回るキャラクターを複数にしただけです。
当たり判定とかも加えてゲームらしくしようかと思ったんですが、そこは挫折しましたｗ

↓以下ソース全部

>>text
JAVASCRIPT:
  1. var lastPanoId = null;         // 最後にいた場所のPanoID
  2. var nowLatLng;
  3. var map;
  4. var streetViewClient;
  5. var streetPanorama;
  6.  
  7. var enemyList = [];
  8. var enemyMarker;
  9.  
  10. var zakoIcon;
  11.  
  12. // GoogleMapsの初期化
  13. function initMap(lat, lng){
  14.     map = new GMap2(document.getElementById("map"));
  15.     map.disableDragging();
  16.     var ctrlObj = new GMapTypeControl();
  17.     var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
  18.     map.addControl(ctrlObj, pos);
  19.     map.setCenter(new GLatLng(lat, lng), 18);
  20.     initMarker();
  21.     initPanorama(lat, lng);
  22. }
  23.  
  24. function initMarker(){
  25.     zakoIcon = new GIcon();
  26.     zakoIcon.image = "./zako_front.gif";
  27.     zakoIcon.iconSize = new GSize(30, 57);
  28.     zakoIcon.iconAnchor = new GPoint(15, 57);
  29. }
  30.  
  31. function initPanorama(lat, lng){
  32.     streetViewClient = new GStreetviewClient;
  33.     streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
  34.     nowLatLng = new GLatLng(lat, lng);
  35.     streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
  36.         if(latlng == null){
  37.             document.getElementById("pano").style.display = "none";
  38.             return;
  39.         }
  40.         nowLatLng = latlng;
  41.         streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
  42.  
  43.         GEvent.addListener(streetPanorama,
  44.                            "yawchanged",
  45.                            function(yaw){
  46.                                changeYaw(yaw);
  47.                            });
  48.  
  49.         GEvent.addListener(streetPanorama,
  50.                            "initialized",
  51.                            function(location){
  52.                                panoramaInitialized(location);
  53.                            });
  54.     });
  55.  
  56.     // キャラクタを配置
  57.     enemyOptions = [ { lat:35.661821, lng:139.666685},
  58.              { lat:35.662404, lng:139.665810},
  59.              { lat:35.66215,  lng:139.665270}           
  60.                       ];
  61.     for(i = 0; i <enemyOptions.length; i++){
  62.         var enemy = new Object;
  63.         enemy.lat = enemyOptions[i]["lat"];
  64.         enemy.lng = enemyOptions[i]["lng"];
  65.         enemy.marker = new GMarker(new GLatLng(enemy.lat, enemy.lng),{draggable:false, icon:zakoIcon});
  66.         map.addOverlay(enemy.marker);
  67.     enemy.moveInterval = setInterval("toNextPanorama("+i+")", 2000);
  68.         enemyList[i] = enemy;
  69.     }
  70. }
  71.  
  72. // 次の位置へ移動
  73. function toNextPanorama(enemy_num){
  74.     var enemy = enemyList[enemy_num];
  75.     clearInterval(enemy.moveInterval);
  76.  
  77.     enemy.pt = map.fromLatLngToContainerPixel(new GLatLng(enemy.lat, enemy.lng));
  78. /*
  79.     if(enemy.pt.x> 210 && enemy.pt.x <230 && enemy.pt.y> 192 && enemy.pt.y <270){
  80.         //alert("hit");
  81.     }
  82. */
  83.  
  84.     // 現在の表示位置の緯度経度を取得
  85.     streetViewClient.getNearestPanorama(new GLatLng(enemy.lat, enemy.lng), function(streetData){
  86.         var neighbourCount = streetData.links.length; // 隣接するパノラマの数
  87.         var nextPanoId; // 次に向かうパノラマのID
  88.         if(neighbourCount == 1){
  89.             // 隣接するパノラマが１つだった場合はそこへ移動
  90.             enemy.nextYaw = streetData.links[0].yaw;
  91.             nextPanoId = streetData.links[0].panoId;
  92.         }else{
  93.              while(1){
  94.                  i = Math.floor( Math.random() * neighbourCount );
  95.                  if(enemy.lastPanoId != streetData.links[i].panoId){
  96.                  nextPanoId = streetData.links[i].panoId;
  97.                  enemy.nextYaw = streetData.links[i].yaw;
  98.                  break;
  99.             }
  100.         }
  101.     }
  102.     enemy.lastPanoId = streetData.location.panoId;     // 今いた場所を覚えておく
  103.     streetViewClient.getPanoramaById( nextPanoId,
  104.                                   function(nextStreetData){
  105.  
  106.                                                        enemy.nowLatLng = nextStreetData.location.latlng;
  107.                                                        var pov = streetPanorama.getPOV();
  108.                                                        nowYaw = pov.yaw;
  109.                                                        if(nowYaw> 360) nowYaw -= 360;
  110.                                                        if(Math.abs(nowYaw - enemy.nextYaw)> 180){
  111.                                                                if(nowYaw> enemy.nextYaw) enemy.nextYaw += 360;           
  112.                                                        }
  113.  
  114.                                                                map.removeOverlay(enemy.marker);
  115.                                                                zakoIcon.image = getIconFromYaw(enemy.nextYaw);
  116.                                    enemy.marker = new GMarker(new GLatLng(enemy.nowLatLng.lat(), enemy.nowLatLng.lng()),{draggable:false, icon:zakoIcon});
  117.                                                                map.addOverlay(enemy.marker);
  118.                                    enemy.lat = enemy.nowLatLng.lat();
  119.                                    enemy.lng = enemy.nowLatLng.lng();
  120.                                    enemy.pt = map.fromLatLngToContainerPixel(enemy.nowLatLng);
  121.  
  122. /*
  123.                                    if(enemy.pt.x> 210 && enemy.pt.x <230 && enemy.pt.y> 192 && enemy.pt.y <270){
  124.                                    //alert("hit");
  125.                                    }
  126. */
  127.                                                                enemy.moveInterval = setInterval("toNextPanorama("+enemy_num+")", 2000);
  128.                                                                enemyList[enemy_num] = enemy;
  129.                                       }
  130.                                  );
  131.  
  132.      });
  133. }
  134.  
  135. function getIconFromYaw(yaw){
  136.     gifFile = "./zako_f.gif";
  137.     if( yaw> 360 ) yaw -= 360;
  138.     if( yaw>= 315 || yaw <45  ) gifFile = "./zako_back.gif";
  139.     else if( yaw>= 45 && yaw < 135 ) gifFile = "./zako_right.gif";
  140.     else if( yaw>= 135 && yaw < 225 ) gifFile = "./zako_front.gif";
  141.     else if( yaw>= 225 || yaw <315 ) gifFile = "./zako_left.gif";
  142.     return gifFile;
  143. }
  144.  
  145. function changeYaw(yaw){
  146.     var gifFile;
  147.     if( yaw> 360 ) yaw -= 360;
  148.     if( yaw>= 315 || yaw <45  ) gifFile = "ue.gif";
  149.     else if( yaw>= 45 && yaw < 135 ) gifFile = "migi.gif";
  150.     else if( yaw>= 135 && yaw < 225 ) gifFile = "shita.gif";
  151.     else if( yaw>= 225 || yaw <315 ) gifFile = "hidari.gif";
  152.     document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
  153. }
  154.  
  155. function panoramaInitialized(location){
  156.     map.panTo(location.latlng);
  157. }
]]> http://parpue.net/web/259/feed 1 ストリートビューと地図の連携 http://parpue.net/web/249 http://parpue.net/web/249#comments Wed, 13 Aug 2008 11:24:12 +0000 okm http://parpue.net/?p=249 前回は、自動で下北をぐるぐる歩き回らせるのを作りましたが、
今回はストリートビューを自分でマウスで移動させて、地図のほうの位置を変更させるという、
まさに、本家でやれ！なものを作って見ました。
自動でウロウロに比べたら簡単。
動きは本家と変わらないですが、しいて言うならキャラクタが向き変えるところでしょうか。

前回の自動でウロウロと、今回の自分でウロウロ組み合わせると、
ストリートビュー鬼ごっこゲームができそうですね。


↓今回はストリートビューのほうをマウスで操作

ストリートビューの角度の変更イベントが yawchanged、
位置の変更イベントが initialized で得られます。
それに応じて、キャラクターの向きと、地図の位置を変更してやっています。

ソースコード全部

>>text
JAVASCRIPT:
  1. var lastPanoId = null;         // 最後にいた場所のPanoID
  2. var nowLatLng;
  3. var map;
  4. var streetViewClient;
  5. var streetPanorama;
  6.  
  7. // GoogleMapsの初期化
  8. function initMap(lat, lng){
  9.    map = new GMap2(document.getElementById("map"));
  10.    map.disableDragging();
  11.    var ctrlObj = new GMapTypeControl();
  12.    var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
  13.    map.addControl(ctrlObj, pos);
  14.    map.setCenter(new GLatLng(lat, lng), 18);
  15.    initPanorama(lat, lng);
  16. }
  17.  
  18. function initPanorama(lat, lng){
  19.     streetViewClient = new GStreetviewClient;
  20.     streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
  21.     nowLatLng = new GLatLng(lat, lng);
  22.     streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
  23.         if(latlng == null){
  24.             document.getElementById("pano").style.display = "none";
  25.             return;
  26.         }
  27.         nowLatLng = latlng;
  28.         streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
  29.  
  30.         GEvent.addListener(streetPanorama,
  31.                            "yawchanged",
  32.                            function(yaw){
  33.                                changeYaw(yaw);
  34.                            });
  35.  
  36.         GEvent.addListener(streetPanorama,
  37.                            "initialized",
  38.                            function(location){
  39.                                panoramaInitialized(location);
  40.                            });
  41.  
  42.  
  43.     })
  44. }
  45.  
  46. function changeYaw(yaw){
  47.     var gifFile;
  48.     if( yaw> 360 ) yaw -= 360;
  49.     if( yaw>= 315 || yaw <45  ) gifFile = "/common/image/ue.gif";
  50.     else if( yaw>= 45 && yaw < 135 ) gifFile = "/common/image/migi.gif";
  51.     else if( yaw>= 135 && yaw < 225 ) gifFile = "/common/image/shita.gif";
  52.     else if( yaw>= 225 || yaw <315 ) gifFile = "/common/image/hidari.gif";
  53.     document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
  54. }
  55.  
  56. function panoramaInitialized(location){
  57.     map.panTo(location.latlng);
  58. }

そういえば、私事ですが、結婚パーティーではここでも書いた、
ビンゴの景品のクジ用のAirアプリを無事プロジェクターで動作させることができました。

ものを作って人に喜んでもらうのは、本当にうれしいですね。

ライブのほうも無事(?)成功しました。
レポートはバンドのホームページのほうに、書こうかなと思います。

ところで、前から開発合宿みたいなものを一度してみたかったんですが、
今度それが叶いそうです。

2泊3日で、どんなものができるのか、このBlogでもレポートしていきたいと思います。8/22~24 の予定。

]]> http://parpue.net/web/249/feed 0 Googleストリートビューでもっと下北をウロウロさせる！ http://parpue.net/web/241 http://parpue.net/web/241#comments Thu, 07 Aug 2008 08:59:34 +0000 okm http://parpue.net/?p=241 前作ったやつを、もうちょっと作りこみ。
曲がるときもっとスムーズに曲がってくれるようにして、歩くスピードをアップ。

ちょっとコレで、ゲームなぞ作ってみようかなーとか。

FlashPlayer9必須みたいです。
環境によってはすごい重いかもしれません。

↓実行サンプルとソース

曲がるときのイージングをJavaScriptのタイマーで強引にやって、
もっとさくさく歩くようにしました。

setInterval で角度をちょっとずつ動かしています。

>>text
JAVASCRIPT:
  1. // onEnterFrame的になめらかに曲がる
  2. function yawPan(){
  3.      var pov = streetPanorama.getPOV();
  4.      if(Math.abs( nowYaw - nextYaw ) <5 ){
  5.          clearInterval(yawInterval);
  6.          moveNextPanorama();
  7.      }else{
  8.          nowYaw += (nextYaw - nowYaw) * 0.2;
  9.          pov.yaw = nowYaw;
  10.          streetPanorama.setPOV(pov);
  11.      }
  12. }

たまに隣のポジションの緯度経度の取得に失敗することがあるようですが、
基本的には、ほっとくとどこまでも歩いていきます。

緯度経度取得に頼らないで、panoIDで隣を取得していくように変えようかしら。

↓以下ソース全部

>>text
JAVASCRIPT:
  1. var lastPanoId = null;         // 最後にいた場所のPanoID
  2. var nowLatLng;
  3. var map;
  4. var streetViewClient;
  5. var streetPanorama;
  6. var nextYaw;      // 次に向かう方向
  7. var nowYaw;
  8.  
  9. var moveInterval; // 移動のインターバル用
  10. var yawInterval;  // 向きを変えてから移動するため
  11. function initMap(lat, lng){
  12.    map = new GMap2(document.getElementById("map"));
  13.    map.disableDragging();
  14.    var ctrlObj = new GMapTypeControl();
  15.    var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
  16.    map.addControl(ctrlObj, pos);
  17.    map.setCenter(new GLatLng(lat, lng), 18);
  18.    initPanorama(lat, lng);
  19. }
  20.  
  21. function initPanorama(lat, lng){
  22.    streetViewClient = new GStreetviewClient;
  23.    streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
  24.    nowLatLng = new GLatLng(lat, lng);
  25.    streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
  26.     if(latlng == null){
  27.         document.getElementById("pano").style.display = "none";
  28.             return;
  29.         }
  30.     nowLatLng = latlng;
  31.         streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
  32.  
  33. /* 移動時に手動で変更
  34.     GEvent.addListener(streetPanorama,
  35.                                 "yawchanged",
  36.                                 function(yaw){
  37.                                     changeYaw(yaw);
  38.                                 });       
  39. */
  40.         // 3秒後に移動
  41.         moveInterval = setInterval(toNextPanorama, 2000);
  42.    })
  43.  
  44. }
  45.  
  46. function changeYaw(yaw){
  47.     var gifFile;
  48.     if( yaw> 360 ) yaw -= 360;
  49.     if( yaw>= 315 || yaw <45  ) gifFile = "/common/image/ue.gif";
  50.     else if( yaw>= 45 && yaw < 135 ) gifFile = "/common/image/migi.gif";
  51.     else if( yaw>= 135 && yaw < 225 ) gifFile = "/common/image/shita.gif";
  52.     else if( yaw>= 225 || yaw <315 ) gifFile = "/common/image/hidari.gif";
  53.     document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
  54. }
  55.  
  56. // 現在の表示位置から一番近いStreetViewDataを取得し、そこから隣接するパノラマに移動する
  57. function toNextPanorama(){
  58.    clearInterval(moveInterval);
  59.    // 現在の表示位置の緯度経度を取得
  60.    streetViewClient.getNearestPanorama(nowLatLng, function(streetData){
  61.  
  62.         var neighbourCount = streetData.links.length; // 隣接するパノラマの数
  63.  
  64.     var nextPanoId; // 次に向かうパノラマのID
  65.     if(neighbourCount == 1){
  66.             // 隣接するパノラマが１つだった場合はそこへ移動
  67.             nextYaw = streetData.links[0].yaw;
  68.         nextPanoId = streetData.links[0].panoId;
  69.         }else{
  70.            while(1){
  71.                i = Math.floor( Math.random() * neighbourCount );
  72.                if(lastPanoId != streetData.links[i].panoId){
  73.                     nextPanoId = streetData.links[i].panoId;
  74.                     nextYaw = streetData.links[i].yaw;
  75.                     break;
  76.                }
  77.            }
  78.         }
  79.         lastPanoId = streetData.location.panoId;     // 今いた場所を覚えておく
  80.         streetViewClient.getPanoramaById( nextPanoId,
  81.                                           function(nextStreetData){
  82.                                               nowLatLng = nextStreetData.location.latlng;
  83.                                               var pov = streetPanorama.getPOV();
  84.                                               nowYaw = pov.yaw;
  85.                                               if(nowYaw> 360) nowYaw -= 360;
  86.                                               if(Math.abs(nowYaw - nextYaw)> 180){
  87.                                                   if(nowYaw> nextYaw) nextYaw += 360;
  88.                                                   else nowYaw += 360;
  89.                                               }
  90.                                               yawInterval = setInterval(yawPan, 100);
  91.  
  92.                                           }
  93.                                          );
  94.    }
  95.    );
  96. }
  97.  
  98. // onEnterFrame的になめらかに曲がる
  99. function yawPan(){
  100.      var pov = streetPanorama.getPOV();
  101.      if(Math.abs( nowYaw - nextYaw ) <5 ){
  102.          clearInterval(yawInterval);
  103.          moveNextPanorama();
  104.      }else{
  105.          nowYaw += (nextYaw - nowYaw) * 0.2;
  106.          pov.yaw = nowYaw;
  107.          streetPanorama.setPOV(pov);
  108.      }
  109. }
  110.  
  111. function moveNextPanorama(){
  112.     clearInterval(yawInterval);
  113.     // さらに次のポイントへ移動へ
  114.     map.panTo(nowLatLng);
  115.  
  116.     // 移動
  117. 　　changeYaw(nextYaw);
  118.     streetPanorama.followLink(nextYaw);
  119.     moveInterval = setInterval(toNextPanorama, 1500);
  120. }
]]> http://parpue.net/web/241/feed 0 Googleストリートビューで勝手に下北沢周辺を散歩するやつ作ってみた http://parpue.net/web/196 http://parpue.net/web/196#comments Wed, 06 Aug 2008 09:59:44 +0000 okm http://parpue.net/?p=196

Googleストリートビュー、日本地域も対応して、にぎやかな事になってますね。
自分の住んでるところとか、なつかしのあの場所とか見ると本当におもしろい！

周囲を360度パノラマで見ることができることにもびっくりです。

というわけで、さっそくGoogleMapsと、このストリートビューを使って、
下北界隈を勝手に散歩するようなものを作ってみた。

↓以下続き

画像は、マウスドラッグやアイコンクリックで回転することができます。
キャラクタが向いている方向が、表示されている画像の方向です。
移動については制御不能です。勝手に散歩し続けます。

まだリファレンスの日本語化ができていないようなので、
→http://code.google.com/intl/en/apis/maps/documentation/reference.html　
を読みながら作ってみました。

独特な関数が多かったですが、作ってて面白かったです。

今回目をつけたのが、GStreetviewDataクラスのlinkパラメータ。
「Array of GStreetviewLink」
Links to neighbouring panoramas, if any. (Since 2.104)

とあり、お隣のパノラマ画像がある位置の情報が取れるようです。

あとは迷路プログラムのような感じで作り上げました。

現在位置から移動できる隣接のポイントを取得
　↓
取得したもののうち、前いたポイントではないものを選択して移動

コレを繰り返すことによって、
直線を進み、交差点ではランダムに曲がります。

以下ソースコード全文です。initMap(緯度、経度)でお散歩スタートです。

>>text
JAVASCRIPT:
  1. var lastPanoId = null;         // 最後にいた場所のPanoID
  2. var nowLatLng;
  3. var map;
  4. var streetViewClient;
  5. var streetPanorama;
  6. var moveInterval;
  7.  
  8. function initMap(lat, lng){
  9.    map = new GMap2(document.getElementById("map"));
  10.    map.disableDragging();
  11.    var ctrlObj = new GMapTypeControl();
  12.    var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
  13.    map.addControl(ctrlObj, pos);
  14.    map.setCenter(new GLatLng(lat, lng), 18);
  15.    initPanorama(lat, lng);
  16. }
  17.  
  18. function initPanorama(lat, lng){
  19.    streetViewClient = new GStreetviewClient;
  20.    streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
  21.    nowLatLng = new GLatLng(lat, lng);
  22.    streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
  23.        if(latlng == null){
  24.            document.getElementById("pano").style.display = "none";
  25.            return;
  26.        }
  27.        nowLatLng = latlng;
  28.        streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
  29.  
  30.        GEvent.addListener(streetPanorama,
  31.                           "yawchanged",
  32.                           function(yaw){
  33.                               changeYaw(yaw);
  34.                           });
  35.  
  36.         // 3秒後に移動
  37.         moveInterval = setInterval(toNextPanorama, 3000);
  38.    })
  39. }
  40.  
  41. function changeYaw(yaw){
  42.     var gifFile;
  43.     if( yaw>= 315 || yaw <45  ) gifFile = "/common/image/ue.gif";
  44.     else if( yaw>= 45 && yaw <135 ) gifFile = "/common/image/migi.gif";
  45.     else if( yaw>= 135 && yaw <225 ) gifFile = "/common/image/shita.gif";
  46.     else if( yaw>= 225 || yaw <315 ) gifFile = "/common/image/hidari.gif";
  47.     document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
  48. }
  49.  
  50. // 現在の表示位置から一番近いStreetViewDataを取得し、そこから隣接するパノラマに移動する
  51. function toNextPanorama(){
  52.     clearInterval(moveInterval);
  53.     // 現在の表示位置の緯度経度を取得
  54.     streetViewClient.getNearestPanorama(nowLatLng, function(streetData){
  55.         var neighbourCount = streetData.links.length; // 隣接するパノラマの数
  56.  
  57.         var nextYaw; // 次に向かう方向
  58.         var nextPanoId; // 次に向かうパノラマのID
  59.         if(neighbourCount == 1){
  60.             // 隣接するパノラマが１つだった場合はそこへ移動
  61.             nextYaw = streetData.links[0].yaw;
  62.             nextPanoId = streetData.links[0].panoId;
  63.         }else{
  64.             while(1){
  65.                i = Math.floor( Math.random() * neighbourCount );
  66.                if(lastPanoId != streetData.links[i].panoId){
  67.                     nextPanoId = streetData.links[i].panoId;
  68.                     nextYaw = streetData.links[i].yaw;
  69.                     break;
  70.                }
  71.            }
  72.         }
  73.         lastPanoId = streetData.location.panoId;     // 今いた場所を覚えておく
  74.         streetViewClient.getPanoramaById( nextPanoId,
  75.                                           function(nextStreetData){
  76.                                               nowLatLng = nextStreetData.location.latlng;
  77.                                               // 目的地へGO！
  78.                                               //streetPanorama.setLocationAndPOV( nowLatLng, {yaw:nextYaw, pitch:0, zoom:-1});
  79.                                               streetPanorama.followLink(nextYaw);
  80.                                               map.panTo(nowLatLng);
  81.                                               //streetPanorama.setPOV({yaw:nextYaw, pitch:0, zoom:-1});
  82.                                               moveInterval = setInterval(toNextPanorama, 3000);
  83.                                           }
  84.                                          );
  85.    }
  86.    );
  87. }

ちなみにコレを応用したものを millon でも利用してみました。

]]> http://parpue.net/web/196/feed 1 GoogleMaps にカスタムウィンドウを表示する。 http://parpue.net/web/71 http://parpue.net/web/71#comments Wed, 23 Jul 2008 07:26:47 +0000 okm http://parpue.net/?p=71 ここで書いた記事の転載と、補足

Google Maps API には、InfoWindowという、
地図上にウィンドウを表示するための機能が備わっています。

このウィンドウは地図上に情報を表示する分には、
十分な機能を持っています。

しかしmillon.jpで使用するにあたって、サイトのイメージと
表示されるウィンドウのイメージが若干合わなかったため、
自分でデザインしたウィンドウを表示しました。
g1
google maps のinfowindow
自分でつくったウィンドウ
自分で作ったウィンドウを表示

GoogleMaps は画像やHTML要素を、オーバーレイ要素として
地図上に貼り付けることができます。

その機能を用いて、DIV要素を独自のウィンドウとしてGoogleMaps上に貼り付けます。

実行テスト

カスタムウィンドウの表示のための手順ですが、
まずは地図や、カスタムウィンドウとして表示するDIVを準備しておきます。

>>text
HTML:
  1. <div style="position:relative">
  2. <div id="map" style="width:400px;height:400px;">
  3. </div>
  4. <div id="ci_div" style="position:absolute;width:100px;height:100px;border:solid 1px;background-color:#FFF;">カスタムウィンドウです！</div>
  5. </div>

* ピクセル位置でカスタムウィンドウの位置を指定する必要があるため、
一番外側を position="relative"を指定したDIVで囲む必要があります。

GoogleMaps APIで定義されているGOverLayインターフェースを実装したクラスを作成します。
このクラスのインスタンスをaddOverlayすることで、
GoogleMap上にオーバーレイとして貼り付けることができます。

>>text
JAVASCRIPT:
  1. // 地図の表示
  2.     map = new GMap2(document.getElementById("map"));
  3.     map.setCenter(new GLatLng(35.67431, 139.69082),13);
  4.  
  5.     // オーバーレイ用のDIV
  6.     var customInfoDIV = document.getElementById("ci_div");
  7.     // GOverlayインターフェースを実装するcustomBoxクラスを作成
  8.     function customBox(){}
  9.     customBox.prototype = new GOverlay();
  10.     customBox.prototype.initialize = function(map){
  11.         // GoogleMap上に定義されているPaneのうち、マーカーと同じ高さに
  12.         // カスタムウィンドウ用のDIVを追加。
  13.         map.getPane(G_MAP_MARKER_PANE).appendChild(customInfoDIV);
  14.         customInfoDIV.style.zIndex = 300000;
  15.     }
  16.     customBox.prototype.remove = function() {
  17.         map.getPane(G_MAP_MARKER_PANE).removeChild(customInfoDIV);
  18.     }
  19.     customBox.prototype.copy = function() {
  20.         return new customBox();
  21.     }
  22.     customBox.prototype.redraw = function(force){}
  23.     // customBoxをオーバーレイとして貼り付ける
  24.     customInfoWindow = new customBox();
  25.     map.addOverlay(customInfoWindow);

GMap2.getPaneでGoogleMaps上で定義されているレイアにアクセスすることができますので、
今回は、マーカーが表示されるレイアと同じ高さにウィンドウが表示されるようにしています。
では、この貼り付けたオーバーレイを操作できる関数を用意して、
InfoWindowのような動きをさせれば完成です。

>>text
JAVASCRIPT:
  1. // 指定位置の緯度経度にウィンドウ表示
  2. function openWindowLatLng(msg, lat, lng){
  3.     var marker_pixls = map.fromLatLngToDivPixel(new GLatLng(lat, lng));
  4.     var x = marker_pixls.x ;
  5.     var y = marker_pixls.y ;
  6.     openWindowXY(msg, marker_pixls.x, marker_pixls.y);
  7. }
  8.  
  9. // 指定のピクセル位置にウィンドウ表示
  10. function openWindowXY(msg, x, y){
  11.    map.removeOverlay(customInfoWindow);
  12.    customInfoDIV.style.display = "block";
  13.    customInfoDIV.style.zIndex = 4000000;
  14.    customInfoDIV.style.postion = "absolute";
  15.    customInfoDIV.style.top = y + "px";
  16.    customInfoDIV.style.left = x + "px";
  17.    customInfoDIV.innerHTML = msg;
  18.    map.addOverlay(customInfoWindow);
  19. }
  20.  
  21. // ウィンドウ閉じる
  22. function closeWindow(){
  23.    map.removeOverlay(customInfoWindow);
  24. }

DIVを装飾してウィンドウとし、好きな位置に表示することができるようになります。

＊ただし、このウィンドウは地図のスクロールには追従しますが、
拡大率が変わった場合には、ピクセル位置の指定が緯度経度とずれてしまいます。
そのため、ズームのイベント時に再表示する必要があります。

]]> http://parpue.net/web/71/feed 0 wordpress に addthis を追加 http://parpue.net/wordpress/37 http://parpue.net/wordpress/37#comments Wed, 09 Jul 2008 03:35:39 +0000 okm http://parpue.net/?p=37 してみた。
有名なソーシャルブックマークへのリンクをつけるやつです。

■addthis

JavaScriptで、オーバーレイ表示。

addthisで配布しているプラグインとコードだとちょっと不十分だったので、
wordpressテンプレートに以下のように書いて表示確認。

>>text
JAVASCRIPT:
  1. <script type="text/javascript">
  2. addthis_pub = 'masahyro'; // 登録したユーザ名
  3. </script>
  4. <a href="http://www.addthis.com/bookmark.php" onMouseOver="return addthis_open(this, '', '<?php the_permalink();?>', '<?php the_title();?>')" onMouseOut="addthis_close()" onClick="return addthis_sendto()">
  5. <!-- ↓それぞれのaddthisのURLは登録時にもらえる -->
  6. <img src="http://xx.addthis.com/button1-bm.gif" width="125" height="16" border="0" alt="" />
  7. </a><script type="text/javascript" src="http://xx.addthis.com/js/xxx/addthis_widget.js">
  8. </script>
]]> http://parpue.net/wordpress/37/feed 0 ModalBox.js にタイムアウト処理などを加える http://parpue.net/web/29 http://parpue.net/web/29#comments Tue, 01 Jul 2008 03:37:43 +0000 okm http://parpue.net/?p=29 ■ModalBoxでつくるMacOS X風ダイアログ
■modalbox.js

modalbox

このライブラリ、millon.jpで随所に利用しています。
アップデートも頻繁で、今も進化を続けているようです。

サイトで利用する際、新しいリクエストをダイアログに表示する場合、
データの取得をタイムアウトする処理がなかったので、どうにか追加してみた。
（進化してるからそのうち追加されそうだけど）

ModalBoxには↓のようなCallBackが用意されています。(ver.1.6.0)

  • beforeLoad - コンテンツロード前に呼ばれる
  • afterLoad - コンテンツロード後に呼ばれる
  • beforeHide - ダイアログが隠れる前に呼ばれる
  • afterHide - ダイアログが隠れた後に呼ばれる
  • afterResize - ダイアログのサイズ変更後に呼ばれる
  • onShow - ダイアログが表示されたときに呼ばれる
  • onUpdate - ダイアログのコンテンツが更新されたときに呼ばれる

これに タイムアウトなどの処理を加えたいと思います。

こういう外部のライブラリを使う場合、
僕はなるべく元ファイルには手を入れず、まるごとラップしたクラスに処理を追加するようにしています。

Dialoger というModalBoxをラップするような、新しいクラスを作ることにしました。

クラス定義

>>text
JAVASCRIPT:
  1. // Dialogerクラス for ModalBox 1.6.0
  2.   function Dialoger(){
  3.       var ref = this;
  4.       this.timeout = 0 // msec, if 0, do nothing.
  5.       this.timeoutId = null;
  6.       this.disableCache = true;
  7.  
  8.       this.beforeLoad = null;
  9.       this.afterLoad = null;
  10.       this.afterHide = null;
  11.       this.afterResize = null;
  12.       this.onShow = null;
  13.       this.onUpdate = null;
  14.  
  15.       // okm append event for timeout
  16.       this.onFail = null;
  17.       this.onTimeout = null;

もともとあるイベントも追加したいイベントも
メンバー変数として定義します。

↓ModalBox.show()を動かすためのメンバー関数 show()を作成し、
その中でタイムアウトのための処理を追加します。
optionオブジェクトのtimeoutに 0以上の値が入っていた場合、
タイムアウト処理が有効になるようにします。

>>text
JAVASCRIPT:
  1. this.show = function(url, option){
  2.           /** add events **/
  3.           option.beforeLoad = function() {
  4.               if(ref.timeout> 0){
  5.                   ref.timeoutId = window.setTimeout(
  6.                       function() {
  7.                           ref.onTimeoutHandler();
  8.                       },
  9.                       ref.timeout
  10.                   ); // setTimeout
  11.               }
  12.               ref.beforeLoadHandler();
  13.           };

ついでにshow()の途中に、キャッシュを完全に無効にする場合の処理を追加しています。
現在のタイムスタンプを、取得するURLの後にパラメータとして追加しています。

>>text
JAVASCRIPT:
  1. if(this.disableCache){
  2.               date = new Date();
  3.               if(option.params != null){
  4.                    option.params += "&";
  5.               }else{
  6.                    option.params = "";
  7.               }
  8.               option.params += "cahce_=" + date.getTime();
  9.           }
  10.           option.autoFocusing = false;
  11.           Modalbox.show(url, option);

↓ タイムアウトした場合は onTimeout を動作させます。

>>text
JAVASCRIPT:
  1. this.onTimeoutHandler = function(){
  2.           window.clearTimeout(this.timeoutId);
  3.           if(this.onTimeout){
  4.               this.onTimeout();
  5.           }
  6.       }

ModalBoxを表示するHTML内に
実際に Dialogerクラスのインタスタンスを生成して、
ModalBoxの表示のタイムアウトをハンドルする例です。↓

>>text
JAVASCRIPT:
  1. <script type="text/javascript" src="modalbox/lib/prototype.js"></script>
  2. <script type="text/javascript" src="modalbox/lib/scriptaculous.js?load=effects"></script>
  3. <script type="text/javascript" src="modalbox/modalbox.js"></script>
  4. <link rel="stylesheet" href="modalbox/modalbox.css" type="text/css" media="screen" />
  5. <script type="text/javascript" src="dialoger.js"></script>
  6. <script type="text/javascript">
  7. <!--
  8. var dialoger = new Dialoger();
  9. dialoger.timeout = 5000; // 5秒でタイムアウト
  10. // タイムアウト処理
  11. dialoger.onTimeout = function(){
  12.     alert("タイムアウトしました");
  13. }
  14. // 表示時の処理
  15. dialoger.onShow = function(){
  16.     alert("とりあえずダイアログを表示！");
  17. }
  18. function Test(){
  19.     var url = "dialog_timeout.php";
  20.     var option = new Object;
  21.     option.title = "ダイアログタイムアウトテスト";
  22.     option.width = 400;
  23.     option.height = 200;
  24.     dialoger.show(url, option);
  25. }
  26. -->
  27. </script>

■　実行テスト

■■ここをクリックでダイアログのタイムアウトテスト■■

↑ 途中でタイムアウトします。

いかがでございましょう・・・あんまいろんなブラウザでテストしてないですがｗ

↓　Dialoger.js の全ソース

>>text
JAVASCRIPT:
  1. // Dialogerクラス for ModalBox 1.6.0
  2.   function Dialoger(){
  3.       var ref = this;
  4.       this.timeout = 0 // msec, if 0, do nothing.
  5.       this.timeoutId = null;
  6.       this.disableCache = true;
  7.  
  8.       this.beforeLoad = null;
  9.       this.afterLoad = null;
  10.       this.afterHide = null;
  11.       this.afterResize = null;
  12.       this.onShow = null;
  13.       this.onUpdate = null;
  14.  
  15.       // okm append event for timeout
  16.       this.onFail = null;
  17.       this.onTimeout = null;
  18.  
  19.       this.width = null;
  20.       this.height = null;
  21.  
  22.       this.overlayClose = false;
  23.       this.overlayOpacity = 0.5;
  24.       this.slideDownDuration = 0.3;
  25.  
  26.       this.show = function(url, option){
  27.           /** add events **/
  28.           option.beforeLoad = function() {
  29.               if(ref.timeout> 0){
  30.                   ref.timeoutId = window.setTimeout(
  31.                       function() {
  32.                           ref.onTimeoutHandler();
  33.                       },
  34.                       ref.timeout
  35.                   ); // setTimeout
  36.               }
  37.               ref.beforeLoadHandler();
  38.           };
  39.  
  40.           // dialoger default
  41.           option.overlayOpacity = 0.5;
  42.           option.slideDownDuration = 0.3;
  43.  
  44.           option.afterLoad = function(){
  45.               window.clearTimeout(ref.timeoutId);
  46.               ref.afterLoadHandler();
  47.           };
  48.           option.afterHide = function(){
  49.               ref.afterHideHandler();
  50.           };
  51.           option.onShow = function(){
  52.               ref.onShowHandler();
  53.           };
  54.           option.onUpdate = function(){
  55.               ref.onUpdateHandler();
  56.           };
  57.           option.onFail = function(){
  58.               ref.onFailHandler();
  59.           }
  60.  
  61.           if(option.height != undefined){
  62.               ref.height = option.height;
  63.           }
  64.           if(option.width != undefined){
  65.               ref.width = option.width;
  66.           }
  67.  
  68.           if(option.overlayClose == undefined){
  69.               option.overlayClose = ref.overlayClose;
  70.           }
  71.           if(option.oveelayOpacity == undefined){
  72.               option.overlayOpacity = ref.overlayOpacity;
  73.           }
  74.           if(option.slideDownDuration == undefined){
  75.               option.slideDownDuration = ref.slideDownDuration;
  76.           }
  77.  
  78.           if(option.method == undefined){
  79.               option.method = "get";
  80.           }
  81.  
  82.           if(this.disableCache){
  83.               date = new Date();
  84.               if(option.params != null){
  85.                    option.params += "&";
  86.               }else{
  87.                    option.params = "";
  88.               }
  89.               option.params += "cahce_=" + date.getTime();
  90.           }
  91.           option.autoFocusing = false;
  92.           Modalbox.show(url, option);
  93.       }
  94.  
  95.       /* Events */
  96.       this.beforeLoadHandler = function(){
  97.       if(this.beforeLoad) this.beforeLoad();
  98.       }
  99.       this.afterLoadHandler = function(){
  100.       if(this.afterLoad) this.afterLoad();
  101.  
  102.       }
  103.       this.afterHideHandler = function(){
  104.       if(this.afterHide) this.afterHide();
  105.       }
  106.       this.afterResizeHandler = function(){
  107.       if(this.afterResize) this.afterResize();
  108.       }
  109.       this.onShowHandler = function(){
  110.       if(this.onShow) this.onShow();
  111.       }
  112.       this.onUpdateHandler = function(){
  113.       if(this.onUpdate) this.onUpdate();
  114.       }
  115.       this.onFailHandler = function(){
  116.       if(this.onFail){
  117.               this.onFail();
  118.           }else{
  119.               Modalbox.hide();
  120.           }
  121.       }
  122.       this.onTimeoutHandler = function(){
  123.           window.clearTimeout(this.timeoutId);       
  124.       if(this.onTimeout){
  125.               this.onTimeout();
  126.           }
  127.       }
  128.  
  129.       this.activate = function(){
  130.           Modalbox.activate();
  131.       }
  132.       this.deactivate = function(){
  133.           Modalbox.deactivate();
  134.       }
  135.   }

一応タイムアウトさせてるPHP

>>text
PHP:
  1. <?
  2. sleep(7);
  3. echo 'タイムアウト時に閉じる処理入れないと、<br/>遅れて取得できたとき普通に表示されます。<br/>';
  4. echo '<a href="#" onClick="Modalbox.hide();">閉じる</a>';
  5. ?>
]]> http://parpue.net/web/29/feed 0 WordPressのカスタムフィールドで<HEAD>内でJavsScript, CSSをロードして動かす http://parpue.net/wordpress/25 http://parpue.net/wordpress/25#comments Fri, 27 Jun 2008 08:16:07 +0000 okm http://parpue.net/?p=25 MacOSXのようなダイアログをページ内に表示する、
ModalBoxの改造記事を書こうと思ったんだけど、
WordPressで記事ごとにJavaScriptやCSSの読み込みを追加したくて悩む。

プラグインを利用＆改造して、
カスタムフィールドでこんな感じでできるようにしてみた。

カスタムフィールド
javascript, css フィールドにファイル名を指定して追加する。
（Add-Meta-Tagsを追加で、keywords,description フィールドの指定によって、
META情報もページごとに指定可能。）

というわけで、WorｄPressの個別ページで、
ModalBoxのJSとCSSを読み込んで、表示させてみた。

↓個別ページ表示でないと動きません。

ModalBoxテスト

クリックでModalBoxが表示されるでしょか。

■　記事本文中にjavascriptをかく・・・
プラグインを作っている方がおられました。
カスタムフィールドのHTMLを記事に挿入するプラグイン
ContentEXプラグインにより、カスタムフィールドに追加したHTMLを
そのまま記事本文中に記述できます。

本文中のJavaScriptに関してはこれでOKでした。便利。

■　head内でjavascript,css ファイルをロードする・・・

<script type="text/javascript" src="xxx.js" />
<link rel="stylesheet" href="xxx.css" />

こんなのをページごとに自由に差し込みたい。

近いプラグインで、ページごとにMETAを自由に追加できる、
Add-Meta-Tagsというプラグインがあったので、これをちょっと改造させていただきました。
→メタタグをページごとに設定できるWordPressのプラグイン:Add-Meta-Tagsの日本語版

このプラグインのMETAタグを追加している部分に
javascript, css カスタムフィールドがあった場合、HEADに追加する処理を、加えました。

add-meta-tags.php

>>text
PHP:
  1. // Custom Field names
  2.     $desc_fld = "description";
  3.     $keyw_fld = "keywords";
  4.     // javascript and css
  5.     $js_fld = "javascript";   // add
  6.     $css_fld = "css";          // add
>>text
PHP:
  1. // add javascript
  2.         $js_fld_contents = get_post_meta($posts[0]->ID, $js_fld, false);
  3.         if(!is_null($js_fld_contents)){
  4.             foreach($js_fld_contents as $js_fld_content){
  5.                 if ( !empty($js_fld_content) ) {
  6.                     $my_metatags .= "\n<script type=\"text/javascript\" src=\"". $js_fld_content  ."\"></script>";
  7.                 }
  8.             }
  9.         }
  10.  
  11.         // add css
  12.         $css_fld_contents = get_post_meta($posts[0]->ID, $css_fld, false);
  13.         if(!is_null($css_fld_contents)){
  14.             foreach($css_fld_contents as $css_fld_content){
  15.                 if ( !empty($css_fld_content) ) {
  16.                     $my_metatags .= "\n<link rel=\"stylesheet\" href=\"". $css_fld_content  ."\" />";
  17.                 }
  18.             }
  19.         }

これで javascript, css という名前のカスタムフィールドが有効になります。

]]> http://parpue.net/wordpress/25/feed 2