codeforjapan / mapprint

紙マップ

Google マイマップ や、umap の情報を取り込んで、印刷向けに最適化して表示できるサイトのソースコードです。

https://codeforjapan.github.io/mapprint/

から実際のページを確認できます。 災害時に、近くのサポート情報を印刷した地図を避難所や市役所で配布するような用途で使われています。

おばあちゃんの手に届くまで

このサイトの特徴は、紙でマップが配布できることです。 このプロジェクトで作られたデータは、さまざまな人々の手を経て、困っているおばあちゃんのところにまで届きます。

LICENSE/ライセンス

本ソフトウェアは、MITライセンスの元提供されています。詳しくは LICENSE.txt を確認してください。
This software is released under the MIT License, see LICENSE.txt.

Help Wanted!!

Issues にあるいろいろな修正にご協力いただけると嬉しいです。 詳しくはこちらを御覧ください。

開発環境の構築方法

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn run start

# generate static project
$ yarn run generate

mapprint's Issues

SNSでシェアされた時用のOGPなどの設定

誰か！

Slack Integration

先生、Code for Japan Slack Channel の#mapprint チャンネルと接続したいっす！

新レイアウト対応

@sugi2000 さんが素敵なレイアウトを作ってくれたのですが、下記の修正が必要です。

• 印刷すると日本語が消える
• QRコードの位置がおかしい

リバート前のコミットはこちら 0a73cfb
素敵なデザインなので是非取り込みたい！

名称ではなく、レイヤーの名前をカテゴリに使う

今はlayer.featurs.properties.nameの「トイレ| ◯◯」の先頭の部分を切り出してカテゴリ名として使っているが、マイマップのレイヤー名を分類に使うようにして欲しい。
kmlの中に情報あるのでは？

オリジナル版では、地図の外周エリアにも情報表示がある

Slack チャンネル作りましたー

Code for Japan のSlack 内に、#mapprint というチャンネルを作りました。
開発に関する細かい話や、聞きたいことなどはそちらからお願いします。
下記リンクからCode for Japan Slack に加入いただき、#mapprint チャンネルに加入してください。

https://cfjslackin.herokuapp.com/

チャンネルへのダイレクトリンク

slack://channel?id=CBQAS1WH4&&team=T02FMV4EB

tableの要素を正しくする

表組みの要素をみると、

<table></table>
<tr></tr>

となっています。
おそらくjQueryのappend周りを書きかえると修正できるとおもいます。

アイコンの数字とリストの番号がずれている

印刷したときの地図の範囲が、表示範囲とずれる

CSSで調整しないと

README.md を書く

ソースコード更新したらserver側も自動で更新してほしい

bundle exec middleman server
でインスタンスを立ち上げていて、ソースコードを更新しても反映されない。
gulp build を叩いて上げると更新される

Create new map

As a user, I want to create a new map on this service.

`bundle exec middleman build` で `Error TS2304: Cannot find name 'PromiseConstructor'.`

確認した環境です

$  ruby --version; bundle --version; node --version; npm --version
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin17]
Bundler version 1.16.2
v9.11.2
6.1.0

bundle exec middleman build で Error TS2304: Cannot find name 'PromiseConstructor'. となります

$ bundle exec middleman build
== Executing: `./node_modules/gulp/bin/gulp.js build`
== External: [10:10:27] Using gulpfile ~/test/a/mapprint/gulpfile.js
== External: [10:10:27] Starting 'sass'...
== External: [10:10:27] Finished 'sass' after 6.16 ms
== External: [10:10:27] Starting 'bundle'...

events.js:165
      throw er; // Unhandled 'error' event
      ^
TypeScript error: ../../../node_modules/@types/core-js/index.d.ts(829,20): Error TS2304: Cannot find name 'PromiseConstructor'.
== External: Command failed with non-zero exit status

tsconfig.json の compilerOptions.target をes6|ES2015 にすれば通ることは確認済みです。

$ git --no-pager diff tsconfig.json
diff --git a/tsconfig.json b/tsconfig.json
index 4905e60..9fb41c2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "target": "ES2015",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     // "lib": [],                             /* Specify library files to be included in the compilation. */
     "allowJs": true,                       /* Allow javascript files to be compiled. */

$ bundle exec middleman build
== Executing: `./node_modules/gulp/bin/gulp.js build`
== External: [10:15:36] Using gulpfile ~/test/a/mapprint/gulpfile.js
== External: [10:15:36] Starting 'sass'...
== External: [10:15:36] Finished 'sass' after 6.3 ms
== External: [10:15:36] Starting 'bundle'...
== External: [10:15:39] Finished 'bundle' after 3.26 s
== External: [10:15:39] Starting 'build'...
== External: [10:15:39] Finished 'build' after 17 μs
      create  build/stylesheets/leaflet_awesome_number_markers.css
      create  build/stylesheets/site.css
      create  build/images/markers-soft.png
      create  build/images/.keep
      create  build/images/water-supply.kml
      create  build/index.html
      create  build/javascripts/bundle.js
      create  build/images/thumbnail.png
Project built successfully.

環境依存の可能性もあると思うのですがいかがでしょうか?

印刷した際に何か表示したいね

フッタ領域とかにURLや注意書きをつける？

この地図は、https://codeforjapan.github.io/mapprint/ を印刷したものです。
最新の情報はウェブサイトからお確かめください。
最終更新日：{KMLファイルのタイムスタンプ}

とか？

CI周りの強化、改善

開発プロセス、デプロイの改善、安定化を目的とし、CIによるテスト(、ワークフロー(準備だけ))、等の改善を行いたいと思います。現時点での要点は以下の通りです。
この辺りがひとまず片付いたら本件はcloseして、以後の対応は別件として扱いたいと思います。

• bundle exec middleman deploy のデプロイ先が '[email protected]:codeforjapan/mapprint.git に向いているのでまずは自分のところに向ける
• CircleCI
  • spec run lint の実行
  • ワークフローの実装
    • 但し現状では止まらずにデプロイされた方が運用上良さそうなのでそうしておく
  • フォーク先などでもCircle CIを使いやすいようにする
  • (安定して動くようであれば)ローカルでのCircle CI実行

対応の都合上段階的にPR用意することになると思いますので宜しくお願い致します。

汎用的なものにする

この仕組、尾道だけでなく、いろんな用途で使えそうですねー。観光マップとかも。
落ち着いたら考えてみたい。
サーバ用意して、KMLアップロードすると表示されるとか。
リスト側に表示するプロパティを選べるとか。

Github 上でmaster ブランチの KML ファイルを 更新したら、自動でデプロイもされてほしい

この辺の仕組みかな
https://furugomu.github.io/2016/03/15/circleci/

README も書こう

Firefoxでの印刷対応

Firefoxでは、マーカーと凡例のアイコンが印刷されないようです。

IE対応

IEでちゃんと表示されないらしい

お風呂、洗濯など情報を分ける

アイコンおよびリストの表示方法を変える

分類が複数ある時にガタガタする

<tr> 入れるタイミングを修正しないといけない

webpage titile for PDF output

ブラウザ経由でPDFプリントしようとすると、ファイル名が「給水所マップ || "Mapprint".pdf」となる。
「給水所マップ_Mapprint.pdf」あたりのほうが幸せになれるかもしれない。（特に、"||"のところ）

右側のサイトの説明、一度閉じたら二度と見えない

戻すためのボタンも必要。誰かお願いします

QRコード部分のレイアウト崩れ

@sugi2000 さんが素敵なレイアウトにしてくれましたが、
後から追加されたQRコード部分が崩れたので修正しなくてはならない

SETUP.md を書く

印刷時にアイコンが表示されない

Load data from KML

Load information form KML.
Currently, colors and icons are statically defined. It's better to get such data from KML files.

リストから分類の行を減らす

「トイレ」など、分類を表示している行があるが、スペースを取りすぎているので削除する。
凡例もついたしソートはされているので必要ない

uMap 対応

今回のユースケースには合っていませんが、uMap 対応をすると、kmlをいちいちダウンロードしてgithubに登録しなくても、地図に情報を乗せることができるはず。
UI含めて検討

https://umap.openstreetmap.fr/ja/

サイトに説明文を追加する

元データへのリンク
https://www.google.com/maps/d/u/0/viewer?mid=17BQwZDvJhDQ9OKZfakI-2PsyIaGdDtRx&ll=34.395888541511006%2C132.9701334&z=11

機能（印刷向けに最適化されてるよ！リストが絞り込まれるのがポイントだよ！自由に印刷して配って使ってね）

誰がやっているか

免責（データが古いかもしれないよ）

Github リポジトリへのリンク（Help wanted!!）

他の情報源などへのリンク

印刷に適した背景地図選択

白黒印刷でも視認性の高い地図を使いたいとのことで

source/javascripts/all.js
の12行目あたり

https://tile.cdn.mierune.co.jp/styles/normal...

のnormalのところをgrey, mono, bright, blueに変更すると、下記の表示になる

1. gray・mono・brightが比較的視認性が高いとみられる（印刷してチェック必要）

2. また、注記のありなしなどもあるので、UXでデフォをどれかに固定して背景地図選択にするかの判断が必要

---

• grey

• mono

• bright

• blue

• トークン不要のmonoだとこんな感じ

var url = "https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png";

で表示できる
Cf.
https://github.com/MIERUNE/mierune-leaflet#mierune%E5%9C%B0%E5%9B%B3%E8%A1%A8%E7%A4%BA--free%E3%83%97%E3%83%A9%E3%83%B3

凡例をつけたい

今は

風呂 marker = 'red';
シャワー marker = 'orange';
洗濯 marker = 'green';
井戸 marker = 'purple';
プール marker = 'darkpuple';

です

分類の違いが白黒印刷でもわかるようなアイコンにする

印刷して配ることを考えると、色だけでなく、分類ごとにアイコン自体の形を変えたい。

サービス名を決める

デザイン改善

印刷して使う用途なのでシンプルで良いのですが、できるだけ使いやすく、わかりやすくしたいですね

typescript 使えるようにしたい

印刷日を表示する

情報が1日1日変わってくので、「何月何日に印刷しました」というのが分かると嬉しいです！

情報が複数ページにまたがる場合の対応

印刷して配るのが主目的。複数ページになってしまう場合でも、そのまま配れるようにしたい。
position: fixed にするとヘッダやフッタができるっぽい。
地図も複数ページに別れた方が良いか、2ページ目からはリストだけでも良いかは要検討。

KML → Geojson 変換

https://github.com/mapbox/togeojson
使えば、KML ファイルだけで行ける？

Upload KML file

As a user, I want to upload KML files to carete my own map.

LICENSE.md を追加

MITでいいかな

CONTRIBUTE.md を書く

リストの方の分類をみやすく

分類自体は別の列で表示した方が良いかも。

印刷地図からモバイルサイトを見れるように、QRコードをつける

スマホ持っている人は、印刷地図からサイトにアクセスできるようになるといいですね。

印刷地図に表示されている範囲の地図( bounds )を表示できるQRコードをつけられると素晴らしい思います。

更新日とか説明とかの表示

レイヤーにトイレが追加されたので、増やす

この辺に追加すれば増えるはず

mapprint/source/javascripts/all.js

Line 13 in 367001d

grades = [

モバイルサイト対応

印刷向けだけど、モバイルでアクセスした人向けのページはあっても良いかも

背景地図にMIERUNE地図を使う

MIERUNEさんから、MIERUNE地図の無償提供のオファーをいただきました！
リファラーは
https://codeforjapan.github.io/mapprint/
で、
リーフレットへの実装はこちらを御覧ください
https://github.com/MIERUNE/mierune-leaflet

とのこと。トークンについては私に聞いてください。

テストが正常終了しません

#77 マージしてもテスト通らない状態でした.

$ npm test >/dev/null ; echo $?
npm ERR! Test failed.  See above for more details.
1

Randomized with seed 83625
Started
F.

Failures:
1) displayHelper getPrintDate formats a js Date object into a formatted printDate description
  Message:
    Expected 'このマップは 2018年01月01日11時11分 に印刷しました。' to be 'このマップは 2018年1月1日 11:11 に印刷しました。'.