カテゴリー別アーカイブ: The Next Generation Website

Google Maps for Mobile (Googleマップモバイル)とKMLによるGPS連動 | FOMA 903i以降

2007/08/27追記:コメントでアドヴァイスを頂きました。FOMA付属のブラウザで本文をコピーできない件に関して、formのinput type=textの中に表示させることによりコピー機能が使えるようにしました。
追記終わり。

GoogleはFOMA 903i, 904i以降および、PDAなど携帯端末で利用できるGoogle Maps for Mobile(Googleモバイルマップ, Googleマップ モバイル)を発表した。Google Mapsは、パソコンのウェブブラウザで利用できる地図と連動したサービスで、位置情報マッシュアップの代名詞といえるサービスである。そのGoogle Mapsを携帯端末で利用できるサービスが昨年米国で開始していた。今回、やっと日本の携帯(NTT Docomo FOMA 903i以降限定)のサービスが開始された。早速遊んでみることにした。

Google Mapsは、Gmailと並んで、AJAX技術を使った軽量で快適なシステムである。さらに、Google Maps APIを利用することで、地図上に様々な情報を重ねる(マッシュアップ)することができる。今までこのAPIを使って数多くのウェブアプリを開発してきたため、Google Maps for Mobileの発表とそのAPIを楽しみにしていた。しかし問題が発生した。Google Maps for Mobileは、携帯端末のブラウザを利用せず、i-Appli(iアプリ)によるJavaのソフトウェアである。AJAXは、JavascriptのXMLHTTPRequestを非同期で通信することにより軽快な動作を実現している。携帯にもウェブブラウザが搭載されつつあるが未だJavascriptを十分にサポートされておらず、今回のGoogle Maps for Mobileはウェブベースではなくi-appliベースになったものと思われる。つまりi-appliベースであるため、今までのGoogle Maps APIが利用できない。これによりGoogle Maps for Mobileはとりあえず地図を見るだけか(ソフトウェア内で文字列検索はできる)と諦めようとしていたところ素敵な情報を見つけた。

Google Maps for Mobile now supports KML

この記事によると、なんとGoogle Earthで採用されているKMLをサポートしているというのだ。Google Maps for Mobileを起動すると画面左下にメニューがある。その中に、”お店やサービスの検索”という項目があって、そこでキーワードを入力してそのキーワードに関する位置検索ができる。そのキーワード入力欄に、KMLのファイルのURIを入力すればKMLを処理してくれるというである。つまり、このKMLを動的に生成すれば、Google Maps for Mobileに情報をマッシュアップすることができる。

今回のエントリーでは、GPS受信機能を使って位置情報を取得し、その情報からKMLを動的に生成し、そのKMLをGoogle Maps for Mobileに渡すことで、Google Maps for MobileとGPSの連動をテストしてみたので簡単に紹介する。

ここで、FOMAのGPS機能について少し触れる。以前、このブログで紹介したように、最新の携帯電話には位置を検出できるGPS受信機・機能が搭載されている。この機能に関しては、過去のブログを参照されたい。

携帯GPS実験(FOMA 903i, KDDI au)

上記のエントリーで紹介しているように、携帯電話(FOMA)のGPS機能は、i-appli DX(トラステッドアプリ)か、URIに位置情報を付加する方法(ここではちょっとニュアンスが違うがHTTPリクエスト法と呼ぶ)により利用することができる。今回も後者のURIのHTTPリクエスト法を利用する。

KMLを介したGoogle Maps for Mobile とFOMA GPS連動の流れ

1.GPS位置検出を行うためのHTTPリクエストを行うページにアクセス
2.位置情報が付加されたURIをHTTP GETメソッドで取得するサーバーサイド動的ページにアクセス(今回はJava Servletを利用したが、PHP, CGIなどでももちろん可能)
3.取得した経度・緯度・高度をGETパラメータとしたKMLを動的に生成する。(実際にKMLのテキストファイルを生成しておらず、パラメータに対して変化する動的なウェブページである(コンテンツタイプはtext/kml)。
4.KMLファイルのURIを携帯電話のコピー(クリップボード)機能でコピーする。ウェブブラウザを終了し、i-appliのGoogle Maps for Mobileを起動する。
5.Goole Maps for Mobile内の”メニュー”>”お店やサービスの検索”のキーワードにコピーしたKMLのURIをペースト(貼り付け)する。
6.現在位置の地図が表示される。

という流れである。簡単なサーバーサイドアプリで実現可能である。とにかくダサイのは、KMLのURIを連動とかいいながら、コピー&貼り付けで渡している点である。しかし現状の仕様ではこれしか方法はない。ここでもう一つ問題が発生した。携帯のブラウザ上でKMLのURIを表示しているが、私のSH903i, N904iではブラウザ上の文章をコピーできなかった。長いURIの文字列を紙に写すのはさすがにフィジカルコピー過ぎるので、そのURIをメールに送信する機能も追加した。アクセス後、自分にメールが届くので、その本文に掲載されているKMLのURIをコピーし、Google Maps for Mobile上で貼り付けるという過程になった。結果としてはコピー&貼り付けが面倒であるが、極めて良好に動作した。先のブログでも、GPS情報を使ってGoogle Mapsの非公開APIを使って画像の切り出しを使っていたが、あれは所詮画像の切り出しであり、その地図の移動・ズームを行うことができなかった。今回のシステムを用いることで、携帯で自分の位置を検出し、サクサクと地図を移動・ズームすることができた。

さて作成したページを公開する。雑に作ったシステムなので不具合などはご容赦願いたい。

Google Maps for Mobile + GPSテスト
Ver : 2007.08.21
for NTT DOCOMO FOMA 903i, 904i
https://www.spacewalker.jp/iss/gmapgps.html
* 注意1:FOMA 903i以降の機種でアクセスしてください。
* 注意2:標準のブラウザを用いてください。フルブラウザでは、HTTPリクエストによるGPSが動きません。

今回のエントリーでは、GPS機能により位置情報を取得とその情報をGoogle Maps for Mobile上にマッシュアップさせる方法について紹介している。もちろん、Google Maps for Mobileがヴァージョンアップして、GPS受信をアプリケーション上から呼び出せば今回のような面倒な方法をする必要がない。当然考えているとは思うので、その内実装されるのではないかと思われる。一方でGPSの情報以外でのマッシュアップの方法として、とりあえず公式なAPIが公開されていない以上、今回紹介したようなKMLを介した方法を利用するしかない。コピー&貼り付けによるKMLの取り込みはあまりスマートではないので何か使いやすいように改善してもらいたいものである。最後に、同じHTTPリクエスト法によるGPSが使える、Softbank, KDDI AUでもGoogle Maps for Mobileさえ公開されれば同等の機能を実現することができると思われる。ちなみにPC版のGoogle Mapsでも、KMLのURIをそのまま検索キーワードに掛ければ、KMLを読み込むことはできる。

IE7.0と日本語ドメインと検索性について

本日、マイクロソフトから最新のウェブブラウザーであるInternet Explorer 7.0 日本語版が発表された。連日マイクロソフトの記事ばかりかいているがマイクロソフトの回し者ではない。IE7.0において個人的に注目すべき点を3点紹介したいと思う。IE7.0の発表により、多くの情報サイトがIE7.0の最新機能を紹介すると思うが、たぶん、この3点はあまり述べられることはないと思う(あまのじゃくな性格なので・・)

(1)日本語ドメイン対応と検索に関して

ドメインとは、ご存知の通りこのサイトの”spacewalker.jp”という部分である。いわばウェブの住所名みたいなものである。ここに日本語が使える日本語ドメインは、仕様自体かなり前から存在しているが、なにせ普及していない。普及しない点はいろいろあるが、主に3点を挙げると

・世界をつなぐインターネットに日本語でドメインを切っても海外からアクセスされないじゃないか?
・そもそもメインシェアのIE6.0が日本語ドメインに対応していない(日本語ドメイン対応プラグインで対応可能だが、いちいちインストールさせるわけにはいかない)。Mozilla Firefox, Mac OS Safari, Operaはとっくに対応している。メインシェアのIEのみ非対応だった
・メールサーバ、メールソフトが対応していない。(Outlookのみ対応)

こんな理由で全く普及していない。各社、日本語ドメインを”取得”しているが、あまり積極的に利用していないようである。私も実は、”宇宙.jp”という素敵なドメインを持っているが、http://宇宙.jpでアクセスしてきている経歴はあまりないようである。

しかし、メインシェアのIEが7.0によって日本語ドメイン(厳密には、UNICODEであるため、日本語だけではなく、世界中の言語のドメインが可能になる)が対応可能になると少し良いことがあると思う。

最近、よくCMで下のようなものをみかけないだろうか?

searchbox.jpg

現在CMのハヤりで検索ボックスに、その商品のキーワードをいれて宣伝することが多くなった。15秒のCMでは詳しい宣伝ができないから、概要だけCMで紹介して、興味をもったら商品のウェブにアクセスしてくれっていう戦略である。そこでの問題は、短いCMの中で如何に正確に視聴者をウェブサイトまで誘導するか?である。

少し前までは、できるだけ短いドメインを取得してCMの短い間に、http://aaa.bbb.cccみたいな表示をだしていた。しかし、やはり英数字表記のドメインにアクセスするのは誘導性が良くない。この問題に対して、インターネット・ウェブの普及で多くの人が”検索”という概念を理解したことを利用して、検索ボックスに商品に関連するキーワードを表示して、クリックというCM戦略にシフトしたようだ。

検索エンジンはグーグルを筆頭にアフィリエート狙いのSEO(Search Engine Optimization)サイトが台頭し非常に検索精度が悪くなっている(これを対処できなければGoogleは終わる)。そのため、上記のような検索キーワードを検索しても目的のページがヒットしないかもしれない。しかし、Google Adwordsのように有償で目立つ様にコントロールできるため、この検索を促すCM戦略は成立していると言える。しかし、それではGoogleの思う壷である。

そこで登場するのが、日本語ドメインである。

spacesearch.jpg

日本語対応のブラウザがIE7.0によって普及する。そうすれば、何もヒットの不確定性がある検索エンジンなぞ通さず、上の図のように、日本語ドメインで直接サイトにアクセスできる。CMで検索キーワードを1単語覚えさせるのと、日本語ドメインを覚えさせるのは、視聴者にとっては同じ労力であり、Googleにも宣伝費を払わなくていいし、スマートだと思う。IE7.0によって日本語ドメインが対応になるとこういうCMもいつかでてくるのではないだろうか?

(2)XML宣言、スキーマ宣言を有していたXHTML, HTMLページに対してIE6.0では互換モードに切り替わり、その互換モードでは、CSSが正確に処理できなかった点を修正した

詳しくは、私が以前書いたページ(XHTMLによるページ作成の注意点)に書いてあるが、互換モードのCSSの表示問題がやっとIE7.0で解決した。ウェブデザイナーさんには朗報である。またこれにより、よりXHTMLによる厳格なXMLのウェブページが普及するであろう。

(3)フルスクリーン化

私が一番注目すべきはこの点。今ウェブブラウザーでまともにフルスクリーン化できるブラウザーは少ない。フルスクリーン化ができるのはIE6.0くらいで、Firefox、safariなどは対応していない。IE7.0によって上のアドレスバーなどまで消せるようになった。これにより、ウェブブラウザーでプレゼンはもちろん、先日紹介した、XAML, WRFによるインタラクティブウェブをフルスクリーンで見られる。たぶん、パワーポイントはなくなるような気がする。私は挑戦的にプレゼンをフルスクリーンXAMLでやりはじめようかと思っている。また、私のようにフルスペックハイヴィジョンテレビにMac miniをつないでパソコンをやっている人間にとって、ウェブブラウザーのフルスクリーン化は非常にプレゼンテーション性が良い。かっこいいサイトなら表示させておくだけで、部屋の雰囲気を変えられるし、写真サイト、動画サイトも素敵に見える。あと、1,2年後。ハイヴィジョンテレビのPCが普及したらこのフルスクリーン化が効いてくると思う。

XAML, WPFによる次世代ウェブ開発の紹介(その1)

いよいよ来年始めにWindows Vistaが登場する。Windows Vistaのウリのひとつは、WPF(Windows Presentation Foundation)とXAML(eXtensible Application Markup Language)によるウェブおよびアプリケーション開発である。WPFは、Windows用のスタンドアプリケーション(ExcelやPhotoshopなど)だけではなく、ウェブアプリケーションも開発できる。どのようなウェブアプリケーションかというと、”華やかでインタラクティブ”なウェブアプリケーションである。

現在の華やかでインタラクティブなウェブといえば、

・Flash (+Flex)によるウェブ
・XHTML + AJAXによるウェブ(Google Maps, Gmail, Google Calendarなど)
・WPF, XAMLによるウェブ(今回のエントリーのテーマ)

上記2つが既にスタンダードになりつつあるが、WPFはマイクロソフトが次世代ウェブ用の方式としてモーレツにアピールしているものである。WPFが将来デファクトスタンダードになるかわからないが、Vista発売前にWPFによるウェブアプリケーションの開発概念をウェブデザイナーさん、ウェブプログラマーさん、ウェブディレクターさんが知っていれば少しだけ、同業者さんよりも前にでられると思う。そう思ってVista発売前に少しだけ紹介する。
VistaのプログラムといったらWindowsのみの規格でLinuxなどオープンな環境では使えないと思うかもしれないが(実際私もそう思っていた)、実はそうではなく、LinuxでもWPFのウェブアプリケーション(XBAP)を配信できる。

今回は長いので別ページに敢えて作った。

XAML + WPFプログラミング @ spacewalker.jp

興味がある方はご覧くださいな。
まだすべては完成しておらず、今回はその1である。

・XHTMLの次のウェブ言語になるかもしれないXAMLという名前に興味が沸く方。
・最新のウェブ技術の概念だけかじっておこうかなという方。
・Illustratorで素敵なウェブを作りたいと思うイラストレーターさん
などで、WPFをご存知ない方はご覧くださいな。