smellman's Broken Diary

クソみたいなもんです

Georepublicに入社して8年目になりました。

営業日的には昨日付けで8年目に突入しました。とはいえ、昨日も今日も精神的に病んでダウンしていましたががが。

この一年振り返ると、まぁ稀に見るぐらい案件は大凶っぽさがあったなぁっていう一年でした。

Visual Basic+OracleRuby on Rails+Oracleに移植するというなかなかきつい仕事が夏まであって、やっと終わったころに今度はどでかいRuby on Railsの案件の引き継ぎというのをやりました。
どでかいというか、いきなりサーバ60台引き継ぎなんでかなり辛いし、Ruby on Railsとか言いながら変な内製ライブラリがあってそれが異常な実装だし、そもそもRubyが引き継ぎ段階でEOL迎えてるとかあって、今もなお絶賛改良中だったりします。
ちなみに、この引き継ぎプロジェクトの大変さを話をしたら、DJKuraraさんに「チョコバナナと言われて渡されたものが下痢便だった」と例えられ、これ以上的確な表現は無いなぁと思いました。
この案件が巨大なためさすがに弊社だけではダメだと思っていろいろ声かけたところ、sinsai.infoでお世話になったハートビーツさんにインフラの監視をお願いしたり、前職のAppritsのメンバーや、日本Rubyの会代表の高橋さんや日本UNIXユーザ会で一緒にやってる高野さんと一緒に仕事をするようになって、大変人の縁の大切さを感じるものとなっています。
代わりに後輩は倒れましたが....

他にも相変わらずやっているARの案件は無事クリアして今年は新しいフェーズとして新しいチャレンジをすることになっています。
その関係でVirutualBoxを捨ててParalles Desktopに移行したところ、すげー快適な環境が作れて今までなんだったんだーみたいな感じになっていたりもします。
案件とは関係ないけどUbuntuがかなり早く動いてくれるのが非常に助かっていて、快適なQGIS環境が作れています。

仕事の環境と言えば、今年になって結構人が増えました。
特に面白かったのは今年の新卒で入ってくれた藤田君です。LOCAL関係の人ならご存知かと思いますが、SecHack365でWebUSBを使ってマイナンバーカードを使えるようにしたというハックでも知られています。
ちょうどOSC Tokyo Fallで紹介されて、就職先の相談をされて面白そうだなと思って紹介したら即採用となりました。
今もガンガンハックをしていて、今日なんかもラズパイの記事を投稿しています。

qiita.com

彼はすでに弊社の新しい神戸オフィスのリモートで管理できるようにこれでしているようで、秘密基地っぽさがある神戸オフィスを物理的にもハックしていて本当に面白いです。
他にも、元ボクサーで前職が消防士っていう人も入ってきていて、どういう幅の広さなのか謎な感じもあって面白いです。

仕事に関係してるOSSな活動としては今年はFOSS4G Tokyoが無く、代わりにFOSS4G Niigataとして新潟で開催することが決まり、その準備に取り掛かっています。
基調講演もOKがでてますので、今後の発表を期待してください。
あとは、OpenStreetMap Foundation Japanの方でも新しいタイルサーバの構築の方を進めていて、OpenMapTilesでのissueのやり取りからOpenStreetMap USのコミュニティの方にも顔を出したりするようになったりしています。
こっちの方はあともうちょっとバグが取れたらベータ出してもいいかなってところからずっとハマってるのでなんとかしたいなぁと思っています。

あと、去年執筆したReact Nativeの本は電子の方は売上が出てるようなんですが、やはりマイナーなのか物理の方がもうちょっと売れてくれると(出版社が)助かります。

React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~

React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~

ちなみに、React Nativeの別の本が僕の本の翌月ぐらいに出てたのに気づきました。本屋で立ち読みしたんだけど、アプローチはやっぱり異なっていてとても勉強になりました(汗

まぁ、こんな感じであいかわらず精神が病んでますががんばろうと思います。と書いてる最中にハートビーツさんから電話が来てサーバトラブルの対応していて精神的に辛くなっていますががが

六畳間の侵略者!?29巻読了

ものすごくひさびさに書くライトノベルの感想です。というか、このライトノベルについて前に書いた感想が14巻なので、実に15巻ぶりです。

ここまであまり書かなかったのはざっくりいうと本を読まなくなっていたからです。ライトノベル以外にも本もなかなか読めないっていう状態で、地図の仕事がいろいろあり、そしてまた楽しかったっていうのもあります。

ただ、去年の11月に心が死に、ライトノベルを大量に読んで凌いだ時期がありました。特に11月〜1月まではKindleで5,60冊ぐらい読んでました。

そしていろいろ読みはしたけど、今まで物理的に買っていたのに読むのが止まってたものがあって、3月に読んでなかった分を26巻から一気に買ったのが六畳間の侵略者!?です。

そのころ、ちょうど慣れないハヤカワ文庫の「順列都市」の上巻に手を出し、難解な文章に頭がこんがらがってたんですが、上巻を読み終えた後、一気に六畳間の侵略者!?に気心がいって、26巻から一気に読み始めました。

そして移動中とかを駆使して昨日29巻が読み終えたというところです。読み終えた後に運営委員会やら飲み会に楽しくやりましたが、いい意味で影響を受けて場に出れたという感じがあったので感想を書きたくなったというのが今回のエントリです。

まず、六畳間の侵略者!?の第一巻を読んだ時期が記憶に無いです。本の印象は強かったし、楽しい本だという記憶があるけど、そもそもこのシリーズ何年続いたのか記憶が曖昧です。多分10年は続いているはず。

で、何度か感想をブログに乗せてはいるけど、いろんなフラグが立ってるっていうのが初期の感想だったんですが、途中から話が壮大になりすぎてすげーカッコいいストーリーという意識が強くなってきて、だんだん求めていたものと違う系統になりすぎてきてるという感じがありました。孝太郎まじ英雄みたいなのとかがそこらへんかと。

でも、少しずつ、本当に少しずつ少女たちの思いが孝太郎に近づいていくところ、そして孝太郎もその気持ちに近づいていくところはすごく良くって、じっくりと書かれているからこそ気持ちがよいものでした。じっくりと、ねっとりとみたいな感じです。本当によいリズムです。

これが合計31(.5巻含め)巻分のものになって最後に期待した通りの優しい結末を迎えたというのが最高に嬉しいというのが本巻の感想です。最高のリズムです!

アニメから入った人にはわからないかもしれないのでとりあえず初めの5巻ずつぐらいから買い進めてみてほしいです。僕はこの作品の魅力にメロメロになっていきました。

一番言いたいのは、ここまで比較的優しいお話を、決して悲観することなく、一段落つけるところまで進めてくれた(作者もあとがきで言ってるように)奇跡の産物というのがとてもうれしくて作者に感謝をしたいという気持ちでいっぱいになりました。

そして何よりこの先の話が進むということ(すでに買ってるから知ってるけど)がありがたいなという気持ちにさせてくれます。

孝太郎の物語はアニメでは4月〜12月ぐらいだったかと思います。本作は4月からすでに二年たった3年生の4月まで進んでいます。アニメを見てない方でこの作品が好きだと思った人はもう(.5巻含め)15巻ぐらいまでは読んでほしいです。できれば29巻までも。

僕はこれから30巻を(少し読んだけど)これからスキマの時間に読み進めています。

ただ、言えるのはらぶいずおーるです。ここまでで本当に心温まるお話をありがとうと作者に感謝をいたします。

しかし、本巻読み終えた後に精神科の通院言っておけば案件で病んでた心が少し収まって、薬の量増量しなくて済んだんじゃねーのみたいな感じです。

六畳間の侵略者!? 29 (HJ文庫)

六畳間の侵略者!? 29 (HJ文庫)

「React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~」という本が出版されます

このたび、「React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~」という本をマイナビ出版から出版することになりました。

React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~

React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~

いままで2冊ほどFirefoxに関する本を共著でオライリー・ジャパンさんから出版させていただいてますが、今回は初の単著となります。

単著です...まじで大変でした。

事の発端は今年のOSC2018 Tokyo/Spring にてOpenStreetMapのブースで出店していたのですが、そこにひさびさにマイナビ出版の西田さんと会いました。
西田さんとは長い付き合いで、もともとOpenOffice.orgのコミュニティのつながりで仲良くなり、一緒にちょっとした悪さをしたりする友達でもありました。

さて、西田さんはしばらく書籍ではなく雑誌の担当をしていたんですが、最近書籍担当に戻ったということで、会ってそうそう「組長なんかネタない?」と聞かれました。

僕の専門が地図なので、地図のプログラミングとかどうかなーと最初話をしたんだけど、それだとちょっと弱いかなーっていうので、二年ほど仕事でやっているReact Nativeならどうかと話をしたところ、「それだ!」ってなってトントン拍子に書籍に出す話が進んでいきました。

そして、いきなり「8月に出版するので」となってマジカ!?ってなりながら初めていきましたl.

まずは目次考えたりしたり、当時仕事でやっていたExpoならどうかとか考えてたんだけど、いきなりExpoがiOSQRコード共有を辞めるっていう思いっきり出鼻をくじかれることになりながらも、なんとか頑張って4月から執筆を始められるようにして、とにかく書かないとという感じで書き始めていきました。

執筆にあたって、とりあえず集中できる環境がほしいというのがあり、平日の帰りに近所のルノアールによって執筆をしたり、休日は午前中に近所のルノアールに行ってから午後に新宿御苑を経由して喫茶店をはしごしながら書いていったりという感じで業務時間以外の時間にほぼ書き上げるという感じでやっていました。

ただ、途中で転機が訪れます。まぁ、軽いデスマ状態になってしまい、平日ボロボロになりながらもちょっとだけルノアール寄って書いたり、合間合間を見つけてちょっとずつ進めていくっていう感じでやっていきました。

それでもまぁ、途中サンプルプログラムの作成でドハマリしてまるごと3週間原稿が書けなかったりとかしていて、かなり焦りましたが、まぁなんとかなっちゃいました。
ちなみに、ドハマリした部分は内緒にしますので、ぜひ見つけてみてください。何も出ませんけど!

ゲラが上がってきてからもデスマの余韻がありつつもなんとか土日が使えたので頑張って仕上げました。

まぁ、その分いろいろ失敗してしまったところがあり、土日にも体調崩すことがあって、特に僕が理事をやっている日本UNIXユーザ会の総会及び併設勉強会なんかは起きたらすでに終わっている時間だったなんていう大失敗がありました。本当に申し訳ないです。

苦労話はこの辺にして、本書を軽く紹介しておきます。

本書はReact Native及びExpoを使ってスマートフォン開発を行うためのノウハウを書いた本です。

自分が苦手とするデザインについてもreact-native-elementを使ってそれなりに格好がつくデザインができるようになどいろいろ配慮しました。

また、自分が地図のエンジニアということで、地図を使ったサンプルが3つもあるのが特徴です。単純にみんなが使うであろうreact-native-maps以外にも選択肢があるよということでMapbox GL Nativeを使ったサンプルの乗っけたのは今後地図をやっていく人にとっては面白い観点かと思います。

ネットワークプログラミングの部分もサンプルがOverpass APIというOpenStreetMapのデータを取るAPIを使っていたり、その中でOpenStreetMapのデータ構造について解説したりと、かなり癖がある本になっています。

その代わり、React NavigationやReduxに関してはあまり難しいところまで書かないように注意をしました。ここらへんはどこまで書くかは難しいところですが、抑えておきたいところは書いたと思うので、あとは読者のみなさんがどう拡張していくかを考えていただければと思います。

WebViewのプログラミングについては駅すぱあと路線図APIという僕が仕事で関わった代表作といえるAPIを活用したサンプルを入れました。たくさんの人にぜひ触れてほしいAPIなので、読者の皆さんにはぜひチャレンジしてほしいと思います。基本となるReact Native側とWebViewとのデータのやり取りについてはばっちり理解できると思います。

付録のApple TVのプログラミングについてはかなり悪ノリで、ある日突然Apple TVほしい!ってなって、React Nativeでアプリが作れるのを知っていたので、いきなり買いに行ってしまいました。でも、おかげで奇妙な環境の話ができたのは個人的には満足しています。

最後に、いちばん大変だったのはサンプルプログラムをgithubにあげることでした。今回、全てのソースコードにgitのtagを打っていて、tagをたどればそのプログラムがまるごとコピーできるようにはなっています。一箇所だけコメント間違えたままアップしちゃったところはありますが、まぁ問題ないはずです。
特に原稿との整合性を取るためにtagを打つタイミングはかなり困りました。サンプルプログラムを書いて検証しながら本文を書いて進めていくという形なので、本文の先の方でおかしな点があれば一気に戻らないといけなくなるので、何度もtagを消して調整して戻してとか、最悪プログラムの最初から全部やり直してtagを打っていくとかやっていたので、心が折れそうになりました。
まぁ、これで読者がソースを読むときに省略された部分なんかも全部githubで読めるのでだいぶ理解の助けにはなるかなーと思っています。

というわけで、4月から本格的にスタートして8月にゲラチェックして月末には出るっていうすげースケジュールで出版となります。

あと、今週末のOpen Developer Conference (ODC) と ODC 内で開催されるLLイベントでは見本誌を出しますので、気になる方は会場でもチェックをしてください。LLイベントではプレゼントにも提供されるそうです。

僕はすっかり燃え尽きましたが、ODCには顔をだす予定です。二日目のLLイベントの方は前日の飲み会次第で顔を出すかなという感じです。

さて、あとは書店に出すポップを考えないと...

Georepublicに入社して7年目になりました。

smellman.hatenablog.com

本日で無事7年目に突入しました。
なんだかんだでGISの専門家っぽくなってきました。
使う方のGISはまだまだ慣れないのですが...

笑い話としては、俺はGIS上級者資格を持ってないのだけど、俺の講義を受けるとGIS上級者資格が取れるポイントが付くらしいんですよ。
俺にもくれって思いますね(何
いや、持ってても何に使うのかわからないのですががが

仕事は相変わらずRuby on RailsだったりReact Nativeだったり、コンサルティングやったりVector Tileだったりで、節操がない感じでGISをやっています。
最近はVisual Basicで書かれたASPなWeb GISRuby on Railsに移植してたりとか地獄のような仕事をしています。Dimとかすっかり忘れて変なコード規約だなーとか思ってました(何
コミュニティ活動は日本UNIXユーザー会、OpenStreetMap Foundation Japan、OSGeo財団日本支部などで活動をしていますが、いずれも楽しくやれているので比較的コミュニティ活動が充実しています。たまにはMozillaの方にも顔を出してますが、最近レアキャラになりつつあります。元組長ピンチ。

まぁ、そんなこんなで7年目も引き続き弊社をよろしくお願いいたします。
安全な案件を9月ぐらいにください。

schemaspyでRailsのDBの概要の資料を作成する

schemaspyを使ってRailsのDBの資料が簡単に作れたのでネタにしてみます。

github.com

用意するもの docker-compose 環境なんですが、これは Mac上で Graphviz が落ちるというのを回避するためにやっています。

まず docker-compose.yml を用意

version: '3'
volumes:
  pgdata:
services:
  db:
    image: "mdillon/postgis:9.6"
    volumes:
      - pgdata:/var/lib/postgresql/data
      - .:/mydata
    ports:
      - "5432:5432"
  schemaspy:
    image: "schemaspy/schemaspy:snapshot"
    volumes:
      - ./schemaspy:/output
    depends_on:
      - db

自分の場合だいたいpostgisを使っているのでimageはpostgisです。

事前準備はこんな感じ。

pg_dump -Fp -O hogehoge > hogehoge.sql
docker-compose pull
docker-compose up -d db

postgresqlが立ち上がったのでimportします。

docker-compose exec db /bin/bash
su - postgres
createuser -s foo
createdb -O foo bar
psql -U foo bar < /mydata/hogehoge.sql

インポートするときは /mydata にデータがあるようにしてるので注意してください。

あとは schemaspy の volumes に schemaspy というディレクトリを指定してるので、先に作ってから出力します。
ちなみに現状の schemaspy:snapshot は -o オプションが指定されてるので変更はできません。

mkdir schemaspy
docker-compose run schemaspy -t pgsql -host db -db qq -schemas "public" -u qq -charset utf-8 -rails -I "spatial_ref_sys|geography_columns|geometry_columns|raster_columns|raster_overviews"

これで schemaspy/index.html を開けばOK。
なかでは relation の項目でこんな図ができたりします。

f:id:smellman:20171230161522p:plain

オプションの -railsspam_id を spams などにリレーションを貼ってくれるようになります。
あと、 -I オプションで除外できるテーブルを指定できるので postgis のやつらを除外すれば rails のみの構成になります。

注意としては schemaspy は github で開発が継続されてから公式ドキュメントが追いついてないのでソースコード読んだほうが機能が見つけやすいです(ぉ
あと、schemaspy で検索すると sourceforge の方がまっさきに出てくるので渋い気持ちになります。

おまけ

snapshot ではなく schemaspy 6.0.0rc2 を動かしてみたいと思って試しに作った Dockerfile も置いておきますね。

FROM openjdk:8-slim

RUN apt-get update && apt-get install -y --no-install-recommends \
                graphviz \
&& rm -rf /var/lib/apt/lists/*

RUN mkdir /usr/src/app

COPY postgresql-42.1.4.jar /usr/src/app
COPY schemaspy-6.0.0-rc2.jar /usr/src/app

jar は各自拾ってきましょう。

OpenMapTiles/Tileserver-GL/MaputnikによるMapbox Vector TileのOSS実装環境のまとめ

本記事はOpenStreetMap Advent Calendar 2017の12月10日付けの記事となります。

昨年からosm2vectortilesを検証しだし、今年はOpenMapTilesによる検証及び実運用を進めていたので、とりあえずこの界隈をまとめようと思います。
ただ、主な内容はOpenStreetMapのMapbox Vector Tileを作ってみた その2 、あとスタイルの編集とかフォントとかからあまり変わっては居ません。

まず、今回取り扱うプログラムの簡単な説明をしたいと思います。

OpenMapTiles
OpenStreetMapのデータからMapbox Vector Tileを生成するためのプログラム群
Tileserver-GL
Mapbox Vector Tileの配信用サーバ兼レンダリングサーバ
Maputnik
Mapbox-GL Styleのエディタ

一般的なワークフローとしては、まずOpenMapTilesでMapbox Vector Tileを作成し、Tileserver-GLでMapbox Vector Tileを配信させ、MaputnikでMapbox-GL Styleを作成して、Tileserver-GLで作成したMapbox-GL Styleを配信させるという流れになります。

ここでややこしいのがTileserver-GLがタイルとスタイルを両方配信する役目を持っているということです。実際、タイルとスタイルがないとMapbox GL上で地図がレンダリングできないため、これがセットで配信できるという風に理解していただきたいです。

なお、Mapbox社は上記に該当するものを全てサービスとして提供をしていますが、使ったことがないのでわかりません(汗
なので、少なくとも本記事ではMapbox社のサービス自体と比較するというものではありません。

では、それぞれのプログラムの解説及び今年一年で変わった部分などを解説していきます。

OpenMapTiles

OpenMapTilesは前述通りOpenStreetMapのデータからMapbox Vector Tileを生成するプログラム群というものになります。
各処理をDockerコンテナで行うことで処理毎に開発、メンテナンスがされているという特長があります。

今年大きく変わったところは以下のものが挙げられます。

  • Multi Languageサポート(v3.6): デフォルトで35言語のインポートを可能にしていて、対応言語の変更も可能です。これはMapbox GL JSなどで動的に表示言語を変更するのに役に立ちます。
  • Wikidataのインポートをサポート(v3.7): これはOSMのデータよりもWikidataの方が多言語対応のデータを多く含んでいるということから、上記のMulti Languageサポートをより強力にするために取り込みをおこないます。
  • postserveの提供: 今年追加されたdockerコンテナで、ST_AsMVTを利用してPostgisのデータから直接Mapbox Vector Tileを出力するというものです。

他にもレイヤーの追加や、インポート対象のデータの更新や対象のズームレベルの変更など様々な変更が入っています。

また、この一年でインポートにかかる時間が増えました。
Thinkpad X220 (Core i5 4core, SSD 256GB, Memory 16GB)のマシンで計測したところZ14でたしか夜間ぐらいで終わっていたものが計測したところ16時間ぐらいかかるようになっています。
しかしながら、取り込みのスピードとしてはそこまで問題にならないかと思います。

また、postserveが提供されているため、OSMのデータをインポート後に直接postserveで運用するという手もあります。
実際のところpostserveの開発者はvarnishと組み合わせて配信をしているようです*1

では、とりあえずOpenMapTilesの作成手順を簡単にまとめましょう。

まず用意するのは docker-compose が動作する環境です。Ubuntu 17.10であれば、以下のようにします。

sudo apt-get install docker.io
sudo curl -L https://github.com/docker/compose/releases/download/1.17.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
sudo usermod -aG docker $USER
sudo reboot
docker run hello-world # 一般ユーザで動作確認
docker-compose -v

以上でセットアップが完了です。

あとはOpenMapTilesを取得して構築を行います。

git clone https://github.com/openmaptiles/openmaptiles.git
cd openmaptiles
git checkout -b origin/v3.7 v3.7
vim .env # QUICKSTART_MAX_ZOOM=14に変更
./quickstart.sh japan

最終的なアウトプットは data/tiles.mbtiles になります。
ここらへんは今年の初めあたりからはほぼ変わっていません。

では、続いてTileserver-GLの話をします。

Tileserver-GL

Tileserver-GLはMapbox Vector Tileの配信用サーバ兼レンダリングサーバとなります。
こちらもDockerによる運用が簡単なのがポイントです。
弊社でも現在二件ほどTileserver-GL+Dockerで運用を行っています。

大きな変更点は今年にかけてエントリーポイントのURLが変更になったことです。
詳しい情報はAvailable Endpointを参考にしてください。
このため、以前から運用中のものはURLなどの変更が必要になるのに注意が必要です。

動作方法はいろいろありますが、実運用として使うのであればdocker-composeとVarnish cacheによる運用をおすすめします。
実際にこの運用の構築手順を見ていきましょう。

まず最初に tileserver-gl を動作させるところまで持っていきます。
最初に運用をするサーバにmbtilesをコピーします。

scp data/tiles.mbtiles example.com:/tmp/japan.mbtiles

次にtileserver-glが起動をするかどうかを確認します。

mkdir ~/tiles
cp /tmp/japan.mbtiles ~/tiles
cd ~/tiles
docker pull klokantech/tileserver-gl
docker run -it -v $(pwd):/data -p 8080:80 klokantech/tileserver-gl
curl http://localhost:8080/data/v3.json

これでアクセスできたら成功です。

次に、config.jsonファイルを作成します。
現段階では最小限のファイルだけ作成します。

vim config.json
{
  "data": {
    "japan-vector": {
      "mbtiles": "japan.mbtiles"
    }
  }
}
docker run -it -v $(pwd):/data -p 8080:80 klokantech/tileserver-gl
curl http://localhost:8080/data/japan-vector.json

なお、この状態ではスタイルの配信を行っていない状態になります。

では、もう少し踏み込んでセットアップをしていきます。
今度はMapbox GL Styleが参照する font と sprite 、および style のディレクトリの用意をします。
今回は解説が面倒なのでフォントはgithubにアップロードしているものを取ってきます。

wget https://github.com/openmaptiles/fonts/releases/download/v1.1/v1.1.zip
mkdir fonts
cd fonts
unzip ../v1.1.zip
cd ..
mkdir sprites
mkdir styles

この段階で以下のような構成になっているはずです。

.
├── config.json
├── fonts
├── japan.mbtiles
├── sprites
└── styles

では、上記ディレクトリ構成をconfig.jsonに反映させます。

vim config.json
{
  "options": {
    "paths": {
      "root": "",
      "fonts": "fonts",
      "sprites": "sprites",
      "styles": "styles",
      "mbtiles": ""
    }
  },
  "styles": {
  },
  "data": {
    "japan-vector": {
      "mbtiles": "japan.mbtiles"
    }
  }
}

スタイルは後述するMaputnikで扱うので、次にこれをdocker-composeで動かせるようにしましょう。

vim docker-compose.yaml
version: '2'
services:
  varnish:
    image: eeacms/varnish
    ports:
    - "6081:6081"
    depends_on:
    - raster-tileserver
    environment:
      BACKENDS: "raster-tileserver"
      BACKENDS_PORT: "80"
      BACKENDS_PROBE_INTERVAL: "10s"
      BACKENDS_PROBE_TIMEOUT: "2s"
      DNS_ENABLED: "true"
    restart: always
  vector-tileserver:
    image: klokantech/tileserver-gl
    ports:
    - "8080:80"
    volumes:
    - .:/data
    restart: always
  raster-tileserver:
    image: klokantech/tileserver-gl
    volumes:
    - .:/data
    restart: always

上記のdocker-compose.yamlで行っているのは vector tile と raster tile の配信をわけ、raster tileの配信を Varnish Cache でまとめるというものです*2
なお、向き先の変更についてはnginxなどで行っています。
実運用の環境では以下のようにしています。

  location / {
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://localhost:8080;
  }

  location ~ ^/.*\.png {
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://localhost:6081;
  }

また、実運用時にはdocker-compose scaleを使って処理が重たい raster tile のサーバの台数を変更することで効率よくCPUを利用するようにしています。

docker-compose up -d
docker-compose scale raster-tileserver=3

では、最後にMaputnikについてお話します。

Maputnik

これも今年はじめの記事から対してあまり変わっていないというか、むしろ maputnik.com のドメイン更新を怠ったので大変なことになりました(汗

Maputnikは現在のMapbox社のエディタのクローンとして誕生したものです。
実装には React を使っていて、現在は github.io にホスティングされているものか、もしくはローカル環境で起動したものが利用できます。
今回は localhost 上で一度スタイルの設定をしたいので、 docker 環境を作ってしまいましょう*3

git clone git@github.com:maputnik/editor.git
cd editor
docker build -t maputnik:latest .
docker run -it -p 8888:8888 maputnik

あとは http://localhost:8888 にアクセスをして Open からベースとなるスタイルを選択して Export から Download を選択して JSON ファイルを保存します。

次にこのjsonファイルをtileserver-glのstylesにコピーをします。

scp ~/Downloads/ciwhogehoge.json example.com:~/tiles/styles/mydesign.json

次にサーバ上で mydesign.json を編集し、以下の場所を書き換えます。

sources.openmaptiles.url
"mbtiles:{japan-vector}"
glyphs
"{fontstack}/{range}.pbf"
sprite
"スプライト画像のpath"

なお、spriteは必要に応じて変更してください。
というのも、sprite画像自体は元々提供されているデザインと対になってデザインされているケースが多いので、その場合は必要に応じてwgetなどで取得してください。

cd sprites
wget https://raw.githubusercontent.com/lukasmartinelli/osm-liberty/gh-pages/sprites/osm-liberty.json
wget https://raw.githubusercontent.com/lukasmartinelli/osm-liberty/gh-pages/sprites/osm-liberty.png
wget https://raw.githubusercontent.com/lukasmartinelli/osm-liberty/gh-pages/sprites/osm-liberty%402x.json
wget https://raw.githubusercontent.com/lukasmartinelli/osm-liberty/gh-pages/sprites/osm-liberty%402x.png

このようにした場合は sprite の値は "osm-liberty" となります。

では、今回は osm-liberty をベースに処理をしてみます。

vim styles/mydesign.json #sources.openmaptiles.url, glyphs, spriteを編集
vim config.json
{
  "options": {
    "paths": {
      "root": "",
      "fonts": "fonts",
      "sprites": "sprites",
      "styles": "styles",
      "mbtiles": ""
    }
  },
  "styles": {
    "mydesign": {
      "style": "mydesign.json"
    }
  },
  "data": {
    "japan-vector": {
      "mbtiles": "japan.mbtiles"
    }
  }
}

これでdocker-composeを再起動するとデザインが追加され、Viewerからアクセスが可能になります。
あとはnginxなどをセットアップすれば完成です。

なお、この後デザインを変更する場合はGL Styleのリンクをダウンロードしてmaputnikで編集をすればOKです。
また、一旦httpsでアクセス可能になれば maputnik をローカルで立ち上げずに作業することができるので、デプロイは面倒ですが共同編集のようなことが可能になります。

OpenMapTiles Map Server

ここまで3つのOSSをベースに話をしてきましたが、OpenMapTiles自体に大きな動きがあり、OpenMapTilesを運営しているKlokanTechが簡単に OpenMapTiles のホスティングまでを可能にするサービスを開始しました。

それが、 OpenMapTile Map Server です。

OpenMapTiles Map Server

これは Docker のインスタンス1つでOpenMapTilesがホスティングしてるMapbox Vector Tileのダウンロードや展開を可能にする物で、 MacWindowsであれば Kitematic を使って簡単に動かすことが可能です。
詳しいことは以前雑にまとめたので適当にみてください。

speakerdeck.com

というわけでOpenMapTiles周りは商業まわりも頑張っているようです。

来年に向けてのトピック

さて、今年の分のおさらいをしたのですが、来年に向けて1つホットな話題があります。
それが、Mapbox Vector Tileを使ったNative Clientの台頭です。

まず、大きなポイントとしては Mapbox GL の React Native 対応が安定してきました。

github.com

先日、React Native Mapbox GL を使って簡単なクライアントを作成してみたのですが、期待通りの動きをしてくれました。
ただ、Mapbox GL の Native 版については起動制限などがあるのではないかという話があり、どのように回避していくのかが気になるところです。
今のところは "pk.NO_ACCESS_TOKEN" とかいうTokenを入れておくとザルなのと、そもそもTokenのチェックの仕方がandroidの方が厳しいというよくわからない実装になっているので、具体的なところはよくわかっていません。

また、Native対応という点では Mapzen の Tangram ES という OpenGL ES を使ったライブラリもあります。

github.com

これは Tangram *4という Leaflet JS 上で WebGL を使ったレンダリングをするためのライブラリの Native 版という存在です。
Mapbox GL Styleとは違い、シーンの表現に yaml を採用したものとなっていて、また対応しているベクトルタイルの種類が豊富という利点もあります。

これらのライブラリが台頭してくることにより、よりOpenMapTilesを使ったサービス展開などが望めるかもしれません。

資料など

今年はOpenMapTilesについていろいろと喋りましたので、その資料とか貼っておきます。

State of the Map 2017 発表資料(えせ英語)と動画(えせ英語)

speakerdeck.com


State of the Map 2017 - Friday Room 1 10:30 to 13:00

(やばい、State of the Mapの動画編集まだ終わってないorz)

FOSS4G Tokyo 2017 ハンズオンデイ資料

speakerdeck.com

FOSS4G Tokyo 2017 コアデイ資料

speakerdeck.com

(やばい、FOSS4G Tokyo 2017 コアデイの動画編集まだ終わってないorz)

*1:ただし、postserveは直接gzip圧縮したファイルを出力していないのに注意してください

*2:実際には png 画像だけ raster tile の方に振り分けています

*3:現在リリースされているバージョンは古いのですが、静的なWebアプリケーションなのでPythonやNodeでWebサーバを立てるだけでローカルでも動きます

*4:Tangram JSと言ったほうが良いのかもしれないが、正式にはTangramのはず