生きてます。
「React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~」という本が出版されます
このたび、「React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~」という本をマイナビ出版から出版することになりました。
React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~
- 作者: 松澤太郎
- 出版社/メーカー: マイナビ出版
- 発売日: 2018/08/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
いままで2冊ほどFirefoxに関する本を共著でオライリー・ジャパンさんから出版させていただいてますが、今回は初の単著となります。
単著です...まじで大変でした。
事の発端は今年のOSC2018 Tokyo/Spring にてOpenStreetMapのブースで出店していたのですが、そこにひさびさにマイナビ出版の西田さんと会いました。
西田さんとは長い付き合いで、もともとOpenOffice.orgのコミュニティのつながりで仲良くなり、一緒にちょっとした悪さをしたりする友達でもありました。
さて、西田さんはしばらく書籍ではなく雑誌の担当をしていたんですが、最近書籍担当に戻ったということで、会ってそうそう「組長なんかネタない?」と聞かれました。
僕の専門が地図なので、地図のプログラミングとかどうかなーと最初話をしたんだけど、それだとちょっと弱いかなーっていうので、二年ほど仕事でやっているReact Nativeならどうかと話をしたところ、「それだ!」ってなってトントン拍子に書籍に出す話が進んでいきました。
そして、いきなり「8月に出版するので」となってマジカ!?ってなりながら初めていきましたl.
まずは目次考えたりしたり、当時仕事でやっていたExpoならどうかとか考えてたんだけど、いきなりExpoがiOSでQRコード共有を辞めるっていう思いっきり出鼻をくじかれることになりながらも、なんとか頑張って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年目になりました。
本日で無事7年目に突入しました。
なんだかんだでGISの専門家っぽくなってきました。
使う方のGISはまだまだ慣れないのですが...
笑い話としては、俺はGIS上級者資格を持ってないのだけど、俺の講義を受けるとGIS上級者資格が取れるポイントが付くらしいんですよ。
俺にもくれって思いますね(何
いや、持ってても何に使うのかわからないのですががが
仕事は相変わらずRuby on RailsだったりReact Nativeだったり、コンサルティングやったりVector Tileだったりで、節操がない感じでGISをやっています。
最近はVisual Basicで書かれたASPなWeb GISをRuby on Railsに移植してたりとか地獄のような仕事をしています。Dimとかすっかり忘れて変なコード規約だなーとか思ってました(何
コミュニティ活動は日本UNIXユーザー会、OpenStreetMap Foundation Japan、OSGeo財団日本支部などで活動をしていますが、いずれも楽しくやれているので比較的コミュニティ活動が充実しています。たまにはMozillaの方にも顔を出してますが、最近レアキャラになりつつあります。元組長ピンチ。
まぁ、そんなこんなで7年目も引き続き弊社をよろしくお願いいたします。
安全な案件を9月ぐらいにください。
schemaspyでRailsのDBの概要の資料を作成する
schemaspyを使ってRailsのDBの資料が簡単に作れたのでネタにしてみます。
用意するもの 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 の項目でこんな図ができたりします。
オプションの -rails で spam_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 です。
これは Docker のインスタンス1つでOpenMapTilesがホスティングしてるMapbox Vector Tileのダウンロードや展開を可能にする物で、 MacやWindowsであれば Kitematic を使って簡単に動かすことが可能です。
詳しいことは以前雑にまとめたので適当にみてください。
というわけでOpenMapTiles周りは商業まわりも頑張っているようです。
来年に向けてのトピック
さて、今年の分のおさらいをしたのですが、来年に向けて1つホットな話題があります。
それが、Mapbox Vector Tileを使ったNative Clientの台頭です。
まず、大きなポイントとしては Mapbox GL の React Native 対応が安定してきました。
先日、React Native Mapbox GL を使って簡単なクライアントを作成してみたのですが、期待通りの動きをしてくれました。
ただ、Mapbox GL の Native 版については起動制限などがあるのではないかという話があり、どのように回避していくのかが気になるところです。
今のところは "pk.NO_ACCESS_TOKEN" とかいうTokenを入れておくとザルなのと、そもそもTokenのチェックの仕方がandroidの方が厳しいというよくわからない実装になっているので、具体的なところはよくわかっていません。
また、Native対応という点では Mapzen の Tangram ES という OpenGL ES を使ったライブラリもあります。
これは Tangram *4という Leaflet JS 上で WebGL を使ったレンダリングをするためのライブラリの Native 版という存在です。
Mapbox GL Styleとは違い、シーンの表現に yaml を採用したものとなっていて、また対応しているベクトルタイルの種類が豊富という利点もあります。
これらのライブラリが台頭してくることにより、よりOpenMapTilesを使ったサービス展開などが望めるかもしれません。
資料など
今年はOpenMapTilesについていろいろと喋りましたので、その資料とか貼っておきます。
State of the Map 2017 発表資料(えせ英語)と動画(えせ英語)
State of the Map 2017 - Friday Room 1 10:30 to 13:00
(やばい、State of the Mapの動画編集まだ終わってないorz)
FOSS4G Tokyo 2017 ハンズオンデイ資料
FOSS4G Tokyo 2017 コアデイ資料
(やばい、FOSS4G Tokyo 2017 コアデイの動画編集まだ終わってないorz)
夏のイベント「ITコミュニティの運営を考える」、「State of the Map 2017」、「FOSS4G Tokyo 2017」の告知など
今月から再来月ぐらいにかけてスタッフをやっているイベントのラッシュが始まっていて、完全にバタバタしていますがもろもろ告知をしておきます。
jus勉強会「ITコミュニティの運営を考える」
まず、7月22日(土曜日)に僕が理事を努めている日本UNIXユーザー会(jus)主催の「ITコミュニティの運営を考える」という勉強会をサイボウズ株式会社 東京オフィスで開催します。
「ITコミュニティの運営を考える」はちょうど二年前のjus総会併設勉強会でスタートした企画で、現在はjus研究会で各地のOSCでいろんな講師の方に出ていただいてコミュニティ運営について発表やディスカッションを行ったり、jusのコミュニティソムリエ(何)によるグループディスカッションの場になっていたりしていて、今回は久々に勉強会として開催することになりました。
登壇者は以下の六名です。
- 岡田良太郎(OWASP) @okdt
- 白石俊平(TechFeed/元html5jリーダー) @Shumpei
- 須藤功平(OSS Gate) @ktou
- 関治之(Code for Japan) @hal_sk
- 日高正博(DroidKaigi/techbooster) @mhidaka
- 宮原徹(OSC事務局) @tmiyahar
今回は特に幅広いジャンル(セキュリティ、Web、OSS入門、Civic Tech、Android、文化祭)の方々に声を掛けた所、掛けた人ほぼOKを貰いかなりすごいメンバーが集結することになります。
かなり濃いメンバーなので面白いディスカッションとなると思います。
ぜひとも皆さん来てください。
ちなみに、jusでは毎年総会をやったあとに同じ会場で勉強会をやっていますが、今回も2017年度の総会のあとの勉強会となります。
特にjusの会員である必要はありませんので、日本橋散策ついでに来てくれたら*1よいかなと思います。
State of the Map 2017
次に8月18日(金曜日)から20日(日曜日)にかけて三日間、 State of the Map 2017 という OpenStreetMap の国際イベントを会津若松で開催します。
こちらは国際イベントとありますが、昨年の State of the Map Japan 2016 とは違い地域イベントではなく OpenStreetMap Foundation が主催するメインのイベントとなっています。
また、国際イベントというだけあって、英語によるプレゼンテーションやディスカッションが大半で、翻訳は特にありません(ぉ
ただし、日本人による日本語での発表もあります。
僕は今回はこのイベントでローカルチームのメンバーとして、準備を円滑に進めるための調整や、当日配布されるガイドブックの作成*2などをやっています。
また、僕自身も発表者として、まさかのトップバッターで発表することになっています。
発表内容は神戸市にあるしあわせの村*3という施設の公式アプリ、「だれでもナビ」の実装について語ります。
内容としては、 openmaptiles + tileserver-gl による OpenStreetMap のデータを Mapbox Vector Tile の配信する方法とReact Native+WebViewでの活用方法、pgRouting と 現段階では未リリースのバージョンの osm2pgrouting *4 によるルーティングAPIの作り方などの解説などをします。
問題点としては僕はこれから英語をしっかりやらないといけないのですが、準備で忙しくて手遅れ感がすでにあるということですね!
Early Birdは締め切ってしまいましたが、まだまだ参加者募集していますので、お早めに参加登録をお願いいたします!
FOSS4G 2017 Tokyo
最後に、9月15日(金曜日)と9月16日(土曜日)の二日間、都内某所(まだアナウンスできない)でFOSS4G 2017 Tokyoを開催が決定しました!
[OSGeoJapan-discuss] FOSS4G Tokyo 2017【第一報】
こちらの主催は OSGeo財団日本支部 となります。
まだアナウンスページが無いのはこれから作らないといけないからなのでいろいろお察ししていただきつつ、すでに発表者募集が始まっていますので、発表ネタがあるよ!って人は是非ご応募を、また、地図系の知識を深めたいっていう人は是非日程を開けておいてください。
なお、今年は三宅島には行きません(汗
pandocでプログラムが記述された納品用PDFを作ってみる
仕事で一人プロジェクト(開発/コンサルティング)の時にはMarkdownとpandocでお客さん向けのPDFを作っていたんですが、デフォルトのテンプレートだとプログラムやシェルの動作などを記載したときにPDFではtext wrapが動かなくて特にシェルなんかは複数行に改行したり工夫していました。ただ、これをやっていくと精神がガリガリ削られてしまいます。
また、出力したPDFもちょっと格好悪いので使えそうなテーマを探してみました。
User contributed templates · jgm/pandoc Wiki · GitHub
今回は次のテンプレートが良さそうなので使ってみたというお話です。
まず手元の環境ですが、 Homebrew 経由で入れた MacTex と pandoc となります。OSなどの違いは各自汲み取ってください。
とりあえず、導入をしてみます。
mkdir -p ~/.pandoc/templates/ cd ~/.pandoc/templates/ wget https://raw.githubusercontent.com/Wandmalfarbe/pandoc-latex-template/master/eisvogel.latex
あとは pandoc に --template eisvogel というオプションを追加すればよいのですが、単純にこれだけだとうまく動きません。
まず以下のような markdown があるとして、適当に処理してみます。
# openmaptilesでベクトルタイルの作成 本ドキュメントはopenmaptilesを利用してベクトルタイルのバイナリ(.mbtile形式)を作成するところまでを解説します。 ## ターゲット ### ハードウェア - Ubuntu 16.10 or Ubuntu 17.04 - 64bit CPU - 4GBメモリ以上 - 30GB以上のディスクスペース
pandoc -f markdown_github test.md -o test.pdf --from markdown --template eisvogel --listings
すると次のようなエラーになります。
! Package inputenc Error: Unicode char テ (U+30C6) (inputenc) not set up for use with LaTeX. See the inputenc package documentation for explanation. Type H <return> for immediate help. ... l.308 \section{テストドキュメント} Try running pandoc with --latex-engine=xelatex. pandoc: Error producing PDF
メッセージに沿って xelatex を使うようにします。
pandoc -f markdown_github test.md -o test.pdf --from markdown --template eisvogel --listings --latex-engine=xelatex
これでうまく行ったかと思ったら、日本語フォントが出てきません。
これを解決するには CJKmainfont のパラメータを与える必要があります。今回は完全な個人的な趣味で IPAexGothic を使います。
pandoc -f markdown_github test.md -o test.pdf --from markdown --template eisvogel --listings --latex-engine=xelatex -V CJKmainfont=IPAexGothic
これで日本語もばっちり表示されるようになりました。
ただ、 usage を見るとYAMLでタイトルを拡張できるようです。なぜYAMLを閉じるのが ... なのかはわかりませんが、とりあえず markdown に組み込んでみます。
最終的なサンプルは以下のようにしました*1。
--- title: "ベクトルタイルの作成方法" author: [Taro Matsuzawa taro@georepublic.co.jp] date: \today ... # テストドキュメント 本ドキュメントはopenmaptilesを利用してベクトルタイルのバイナリ(.mbtile形式)を作成するところまでを解説します。 ## ターゲット ### ハードウェア - Ubuntu 16.10 or Ubuntu 17.04 - 64bit CPU - 4GBメモリ以上 - 30GB以上のディスクスペース ### ソフトウェア - Docker > 1.11.0 - Docker Compose > 1.7.1 - git - make - bc ## セットアップ ### utility openmaptiles の ```quickstart.sh``` の実行に必要なコマンドをインストールします。 ```bash sudo apt-get install git make bc ``` ### Docker apt-getコマンドでdockerをインストールし、サービスを起動します。 ```bash sudo apt-get install docker.io sudo service docker start ``` ### Docker Compose #### Ubuntu 16.10 Ubuntu 16.10ではパッケージで提供しているバージョンが古いため、手動でインストールをします。 ```bash sudo su - curl -L https://github.com/docker/compose/releases/download/1.10.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose chmod +x /usr/local/bin/docker-compose exit ``` #### Ubuntu 17.04 Ubuntu 17.04ではパッケージが提供してるものを利用します。 ```bash sudo apt-get install docker-compose ```
これで出力してみましょう。
pandoc -f markdown_github test.md -o test.pdf --from markdown --template eisvogel --listings --latex-engine=xelatex -V CJKmainfont=IPAexGothic
これできれいになったと思ったのですが、よく見ると日付がドイツ語になっています。これはデフォルトがドイツ語になっているためなので、 README を参考にして英語にしてみましょう*2。
pandoc -f markdown_github test.md -o test.pdf --from markdown --template eisvogel --listings --latex-engine=xelatex -V CJKmainfont=IPAexGothic -V lang=en-US
これでうまくいきました。なお、日付のフォーマットを変更するのであれば --metadata date="`date +%Y-%m-%d`" などとしてdateの値を与えるとうまくいきます。
pandoc -f markdown_github test.md -o test.pdf --from markdown --template eisvogel --listings --latex-engine=xelatex -V CJKmainfont=IPAexGothic -V lang=en-US --metadata date="`date +%Y-%m-%d`"
ちなみに、僕の場合は最初にTable of Contentsをつけるので --toc オプションも追加します。この --toc オプションも言語設定によって影響があるので、このテンプレートを使う場合は -V lang=en-US をつけておくのがおすすめです。
なお、全て試していないのですが text wrap が有効なのは --listings オプションを追加したときで、他の Syntax Highlighting を設定するとうまく動きません。
というかそもそも --listings をつければ最初の text wrap の問題解決していたような気がするんだけど考えるのをやめました。
幸せになればいいんだよ!!!!なりてえよ!!!!
あ、ついでですが、これあくまでPDF向きなのでこのmarkdownをhtmlに出力すると変になるから気をつけてね!
*1:お客さんに怒られないようちょっと構成を変えてる
*2:http://tug.ctan.org/language/hyph-utf8/doc/generic/hyph-utf8/hyphenation.pdf によると日本語はサポートされていないようです。