トップ 追記

Days of Speed

過ぎゆく日々を書こう。忘れっぽい未来の自分のために

クリエイティブ・コモンズ・ライセンス Jun NOGATA を著作者とするこの 作品クリエイティブ・コモンズの 表示 - 継承 4.0 国際 ライセンスで提供されています。


2014-10-21 [長年日記]

_ なんとか雨が降らなかった

網干の祭りだそうで、スーパーに行ったら祭り体制になってた。

Tags: life

_ leaflet.jsの地図にGeoJSONの情報を表示させるいくつかの方法(解決編)

まだ、leaflet.jsでバタバタしてます。

前回、日記に「leaflet.jsの地図にGeoJSONの情報を表示させる」というエントリを書きました。ですが、ファイルに手を加えて表示させるのは不格好だなと思ってました。 そういうこともあって、GeoJSONそのままの形で読み込む方法を探してバタバタした結果、納得できるようになったのでメモしておきます。

参考

leaflet AJAXプラグインを使って読み込む

悩んだ悩んだ。

最初に試したのがこの方法で、悩んで姫路IT系勉強会でも質問のネタにしたのだけど、何回試してもうまくいかない。

デバッガで見るとファイルを読み込んだところでコケるので、GeoJSONのファイルを作りなおしたりしたけれど結果は変わらず投げようかと思っていたところで、ふと、気がついた。 ローカルのHTMLファイルをブラウザで読み込ませるのではなく、httpを通して読み込ませるとどうなる?

これを参考に、

$ python3 -m http.server 8080

という感じでPython3でWebサーバーを実行してアクセスすると、ちゃんと読み込んで表示する!!!

はあ。疲れた。


ということで、ローカルからではなくWebサーバー越しでアクセスして使う方法。

Leaflet Ajaxプラグインは、CDNで配布していないのでローカルにダウンロードしておきます。

Leaflet.jsを読み込んだ下あたりにLeaflet Ajaxプラグインを読み込むように書いておきます。

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

GeoJSON読み込み部分は、サンプルほぼコピペでいけます。

var geojsonLayer = new L.GeoJSON.AJAX("map.geojson");
geojsonLayer.addTo(map);

これで、http越しにアクセスするとGeoJSONの場所にピンが打たれるはずです。

Leaflet Ajaxプラグインの成果

<!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="leaflet.ajax.min.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);

        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.");

        var geojsonLayer = new L.GeoJSON.AJAX("map.geojson");
        geojsonLayer.addTo(map);

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

jQueryを使って読み込む

姫路IT系勉強会で相談した時、「JSONの読み込みは、jQuery使うと楽」とのワテさんからのアドバイスがあったので、こっちでももがいた結果がこちら。 jQueryを使うと、汎用性とHTMLファイルをブラウザで読み込んでも、ちゃんとGeoJSONが読み込めるところがメリットですね。

まず、jQueryを読み込むように書いておきます。新しいブラウザだけでいいので2.x系使ってます。

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

GeoJSONを読み込んで地図表示は、こんな感じ。

$.getJSON("map.geojson",function(data){
   L.geoJson(data).addTo(map);
});

たったこれだけなんだけど、これも結構時間かかった…。

jQueryを使った成果

<!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="https://code.jquery.com/jquery-2.1.1.min.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);

        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.");

        $.getJSON("map.geojson",function(data){
            L.geoJson(data).addTo(map);
        });

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

2014-10-19 [長年日記]

_ いい天気なのに出られない

出ようと思ったところで仮想マシンのWindows Updateが始まって、出鼻をくじかれたので出る気なくなった。

Tags: life

_ 必要なものは「人と違うオレ(ワタシ)すげー」という中二病的な気持ち

昨日は姫路IT系勉強会がありました。 そこで「Ubuntuをインストールしたけど、そこからどうしたらいい?」という話しが出ました。

今でこそLinuxは便利だから使っているけれど、自分がLinuxを使い始めた時を振り返ると、使い始めた一番の理由は「Windowsと違うから」→「人と違うOS使ってるオレ、カッコイイ!」という部分が一番大きかったような気がします。

Linuxに限らず、新しいことを始めるときの強い動機は、良い意味での勘違いと思い込みだと思いますよ。

Tags: linux think

_ isenkramを使うと必要なファームウェアを自動認識してインストールできるのか

試してみたいけど、そういう環境ないし、自動的にnon-freeのリポジトリを追加してインストールしてくれたら嬉しいのだけど。

Tags: debian

2014-10-16 [長年日記]

_ 大丈夫かな?

2日寝てましたが、そろそろ大丈夫ぽい?

Tags: life

_ Atomのクソ安いマシンがいっぱい出てきたのでDebian入れて遊んでみたい

49ドルのセットトップボックスとか。65ドルのWindowsタブレットとか。

値段は出ていないけど、HDMI端子にぶっ差すスティック型端末とか。

どれもハードウェア構成はBaytrailでほぼ同じだけど、似たようなハードウェアのZOTACのZBox picoを動かした記事によるとUbuntuが使えたそう。

問題としては32bit UEFIが必要でUbuntuだとそこが難しいようだけど、Wheezyだけど32bit UEFI対応インストーラあるしサクッと入れ替えられるのではと予想。 てことで、誰かください。

Tags: gadget pc

_ 書籍「3日でマスター JavaScript」読了/JavaScript挫折組におすすめ

3日でマスター JavaScript
伊藤 静香
ソシム
¥ 1,944

読了。手を動かしながら一日2時間×3日の想定なので、読むだけなら1時間ほどで読めました。ということで感想。

leaflet.jsで作った地図をApache Cordovaでアプリにしたいと思ってJavaScriptを書こう!と決意したわけですが、自分にピッタリくる参考書がなかなかありませんでした。

書店にあるJavaScriptの書籍というのは、だいたい2つのタイプに分かれていて、一つはWebデザイナーなどのノンプログラマーに向けに書いたもの。もう一つはJavaScriptをバリバリ書いているフロントエンドエンジニア向けに書かれたものに分かれてます。

レガシーながらもプログラムを書いたことがある人にとっては、ノンプログラマー向けの説明は退屈で必要ないし、エンジニア向けの内容は、その過程に至るまでの解説が足りない。

ということでモヤモヤしながらも「JavaScriptは、もういいや」となってたのですが、この本は初心者向けの本でありながら、短期間で全体像を把握させる作りのためJavaScriptらしい部分の説明は押さえつつも、外れるところは断りを入れてあえて説明しないという割り切りは読んでいて気持ちが良かったです。

自分みたいに、次に行くために手っ取り早く全体像を知りたい人にはオススメですね。

_ Microsoftマウスのホイールがバカになった

Microsoftの「Comfort Mouse 3000」というマウスを使ってるけど、ホイールがバカになったのかクルクル回しても3回に1回ぐらい空回りするのが気持ち悪い。

このマウスは、以前のマウスが壊れて近所のJoshinで適当に買ったものだけど、当初からマウスボタンが硬すぎて指が痛かったり、使いづらくていい思い出はないけど、これはもう捨てだよな。

マイクロソフトのマウスも、昔のインテリマウスとかは良かったのにな。

Tags: hardware

2014-10-15 [長年日記]

_ 腰をイワしております

台風の日の帰りの電車を待っていました。電車が入ってきたので、教科書とノートPCが入ってそこそこの重さのリュックを背負って立ち上がろうとしたときピキッと走った。

「マズいなぁ」と思ってたら、翌朝、見事に動かなかったのでギックリ腰決定。

肩が痛いとか腰が痛いとか、もうすっかり中年だな。 寒くなって腰が痛む秋にぴったりのKinksのAutumn Almanacでも貼っておこう。

Tags: life

_ Skype Qikのビデオに使われているFletcher C. JohnsonのMessin Up My Mindという曲が良い

Skypeのビデオメッセージサービスが始まったそうだけど、これの紹介ビデオに使われている曲がすごく良い。

調べたら、Fletcher C. JohnsonというバンドのMessin' Up My Mindという曲だそう。 bandcampで曲が聞けて買えるので、ちょっと聞いてみよう。

Tags: music

2014-10-13 [長年日記]

_ 台風で休講

先週はギリギリのところで警報が解除されましたが、今日はギリギリのところで警報が出たので大学は休講になりました。 用事があったので、ひとまず大学まで出て帰ってきたけど、家に着いたら雨風吹き荒れる嵐になったのでタイミング良かった。

Tags: life

2014-10-10 [長年日記]

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

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

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

Tags: life

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

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

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

こっちはメイキング。

Tags: music

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

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

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

参考はこの辺。

最初に

こんな風な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を使います。タイルサーバーは、ここに書いてある

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)で呼びだせば表示できるはず。

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を使った地理空間情報をやり取りするためのフォーマットだそう。

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

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

ということで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>

2014-10-07 [長年日記]

_ 寒い

台風一過で空気が入れ替わったかな。冷えます。

Tags: life

2001|12|
2002|01|02|03|04|05|06|07|08|09|10|11|12|
2003|01|02|03|04|05|06|07|08|09|10|11|12|
2004|01|02|03|04|05|06|07|08|09|10|11|12|
2005|01|02|03|04|05|06|07|08|09|10|11|12|
2006|01|02|03|04|05|06|07|08|09|10|11|12|
2007|01|02|03|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|11|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|03|06|08|12|
2011|01|02|03|06|07|08|09|10|11|12|
2012|01|02|03|05|06|07|08|09|10|11|12|
2013|01|02|03|04|05|06|07|08|09|10|12|
2014|02|03|04|05|06|07|08|09|10|