Skip to content

codeforkusatsu/takeaway

 
 

Repository files navigation

みんなでテイクアウトMAP <開発版>

概要と目的

  • OverPass APIでOpenStreetMapのテイクアウト/デリバリー施設を抽出して地図に表示するツール
  • 他のテイクアウトMAPとの相違点は、OpenStreetMapの活用によるマッピング活動の促進が狙い
  • OpenStreetMapにデータを集約させることで、データの分断を防ぎ将来に伝えていくことも狙い
  • ITに詳しくない方向けに使い勝手を良くし、マッパーと一般ユーザーの垣根を低くすることも狙い

システム環境

  • HTML/CSS/JavasSriptによるフロントエンド系のWebアプリケーション
  • 利用するサーバーは以下の3種類
    • Webサーバー: 「みんなでテイクアウトMAP」のプログラムとデータを設置(GitHub Pages可)
    • OverPass APIサーバー: OpenStreetMapのデーター抽出用(台湾/ロシア無償サーバーを利用)
    • タイルサーバー: MapTiler.org を利用(地域版の規模なら無料アカウントの範囲で問題無し)

構築方法

  1. 本リポジトリを任意の所へとforkする
  2. forkしたリポジトリの設定(Settings)を開き、「GitHub Pages」を有効にする
    • 標準のURL(~.github.io/takeaway)でも、カスタムドメインのどちらでも動作する
  3. 公開したGitHub Pagesを開き、「みんなでテイクアウトMAP」が表示されることを確認する
    • 404 ERRORが出ている場合、ご利用のWebブラウザキャッシュをクリアすると解消する
  4. MapTilerを開き、無料アカウントを作成する
    • アクセス数が非常に多いサイトを構築するつもりであれば、有償プランの選択を検討する
    • OverPassサーバーはボランティア運営。常に高い負荷を与えるなら独自構築も検討する
    • アクセス数の多さの判断は難しいが、個人・地域コミュニティの通常利用程度は大丈夫
  5. Maptilerにログインし、「Maps」から好みのマップを探す or 新しいマップを作成する
  6. 探した or 作ったマップを開き、「Use vector style」欄のアドレスをコピーする
  7. 手順"1."でforkさせたリポジトリ内にある「data/local.json」ファイルを開く
  8. 「"style":」から始める行を探し、手順"6."でコピーした内容に置き換えて保存する
  9. 「"GoogleAnalytics"」から始める行を探し、"UA-~~"の文字を消して "" とする
  10. 手順"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のみなさま
  • 感想やフィードバックを頂いたみなさま

連絡先

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 76.7%
  • HTML 18.1%
  • CSS 5.2%