[GoogleMapsAPI]GoogleMapを非表示でロードする

photo by caveman_92223
 たとえば、最初は地図なんて見えないけど、ボタンを押したらGoogleMapを表示するようなWEBアプリケーションを作りたいとか、逆ジオコーディング(だけ)のためにGoogleMapsを使いたい(!)とか、そういう理由で 見えないオブジェクト上にGoogleMapsオブジェクトをロードしたいという要求がたまにあって。

ところが、display:noneのオブジェクトにGoogleMapをロードすると、GoogleMapは自分自身のサイズが取れないので、ちゃんと表示されない。

display:none の状態で初期化するとバグる – てっく煮ブログ

上記ブログでは、だからdivを表示した状態でロードしましょう (つまり、GoogleMapはボタンを押した時にロードしましょう)ということになっているのですが。

GMap2だと、sizeプロパティを指定できるので、非表示のままロードすることも可能になっています。

Google Maps API リファレンス – Google Maps API – Google Code

/* googleマップ */
var currentPos = new Array();
currentPos['latitude'] = 35.7301;
currentPos['longitude'] = 139.7090;/* デフォルト値:池袋駅西口公園*/
var zoom = 14;
google.load("maps", "2",
{
"callback" : function() {
if (google.maps.BrowserIsCompatible()) {
jQuery(window).unload = google.maps.Unload;
var map = new google.maps.Map2(
document.getElementById("map_canvas"),
{ size:new GSize(500,500) }
);
map.setCenter(new google.maps.LatLng(currentPos['latitude'], currentPos['longitude']), zoom);
map.enableGoogleBar();
map.enableDoubleClickZoom();
map.addControl(new google.maps.SmallMapControl());
map.addControl(new google.maps.MapTypeControl());
}else{
window.alert('Browser is not compatible for Google Maps');
return;
}
}
}
);

何が嬉しいかというと、ボタンを押した時にロードするよりも、あらかじめロードしていた方が、多少スムーズに表示されます。

技術用語の英語訳をWikipediaで探すアイデア

 さっきふと、文字列を文字参照(もぎゃみたいなの)形式に変換する関数を作ろうとして、
文字参照って英語でなんていうんだっけ、と思った。

 「文字参照 英語」とかでググってもなかなか答えは出ないけど、こういうときはWikipediaをみて…
wikipedia1.PNG
ここにあるEnglishをクリックすると、該当する用語の英語版にジャンプする。そこの見出しは、当然元の単語の英語訳になる。

wikipedia2.PNG
もちろん100%そうなるとは限らないけど、技術系の用語だとかなりいい確率で当るような気がする。

[ruby]DBI経由Mysqlのquoteメソッド

[ruby]DBI経由Mysqlのquoteメソッド
 DBIを経由してMysqlのquoteメソッドを呼ぶと、なぜかメソッドがないことになっている。
たとえばこんなコード。

irb(main):001:0> d = DBI.connect('dbi:Mysql:...', ...)
irb(main):001:0> d.quote('foo')
/usr/local/lib/ruby/gems/1.8/gems/dbi-0.4.2/lib/dbi/handles/database.rb:179:in `quote': undefined method `quote' for # (NoMethodError)

ググってみると、既に困った方がおられて。

dbh.quote name
みたいな事をやっていたんだけど、本番環境に乗せたら動かないので何かと思って調べた
ruby-dbiのquoteメソッド – 小柄な人

解決されていた。

言葉があってるのか微妙だけど、インスタンスのメソッドじゃなくてクラスのメソッドを直に使えば良かったみたい。

Mysql::quote name

おなじようにやれば解決するとはおもうけど、自分の場合、Mysqlクラスは直接呼びたくない事情があって、あまりこの解決法はとりたくありません。

要するに、なぜだかquoteメソッドがコメントアウトされたことが問題らしいので、適当なソースに下記を貼り付けてメソッドを最定義することにした。

# dbd-mysql (0.4.3)で quoteメソッドがなぜかコメントアウトされていて困るので再定義して復活させる
module DBI::DBD::Mysql
class Database < DBI::BaseDatabase
def quote(value)
case value
when String
"'#{@handle.quote(value)}'"
when DBI::Binary
"'#{@handle.quote(value.to_s)}'"
when TrueClass
"'1'"
when FalseClass
"'0'"
else
super
end
end
end
end

これで問題のコードは通るようになった。将来的に再度サポートされたら、上記コードだけ削除すればいいはず。

ボクが調べた限り、そもそもなぜコメントアウトしたのかはわかりませんでした。ご存じの方がいたらぜひ教えてください。

ググってこのページにたどり着いた方へ:
これを参考に同じ対処されるのは自由なのですけれど、
もし、セキュリティ上緊急の問題があってコメントアウトせざるを得なかったとかそんな理由だとすると、上記コードを貼り付けるのは、せっかく檻に入れた虎を自分で出してきていることになるので、自己責任でやってくださいね。

#postgressでも同じように困っている人がいる
RubyForge: Ruby/DBI: open-discussion

無料でWindows/Macの各種ブラウザの見え方チェックができるAdobeBrowserLabが便利

これは便利。

Adobe® BrowserLabは、ブラウザ上で、Windows/MacのIE,Firefox,safariなどの
ブラウザでサイトがどう見えるのかを見せてくれるツール。

同じような機能のものとしては、Browsershotsがあげられるのですが、
これに比べて圧倒的に早いのが特徴です。

URLを入力して数秒で結果が出ます。しかも無料(要ユーザー登録)

browesrLab1.jpg
こんな感じで見せてくれます。これは、http://mogya.com/をMacOSXのsafari3.0でみた様子。

browesrLab2.JPG
こんなふうに2ペインで見比べることもできます。

これはとってもありがたいですね。

CentOSリーダー失踪事件の続報(の日本語訳)

CentOSのリーダーさんが音信不通ということで問題になっています。
CentOS、音信不通のプロジェクト管理者に公開書状 -INTERNET Watch

このブログも いいめもメイドめーるもみんなCentOSの上で動いているので、この件に関してはとても心配しています。

centos.orgのサイトで、リーダーの方と連絡が取れて、サービスを継続できそうだという内容の追記が発表されたので、日本語に訳してみました。なお、()の中は僕の補足です。

Open Letterへの追記

CentOS Development team は本日(8/1)、定例ミーティングを行ない、Lance Davis も参加しました。
このミーティングで、主な問題については即座に解決し、残った問題についても、締め切り付きの作業合意を作成することができました。
今後CentOSユーザーに対してインパクトが発生することはないはずです。
CentOS Project はCentOS.org とCentOS.infoドメインを管理下に置いており、CentOSディストリビューションに関するすべての商標や素材なども保持しています。
我々は、Lanceと今回の件に関する全ての合意をすみやかに実施していくつもりです。よりくわしい情報については、来週公開できると思います。
(August 1, 2009 04:34 UTC by Donavan Nelson が元になっています)

CentOSと例のOpenLetterに関する事実

CentOSは死んだりしていないし、どこかへ行ってしまったりもしません。
Open Letter に署名していた人たちは今も全力でCentOSプロジェクトにコミットしています。

(8/1に行なわれた定例会議で)多くの問題は解決しました。解決していない問題についても、期限付きのアクションプランが策定されました。
CentOS Project はCentOS.org とCentOS.infoドメインを管理下に置いており、サービスが中断する危険性はありません。

CentOSプロジェクトに寄付を申し出ていただいたみなさまへ:感謝します。ただ、寄付に対する新しいポリシーを我々が公開するまでは、ちょっと待っておいていただけるようにお願いします。

CentOSプロジェクトは今や完全なボランティアベースで進んでおり、我々は新しいマネジメントスタイルを必要としています。
我々は、現在、今回のような問題が再発しないように取り組んできましたし、今後もそうするつもりです。近日中に、いくつかの新しいポリシーを公開できると思います。
(Last Update: August 1, 2009 04:36 UTC by Donavan Nelson が元になっています)

デザイナさんにメイドめーるのデザインを駄目出ししていただいた

プログラマの人が、デザイナさん10人に自分のサイトのデザイン、どこがダメなのかを指摘していただいたという話があって。

Geekなぺーじ : 10人のデザイナさんに駄目出しして頂きました

いいなぁ、僕も教えてほしいなぁ・・・・。

と思っていたので、先日のwebtekoのプレゼンの際に、メイドめーるのデザインを出して、「どうしてこんなに素人っぽいの?」と聞いてみました。

before.PNG

#一部で誤解されている方がおられたみたいですが、メイドめーるのデザインは、素人っぽさを狙ってこうなったのではなくて、僕が全力でデザインしてこうなっています。

メイドめーる デザインに関していただいたつっこみ@WEBTEKO

  • グラデーションを使うとそれっぽくなる
  • スペースの取り方がバラバラなのでまとまって見えない。その結果、読むペースが乱れてしまう
  • ロゴとキャッチが一体になっていてわかりにくい
  • 何を読ませたいのかを考えて制御する
  • ボタンが立体的にする
  • 今っぽいデザイン:
    →でっかいログインフォームと、小さな「登録する」
    大きくすればクリックしてくれるとは限らない
  • ボタン→対照色じゃなくてもいい。読めればいい。
  • 吹き出しつけたら?
  • ボタンの中にアンダーラインは変。ボタンなの?テキストなの?
  • コンテンツ量が少ないので、ajaxとかで1ページにまとめちゃってもいいのでは?

頂いた意見の中で、わりとすぐに対応できそうだったコンテンツ間隔の問題と、ボタンの作り方を修正したのが、今のデザインです。
あと、ちょっと落ち着かせる意味でロゴを小さくしてみた。

after.PNG

・・・多少はマシになった気がする。ボタンの色がまだ変かなぁ?

Google検索一位のサイトを列挙する

googletop.png
変数名とか、データベースのフィールド名とかで、アルファベットとハイフンのみで名前を作らないといけないことがあります。
一個二個だったら真面目に考えるのですが、ある数を超えるとかなり面倒になってきます。

“マクドナルド”,”ミスタードーナツ”,”モスバーガー”→”mcdonalds”,”misterdonut”,”mosburger”

こういう時、Googleに「マクドナルド」と渡せば、まず確実に”http://www.mcdonalds.co.jp/”が1位にでますから、そこからwwwとco.jpを外せば、おおよそ正しい綴りの名前を作ることが出来ますよね。残る問題は、100個あるのをいちいちGoogle検索するのか、という問題で。そんなのはコンピュータがやればいい。

というわけで、さくっと書いてみたphpスクリプト。$keywordsにある文字列をGoogle検索して、それぞれ1位の検索結果のURLをリストにして表示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google一位検索</title>
</head>
<body>
<?php

$keywords = array(
	'マクドナルド',
	'ミスタードーナツ',
	'モスバーガー'
);

$results = array();
foreach($keywords as $keyword){
	$url = "http://www.google.co.jp/search?hl=ja&lr=lang_ja&q=";
	$url .= urlencode($keyword);
	$html = file_get_contents($url);
	#$html = mb_convert_encoding($html,'UTF-8','UTF-8');
	 
	preg_match('/<a href="([^"]+)" class=l>/',$html,$link);
	$results[$keyword] = $link[1];
}

print "<ul>";
foreach($results as $key=>$value){
	print "<li>$key => $value</li>";
}
print "</ul>";
?>
</body>
</html>

入力した単語を変数名にするWEBサービス、とか考えたのですが、あんまり実用的じゃない気がするので、とりあえず作ってみたソースだけ公開してみます。なんかおもしろい使い途があったら自由に使っていただいて結構です。

iphoneと他の携帯の併用

iphoneを買った結果、今まで使っていたAU携帯のパケット定額は解除してしまったので、電車の中や布団の中で、携帯ではなくiPhoneを使っている時間が長くなりました。
結果として、AU携帯にかかってきた電話に気づかなくて取り逃す事故が連発。

対策として、AU携帯をとりそこねた時にはiPhoneに転送するようにしてみました。

着信転送サービス | 通話オプション | au by KDDI

注意点としては、AU携帯で簡易留守録を設定していると、転送されずに留守録になってしまいますので、これを解除しておく必要があります。
KDDI au: 簡易留守メモを利用する > 簡易留守メモを設定する

これで、Tap Defenseに夢中になっていても大丈夫ですね。

[selenium][warn] Link has target ‘_blank’, which is not supported in Selenium!

WEBサイトに対して自動テストを実施するためのツールSelenium IDEをお試し中。これがあればWEBアプリケーションの生産性は明らかに向上するようなツールで、もっと早く試しておけばよかったなぁ、と思うことしきり。

そういうわけで今後どんどん使っていこうと思っているSeleniumなのですが、取り急ぎ困ったことが一つ。target=”_blank”のリンクはクリックさせてくれないみたいで。

[warn] Link has target ‘_blank’, which is not supported in Selenium! Randomizing target to be: selenium_blank*****

といわれてテストが止まってしまいます。

target=”_blank”で開いたウィンドウの先で更にアレコレしたい場合はダメですが、とりあえずポップアップで外部サイトに飛ばせるようになっていることをテストしたいだけであれば、こんなテストで代用することが出来るみたいです。

<tr>
<td>verifyElementPresent</td>
<td>//a[@href='http://mogya.com/']</td>
<td></td>
</tr>

もぎゃんらんどでは、seleniumでばりばりテストしながら開発されたWEBアプリケーションを作ってほしいお客様を募集しております。