待ち合わせ場所連絡ツールkokode.inに機能追加

2009/11/07 | JavaScript/Ajax

再度kokode.inに機能を追加した。

今までは単純に、地図に位置をプロットするだけだった。たしかに「渋谷のハチ公前」とか「上野の西郷さん」とかでの待ち合わせなら十分だったのだが、待ち合わせ場所といえばやっぱりカフェ。カフェを簡単に選択して待ち合わせ場所として使えないか、と思って少し考えた。

結局どこかが提供するAPIを使用することになるのだが、候補に挙がったのは「HotPepper」と「ぐるなび」。ということで最初は「HotPepper」を使ってみることにした。こちらのAPIは返してくれるデータの形式がいろいろ選べるのが便利。xmlとかjsonpとか。サーバサイドスクリプトを使わなくてもJavaScriptだけで対応できた。でも一つ問題。そもそもHotPepperだと登録されているデータ数が少なくて・・・。

ということで「ぐるなび」を使うことにした。ただしこちらはxmlでしかデータを返してくれないので、JavaScriptだけでは処理できない(クロスドメインの問題)。仕方がないので、サーバにxmlを取得するプログラムを設置して、そのプログラム経由で処理することにした。「ぐるなび」は登録データが多いから、カフェの候補もたくさん表示されるのでこちらのほうが断然いい。ということでカフェ検索機能を追加してkokode.inをリニューアルした。

待ち合わせ場所連絡ツールkokode.in

jQueryによるAjax処理でxmlを受け取るときに

最近はjQueryに夢中。毛嫌いしてきたJavaScriptだったが、jQueryに出会ってからは一転。できることならPHPをやめてしまって、jQueryでご飯を食べたいくらいだ(でもそれは無理)。

Ajaxアプリを記述するときに、サーバサイドPHP、フロントエンドjQueryが今のお決まりのスタイル。基本的にはPHPからの応答はjsonを使うのだが、今回とある理由でxmlでデータを返すことにした。ここではまった。

jQuery側では以下のような記述で受け取りたかったのだが、どうしてもデータを処理できない。

$.ajax({
type:’GET’,
url:’index.php’,
dataType:’xml’,
success:function(data){
//JavaScriptによる処理
}
});

dataTypeでxmlを指定すると、動作しないのだ。なぜだ。

なにぶん、JavaScriptはまだまだ初心者なので、さんざんJavaScriptのプログラムを疑った。でも実はPHP側に問題があったなんて・・・。

PHPからは単純にXMLを吐き出していただけなんだが、それがまずかった。通常特別なことをしない限り、PHPによる応答のContent-typeの指定はtext/htmlなはずだが、これがいけない。jQueryはこのHTTPヘッダを読み取り、Ajaxで帰ってくるデータがhtmlであることを期待しているのに、xmlが返ってきてしまったわけで、それで動作しなかったようだ。

PHP側の処理で、以下の一行を加えることで解決できた。

header(‘Content-Type: text/xml; charset=UTF-8′);

PHPでXMLを返すのではなく、単にdata.xmlのように、拡張子xmlのファイルを呼び出すのであれば問題なかったのにね。

待ち合わせ場所連絡ツールkokode.in検索機能追加

2009/11/04 | JavaScript/Ajax

待ち合わせ場所サービスkokode.inが楽しい。機能はなきに等しいけど、自分で使っていて楽しい。

待ち合わせ場所サービスkokode.in

今日は車で外出の予定があったのだが、地図が必要。ということでkokode.inを早速使用する。行き先の名前はわかっていたのだが・・・検索機能つけてなかった。ということで早速キーワードによる場所検索機能を追加。もともとジオコーディングの関数を組み込んでいたのでインターフェイスをつけただけ。でも、やっぱり便利。自分で使いたいと思えるサービスって、なんかいい。

待ち合わせ場所を知らせるときに

外で待ち合わせることが多い。個人の場合は、飲む約束とかで。仕事の場合は、打ち合わせの約束とかで。仕事といっても、打ち合わせできるようなステキな事務所を持っているわけでもないし、個人個人のつながりが多いから相手も自宅兼事務所な人が多い。必然的に「どこかで待ち合わせ」になる。

以前から「待ち合わせ場所」を人に知らせるのが面倒だと思っていた。簡単に地図上にポイントを落とせて、それを簡単に人に教えることができないかなぁ、といつも思っていた。地図上にポイントを落とすサービスならいくつでもあると思うけれど、それを超簡単に実現できるようなサービスはないかなぁ、と思っていた。でも、常々思っていても、探すのが面倒だった。カフェで待ち合わせることも多いけど、意外とカフェのウェブの地図って小さかったり見にくかったり、駅との位置関係が把握しにくかったり・・・。

結局自分で作った。待ち合わせ場所通知サービス「KoKode.in」(ココで.in)。

何の変哲もない、Google Mapsを設置しただけなんだけど、極力簡単に人に場所を教えられるようにしてみた。ページも1枚だけ。操作は全てAjaxで制御(jQuery)。バックグラウンドは軽量PHPフレームワーク3eyes(フレームワークも実用レベルになってきたからソースコードを精緻化して公開しないと・・・もうずっと放置したまま)。印刷もできるし、携帯でも見れるし、なんだかとてもうれしい(デザインにはこだわらない・・・)。

とりあえず自分が便利なように。他の人も便利になるかも、ということで公開。使う人いるかな。

JavaScriptと<a>タグで

2008/04/16 | JavaScript/Ajax

<a>タグを設定して、当該リンクのクリック時にJavaScriptで各種の処理をしたい場合の記述方法のメモ。

例えば以下のように書くことがある。
<a href="javascript:(JavaScriptの関数);">リンク</a>
<a href="#" onClick="(JavaScriptの関数)">リンク</a>

いずれの場合も期待通りに動いてくれれば問題ないけど、期待した動作+余計な動作(2つ目の記述をした場合にページの一番上に移動してしまう)があった場合などは以下のような記述をしてみるといい。
<a href="javascript:void((JavaScriptの関数));">リンク</a>
<a href="javascript:void(0);" onClick="(JavaScriptの関数)">リンク</a>

void(0)
何もしない、ということらしい。「希望通りに動けばいい」というセンスだから詳しく調べはしないけれど・・・便利だね。


守谷市(まちの情報ポータル) 無料アンケートレンタルjpForm.net