takaaki024 appstakaaki024 apps
  • English
  • 日本語
  • English
  • 日本語
  • PullUpPark - 懸垂のできる公園

PullUpPark - 懸垂のできる公園

懸垂のできる鉄棒/遊具のある公園を集めています。懸垂をしよう

PullUpPark - 懸垂のできる公園

Webサイト「懸垂のできる公園リスト」で公開している公園のピンを表示するだけのアプリです。

App Store でダウンロードできます

ご興味もっていただけた場合 App Storeで「懸垂」と検索するか、下のリンクからAppStoreの紹介ページへどうぞ。

Download pull-up-park on App Store

.

..

...


関連情報

ここより下はマニアック視点でしか書いていないので、興味あるかただけ見ていただければと・・

自分で公園巡りをするために必要な機能(経路探索、写真有無によるフィルタ)をつけた、自己満足アプリですので、説明も自己満足視点で書きます。(開発の話も説明なしに出てきます)

Web 版での悩み

悩み1: ピンのサイズについて

  • Google Map での表示ではズームアウトすると、ピンが大きいまま残ってしまう
  • 後ろのピンが隠れてしまうので、ズームアウトしたときに、色分けを俯瞰できない

悩み2: ピンの色分けについて

  • 色分けは Google マイマップでは 手動なので、1種類しかできない

「写真有無」のみで色分けで、「(管理者にとって)訪問済かどうか」を表しているので、極めてユーザ目線でない基準となっている。

悩み3: ピンの表示/非表示について

  • まだ巡ってない公園だけ表示したい(=赤いピンを消したい)

悩み4: 経路の登録について

  • Google Maps では 10箇所までしか登録できない
  • ブラウザのブックマークに10件ずつ分けて登録すれば良いが、並べ替えたときなどに面倒

アプリ版での解決

解決1: ピンのサイズについて

  • Mapbox の expression 条件の機能を使うと、ピンのサイズがズームレベルに応じて変更できる
  • 枠線の有無なども変更できるので、「ズームインすると Google Map 風、ズームアウトすると色分けのみ」といった表現ができる。とても良い

解決2: ピンの色分けについて

  • これも Mapbox の expression 条件で色分けをしているので、仕組み的には、将来的に別基準での色分けも可能
  • 遊具別/メーカー別などで色分けできると楽しいかも、と思うが、そんなん要るだろうか、とも思う

解決3: ピンの表示/非表示について

  • ボタンひとつでオン/オフできるようになった。とても良い
  • これも Mapbox の expression 条件を使って、条件に合ったら非表示するだけ、といった対応

→ そのへんのサンプルは tips サイトのほうに載せておいた。(これだけあれば、同じものが作れてしまう。われながら太っ腹だと思う)

https://tips.takaaki024.com/memo/ios-app-dev-memo/mapbox/sample-park-coloring-by-status

悩み4: 経路の登録について

  • 経路をお気に入り登録できるようにした
  • 1日に巡れるのはせいぜい 50 件程度。そのぐらいの登録は大丈夫そうだ
  • 「経路登録しておいたが、新しいピンが登録された」というケースでもあとから追加できる。とても良い

→ 経路探索(これは MapKit の機能を使った)と Mapbox の連携についても tips サイトに載せておいた。(検索して出てこないので、たぶん貴重)

https://tips.takaaki024.com/memo/ios-app-dev-memo/mapbox/sample-integration-with-mapkit

アプリ作成上の悩みと解決

この項は、ただ Mapbox を褒めているだけの項目です。

パフォーマンスについて

  • SwiftUI 版の MapKit で、Annotation を使ってピンを描画しようとすると 1,000 件ぐらいで使いものにならないパフォーマンスとなる (カク、、カク、、、)と10秒単位で待たされる
  • Mapbox の Annotation で大量ピンは試していないが、Layer という仕組みを活用すると、11,000 でもヌルヌル動く。正直 信じられん(=Mapbox スゴイと思っているということ)

データの管理について

Web サイト版は、このような運用フロー

    1. Googleマイマップでピンの登録
    1. KML形式にエクスポート
    1. Markdownに整形
    1. VuePress で Web公開

アプリ版は、このような運用フロー

    1. Googleマイマップでピンの登録
    1. KML形式にエクスポート
    1. GeoJSON形式に変換
    1. Mapbox Tileset に登録
    1. アプリからは Mapbox Tileset を読んで表示

→ 3, 4 はコマンドで出来て、データ更新だけならアプリのリリースも不要

→ 運用上の手間は さほど増えずに済む。

データの同期については GeoJSON をサーバに置いて それを fetch するような方式にするか?(面倒そう) とか、Core Data on iCloud で配信するか?(遅すぎて現実的でなかった)、Firebaseか?(有料やだな) とか、いろいろ悩んだところだったので、Mapbox の仕組みに乗っかればスッキリできた。

注意点としては [4] であんまり試行錯誤すると、すぐ数千円単位の請求が来るので注意。