watchOSで地図を完成させるまでに6年
(david-smith.org)- Pedometer++のwatchOS地図機能は、Apple Watchで実現可能な最高の地図体験を目指して6年以上磨き込まれ、Pedometer++ 8のリリースで重要な到達点に達した
- 初期の試みはサーバーで地図を生成してApple Watchに表示する方式だったが、ワークアウトデータを毎回往復転送する必要があり、ナビゲーションや日常利用には実用的でなく、オフラインでも動作できなかった
- watchOSで必要な制御を得るため、SwiftUIネイティブの地図レンダリングエンジンを自作し、2021年にはタイルベース地図を安定してレンダリングし、位置情報をオーバーレイできるようになった
- watchOS 26とLiquid Glassに合わせるため、Andy Allenと新しいベースマップを制作し、視覚的な複雑さを減らし、コントラストと彩度を高めて、ガラス状の要素の下でも読みやすくした
- Rafa Condeと協業し、指標を左上にレイヤー表示し、地図を縦スタックの最上部ページに置く新しいレイアウトを作成、数百マイルの実地検証を経てPedometer++ 8の最終デザインに反映された
Pedometer++のwatchOS地図の歩み
- 山や屋外で道に迷わないための重要な習慣は、移動中に現在地を非常に頻繁に確認することであり、手首上の地図はそのための最良の方法として機能する
- Apple Watch発売当初から手首上で使える優れた地図を求めていたが、現実的にはwatchOS 6でSwiftUIが導入され、「本物の」アプリを作れるようになって初めて可能性が生まれた
- 初期のApple Watchは画面が小さく、プロセッサも遅かったため、望む水準に達するのは難しく、Pedometer++最初の地図の試みはサーバーで地図を生成する方式だった
- このサーバー生成方式は、関連するワークアウトデータを毎回往復転送しなければ画面を更新できず、アイデア検証には有用だったものの、ナビゲーションや日常的な利用には実用的でなく、オフラインでも動作できなかった
SwiftUIベースのカスタム地図エンジン
- watchOSで前進するにはより低レベルの制御が必要だったため、完全にSwiftUIネイティブな地図レンダリングエンジンを自ら構築した
- SwiftUIは当時watchOSがサポートする選択肢であり、SwiftUIしか対応していないウィジェットに地図を組み込むうえでも役立った
- 2021年にはwatchOSで地図を安定かつ高性能にレンダリングできる水準に到達した
- このエンジンはタイルベース地図をレンダリングし、その上に位置情報をオーバーレイできる
watchOS画面設計の制約
- watchOSアプリの設計は、小さな画面と片手操作という制約のため、面白い一方で歯がゆい課題だった
- 目標は、ユーザーが地図を読みナビゲーションに活用しながら、ワークアウト関連情報にもアクセスできるようにすることだった
- さまざまな設計を試した末、しばらくは左上のボタンで地図画面と指標画面を切り替えるモーダル方式を採用した
- この方式では、一方の画面では地図を自由に移動・拡大・縮小でき、もう一方の画面ではwatchOSの一般的なタブページインターフェースで指標と操作を提供できた
- しかしこの設計は妥協のように感じられ、地図をインタラクティブにするにはスワイプが必要なUI構造の中に地図を入れるのが難しかった
- Apple Watchの画面が大きくなるにつれ、地図を有用にするために専用スペースを強く分離する必要は薄れていったようだ
- その後、指標を画面下部に配置する案も検討したが、長時間の外出やナビゲーション中心ではないワークアウトでは別の限界が生じた
- 複数の設計案に共通していたのは、アプリが一度に固定されたフィールドの集合しか表示できないという制約だった
- インターフェースをユーザーが構成できるようにすることも可能だったが、watchOSの設計では数秒以上かかる操作は避けるべきであり、ユーザー設定は本質的に煩雑なため適していなかった
Liquid Glassに合わせた新しい地図制作
- アプリ構造の設計に悩み続けていた時期に、AppleがwatchOS 26とLiquid Glassを発表した
- Liquid Glassの中核となる設計要素は、要素を幾重にも重ねるレイヤリングであり、相性の良い色の種類も重要だった
- 従来はアプリのベースマップにThunderforest Outdoorsを使っており、含まれるコンテンツは良かったものの、ガラス状の要素を重ねたときにLiquid Glassにはあまり適していなかった
- 地図制作者のAndy Allenとともに、Liquid Glassで見やすいまったく新しいベースマップを制作した
- 新しい地図では視覚的な複雑さを減らし、要素のコントラストを高め、ガラスの下で濁ってつぶれて見えないよう地図要素の彩度を上げた
- この作業によって、地図タイルのダークモード版も作れるようになった
- ダークモードはiOSでも有用だが、watchOSでは特に効果が大きく、腕を伸ばした距離からでも非常に読みやすい地図を目標に調整した
- 結果としてwatchOSに適した地図はできたが、その水準に見合うアプリ設計はまだ不足していた
Rafa Condeとの新レイアウト
- 設計の停滞を打破するため、デザイナーのRafa Condeと協業した
- 複数の代替レイアウトの中から、指標を左上にレイヤー表示し、地図を縦スタックの最上部ページに置く設計が最終方針になった
- この設計では、まず地図をタップして探索モードに入るようにし、インタラクティブ地図の問題に対処した
- 全体コンセプトが固まった後、実際のアプリを作り、細部を磨き込む作業が続いた
- Rafaのコンセプトは素早く動くプロトタイプとして実装され、数百マイル歩きながら現地で検証された
- その後、フォントやより繊細なデザイン選択を磨き上げ、Pedometer++ 8に含まれる最終デザインに到達した
- 最終画面は読みやすく有用で、watchOSプラットフォームに自然に適合しつつ、新しく独自性のあるデザインとしてまとめられた
MapKitを使わなかった理由
- watchOS向けApple MapKitが登場する以前からカスタム地図の開発は進んでおり、MapKitではなく自前実装にしたのは、Pedometer++に必要な構成可能性と実用性が不足していたためだった
- MapKitは基本用途には優れているが、Pedometer++が提供したい水準の制御はできなかった
- watchOSのMapKitは常にダークモードで表示され、デフォルトとしては良いかもしれないが、アクセシビリティとユーザー選択の面で制約になるため、ユーザーが選べるべきだった
- watchOSのMapKitは時間とともにできることが増えたが、アニメーションとオーバーレイの面では依然として制限があった
- MapKitの地形等高線やトレイル表示範囲は改善されつつあるが、MapKitの地図がほとんど空白に見える場所でも、より豊富な詳細情報が必要な地点は多かった
- 例として、スコットランドでお気に入りのハイキングコース入口におけるカスタム地図とMapKitの違いを比較している
2件のコメント
登山はしないのに、アプリに注いだ努力はものすごいですね
地図制作者を雇ったとは..
Hacker Newsのコメント
Apple Watch に Apple 純正の登山・地形図がないのは、大きな失敗に見える。最も高価な“探検家向け”の Watch Ultra にもなく、GPX の取り込みのような機能は夢に近い
結局はライフスタイル機器だとしても、それでも残念
進化の過程が素晴らしく、中央揃えや対称 UI のような デザイン慣習から外れたときに何が作れるかを見るのも興味深い。Apple Watch が欲しくなるほどだ
記事のスクリーンショットには、スコットランドでお気に入りの短い散歩コースの 1 つである Glen Coe の Hidden Valley が見える
ただ、その谷の下にある家にまつわる記憶はあまり愉快ではない。以前は車で通りかかるたびに、山の間の人里離れた場所にあっていつも閉ざされていたその家を夢見るように眺め、あんな場所に住めたらどれほど特別だろうと考えていた。登山道の駐車場は道を数百メートル上がったところにあった
数年後、Louis Theroux のドキュメンタリーでその家に気づいたのだが、所有者である TV タレント Jimmy Saville と一緒にそこを訪れる内容だった。その後オーストラリアに戻ってから、Saville が死後に英国で最も悪名高い児童・性犯罪者の 1 人だったことが明らかになり、本当に恐ろしかった。スクリーンショットの地図上部には、その小屋の名前と輪郭が実際に見えている
気になって調べてみたところ、登山道のような Apple Maps にない詳細情報を入れるために、地図製作者を雇って大きくて見やすいカスタム地図画像を作ったようだ
そのため、動的にレンダリングされる Apple Maps とは違い、基本的には画像タイルを表示する方式になっている。より見やすく詳細な地図を作れる一方で、ズーム段階ごとの別ダウンロード、回転、更新可能性といった点には影響する
元の地図プロバイダはベクタータイルとラスタタイルの両方のサービスを提供している: https://www.thunderforest.com/maps/outdoors/
一般的な方法は、ベクタータイルサービスとスタイル定義をそのまま使うか、必要ならラスタタイルを生成することだ
Pedometer++ ユーザーとして、David が何年にもわたって維持してきた細部へのこだわりには驚かされる。アプリの進化は本当にすごい
以前 Watchsmith に注力したおかげで、実質的にウィジェット分野の世界的専門家になり、その結果 Widgetsmith で大成功した流れも見事だった。成功して当然の人が成功した例だと思う
時計では 静的タイル が正しい選択だ。制約の大きい機器で動的レンダリングをしたことがあるが、移動や拡大・縮小が毎フレームのガベージコレクションの停止に食われてしまった
watchOS の Apple Maps はかなり良いが、たいてい自転車に乗ってルートを設定し、3 分ほどすると「ワークアウト中ですか？」画面に上書きされて、停止してオフにするまで地図が見られなくなる
あの画面は全画面を占有するのではなく通知に変えるべきだし、あるいは時間が経ったら静かに記録だけ開始すべきだと思う
Apple でこれを開発している人たちがいるなら、きっとこの問題を経験しているはずなのに不思議だ
このアプリの地図が画面を占有し続けられるなら、自分にとっては キラー機能 になりそうだ。ただ、App Store のページをざっと見た限りでは、どの機能がサブスクリプションの対象でどれがそうでないのかが明確ではなく、設定を全部終えるまで知らせないアプリは嫌いなので、結局は参考用にワークアウトを手動で開始するのを覚えておこうとすると思う