この記事は1年以上前の古い記事です。現状に即していない記述の場合があります。あらかじめご了承ください。

サーバーを入れ替えたのでメタルラックを入れてみた/肩が痛い

nogajun
2014/10/10

_前のnofuture.tvサーバーは床に直置きしてたけど、ほこりがすごかったので台を置こうと考えたら、手頃なものがなくて、ニトリで小さいメタルラックを買ってスタンディングデスクの下に置くことにした。スッキリ!

で、メタルラックはおととい買って自転車でぶら下げて持って帰ってきたのだけれど、今頃になって肩が痛い。

BBC MusicのGod Only Knowsカバーがすごい

BBC Music - BBC Music - God Only Knows: http://www.bbc.co.uk/programmes/articles/2R3PxWX7hzMb8lNZs3Ngz5L/god-only-knows

BBC Musicが始まった記念に作られた、豪華アーティストによるGod Only Knowsのカバーがすげー。もちろん、Brian Wilsonも出てます。設立記念だけでなく、この音源は、チャリティシングルとして販売されるそうです。

BBC - BBC Children in Need - BBC Music’s God Only Knows in aid of BBC Children in Need: http://www.bbc.co.uk/programmes/articles/3sN8FVLQFVcyh2t4MrmnS6r/bbc-music-s-god-only-knows-in-aid-of-bbc-children-in-need

それにしてもBBCなのにGod Only Knowsを選曲するって。そこにビックリですよ。

こっちはメイキング。

leaflet.jsを使って地図を表示してみる

以前からAndroidとかのアプリを作りたいなと思っていたけど、Javaを覚えるのが嫌で放置していました。しかし、Apache Cordovaを使えばHTML5/CSS3/JavaScriptでアプリが作れそう。

ということで、その野望の一歩のために、まずはleaflet.jsを使ってブラウザに地図を表示することを始めてみた。

参考はこの辺。

Quick Start Guide - Leaflet - a JavaScript library for mobile-friendly maps: http://leafletjs.com/examples/quick-start.html
Documentation - Leaflet - a JavaScript library for mobile-friendly maps: http://leafletjs.com/reference.html

最初に

こんな風なHTML5のひな形を用意した。

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="">
</head>

<body>
    <script src=""></script>
</body>
</html>

これにleaflet.jsを使うためのjsとcssのリンクを書く。

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">

さらにleaflet.jsが地図を書くためのdiv要素をbody要素の下に追加。 leaflet.jsを呼び出すjsを書くためscript要素も追加しておいた。

<div id="map"></div>
<script>
    (この中にleaflet.jsを呼ぶためのスクリプトを書く)
</script>

div要素に高さがないと地図が見えないので、headの中にスタイルシートでheightを500pxぐらいに設定した。

<style>
    body{
        margin: 0;
        padding: 0;
    }
    div#map{
        width: 100%;
        height: 500px;
    }
</style>

ということで、こんな感じになった。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>leaflet.jsの練習</title>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        div#map{
            width: 100%;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        (この中にleaflet.jsを呼ぶためのスクリプトを書く)
    </script>
</body>
</html>

地図を表示してみる

script要素の中にleaflet.jsを呼び出すための処理を書いていきます。まずは初期化。とりあえず姫路城の場所を緯度経度にしてみた。ズームレベルは13。

var map = L.map('map').setView([34.839378, 134.694097], 13);

次にタイルサーバーとコピーライト、最大ズームレベルを設定する。例ではMapboxになってるけどMapnikを使います。タイルサーバーは、ここに書いてある

Tiles - OpenStreetMap Wiki: http://wiki.openstreetmap.org/wiki/Tiles
OpenStreetMapの各種タイル指定 - Qiita: http://qiita.com/nyampire/items/fbe359a2c9ccf0116787

var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© OpenStreetMap contributors', maxZoom: 19 });

最後にtilelayerをaddTo(map)で呼びだせば表示できるはず。

tileLayer.addTo(map);

ということで、こんな感じになった。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>leaflet.jsの練習</title>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        div#map{
            width: 100%;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([34.839378, 134.694097],15);
        var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 19
            });
        tileLayer.addTo(map);
    </script>
</body>
</html>

たった、これだけにどんだけ時間かかってんねん。

leaflet.jsの地図にマーカーを表示してメッセージをポップアップさせる

地図が出たのでマーカーを表示してみる。リファレンスを参考にタイトルと動かせるようにdraggableをtrueにしてみた。

var marker = L.marker([34.839378, 134.694097],{
    title: 'test',
    draggable: true
}).addTo(map);

おおー。出たー。ドラッグするとマーカーが動くー。けど、titleはマウスオーバーをしたときに小さくしか出ないので、ここはポップアップで表示して欲しいな。ということで、こうすればいいそう。

最初からポップアップさせるには、openPopup()を呼びだせばいいそう。

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

クリックさせてポップアップさせる場合はなしでOK。

marker.bindPopup("<b>Hello world!</b><br>I am a popup.");

script要素の部分だけ抜き出すとこんな感じ。

   <script>
       var map = L.map('map').setView([34.839378, 134.694097],15);
       var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
               attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
               maxZoom: 19
           });
       tileLayer.addTo(map);

       var marker = L.marker([34.839378, 134.694097],{
           title: 'test',
           draggable: true
       }).addTo(map);

       marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

   </script>

leaflet.jsの地図にGeoJSONの情報を表示させる

GeoJSONは、JSONを使った地理空間情報をやり取りするためのフォーマットだそう。

GeoJSON フォーマット仕様: http://s.kitazaki.name/docs/geojson-spec-ja.html

よく使うのは、地図上で場所をプロットしてテキストを書き込んだりした情報をアプリ間でやり取りするときに使ったりしますね。

MapBoxが作ったgeojson.ioエディタを使うと、ブラウザからGeoJSONの編集ができます。

geojson.io: http://geojson.io/

ということでgeojson.ioで作ったGeoJSONのデータを読み込んで表示したいと思います。

下準備

geojson.ioで適当に作ったmap.geojsonというGeoJSONファイルですが、これを編集して細工しておきます。

こうなっているのを

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"大手前公園"},"geometry":{"type":"Polygon","coordinates":[[[134.6929943561554,34.83518757883375],[134.69268321990967,34.83438620953671],[134.69515085220337,34.83381379812039],[134.69548344612122,34.8348001045432],[134.6929943561554,34.83518757883375]]]}},{"type":"Feature","properties":{"name":"好古園"},"geometry":{"type":"Point","coordinates":[134.6897006034851,34.83799671290307]}},{"type":"Feature","properties":{"name":"動物園"},"geometry":{"type":"Point","coordinates":[134.69527959823608,34.837063280868]}},{"type":"Feature","properties":{"name":"シロトピア記念公園"},"geometry":{"type":"Point","coordinates":[134.69487190246582,34.84154541921616]}}]}

parkDataという変数に入れるよう、先頭に「var parkData = 」と最後「;」をつけます。

var parkData = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"大手前公園"},"geometry":{"type":"Polygon","coordinates":[[[134.6929943561554,34.83518757883375],[134.69268321990967,34.83438620953671],[134.69515085220337,34.83381379812039],[134.69548344612122,34.8348001045432],[134.6929943561554,34.83518757883375]]]}},{"type":"Feature","properties":{"name":"好古園"},"geometry":{"type":"Point","coordinates":[134.6897006034851,34.83799671290307]}},{"type":"Feature","properties":{"name":"動物園"},"geometry":{"type":"Point","coordinates":[134.69527959823608,34.837063280868]}},{"type":"Feature","properties":{"name":"シロトピア記念公園"},"geometry":{"type":"Point","coordinates":[134.69487190246582,34.84154541921616]}}]};

表示する

編集したmap.geojsonファイルを読み込ませて表示します。

head要素の中、leaflet.jsを読み込んだ下あたりにでmap.geojsonを読み込みます。

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="map.geojson"></script>

script要素の中の適当な場所にこんな風に書くと表示されます。

L.geoJson(parkData).addTo(map);

すげー!一行でここまで出た。

次はポップアップして情報を出したりしたいけど、今日は力尽きたのでとりあえずはここまで。

ここまでの成果

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>leaflet.jsの練習</title>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="map.geojson"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        div#map{
            width: 100%;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([34.839378, 134.694097],15);
        var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 19
            });
        tileLayer.addTo(map);

        var marker = L.marker([34.839378, 134.694097],{
            title: 'test',
            draggable: true
        }).addTo(map);

        marker.bindPopup("<b>Hello world!</b><br>I am a popup.");

        L.geoJson(parkData).addTo(map);

    </script>
</body>
</html>