国際信州学院大学へのアクセス地図(の一部)に OpenStreetMap が使われている件

電 osmjp

実在性に疑問が投げかけられている()国際信州学院大学のウェブサイトにある大学へのアクセスのページで OpenStreetMap が使われていると一部で話題になっていました。

そのページで表示される地図には国信大が表示されているわけですが、今のところ大学関係者以外の第三者がその実在性を確認していないため、OpenStreetMap にその地物を書き込むのは OSM への破壊行為になりかねません。
しかし当該ページで地物が表示されているものの OpenStreetMap 上 では地物のオブジェクトは書き込まれていませんでした。

どのようになっているか興味があったので国信大のアクセスについてのページのソースを見ると iframe で地図専用の HTML を読み込んでいます。
今度は地図専用の HTML を表示してソースを確認すると次のような記述がありました。

//OSM本家に負荷をかけないよう、またまぜか国際信州学院大学が表示されない(おそらく知名度不足)ので
//12以上でズームしていてキャンパスの近くなら自前の地図で表示 国際信州学院大学 周辺地図 のソースより引用

タイルレイヤーの取得に際してズームレベル12以上で国信大(が存在すると主張する地域)の周辺タイルを取得しようとした時だけ国信大のウェブサイトのページに保存されたタイル画像を取得していることになります。

良く見れば地図の出典を表示する部分では「© OSM contributors / modified by SUI」となっていて、変更した事実が明示されていました。

ここからは推測とポエム

OSM では地上に存在するものをマッピングする ことになっていて、実在性が疑われている国信大が OSM 上のデータを編集していた場合、OSM コミュニティによって実在性の確認や否定がなされていた可能性があります。
コミュニティによる実在性の確認の中で国信大の実在を証明することになったかもしれませんが、彼らは自分たちで実在性を証明()や知名度の向上()をしていきたいのかもしれません。

OpenStreetMap ではそのデータをダウンロードして独自に地図タイルサーバーを構築することができます。switch2osm を見るとその構築方法が書かれているので構築可能ですし、Portable OpenStreetMap を構築すればオフラインで使う OpenStreetMap も構築できます。これらのシステムを使って独自に編集した地図タイルを用意し、自信のウェブサーバーに特定エリアのタイルを置いているのかもしれません。
Google マップ API の埋め込みが有料化されたので OpenStreetMap を使うことにしたらしいので高いマシンスペックが要求される動的なタイルサーバーを動かしているとはちょっと考えにくい気がします。それとも特定エリアだけのデータを持ったタイルサーバーなのかしら。

なんか面白いな、自分でも同じ事が出来ないか試してみたい。

DELL XPS体験モニター(期間付き)に当選

電 DELLアンバサダー

DELL アンバサダーが行っているデル アンバサダー限定！XPS体験モニターの第5回 モニタープログラムに応募したところ、モニター対象として当選しました。
対象機種は2018年1月26日に発売されたnew XPS 13のプラチナシルバー＆ブラックです。

当選後の流れ

モニター当選の後アンバサダープログラムへ機材の送付先を登録する必要があります｡割と余裕がありますが登録を忘れると機材が送られてきません｡ なお､住所の登録と同時に次のような注意事項に同意することになります｡借用書となるものですね。
当然ですが変なものはありません｡

  • 返却日を遵守
  • 借入物品の分解、解析、改造、改変等は禁止
  • 返送前に備品等の確認をしたうえで、貸し出したときと同様の状態
  • 第三者への譲渡、販売、質入れ、貸し出しは禁止
  • 借入物品を修理する場合には、修理代金に相当する費用を弁償
  • 返還不能及び修理不能の状態になった場合には、借入物品の価格と同額を弁償
  • 故障させた場合にはサポートに連絡

住所の登録が終わるとメールが飛んできます。

当選者座談会

今回の当選者にはモニター当選者座談会の案内が送られていると思います｡当選者が都内で集まり､どのように使っているかや製品への要望などを直接メーカーに伝えることができる場のようです｡
参加するといくつかのメディアに写真が掲載されるかもしれないとのこと｡
今回は日程が合わないので見送ることにしました｡

モニター機器の使い道について

OpenStreetMap を JOSM でマッピングする、翻訳作業を行う、なんかのコードを書く、マイクラ、など一時的に ThinkPad T460s を置換える形で使ってみるつもりです。
new XPS 13は小型モバイル機なので意識的に持ち出すようにしてみたいですね。

TextQL を Windows で使う

電 Windows PowerShell Go Lang

CSV ファイルや TSV ファイルに直接 SQL をかけて結果を受け取れる TextQL というコマンドが Twitter の TL に流れてきたので Windows にインストールしました。PowerShell で使えるようにした作業メモです。

流れてきた紹介記事

TextQL - CVSファイルに対してSQLを実行できるコマンドラインツール | ソフトアンテナブログ

GitHub のリポジトリ

Go Lang の設定

TextQL は Go Lang で書かれているっぽいのでまず Windows で Go Lang を使えるようにします。

The Go Programming Languageのダウンロードページから Windows 用のインストーラ goX.X.X.windows-amd64.msi あたりをダウンロードしてインストールすればOKです。

なお自分は goX.X.X.windows-amd64.zip をダウンロード&展開して環境変数の GOBIN と GOROOT、PATH を設定しました。
GOROOT が zip ファイルを展開したディレクトリ、GOBIN は GOROOT の中の bin をセット。PATH に GOBIN のパスを追加して終わり。

> go version
go version go1.10 windows/amd64

とか出れば OK。

gcc の設定

gcc も使うっぽいので Sourceforge から mingw-w64-install.exe をダウンロード。インストーラを起動して途中の Architecture を間違えなければインストール完了です。

PowerShell を再起動して gcc -v が実行されれば OK。実行されていなければ C:\Program Files\mingw-w64\x86_64-X.X.X-posix-seh-rt_v5-rev0\mingw64 あたりの中にある bin までパスを通せば使えるようになるはず。

TextQL のインストール

ここまで来れば簡単。

> go get -u github.com/dinedal/textql/...

とすれば GOBIN にビルドされた実行ファイルができてきます。
Excel に突っ込んでからフィルタかけたり Access に突っ込んでから SQL かけたりしなくていいので超快適。

Linux で iPhone をマウントして Mapillary アプリの写真を取り出す

電 Linux Mapillary

Mapillary へ画像をアップロードする前にそれなりの大きさの画面で写真を見たいじゃないですか。Linux で iPhone をマウントする時に毎回ググるのがアレなので自分用にメモを残しておきます。

操作を始める前に iPhone の Mapillary アプリで写真に EXIF 情報を付与しておくとパソコンから Mapillary へアップロードできる。

iPhone のマウント

こちらの gist を見るとやり方が書いてあります。

On Ubuntu 16.04, since iOS 10 update, libimobiledevice can't connect to my iPhone. This is my attempt to document a fix. · GitHub

ざっくり流れを書くと

  • libplist (場合によってはいらない)
  • libusbmuxd
  • libimobiledevice
  • usbmuxd
  • ifuse

辺りを入れる。ビルドをする場合はビルドに使われるパッケージ類を入れておくこと。

パソコンに iPhone を接続したら認証させる。iPhone 側でコンピューターを信頼するかどうかのダイアログが出てたら信頼しておかないとダメなはず。

$ idevicepair pair

SUCCESS: Paired with device XXXX～ が表示されれば OK。出なかったら適当にトラブルシュートする。

$ ifuse --documents com.mapillary.app /home/zoar/mapillary/

普通にマウントしても見えなかったのでアプリを指定してマウントする。

アンマウントするときは

$ fusermount -u /home/zoar/mapillary/

写真の取り出し

マウントしたディレクトリに移動すると日付時刻ディレクトリの中に写真が入っているので必要なものをコピーする。今回は全部コピーした。

$ cd ~/mapillary/
$ cp -r ./* /pathToDir/

取り出した写真を見ながら不要な画像を削除したりモザイク処理をする。2000枚近くの写真から人の顔とか車のナンバーを認識してモザイク処理してくれるソフトないかしら。

アップロード

Mapillary tools でアップロードする。
iPhone のアプリ側で EXIF 情報を付与しておけば Mapillary のユーザー情報も一緒に入っているので upload.py でアップロードできる。
普通の写真に位置情報を付けたファイルの場合には upload_with_authentication.py とかでアップロードする。

あとは公開されるのを待てば OK。

2枚の Mapillary 画像から地物の位置を取得する実験(の途中)

電 d3.js v4 OSM Mapillary

先日参加した Mapillary Meetup 2018 Tokyo : ATND の懇親会で思いついた2枚の Mapillary 画像から地物の位置を特定するやつをどうにかしようと模索中です。

適当に動作するっぽい JavaScrpt までは書けました。続きができる気がしないけど。

f:id:k-side:20180306160021p:plain

右上の地図で濃い緑矢印は画像の方向角、赤いラインは画像間の基線です(これはいらないなぁ…)。
地図上の青いラインと画像上の青いラインは連動していて、画像上のマウスポインタの位置が画像上でどの方向かを見るためのものです。緑ラインも同じ様な動きをしますが、こちらはマウスをクリックした位置に固定して表示されます。
各種数値を正しく取得できれば緑ラインの交点が地物の位置になるはずです。サンプル画像では写真内から道路案内標識の位置を出そうとしていますが、地図上の交点がはるか街区内に突っ込んでいるので正しい位置を出せなかったことがわかります。

画像の持つ画像自体の方向角が正しくなかったり、画角の情報や画角の計算に必要な情報を持っていない画像で試したため(なぜその画像を選んだ…)結果として地物の正しい位置を取得できませんでした。

課題をまとめるために記事を残しておきます。あー、でもこんな記事書いたらなにか出来上がった気になってしまうかもと思いつつ。

やり残していること

さて、実装できるでしょうか。

Mapillary から直接画像の取得

今のはファイルをローカルに保存してデータを取っているので REST API か Mapillary.js を使ってクライアントサイドで完結できるようにしないと使い勝手が悪すぎる。

画角の取得

画角情報が保存されていないと画角とマウスの移動量を正しく連携させられないので、画像の2点と地図上の2点から挟角を設定できるような機能が必要そうです。

画像方向角の調整

画像の方向角は電子コンパスが正しく動作していないと正確な方向角を記録できません。せっかく画像から風景が見えていて、右上に地図を表示できているのでこの画面上で方向角を補正する機能を追加すれば正しい方向角を向くはずです。

ラインの拡縮追従

地図を拡大・縮小した時にラインが取り残されてしまいます…。

交点計算の改善

最小自乗法とかで計算したらかっこよさそう。

使ってるもの

地図表示は leaflet.js でその他のオブジェクトは d3.js でなんとかしています。
これに使うつもりで d3.js を練習してたわけではないのですが、なんか使えましたね。たまたま…。

というか誰か作って(ぇ

d3.js v4 でポリゴンとポイントとボロノイ図を表示する

電 d3.js v4 OSM

d3.js で検索すると v3 で書かれたものがほとんどでな上バージョンも明記されていないことも多くて探しにくい…。
結局 GUNMA GIS GEEK の清水さんのコードだけ見ててできたので d3.js + 地図を表現する時にはまず清水さんのブログを探してからにしよう…。

つーか d3.js v5 があるじゃんよ。

何か目的があって書きたかったわけではないですが、オフィシャルな(?)ドキュメントを読む前に少しは書いておかないとドキュメントが何言ってるかわらからないヤツなんです。

青で段階的に着色されたポリゴンは e-Stat) からダウンロードした2015年の国勢調査時の町丁目を QGIS で GeoJSON 化したものです。ポリゴン内の人口が多いほど青が濃くなっていますが、面積が揃っていないので着色だけ見てもよくわからないことになってしまいました。
赤いポイントは 埼玉県オープンデータ からダウンロードした川越市の避難所データで、黒い境界は避難所データをボロノイ分割してできたポリゴンです。

d3.js を僅かに程度覚えてもデザイン力がないとツライことに気づきました…。

動作例

ポイントのレンダリングをポリゴンのレンダリングに似せて書いてスマートにしたいなとか思っていますが、とりあえずこんな感じで。

d3.js v4 + render polygon + render point + voronoi · GitHub

d3.js v4 で画像を拡大・縮小・ドラッグする

電 d3.js v4

ちょっとブラウザ上でマウスホイールを使って画像を拡大・縮小したりドラッグしたかったので試してみました。

ググるといろいろな手法が出てきましたが d3.js v3 の頃のものだっりしますが、 GUNMA GIS GEEK 清水さんのブログの内容は v4 でとてもシンプルだったので、この内容を少し書き換えるだけで簡単にできました。

SVG の中に image オブジェクトを足してそいつをグリグリさせています。
元の画像が 1024x1024 だったものを 1/3 の大きさにして表示させています。

See the Pen Image File Scaling by Zoar (@Zoar-jp) on CodePen.