読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

paiza(https://paiza.jp)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

地図アプリの開発を爆速化する「Webマッピング」サービスの活用術を大公開!

Webサービス紹介 開発ネタ

f:id:paiza:20160314115622j:plain
どうも、まさとらん(@0310lan)です。

今回は、地図上にデータをマッピングすることで、さまざまな情報を「見える化(可視化)」できるWebサービスの活用法についてご紹介しようと思います!

マッピングが出来るようになると、単なる「データの集まり」だったものが視覚的にとても分かりやすくなるので非常に便利です。

f:id:paiza:20160314115943j:plain

誰でも簡単に扱える定番のマッピングサービスから、地図アプリなどの開発に役立つモノまで取り上げてご紹介しようと思います。

ちなみに、マッピングをするのに必要な「データ」に関しては、無償で利用できるオープンデータをまとめたサイト「LinkData」に公開中のモノを利用しているので、みなさんもぜひ一緒にトライしてみてください!

■「Googleマイマップ」を活用しよう!

まずは、誰でも扱いやすいGoogleの「マイマップ機能」を使って、簡単なマッピングに挑戦してみましょう!

データは、LinkDataで公開されている「日本さくら名所100選 v2」のExcelファイルを使いたいと思います。
f:id:paiza:20160314120032j:plain

ファイルをダウンロードしたら、ExcelGoogleドライブにアップロードしてから開きます。

データの上部には、設定情報などが記載されているので、以下のように不要な箇所は削除して見やすく整形しておきましょう!
f:id:paiza:20160314120149j:plain

あとは、Excelファイルとして保存するか、Googleスプレッドシートで保存しておきます。

これで、データの準備は完了です!

それでは、Googleドライブから「マイマップ」を選択してみましょう!
f:id:paiza:20160314120201j:plain

「インポート」から、先ほど作成したExcelファイル、もしくはGoogleドライブに保存したファイルを指定します。
f:id:paiza:20160314120213j:plain

ポップアップが表示されるので、「緯度・経度」を指定したあとに「名称(スポット名)」を選択します。
f:id:paiza:20160314120224j:plain

すると、自動的にGoogleマップへ「さくらの名所」がマッピングされるのが分かります!
f:id:paiza:20160314120237j:plain

もちろん、この地図はシェアすることも出来るし、ブログなどに埋め込むことも可能です。

さらに面白いのは、スマホの「Googleマップ」アプリから、今作ったマッピングデータを参照することが可能な点です!
f:id:paiza:20160314120251j:plain

スマホだと、自分の現在位置も分かるため、近所の「さくら名所」が素早く分かるようになって非常に便利ですね。

当然ながら、データを差し替えればいろんなパターンの地図に変化させることが出来るので、とても利便性の高いマッピングが実現できるようになりますよ。

■「CartoDB」でオシャレな地図を作ろう!

Googleマップの地図は、デザイン面でのカスタマイズ性が低いのですが、「CartoDB」というサービスを利用すると、とてもカッコいいデザインのマッピングが実現できます。
f:id:paiza:20160314120324j:plain

使い方は簡単で、ログイン後の管理画面から「データ」となるファイルを指定します。
f:id:paiza:20160314120354j:plain

今回は、「日本国内の空港一覧(駐屯地も含む)」というデータを使ってみます。(前述の例と同じように、データの不要箇所は削除しておきましょう)

読み込みが完了するとファイルの中身が表示されるので、このまま画面上部の「MAP VIEW」をクリックします。
f:id:paiza:20160314120514j:plain

すると、地図上に「日本の空港」が見事にマッピングされているのが分かります!
f:id:paiza:20160314120524j:plain

ここまでは、Googleの「マイマップ機能」でも同じことが可能ですが、この後のカスタマイズが「CartoDB」の醍醐味になっています。

例えば、マッピングされた「マーカー」は、スタイルを選ぶだけで多彩な形状に変化させることが可能です。

試しに、「ヒートマップ状」に変化させるとこうなります!
f:id:paiza:20160314120704j:plain

形状やカラーは、メニューから細かく調整が可能です。

また、直接CSSをいじることも出来たり、マーカーをクリックした際にどんな情報を表示させるかを指示することも出来るようになっています。

また、地図画像も豊富なタイプを選択できます!
f:id:paiza:20160314120717j:plain

用意されたタイプを選ぶだけでなく、自分で作成した地図画像をアップロードして利用することも簡単にできます。

このような自由度の高いカスタマイズを行えば、以下のように見た目をガラッと変えてオリジナル性の高いマッピングを実現することが可能です!

さらに、データを作りこめばアニメーションを取り入れたマッピングを実現することもでき、JSONPによるデータの取得も可能なので、オリジナルの地図アプリ開発にも役に立つことでしょう。

■「Mapme」でマッピングサービスを作ろう!

情報を可視化するという意味では「Webマッピング」は非常に有効ですが、情報量が増えてきた時に「検索性」を兼ね備える必要も出てくると思います。

そんな時に利用したいサービスが「Mapme」です。
f:id:paiza:20160314120757j:plain

Mapme」は、大量のデータを読み込むだけで、自動マッピングはもちろんのこと、非常に検索性の高い機能も生成してくれるスグレモノとなっています。

今回はサンプルとして「日本の世界遺産」データを利用して、実際に試しながらどんなサービスなのかを見ていきましょう!

最初に、ログインして「新規マップ」の作成を行います。

そこで、「マップ名」と、シェアするための「URL」を決めましょう!
f:id:paiza:20160314120850j:plain

「URL」は日本語でもOKですが、一般的にはアルファベット表記の方が良いでしょう。

次に、場所を指定します。

とりあえず、「Japan」と入力して日本を指定しておきましょう。
f:id:paiza:20160314120902j:plain

カテゴリは、「世界遺産」にしておきました。
f:id:paiza:20160314120915j:plain

「編集用エディタ」が表示されるので、左側の「SETTINGS」から「Import」をクリックします。
f:id:paiza:20160314120927j:plain

「import」するExcelファイルには、「name」「category」「address」の3つは必ず必要な項目なので、LinkDataから入手したデータを編集して整理しておきましょう。
f:id:paiza:20160314120939j:plain

ファイルを読み込み、正常に認識されているのを確認して「Import」ボタンをクリック!
f:id:paiza:20160314120949j:plain

すると、地図上にマッピングされて、左メニューにも「日本の世界遺産」一覧が表示されているのが分かります。
f:id:paiza:20160314121008j:plain

それぞれのデータは細かく編集可能で、写真や解説記事などを挿入することで、本格的なアプリケーションを作り込むことが可能になっています。
f:id:paiza:20160314121020j:plain

また、「カテゴリ検索」「キーワード検索」なども可能になっているので、探したい情報に素早く辿り着くことが出来ます。

以下は、イスラエルのスタートアップ関連情報をマッピングした事例です。

ちなみに、スマホでも快適に閲覧できるように生成されているので、ぜひチェックしてみてください。!

LinkDataAPIを活用してみよう!

さて、これまでマッピングの情報元として「LinkData」を利用してきましたが、このサイト内にあるオープンデータはJSONP」による取得が可能になっています。
f:id:paiza:20160314121056j:plain

これを利用すると、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」から受け取ったデータは、以下のような構造になっています。
f:id:paiza:20160314121257j:plain

このオブジェクト内から、目的の「緯度・経度」だけを抽出するために、受け取った変数「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」の時にだけ、値を抽出することができるので、マッピングを実現することが可能になります。

ここまでの処理を踏まえたサンプルデモは以下の通り!

See the Pen xVEdzQ by webhacck (@webhacck) on CodePen.

スマホで閲覧する場合は、コチラからどうぞ!

paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題(9言語に対応)を多数ご用意いたしております。もちろん今回使用しているJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

さまざまな情報を可視化するためのWebマッピングは、今回ご紹介したようなサービスを活用することで手軽にトライできるようになっています。

また、マッピングされた地図は、ブログやサイト、もしくは自分で開発したサービスやアプリケーションなどへ簡単に組み込めるので、応用範囲はとても広いでしょう。

地図を使った情報の「見える化(可視化)」にご興味のある方は、ぜひ今回の事例を参考にしてみてください!




paizaではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編