home mail me! rss

Googleマップって中国見えないんだ

最近、地図をGoogleマップでページに埋め込むって仕事があって、中国圏の地図表示にgoogle.comは弱い(?)みたいで道しか表示されなかったんです。中国の地理なんてもちろんわからないので、クライアントが指定してきた緯度・経度の場所が山の中にあるんだろうくらいに思っていたわけです。

そのままクライアントチェックに出したら、「Google Chinaで表示したらちゃんと出るんでそっちにしてください。」って言われてAPI keyってどこで取得するんだろ?てか中国語わかんないんですけどーと思ったとき、ふとこんな考えが浮かびました。

「国によってAPIkeyが変わるわけないし(わかんないけど)、緯度経度もそのままURLだけ書き換えちゃえば動くんじゃないかな?」って

というわけで早速作業 :arrow:

border-collapse:collapse;とoverflow:hidden;でFirefoxでborderが消えちゃう

いつものようにコーディングしてブラウザチェックをしていたらFirefoxだけTABLEの左ボーダーがどうしても表示してくれなかったんです :sad:
何が原因なんだろうといろいろいじっていた結果どうやらborder-collapse:collapse;とoverflow:hidden;の組み合わせが悪かったみたいです。
overflow:hidden;が指定されたボックスの中に配置されたTABLEで起こる現象みたいで原因はborder-collapse:collapse;を指定したときのFirefoxの仕様にあったっぽい。

統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。

border-collapse - A Day in the Life より引用

そんなわけでFirefoxは左に1pxはみ出すので、そのはみ出した1pxのボーダーがoverflow:hidden;で文字通り隠されてしまうということらしいです。
テストページ

2カラムをfloatでレイアウトして、その解除をoverflow:hidden;でやっているときは注意しなくちゃ :!: :!:
でもSafariは右にはみ出した1pxのボーダーが消えないんだよね。。なんでだろー?

TABLEのクリーンナップどうやってますか?

サイトリニューアルの時に
「原稿はそのままなのでサイトから引っ張ってきてください。」
なんて言われて、<font>タグやらbgcolorとかガッツリhtml側に記述してあったりすることが多かったりして。
ついでにそれが何十ページとか何百ページとかあったりして。
そうすると何回も置換がしなくちゃいけないなぁー面倒だなーと思って、もう1から作ってしまえとテキストをコピーしたときに気づいたわけです :!:

Firefoxはタブ区切りで、IEは半角スペース

これだけでは何のことやら分らないと思うのですが、TABLEの中のテキストをドラッグ&コピーして、テキストエディターにペーストしたときのセル区切りのしるしの話です。
タブ区切りでもスペース区切りでもどっちでもよいのかもしれないのですが、タブのほうが置換するときにすこぶる便利なのでこの発見は私の中では大きかったんです。
TAB(¥t)を『</td><td>』、改行(¥n)を『</td>¥n</tr>¥n<tr>¥n<td>』てな具合に置換すれば何度も不要なタグ削除のための置換を行わなくてもプレーンなTABLEが簡単につくれちゃいます :razz:

ついでに一括置換できるようなフリーソフトに置換処理を登録したり、秀丸マクロを作ったりしてしまえばもっと時間を短縮出来ちゃいます。

もっと簡単な方法でクリーンナップ出来るのかもしれないんだけど。。
みんなどうやってクリーンナップしているんだろう??

そもそもこういうお仕事ってそんなにないのかな?