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

前の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を選曲するって。そこにビックリですよ。

こっちはメイキング。

### [_](/20141010/#p03 "leaflet.jsを使って地図を表示してみる") leaflet.jsを使って地図を表示してみる以前からAndroidとかのアプリを作りたいなと思っていたけど、Javaを覚えるのが嫌で放置していました。しかし、[Apache Cordova](http://cordova.apache.org/)を使えばHTML5/CSS3/JavaScriptでアプリが作れそう。ということで、その野望の一歩のために、まずは[leaflet.js](http://leafletjs.com/)を使ってブラウザに地図を表示することを始めてみた。参考はこの辺。 * Quick Start Guide - Leaflet - a JavaScript library for mobile-friendly maps: * Documentation - Leaflet - a JavaScript library for mobile-friendly maps: #### 最初にこんな風なHTML5のひな形を用意した。これにleaflet.jsを使うためのjsとcssのリンクを書く。さらにleaflet.jsが地図を書くためのdiv要素をbody要素の下に追加。 leaflet.jsを呼び出すjsを書くためscript要素も追加しておいた。

div要素に高さがないと地図が見えないので、headの中にスタイルシートでheightを500pxぐらいに設定した。ということで、こんな感じになった。 leaflet.jsの練習

#### 地図を表示してみる script要素の中にleaflet.jsを呼び出すための処理を書いていきます。まずは初期化。とりあえず[姫路城の場所](http://tools.wmflabs.org/geohack/geohack.php?language=ja&pagename=%E5%A7%AB%E8%B7%AF%E5%9F%8E¶ms=34_50_21.76_N_134_41_38.75_E_region:JP-28_scale:20000)を緯度経度にしてみた。ズームレベルは13。 var map = L.map('map').setView([34.839378, 134.694097], 13); 次にタイルサーバーとコピーライト、最大ズームレベルを設定する。例ではMapboxになってるけどMapnikを使います。タイルサーバーは、ここに書いてある * Tiles - OpenStreetMap Wiki: * OpenStreetMapの各種タイル指定 - Qiita: var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© OpenStreetMap contributors', maxZoom: 19 }); 最後にtilelayerをaddTo(map)で呼びだせば表示できるはず。 tileLayer.addTo(map); ということで、こんな感じになった。 leaflet.jsの練習

たった、これだけにどんだけ時間かかってんねん。 ### [_](/20141010/#p04 "leaflet.jsの地図にマーカーを表示してメッセージをポップアップさせる") leaflet.jsの地図にマーカーを表示してメッセージをポップアップさせる地図が出たのでマーカーを表示してみる。リファレンスを参考にタイトルと動かせるようにdraggableをtrueにしてみた。 var marker = L.marker([34.839378, 134.694097],{ title: 'test', draggable: true }).addTo(map); おおー。出たー。ドラッグするとマーカーが動くー。けど、titleはマウスオーバーをしたときに小さくしか出ないので、ここはポップアップで表示して欲しいな。ということで、こうすればいいそう。最初からポップアップさせるには、openPopup()を呼びだせばいいそう。 marker.bindPopup("Hello world!
I am a popup.").openPopup(); クリックさせてポップアップさせる場合はなしでOK。 marker.bindPopup("Hello world!
I am a popup."); script要素の部分だけ抜き出すとこんな感じ。 ### [_](/20141010/#p05 "leaflet.jsの地図にGeoJSONの情報を表示させる") leaflet.jsの地図にGeoJSONの情報を表示させる GeoJSONは、JSONを使った地理空間情報をやり取りするためのフォーマットだそう。 * GeoJSON フォーマット仕様: よく使うのは、地図上で場所をプロットしてテキストを書き込んだりした情報をアプリ間でやり取りするときに使ったりしますね。 MapBoxが作ったgeojson.ioエディタを使うと、ブラウザからGeoJSONの編集ができます。 * 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要素の中の適当な場所にこんな風に書くと表示されます。 L.geoJson(parkData).addTo(map); すげー!一行でここまで出た。次はポップアップして情報を出したりしたいけど、今日は力尽きたのでとりあえずはここまで。 * * * ここまでの成果 leaflet.jsの練習