2017-03-06

leaflet.jsで自前の画像ファイルを地図データとして扱う(執筆中)

便利なMAPライブラリ leaflet.jsには、既存の画像を使った

アミューズメント施設用の独自マップ、あるいは架空のゲームマップなんというのも実装可能です。

例えば、以前紹介したオープンソースなスペースオペラゲームのマップを使った例は以下の通り。
CRS.Simple example - Leaflet

以下、執筆中

2017-03-05

国税庁法人番号公表サイト

経営

相手企業の情報を照会したいが、部分的にしか情報が分からない……なんてこと、ありますよね。
たとえば、埼玉県にある株式会社なんちゃらシステム……あれ？　前株だっけ？　そもそもなんちゃらって？？？
そんな時は、国税庁法人番号公表サイトが使えます。
http://www.houjin-bangou.nta.go.jp/
部分一致でもいけますし、都道府県からの検索もOK。

帝国データバンクに依頼する際にも、雑な情報と確定情報では料金が違ったりするので、分かるとこは何とかしといたほうがいいですね。

基本的には、法事番号、名前、住所がわかります。
さらに、システムが稼動した平成２７年以降からの変更履歴も確認できます。
さすがに株主はわからないので、その場合は法人番号を控えて全部事項証明書をとりましょう。

参考もと

http://www.houjin-bangou.nta.go.jp/

2017-03-04

【イベントログ】第40回東京五美術大学連合卒業・修了制作展/新構造・東京展に行って来ました

イベントログ

最近、展示会にもイベントにも行ってなくて精神が腐りきってる気がして来たので、ガラにもなく美術館に行って来ました。

あまりにもクリエイティブ成分が不足してきたので美大の合同卒制発表会に来てみた件 pic.twitter.com/wRuq3LrJ8A
— 木野修造 (@shuzo_kino) 2017年3月4日

2/24-3/5まで乃木坂駅の国立新美術館で開催中の
なんと入場料はロハですよ、奥さん！

五大学合同卒制発表会、新構造東京展の二つが三フロアあったので大体二時間程楽しめました。

取り敢えず、東京造形大というトコロは暗黒魔界と繋がってそうな作品だらけで怖すぎる
— 木野修造 (@shuzo_kino) 2017年3月4日

大学によって相当カラーが違うんやな……日大のは僕でも何とか感じ取れるものがある
— 木野修造 (@shuzo_kino) 2017年3月4日

乃木坂離脱。たっぷり二周分堪能した。
— 木野修造 (@shuzo_kino) 2017年3月4日

同じ世界に生きているハズなんだが、美大の人らには違うものが見えてるらしい
— 木野修造 (@shuzo_kino) 2017年3月4日

東京五美術大学卒制展

入り口

ファンシーな記号を詰め込んだオブジェ

お大事に

レンダリングミスめいた

信号機に顔

自画像もスマホ持ちの時代

絵師100人めいた空間

航空爆弾めいたベッド。錆びた金属に色付き釘と芸が細かい

実は今回最大の目当てであった作品。
2次元が出て来た……お前らの嫁だろ！？早く何とかしろよ！

野外には一号戦車めいた鉄製オブジェが

ハトの群れにスズメ

絵師100人その2(女子美大編)

今回一番度肝を抜かれた作品

質感がヤバイ！
絵の具(ラテックス？？)の立体感と配色が相まって凄かったです(小学生並みの感想)

パッと見、撮影ミスに見えますが

キャンバスが斜めなんです。
面白い。

タヌキの手彫りスタンプだよわーい

鬼の木彫り。今見ると片方のツノ(？)が無かったですね。

超大型コラージュ。
作品の彼方此方で死人が(震え声

新構造東京展

プロ芸術家集団の展示会とあって……卒制とはまた違った凄みがありました

質感が凄い。カードイラストだったら超映えそう

私は塗りが駄目でどーしても単調になってしまうのですが……この絵を見てたら少し理由がわかった気がします
ワンポイント……というか、適度な揺らぎが必要なのでしょうね
上手く表現できないのが心苦しい

いいとこの家に飾ってありそうです
近付いて見ると、遠景は点描めいて色乗せてるだけなのにちゃんと家に見えるから不思議です

公式URL

公募展｜展示会｜国立新美術館 THE NATIONAL ART CENTER, TOKYO

2017-03-03

Leaflet.jsで図形を書いたりイベントをいれたりする

shuzo-kino.hateblo.jp
の続きです。
Leafletでやれる事

実際のところ

マップオブジェクトの名前が"map"だった場合を想定します。
座標等々は、電通大を中心にして倍率１２にしています。

距離円

    var circle = L.circle([35.656083, 139.544056], {
	color: 'red',
	fillColor: '#f03',
	fillOpacity: 0.5,
	radius: 5000
    }).addTo(map);

f:id:shuzo_kino:20170303235219p:plain

クリックイベント

    function onMapClick(e) {
	alert("You clicked the map at " + e.latlng);
    }
    map.on('click', onMapClick);

f:id:shuzo_kino:20170303235224p:plain

参考もと

Quick Start Guide - Leaflet - a JavaScript library for interactive maps

2017-03-02

Leaflet.jsを使ってマップAPIを叩いてみる

javascript

Leaflet.jsは強力なマップAPI系ライブラリです。
OpenStreetMapのような有名ドコのちずにポップアップをつけたり、距離円を弾いたりできます。
更に、架空の地図……それも海図や宇宙図みたいなの……にもレンダリング可能。
色々面白そうな奴です。

実際のところ

とりあえず、電通大にトークンを出してみましょう。
何やら公式チュートリアルではイケイケマップサービスへの登録を進められてたりしますが……
こっちは手早く実験したいだけなのでOpenStreetMapを使います。

ファイル構成はHTML、CSS、JAVASCRIPTの三兄弟。

HTML

必要となる"leaflet.css"と"leaflet.js"はWEBから頂いてきます。

<html>
    <head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
	<link rel="stylesheet" href="my.css" />
 <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
 <script src="myapp.js"></script>
</head>
<body  onload='init();'>
    <div id="mapid"></div>

</body>
</html>

CSS(my.css)

#mapid {
    width: 640px;
    height: 480px;
    border: solid 1px #999;
}

Javascript (myapp.js)

//leaflet OSM map
function init() {
    
    // create a map in the "map_id" div,
    // set the view to a given place and zoom
    var map = L.map('mapid');
    map.setView([35.656083, 139.544056], 18);
    
    // add an OpenStreetMap tile layer
    var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution : '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
	    maxZoom: 18,

				});
    tileLayer.addTo(map);
    
    // add a marker in the given location,
    // attach some popup content to it and open the popup
    var mapMarker = L.marker([35.656083, 139.544056]);
    mapMarker.addTo(map);
    mapMarker.bindPopup('CSS3 popup. <br> UEC! UEC!');
    mapMarker.openPopup();
    
    // add layers
    var baseLayers = {
    	"OpenStreetMap": tileLayer
    };
    var overlays = {
    	"Marker": mapMarker,
    };
    L.control.layers(baseLayers, overlays).addTo(map);				
    
    // add control scale 
    L.control.scale().addTo(map);
    
}

結果

ちゃんと出来てると、こんな感じに成るはず。
f:id:shuzo_kino:20170302234938p:plain

参考もと

Leaflet.jsをちょこっと試してみた。 | OpenなGISのこと
 Quick Start Guide - Leaflet - a JavaScript library for interactive maps

2017-03-01

Google MapsのAPIキーを取得して使ってみる

google gis

Google MapsのAPIキーを取得して使ってみます。

実際のところ

Google Maps APIs for Web | Google Developersへ行き、右上の「キーを取得」をクリックします。
f:id:shuzo_kino:20170301235433p:plain
カンタンな説明が出るので目を通しておきます。
f:id:shuzo_kino:20170301235436p:plain
まずはキーの適用先について。
既存のシステムに適用することもできます。
f:id:shuzo_kino:20170301235445p:plain
次にキーの識別名や制限の設定画面。
今回は動作実験したいだけなので、制限なしにしておきます。
公開サイトやアプリに載せるなら、ちゃんと設定してくださいね。
f:id:shuzo_kino:20170301235451p:plain
ボタンを押すと、念願のAPIキーが発行されます。
f:id:shuzo_kino:20170301235614p:plain

動作検証として、Google 公式のサンプルを使いましょう。
先程取得したキーをYOUR_API_KEYと入れ替えて、HTMLファイルとして保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  </body>
</html>

ファイルを開くと、こんな感じの画面が出るはずです。
f:id:shuzo_kino:20170301235724p:plain

参考もと

Google Maps の APIキーを簡単に取得する – ねんでぶろぐ
 Circles | Google Maps JavaScript API | Google Developers

2017-02-28

BETWEEN演算子で特定の範囲内にある値をとる

sql

特定の範囲内にある値をとる場合、BETWEEN演算子が使えます。
SQL標準なので、SQLiteにすら入っています。

実際のところ

いままで0以上50以下なんてクエリを書く場合、以下のようにしていました。

SELECT value_a FROM result WHERE value_a >= 0 AND value_a <= 50

これは以下のように書くことができるようです。

SELECT value_a FROM result WHERE value_a BETWEEN 0 AND 50

パフォーマンス上はふるい書き方が良かったりする事もあるようなので、
そこは可読性と応相談ですね。

Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

leaflet.jsで自前の画像ファイルを地図データとして扱う(執筆中)

国税庁法人番号公表サイト

参考もと

【イベントログ】第40回東京五美術大学連合卒業・修了制作展/新構造・東京展に行って来ました

東京五美術大学卒制展

新構造東京展

公式URL

Leaflet.jsで図形を書いたりイベントをいれたりする

実際のところ

距離円

クリックイベント

参考もと

Leaflet.jsを使ってマップAPIを叩いてみる

実際のところ

HTML

CSS(my.css)

Javascript (myapp.js)

結果

参考もと

Google MapsのAPIキーを取得して使ってみる

実際のところ

参考もと

BETWEEN演算子で特定の範囲内にある値をとる

実際のところ