Google maps api V3 メモ

Google maps API

Google Maps JavaScript API V3
Google maps api V3 はアプリケーションキーの取得が不要になったので呼び出してそのまま使える。

Startup

読み込み
// sensorパラメータは必須。ユーザの位置情報を取得する場合に true を設定する
// language パラメタもあり、ja を指定すると日本語でのローカライズとなる
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
基本 (jQuery利用)
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"><!--
$(function(){
    // 表示場所(緯度、経度指定)
    var _latlng = new google.maps.LatLng( 35.681382, 139.766084 );
    // 表示
    var _map = new google.maps.Map(
                   document.getElementById('map_canvas')
                  ,{ center    : _latlng
                    ,zoom      : 10
                    ,mapTypeId : google.maps.MapTypeId.ROADMAP }
               );
})
//--></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
マーカー表示
// マーカーを作る
var _marker = new google.maps.Marker({
    position  : new google.maps.LatLng( 緯度, 経度 )
   ,map       : _map
   ,title     : 'ロールオーバーテキスト' 
   ,draggable : true  // ドラッグしたい時
  });
// マーカーに吹出しをつけたい場合の吹出し
var _infoWindow = new google.maps.InfoWindow({
    content  : '表示HTML'
   ,maxWidth : 300    // 最大幅(px)
});
// マーカーに吹出しを付ける
google.maps.event.addListener(_marker , 'click', function() {
    _infoWindow .open(_map, _marker);
});

ちょっと深く

表示領域をマーカー表示エリアに合わせる
// 表示領域の南西、東北の緯度経度を取得しておく
var
    _min_lat = 最小緯度
   ,_min_lon = 最小経度
   ,_max_lat = 最大緯度
   ,_max_lon = 最大経度
;
// LatLngBoundsオブジェクト作成
var _bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(_min_lat, _min_lon)
   ,new google.maps.LatLng(_max_lat, _max_lon)
);
// 指定領域が含まれるように地図を変更
this._map.fitBounds(latLngBounds);
ストリートビューを閉じる
// 地図のデフォルトパノラマオブジェクト取得
var _panorama = _map.getStreetView();
// ストリートビュー非表示
_panorama.setVisible();
ストリートビューになったかを判定
// 地図のデフォルトパノラマオブジェクト取得
var _panorama = _map.getStreetView();
// ストリートビューのパノラマ表示状態が変更されたかをハンドリング
google.maps.event.addListener(
    _panorama 
   ,'visible_changed'
   ,function () {
        if ( panorama.getVisible() ) {
            // street view mode に切り替わったらここが処理される
        }
    }
);

色々できるんですね

XHRまわりのメモ

体調不良

で、会社を午後半休して家で寝たら治った感じなので深夜何かやっているわけですが。

Chrome で sendAsBinary

sendAsBinary はFirefoxが実装しているXmlHttpRequestのバイナリ形式送信だけど、
これをChromeが実装していないので(IE？なにそれ)、Chrome対応させる。
すでに先人達が突っ込んでいっている。

http://code.google.com/p/chromium/issues/detail?id=35705

XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
    function byteValue(x) {
        return x.charCodeAt(0) & 0xff;
    }
    var ords = Array.prototype.map.call(datastr, byteValue);
    var ui8a = new Uint8Array(ords);
    this.send(ui8a.buffer);
}

XMLHttpRequest のoverrideで行けるのでchrome判定さえすればいけそう。

overrideMimeType

XHRでsjisとかを取得したい時はこれで。

var xhr = new XMLHttpRequest();
xhr.overrideMimeType("text/plain; charset=shift_jis");

ここも参考 http://d.hatena.ne.jp/ASnoKaze/20110530/1306720270

HONEYCOMB 本番化メモ

deploy

海外のホスティングにアップした。

本番に伴う修正点

  • defineパス関連(php, js)
  • DBまわり
// my.confいじれないので下記追加
mb_internal_encoding("utf-8");
mb_http_output("utf-8");
mysql_query("SET NAMES utf8",$this->dbc);

現状・問題点

とりあえず Firefox で動いているが、対応しないといけない箇所が沢山。

google maps API

js をロードすると、高確率で「c is undefined」のエラーが出る。
他の非同期ロードjsとかとぶつかってるのか良くわからない。ので、ロードのタイミングをずらして確認してみる。

RSS Reader

atomに対応してないじゃんさ。。問題以前にへぼいよ自分。

Chrome対応

Chromeだと右側のwidgetが上手く起動していない。
Y!トピックのコールバックにデータが帰ってきてる所で死んでいるっぽい。トレースするしかないか。

初期レコード・ディレクトリの自動作成

本来やっておくべきでしょう。なにしてんの自分。

ImageMagick

画像のリサイズや合成等をサーバ上で行う場合はGDかこれが候補にあがる。
たいした事をしないのであればパフォーマンスでGD。GDの高機能版がImageMagickという感じのようで。
今回はImageMagickを利用する。

インストール

Ubuntuにインストールした。

sudo /usr/bin/apt-get install imagemagick
sudo /usr/bin/apt-get install graphicsmagick-imagemagick-compat
sudo /usr/bin/apt-get install php5-imagick

終了。
imagick.ini が作成されて、extension=imagick.soが既に記載されていた。

画像操作の前に

という選択肢からPHPからコマンドラインを利用することにする。そちらの方が楽でオプションの指定も簡単そうなので。。

基本コマンド

リサイズ（以下はpx単位で記載。%の指定も可能）
// 縦横比自動調整でリサイズ(横×縦=200x150)
// 200×146とかになったりする
convert input.jpg -resize 200x150 output.jpg

// 縦横比無視して強制リサイズ
// 絶対に200×150になる
convert input.jpg -resize 200x150! output.jpg

// 縦横どちらかを決定してリサイズする
// アスペクト比自動調整
convert input.jpg -resize 200x output.jpg  // 横を固定
convert input.jpg -resize x150 output.jpg  // 縦を固定

// 縮小だけして、拡大は無視する
// 指定サイズ以上の画像はリサイズされ、指定サイズ以下の画像はそのまま。
convert input.jpg -resize 200x150\> output.jpg

// リサイズ（縮小）によるぼやけ防止(-unsharpオプション)
// 画像を縮小した場合などは画像がぼやけてしまうので、シャープ処理が必要。
convert input.jpg -unsharp -resize 200x150 output.jpg

/*
 * 指定方法
 * -unsharp radius(x)sigma[+amount][+thresold]
 * radius   : ガウシアンでの範囲(default:0)
 * sigma    : ガウシアンの標準偏差(default:1.0)
 * amount   : オリジナルとぼやけたイメージの差分をパーセントで示す(default:1.0)
 * thresold : 量子レンジの分数として定義(default:0.05)
 */

フォーマット変換

convert input.jpg output.png

複数画像からPDFの作成

convert input*.jpg output.pdf

回転

// 右回転の数値指定なので、左回転時はマイナスを指定する
convert -rotate 90 input.jpg output.jpg

画像の切り抜き

convert -crop <width>x<height>+<x_offset>+<y_offset> input.png output.png
// 中央から指定サイズ切り抜くなら
convert -gravity center -crop 100x100+0+0 input.png output.png

GIFアニメーションの作成

convert -delay 30 input*.png output.gif

輝度・彩度・色相(-modulateオプション)

convert input.jpg -modulate 110,130 output.jpg

/*
 * 指定方法
 * -modulate brightness[,saturation,hue]
 * brightness : 輝度(default:100%)
 * saturation : 彩度(default:100%)
 * hue        : 色相(default:100%)
 */

そのほか

文字の合成などについてはそのうち追記しよう。