スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Chrome ExtensionでGoogleMapの静的変換

Google Mapを画像に変換するVer2でGoogleの動的地図を静的地図に変換するJavaScriptを書きました。
でもまあ、変換するたびにこの画面を開くのもめんどくさいかなと思い、Chrome Extensionの機能で実現してみました。

Chrome ExtensionはGoogle Chromeの拡張機能でJavaScriptとHTMLとCSSで構成されます。
普通にWebを作れれば、拡張機能が作れるので、手っ取り早くていいですね。
そして今回は拡張機能なかでも、パッケージングとか必要の無いさらに簡単なUser Scriptsを使います。
これは、*.user.jsという名前で読ませるとChromeは拡張機能と判断して、インストールしてくれます。

User Scriptsでは、表示されている特定のページをカスタマイズすることができます。
今回はGoogle Mapでリンクを作成する時に調整する画面をカスタマイズします。
ページの最後にボタンを追加して、ボタンを押すと変換して、クリップボードにコピーします。

User Scriptsではこの中で宣言された関数を呼び出すことができません。
そこでscriptタグを生成し、そこに関数を流しました。
そのせいで、ちょっとソースが書きにくかったです。ヒアドキュメントがあればいいのにね。

// ==UserScript==
// @name Google Map Converter
// @match http://maps.google.co.jp/maps/empw*
// ==/UserScript==
var str1= "function makeAnchor(link, src) { return '<a href=\"' + link + '\" target=\"_blank\"><img src=\"' + src + '\"/></a>'; }";
var str2 = "\
function copyExecute(){\
var src = document.getElementById('snippetarea');\
var key = 'your_key';\
var data = src.value;\
var index = data.indexOf('href');\
var index2 = data.indexOf('style', index);\
var link = data.substring(index + 6, index2 - 2);\
var start = link.indexOf('ll=');\
var end = link.indexOf('&', start);\
var position = link.substring(start+3, end);\
var start = link.indexOf('z=', start);\
var end = link.indexOf('&', start);\
var zoom = link.substring(start+2, end);\
var src = 'http://maps.google.com/staticmap?center=' + position + '&markers=' + position + ',red' + '&zoom=' + zoom + '&size=425x350' + '&key=' + key;\
link = link + '&amp;start=0';\
var result = makeAnchor(link, src);\
var proxy = document.getElementById('clipboard_object');\
proxy.value = result;\
proxy.select();\
document.execCommand('copy');\
}\
"
;
var script = document.createElement('script');
var content1 = document.createTextNode(str1);
var content2 = document.createTextNode(str2);
script.appendChild(content1);
script.appendChild(content2);
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);

var ta = document.createElement('textarea');
ta.id = "clipboard_object";
ta.style.width = "0px";
ta.style.height = "0px";
var snippetarea = document.getElementById('snippetarea');
snippetarea.parentNode.appendChild(ta);

var link = document.getElementById('postlink');
var button = document.createElement('button');
var val = document.createTextNode('copy');
button.id = 'abc';
button.setAttribute('onclick', 'copyExecute()');
button.appendChild(val);
link.parentNode.appendChild(button);

一行入魂サイトにまとめがあります。
スポンサーサイト

COMMENTS

No title

function copyExecute(){
//省略
}
のように定義して置いて、
var str2 =copyExecute.toString();
とするのがお薦めです。

No title

あれ、というか、
> User Scriptsではこの中で宣言された関数を呼び出すことができません。
というのは何か誤解されていると思います。
関数の定義は普通に書いて、
button.setAttribute('onclick', 'copyExecute()');
というのを
button.onclick = copyExecute;
とするか、
button.addEventListener('click',copyExecute,false);
とすれば動くと思います。

No title

あれれ? 書いているときはできなかった気がしてましたが勘違いでしたか。
おっと、先取りの連載の方じゃないですか、連載は参考になりました。ありがとうございます。

COMMENT FORM

TRACKBACK


この記事にトラックバックする(FC2ブログユーザー)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。