- OverPass APIでOpenStreetMapのテイクアウト/デリバリー施設を抽出して地図に表示するツール
- 他のテイクアウトMAPとの相違点は、OpenStreetMapの活用によるマッピング活動の促進が狙い
- OpenStreetMapにデータを集約させることで、データの分断を防ぎ将来に伝えていくことも狙い
- ITに詳しくない方向けに使い勝手を良くし、マッパーと一般ユーザーの垣根を低くすることも狙い
- HTML/CSS/JavasSriptによるフロントエンド系のWebアプリケーション
- 利用するサーバーは以下の3種類
- Webサーバー: 「みんなでテイクアウトMAP」のプログラムとデータを設置(GitHub Pages可)
- OverPass APIサーバー: OpenStreetMapのデーター抽出用(台湾/ロシア無償サーバーを利用)
- タイルサーバー: MapTiler.org を利用(地域版の規模なら無料アカウントの範囲で問題無し)
- 本リポジトリを任意の所へとforkする
- forkしたリポジトリの設定(Settings)を開き、「GitHub Pages」を有効にする
- 標準のURL(～.github.io/takeaway)でも、カスタムドメインのどちらでも動作する
- 公開したGitHub Pagesを開き、「みんなでテイクアウトMAP」が表示されることを確認する
- 404 ERRORが出ている場合、ご利用のWebブラウザキャッシュをクリアすると解消する
- MapTilerを開き、無料アカウントを作成する
- アクセス数が非常に多いサイトを構築するつもりであれば、有償プランの選択を検討する
- OverPassサーバーはボランティア運営。常に高い負荷を与えるなら独自構築も検討する
- アクセス数の多さの判断は難しいが、個人・地域コミュニティの通常利用程度は大丈夫
- Maptilerにログインし、「Maps」から好みのマップを探す or 新しいマップを作成する
- 探した or 作ったマップを開き、「Use vector style」欄のアドレスをコピーする
- 手順"1."でforkさせたリポジトリ内にある「data/local.json」ファイルを開く
- 「"style":」から始める行を探し、手順"6."でコピーした内容に置き換えて保存する
- 「"GoogleAnalytics"」から始める行を探し、"UA-～～"の文字を消して "" とする
- 手順"3."のGitHub Pagesを再読み込みし、自分が設定した地図が表示されると構築完了
- index.html: TITLE、OGP(og:から始まるサイトのメタ情報)、canonicalを自サイト版へ
- data/glot.json: 各言語翻訳ファイル。titleとownerを自サイト版へ
- data/local.json
- "SplashImage": Webサイトを開いた時の画像ファイルを指定
- "DefaultCenter": 初期座標(緯度経度)を指定
- "DefaultZoom": 初期ズームレベルを指定(1:世界全体 ～20:路地)
- "IconViewZoom": アイコンを表示し始めるズームレベルを指定(1～20)
- 都心部(店舗が大量にある所)で14以下を指定するとサーバー負荷が高いため禁止
- "TextViewZoom": 施設名を表示し始めるズームレベルを指定(1～20)
- IconViewZoomと同じか大きい数字を指定すること "EnableBookmark": trueにするとブックマーク機能 (施設に「★」をつける) がオンになる
- "menu": メニュー(右上)を押した時のリンク先一覧を設定
- "glot-model": "glot.json"ファイル内の同項目名から表示する文字列を指定
- "lonkto": リンク先のURLを指定
- "divider": メニューに横線（ディバイダー）を追加する場合は true
- data/icon.json: OpenStreetMapのタグ毎にアイコンファイルを指定
- image/thumbnail.png: OGPで指定するサムネイル画像(og:imageで指定したファイル)
- サイトをSNSなどでシェアする時に表示されるサムネイル画像として利用
- image/splash.png: スプラッシュスクリーン画像のファイル
- data/local.jsonの"SplashImage"で指定したファイル
- index.htmlのcanonical、OGPの各項目は必ずシェア前に自サイトの情報に書き換えること
- facebookでシェアするとOGPがfacebookに記憶され、更新しても反映されないことがある
- この際、og:image のURLを変えた上で、facebookシェアデバッガーでの再読み込みが必要
- facebookシェアデバッガー https://developers.facebook.com/tools/debug/
- GitHub Pagesでの公開後、強力にキャッシュが残る可能性がある
- 各ブラウザのスーパーリロードを使って確実にキャッシュをクリアさせること
- スーパーリロードでも改善しない場合、index.htmlを更新(何でもOK)して再チャレンジする
- マニュアル作成からパッチ提供、東京版サーバーを構築された maripo(Maripo GODA)氏
- パッチ提供、尼崎版サーバーを構築された tadanet3(Masayuki Tada)氏
- 草津版サーバーを構築された Code for Kusatsuのみなさま
- 播磨版サーバーを構築された Code for Harimaのみなさま
- 高槻版サーバーを構築された CoderDojo高槻のみなさま
- 作州版、淀川3区版、大阪キタエリア版、泉州版、名古屋版、苅田町版に関わられたみなさま
- お弁当のアイコン(image/bentou.svg)を作ってくれたうちの妻
- OpenStreetMap Japanのみなさま
- 感想やフィードバックを頂いたみなさま
- K.Sakanoshita (http://www.netfort.gr.jp/~saka/)
- E-mail: [email protected] / twitter: @K_Sakanoshita / facebook: K.Sakanoshita