ゆーすけぶろぐ » JavaScript

Chromeで位置情報取得

yusukezzz — Wed, 09 Dec 2009 16:16:03 +0000

先日、Firefoxで位置情報を取得するnavigator.geolocationを紹介しましたが、それのChrome版です
＃Chrome版というか、呼び出しているAPIはFirefoxと同等なので結果も全く同じになります
windowsのでは動きましたがLinux版では動きませんでした；

// これをロードしとく


// browserに応じて使い分け
var geo;
// for firefox and mobile safari
if(navigator.geolocation)
  geo = navigator.geolocation;
// for google chrome(win) and Chrome Lite(Android)
else if(window.google && google.gears)
  geo = google.gears.factory.create('beta.geolocation');
if(geo)
  geo.getCurrentPosition(-省略-);
else
  alert('geolocation disabled...');

GoogleMapsAPI V3

yusukezzz — Thu, 26 Nov 2009 13:41:22 +0000

今更ながらver3が存在することを知りました；
ver2.xと比べて大分シンプルになったようです
最大の違いはiPhoneやandroid向けにも最適化されている点です

Map V3 Tutorial – Google Maps JavaScript API V3 – Google Code
Google Maps API V3 Reference – Google Maps JavaScript API V3 – Google Code

毎度のごとく仕様はかなり変わっているので、
とりあえずチュートリアルとリファレンスを読んで勉強し直そうと思います

navigator.geolocation.getCurrentPositionのキャッシュ時間

yusukezzz — Thu, 19 Nov 2009 06:15:56 +0000

con_mameさんに教えて頂きました
navigator.geolocation.getCurrentPositionの結果はキャッシュされていて、
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
のoptionsにmaximumAgeをミリ秒単位で指定すると、
その時間が経過したときにキャッシュが破棄されます（0だと毎回取得し直す）
他にもtimeoutの指定も出来るようです

ブラウザで位置情報取得

yusukezzz — Sat, 03 Oct 2009 19:25:59 +0000

Firefox 3.5 からは、位置情報通知機能 (Geolocation API) が標準搭載に – Cirius Lab. ブログ

凄く簡単に出来ました！
ただし精度はイマイチ…普通の家庭用Wifiだし、しょうがないか；
iPhoneでも同じコードで動くらしいのでtouchでも動くと期待
大学や公衆無線LANなら多分位置情報を持ってると思うので、今度試してみようと思います

windowサイズ変更時の処理

yusukezzz — Wed, 16 Sep 2009 07:02:17 +0000

最近googleMapsAPIで地図を使った研究をしているのですが、
windowサイズを変えたり、ページ下段にFirebugを表示した際に要素のサイズを変える処理が欲しくなりました
javascriptではonload（ページ読み込み時のイベント）や、
onresize（ページ領域変更時のイベント）が用意されています
これらを使ったサンプルがこちら（Firefox3.5でしか試してません）
id=map_elementをページの半分にだけ表示します

window.onload = function(){
  //コメント部はgoogleMapsAPIを使用している場合
  //mapの初期化処理は省略
  //map = new GMap2($("map_element"));
  setHalfSize();
}
window.onresize = function(){
  //var center = map.getCenter();
  //var point = new GLatLng(center.lat(), center.lng());
  setHalfSize();
  //checkResizeを呼んでサイズ変更をAPIに通知しておくと、その後の移動を宜しくやってくれる
  //map.checkResize();
  //map.panTo(point);
}
function setHalfSize(){
  $('map_element').style.width = innerWidth / 2;
  $('map_element').style.height = innerHeight;
}

ようはページ読み込み時とページ内領域サイズ変更時にサイズがfitするような処理を仕込めばいいことになります
~~googleMapsの場合は中心位置もサイズに合わせて維持させてやると使いやすくなると思います~~
blog@slightlyblue: GoogleMapsブラウザリサイズ時のイベント処理でcheckResizeする！
を参考にmapの中央位置をリサイズ後も維持出来るようにしました

prototype.jsで特定要素を配列で取得する

yusukezzz — Thu, 04 Jun 2009 12:28:30 +0000

//全ての画像要素
images = $$("img");
alert(images[0].src);

//id、classで絞込み
field = $$('div#loginForm .field input');
alert(field[0].value);

TalkLineにPostするためのLDR用GreasemonkeyScript

yusukezzz — Mon, 20 Apr 2009 06:40:34 +0000

TalkLineという自作マイクロブログにLDRからPostするためのGreasemonkeyScript

// ==UserScript==
// @name           TalkLineForm
// @namespace      http://yusukezzz.dyndns.org/
// @description    TalkLine post form for Livedoor Reader
// @include        http://reader.livedoor.com/*
// ==/UserScript==

(function(){
	var w = (typeof unsafeWindow == 'undefined') ? window : unsafeWindow;
	var description = 'TalkLine post form for Livedoor Reader';
	$client = 'TalkLineForm for LDR';

	w.myfunc = function(url, title){
		$status = document.getElementById('status_' + url);
		window.setTimeout(function(){
			GM_xmlhttpRequest({
				method: 'POST',
				headers: {'Content-type': 'application/x-www-form-urlencoded'},
				url: 'http://133.78.124.70/post/',
				data: 'status=' + encodeURIComponent($status.value) + '&title=' + encodeURIComponent(title) + '&url=' + encodeURIComponent(url) + '&client=' + $client,
				onload: function(responseDetails) {
					if(responseDetails.responseText != 'success') alert('Failed');
					else $status.value = '';
				}
			});
		}, 0);
	}

	w.entry_widgets.add('talkline_form', function(feed, item){
		var url = item.link.replace(/#/g,'%23');
		var title = item.title
		return [
			'',
			'',
			'',
		].join('');
	}, description);
})();

LDRで用意されてるくっつける用のメソッドでinputを用意し、GM_xmlhttpRequestでpostしています
GM_xmlhttpRequestでPOSTメソッドを使うには
headers: {‘Content-type’: ‘application/x-www-form-urlencoded’}
が必要です
また、Railsならば受け取るアクションでXSS対策のトークンチェックを無効化、又は対応させる必要があります
（この辺のセキュリティ対策は正直良く分かってません）

GM_xmlhttpRequestをwindow.setTimeoutでラップしてあるのはセキュリティ上の配慮のようです
詳細は良く分かりません＞＜

キーボードショートカットや投稿されてるpostを表示させたり、まだまだ弄る余地はいくらでもありますが、
とりあえずこれでLDRからPost出来るようになったので、後はLDRだけに留まらず、通常サイトからのpost＆twitterへのクロスポストに対応させたいと思います

GreasemonkeyScript作るのに参考にしたサイト

yusukezzz — Mon, 13 Apr 2009 14:02:42 +0000

LivedoorReaderに何かくっつけてXML HTTP Requestしたくなった

最速インターフェース研究会 :: livedoor Readerに何かくっつけるGreasemonkeyの書き方

いまさらだけどGM_logの使い方。console.logも使えるようになった！ – Cherenkovの暗中模索にっき

GM_xmlhttpRequest [Dive Into Greasemonkey]

Greasemonkey – sukechan.net

LDR/Fastladderで各記事を表示時に動的にアレコレする方法 – by edvakf in hatena

Greasemonkey

0.7.20080121.0 compatibility – GreaseSpot

この辺見てLivedoorReaderのページからGM_xmlhttpRequestするところまでは出来た
後はサーバでそれを受け取って処理すれば初期の構想は実現出来そうだ
今度しっかりまとめたい

今日のまとめ

yusukezzz — Mon, 02 Mar 2009 17:33:16 +0000

ResourceCompressorをAjax化すべく奮闘していました

# ディレクトリのファイル数を取得
Dir.glob('path/to/files/*.{js,css}').length
# ファイルサイズ取得
File::stat(file).size # int
File::stat(file).size.to_s # string
# パスからファイル名取得
File.basename(path, ignore_ext)

// 正規表現
matches = str.match(regexp);
// 置換
result = str.replace(regexp, newString);

色々はまって大変な時間を消費した…orz

MacのFirefoxでマウスジェスチャ

yusukezzz — Fri, 13 Feb 2009 11:47:24 +0000

Adobe Illustratorを使う必要性が出てきたのでまたMacを借りました
そして前も陥った問題として、「マウスジェスチャには右クリックを使う」という世界の常識？があります
Macのトラックパッドは右クリックでドラッグするのにControlキー＋クリックしなければいけません
ドラッグ中このキーを押し続けるのは辛いものがあり、常用には耐えません
そこで、右クリックを他の操作で代用できないか？と考えました
たどり着いた結論はuserChrome.jsの使用です（userChrome.jsは以前にも取り上げてますね）
自分はCtrlキーを押しながらマウスカーソルを動かすことでマウスジェスチャとして認識するように設定しました
（Ctrlキーが使えなくなっても右クリック自体は2本指タップで出来るので）
使用したスクリプトはこちらのもの
SampleCodeのExtension replacementsのところにあります

改変したのは以下の通り

//mousedown、mouseupをkeydown、keyupに
28.     ["keydown", "mousemove", "keyup", ...
//caseの条件もkeydownへ true（Ctrlキー押下）だったらジェスチャ開始
39. case "keydown":
40.         if (aEvent.ctrlKey == true)
//keyupにcase条件変更
52. case "keyup":

保存してFirefox再起動
以上で完了