Sun Limited Mt. » JavaScript

Google Map にイベントを発生させる GEvent.trigger

matsuura — Thu, 23 Jul 2009 08:10:48 +0000

Google Map API で作成したマーカをクリックすると情報ウィンドウを開くようにすることがありますが、地図以外のところのリンクなどをクリックしてマーカの情報ウィンドウを開くには、GEvent.trigger を使用してイベントを発生させます。

Google Map にマーカ表示

特定の場所にマーカを表示してマーカクリックすると指定した HTML を表示させる。
緯度、経度や、HTML は下記コードでは省略しているので、適当に指定してください。

var map = new GMap2(document.getElementById("map"))
map.setCenter(new GLatLng(centerLat, centerLng), zoom);
map.addControl(new GSmallMapControl());

var point = new GLatLng(lat, lng);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);

Google Map 以外からイベントを発生させる

GEvent.trigger を使用します。第1引数にイベントを発生させる対象、第2引数に発生させるイベントを指定します。

マーカに CLICK イベント

Google Maps API を UTF-8 以外で使用する

matsuura — Fri, 16 Jan 2009 05:30:44 +0000

GoogleMap を使用するときに HTML の文字コードを UTF-8 以外にすると GoolgeMap の JavaScript を読み込んだときに IE などでエラーになる。その回避方法と読み込むときに文字コード（charset=”utf-8″）を指定すればOK。

参考 URL:utf-8以外の文字コードで、Google Maps APIを使う (OPQR.jp : WebサービスとWebデザインについて考えてみる;)

mailto で本文をエンコードしたまま表示する方法

matsuura — Thu, 15 Jan 2009 04:43:13 +0000

mailto:hoge@example.com?body=本文
とすると、本文をデフォルトで表示させることができます。

この本文に日本語などをエンコードしたまま渡したい場合があります。普通に body の値にエンコードした文字列を指定すると mailto をクリックしたときにブラウザが勝手にデコードしてしまいます。エンコードしたまま本文の値を渡したい場合は二重にデコードすれば、エンコードした文字列のままメーラーの本文に文字列が表示されます。

これはどういう場合に必要かというと本文に日本語を含む URL を指定したい場合に必要になります。
例えば、
http://www.google.co.jp/search?q=日本語
という文字列を本文に入れたい場合などです。「日本語」の部分を2回エンコードすることにより
http://www.google.co.jp/search?q=%E6%97%A5%E6%9C%AC%E8%AA%9E
とエンコードしたまま、本文に表示させることができます。

実は指定された文字列を含む URL を JavaScript で mailto の本文に入れる必要がありました。結果的に以下の方法でうまく行きました。






mailto

URL の部分は escape() でエンコード、日本語の部分は encodeURI() でエンコードしました。

jQuery で Ajax のメモ

matsuura — Wed, 17 Sep 2008 07:11:24 +0000

jQuery の自分へのメモです。

テキストを入力して、HTML の内容を変更する

$.post は非同期通信で POST でデータを送信してレスポンスを受け取れます。

$.post(url, data, callback, type);

url: POST する url　例 hoge.php
data: POST するデータ　例 {“hoge”:1, “foo”:”foo”}
callback: データを受け取るコールバック関数　例 my_func
type: 受け取るデータのタイプ　例 JSON XML

エラーハンドリングしたいときは $.ajax を使用した方がよい。
jQuery.ajaxメモ – Humming Via Kitchen

Amazonに横浜市立図書館の検索結果を差し込むgreasemonkeyスクリプト

matsuura — Wed, 27 Aug 2008 05:44:09 +0000

unwind-protect: Amazonに横浜市立図書館の検索結果を差し込むgreasemonkeyスクリプト – 改訂

上記スクリプトを便利に使わせていただいていたのですが、先週くらいから急に表示されなくなりました。どうやら Amazon の HTML が微妙に変更されたのが原因のようです。図書館への予約を Amazon のページからすることが多かったので、不便なので原因を究明して修正してみました。

46行目の以下のコードを

header = document.evaluate("//div[@class='buying']/b[@class='sans']",

下記のように修正しました

header = document.evaluate("//div[@class='buying']/h1[@class='parsesans']",

これでとりあえず本の詳細ページでは表示されるようになりました。

追記（2008.10.2)
コメントで教えていただきました。またクラス名が変更になったようです。
以下のコードで動きます。

header = document.evaluate("//div[@class='buying']/h1[@class='parseasinTitle']",

jQuery でクッキーを扱う方法

matsuura — Wed, 11 Jun 2008 21:44:25 +0000

jQuery でクッキーを扱うのを下記サイトを参考にやってみました。
javascriptライブラリjQueryでcookieを超簡単に扱う方法 : 4GALAXYのメモ
 Klaus Hartl – Stilbüro : Cookie Plugin for jQuery

jquery.cookie.js の準備

jquery.cookie.js をダウンロードして HTML で使えるようにします。

クッキーの扱い方

$.cookie('the_cookie'); // get cookie
$.cookie('the_cookie', 'the_value'); // set cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); // set cookie with an expiration date seven days in the future
$.cookie('the_cookie', '', { expires: -1 }); // delete cookie

削除するときは以下でもできます。jquery.cookie.js のソースを確認したら、2番目の引数が null だと expires を -1 にしてくれます。

$.cookie('the_cookie', null);

クッキーのパスを指定する場合は下記のように指定します。

$.cookie('the_cookie', 'the_value', {path:/path/to/});

しかし…

この方法だと名前の分かっているクッキーしか取り扱えない。例えば WordPress の theme switcher が設定するクッキーなどはクッキー名が wptheme[0-9a-f]{16} のような名前になります。今回はこの theme switcher のクッキーを全て削除したいので、結局下記のようにしました。

if (document.cookie && document.cookie != '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
        var cookie = $.trim(cookies[i]);
        rex = new RegExp('^(wptheme[0-9a-f]+)=');
        if (cookie.match(rex)) {
        	$.cookie(RegExp.$1, null);
        }
    }
}

WordPress 管理画面でウィジットをドラッグ&ドロップするとおかしくなるのを修正

matsuura — Thu, 05 Jun 2008 04:52:51 +0000

WordPress の管理画面でダイナミックウィジットを編集する機能で、ウィジットをドラッグ＆ドロップして順番を入れ替えることができます。しかし、ドロップする場所によっては下記画像のようになってしまいます。

WordPress 2.5.1 を使用していますが、WordPress のバグだと思われますが取り急ぎ修正する方法です。

wp-admin/js/widgets.js の 125行目からの

widgetSortable = $('#current-sidebar .widget-control-list').Sortable( {
	accept: 'widget-sortable',
	helperclass: 'sorthelper',
	handle: 'h4.widget-title',
	onStop: widgetSortableInit
} );

となっているところを

widgetSortable = $('#current-sidebar .widget-control-list').Sortable( {
	accept: 'widget-sortable',
	helperclass: 'sorthelper',
	handle: 'h4.widget-title',
	onStop: widgetSortableInit,
	revert: true
} );

とすることに修正できます。
jQuery の sortable に revert: true を指定してやるだけです。
revert を追加する上の行の最後にカンマを入れるのをお忘れなく。

markItUp! を CakePHP で使用するヘルパー

matsuura — Fri, 16 May 2008 04:26:40 +0000

jQuery を使用したブラウザで使用できる高機能マークアップエディタ markItUp! で紹介した markItUP を CakePHP で使用するヘルパーが Bakery に紹介されていました。
markItUp! jQuery universal markup editor Helper | The Bakery, Everything CakePHP : Articles

元の記事のままやってみたのですが一部うまく動作しなかった部分がありましたので、実際に私がやった手順を紹介します。

markItUp をダウンロード

http://markitup.jaysalvat.com/downloads/ より最新版をダウンロードします。
解凍するとデモ用の HTML などがあります。これを見るだけでも markItUp の使い方は分かると思います。
今回使用するのは markitup というディレクトリ内の JavaScript と CSS です。markitup ディレクトリを app/webroot/　に配置します。

markItUp ヘルパー

元記事の下の方に markItUp ヘルパーのコードが掲載されています。views/helpers/markitup.php を作成してこのコードをコピペします。

ビューで markItUp を表示する

markItUp を表示するのに必要な JavaScript と CSS を読み込みます。
markItUpディレクトリ内に JavaScript と CSS が入っているのでヘルパーを使用せずに書いてみました。

実際にエディタを表示する部分は下記のようになります。

editor('Model.fireld'); ?>

jQuery を使用したブラウザで使用できる高機能マークアップエディタ markItUp!

matsuura — Thu, 15 May 2008 05:36:54 +0000

jQuery を使用したブラウザで使用できる高機能なマークアップエディタです。
markItUp! Universal Markup Editor

まずはデモでどのようなエディタができるかを見てみるのが早いかと思います。
HTML
Wiki 記法
 Mac OS 風

このようなカラーピッカーを使用して色の指定なども簡単にできます。

設定方法や設置方法などは各デモの下にそれぞれ記載されていますので、参考になるかと思います。
また、マークマップエディタなので、エディタで入力したものが実際にどのような表示になるかが慣れないと分かりにくいですが、markItUp のメニューの一番右にあるチェックマークをクリックするとプレビューがエディタの下に表示されます。

マークアップに慣れていなくてもボタンを押していけばエディタがマークアップしてくれます。Wiki など入力に慣れていない人でもこれなら簡単に入力できますね。動作も重くなく軽快に動作します。

jQuery で属性値を変更するには set ではなく attr メソッド

matsuura — Thu, 24 Apr 2008 04:47:22 +0000

jQuery で属性値を変更する方法を Google で検索すると

$('#hoge').set('href', 'http://www.syuhari.jp/');

というやり方が結構ヒットするのですが、jQuery1.2.x では

$('#hoge').attr('href', 'http://www.syuhari.jp/');

のように attr メソッドを使用します。

参考：Attributes/attr – jQuery JavaScript Library