parpue.net » millon http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 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 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 音楽スタジオ検索 / メンバー募集 millon.jp http://parpue.net/web/23 http://parpue.net/web/23#comments Fri, 27 Jun 2008 01:45:19 +0000 okm http://parpue.net/?p=23 millon
オープンソース・ジャパン株式会社（以下、OSJ）は、音楽制作やライブ活動などを趣味とするユーザー向けポータルサイト「millon.jp（ミロン・ジェー・ピー）」を開発、ベータ公開しました。

millon.jp/

プレスリリース全文へ

全国の音楽リハーサルスタジオの検索・各音楽スポットへのイベント、メンボ記事の貼り付けが可能です。
携帯電話からのスタジオ検索にも対応しております。
ぜひご利用ください。

]]> http://parpue.net/web/23/feed 0