2009年7月の夢実現のためのアファメーション

成功者になるための必読ブログとは？

とりあえずGoogleMapsの地図URLにリンクをはる。

ウェブサイトを作るときや、何らかのサービスを作るときに、無料で高精細な地図を表示でき、さまざまな場面で利用されている「GoogleMaps」。
（利用規約はありますが。）

APIを利用することで、地図の埋め込みや独自の情報の付加、A地点からB地点までのルート表示などいろんなことが比較的簡単にできるけど、そういった機能を使うにはGoogleのアカウント（API Key）を取得してカスタマイズしなくてはならない。

でも、とりあえずある場所の地図を表示する「マップのURL」を取得する場合、APIを使わなくても簡単にできる。

JavaScriptでURLエンコード。

たとえば、GoogleMapsである住所の地図を表示する場合、GoogleMapsの検索ページで住所やランドマーク（場所の名前）を入力して「地図を検索」ボタンを押すとその地図が表示されるけど、あれはGoogleMapsの「q」というパラメータに文字列を渡すだけでOK。

ただし、文字コードやら使用しているブラウザによって、日本語がうまく通らない場合があるので（というか、ほとんど通らないはず）、検索する文字列をGoogleMaps側が処理できるような形式にしてあげなければならない。

そこで出てくるのが「URLエンコード」。
JSの場合は「encodeURI」という関数があるので、それを使えば一発でOK。

参考にさせてもらったのはこちら。

• URL（URI）エンコード・デコードを行う

こちら↑にある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を突っ込んで飛ぶようにすれば、ほんのちょっと便利。ｗ

出来上がったのはこんな感じのもの。

• GoogleMapsで利用する住所の文字列をURLエンコード

まぁ、このままだとアクセスするたびにデータが消えちゃうので、Cookieを使って残すとか、取得した値をそれぞれDBに入れるとかすれば使い勝手もいいのではないかと。
（ぼくは、実際にはJSは外部ファイルにして、MTの管理画面に読み込み＆住所用のカスタムフィールドを作って、そこで使っています。）

ご参考まで。

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！

成功者になるための必読ブログとは？

MTOSにカスタムフィールドを。

表題のとおり、いまMTOS（MovableType Open Source）のカスタマイズをしています。

とりあえずフロント部分はおいておいて、独自のプラグインを作って
MTOSにカスタムフィールド的なものをつけて、独自タグが使えるようにする…という力技。
（っつっても、Perlとか分からないので、本を買ってきて見よう見まねだけどねｗ）

※通常版の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月に公開するっ！」

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！