nxt web site

ユーザーID、パスワードが漏洩したら大変！
Webサーバー上のアプリケーションが使われてしまい、データが改変されるかも知れません。

そこで「2段ログイン」を組み込んでみませんか。
ログインすると「あなたのメールアドレス」に「あなただけのログインURL」が送られてきて、そこから2回目のログインをしてください。
このURLはあなたしかわからないので、ユーザーID、パスワードが漏洩しても、アプリケーションを使用することはできません。

セキュリティの高さの設定によって次のようなオプションが考えられます。

• 2回目はログインなしでメール添付のURLをクリックするだけでアプリケーションを起動する。
  
• 1回目と2回目のパスワードを別のものにする。
  
• 2回目のログインURLに有効期限を設ける。
  
• 2回目のログインURLを1度しか使えないようにする。
  
• 1回目と2回目の処理を同じPCでないとできないようにする。
  

「2段ログイン」考えてみませんか

Googleマップカスタマイズ3回目は、地図にコントロールボタンを表示する方法です。

前回作成した地図を拡大・縮小したり、航空写真にするためのボタンをつけます。

■大きいコントロールボタン
4方向の移動ボタンと、ズームイン、ズームアウトとズームスライダーを表示します。
GLargeMapControlを作成し、addControlで追加します。
4つの外向き矢印の中心にある内向き矢印のボタンは、元の状態に戻すボタンです。地図を移動させてもそれをクリックすれば
コードの中でセットした中心とズームレベルに戻ります。
→サンプル

■小さいコントロールボタン
4方向の移動ボタンと、ズームイン、ズームアウトボタンを表示します。
GSmallMapControlを作成し、addControlで追加します。
少し小さくてスライダーまで入らない地図におすすめです。
→サンプル

■マップ切り替えコントロールボタン
地図と衛星写真切り替えボタンを表示します
GMapTypeControlを作成し、addControlで追加します。
これで、もれなく3つのボタンが追加されます。（地図、航空写真、地図＋写真）
→サンプル

上記のコントロールボタンはGoogleのデフォルトのボタンを表示していましたが、
このボタンをカスタマイズする方法を紹介します。
ホームタウン・ホームページでは、「好きな町ランキング」で5位以内に入った町の都市ページに
小さな地図を表示していきます。
この地図のサイズが180×180（px）と小さいため、デフォルトのマップ切り替えのボタンが入りません。
そのため、小さなボタンを作成して表示しています。

■コントロールボタンのカスタマイズ
手順としては、表示したいボタンを設定してから、地図にaddControlで追加します。
例えば、航空写真への切り替えボタンを付けたい時は

下記のように、ボタンの設定をします。
var setTypePDiv = document.createElement("div");
this.setButtonStyle_(setTypePDiv);
container.appendChild(setTypePDiv);
//ボタンの名前
setTypePDiv.appendChild(document.createTextNode("写真"));
//ボタンをクリックした時の動きを設定
GEvent.addDomListener(setTypePDiv, "click", function() {
map.setMapType(G_SATELLITE_MAP);
});

その後で、ボタンのスタイルを設定します。
MapTypeSetControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline";
button.style.color = "#0000cc";
button.style.backgroundColor = "white";
button.style.font = "small Arial";
button.style.border = "1px solid black";
button.style.padding = "1px";
button.style.marginBottom = "3px";
button.style.textAlign = "center";
button.style.width = "2em";
button.style.cursor = "pointer";
}

設定したボタンを地図に追加します。
map.addControl(new MapTypeSetControl());

→サンプル

これでGoogleマップのカスタマイズについては終わりです。
GoogleAPIを使って、いろいろなマップを作ってみませんか？

Googleマップカスタマイズ2回目は、地図にマーカーを表示する方法です。

前回作成した地図（こちら）は、指定した場所が中心にあるけれど具体的にどこを指しているのかわかりません。
そこで、「マーカー」と呼ばれる印をつけることにします。

GoogleAPIではマークを付けるために「GMarker」というクラスが用意されています。

位置を渡してオブジェクトを作成し、addOverlayを使ってマーカーを表示します。

　　var point = new GLatLng(35.666623, 139.713371); //前回調べた弊社の緯度と経度
　　var marker = new GMarker(point); //マーカーオブジェクトを作成
　　map.addOverlay(marker); //マップに重ねる

これで、標準のピンクのマーカーを出すことができました。
→サンプル

次に、マーカーを自分で作成した画像に変更してみます。
GMarkerクラスのほかに、GIconクラスを使用します。
まずオブジェクトを作成します。

　　var icon = new GIcon(baseIcon);

そして、アイコンについていくつかプロパティを設定します。
最低限必要なプロパティは以下の3つです。

1. アイコンのURLを指定します。
　　icon.image = "arrow.png";

2. アイコンのサイズを指定します。
　　icon.iconSize = new GSize(83, 93);

3. 画像のどの位置を中心にするか座標を(X,Y)で指定します。
　　icon.iconAnchor = new GPoint(41, 92);

GMarkerの2項目の引数に、設定したiconを渡します。

　　var marker = new GMarker(point, icon);

そしてaddOverlayで表示します。

　　map.addOverlay(marker);

→サンプル

その他、影を付けるプロパティもあります。
Google Maps API V2のリファレンスは下記です。（英語）
http://www.google.com/apis/maps/documentation/reference.html

次回（最後）は、「地図にコントロールボタンを付ける」です。