デザイナーや開発者は意外に地図について、Google Mapのソースコードを埋めてしまって終わりということはないだろうか?この記事では、オープンソースの地図を利用してどのような体験を構築できるのかについて説明しています。地図というものに対して、思慮深く考えるようになるにはいい記事だと思います。皆さんもご一読を。

# 373

マップに挑戦

Webマップはずいぶんと進歩した。改善されたデータ、よりクリーンなデザイン、より優れた性能、そして直観的なコントロールによってWebマップは多くのアプリにとってなくてはならないコンポーネントになった。より多くのアプリが位置情報認識型デバイス上にインストールされるようになってきており、Webマップもまたモバイルに登載されるアプリの中でも最も成功した種類の一つになった。Webマップのコアとなるユーザインターフェース(UI)パラダイム自体(スムーズ、パン、ズーム可能なサーフェイスであること)は、マップだけでなくあらゆるインタフェースに普及した。

それにもかかわらず、私達はほとんどWebマップをデザインの慣習に取り入ることをしていない。私達はアイコンフォント、レスポンシブ・グリッド、CSSフレームワーク、プログレッシブエンハンスメント(Progressive Enhancement)、および新しいデザインプロセスも作成する。古い解決策を解体し新しいものを築き、そして自分たちの悪戦苦闘話を他の人と共有するのにさえも時間を費やす。しかし、ポールスミスの記事「Take Control of Your Maps」以来もう5年近く経つが、Webマップはまだほとんどのデザイナーにとっての盲点である。

あなたはこれまでにマップを徹底的に分析したことがあるだろうか?あなたのデザインの欠かせない部分としてマップを取り扱ったことはあっただろうか?マップのための秘訣、かしこいやり方、予備手段、やプログレッシブエンハンスメント(Progressive Enhancement)を展開したことはあるだろうか?

この記事は随分と時間が経ってしまったが、ポール記事の姉妹編である。彼が10,000フィートのウェブマッピングスタックの慌しい調査を続ける一方、私達は1つのデザインプロセスを歩み、今日におけるWebマップを実践することとしよう。この道を歩むことによって、マップが私達デザイナーがする集合的な会話の一部になってくれることを望んでいる。

オープンであることへのこだわり

ポールは、「なぜ構築済みのマップの代わりにオープンマッピングツールを使うのか」という点に関してゆるぎない主張をしている。ここではその彼の理由を読み返すことはしないが、最後のところについて詳しく説明したい。自分が納得できるものを追及するのであればオープンツールだ。

Webマップについて不可解なものは何もない。空間面を取って、それを個別のタイルに分割し、DOM中にそれを配置し、パンやズームのためのイベントハンドラ(event handler)を追加する。この基本式はポートランドであろうが、火星、またはスーパーマリオランドにも適用可能である。大きなストリートマップを表示するのに役立つが、アートギャラリーを探索したり、虚構のゲームの世界を作成したり、人体解剖学を学んだり、単にウェブページをナビゲートするためにそれを利用しようとあれこれやってみることは私達の自由である。オープンツールは私たちにWebマップのメカニズムの中心部をあらわにし、私達がより広い可能性を見ることを可能にする。


Webマップのメカニズムはストリートマップだけにとどまらない

私達はマップのイメージがロードされ損なわれる時の条件を理解していなくてはならない。マップタイルが CSS transform で最もうまく配置されるかどうかを議論するべきである。そして、SVGまたは Canvas のどちらで vector要素 を描くべきかに気を配るべきである。オープンツールで作業すればこれらマップの詳細がわかるだろう。あなたが HTML5、CSS、または JavaScriptライブラリに精通しているならば、マップとなればそれは尚更である。

要するに、私達は完全にオープンなマッピングスタックを用いて作業をするということである。私が働くMapBoxは、いくつかのオープンソースライブラリを1つのAPIにまとめあげ、mapbox.jsのもとパブリッシュしている。他のオープンマッピングライブラリで価値のあるものにはLeafletD3.jsがある。

はじめよう

私はシャーロック・ホームズの大ファンである。 ロバート・ダウニー・ジュニア主演の最近のハリウッド映画とBBCのコンテンポラリーシリーズにはまっている。しかし、一度もロンドンに行ったことがない私は、アーサー・コナン・ドイル氏が彼の短編小説の中で読みとってほしいと感じていただろう場所や設定の豊かさを逃してしまっていると感じている。

典型的なアプローチでは、シャーロックのストーリーの一つに沿って、ピンを用いた様々なロケーションを示すWebマップを埋め込むことだろう。このアプローチでは、マップはドイルのストーリーテリングにおいてほとんど役割を果たさない付録のようなものである(なくても済む要素)。そこで私達は代わりに、マップを完全にストーリーに組み込んで、マップの役割を拡張するつもりである。それは舞台を整え、ペースを提供し、ストーリーのムードを変えるものとなるであろう。

場所のストーリー

ストーリーのベースラインを築くために、私は「The Adventure of the Bruce-Partington Plans」を場所に沿ったストーリー展開を再構築した。私は原文から8つのキーロケーションを選び、欠くことができないミステリーの詳細を取り出し、HTML、CSS、およびJavaScriptで枠組みを組んだ。

テキストのみのシャーロック・ホームズのストーリー デモ1

  • 各キーロケーションに対してストーリーをsection要素に分割した。簡単なJavaScriptで、1度で1つのセクションを強調するスクローリングフローを実行する。
  • 私達のページはまだレスポンシブではないが、予期しない選択をされる場合を想定し回避策を考慮してある。メインテキストのカラムは33.33%でフルード(fluid)、min-width: 320pxにとどめる。もしコンテンツとデザインがこれらの制約の範囲内で適度にフローすればすべてよしである。

次にマッピングを始める。最初、私達は新しいテクノロジーの重要な要素を学ぶことに集中するために、ストーリーのページとは別個にマップに取り組む。

マップはデータである。

要約したシャーロックのストーリーのマッピングに持ってくるのは8つの地理的ポイントのデータセットである。このデータをキャプチャするためにはGeoJSON(JSONで地理データを記述するためのフォーマット)が完璧な出発点である:


{
    "geometry": { "type": "Point", "coordinates": [-0.15591514, 51.51830379] },
    "properties": { "title": "Baker St." }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.07571203, 51.51424049] },
    "properties": { "title": "Aldgate Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.08533793, 51.50438536] },
    "properties": { "title": "London Bridge Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [0.05991101, 51.48752939] },
    "properties": { "title": "Woolwich Arsenal" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.18335806, 51.49439521] },
    "properties": { "title": "Gloucester Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.19684993, 51.5033856] },
    "properties": { "title": "Caulfield Gardens" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.10669358, 51.51433123] },
    "properties": { "title": "The Daily Telegraph" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.12416858, 51.50779757] },
    "properties": { "title": "Charing Cross Station" }
}

JSON配列( array )の各オブジェクトはgeometry(このオブジェクトがスペースのどこにあるかを記述するデータ)とproperties(このオブジェクトが何であるかを記述するために自分で選択するデータ)を持つ。今やこのデータを持っているので、非常に基本的なマップを作成することができる。

基礎的ウェブマップ

ウェブマッピングの基本 デモ2

  • ここで留意すべき点は、緯度と経度のセットである。2013年現在、マッピングAPI全体に渡って、これらの値に対する一貫した命令(order)はまだ見当たらない。小学校の地理に習ってlat,lonを用いるものもあれば、x、y座標の命令とマッチするようにlon,latを使うものもある(水平、それから垂直)。
  • 私達はコアとなるオープンソースのマッピングライブラリとしてmapbox.jsを使っている。各マップではキーパラメータがmapbox.map()に渡されることになっていると考えると分かりやすい。
  1. DOM要素コンテナ
  2. タイルまたはマーカーを配置する一つまたは複数のPhotoshop風のレイヤー
  3. ユーザーインプットを行動に結びつけるイベントハンドラ(event handler)(パンのためにドラッグするなど)

私達のマップには2つのレイヤー(タイルレイヤーとスポットレイヤー)がある。タイルレイヤーはMapBox上のカスタムマップから作成された256×256の正方形のイメージから成る。スポットレイヤーはGeoJSONデータ(上記)から作成されたピンマーカーから成る。

私達のコードにとっては好調なスタートであるが、シャーロック・ホームズのストーリーを語るためにマップを使用するという当初の目標にはまだ程遠い。

ロケーション(位置)を越えて

私達の最初のマップによると、GeoJSONデータセット中の8つのアイテムは、陰謀とミステリーでいっぱいのストーリー中の設定ではなくただ単に場所である。ビジュアル的見地からすると、ピンはただ場所を示すだけであり、その表現はただのロケーション(位置)以外のなにものでもない。

これに対処するために、私達は各ロケーション(位置)にイラストを用いることができる(設定を表すものもあれば、キープロット要素を示すものもある)。さて、私達の聴衆は、空間における位置というだけ以上のものが各ロケーション(位置)に加わったことがすぐわかる。これらのためのキャンバスとして、私はシームレスにイメージに溶け込ませるというカスタムスタイルを用いて別のマップを作成した。

イラストとカスタムスタイルはマップのストーリーテリングの一部に役立つ デモ3をみてから差分ファイルをみてほしい。

  • ここでの主要な変化は、私達はマーカーレイヤーのためにカスタム「ファクトリ・ファンクション(factory function)」を作成することである。ファクトリ・ファンクション(factory function)の仕事は、各GeoJSONオブジェクトを受け取り、それをa、div、imgといったDOM要素に変換することである。こうしてマップ上にレイヤーが配置される。
  • ここで私達はdivを作成し、GeoJSON中のtitle属性を用いることからidに切り替える。
  • これはカスタムマーカーを用いたイラストを表示するのに便利なCSSクラスを提供する。

すべてを一つにまとめあげる

さて、私達のストーリーとマップを組み合わせる時である。前のスクロールイベント(scroll event)を用い、ストーリーのセクションをマップ上の場所に合わせることで一つにまとめられたエクスペリエンスを生み出す。

ユーザーが各セクションを読むに従いWebマップは新しいロケーションにパンする。

  • ストーリーとマップの間の架け橋は修正されたsetActive()ファンクションである。以前それはスクロールポジションを基盤に特定のsection上にactive classを設定しただけであった。今やそれはまたactive markerを見つけ、active classを設定し、そしてマーカーの位置にマップを動かす。
  • マップの動きにはmapbox.js API中のeaseyライブラリを用いる(マップを動かし、地理上のロケーション(位置)間でトウィーニングする)。APIは極めて簡単である(私たちは動く先のマーカーのlon,latをAPIに引き渡し、APIが残りの処理を行う)。
  • mapbox.map()に空の配列( array )を引き渡すことによって、マップ上のすべてのイベントハンドラ(event handler)を使用不可にする。そこでマップはスクロールポジションによってのみ影響を受けるだけになる。もしユーザーがストーリー展開から外れたい、またはロンドンを自由に探索したければ、イベントハンドラ(event handler)を再導入することができる。しかしこの場合、less is more(減らすことはより多くを得ること)であることを念頭に置いておかなくてはならない。

テキストとともにフルスクリーンのマップを表示することは興味深い挑戦である。私達のマップビューポート(表示域)は、ストーリーが左側を占めるので右にオフセットしなくてはならない。私がここで使っているソリューションは、純粋にCSSだけを使って、キャンバスからマップビューポートを拡張することである。JavaScriptを使うこともできるが、後でわかるように、CSSのみのアプローチはモバイルデバイス上でこのテクニックを再適用し、調整するためのより洗練された方法を私達に与えてくれる。

この段階で私達のマップとストーリーは上手い具合に相互補完的になる。私達のマップは地理的コンテキスト、ビジュアル的好奇心、および長い距離と短い距離を移動すること*によって得られる興味深い時間的要素を追加する。(訳注:完成マップ(Demo4)にアクセスしたとき、最初のタイトルをクリックしたときとストーリーの説明項目をクリックしたときに起こるズームイン/アウトのことを指していると思います)

レスポンシブデザインでのマップ

Webマップによって表示されるタイル表示の途切れのない空間面は自然と上手い具合にレスポンシブデザインに適合する。少し多めまたは少なめのマップ領域を表示することによって、Webマップは容易にさまざまなビューポートサイズを処理する。私達のサイトでは、より小さなビューポートにフィットするように、わずかに他の要素のレイアウトを調整している。

Webマップの調整レイアウト

  • 画面サイズがより小さいときは、アクティブでないテキストセクションを隠し、アクティブなテキストをスクリーンのトップに留まらせる(Demo 5)。
  • 私達はマップのためにスクリーンの下半分を使用する。そしてマップの中心点がスクリーンの高さの4分の3になるよう調整するのにメディアクエリを用いている(Demo 4とは別バージョンである)。

適度の量の計画と最小の調整をもってして、シャーロックのストーリーは読んでもらう準備が整った。

自分のケースに取り組む

あなたがこれらのステップを踏んでコードに従うと、たぶん、私が少なくとも1つまたは2つの事柄をカバーしていなかったことに気が付くかもしれない。例えばease.optimal()のパラメータのことや、ツールチップ(tooltips)がどのようにGeoJSONデータのtitle属性をとらえるかなどである。The devil’s in the details「悪魔は細部に宿る」と言う。このGitHubのリポジトリに行けば詳細(コードやデザイン)が見られる。

また以下もチェックすべきである:

  • MapBoxサイト:タイリング(tiling)や基本的なWebマップの概念、MapBox.jsのドキュメントとサンプルコードについての概説を含む。
  • Leaflet:別の強力なオープンソースマッピングライブラリ。
  • D3.js:データ駆動型の文書に動力を供給するためのライブラリ(マッピングを含めた、広い範囲のアプリケーションを有す)。

この例はWebマップをあなたのデザインに組み込むことに関して、たった1つの道筋を示すものに過ぎない。従ってこれにこだわらないでほしいと思う。これをばらばらにして、あなた自身のものを作ってほしいと願う。とにかくやって見ることである。それらがうまくいかなくても、デザイナーとして自分のやり方で作成したマップはあなたのものである。何かを自分のものとすることが、私達がそれを発展させていくことができる唯一の方法である。