ASCII.jpツイートする今やさまざまなWebサイトで使われ、すっかり地図の定番となったGoogleマップ。コーポレートサイトや飲食店のサイトなどで、純粋に案内図としてページに埋め込むのが一般的ですが、中にはもっとおもしろい使い方で、ユーザーを楽しませているサイトもあります。一例として、「hitotoki」というWebマガジンを紹介しましょう。hitotokiは、ある特定の場所に関するショートストーリーを地図と絡めて紹介するWebマガジンです。Googleマップをまるで独自に描いた絵地図のようにうまくサイトになじませ、「地理と文学を結びつけた町の文学地図」というコンセプトに合わせて効果的に活用しています。今回は、このhitotokiのGoogleマップ活用法をお手本としましょう。まつわる読者の思い出を募り、地図と写真とともに紹介する投稿型のWebマガジン。東京とシアトルに拠点を置く出版社、チン・ミュージックプレスと東京のWebデザイン集団AQが共同で制作・運営している。日本語の東京版のほか、英語のニューヨーク版やロンドン版など各国の都市に対応したサイトがある。http://hitotoki.org/tokyo/jp/写真とテキストに合わせて動くGoogleマップhitotokiのトップページを開くとまず目に飛び込んでくるのが、右側に表示されている縦長のGoogleマップです。この地図は通常のGoogleマップと同様、マウスでドラッグ&ドロップしたり、+―ボタンで拡大/縮小したりと、ユーザーが自由に操作できます。左側には、大きめの写真画像と見出しなどのテキスト要素、そしてその下に小さめのサムネイル画像が並んでいます。サムネイル画像の上にマウスカーソルを重ねると、上部のコンテンツが書き換わり、右側の地図もスクロールします意外なのは、マウスカーソルをサムネイル画像に重ねたときの動きです。左上のコンテンツ部分がページを遷移せずに部分的に書き換わるとともに、右側の地図も同時に自動的にスクロールするのです。いわゆるAjaxを活用したおもしろい見せ方ですが、地図部分はユーザー側でも自由に操作できるので、チェーン店のWebサイトで、店舗案内などにも使えそうですね。この、マウスオーバーによってページ内のコンテンツと地図を連動させて切り替える機能を再現してみましょう。一覧へ普通のtableタグを1行で動く表にするJSライブラリ「Yahoo!不動産」が採用する“ソートできるテーブル”を組み込んでみよう。ライブラリを使えば僅かな作業で実現できる。Googleマップ+jQueryで作るAjaxなデザインGoogleマップと自作のスクリプトで、地図と連動するショップガイドのWebサイトを作ろう。Lampの使い方を紹介する。jQueryでクールなくるくるウィジェットを作ろうjQueryでかっこよく使いやすいUIを作ろう。今回は、くるくる回るカルーセルをページをめくるナビゲーションに使う方法について。運営するWebサイトに複数のショッピングサイトのアフィリエイトリンクを張りたい――そんなときはJavaScriptでちょっとした工夫をしてみよう。意外性が心地よいJSメニューのWebデザイン米国のインタラクション・デザイナーのサイトで使われているナビゲーション。意外な動きが気持ちいいこのメニューをjQueryで再現してみよう。あのサイトの“技”を盗め「プロが作ったWebサイトのあの“技”をウチのサイトでも(それもタダで)マネしたい!」――。JavaScriptライブラリ/フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。00DESIGNGoogleマップ初歩の初歩!静的地図を組み込もうWebサイトに地図を載せる方法としてすっかり定着したGoogleマップ。今回は、静的なGoogleマップを使ってお店の地図を簡単に表示してみよう。00DESIGNGoogleマップで探すグルメサイトを作ろう!グルメサイトなどでおなじみの「地図から探す」機能。GoogleマップのAPIを使って、自分のWebサイトへ設置してみよう。00PROGRAMMING4日目:写真の横にGoogleマップを表示しよう今日は、写真の横にGoogleマップを表示するプラグインを作成してみよう。「どこで撮った写真なのか?」「どれが撮影対象なのか」が分かる地図を設置できる。00DESIGNjQueryでクールなくるくるウィジェットを作ろうjQueryでかっこよく使いやすいUIを作ろう。今回は、くるくる回るカルーセルをページをめくるナビゲーションに使う方法について。00DESIGNFlashではなくjQueryで!インパクトのあるUIを作ろう国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく方法を紹介する本連載。第6回はFlashを使わずにインパクトのある表現を実現する方法について。00DESIGN長~いページもスッキリ!jQueryでタブ表示1つのWebページに多くの情報を載せようとすると、縦に長くなって見づらくなってしまう。そのようなWebページを整理するには、ページをいくつかのタブに分けるのが1つの方法だ。UIの「Tabs」というウィジェットを使って、ページをタブに分ける方法を紹介する。00DESIGNjQueryで作る“Amazon風”インターフェイス国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介する本連載。第4回はAmazon.co.jpの回転式スライドパネル(カルーセル)に挑戦しよう。この冬作ろう!jQueryプラグイン講座2008年、最も勢いのあったJavaScript/Ajaxライブラリ「jQuery」。1日1本、簡単なプラグインの作成方法を解説する6日間の集中講座だ。API」がバージョンアップし、使い勝手がさらによくなった。基本的な使い方を紹介する。API」に新機能「ルート案内API」が追加された。ルート案内APIの基本的な使い方を解説する。Pipes(ヤフーパイプス)が便利だ。JSONPなら、サーバー側のプログラムを用意しなくてもJavaScriptだけでマッシュアップサイトが作れる。00PROGRAMMINGJSONP×jQueryでヤフオクAPIを活用しようYahoo!オークションに出品中の商品情報を自社サイトに表示する方法を紹介する。Pipesを組み合わせれば手軽にできる。マップ」は、2005年7月以来ベータ版サービスとして提供されてきたが、開始5年を記念し6日から正式版へと移行。サービスロゴからベータの文字が省かれることになった。スマホお気に入り一覧マイページ。