ラベル CSS/JavaScript の投稿を表示しています。 すべての投稿を表示
ラベル CSS/JavaScript の投稿を表示しています。 すべての投稿を表示

2009/10/05

Bookmarklets

Yahoo closes GeoCities site on October 26, 2009. So I put this page here.


Tatata's tools
Following tools are provided "AS IS", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the tools or the use or other dealings in the tools.

Bookmarklets
Search assistant tool for Wikitravel.
ウィキトラベル用検索補助ツール
Basic version
(only for seach result page)
基本版
(検索結果ページ専用)
WT to Google - IE6, Firefox3/3.5
Enhanced version 拡張版 WT to Google - IE6
WT to Google - Firefox3/3.5
Image search tools.
画像検索ツール
Search CC licensed images on Flickr. (cc-by, cc-by-sa) クリエイティブ・コモンズ・ライセンスの画像をFlickrで検索。 (cc-by, cc-by-sa) Flickr CC images - IE6
Flickr CC images - Firefox3/3.5
Google Image Search Googleイメージ検索 Google Image Search - IE6
Google Image Search - Firefox3/3.5


Copyright © 2009  Tatata, licensed under CC-Attribution-ShareAlike 3.0.

2008/08/14

Flickr検索用Bookmarklet (Internet Explorer)

Wikitravel用検索Bookmarkletを作った後、それをベースにウィキトラベルで利用できるライセンス (CC-BY, CC-BY-SA) の写真をフリッカーで検索するブックマークレットを作ってみました。検索条件に「クリエイティブ・コモンズ 表示 (CC-BY)」又は「クリエイティブ・コモンズ 表示-継承 (CC-BY-SA)」により使用許諾された画像であることを組み込んであります。Internet Explorerで動きます(Windows XP Service Pack 3で確認)。Firefox・Safari用は別途作成しています。

使い方は次の通りです。
そのままブックマークレットをクリックした場合
→ IE6ではプロンプトを表示し、そこに入力されたキーワードでフリッカーを検索します。IE7では何も行いません。
文字列を選択した状態でブックマークレットをクリックした場合
→ 選択した文字列でフリッカーを検索します。
Wikitravelの検索結果ページ (*) でブックマークレットをクリックした場合
→ レフトナビの検索box内のキーワードでフリッカーを検索します。
* ··· ウィキペディアなどのMediaWikiを使用しているサイト(検索boxがId="searchInput"となっているサイト)の検索結果ページでは、Wikitravelと同じ動作(レフトナビの検索box内のキーワードによる検索)になります。

ブックマークレットの入手方法

"Flickr CC images"のリンクを右クリックして「お気に入りに追加」を選択して保存して下さい。

IE6用 — Flickr CC images


IE7用 — Flickr CC images


IE7用ではポップアップブロックを回避するため、prompt()によるプロンプトを表示しないことにしました。(IE7でprompt()によるプロンプトを動かすための設定もあるようなので、この設定であれば上のIE6用ブックマークレットがIE7で動くかも知れません。でも、安全性を高めるためのポップアップブロックだと思うので、この設定は使わない方が良さそうな気がします。)

コード

後で見たくなるような気がするのでここに置いておくことにしました。読み易くするために改行とインデントを入れてあります。

IE6用

javascript:

G='http://flickr.com/search/?q=';
L='&l=commderiv';
T=document.selection.createRange().text;

if(document.getElementById('searchInput'))
 V=document.getElementById('searchInput').getAttribute('value');

if(T!=''){

 location.href=G+encodeURIComponent(T)+L;

}
else{

 if((typeof V == 'undefined')||(V=='')){
  void(V=prompt('Keywords',''));
 };

 if(V){
  location.href=G+encodeURIComponent(V)+L;
 }

}


IE7用

javascript:

G='http://flickr.com/search/?q=';
L='&l=commderiv';
T=document.selection.createRange().text;

if(document.getElementById('searchInput'))
 V=document.getElementById('searchInput').getAttribute('value');

if(T!=''){

 location.href=G+encodeURIComponent(T)+L;

}
else{

 if((typeof V == 'undefined')||(V=='')){
  void(0);
 }
 else{
  location.href=G+encodeURIComponent(V)+L;
 }

}

2008/08/13

Flickr検索用Bookmarklet (Firefox, Safari)

Wikitravel用検索Bookmarkletを作った後、それをベースにウィキトラベルで利用できるライセンス (CC-BY, CC-BY-SA) の写真をフリッカーで検索するブックマークレットを作ってみました。検索条件に「クリエイティブ・コモンズ 表示 (CC-BY)」又は「クリエイティブ・コモンズ 表示-継承 (CC-BY-SA)」により使用許諾された画像であることを組み込んであります。FirefoxとSafariで動きます(Windows XP Service Pack 3で確認)。Internet Explorer用は別途作成しています。

使い方は次の通りです。
そのままブックマークレットをクリックした場合
→ プロンプトを表示し、そこに入力されたキーワードでフリッカーを検索します。
文字列を選択した状態でブックマークレットをクリックした場合
→ 選択した文字列でフリッカーを検索します。
Wikitravelの検索結果ページ (*) でブックマークレットをクリックした場合
→ レフトナビの検索box内のキーワードでフリッカーを検索します。
* ··· ウィキペディアなどのMediaWikiを使用しているサイト(検索boxがId="searchInput"となっているサイト)の検索結果ページでは、Wikitravelと同じ動作(レフトナビの検索box内のキーワードによる検索)になります。

ブックマークレットの入手方法
  • Firefoxの場合は、"Flickr CC images"のリンクを右クリックして「このリンクをブックマーク」を選択して保存して下さい。
  • Safariの場合は、"Flickr CC images"のリンクをドラッグしてブックマークバーにドロップして下さい。


コード

後で見たくなるような気がするのでここに置いておくことにしました。読み易くするために改行とインデントを入れてあります。
javascript:

var selectText=window.getSelection();

if(document.getElementById('searchInput'))
 var searchValue=document.getElementById('searchInput').getAttribute('value');

if(selectText!=''){

 location.href='http://flickr.com/search/?q='+encodeURIComponent(selectText)+'&l=commderiv'

}
else{

 if((searchValue=='')||(searchValue==undefined)){
  void(searchValue=prompt('Keywords...',''));
 };

 if(searchValue)
  location.href='http://flickr.com/search/?q='+encodeURIComponent(searchValue)+'&l=commderiv'

}

2008/08/09

Wikitravel用検索Bookmarklet (Internet Explorer)

2007年の秋にウィキトラベルの検索で不具合が起きた際、ウィキトラベルの各言語版とshared(画像収納庫)を横断的に一括検索できると便利だなと思って作ってみたブックマークレットです。Internet Explorerで動きます(Windows XP Service Pack 3で確認)。Firefox・Safari用は別途作成しています。

上手く説明できないのですが、使い方は次の通りです。
Wikitravelのページで何も選択せずにそのままブックマークレットをクリックした場合
→ IE6ではプロンプトを表示し、そこに入力されたキーワードでGoogleのドメイン指定検索(site:wikitravel.orgを指定した検索)を行います。IE7では何も行いません。
Wikitravelのページ上の文字列を選択した状態でブックマークレットをクリックした場合
→ 選択した文字列でGoogleのウェブ検索(ドメイン指定無し)を行います。
Wikitravelの検索結果ページでブックマークレットをクリックした場合
→ レフトナビの検索box内のキーワードでGoogleのドメイン指定検索(site:wikitravel.orgを指定した検索)を行います。
Wikitravelの検索結果ページ上の文字列を選択した状態でブックマークレットをクリックした場合
→ 選択した文字列でGoogleのウェブ検索(ドメイン指定無し)を行います。
他のサイト (*) で何も選択せずにそのままブックマークレットをクリックした場合
→ IE6ではプロンプトを表示し、そこに入力されたキーワードでGoogleのドメイン指定検索(site:wikitravel.orgを指定した検索)を行います。IE7では何も行いません。
他のサイト (*) で文字列を選択した状態でブックマークレットをクリックした場合
→ 選択した文字列でGoogleのドメイン指定検索(site:wikitravel.orgを指定した検索)を行います。
* ··· ウィキペディアなどのMediaWikiを使用しているサイト(検索boxがId="searchInput"となっているサイト)では、Wikitravelのページ上での使用と同じ動作(site:wikitravel.orgの指定の有無)になります。

ブックマークレットの入手方法

"WT to Google"のリンクを右クリックして「お気に入りに追加」を選択して保存して下さい。

IE6用 — WT to Google


IE7用 — WT to Google


IE7用ではポップアップブロックを回避するため、prompt()によるプロンプトを表示しないことにしました。(IE7でprompt()によるプロンプトを動かすための設定もあるようなので、この設定であれば上のIE6用ブックマークレットがIE7で動くかも知れません。でも、安全性を高めるためのポップアップブロックだと思うので、この設定は使わない方が良さそうな気がします。)

コード

後で見たくなるような気がするのでここに置いておくことにしました。読み易くするために改行とインデントを入れてあります。

IE6用

javascript:

G='http://google.com/search?q=';
W='+site:wikitravel.org';
T=document.selection.createRange().text;

if(document.getElementById('searchInput'))
 V=document.getElementById('searchInput').getAttribute('value');

if(T!=''){

 if(typeof V == 'undefined'){
  location.href=G+encodeURIComponent(T)+W;
 }
 else{
  location.href=G+encodeURIComponent(T);
 }

}
else{

 if((typeof V == 'undefined')||(V=='')){
  void(V=prompt('Keywords',''));
 };

 if(V){
  location.href=G+encodeURIComponent(V)+W;
 }

}


IE7用

javascript:

G='http://google.com/search?q=';
W='+site:wikitravel.org';
T=document.selection.createRange().text;

if(document.getElementById('searchInput'))
 V=document.getElementById('searchInput').getAttribute('value');

if(T!=''){

 if(typeof V == 'undefined'){
  location.href=G+encodeURIComponent(T)+W;
 }
 else{
  location.href=G+encodeURIComponent(T);
 }

}
else{

 if((typeof V == 'undefined')||(V=='')){
  void(0);
 }
 else{
  location.href=G+encodeURIComponent(V)+W;
 }

}

2008/08/08

Wikitravel用検索Bookmarklet (Firefox, Safari)

2007年の秋にウィキトラベルの検索で不具合が起きた際、ウィキトラベルの各言語版とshared(画像収納庫)を横断的に一括検索できると便利だなと思って作ってみたブックマークレットです。FirefoxとSafariで動きます(Windows XP Service Pack 3で確認)。Internet Explorer用は別途作成しています。

上手く説明できないのですが、使い方は次の通りです。
Wikitravelのページで何も選択せずにそのままブックマークレットをクリックした場合
→ プロンプトを表示し、そこに入力されたキーワードでGoogleのドメイン指定検索(site:wikitravel.orgを指定した検索)を行います。
Wikitravelのページ上の文字列を選択した状態でブックマークレットをクリックした場合
→ 選択した文字列でGoogleのウェブ検索(ドメイン指定無し)を行います。
Wikitravelの検索結果ページでブックマークレットをクリックした場合
→ レフトナビの検索box内のキーワードでGoogleのドメイン指定検索(site:wikitravel.orgを指定した検索)を行います。
Wikitravelの検索結果ページ上の文字列を選択した状態でブックマークレットをクリックした場合
→ 選択した文字列でGoogleのウェブ検索(ドメイン指定無し)を行います。
他のサイト (*) で何も選択せずにそのままブックマークレットをクリックした場合
→ プロンプトを表示し、そこに入力されたキーワードでGoogleのドメイン指定検索(site:wikitravel.orgを指定した検索)を行います。
他のサイト (*) で文字列を選択した状態でブックマークレットをクリックした場合
→ 選択した文字列でGoogleのドメイン指定検索(site:wikitravel.orgを指定した検索)を行います。
* ··· ウィキペディアなどのMediaWikiを使用しているサイト(検索boxがId="searchInput"となっているサイト)では、Wikitravelのページ上での使用と同じ動作(site:wikitravel.orgの指定の有無)になります。

ブックマークレットの入手方法
  • Firefoxの場合は、"WT to Google"のリンクを右クリックして「このリンクをブックマーク」を選択して保存して下さい。
  • Safariの場合は、"WT to Google"のリンクをドラッグしてブックマークバーにドロップして下さい。


コード

後で見たくなるような気がするのでここに置いておくことにしました。読み易くするために改行とインデントを入れてあります。
javascript:

var selectText=window.getSelection();

if(document.getElementById('searchInput'))
 var searchValue=document.getElementById('searchInput').getAttribute('value');

if(selectText!=''){

 if(searchValue==undefined){
  location.href='http://www.google.com/search?q='+encodeURIComponent(selectText)+'+site:wikitravel.org'
 }
 else{
  location.href='http://www.google.com/search?q='+encodeURIComponent(selectText)
 }

}
else{

 if((searchValue=='')||(searchValue==undefined)){
  void(searchValue=prompt('Keywords...',''));
 };

 if(searchValue)
  location.href='http://www.google.com/search?q='+encodeURIComponent(searchValue)+'+site:wikitravel.org'

}

2008/08/05

Sidebar Icons

ウィキトラベルで使おうと思って1年前に作成したJavaScriptですが、残念ながらサイトの管理者(開発者)に興味を持ってもらえず、採用には至りませんでした。

先日、Blogger Slippy Mapウィジェットを作成した際にちらちらと見ていたので、こっちに貼っておこうと思います。

ウィキトラベルはMediaWikiを使っていますので、MediaWikiで動くように書いたつもりですが、動作確認はローカル (自分のPCのブラウザ) でしか行っておらず、サーバーに置いての確認はしていません。(サーバー持ってないし、ウィキトラベルではユーザーのCSSやJavaScriptを使うことできないので...)

JavaScript
 /* 
 
     User JavaScript
 
 */

 /** Icons for sidebar links ***************************************
  *
  *  Description: Mark sidebar links with icons (star, dotm, otbp) by changing the bullet 
  *                 into other list marker designated by Template:Sidebar-icons.
  *  Author: [[User:Tatata]]
  */
 
 function SidebarIcons()  {

     var markers, pLangLinks;

     // find marking template info
     markers = document.getElementsByTagName("span");
     for ( var i=0; i < markers.length; i++ ) {

          switch ( markers[i].className ) {
             case "sidebaricon-star":
             case "sidebaricon-dotm":
             case "sidebaricon-otbp":

                // links in p-lang ( "In other languages" box )
                if ( document.getElementById( "p-lang" ) ) {
                   pLangLinks = document.getElementById( "p-lang" ).getElementsByTagName( "li" );

                   // find language code and replace class name with if matched
                   for ( var j=0; j < pLangLinks.length; j++) {

                      var a, b;
                      a = markers[i].id;
                      b = markers[i].className + "-lang-" + pLangLinks[j].getElementsByTagName("a")[0].getAttribute("hreflang");

                      if ( a == b ) {
                         switch ( markers[i].className ) {
                            case "sidebaricon-star":
                               pLangLinks[j].className = markers[i].className;
                               pLangLinks[j].title = "This is a Star article in another language.";
                               break;
                            case "sidebaricon-dotm":
                               pLangLinks[j].className = markers[i].className;
                               pLangLinks[j].title = "This is a previous Destinations of the month article in another language.";
                               break;
                            case "sidebaricon-otbp":
                               pLangLinks[j].className = markers[i].className;
                               pLangLinks[j].title = "This is a previous Off the beaten path article in another language.";
                               break;
                            default:
                               break;
                         }
                      }
                   }
                }
                break;

             default:
                break;

          }

     }

 }
 
 addOnloadHook( SidebarIcons );



CSS
/* 
 
User CSS (Cascading Style Sheets)  
 
*/
 
/* Sidebar  Icons */

li.sidebaricon-star {
  list-style-image: url("http://wikitravel.org/upload/ja/0/07/Listmarker-star.png");
}
 
li.sidebaricon-dotm {
  list-style-image: url("http://wikitravel.org/upload/ja/0/08/Listmarker-dotm.png");
}

li.sidebaricon-otbp {
  list-style-image: url("http://wikitravel.org/upload/ja/e/e6/Listmarker-otbp.png");
}

2008/08/02

Slippy MapウィジェットがIE6でも動くようになりました

Firefox3とSafari3では動いたのにIE6では動かなかった Blogger Slippy Mapウィジェット がIE6でも動くようになりました。(稼動確認したPCはWindowsXP SP3とSP2です。)

何箇所か alert を入れてみて何となく悪そうな場所は分かったのですが、そこから先は Visual Web Developer 2008 Express Edition をインストールしても分かりませんでした。(これはデバッグツールの使い方自体良く分かっていないせいだと思います。)

また検索を繰り返し、次のページに辿り着いて漸く分かりました。 そこに書かれていた原因とは「IEの場合、動的にスクリプトエレメント(<script></script>)にテキストの追加は、できないようです。」ということで、解決策は「動的に関数を作成したいとかそういうことなら、文字列として、関数を構成してeval すればいいです。(script タグを追加する必要はない)」でした。

で、 eval とやらをしてみました。
IEのためのコードを追加しなければならないのかと思っていたので助かりました。普段からJavaScriptを書いている人には当たり前のことなんだろうなぁ(汗

今回のコード(IE6対応版)はこちら。( "+ expand source" のリンクをクリックして下さい。)
<style>
.slippymap img { padding: 0px !important; border: none !important;}
</style>
<!-- bring in the OpenLayers javascript library -->
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes. -->
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>

<script type="text/javascript"><!--
// Blogger Slippy Map 0.1.1
var i = 0;
var lat = 54;
var lon = 0;
var z = 4;
var style = "width:300px; height:200px;";
var element1, element2, element3, text;
var tags = document.getElementsByTagName("div");

  for ( var j=0; j < tags.length; j++ ) {

    if ( tags[j].className == "slippymap" ) {

      i++;

      if ( tags[j].getAttribute("lat") ) {
         lat = tags[j].getAttribute("lat");}
      if ( tags[j].getAttribute("lon") ) {
         lon = tags[j].getAttribute("lon");}
      if ( tags[j].getAttribute("z") ) {
         z = tags[j].getAttribute("z");}
      if ( tags[j].getAttribute("style") ) {
         style = tags[j].getAttribute("style");}

      element1 = document.createElement("div");
      element1.setAttribute("class","tempmap");
      element1.setAttribute("style","margin-bottom:-35px;");
      <!-- define a DIV into which the map will appear -->
      element2 = document.createElement("div");
      element2.setAttribute("id", "map" + i);
      element2.setAttribute("style", style 
        + " border-style:solid; border-width:1px; border-color:#000;");
      element1.appendChild(element2);
      element2 = document.createElement("br");
      element1.appendChild(element2);
      element2 = document.createElement("span");
      element2.setAttribute("class","tempmap")
      element2.setAttribute("style",
        "font-size:70%; background-color:white; position:relative;top:-65px;left:5px;z-index:1003;");
      text = document.createTextNode("Data by ");
      element2.appendChild(text);
      element3 = document.createElement("a");
      element3.setAttribute("href","http://www.openstreetmap.org/?lat=" + lat 
        + "&lon=" + lon + "&zoom=" + z );
      element3.setAttribute("title","See this map on OpenStreetMap.org");
      text = document.createTextNode("OpenStreetMap");
      element3.appendChild(text);
      element2.appendChild(element3);
      element3 = document.createElement("br");
      element2.appendChild(element3);
      element3 = document.createElement("a");
      element3.setAttribute("href","http://creativecommons.org/licenses/by-sa/2.0/");
      element3.setAttribute("title","Creative Commons Attribution-Share Alike 2.0");
      text = document.createTextNode("CC-BY-SA-2.0");
      element3.appendChild(text);
      element2.appendChild(element3);
      element1.appendChild(element2);
      tags[j].appendChild(element1);

      eval("var lat"+ i + "=" + lat + "; var lon"
        + i + "=" + lon + "; var zoom"+ i + "=" + z + "; var map" + i
        + "; function lonLatToMercator(ll) { var lon = ll.lon * 20037508.34 / 180; "
        + "var lat = Math.log (Math.tan ((90 + ll.lat) * Math.PI / 360)) / "
        + "(Math.PI / 180); lat = lat * 20037508.34 / 180; return new "
        + "OpenLayers.LonLat(lon, lat); } ;"
        + "if (typeof window.addEventListener == 'function') { "
        + "window.addEventListener('load', init, false);} else if (typeof "
        + "window.attachEvent == 'object') { window.attachEvent('onload', "
        + "init);} else { var oldonload = window.onload ; if (typeof "
        + "window.onload != 'function') { window.onload = init;} else { "
        + "window.onload = function() { oldonload(); init(); } } };"
        + "function init() { map" + i + " = new OpenLayers.Map('map" + i 
        + "', { controls:[ new OpenLayers.Control.Navigation()"
        + ", new OpenLayers.Control.PanZoom(), new OpenLayers.Control"
        + ".LayerSwitcher()], maxExtent: new OpenLayers.Bounds(-20037508.34, "
        + "-20037508.34, 20037508.34, 20037508.34), maxResolution:156543.0399, "
        + "units:'meters', projection: 'EPSG:900913' } ); var mapnik = new "
        + "OpenLayers.Layer.OSM.Mapnik('Mapnik'); map" + i + ".addLayer(mapnik);"
        + " var osmarender = new OpenLayers.Layer.OSM.Osmarender('Osmarender'); "
        + "map" + i + ".addLayer(osmarender); var cyclemap = new OpenLayers"
        + ".Layer.OSM.CycleMap('Cycle Map'); map" + i + ".addLayer(cyclemap); "
        + "var maplint = new OpenLayers.Layer.OSM.Maplint('Maplint'); map" + i 
        + ".addLayer(maplint); var lonLat" + i + " = lonLatToMercator(new "
        + "OpenLayers.LonLat(lon" + i + ", lat" + i + ")); map" + i 
        + ".setCenter (lonLat" + i + ", zoom" + i + "); } ");
    }
  }
--></script>
しかし...
Firefox3とSafari3ではクレジットとライセンスが地図の枠内に収まるのに、IE6では枠外に出てしまうな。
良く見るとIE6では枠の線も表示されてないよ。
まっ、いっかぁ~。とりあえず動くようになったし。

あと、あんまり地図を貼り付けるとページの動きが遅くなりますね。当たり前か。

2008/08/01

JavaScript カスタム関数

便利そうなのでリンクしておきます。 IE6でSlippy Mapを複数表示できない件も調べてみようかな。

2008/07/31

Blogger Slippy Map

[ja] Slippy Map MediaWiki Extensionからの出力を基にBlogger用のSlippy Mapウィジェットを作成しました。
divタグに幾つかの属性値を設定して使用します(使用例をご覧下さい)。
ウィジェットを追加するには下のボタンを押して下さい。
Firefox3とSafari3では動きますが、IE6では動きませんでした。
Firefox3、Safari3、IE6で動きました。

[en] I made a Slippy Map widget based on output from Slippy Map MediaWiki Extension.
Usage is just adding some attributes to div tag; see examples below.
To get this widget, click the button.
It works on Firefox3 and Safari3, doesn't work on IE6.
It works on Firefox3, Safari3 and IE6.






使用例 (Examples)




<div class="slippymap" lat="36" lon="139" z="3" style="width:250px;height:200px;"></div>






<div class="slippymap" lat="52.516" lon="13.378" z="9" style="width:300px;height:300px;"></div>






<div class="slippymap" lat="51.5012" lon="-0.123" z="14" style="width:500px;height:400px;"></div>





履歴 (History)

0.1
2008-07-31 新規作成。Firefox3とSafari3で動作。
0.1.1
2008-08-02 IE6で動作。

Slippy Mapのウィジェットを作ってみる

Blogger上でSlippy Mapを一応表示できるようになったので、ウィジェットとして作ってみることにしました。

前回は「地図作成時のオブジェクト名」と「地図描画スペースとなるdiv要素のid」が共に"map"だったので、1ページに複数のSlippy Mapを表示させるには、この組み合わせ毎にユニークにしてあげればいっかなーと考えていましたが、普段からJavaScriptなどをやり慣れていない私にはそれほど単純ではありませんでした。


とりあえずコードを書いて1ページに複数のSlippy Mapを表示させようとすると、前回のSlippy Mapを含めて、どれか1つしかタイルが読み込まれませんでした。コードと睨めっこしても他にユニークにするべきところも無さそうだしJavaScript自体は動いているので、もしかしたらOpenLayersの制約かななどと思いながらコードを眺めていると、window.onload=init; と書かれた行が目に留まりました。色々検索しているうちに次のページが見付かったので参考にさせてもらいました。



単純に window.onload を使わないようにコードを修正すると、1ページに複数のSlippy Mapを表示させることができるようになりましたが、よーっく地図を見ると全て同じ座標とズームレベルになっています。地図そのもののオブジェクトだけでなく、座標とズームレベルのオブジェクトも別の名前で作ってあげないと駄目みたいですね...

このウィジェットの追加ボタンのページを作成して、そちらに簡単な使用例を載せておきます。

現時点のコード(一応完成版)はこちら。( "+ expand source" のリンクをクリックして下さい。)
<style>
.slippymap img { padding: 0px !important; border: none !important;}
</style>
<!-- bring in the OpenLayers javascript library -->
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes. -->
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>

<script type="text/javascript"><!--
// Blogger Slippy Map 0.1
var i = 0;
var lat = 54;
var lon = 0;
var z = 4;
var style = "width:300px; height:200px;";
var element1, element2, element3, text;
var tags = document.getElementsByTagName("div");

  for ( var j=0; j < tags.length; j++ ) {

    if ( tags[j].className == "slippymap" ) {

      i++;

      if ( tags[j].getAttribute("lat") ) {
         lat = tags[j].getAttribute("lat");}
      if ( tags[j].getAttribute("lon") ) {
         lon = tags[j].getAttribute("lon");}
      if ( tags[j].getAttribute("z") ) {
         z = tags[j].getAttribute("z");}
      if ( tags[j].getAttribute("style") ) {
         style = tags[j].getAttribute("style");}

      element1 = document.createElement("script");
      element1.setAttribute("type","text/javascript");
      text = document.createTextNode("var lat"+ i + "=" + lat + "; var lon"
        + i + "=" + lon + "; var zoom"+ i + "=" + z + "; var map" + i
        + "; function lonLatToMercator(ll) { var lon = ll.lon * 20037508.34 / 180; "
        + "var lat = Math.log (Math.tan ((90 + ll.lat) * Math.PI / 360)) / "
        + "(Math.PI / 180); lat = lat * 20037508.34 / 180; return new "
        + "OpenLayers.LonLat(lon, lat); } ;"
        + "if (typeof window.addEventListener == 'function') { "
        + "window.addEventListener('load', init, false);} else if (typeof "
        + "window.attachEvent == 'object') { window.attachEvent('onload', "
        + "init);} else { var oldonload = window.onload ; if (typeof "
        + "window.onload != 'function') { window.onload = init;} else { "
        + "window.onload = function() { oldonload(); init(); } } };"
        + "function init() { map" + i + " = new OpenLayers.Map('map" + i 
        + "', { controls:[ new OpenLayers.Control.Navigation()"
        + ", new OpenLayers.Control.PanZoom(), new OpenLayers.Control"
        + ".LayerSwitcher()], maxExtent: new OpenLayers.Bounds(-20037508.34, "
        + "-20037508.34, 20037508.34, 20037508.34), maxResolution:156543.0399, "
        + "units:'meters', projection: 'EPSG:900913' } ); var mapnik = new "
        + "OpenLayers.Layer.OSM.Mapnik('Mapnik'); map" + i + ".addLayer(mapnik);"
        + " var osmarender = new OpenLayers.Layer.OSM.Osmarender('Osmarender'); "
        + "map" + i + ".addLayer(osmarender); var cyclemap = new OpenLayers"
        + ".Layer.OSM.CycleMap('Cycle Map'); map" + i + ".addLayer(cyclemap); "
        + "var maplint = new OpenLayers.Layer.OSM.Maplint('Maplint'); map" + i 
        + ".addLayer(maplint); var lonLat" + i + " = lonLatToMercator(new "
        + "OpenLayers.LonLat(lon" + i + ", lat" + i + ")); map" + i 
        + ".setCenter (lonLat" + i + ", zoom" + i + "); } ");
      element1.appendChild(text);
      tags[j].appendChild(element1);
      element1 = document.createElement("div");
      element1.setAttribute("class","tempmap");
      element1.setAttribute("style","margin-bottom:-35px;");
      <!-- define a DIV into which the map will appear -->
      element2 = document.createElement("div");
      element2.setAttribute("id", "map" + i);
      element2.setAttribute("style", style 
        + " border-style:solid; border-width:1px; border-color:#000;");
      element1.appendChild(element2);
      element2 = document.createElement("br");
      element1.appendChild(element2);
      element2 = document.createElement("span");
      element2.setAttribute("class","tempmap")
      element2.setAttribute("style",
        "font-size:70%; background-color:white; position:relative;top:-65px;left:5px;z-index:1003;");
      text = document.createTextNode("Data by ");
      element2.appendChild(text);
      element3 = document.createElement("a");
      element3.setAttribute("href","http://www.openstreetmap.org/?lat=" + lat 
        + "&lon=" + lon + "&zoom=" + z );
      element3.setAttribute("title","See this map on OpenStreetMap.org");
      text = document.createTextNode("OpenStreetMap");
      element3.appendChild(text);
      element2.appendChild(element3);
      element3 = document.createElement("br");
      element2.appendChild(element3);
      element3 = document.createElement("a");
      element3.setAttribute("href","http://creativecommons.org/licenses/by-sa/2.0/");
      element3.setAttribute("title","Creative Commons Attribution-Share Alike 2.0");
      text = document.createTextNode("CC-BY-SA-2.0");
      element3.appendChild(text);
      element2.appendChild(element3);
      element1.appendChild(element2);
      tags[j].appendChild(element1);
    }
  }
--></script>

Slippy Mapを表示してみる

OpenStreetMapではサイトに表示しているメインの地図をSlippy Mapと呼んでいます。

最近、日本語サイトのOpenStreetMap Japanで地図ページの改良をなさっている方が居て、私もちょっと触ってみたくなってBloggerに表示させてみることにしました。


ベースにしたのは、MediaWiki用のSlippy Map MediaWiki Extensionからの出力です。

サーバーからタイル(細分化された地図画像)を引っ張ってくることは直ぐにできましたが、タイル同士の間に数ピクセルの隙間が空いてしまいます。OSM.orgやOSM.jpで使用しているコードを覗いて見たり、OpenLayersの文書やソースを読んでみても解決できず二日程悩んでいました。ふと思い立ってFirefoxのアドオンのページを確認してみるとFirebugのFirefox3対応版が出ていたので早速インストール。HTMLを調査すると適用されているスタイル (padding:4px;) や要素のクラス名 (olTileImage) が簡単に分かり、直ぐに解決。この程度のことだから、OpenLayersのFAQやメーリングにも質問が出ていなかったんだと思いました。それにしてもFirebugは便利だなぁ。あまり使ったことがないので、使い方も良く分かんないけど...

やろうと思ったけどやり方が分からず、とりあえず現時点では諦めたこと。
  • 地図のスクロール時やズーム時に、OSM.orgの地図へのURLに入っている座標やズームレベルを更新すること。
    • URLのベースをOSM.orgサーバーへ向ける。
    • 座標の形式を lat=35.67255 lon=139.76183 のように普段GPSなどで見ているものと同じにする。
    • リンクテキストを Permalink 以外のものにする
  • ズームレベルに合わせたスケールを表示する。
これからやろうと思っていること。



上の地図を表示させているコードはこちら。( "+ expand source" のリンクをクリックして下さい。)
<style>
.map img { padding: 0px !important; border: none !important;}
</style>

<div class="map" style="margin-bottom:-35px;">

<!-- define a DIV into which the map will appear -->
<div style="width:400px; height:350px; border-style:solid; border-width:1px; border-color:#000;" id="map"></div>

<br/>
<span style="font-size:70%; background-color:white; position:relative;top:-65px;left:5px;z-index:1003;">Data by <a href="http://www.openstreetmap.org/?lat=36&lon=139&zoom=4" title="See this map on OpenStreetMap.org">OpenStreetMap</a><br/>
<a href="http://creativecommons.org/licenses/by-sa/2.0/" title="Creative Commons Attribution-Share Alike 2.0">CC-BY-SA-2.0</a></span>

</div>

<!-- bring in the OpenLayers javascript library -->
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes. --> 
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script> 

<script type="text/javascript"> 
var lon=139; 
var lat=36; 
var zoom=4; 
var map; 

function lonLatToMercator(ll) {
  var lon = ll.lon * 20037508.34 / 180;
  var lat = Math.log (Math.tan ((90 + ll.lat) * Math.PI / 360)) / (Math.PI / 180);
  lat = lat * 20037508.34 / 180;
  return new OpenLayers.LonLat(lon, lat);
}

window.onload=init; 

function init() {
  map = new OpenLayers.Map("map", {
    controls:[
      new OpenLayers.Control.Navigation(),
      new OpenLayers.Control.PanZoom(),
      new OpenLayers.Control.LayerSwitcher()],
    maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
    maxResolution:156543.0399,
    units:'meters',
    projection: "EPSG:900913"
  } );
  var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
  map.addLayer(mapnik);
  var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
  map.addLayer(osmarender);
  var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle Map");
  map.addLayer(cyclemap);
  var maplint = new OpenLayers.Layer.OSM.Maplint("Maplint");
  map.addLayer(maplint);
  var lonLat = lonLatToMercator(new OpenLayers.LonLat(lon, lat));
  map.setCenter (lonLat, zoom);
} 
</script>


追記

Widget追加ボタンを作成しました。
尚、上のコードで表示できるSlippy Mapは1ページに1つだけで、Widgetでは複数のSlippy Mapを同じページに表示できます。また、上のコードによるSlippy Mapと同じページ内にWidgetによるSlippy Mapがあると、その影響により指定した座標・ズームで表示できないことがあるようです。

2008/07/26

Perlのコードをハイライトしてみる

Blogger Syntax Highlighterウィジェットをちょっと弄ってみました。

まぁ、やったことはウィジェット (JavaScript) の最後の方にあるRubyを処理する部分をコピーして、次のページを参考に内容を書き換えてRubyを処理する部分の下に追加しただけなんですけど。




正規表現がよくわかんないので、たぶんPerlの変数を上手く引っ掛けられないと思いますが、今後直そうと思います。

テストで表示させるのに "Hello, world!" ではつまらないしPerlの変数も出てこないので、オープンストリートマップで国土数値情報インポート作業用の資料を作る際に、ファイルをソートするために使った短いスクリプトが残っていたので、それにしました。

preタグに class="perl" を指定して、果たして上手くいくのか...

#!/usr/bin/perl

#####
#
# データ調査用スクリプト UTF8ファイルのSORT
#
# KSJ2 Railway Data 2007 - EB02 (Railway Line)
# 国土数値情報(鉄道データ)平成19年 国土交通省 - EB02 (鉄道路線)
#
# Files
#   Input : N02-07_EB02-r1.osm
#   Output : N02-07_EB02-r1-sort.osm
#    
#####


use strict;
use warnings;
use encoding "utf8";
use Encode;
use open IO => "utf8";


sub main() {

 open(IN, "<N02-07_EB02-r1.osm");
 open(OUT, ">N02-07_EB02-r1-sort.osm");

 my $i = 0;
 my @file = <IN>;
 my @array = sort @file;

 foreach my $line(@array) {
   print OUT $line;
   $i++;
 }

 close IN;
 close OUT;

 printf "Output %d records\n", $i;   

}




# run this script.

main();





うーん、やっと出た。

予想通り最初は正規表現の所がおかしくて、JavaScriptの実行自体がエラーになり、全くのプレーンテキストしか表示されませんでした。その後、キーワードや関数の名前を登録している部分、それに対応するCSSなども修正。これからも少しづつ直す所が出てきそうな気がします。

でも、とりあえず今の時点で動いているものを貼っておきます。

dp.sh.Brushes.Perl=function()
{var keywords='break continue do elsif else for foreach goto if last next return sub undef unless '+'until while';var builtins='abs accept alarm atan2 bind binmode bless caller chdir chmod chomp chop chown '+'chr chroot close closedir connect continue cos crypt dbmclose dbmopen defined '+'delete die do dump each eof eval exec exists exit exp fcntl fileno flock fork '+'format formline getc getlogin getpeername getpgrp getppid getpriority getpwnam '+'getgrnam gethostbyname getnetbyname getprotobyname getpwuid getgrgid '+'getservbyname gethostbyaddr getnetbyaddr getprotobynumber getservbyport '+'getpwent getgrent gethostent getnetent getprotoent getservent setpwent '+'setgrent sethostent setnetent setprotoent setservent endpwent endgrent '+'endhostent endnetent endprotoent endservent getsockname getsockopt glob gmtime '+'goto grep hex import index int ioctl join keys kill last lc lcfirst length '+'link listen local localtime log lstat m map mkdir msgctl msgget msgsnd msgrcv '+'my next no oct open opendir ord our pack package pipe pop pos print printf '+'prototype push q qq qr qx qw quotemeta rand read readdir readline readlink '+'readpipe recv redo ref rename require reset return reverse rewinddir rindex '+'rmdir s scalar seek seekdir select semctl semget semop send setpgrp '+'setpriority setsockopt shift shmctl shmget shmread shmwrite shutdown sin sleep '+'socket socketpair sort splice split sprintf sqrt srand stat study substr '+'symlink syscall sysopen sysread sysseek system syswrite tell telldir tie tied '+'time times tr truncate uc ucfirst umask undef unlink unpack untie unshift use '+'utime values vec wait waitpid wantarray warn write y'
this.regexList=[{regex:dp.sh.RegexLib.SingleLinePerlComments,css:'comment'},{regex:dp.sh.RegexLib.DoubleQuotedString,css:'string'},{regex:dp.sh.RegexLib.SingleQuotedString,css:'string'},{regex:new RegExp(':[a-z][A-Za-z0-9_]*','g'),css:'symbol'},{regex:new RegExp('(\\$|@|%|\\*)\\w+','g'),css:'variable'},{regex:new RegExp(this.GetKeywords(keywords),'gm'),css:'keyword'},{regex:new RegExp(this.GetKeywords(builtins),'gm'),css:'builtin'}];this.CssClass='dp-pl';this.Style='.dp-pl .symbol { color: #a70; }'+'.dp-pl .variable { color: #a70; font-weight: bold; }'+'.dp-pl .builtin { color: #069; font-weight: bold; }';}
dp.sh.Brushes.Perl.prototype=new dp.sh.Highlighter();dp.sh.Brushes.Perl.Aliases=['perl'];


桁番号表示のオプションは TeraPad みたいなものを勝手に想像していたので、ちょっとガッカリ。コードを見るにはメニューにある + expand source のリンクをクリックして下さい。

私はこれをウィジェット (JavaScript) の最後の方にある ['ruby','rails','ror']; で終わっている行の次に追加しています。

元のsyntaxhighlighterのページには"Code License: GNU Lesser General Public License"と書いてあるので、この部分もGLGPLということかな?  よくわからんけど...

2008年7月28日 追記

Perl対応部分を組み込んだウィジェットの追加ボタンを作成してみました。

おかげで、[設定] → [フォーマット] → 改行の変換を「いいえ」にして、自分でbrタグを入力して改行させなければいけなくなりました。「はい」だとウィジェットの中に在る改行までbrタグに変換されてしまうので...
Atom