テクニック

2011年08月03日

fgetcsvにハマッた

いやー、しかしハマッた。PHP5から多バイト文字列へのfgetcsvの動作がおかしくなってしまったんですね。早くググれば良かった。

ま、そういう後悔も血や肉になるということで、このブログを見ている方が同じ罠に嵌らないように、印象的に書いておきます。

PHPでのfgetcsvはもう使うな!

というわけで、じゃーどうすればいいの?ってことで、参考リンクはこちら。

PHP5でfgetcsvが正常に動作しない | yossy.blog
http://yossy.iimp.jp/wp/?p=56


こちらの関数 fgetcsv_reg を使おうねって話です。
"(ダブルクォーテーション)が奇数個の場合に無限ループに陥る問題があるようなので、コメント欄までしっかり確認した方が良いかも。


dmatsu2005 at 01:20コメント(0)トラックバック(0) 

2011年05月05日

VARDIA RD-S1004K でのメール録画予約

備忘録ばかりで申し訳ないのですが、昨日、いろいろな方に電話しまくってご迷惑をおかけしたので、ちゃんと自宅のHDDレコーダーを外部から予約できるように設定しました。その方法について、他の方も参考になればいいな、とブログエントリしておきます。ちなみに、メールでREモードで録画予約する方法については、他のサイトに載っていないので、便利かもしれません。(コールセンターに聞いたらすぐ教えてくれたのですけどね)

※参考にさせていただいたサイト
レグザでメール録画予約を設定する方法と、iPhoneアプリ「ココ録」の使い方 | sorarium
http://www.sky-s.net/sky-blog/archives/2009/12/14-014617.php


まず、自宅のHDDレコーダー(DVD)はTOSHIBA VARDIA RD-S1004Kです。私はまだBlueRay機器はまだ買っていません。というより、BlueRayで欲しいものがあるわけではなく、DVDで満足してしまっているので買う予定がないというか…。まぁ、そのうちみんなBDになったら買おうかな、くらいなんですけども、もうみんなBD持ってるんですかね?僕の回りでは持ってる人少ないのですが。

で、一生懸命、テレビからVARDIAの画面で設定しようとしても設定画面がないのです。久しぶりにマニュアルを引っ張り出して読むと、どうやらPCのブラウザで設定しなければならない様子。

まず、TV(というか、本体)でパスワードなんかを設定します。
クイックメニューの下の方にある「設定メニュー」を押すと、こんな画面が出るので、ネット機能設定を選びます。まず、「イーサネット利用設定」を「利用する」にして、その上の「イーサネット/ネットdeダビング設定」を押します。


設定メニュー

すると、左側のタブ「ネットdeナビ/ダビング/レック/サーバー」の設定です。

ネットdeナビ/ダビング/レック/サーバー

ここでは本体パスワードを設定します。これがまず第一のポイント!
そして、「アドレス/プロキシ」タブに移動します。

アドレス/プロキシ

いまのところ、ネットdeナビとか、使う気無いのでDHCPを「使う」にしてありまして、うちのマンションのプロバイダーからIPアドレスが割り当てられてますので、それをメモするのが2番目のポイントです!

IPアドレス

うちのマンションのプロバイダーはグローバルIPをくれずに、プライベートIPが割り当てられるので不便なんですけどね。それはまた別の話なので、おいといて。とりあえず、「10.240.78.16」をメモっておきます。

さて、そしたら、同じLAN上のPCブラウザで、おもむろに「http://10.240.78.16/」を開きます。

password入力

さきほどの本体ユーザー名と本体パスワードを入力します。

ブラウザ設定画面1

で、ネットdeナビ設定をクリック。

設定2

ここで「メール予約パスワード」をしっかりと覚えて入力。
その他は普段使っているメールアドレスでもいいそうですが、今回、私は別のアドレスを用意しました。APOPまでは対応していますが、pop3sは対応していないので、gmailが使えないのが残念です。
設定上わかったことは、電源ON時のPOPアクセス間隔は5分がミニマム。1分にしてもダメでした。
また、SMTPについては、他の方も書いていますが、25番ポートでアクセスできる状態ではないとダメみたいですから、普通のプロバイダーだとOP25B対策の関係上、難しいかもしれませんね。(僕は未確認)
587番ポートに転送するといった回避する方法もありますけれども、ここでサラッと書けるような易しさではない…。もし、知りたければ、コメントでも書いてください。なにかいい方法を考えます。もっとも、東芝側が本来対応すべきだと思います。どうして、こういう細かいところの対応がヘボいのか、理解に苦しみます。ポート番号を入力する欄を設けるだけなのだから、すぐに対応すればいいのに。
本体ソフトのアップデートもできるわけだしね。

さて、最後に実際の予約なわけですけれども、一応、ここで指定したメールアドレスへ次のような内容のメールを送る必要があります。また、メールのタイトルは何かしら付けておかなければならない、という記述も、他のサイトで見かけましたので、メールタイトルに「予約」とでも入れて、次のコマンドをメール本文に入れましょう。

open メール予約パスワード prog add YYYYMMDD HHMM
HHMM D011 R1


メール予約パスワードは別にいいですね。
YYYYMMDDが予約開始日付です。そして、最初のHHMMが録画開始時刻、次のHHMMが録画終了時刻です。日付をまたがる場合にはどうするのだろうか、という疑問もありますが。

で、D011と書いた部分、これがチャンネルです。地デジの場合、関東だと、011がNHK総合なんですけれども、これは番組表で見てください。

最後のR1というのが、他のサイトではあまり見かけない、このブログならではの情報。R1と書くとREモードで録画されます。ちなみにRT1だとTS1で、RT2だとTS2で録画されます。
これは、録画モードに詳しい方はおわかりだと思いますが、REで撮らないと、VR方式にできないので、DVDに焼けません。別にHDDに入れて観るだけだから、というのであれば構わないのですが、DVDに焼いた後、リッピングしてCPRMをごにょごにょするような場合には、REモードで撮ってしまうのが楽。そういうわけで、このコマンドを書いておくと便利です。
※画質にこだわるのだったら、最初から違う機器で録画した方がいいです。

ちなみに、上の方で参考にしたサイトとしてリンクさせていただいたページで紹介されている、「ココ録」というiPhoneアプリで番組予約できるようになりました。番組表を詳しくみようとするとアプリが落ちてしまうのが残念なところですが、それでもコマンドを覚えなくてもいいので、これを利用しようと思います。



dmatsu2005 at 11:37コメント(0)トラックバック(0) 

2011年04月28日

またまた美人時計の余白消しなわけだが・・・

みなさん、ごめんなさい。
美人時計の余白を消すスクリプト、変更しないとIEでまともに動きませんでした。すいません。

というわけで、
<script type="text/javascript">
// 美人時計の白い部分を消すJavascript
var remove_whitespace = function (e) {
    var _this = e.target ? this : e.srcElement;
    _this.style.height="";
};
var iframes = document.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
    if (iframes[i].src.indexOf("url=http%3A%2F%2Fbijint.com",0) >= 0) {
        if(iframes[i].addEventListener) {
            iframes[i].addEventListener("load", remove_whitespace, false);
        } else if(iframes[i].attachEvent) {
            iframes[i].attachEvent("onload", remove_whitespace);
        } else {
            remove_whitespace();
        }
    }
}
</script>
こちらで動作確認を取りました。美人時計のパーツの下に貼ってご利用ください。ずいぶんと時間が経ってしまったのも申し訳ない。なかなか時間が取れなくて。
また、動かなかったらコメントくださいませ。

dmatsu2005 at 00:22コメント(3)トラックバック(0) 

2011年03月09日

Wordpress 3.1 でカテゴリーページが表示できなくなった場合の対処法

管理サイトの一つで、Wordpress 3.1にバージョンアップした結果、カテゴリーページが表示できなくなるという現象に悩まされました。

これはパーマリンクに関係する問題ですけれども、インターネットを色々と調べましたが、自分と同じ症状での解決策は見当たりませんでした。
様々な条件があるので、何とも言えませんが、管理サイトの一つで次の条件を満たしているところがあると、もしかすると同じ悩みを持つかもしれません。

今回のサイトはこういう設定でした。
  1. パーマリンク設定
    /%category%/%year%/%monthnum%/%postname%.html
    ※以前、MTからWordpressに移行した経緯があり、上記のような設定になっている。
  2. スラッグに日本語が混じっている

で、とりあえず、回避策でしかありませんけれど、.htaccessを次のように改変します。 

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteRule ^category/.*/(.+)$ /?taxonomy=category&term=$1 [L]
RewriteRule ^category/(.+)$ /?taxonomy=category&term=$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
RewriteRule が2行増えていますね。ちなみに、Top Level Categories Pluginを使っていると回避方法が思い浮かびませんので、あきらめるしかありません…

どなたかの参考になれば。 

dmatsu2005 at 01:26コメント(0)トラックバック(0) 

2011年02月14日

美人時計のブログパーツで余分な余白を消す!

群馬美人時計がリリースされまして、ブログパーツを貼る方法を紹介させてもらいました。

群馬美人時計がリリースされたからブログにパーツを貼ろう!
http://blog.livedoor.jp/dmatsu2005/archives/51909274.html

続いて、僕自身も以前から気にかかっていた無駄な余白問題について@nyoeさんが、その回避方法を紹介されていました。

美人時計ガジェット設置にワンポイントアドバイス
http://d.hatena.ne.jp/nyoe/20110203

しかし、それでもうまくいかない、というコメントをいただいておりまして、詳しく調べてみました。
僕の場合は群馬美人時計の方は大丈夫だったのですが、本家の美人時計の方がおかしい、という状況でありました。

美人時計 無駄な余白


これはGoogleガジェットの問題のような気もします。ソースを見ると、iframeのstyleに「height:320px;」が書き込まれてしまっているのです。さーて、どうしたものか、という訳なのですが、Javascriptで処理しちゃえ(heightを消しちゃう)ってことで、早速スクリプトを書いてみました。
<script type="text/javascript">
// 美人時計の白い部分を消すJavascript
var remove_whitespace = function () {
    this.style.height="";
};
var iframes = document.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
    if (iframes[i].src.indexOf("url=http%3A%2F%2Fbijint.com",0) >= 0) {
        if(iframes[i].addEventListener) {
            iframes[i].addEventListener("load", remove_whitespace, false);
        } else if(iframes[i].attachEvent) {
            iframes[i].attachEvent("onload", remove_whitespace);
        } else {
            remove_whitespace();
        }
    }
}
</script>

jQueryに慣れすぎてて、久しぶりにJavascirptネイティブなソースを書くと、いろいろ忘れていることがありますね。ググりまくってしまった(笑)

具体的に、どうやって貼るのか、ということになりますが、美人時計をブログパーツとして貼った画面で、<script src="..."></script>というのを入力したはずです。その下に、上記のソースを書き加えてください。
僕のブログのように、複数個の美人時計ガジェットを貼っている場合でも、そのページで読み込まれるべき美人時計の最後の一つ(一番下になる美人時計と考えてもいい)に貼れば機能します。

どうぞお試しください!


dmatsu2005 at 00:45コメント(2)トラックバック(0) 

2011年02月07日

文字入力方法のあれこれ

ホリエモンがiPhoneでのフリック入力を紹介して有名になったけれど、僕は携帯端末でフリック入力がない機種には戻れそうにありません。

フリック入力

フリック入力の基本は、テンキー型のかな入力で、キーを0.5秒くらい押していると、上のような画面が表示され、そのまま指をスライドさせて、文字を入力する、という方法です。

それじゃ、待ってる時間長いじゃない、ってことになるのだけど、実は0.5秒待って、この表示にならなくても、スライドさせて指を離せば、その文字が入力されるってところがポイントですね。

慣れると、かなり速くなるみたいですよ。たとえばホリエモンはTwitterで
Twitter_ホリエモン_フリック入力
「会話するスピードで打てる」って言ってるし、こんな動画も見つけてしまいました。

フリック入力の紹介動画


実際、iPhoneで文章を打っていると、だんだん予測変換も自分用に馴染んでくるから、どんどん入力が早くなっていくよね。本当に辛いのはアルファベットと数字の入力画面が分かれてること。これもフリック入力の同一画面があると嬉しいなぁ。

っていうか、入力システム(設定>一般>キーボード)をアプリで追加できないのかな?もっとたくさんのアプリが出てくると思うのだけど。Appleに開放してもらいたい部分ですね。

そういえば、iPadで7notesが評判のソフトなので、ダウンロードしてみました。

7notes
http://7knowledge.com/


手書きで文字入力するっていうシステムはどんどん進化していますね。それこそZaurusで入力していた時代を思い出してしまいます。その後、Tablet PCも使っていた時期があります。正直、使い物にはならなかったのですが、あきらめずに文字認識をするソフトにはチャレンジしちゃうのですよね。

友人のF君Anoto Penが大好きなので、文字認識というよりも、文字をそのままストローク順に保存してしまう形で手書きをデジタル化していますが、僕はなんとか文字認識できるようにしてほしいな、と思っています。
これから生成されるデータに関しては言えば、デジタル化する必要があるのならば、最初からデジタルで入力すればいいわけで、手書き文字をデジタル化するのは、7notesのような方法が一つのソリューションですよね。入力しながら変換していく。ただ、一気に書いたものを後でまとめてデジタル化するっていう方法も捨てがたいんだよね。ま、ただ、一番そうなってほしいのは、文章というよりも数式です、僕の場合は。数式入力ってまだいい方法がないよね。僕の中では、LaTeX形式での入力が現時点では最善なのだけど(数式エディタはやっぱり使いづらいです)、修正したりするのが人間業じゃなくなったりする数式もあるので。

こんな話をしていると、もうWolfram Alphaの話もしたくなるのだけど、長くなるので、これでおしまい。というのも、プログラミングをしていて現実逃避でこのエントリを書いていて、そろそろ仕事に復帰する気になったので。やっぱりアルゴリズムをある程度数式で定式化してからプログラミングした方がいい場面ってのもありますね。当たり前のことなのかもしれないけれど、面倒でいきなりプログラムで書くと、結果的にリファクタリングが大変になるという愚痴をしているわけだったり…。あぁっもう、仕事するっ!!

dmatsu2005 at 00:41コメント(1)トラックバック(0) 

2011年02月02日

群馬美人時計がリリースされたからブログにパーツを貼ろう!

僕がお世話になっているD.P.EYEさんから、美人時計の群馬県版「群馬美人時計」がリリースされました。
美人時計の地方版「群馬美人時計」公開のお知らせ | 株式会社D.P.EYE
http://www.dpeye.co.jp/news/20110202.html

追記:GIGAZINEのニュースにもなっていますね。
美人時計が続々地方へ進出、今度は群馬の美人が颯爽登場する「群馬美人時計」
http://gigazine.net/news/20110202_bijin_gunma/

PC版の群馬美人時計は、こちらから見ることができます。
bijin-tokei(群馬版)official website / Japanese Ver.
http://www.bijint.com/gunma/

早速、ブログに貼ってみよう、ということで、群馬美人時計をブログに貼る方法をご紹介。iGoogleのガジェットとして簡単に貼れますよ!

まず、こちらにアクセス。
美人時計 群馬版(bijin-tokei ver.gunma) - 自分のホームページに追加
http://www.google.co.jp/ig/directory?hl=ja&url=bijint.com/gadget/gunma/gadget.xml

群馬美人時計のガジェットを貼ろう001

で、右側の「ウェブマスター向け」メニューの中にある「このガジェットを埋め込む」をクリック

群馬美人時計のガジェットを貼ろう002

ここで、タイトルや幅・高さ、枠線などを選びます。
「プレビュー」しても残念ながら、画像が入らないので、今ひとつ感じがつかめないのですが、大きさと枠線だけ確認するといった感じです。ちなみに僕のブログですと、左メニューに合わせて幅・高さを共に170pxで設定しました。

で、「コードを取得」をクリックすると、

群馬美人時計のガジェットを貼ろう003

下にHTMLコードが表示されるので、これをコピーして、ブログパーツとしてお使いのブログのデザイン設定で貼ればOKです。

群馬美人時計のガジェットを貼ろう004

こんな感じで貼れました!ま、ブログ見れば分かるだろうけれど、RSSリーダーで読んでる人向けね。

ちなみに、こういう拡大版も貼れるところがlivedoorブログのいいところ。でも、320pxがマックスサイズっぽいですね。



ね?試してみたくなったでしょ?


dmatsu2005 at 11:45コメント(5)トラックバック(2) 

2011年02月01日

IE+UTF-8でフォントが見苦しい件をWordPressでどうしようか悩んでいた

ホームページ制作の仕事がWordpressに載せることばかりになってきておりますが、いろいろいじくり倒していると、font-familyをいじるとIEでとにかく見づらい、という問題にぶつかります。

IEでUTF-8だと、なぜかアンチエイリアスが効かないという現象でして、インターネットをウロウロしていると、問題だと認識している方も多く、ただ回避策は無いようでして。
Wordpressを使っている以上、UTF-8から逃げられるわけもなく、そもそもUTF-8から逃げようという気もありませんし、IEの方が悪い!と断言できるわけですしね。
ちなみにNTTのホームページはIEで見てもフォントが綺麗です。これはShift_JISだからアンチエイリアスが効いてきれいなんですね。

で、結局どう妥協するか、ということなんですが、IE+UTF-8の場合には「MS Pゴシック」にしておけば、見慣れているといいますか、それほど違和感が無いといいますか、そういうことで逃げると。
ただ、Firefox、Safari、Chromeを使う人も増えてきているわけで、そういう方たちには、もっと綺麗なフォントで表示させたい、という希望もあるわけです。

とりあえず、Vista以降であれば「メイリオ」があるので、そちらの方がまだ綺麗だし、見やすいので、そちらを使えるようにしたい。
これをjQueryで解決してしまおうかと思っていたのですが、Wordpressならではの、簡単な解決法があったので、備忘録ついでにブログにエントリしておきます。

まず、Wordpressのテーマ内のstyle.css(別にファイル名はそうでなくてもいいけれど)では、IE以外用の設定をします。
body {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","MS Pゴシック",Verdana,sans-serif;
}
そして、IE用の設定をWordpressだとこうやって書けることを初めて知りました。ファイルとしてはheader.phpの<head>内で
<!--[if IE]>
<style type="text/css">
body{
    font-family: "MS Pゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Verdana,sans-serif;
}
</style>
<![endif]-->
と書いてあげる。

どうですかね、この辺の妥協点は。皆さんのご意見を伺いたいです。

dmatsu2005 at 23:57コメント(0)トラックバック(0) 

Web技術:郵便番号から住所検索する

「郵便番号から住所を自動入力する」という機能は、Web制作をやっているとある種必須の趣きすらありますが、何故か、Google様は「郵便番号から住所を自動入力」というような表現で検索すると、AjaxZip2のことを紹介したページばかり出てきます。

でも、時代は既にAjaxZip3になってますから!

AjaxZip3
http://code.google.com/p/ajaxzip3/


AjaxZip2のときには、データを自分のサーバ上にもってこなくてはならないのが面倒でしたし、結構な量なのでFTPで上げるのにも一苦労でしたが、AjaxZip3ではサーバにデータを上げる必要もないのが素晴らしいところ。

というわけで、簡単な紹介をしておきます。とりあえず、下記のサンプルをご覧ください。

郵便番号
住所1
住所2

ソースがどうなっているか、というのは見てもらってもいいのですが、面倒でしょうから、ここに載せておきます。
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
<br />
郵便番号 <input onkeyup="AjaxZip3.zip2addr(this,'','addr1','addr1',
'addr2','addr2');" name="zip" size="10" type="text" /><br />
住所1 <input name="addr1" size="30" type="text" /><br />
住所2<input name="addr2" size="30" type="text" /><br />
これだけで、簡単に実装できてしまうんです。便利でしょ?

ちなみに、都道府県がプルダウンメニューになっているものもOKですよ

郵便番号
都道府県
市町村以降

ここが凄いところなんだよね。痒いところに手が届くというか。こちらも一応ソースを載せておくと次の通り。

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
郵便番号 <input onkeyup="AjaxZip3.zip2addr(this,'','pref_id','addr');" name="zip2" size="10" type="text" />
都道府県 <select name="pref_id">
<option>選んでください</option>
<option value="1">北海道</option>
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
<option value="5">秋田県</option>
<option value="6">山形県</option>
<option value="7">福島県</option>
<option value="8">茨城県</option>
<option value="9">栃木県</option>
<option value="10">群馬県</option>
<option value="11">埼玉県</option>
<option value="12">千葉県</option>
<option value="13">東京都</option>
<option value="14">神奈川県</option>
<option value="15">新潟県</option>
<option value="16">富山県</option>
<option value="17">石川県</option>
<option value="18">福井県</option>
<option value="19">山梨県</option>
<option value="20">長野県</option>
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
<option value="47">沖縄県</option>
</select><br />
市町村以降 <input name="addr" size="30" type="text" /><br />
良くできているよねぇ。本当に感謝してます!


dmatsu2005 at 02:34コメント(2)トラックバック(0) 

2009年06月20日

Google Map APIでのルート案内サービス公開開始

表題の通り「Google Map APIでルート案内できるようになった」わけなんですが、面白い機能なので今後ブログなどで流行るかもしれません。だから、このエントリは、そのための技術メモというわけなのですが。

例題として何を取り上げようと考えているかといいますと、僕のいる会社は駅の近くというか、ロータリーの中なのでルート案内の説明には向かない、といいますか、簡単すぎるので、ちょっと趣向を変えて、こんな例を作ってみましょう。
  1. 「JR新前橋駅」前の会社を出て
  2. 「けやきウォーク前橋」に買い物に行き、
  3. 「前橋市役所」に寄ってから、
  4. 「松葉屋 前橋」でご飯を食べて、
  5. 「JR新前橋駅」前の会社に戻る。
という、僕のありふれた一日のようなコースをGoogle Map APIで表示させてみましょう。

Step.1 Google Map APIのKeyを取得しよう!
まずは、API Keyの取得が必要です。どうやら、Ver.3からはAPI Keyが不要になると言う情報を先日のGoogle Developer Dayで聞きましたが、今回のTipsはVer. 2.xの話なので、Keyが必要です。

http://code.google.com/intl/ja/apis/maps/signup.html

からどうぞ。ちなみに、ここで取得したキーを今後「APIKey」として表現します。

Step.2 ソースプログラムの雛形をGET!
GoogleはAJAX向けのとっても便利なAJAX APIS Playgroundってのを用意してくれていますので、これを使ってみましょう。

http://code.google.com/apis/ajax/playground/#map_directions_simple

「Edit HTML」でHTMLのコードを持ってきてしまうと、便利ですね。
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=APIKey"></script>
<script type="text/javascript">
// Create a directions object and register a map and DIV to hold the
// resulting computed directions
var map;
var directionsPanel;
var directions;

function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(42.351505,-71.094455), 15);
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel);
directions.load("from: 500 Memorial Drive, Cambridge, MA to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)");
}
</script>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<div id="map_canvas" style="width: 70%; height: 480px; float:left; border: 1px solid black;"></div>
<div id="route" style="width: 25%; height:480px; float:right; border; 1px solid black;"></div>
</body>
Step.3 いくつかの前提となるパラメータを抽出!
まず、Map APIのVer.2では動かないので、これを「2.x」にしなくてはいけません。
上記ソースの一番上、
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=APIKey"></script>
の「v=2」を「v=2.x」に変更します。あ、ちなみにAJAX Playgroundで動かす場合には、APIKeyを変更しないでくださいね。Playground用のAPI Keyなので、そのまま使わないと動きません。

次に地図の中心をどこにするか、ということを決めておきたいですね。上の例ではニューヨークが表示されます。ルート検索で強引に日本国内のルートを表示すると、自動的に表示がうまく調整されますが、一旦ニューヨークが表示されるのも気持ち悪いので、前橋市内を中心にしたいと思います。

具体的にそれはどうやって、調べるか、といえば、Google Mapで好きなところを選んだ後に、右上に「リンク」ってボタンがありますよね。これを押すと、「このリンクをメールに貼り付けて地図を共有できます」という部分にURLが表示されているかと思います。このURLの中に「ll=xx.xxxxxx,yyy.yyyyyy」というパラメータが出ていますよね。このxx.xxxxxxが緯度、yyy.yyyyyyが経度です。

今回は前橋駅付近を選んでみましたので、「ll=36.382734,139.073095」です。

ちなみに、「z=ww」というパラメータがあるとおもうのですが、このパラメータが地図のズームレベルを表すパラメータなので、これもメモしておきましょう。今回は「z=16」でした。

さて、この数値をソースに適用しましょうか。この部分
map.setCenter(new GLatLng(42.351505,-71.094455), 15);
が、
map.setCenter(new GLatLng(36.382734,139.073095), 16);
と、なるわけです。ここまでは大丈夫ですよね?

Step.4 ルート案内を指定する。
まず、「新前橋駅」から「けやきウォーク前橋」までを探索してみましょう。
directions.load("from: 500 Memorial Drive, Cambridge, MA to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)");
directions.load("from: 新前橋駅 to: けやきウォーク前橋", {locale: "ja_JP"});
とします。一応、日本語指定も加えてあるところに注意してください。さぁ、このあたりで、一度、AJAX Playgroundの「Run Code」を押してみてください。ルート案内が表示されませんか?うまく行かなかったときは、もう一度上から良く見直してください。

Step.5 経路を複数指定する。
それでは、「けやきウォーク前橋」の後で、「前橋市役所」に行くためにはどうすればいいのか、やってみましょう。これは、とっても簡単で、Step.4のソースが次のようになります。
directions.load("from: 新前橋駅 to: けやきウォーク前橋 to: 前橋市役所", {locale: "ja_JP"});
おわかりいただけますでしょうか? 「to: けやきウォーク前橋」の次に「to: 前橋市役所」を加えただけです。単純に順番通りに並べていけばいいだけなんです。

次の問題は、「松葉屋」なんです。「松葉屋」は残念ながら、Googleで検索したときに、他の松葉屋が出てしまうので、僕の良く行く松葉屋を特定するような方法にしないといけません。Google検索で試しながら、「松葉屋 前橋」で検索すれば特定されるようなので、それを上記のソースに含めます。この場合、スペースはカンマに変更してください。したがって、
directions.load("from: 新前橋駅 to: けやきウォーク前橋 to: 前橋市役所 to: 松葉屋,前橋", {locale: "ja_JP"});
となります。で、最後に「新前橋駅」に戻るので、結果的にはこうなります。
directions.load("from: 新前橋駅 to: けやきウォーク前橋 to: 前橋市役所 to: 松葉屋,前橋 to: 新前橋駅", {locale: "ja_JP"});
「Run Code」で、無事、表示されましたか?

Step.6 じゃぁブログに反映させてみよう。
ここからが、面倒くさいのですが、livedoorブログに貼る場合はどうしたらいいのか、見ていきましょう。
APIKeyを自分のブログ用に取得していますから、それを使うのを忘れずに。

上記のソースは<body>のonload時に読み込まれていますので、この辺をいじるのは大変ですから、ボタンのonclickで解決することにします。
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;sensor=false&amp;key=APIKey"></script>
<script type="text/javascript">
  var map;
  var directionsPanel;
  var directions;
   
  function dispMap() {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(36.382734,139.073095), 16);
    directionsPanel = document.getElementById("route");
    directions = new GDirections(map, directionsPanel);
    directions.load("from: 新前橋駅 to: けやきウォーク前橋 to: 前橋市役所 to: 松葉屋,前橋 to: 新前橋駅", {locale: "ja_JP"});  }
</script>

<input type="button" value="地図を表示する" onClick="javascript:dispMap();"><br>

<div id="map_canvas" style="width: 360px; height: 360px; float:center; border: 1px solid black;"></div><br>
<div id="route" style="width: 360px; height:1200px; float:center; border; 1px solid black;"></div>
というソースをHTMLで書き込みます。

実際に書き込んだのは、矢印(↓)から下です。実験してみてください。
というわけで、今回のTipsは終了です!
自分のブログやホームページでも試して遊んでください。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓






dmatsu2005 at 11:45コメント(6)トラックバック(0) 
livedoor プロフィール
広告

レンタルサーバーなら使えるねっと


Google AdSense
Google検索
訪問者数

オススメの書籍