2025年12月12日 福岡Tech LT大忘年会 モバイル枠でデモしたアプリのソースです
-
LTタイトル「WebサーバをiOSアプリに内蔵して完全オフライン地図」
-
イベント詳細 https://moneyforward.connpass.com/event/375276/
-
スライド動画
-
1ページあたり5秒で遷移
-
当日流したデモ動画は次項に切り出し
20251212_Fukuoka_slide_640x444.mp4
-
-
当日流したデモ動画
-
九州北部のズームレベル14までの地図データをアプリに内蔵した例 (ファイルサイズ 約190MB)
-
iPad第10世代実機での動作を録画
-
左がアプリ内蔵地図、右が通常のオンライン地図
-
左側でズーム・移動すると右側の地図も連動
-
ネット接続状態で徐々にズームイン → 途中でネットから切断 → 左のオフライン地図だけ精細に表示
demo1_Fukuoka_640x444.mp4
-
-
当日準備したけど割愛したデモ動画
-
地図データと端末は前項と同じ、モバイル回線がつながりにくい地域で録画
-
ネット切断状態で徐々に熊本市付近にズームイン → 左のオフライン地図は精細に表示 → 途中でネットに接続 → 右側の通常地図はデータ読み込みまで一定の時間がかかる
demo2_Kumamoto_640x444.mp4
-
-
ビルド環境
-
macOS 15.6 (24G84)
-
Xcode 26.2 (17C52)
-
-
動作確認環境
-
iOS Simulator : iPad (A16), iPad OS 26.2
-
実機 : iPad (10th), iPad OS 18.7.1
-
-
利用ライブラリ
-
Swifter 1.5.0
-
MapLibre GL JS 5.6.2
-
-
利用データ
-
フォント : Noto Sans Regular
- mapbox-gl-js-offline-example のグリフセットを利用
-
スプライト : tile.openstreetmap.jp > STYLES > maptiler-basic-ja
-
地図スタイル : 上記スタイル (デモ用に一部修正して利用)
-
-
(1) 本リポジトリのソースをクローン
-
(2) 地図データの準備
-
maptiler > North Kyushu から OpenStreetMap vector tiles をダウンロード (利用形態によっては有償になる等の制約があります)
-
ダウンロードした
.mbtilesをMVT形式に変換- 使えるツールは多数ありますが Node.js 環境なら mbtiles2pbf が便利です。というか今回のデモに使うため Fork and update しました
-
変換後は
01...14のフォルダになっているはず → 本リポジトリのソースのSwifterOfflineMaps/www.bundle.mvtの下にtilesフォルダを作り、その中に置く
-
-
(3) Xcodeでプロジェクトを開き、ビルド
-
ターゲットの
TeamやBundle Identifier等は各自で設定 -
ライブラリは Swift Package Manager で自動的に読み込まれる
-
-
(4) ビルドと起動に成功すれば、下記の画面が表示されるはず
-
LTや前掲のデモ動画では左右の違いを目立たせるため左側 (アプリ内蔵地図) でデータのない部分を非表示にしていましたが、現在のソースではしていません
-
従ってネットに接続した状態では、アプリ起動時の左右の表示がほぼ同じです
-
-
不具合等の連絡・問合せはプロフィールのe-mailへお願いします
-
-
これが無ければ出来なかった
-
PMTilesを使うWeb地図をSwifterでアプリに内蔵したもの -
ただしフォント・スプライトは未対応
-
地図だけでなく
Swifterの細かい利用方法 (CORS対応等) も貴重な情報
-
-
(2) mapbox-gl-js-offline-example
-
Webベースの、localhostで完結する意味でのオフライン地図
-
これをiOSアプリに内蔵すればいいのでは？ という着想につながった
-
-
MVT形式の代わりにPMTilesを使えるように -
オフライン地図の不具合調査・改修 (ズームインしても精細なタイルが表示されない場合がある等)
-
maplibre-native-offline-demo との統合
- 上記でローカル化できなかったフォント・スプライトのみ
Swifterなどアプリ内蔵Webサーバが送出するようにし、WKWebViewベースでなくMapLibre Nativeの地図として完全オフラインを実現したい🔥
- 上記でローカル化できなかったフォント・スプライトのみ
以上