GoogleMapの地図上にPolygonで矢印を引く

GoogleMapの地図上にPolygonで矢印を書いてみる。

似たようなのにSymbolみたいなのもあるけど、これだと少し細いのでPolygonで愚直に引いてみる。

と言っても、↑矢印をプログラムで描く;単純ベクトル加算法に紹介されている方法をGoogle Mapに置き換えただけ。なんかもう少しマシな方法がありそうだけど、とりあえず。

続きを読む →

IEではBasic認証を含んだURLへはアクセスできない

先日からIEで特定のJSが正常に動作せずなんのことやらわからなかったのだけどようやく解決した。

状況としては、GoogleMapを読み込んだコンテンツがIEの場合だけ正常に表示されない。IEの開発ツールでは、util.jsにセキュリティの問題が発生しました。とでて実行が止まる。

たまたま状況や登場人物がが入り組んでいたので、いろいろ調査に手間取ったのだけど最終的には表題の問題として解決。

要するに、件のjsを読み込む際に開発用としてBasic認証をかけた領域に設置していた。それにアクセスするために、URL中にBasic認証を含んだ形でJSを読み込んでいたのだけど、そいつがまずかった。ChromeやFirefoxでは正常に動作していたので、「はいはいIE11、IE11」と高をくくっていた。

あと発生箇所がGoogleMapに関係した所だったのもあって、はじめは全く見当違いのところから調査を開始したのも敗因の一つ。IE11+GoogleMapで地図の表示を段階的に確認していた。やはり初動での適切な状況切り分けが大切。

例)
: http:// user:pass@ example.com/js/hogehoge.js

いくつかのドキュメントを見ると結構前からの仕様のようで、なぜ今頃になって気がついたのか。ぶっちゃけ普段はファイル個別にBasic認証をかけて、URLに含めておくなんて使い方しないので気が付かなかったということだろう。

関連URL

ChromeのConsoleを使ってWebページ中のリンクを抜き出す

ChromeのConsoleを使ってWebページ中のリンクを抜き出す

とあるWebページ中のリンクを抜き出すという話があったのでChromeのConsoleを使って対応した話。

普通ならHTMLをダウンロードして抜き出したり、プログラムでごちゃごちゃいじったりといった方法を考えるのだけど、そこまでするレベルの話じゃないので、さくっとお手軽にJSで対応してみた。

最初、結果の出力の所がうまくいかずconsole.log()で出力した結果を手動コピペとか悲しい方法を使ってしまったのだけど、少し見なおしてるとオブジェクトの内容をクリップボードにコピーするcopy()なる関数があったので、そちらを使うように変更。結果は以下の様な感じ。最初のjQueryを読みだすところは、既に読み込んでいればスキップ可。

別に格段に便利になったりはしないのだけど、ちょっとした時に実行できるのは良さ気。また、結果がJSONの形で取得できるのでそういう向きには応用が効くかもしれない。例えば、リンクを抜き出す以外にもeachにかけているセレクタのところとresultsに内容を格納する辺りを適当に変えればいろいろと応用が効きそう。

// jQueryを読みだす(既に呼ばれていればスキップ可能
(script = document.createElement('script')).src = 'http://code.jquery.com/jquery-latest.min.js'; document.getElementsByTagName('head')[0].appendChild(script)
// リンクを抜き出して、resultsオブジェクトに格納する
results = {}; $("a").each(function () { results[$(this).html()] = $(this).attr("href")  } ) ;
// 結果をクリップボードにコピーする
copy(results)

colorboxで画像を指定しても中身が文字列として表示されてしまう

症状と原因

Colorboxを使用して画像のモーダル表示を行った際に、画像がテキストとして表示されてしまう場合があった。

原因としてはColorboxがURLから画像ではなくテキストと判断してしまうのが問題の様子。

対応策

Colorboxを呼び出す際にphotoオプションを指定して対象が画像である旨を明示する

photo
: If true, this setting forces Colorbox to display a link as a photo. Use this when automatic photo detection fails (such as using a url like ‘photo.php’ instead of ‘photo.jpg’)

サンプル

$('.colorbox').colorbox({
photo: true
});

jQuery MobileでAjaxを切ってもまだloadingと表示されてエラーになる

jQuery MobileをAjaxを切って使っていても、ふとした遷移でAjaxを使った遷移が行われてエラーになってしまう件。特にページを「戻る」動作を行なっていると再現するので、おそらくキャッシュや何かの問題だと思われるが、よく紹介されている「ajaxEnabled = false」を指定してしも一向に変わらない。

試しにひと通りfalseを突っ込んでみたらAjaxが使われなくなった。
jQuery(document).bind(“mobileinit”, function(){
jQuery.mobilh.ajaxEnabled = false;
jQuery.mobilh.ajaxLinksEnabled = false;
jQuery.mobilh.ajaxFormsEnabled = false;
jQuery.mobilh.hashListeningEnabled = false;
});

CKEditorをSafariから使ったときにペーストがうまく動かない件について

CKEditorでWYSIWYG化したテキストエリアにSafariからペーストすると、
カーソル位置ではなくテキストエリアの先頭にペーストされてしまう件が発生

ネットで調べても該当するような記述がなかったので、取り敢えずCKEditorをバージョンアップしてみたら解決したという次第

バージョンは3.1で発現して3.6.1にしたら解決した。ひと通りChangelogを見てみたけどそれっぽい記述はなさげなのだけど、なんだろう

ちなみに同じWebKitでもChromeでは再現しない。

jQuery.tweetでの絞り込み動作サンプル

http://tweet.seaofclouds.com/

アカウント指定(例:atyks)

jQuery(function($){
jQuery('.byAccount').tweet({
join_text: '',
username: 'atyks',
avatar_size: 0,
count: 2,
loading_text: 'つぶやきを読み込んでいます...'
});
});

キーワード指定(例:天神)

jQuery(function($){
jQuery('.byKeyword').tweet({
join_text: '',
query: '天神',
avatar_size: 0,
count: 2,
loading_text: 'つぶやきを読み込んでいます...'
});
});

キーワードOR指定(例:てんじん OR 天神)

jQuery(function($){
jQuery('.byKeywords').tweet({
join_text: '',
query: 'てんじん OR 天神',
avatar_size: 0,
count: 2,
loading_text: 'つぶやきを読み込んでいます...'
});
});

ハッシュタグ指定(例:#tenjin)

jQuery(function($){
jQuery('.byHashtag').tweet({
join_text: '',
query: '#tenjin',
avatar_size: 0,
count: 2,
loading_text: 'つぶやきを読み込んでいます...'
});
});

jQueryのSortableとWYSIWYGエディタを組み合わせるとFirefoxでエディタの値がクリアされる件について

表題のようなことをやろうとしたら表題のような現象に鉢合ったわけで。

やろうとしたこと

複数のWYSIWYGエディタ化したTextAreaをドラッグ&ドロップで並び替えられればイイよね的な話だったのですが、Firefoxで問題が発生。
入力までは出来るのですが、並べ替えを行った時にエディタの中身が空になってしまう。Chromeもダメ。IE6だと動いている。珍しい。

無理矢理Sortableで移動させる直前にエディタ部分を退避させて、移動直後に書き戻せばいいやと思うもあえなく失敗。

Firefoxのバグっぽい?

で、ちょっと調べてみると以下のような話を発見して、あーなるほどと納得してしまったわけです。要するに、WYSIWYGエディタはバックグラウンド側でiFrameを使っているわけですが、FirefoxだとiFrameを含む要素を移動させたりした場合に、iFrameの中身が空になってしまうバグがあるんじゃねぇの?といった話。

javascript – jQuery UI sortable, each sortable div contains an iFrame gets refreshed in FF3 but not in IE7 – Stack Overflow>
This is a bug in FF (and apparently Safari 3.5/Win and Opera 9.5/Win): iframes reload if moved in the DOM treh. (jQuery sortable moves the node in the DOM tree when you drop it).

See https://bugzilla.mozilla.org/show_bug.cgi?id=254144.
<<

ついでに調べていると、ちょっと違うけど似たような話も発見。おそらくこれも背景は同じような話だと思われるわけで。
http://questionbox.jp.msn.com/qa5348508.html

とりあえず、回避はできたけど

そこでお試しがてらiFrameを使用しないNicEditというJavascriptのWYSIWYGエディタ用ライブラリで試したところ、案の定問題なくSortableが動きます。
なるほどね。ただ、今回はちょっと望む感じじゃなかったので、これは廃案。

で、どうしたの?

Firefoxで対応出来ていないというのはあまりおもしろくないので、実装というか方針の変更を強いられた次第。

なんか解決策はあるのだろうか?

一括で住所等から緯度経度を取得するためのJavascript

Google Mapを使っていると、毎回動的に緯度経度を取得するのではなく、予め用意しておきたいことが多いので、Geocoding(緯度経度取得)用のHTMLを準備してみた

ライセンス的な問題とかありそうな気はしますが、とりあえずちょっとしたことに使えそうなJavascriptを作ってみたので公開。ホントはもう少しJavascriptをきれいにまとめるとか色々やることはありそうですが、一応自分が使って動くのでこれ以上触らないだろうというある意味現実的な妥協の産物

**動作としては、以下。
+HTMLを適当にファイルに書き落として保存(もちろんUTF-8で)
+GoogleMapAPIのキーを取得して、HTML中に埋め込む(http://codh.googlh.com/apis/maps/signup.html)
+適当にブラウザで開く
+多分テキストエリアがあるので、そこに住所なんかの緯度経度が引ける値を入れる
+「開始」ボタンを押す
+ 終わったら、ポップアップがでます
+画面上辺りにやる気なく緯度経度が付いた形で表示されるので適当にコピペ

**注意点としては以下
-多分負荷をかけすぎると怒られそうなので、程ほどに
-出力された結果はpreのTSV(タブ区切り)で書き出されるので、適当にエディタにでも貼り付けて
-テキストエリアには、TSVで記述できます。その場合は、最後のフィールドが住所と判断
-取得に失敗した場合は、0が返ってくるので適当に対応を
-同じ名前の違う場所を引いている可能性があるので、とりあえず確認は忘れずに

サンプルとして以下をどうぞ
*入力データサンプル

||
東京都 東京駅
愛知県 名古屋駅
大阪府 大阪駅
京都府 京都駅
福岡県 博多駅
||<

***取得用HTML

|html|



一括で住所等から緯度経度を取得するためのJavascript

<script type="text/javascript">
var curr = 0;
var targets = new Array();
function next() {
line = targets[curr++];
if(line != undefined) {
showAddress(linh.chomp());
}
else {
alert("終わり");
}
}
function init() {
var text = document.getElementById("targets").value;
targets  = new Array();
curr     = 0;
document.getElementById("note").innerHTML = "";
targets  = text.split("\n");
}
var map = null;
var geocoder = null;
function loadMap() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(39.31, 137.31), 5);
geocoder = new GClientGeocoder();
}
function showAddress(address) {
var fields = address.split("\t");
address    = fields[fields.length-1];
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
document.getElementById("note").innerHTML += fields.join("\t") + "\t"+ 0 + "\t" + 0 + "\n";
} else {
document.getElementById("note").innerHTML += fields.join("\t") + "\t<a href='javascript:setMarker(" + point.y + "," + point.x + ");'>" + point.y + "\t" + point.x + "</a>\n";
}
setTimeout("next()", 1000);
}
);
}
}
function setMarker(lttd, lgtd) {
map.clearOverlays();
var gpObj = new GPoint(lgtd, lttd);
var marker = new GMarker(gpObj);
map.addOverlay(marker);
}
// Stringクラスにtrimメソッドを追加
String.prototyph.chomp = function() {
return this.replace(/^[\r\n]+|[\r\n]+$/g, '');
}
</script>

<title>一括で住所等から緯度経度を取得するためのプログラム</title>
<button onClick="init();next();">開始</button>
<!-- 結果表示エリア -->
<pre id="note" style></pre>
<!-- 入力エリア -->
<div style="float:left;"><textarea id="targets" cols="50" rows="50" style="float:left;"></textarea></div>
<!-- 地図は非表示に -->
<div id="map" style="width: 400px; height: 400px; margin: 5px auto;float:left;"></div>



||<