アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション: 2009年7月
2009年7月29日
JavaScriptでGoogleMapsの地図用URLを表示する
成功者になるための必読ブログとは?
とりあえずGoogleMapsの地図URLにリンクをはる。
ウェブサイトを作るときや、何らかのサービスを作るときに、無料で高精細な地図を表示でき、さまざまな場面で利用されている「GoogleMaps」。
(利用規約はありますが。)
APIを利用することで、地図の埋め込みや独自の情報の付加、A地点からB地点までのルート表示などいろんなことが比較的簡単にできるけど、そういった機能を使うにはGoogleのアカウント(API Key)を取得してカスタマイズしなくてはならない。
でも、とりあえずある場所の地図を表示する「マップのURL」を取得する場合、APIを使わなくても簡単にできる。
JavaScriptでURLエンコード。
たとえば、GoogleMapsである住所の地図を表示する場合、GoogleMapsの検索ページで住所やランドマーク(場所の名前)を入力して「地図を検索」ボタンを押すとその地図が表示されるけど、あれはGoogleMapsの「q」というパラメータに文字列を渡すだけでOK。
ただし、文字コードやら使用しているブラウザによって、日本語がうまく通らない場合があるので(というか、ほとんど通らないはず)、検索する文字列をGoogleMaps側が処理できるような形式にしてあげなければならない。
そこで出てくるのが「URLエンコード」。
JSの場合は「encodeURI」という関数があるので、それを使えば一発でOK。
参考にさせてもらったのはこちら。
こちら↑にあるJSを使えば、検索したい住所の文字列をURLで使えるようにエンコードすることができる。
たとえば「東京都中央区銀座1-1」であれば、
「%E6%9D%B1%E4%BA%AC%E9%83%BD%E4%B8%AD%E5%A4%AE%E5%8C%BA%E9%8A%80%E5%BA%A71-1」
ってな具合。
※番地などの数字やハイフンなどの記号は、GoogleMaps側がその差異を吸収してくれるので、全角半角どちらでもOK。
んで、このままでは住所の文字をエンコードしただけなので、GoogleMapsのURLとして利用できるように、JSをカスタマイズ。(さらに汎用的に利用できるように引数を設定)。
具体的なコードはこんな感じに。
<script type="text/javascript">
/*GoogleMapsのURLエンコード用関数*/
/* <![CDATA[ */
function EncodeStringToUri(formInput,encOutput,dispLink) {
var EncStr = encodeURI( document.getElementById(formInput).value );
var googlemapsUrl = "http://maps.google.co.jp/maps?q=" + EncStr;
document.getElementById(encOutput).value = googlemapsUrl;
document.getElementById(dispLink).href = googlemapsUrl;
document.getElementById(dispLink).target="_blank";
}
/* ]]> */
</script>
んで、使うときは、html側に住所入力用のフィールド(id="addressStr")と結果表示用のフィールド(id="mapUrl")を用意して、ボタンやリンクで上記の関数の引数に値を設定して呼び出せばOK。
例:<a href="javascript:void(0);" onclick="EncodeStringToUri('addressStr','mapUrl','mapLink')">地図URLの表示</a>
さらにリンク確認用のaタグ(id="linkUrl")を用意して、そのhrefの属性にリンク先のGoogleMapsのURLを突っ込んで飛ぶようにすれば、ほんのちょっと便利。w
出来上がったのはこんな感じのもの。
まぁ、このままだとアクセスするたびにデータが消えちゃうので、Cookieを使って残すとか、取得した値をそれぞれDBに入れるとかすれば使い勝手もいいのではないかと。
(ぼくは、実際にはJSは外部ファイルにして、MTの管理画面に読み込み&住所用のカスタムフィールドを作って、そこで使っています。)
ご参考まで。
アファメーションの宝庫!→あの独立・起業ネタの情報ランキング!
投稿者 kuro : 16:25 | 固定リンク | ID:800
2009年7月 1日
MTOSを使い倒すっ!
成功者になるための必読ブログとは?
MTOSにカスタムフィールドを。
表題のとおり、いまMTOS(MovableType Open Source)のカスタマイズをしています。
とりあえずフロント部分はおいておいて、独自のプラグインを作って
MTOSにカスタムフィールド的なものをつけて、独自タグが使えるようにする…という力技。
(っつっても、Perlとか分からないので、本を買ってきて見よう見まねだけどねw)
※通常版のMT4を使えば「カスタムフィールド」はデフォルトで使えるんだけど、
今回は一切お金をかけられないので、MTOSじゃないとダメなんっす。
(WordPressって選択肢もあるけど、使ったことがないし、よくわからないので。汗)
MTOSの管理画面のカスタマイズ時の備忘録。
んで、やっている過程で一個ひっかかったところ。
エントリーの管理画面にフィールドを表示させるためには、
「edit_entry.tmpl」とかに
<mtapp:setting
id="フィールド名"
label="ラベル名"
label_class="ラベルの表示位置">
表示するフィールド(<input>とか<textarea>~</textarea>)
</mtapp:setting>
っていう設定を書く。
んで、<mtapp:setting>~</mtapp:setting>の中は
自動的に複数のタグ(divとか)が挿入されて、管理画面にフィールドが挿入される。
んで、たとえば特定のフィールドに対する説明文とかをpタグとかで表示させたいと思って、
<mtapp:setting>~</mtapp:setting>の間にpタグとかを入れると、
その中身がtextareaの場合、本来自動的に挿入されるdivタグの一部がなぜか入らなくて、
タグの入れ子構造が崩れてしまい、結果として表示が崩れてしまう。
(中身がinputの場合は大丈夫だった。)
具体的な例:
<div class="textarea-wrapper"><textarea>~</textarea></div>
<p>テキストエリアの説明</p>
とコードが吐き出されるはずなのに、なぜか
<textarea>~</textarea></div>
<p>テキストエリアの説明</p>
と、divの開始タグがない状態になってしまう。(理由は不明)
回避方法は…<mtapp:setting>~</mtapp:setting>の間によけいなものは入れない。
(ぜんぜん“回避”じゃない。)
もしくは、<mtapp:setting>を使わないで、直接edit_entry.tmplに
テキストフィールドを書き込む。(こっちのほうがデザインとかカスタマイズしやすいかも。)
文系だってできるんだっ!
元来プログラムとか苦手…ウソです。
“苦手”じゃなくて“できない”だった。(VIVA!文系っ!!)
でも、自分が作ったフィールドが管理画面に表示されて、さらにそこに入力した値が
ページとかデータに反映されると…なんか楽しい。(完全にオタクの領域)
今は特定の機能をただ追加するだけだけど、
汎用的なプラグインとか開発できたら楽しいだろうなー。
…って、こんなマニアックなことは、普通に仕事してたら
あまりやる機会はないだろうけどねー。
とりあえず、日々ワクワクしながら生きていますっていう報告と、
制作過程の備忘録なんだにゃー。
アファメーション
「今やっている作業は、9月に公開するっ!」
アファメーションの宝庫!→あの独立・起業ネタの情報ランキング!
投稿者 kuro : 03:56 | 固定リンク | ID:799