Prototype.jsを使おう[入門・中級]：Googleマップと連携しよう: Recently Ajax
前回、「住所検索を作る」というプログラムで住所から緯度・経度に変換ができましたが、緯度・経度と来たらやっぱり Googleマップ。 というわけで、今回は前回の続きとしてGoogleマップにその緯度・経度情報を与えて、移動できるプログラムを作ってみたいと思います。 Google Maps APIの使い方は、 さまざまなサイトで紹介されていますし、それほど難しくはありません。こちらのサイトから APIキーを取得します。 Google Maps API - Sign Up 規約に同意して、使うURLを入力したらボタンをクリック。なお、ここで申請したURL以外では使うことができないので、ご注意ください。ローカル環境などで開発することもできません。ちょっと不便。。サンプルコードを取得して、新しいファイルを作りましょう。<div id="map">から始まる地図表示用のdiv要素を崩さなければデザイ
Prototype.jsを使おう[入門・中級]：住所検索システムを作ろう: Recently Ajax
先日 jQueryを使って作ってみた住所検索システムですが、IEに対応できなかったり、緯度・経度だけをスマートに表示することができませんでした。 管理人たにぐちが、へたれなだけかも知れませんが、jQueryはどちらかというと通信をばりばりやるようなプログラムよりは、CSSを随時切り替えてエフェクトをかけたりといった「表側」の処理が得意なのかも知れませんね。ということで、同じプログラムを Prototype.jsで作ってみました。 サンプルはこちら 住所検索システム - Prototype.js版 Prototype.jsだけだと、XMLの処理などがあんまり充実していないので、XMLを JSONに変換してくれるJKL.ParseXMLライブラリも組み合わせます。（というか、ほとんどこちらのライブラリだけで処理が完了しちゃう） プログラムはこちら。まずは、住所検索のサービスを呼び出すための
jQueryを使おう[入門・中級]：住所検索システムを作る: Recently Ajax
GoogleマップAPIなどを使っていると、住所から緯度・経度を知りたくなる機会が多々あります。 GoogleマップAPIでも、バージョン2から「Geocoder」という住所検索の仕組みが提供されているのですが、残念ながら日本語が通りません。 そこで、別の手段を使って緯度・経度を検索する仕組みを作ってみましたので、ご紹介します。 サンプルはこちら 住所検索 | Recently Ajax ※ 06.09.23追記 上記のサンプルでは余計な情報が同時に表示されてしまっていましたが、改良できました。コメントくださったようへいさん、ありがとうございました。 住所検索 jQuery版（改良版） | Recently Ajax 住所を入力して「検索する」ボタンをクリックすると、緯度・経度が表示されます。 まずは、住所から緯度・経度を割り出してくれるサービスを紹介します。東京大学空間情報科学研究セ
Aptana入門：Actionsを使いこなそう: Recently Ajax
Aptanaの便利な機能の一つに、「Actions」があります。これは、ちょっとした便利な機能を集めたもので、簡単に使うことができます。 標準で、画面の右下に表示されていますが、もし表示されていない場合には[Window][Show View][Actions]を選びます。HTMLやJavaScriptなどのカテゴリ毎に分かれていて、JavaScriptには次のようなアクションが用意されています。・Compact JavaScript ・Insert Action Template ・Insert Snippet Template ・Toggle CommentsCompact〜や Toggle〜のアクションは、「.js」ファイルの編集中にしか使うことができません。その名の通り、「JavaScriptをコンパクトにするアクション」と「コメントにしたり、コメントを外したりするアクション」とい
Aptana入門：Aptanaで、prototype.jsベースのプログラムを作ろう: Recently Ajax
コメント( 3 ) | トラックバック( 2 ) 何度も紹介している「Aptana」ですが、なかなか作り方に癖があるので、基本的なプロジェクトの作り方を紹介しましょう。 まずは、Aptanaを起動します。 図の「新規プロジェクト」ボタンをクリックすると、［New］というダイアログボックスが表示されるので、「Web Library Projects」の中から「AJAX Library Project」を選びます。 適当なプロジェクト名（ここでは、prototype_sampleにしました）を入力し、必要に応じてファイルを保存する場所を設定し、［Next］ボタンをクリックしましょう。次に、使うフレームワークを選ぶ画面になります。ここで「Prototype x.x.x（バージョン番号）」にチェックを入れて［Next］ボタンをクリックしていきます。 これで、プロジェクトが出来上がりました。「
prototype.jsを使おう：Try.these()の使い方: Recently Ajax
コメント( 0 ) | トラックバック( 1 ) Ajaxは、まだまだ Webブラウザ依存が強く、同じ機能を実現するにもブラウザによって処理を変える必要があることが多いです。そんなとき、これまではエージェント情報（Webブラウザ情報）を取得して、条件分岐で取得するなどして工夫していましたが、prototype.jsを使えば簡単です。 Try.These()というメソッドは、「とりあえず試してみて失敗したら、次を試す」というもの。例えば、さまざまな入門書籍などで語られていますが、現状 IEとそれ以外のブラウザでは Ajaxを形作るオブジェクトが違っています。その為、最初にブラウザを分岐を入れて・・if(window.XMLHttpRequest) { // 一般的なブラウザ ajax = new XMLHttpRequest(); } else { // IE
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
