ガイド変更履歴HERE SDK API references
ガイド

UIコンポーネント

HERE SDKは、マッピング機能をアプリケーションへシームレスに組み込むための、包括的なUIビルディングブロックのコレクションを提供します。これらのコンポーネントは、ナビゲーション、地理情報の可視化、ユーザー操作など、多くの一般的なタスクをサポートするように設計されており、独自の設計目標に合わせてインターフェースをカスタマイズすることも可能です。また、HEREアイコンライブラリを利用することで、さらに幅広い視覚的カスタマイズが可能になります。

UIビルディングブロック

MapViewは、アプリケーション内でインタラクティブな地図を表示するためのコアコンポーネントです。マップデータのレンダリング、ユーザー操作の処理、およびさまざまなマップ要素の視覚化のための基盤を提供します。埋め込みPOIを選択し、1行のコードで複数の事前設定されたマップスキームを有効にすることができます。さらに、マップビューには、交通事案を視覚化したり、トラック制限アイコンを地図上に表示したりするためのマップフィーチャーを追加できます。

建物ハイライト機能を使用すると、地図上に3D建物を視覚化できるため、よりリアルで没入感のあるマップエクスペリエンスを提供します。この機能は、ユーザーがランドマークを識別し、都市環境における周囲の状況をよりよく理解するのに役立ちます。

HERE Style Editorを使用して地図の外観をカスタマイズします。これにより、アプリケーションのブランディングやユーザーエクスペリエンスに合わせて色、アイコン、その他のビジュアル要素を調整できます。

VisualNavigatorを使用すると、経路誘導の指示や視覚的な手がかりなど、リアルタイムの画面上のナビゲーションガイダンスにアクセスできます。VisualNavigatorはHERE SDKによって提供され、標準で次のビジュアル機能を備えています。ユーザーの現在位置、ルート上の交通状況、運転操作矢印、ルートの進行状況 (通過済みルートとも呼ばれる) を含むルート、信号機などが地図上に表示されます。運転操作パネルや制限速度インジケーターなどの追加のUIコンポーネントは、このコンポーネントには含まれていません。ただし、TruckGuidanceReroutingなどの特定のサンプルアプリでは、アプリ側の実装例を確認できます。

ナビゲーションカメラは、ターン・バイ・ターンナビ中に動的なカメラ制御を提供します。VisualNavigatorCameraBehaviorと連携し、ルート案内中に最適な視野角を提供するために、カメラ位置、傾斜、ズームを自動調整します。さまざまなデフォルトのカメラ動作が用意されており、カスタマイズも可能です。

ルートラインは、MapPolylineを使用して地図上に計画された経路を視覚化します。この視覚的な表現により、ユーザーは出発地から目的地までの経路全体を一目で把握できます。

HERE SDKは、没入感のあるナビゲーションエクスペリエンスを実現する3Dルート視覚化を可能にします。カメラを45°傾けると、地図は真上からの鳥瞰視点からリアルな3D視点へと切り替わります。ルートは3次元で動的にレンダリングされ、移動中の高低差、遠近感、リアルタイムの進行状況が表示されます。この機能により、ユーザーは周囲の状況をより理解しやすくなり、ナビゲーション中により直感的にルートを把握できます。なお、この機能はVisualNavigatorをカメラ動作と併用している場合、自動的に有効になります。

ルート矢印 (マップ矢印とも呼ばれる) は、VisualNavigatorによって地図上に表示される視覚的インジケーターで、今後の右左折や運転操作を表示します。これらの矢印は、ユーザーが今後のナビゲーションアクションに備えるのに役立ちます。また、ナビゲーションコンテキストに依存せずに視覚化できる、MapArrowsとしても使用できます。

運転指示は、ナビゲーションアクションに関するテキストと視覚的なガイダンスを提供します。再利用可能なアプリ側の操作パネルの実装例は、Reroutingサンプルアプリにあります (Navigateでのみ使用可能)。

音声指示は、音声合成 (TTS) を使用してナビゲーション中に音声ガイダンスを提供します。これにより、ドライバーは画面を見なくても経路誘導の指示を受け取ることができるため、安全性と利便性が向上します。HERE SDKにはTTSエンジンは含まれていませんが、サンプルアプリではデフォルトのプラットフォームエンジンを使用する方法を示しています。

制限速度表示には、ドライバーが法定速度を維持できるように、現在の道路の制限速度が表示されます。TruckGuidanceのサンプルアプリは、再利用可能な制限速度パネルのビルディングブロックを備えています (Navigateでのみ使用可能)。

標識には、高速道路標識や標識の詳細など、リアルな道路標識情報が表示され、ナビゲーション中のドライバーを支援します。IconProviderを使用することで、これらのアイコンを実際の道路標識に近い形でレンダリングし、ルート案内の視認性を向上させることができます。

Junction Viewは、RealisticViewsを使用して複雑な交差点やハイウェイ出口をリアルな3Dビジュアライゼーションで表示します。これらのレンダリングは、現実世界の標識や道路レイアウトを再現し、ユーザーが今後の運転操作を理解し、複雑な合流地点を自信を持ってナビゲートできるようにします。

RealisticViewWarningListenerを使用すると、道路標識や複雑な合流地点の3DビューのSVG文字列データを受け取ることができます。RealisticViewWarningイベントには、道路標識と合流地点の両ビューのSVGデータが含まれます。

IconProviderは、標識やルート案内で使用される道路標識やその他のナビゲーションアイコンを提供し、マップインターフェース全体の視覚的な一貫性を維持します。

HERE SDK Unitsは、Androidライブラリ (AAR) としてパッケージ化された、再利用可能な小さいビルディングブロックです。UIをモジュール化し、HERE SDKを使用する (マップスキームを切り替える、簡単なオーバーレイを表示するなど) 方法を示します。HERE SDK Unitsは現在、Androidでのみ使用できます。

「HERESKUnits」アプリはGitHubで入手でき、実装方法の例を見ることができます。詳細については、GitHubでサンプルアプリのREADMEをご覧ください。

HERE SDK Unitsは、最小限の労力で機能を追加し、アプリのコードを無駄なくシンプルに保てます。これはあくまでサンプルや開発のヒントとして提供されているものであり、本番環境でそのまま使用できるコンポーネントではありません。コードをニーズに合わせて調整し、本番アプリで使用する予定のユニットをレビュー、テストしてください。「HERESKUnits」サンプルアプリは、Navigateライセンスでのみ使用できます。Exploreライセンスを使用する場合は、Navigate専用APIに依存するユニットコードを削除または調整します。

ビジュアル機能とヘッドレスの使用

HERE SDK はモジュール構造であるため、マップ ビューの表示とは無関係に、検索やルート設定などのコンポーネントを柔軟に利用できます。つまり、マップを表示せずに、さまざまな機能をアプリに統合でき、別のベンダーのマップ ビューを使用することもできます。たとえば、HERE SDKの検索とルート検索の機能を活用したヘッドレスアプリケーションを構築したり、ルート検索機能を他のプロバイダーのマップと組み合わせたりできます。

参照アプリケーション

  • HERE SDK for Flutter (Navigate) のオープンソースの参照アプリケーションでは、デモアプリケーションでカスタムUIを実現するさまざまな方法が示されています。現在、このアプリはFlutterでのみ利用できます。
  • HERE WeGo Proアプリは、効率性、安全性、コンプライアンスを向上させるように設計された商用車ドライバー向けのターン・バイ・ターンナビを提供します。詳細については、「HERE WeGo Pro開発者ガイド」を参照してください。

HEREアイコンライブラリの使用方法

提供されたライセンスに基づいて、オープンソースの HERE アイコン ライブラリのアイコンを独自の商用および非商用アプリケーションで使用できます。

リポジトリのクローンは次のコマンドで作成できます。

git clone https://github.com/heremaps/here-icons.git

または、必要に応じて GitHub から個々のアセットを直接ダウンロードすることもできます。ライブラリは画像のコレクションにすぎないため、アプリ統合は提供されません。

ほとんどのアイコンは、PNG や SVG などの異なる形式や、さまざまな解像度で利用できます。

さらに、アイコンはソリッドとアウトラインの両方の形式で提供されます。


EN 日本語

HERE documentation

Find answers to your product and technical questions

Documentation

What's new

Videos

EN 日本語

HERE ドキュメント

製品や技術に関する質問の答えを見つけましょう。より多くの内容と最新の情報については、英語版をご覧ください。

ドキュメント

ダイナミックマップ

動的コンテンツ関連のAPIをアプリやサービスに活用して、ドライバーが安全・快適かつ予定どおりに目的地へ到着できるよう支援します。

地図とデータ

世界中を走行する多数のマッピング車両から得られる最新の位置情報データを活用し、精度の高い地図やカスタムレイヤーを構築できます。

最新情報

動画

(function () { const input = document.querySelector('input[data-typeahead]'); if (!input) return; // Prevent the form from submitting/navigating input.closest('form')?.addEventListener('submit', e => e.preventDefault()); input.addEventListener('input', function () { const q = this.value.trim().toLowerCase(); document.querySelectorAll('.nav-group-name').forEach(group => { let anyVisible = false; group.querySelectorAll('.nav-group-task').forEach(task => { const text = task.textContent.trim().toLowerCase(); const show = !q || text.includes(q); task.style.display = show ? '' : 'none'; if (show) anyVisible = true; }); // Hide the whole group header if nothing matches group.style.display = anyVisible || !q ? '' : 'none'; }); }); })(); (function () { function onTokenClick(event) { var link = event.target.closest('.sdk-for-ios .item .token'); if (!link) return; event.preventDefault(); console.log('token clicked', link.textContent.trim()); var item = link.closest('.item'); if (!item) return; var content = item.querySelector('.height-container'); if (!content) { console.log('no .height-container found for item', item); return; } var isHidden = window.getComputedStyle(content).display === 'none'; content.style.display = isHidden ? 'block' : 'none'; link.classList.toggle('token-open', isHidden); var href = link.getAttribute('href'); if (href) { if (history.pushState) history.pushState({}, '', href); else location.hash = href; } } function openHashTarget() { var hash = window.location.hash.slice(1); if (!hash) return; var anchor = document.querySelector('.sdk-for-ios a[name="' + hash + '"]'); if (!anchor) return; var item = anchor.closest('.item'); if (!item) return; var link = item.querySelector('.token'); var content = item.querySelector('.height-container'); if (!link || !content) return; content.style.display = 'block'; link.classList.add('token-open'); } function init() { console.log('HERE SDK accordion init'); openHashTarget(); } document.removeEventListener('click', onTokenClick); document.addEventListener('click', onTokenClick); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } window.addEventListener('hashchange', openHashTarget); window.addEventListener('pageLoad', init); })();