どうも、まさとらん（@0310lan）です。
今回は、地図上にデータをマッピングすることで、さまざまな情報を「見える化(可視化)」できるWebサービスの活用法についてご紹介しようと思います！
マッピングが出来るようになると、単なる「データの集まり」だったものが視覚的にとても分かりやすくなるので非常に便利です。
誰でも簡単に扱える定番のマッピングサービスから、地図アプリなどの開発に役立つモノまで取り上げてご紹介しようと思います。
ちなみに、マッピングをするのに必要な「データ」に関しては、無償で利用できるオープンデータをまとめたサイト「LinkData」に公開中のモノを利用しているので、みなさんもぜひ一緒にトライしてみてください！
■「Googleマイマップ」を活用しよう！
まずは、誰でも扱いやすいGoogleの「マイマップ機能」を使って、簡単なマッピングに挑戦してみましょう！
データは、LinkDataで公開されている「日本さくら名所100選 v2」のExcelファイルを使いたいと思います。
ファイルをダウンロードしたら、ExcelかGoogleドライブにアップロードしてから開きます。
データの上部には、設定情報などが記載されているので、以下のように不要な箇所は削除して見やすく整形しておきましょう！
あとは、Excelファイルとして保存するか、Googleスプレッドシートで保存しておきます。
これで、データの準備は完了です！
それでは、Googleドライブから「マイマップ」を選択してみましょう！
「インポート」から、先ほど作成したExcelファイル、もしくはGoogleドライブに保存したファイルを指定します。
ポップアップが表示されるので、「緯度・経度」を指定したあとに「名称(スポット名)」を選択します。
すると、自動的にGoogleマップへ「さくらの名所」がマッピングされるのが分かります！
もちろん、この地図はシェアすることも出来るし、ブログなどに埋め込むことも可能です。
さらに面白いのは、スマホの「Googleマップ」アプリから、今作ったマッピングデータを参照することが可能な点です！
スマホだと、自分の現在位置も分かるため、近所の「さくら名所」が素早く分かるようになって非常に便利ですね。
当然ながら、データを差し替えればいろんなパターンの地図に変化させることが出来るので、とても利便性の高いマッピングが実現できるようになりますよ。
■「CartoDB」でオシャレな地図を作ろう！
Googleマップの地図は、デザイン面でのカスタマイズ性が低いのですが、「CartoDB」というサービスを利用すると、とてもカッコいいデザインのマッピングが実現できます。
使い方は簡単で、ログイン後の管理画面から「データ」となるファイルを指定します。
今回は、「日本国内の空港一覧(駐屯地も含む)」というデータを使ってみます。(前述の例と同じように、データの不要箇所は削除しておきましょう)
読み込みが完了するとファイルの中身が表示されるので、このまま画面上部の「MAP VIEW」をクリックします。
すると、地図上に「日本の空港」が見事にマッピングされているのが分かります！
ここまでは、Googleの「マイマップ機能」でも同じことが可能ですが、この後のカスタマイズが「CartoDB」の醍醐味になっています。
例えば、マッピングされた「マーカー」は、スタイルを選ぶだけで多彩な形状に変化させることが可能です。
試しに、「ヒートマップ状」に変化させるとこうなります！
形状やカラーは、メニューから細かく調整が可能です。
また、直接CSSをいじることも出来たり、マーカーをクリックした際にどんな情報を表示させるかを指示することも出来るようになっています。
また、地図画像も豊富なタイプを選択できます！
用意されたタイプを選ぶだけでなく、自分で作成した地図画像をアップロードして利用することも簡単にできます。
このような自由度の高いカスタマイズを行えば、以下のように見た目をガラッと変えてオリジナル性の高いマッピングを実現することが可能です！
さらに、データを作りこめばアニメーションを取り入れたマッピングを実現することもでき、JSONPによるデータの取得も可能なので、オリジナルの地図アプリ開発にも役に立つことでしょう。
■「Mapme」でマッピングサービスを作ろう！
情報を可視化するという意味では「Webマッピング」は非常に有効ですが、情報量が増えてきた時に「検索性」を兼ね備える必要も出てくると思います。
そんな時に利用したいサービスが「Mapme」です。
「Mapme」は、大量のデータを読み込むだけで、自動マッピングはもちろんのこと、非常に検索性の高い機能も生成してくれるスグレモノとなっています。
今回はサンプルとして「日本の世界遺産」データを利用して、実際に試しながらどんなサービスなのかを見ていきましょう！
最初に、ログインして「新規マップ」の作成を行います。
そこで、「マップ名」と、シェアするための「URL」を決めましょう！
「URL」は日本語でもOKですが、一般的にはアルファベット表記の方が良いでしょう。
次に、場所を指定します。
とりあえず、「Japan」と入力して日本を指定しておきましょう。
カテゴリは、「世界遺産」にしておきました。
「編集用エディタ」が表示されるので、左側の「SETTINGS」から「Import」をクリックします。
「import」するExcelファイルには、「name」「category」「address」の3つは必ず必要な項目なので、LinkDataから入手したデータを編集して整理しておきましょう。
ファイルを読み込み、正常に認識されているのを確認して「Import」ボタンをクリック！
すると、地図上にマッピングされて、左メニューにも「日本の世界遺産」一覧が表示されているのが分かります。
それぞれのデータは細かく編集可能で、写真や解説記事などを挿入することで、本格的なアプリケーションを作り込むことが可能になっています。
また、「カテゴリ検索」「キーワード検索」なども可能になっているので、探したい情報に素早く辿り着くことが出来ます。
以下は、イスラエルのスタートアップ関連情報をマッピングした事例です。
ちなみに、スマホでも快適に閲覧できるように生成されているので、ぜひチェックしてみてください。！
■LinkDataのAPIを活用してみよう！
さて、これまでマッピングの情報元として「LinkData」を利用してきましたが、このサイト内にあるオープンデータは「JSONP」による取得が可能になっています。
これを利用すると、JavaScriptでプログラムを組んで「独自マッピング」に挑戦することが出来ます。
そこで、Googleマップと連携した簡単なサンプルデモを作ってみましょう！
まずは、HTMLファイルに「Googleマップ API」と「gmaps.js」を読み込んでおきましょう。
<!-- index.html --> <div id=”map”></div> <script src=”https://maps.googleapis.com/maps/api/js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.22/gmaps.min.js”></script>
「gmaps.js」は、Googleマップ APIを簡単に利用できるようにしてくれる便利なJavaScriptライブラリとなっています。
マッピングする情報元として、今回は「京都市観光スポット」のお寺データを利用したいと思います。
「app.js」ファイルを作り、早速LinkDataの「JSONP」を取得してみましょう！
// app.js var script = document.createElement('script'); script.src = “http://linkdata.org/api/1/rdf1s804i/temples_in_kyoto_rdf.json?callback=callback”; document.body.appendChild(script); function callback(data) { //ここにマッピング処理を書く }
LinkDataのURL末尾に、「callback」を記載するのを忘れないようにしましょう。
あとは、「callback関数」から取得した情報が、変数「data」に入っているので、これを利用してマッピング処理を書いていくわけです。
「gmaps.js」を使うと、地図を表示したり「マーカー」を配置するのも非常にお手軽です！
// id「map」要素に地図を表示する処理 var map = new GMaps({ el: '#map', zoom: 12, lat: 35.0336705, lng: 135.7664318 }); //マーカーの配置 map.addMarker({ lat: 緯度, lng: 経度 });
上記のように、マーカーを配置してマッピングするには、「緯度・経度」が分かればすぐに実現できそうですね。
LinkDataの「callback」から受け取ったデータは、以下のような構造になっています。
このオブジェクト内から、目的の「緯度・経度」だけを抽出するために、受け取った変数「data」から1つずつ検索していく作業が必要になります。
//app.js for (var i in data) { for (var s in data[i]) { setGeo(s, data[i]); } }
これで、変数「s」には「http://www.w3.org/2003/01/geo/wgs84_pos#lat」のようなプロパティ名が入ることになります。
このプロパティ名の末尾が「#lat」(緯度)もしくは「#long」(経度)であれば、値に位置情報が入っていることになります。
そこで、関数「setGeo」を以下のように作ります。
// app.js //緯度・経度の「値」保持用 var geoList = { lat: [], lng: [] }; function setGeo(s, data) { if (s.indexOf('#lat') > 0) { // プロパティ名に「#lat」があれば、値を代入 geoList.lat.push(data[s][0].value); } else if (s.indexOf('#long') > 0) { // プロパティ名に「#long」があれば、値を代入 geoList.lng.push(data[s][0].value); } }
これで、変数「s」の末尾が「#lat」もしくは「#long」の時にだけ、値を抽出することができるので、マッピングを実現することが可能になります。
ここまでの処理を踏まえたサンプルデモは以下の通り！
■paizaラーニングについて
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
