ダリの雑記：WEBプログラム版

GoogleマップAPIで地図とマーカー・バルーンを表示（個別版）

※v3版を追加しました。

座標データを元に、公開用マップ（マーカー・バルーン付き）を表示します。（まずはサンプル）

手順

１．例によってあらかじめAPIキーを取得してください。

Google MAPS API に登録する　（Google Maps API）

２．bodyタグに、バルーン用情報を記述します。

<div id='gmap_data'>
    <div class='gmap_title'><a name='gmap_title'>井出商店</a></div>
    <div class='gmap_photo'><img src='img/ide.jpg' width='120' alt='井出商店' /></div>
    <div class='gmap_info'>
        住所：和歌山県和歌山市田中町4-84<br />
        TEL：073-424-1689<br />
        営業時間：11:30～23:30<br />
        定休日：木曜（年始休）
    </div>
    <div class='clear'></div>
    <div class='gmap_description'>
        和歌山ラーメンの名を全国に知らしめたのがこちらの店。
    </div>
    <div class='gmap_coord'>
       34.2284871,135.1894984,34.23075140779955,135.19043684005737,16
    </div>
</div>

<div id='map' style="width:500px;height:500px;"></div>

<div class='clear'></div>

ここで必要なものは

id="gmap_data"：このIDを元にデータを取得します
class="gmap_coord"：このclass名を元に座標情報を取得します。
id="map"：ここにマップが表示されます。必ずwidthとheightを指定してください。

class="gmap_coord"の中の座標は

マーカー緯度,マーカー経度,中心座標緯度,中心座標経度,ズームレベル

となっています。（座標についてはこちらから手動で取得できます）

３．今回はhtml内に記述せず、javascriptを外部ファイルに記述し、それを読み込むようにしました。読み込むファイルは以下の３つです。

自作のマップ表示用スクリプト
map.js（ダウンロードページへ）
getElementsByClassNameをIEでも使用できるようにするスクリプト。
getElementsByClassName.js（ダウンロードサイト）
または
prototype.js（ダウンロードサイト）
GoogleMapAPI（キーがあればダウンロードの必要ありません）

htmlファイルのheadタグに上記のファイルを読み込んでください。（APIキーは１．で取得したものを記述してください。）

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/getElementsByClassName.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=（APIキー）" type="text/javascript"></script>

※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。

４．bodyタグのonloadにて、マップ表示用関数を呼び出します。

<body onload="map_single('map','gmap_data')">

map_singleの引数について

第一引数：マップを表示するタグのID（今回はmap）
第二引数：バルーン情報が入っているタグのID（今回はgmap_data）

これで、マーカー・バルーン付きマップが表示できます。（マーカーをクリックするとバルーンが表示されます）

サンプル　[新しいウィンドウで開く]

５．しかし、これではレイアウトが整ってませんし座標情報が表示されてしまっています。

座標情報を非表示にし、バルーンのレイアウトをGoogleマップ風にします。

以下スタイル（ダウンロードの場合はこちら）

#map{
float:left;
}

.clear{
clear:both;
}

/*吹き出しのスタイル*/
.gmap_block{
width:320px;
}
.gmap_block .gmap_title{
font-size:100%;
font-weight:bold;
margin-bottom:10px;
}

.gmap_block .gmap_photo{
float:right;
margin-left:10px;
overflow:hidden;
}

.gmap_block .gmap_info{
font-size:75%;
}

.gmap_block .gmap_description{
font-size:75%;
margin-top:10px;
}
/*お店の情報（個別用）*/
#gmap_data{
float:left;
margin-right:10px;
width:320px;
}

#gmap_data .gmap_photo{
float:left;
width:130px;
}

#gmap_data .gmap_title{
font-size:100%;
font-weight:bold;
line-height:1.5em;
}

#gmap_data .gmap_info,
#gmap_data .gmap_description{
font-size:75%;
line-height:1.5em;
}

#gmap_data .gmap_description{
padding-top:5px;
}

.gmap_coord{
display:none;
}

スタイル適応後のサンプルはこちら

サンプル [新しいウィンドウで開く]

スクリプトのベースとなっているのは「GoogleマップAPIで座標取得その２」同様「オレンジ工房 ORANGE-FACTORY」さんのソースです。（結構改造してますが）

タグ：: API; GoogleMap

nandani | 2010年07月31日 | コメント(0) | トラックバック(3) | JavaScript関連

GoogleマップAPIで座標取得その２

前回では、検索機能がなかったので追加しました。（まずはサンプル）

本来であれば

map.addControl(new google.maps.LocalSearch());

を追加することにより検索フォームを追加できるんですが、「Google AJAX Search APIキー」を取る必要があるし、中心座標はついてくるけど、マーカーが付いてこない。もちろんやり方はあるでしょうが、いまいちわからなかったので、こちらのサイトを参考に検索フォームを設置しました。

AjaxTowerさん「住所から座標を取得」

ソースのベースは前回同様「オレンジ工房 ORANGE-FACTORY」さんのサイトのソースです。

手順

１．まずこちらで、Googleマップ用APIキーを取得してください。

Google MAPS API に登録する　（Google Maps API）

２．headタグ内に以下のスクリプトを記述してください。

※（APIキー）のところは、１．で取得したAPIキーを入れてください。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://maps.google.com/maps?file=api&v=2&key=(APIキー)" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var mapname = "map";
var lat = 34.6862971; //緯度初期値
var lng = 135.5196609; //経度初期値
var zoom = 7;   //ズーム初期値
var geocoder;
var map;
var mk;

var set_map = function () {

    if (GBrowserIsCompatible()) {

        // マップ表示
        map = new GMap2(document.getElementById(mapname));
        var point = new GLatLng(lat, lng);
        map.setCenter(point, zoom);
        geocoder = new GClientGeocoder();

        // コントロール（小）表示
        map.addControl(new GSmallMapControl);

        // ドラッグ可能なマーカー
        mk = new GMarker(point, {draggable:true});

        // ドロップ時に緯度経度取得
        GEvent.addListener(mk,"dragend", function() {
            var p = mk.getLatLng();
            document.getElementById("latitude").innerHTML = p.lat();
            document.getElementById("longitude").innerHTML = p.lng();
        });

        // マップにマーカーを表示
        map.addOverlay(mk);
        document.getElementById("latitude").innerHTML = mk.getLatLng().lat();
        document.getElementById("longitude").innerHTML = mk.getLatLng().lng();

        // ズーム取得（イベント時）
        GEvent.addListener(map, "zoomend",function(oldZoomLevel, newZoomLevel) {
            document.getElementById("zoom").innerHTML = newZoomLevel;
        });

        // ズーム初期設定
        zoom=map.getZoom();
        document.getElementById("zoom").innerHTML = zoom;

        // 中心座標を取得（イベント時）
        GEvent.addListener(map, "moveend", function() {
            var center = map.getCenter();
            document.getElementById("center_latitude").innerHTML = center.y;
            document.getElementById("center_longitude").innerHTML = center.x;

        });

        // 中心座標初期設定
        document.getElementById("center_latitude").innerHTML = lat;
        document.getElementById("center_longitude").innerHTML = lng;

    }
}

//住所を取得する
function moveAddress(){
    var address = document.getElementById("search_word").value;
    geocoder.getLatLng(address, moveTo);
}

function moveTo(latlng){
    if (latlng){
        map.setCenter(latlng, zoom);
        mk.setPoint(latlng);
        document.getElementById("latitude").innerHTML = mk.getLatLng().lat();
        document.getElementById("longitude").innerHTML = mk.getLatLng().lng();
    }else{
        alert("住所から緯度経度に変換できません");
    }
}
// ONLOADイベントで呼び出し
window.onload   = set_map;
window.onunload = GUnload();
//]]>
</script>

※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。

３．次にbody内に以下を記述してください

<div class"search">
    <p>住所から検索：<input type="text" name="search_word" id="search_word" value="" />
    <input type="button" onclick="moveAddress()" value="検索" /></p>
</div>
<div id="map" style="width:500px; height:500px;"></div>
<table>
    <caption>パラメータ1</caption>
    <tr>
        <th>マーカー緯度</th>
        <td id="latitude" name="latitude"></td>
    </tr>
    <tr>
        <th>マーカー経度</th>
        <td id="longitude" name="longitude"></td>
    </tr>
    <tr>
        <th>中心緯度</th>
        <td id="center_latitude" name="center_latitude"></td>
    </tr>
    <tr>
        <th>中心経度</th>
        <td id="center_longitude" name="center_longitude"></td>
    </tr>
    <tr>
        <th>ズーム</th>
        <td id="zoom" name="zoom"></td>
    </tr>
</table>

id="map"の部分にマップを表示するようにしています。このタグには必ずスタイルでwidthとheightを設定してください。

サンプル [新しいウィンドウで開く]

※サンプルでは少しスタイルをつけています。

今回参考にさせていただいたサイト

AjaxTower：該当記事「住所から座標を取得」
オレンジ工房 ORANGE-FACTORY：該当記事「Google Map マーカーのドラッグドロップで緯度・経度を取得」

タグ：: API; GoogleMap

nandani | 2010年07月30日 | コメント(0) | トラックバック(2) | JavaScript関連

GoogleマップAPIで座標取得その１

（追記）検索機能をつけた「その２」を追加しました。

APIを利用したJavascriptプログラムにて、Googleマップで使用できる緯度、経度を取得し、入力フィールドに表示するプログラムです。（まずはサンプル）

なお今回は「オレンジ工房 ORANGE-FACTORY」さんのサイトのソースをベースに作らせていただきました。

手順

１．まずこちらで、Googleマップ用APIキーを取得してください。

Google MAPS API に登録する　（Google Maps API）

２．headタグ内に以下のスクリプトを記述してください。

※（APIキー）のところは、１．で取得したAPIキーを入れてください。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://maps.google.com/maps?file=api&v=2&key=(APIキー)" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var mapname = "map";
var lat = 34.7019079769257;  //緯度初期値
var lng = 135.49497485160828; //経度初期値
var zoom = 7; //ズーム初期値

var set_map = function () {

    if (GBrowserIsCompatible()) {

        // マップ表示
        var map   = new GMap2(document.getElementById(mapname));
        var point = new GLatLng(lat, lng);
        map.setCenter(point, zoom);

        // ドラッグ可能なマーカー
        var mk = new GMarker(point, {draggable:true});

        // ドロップ時に緯度経度取得
        GEvent.addListener(mk,"dragend", function() {
            var p = mk.getLatLng();
            document.getElementById("latitude").value = p.lat();
            document.getElementById("longitude").value = p.lng();
        });

        // マップにマーカーを表示
        map.addOverlay(mk);
        document.getElementById("latitude").value = mk.getLatLng().lat();
        document.getElementById("longitude").value = mk.getLatLng().lng();

        // ズーム取得（イベント時）
        GEvent.addListener(map, "zoomend",function(oldZoomLevel, newZoomLevel) {
        document.getElementById("zoom").value = newZoomLevel;
        });

        // ズーム初期設定
        zoom=map.getZoom();
        document.getElementById("zoom").value = zoom;

        // 中心座標を取得（イベント時）
        GEvent.addListener(map, "moveend", function() {
            var center = map.getCenter();
            document.getElementById("center_latitude").value = center.y;
            document.getElementById("center_longitude").value = center.x;
        });

        // 中心座標初期設定
        document.getElementById("center_latitude").value = lat;
        document.getElementById("center_longitude").value = lng;

        // コントロール（小）表示
        map.addControl(new GSmallMapControl);
    }
}
// ONLOADイベントで呼び出し
window.onload   = set_map;
window.onunload = GUnload();
//]]>
</script>

３．次にbody内に以下を記述してください

<div id="map" style="width:500px;height:500px;"></div>
<div>
    <label for="latitude">マーカー緯度</label>
    <input type="text" id="latitude" name="latitude" size="20" />
    <label for="longitude">マーカー経度</label>
    <input type="text" id="longitude" name="longitude" size="20" />
</div>
<div>
    <label for="center_latitude">中心緯度</label>
    <input type="text" id="center_latitude" name="center_latitude" size="20" />
    <label for="center_longitude">中心経度</label>
    <input type="text" id="center_longitude" name="center_longitude" size="20" />
</div>
<div>
    <label for="longitude">ズーム</label>
    <input type="text" id="zoom" name="zoom" size="2" />
</div>

id="map"の部分にマップを表示するようにしています。このタグには必ずスタイルでwidthとheightを設定してください。

これで、マーカーをドラッグ＆ドロップで動かすたびにその座標を取得できます。

また、マップをつかんで移動したり、コントローラでズームをするたびに「中心座標」や「ズーム」値を取得します。

サンプル [あたらしいウィンドウで開く]

今回参考にさせていただいたサイト

タグ：: API; GoogleMap

nandani | 2010年07月28日 | コメント(0) | トラックバック(1) | JavaScript関連

トラックバック!=ピンバック？

WEB制作やってる人間がいまさらですが、この違いに疑問を持ちました。自分のブログを最近始めてからピンバックの存在に気づいたんですよね～。

トラックバックはわかるけど、ピンバックって何だ？

その答えはこのサイトに書かれていました。

Bowz::Notebookさんのサイト

なるほど、トラックバックは意識的に相手のトラックバックURLを入力する必要があるけど、ピンバックは記事にリンクを張るだけで自動的に相手にPing送信される、と。

どうりで、こちらからトラックバック送信していないのに、記事に載せた参考サイトからリンクが張られていたわけだ。

なかなか便利な機能ですね。

今回参考にさせていただいたサイト

Bowz::Notebook：該当記事「トラックバックとピンバックの違い」

nandani | 2010年07月28日 | コメント(0) | トラックバック(0) | CMS関連

EOF内にて変数を使用する方法

PHP内で文字列を変数に格納するする方法として

$hoge = "文字列";

という方法と

$hoge =<<<EOF

文字列

EOF;

というものがあります。

長い文章などを利用する場合は後者の方が便利なのですが、その中でPHP処理を行えません。

しかし変数ならば{}という風に囲んで使用することができます。

$hensu = "追加文字列";

$hoge =<<<EOF

文字列

{$hensu}

EOF;

これで「$hoge」を「echo」で出力すると「文字列追加文字列」という風に表示されます。

タグ：: EOF

nandani | 2010年07月27日 | コメント(0) | トラックバック(0) | PHP関連

WordPressから直接Googleマップを設定できるプラグイン

Google Maps Anywhere」を使用すると、WordPressの記事入力フォームから直接Googleマップの地図にピンマーク（所在地マーク）を付けることができます。（ただしGoogleマップAPIが必要）

ダウンロードサイト：「WordPress Plugins/JSeries」さんのサイト。

マイマップやストリートビューにも対応。ただ上記で紹介したダウンロードページにはマイマップのやり方が書かれていませんでした。マイマップのやり方についてはこちらのページで紹介されています。

「Odysseygate.com」さんのサイト

※注意点
「Odysseygate.com」さんのサイトで紹介されていたやり方では「/wp-content/uploads/hoge.kml」という風に、「ルートからのパスを記述する」方法で説明されていました。しかし自分がテストしたサーバ（ヘテムルサーバ）ではなぜかうまくいかず、「httpから始まるURLパス」を記述することで成功しました。サーバによって設定方法が変わる可能性があるのでご注意ください。

なお、ここでいう「マイマップを使用できる」というのは、あくまで「予め作成されたマイマップを読み込める」というものです。WordPressの入力フォームから設定したピンマークがマイマップにも反映されるわけではないのでご注意ください。

今回参考にさせていただいたサイト

WordPress Plugins/JSeries：該当ページ「Google Maps Anywhere (地図表示)」
Odysseygate.com：該当ページ「WordCamp 公式サイトに使った7個のプラグインとテーマ」

タグ：: WordPress; プラグイン

サーバの障害が復旧いたしました

昨日26日のお昼ごろから深夜にかけて起きていた、当ブログのサーバの障害について、ようやく復旧したようです。

障害中にアクセスしていただいた方は、本当に申し訳ございませんでした。
これからも当ブログをよろしくお願いいたします。

タグ：: さくらインターネット

nandani | 2010年07月27日 | コメント(0) | トラックバック(0) | News ＆ Topics

HTML5でお絵かきツール

HTML5のCanvasを使ってお絵かきツールv0.5を作ってみました。

ベースはASCⅡ.jpのこちらの記事を参考に作成。そこに「カラーピッカー.js」や「rgbcolor.js」を投入し、「Canvas Painter」というサイトのソースを参考にさせてもらいながら作りました。

ファイヤーフォックスでしか動かない、レイアウトが雑、ツールの機能がまだ不十分（特に不透明度・ブラシ（ぼかし））など問題点が多々ありますが、一応上げてみます。

お絵かきツールv0.5サンプル　[新しいウィンドウで開く]　（Firefox3.6以上でのみ正常動作します）

ソースはこちら

※ソースについて

今回、自分で改良したファイルは

examples/index.html
draw/draw.js
rgbcolor/rgbcolor.js　（this.toRGBに引数を付け加えただけ）

だけです。

その他については上記で掲載したサイトからダウンロードしたり、載っていたソースをそのまま使用しています。

制作にあたり、今回は以下のサイトを参照させていただきました。

HTML5.jp：該当ページ「Canvas」「Javascript ライブラリー」

ASCⅡ.jp：該当ページ「HTML5のCanvasで作る、Flash不要のお絵かきツール」

もやし日記：該当ページ「色表現を変換するJavaScriptライブラリ - rgbcolor.js」

タグ：: Canvas; HTML5

IEでもCSS3　その３（css3shadow）

今回の方法では、ドロップシャドウ・テキストシャドウができます。

「css3shadow」を利用する方法。（参考サイト：ppBlogさんのサイト）

css3shadowでできるCSS3機能は以下のとおりです。

-moz-box-shadow または -webkit-box-shadow ：ドロップシャドウ
text-shadow ：テキストシャドウ

css3shadowのIE用ドロップシャドウでは「box-shadow」ではなく、「-moz-box-shadow」または「-webkit-box-shadow」で記述します。もちろん両方書いていても大丈夫です。

手順

１．まずはこちらのサイトから「css3shadow」をダウンロードしてください。（リンク先の下のほうにある「添付ファイル：css3shadow.htc」をクリックしてください。）

２．htmlファイルに以下を記述し、「css3shadow.htc」を呼び出してください。（css3shadowではbehaviorで呼び出しても有効になりません）

３．スタイルシートを設定してください。なお、css3shadowではinsetによる内部シャドウが使用できます。
（ie-css3とPIEでは現在確認したところ、できませんでした）
通常のドロップシャドウにする場合はこの「inset」を削除してください。

.box{
padding:20px;
background-color:#FFF;
border: solid 10px #999;
width: 500px;

font: 18px Arial; color: #555;
-moz-box-shadow: inset 0px 0px 12px rgba(10, 10, 10, 0.95);
-webkit-box-shadow: inset 0px 0px 12px rgba(10, 10, 10, 0.95);
text-shadow: 0px 2px 3px rgba(10, 30, 100, 0.3);
}

４．スタイルは、ドロップシャドウ・テキストシャドウともにclass「box」という名前にしていますので、body内にそれぞれを含んだタグを記述してください。（以下例）

<div class="box">
<p>「css3shadow」では、insetによる内部シャドウが使用できます。</p>
<p>「css3shadow.htc」を呼び出す場合は、behaviorではなく、scriptタグで呼び出してください。</p>
</div>

これで、IEでも対応できるようになります。

サンプル [新しいウィンドウで開く]

※サンプルではinsetによる内部シャドウを使用しています。

注意事項

シャドウを設定しているクラスで「text-align:center;」を使うと、「こちら」のようにとんでもない結果になります。使う場合はそのクラスの中にもうひとつタグを入れてそちらで「text-align:center;」を使ってください。

上記の問題、ご対応いただけたようです。製作者様ありがとうございました^^

今回参考にさせていただいたサイト

ppBlog ：該当記事「IEでCSS3のドロップシャドウを使いたい」

タグ：: CSS3; HTML5

nandani | 2010年07月22日 | コメント(2) | トラックバック(1) | CSS関連

IEでHTML5で追加された新要素を使用する方法

HTML5では、以下の新しい要素が追加されています。

article
aside
dialog
figure
footer
header
hgroup
menu
nav
section

これらの要素とは一体なんなんだ？ということを、てっとり早く説明した記事がこちらになります。「html5を使ったブログのデザイン(HTML5.jp)」

さらに詳細を知りたい方はこのページへ。「HTML要素（HTML5.jp）」

さて、ここで問題となるのが、例によってIEではこれらの要素が実装されていないということです。これらにclassをつけてもそもそも要素として認識されないため、classにスタイルを設定しても無視されてしまいます。

そこで、javascriptの出番。Remy Sharp氏という方がこれらの要素を有効化できるプログラムを作ってくれていますので、その助けをかります。

headタグに以下の記述を追加してください。

もしくは

http://html5shiv.googlecode.com/svn/trunk/html5.js　

から「html5.js」をダウンロードして

これで、最初に記述した新要素が使えるようになります。

今回参考にさせていただいたサイト

HTML5.jp ：該当記事「html5を使ったブログのデザイン(HTML5.jp)」「HTML要素（HTML5.jp）」
クリエイティブ・タブロイド withD（ウィズ・ディー）：該当記事「HTML5の実践」

タグ：: HTML5

ダリの雑記：WEBプログラム版

GoogleマップAPIで地図とマーカー・バルーンを表示（個別版）

手順

GoogleマップAPIで座標取得その２

手順

今回参考にさせていただいたサイト

GoogleマップAPIで座標取得その１

手順

今回参考にさせていただいたサイト

トラックバック!=ピンバック？

今回参考にさせていただいたサイト

EOF内にて変数を使用する方法

WordPressから直接Googleマップを設定できるプラグイン

今回参考にさせていただいたサイト

サーバの障害が復旧いたしました

HTML5でお絵かきツール

制作にあたり、今回は以下のサイトを参照させていただきました。

IEでもCSS3　その３（css3shadow）

「css3shadow」を利用する方法。（参考サイト：ppBlogさんのサイト）

手順

今回参考にさせていただいたサイト

IEでHTML5で追加された新要素を使用する方法

今回参考にさせていただいたサイト

月別アーカイブ

カテゴリー

新着記事

コメント

タグクラウド

週間アクセスランキング

プロフィール

フィード

RDF/RSS 1.0 | RSS2.0 | Atom