ガイドv3.2 API Referencev3.1 API Reference
ガイド
  1. 開発者ガイド
  2. フレームワークと統合する
  3. HERE Maps API for Javascriptをバンドルしてパフォーマンスを最適化する

HERE Maps API for JavascriptとViteをバンドルする

 HERE Maps API for JavaScript version 3.2

Viteを使用してHERE Maps API for Javascript APIマッピングアプリをバンドルする方法を確認します。Viteは高速かつ最新のバンドラーであり、最適化された統一コードを提供してパフォーマンスを向上させ、マッピングアプリの開発とデプロイをより迅速に行えるようにします。

Viteプロジェクトを初期化する

Viteを使用し、入力に基づいてプロジェクトの基盤を作成します。

  1. プロジェクトのルートフォルダーで、コマンドプロンプトやWindows Power Shellなどのコマンドラインツールを開きます。

  2. 次の例に示すように、HEREの公開リポジトリをNPM設定に追加します。

    npm config set @here:registry https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/

  3. コマンドラインツールで、次のコマンドを入力します。

    npm create vite@latest

    このコマンドを実行すると、プロジェクトの設定ウィザードが起動し、必要に応じてベースプロジェクトのプロパティをカスタマイズできます。

  4. 各プロンプトステップで次の値を入力します。

    • Project name (プロジェクト名)：プロジェクト名 (例：vite-project) を入力します。Viteは自動的にこの名前の新しいプロジェクトフォルダーを生成します。現在のフォルダーをルートディレクトリとして使用する場合は、ドット (.) 文字を入力します。
    • Select a framework (フレームワークを選択)：Vanilla
    • Select a variant (バリアントを選択)：JavaScript
    📘

    注

    このチュートリアルでは、デモ用にHTMLファイルとJavaScript (JS) ファイルで構成される基本的なマッピングアプリを使用します。

    入力したデータに基づいて、Viteは入力したプロジェクト名に対応する名前のフォルダーにプロジェクトの基盤を作成します。

  5. 次のコマンドを入力して、Viteプロジェクトフォルダーを作業ディレクトリとして設定します。

    cd <your_project_name>

  6. 次のコマンドを入力して、HERE Maps API for Javascriptライブラリに依存関係を追加します。

    npm install @here/maps-api-for-javascript --save

  7. コマンドラインツールで、次のコマンドを入力します。

    npm run dev

  8. Webブラウザーで、URL：http://localhost:5173に移動します。これは、Viteの開発サーバーが実行しているポートに対応しています。

結果：ブラウザーウィンドウには、次の例に示すように、設定に基づいてデフォルトのプロジェクトビューが表示されます。 デフォルトのViteプロジェクトビュー

プロジェクトの一部としてHERE Mapsを表示する

ベースプロジェクトのプロパティを設定した後、マッピングアプリに固有のカスタム設定を使用するように、index.htmlおよびmain.jsファイルでデフォルトのViteプロジェクト設定を更新します。

index.htmlおよびmain.jsファイルは、Viteプロジェクトの次の場所に配置されます。

vite-project/
├── index.html
└── src/
    └── main.js
...

カスタムコードでVite設定を更新するには、次の手順を実行します。

  • index.htmlファイルのデフォルトの内容を次の設定に置き換えます。

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HERE Maps with Vite</title>
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  </head>
  <body>
    <div id="app" style="width: 100vw; height: 80vh;"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
    📘

    注

    Viteは、JavaScriptエントリーがモジュールとしてインポートされることを想定しています。

  • /src/main.jsファイルのデフォルトの内容を次のHERE Maps API for Javascriptコードに置き換えます。

    import H from '@here/maps-api-for-javascript'
import '@here/maps-api-for-javascript/bin/mapsjs-ui.css'

document.querySelector('#app').innerHTML = '<div id="mapContainer" style="height: 100%"></div>'

// Initiate and authenticate your connection to the HERE platform:
const platform = new H.service.Platform({
    apikey: 'YOUR_HERE_API_KEY'
});

// Obtain the default map types from the platform object:
const defaultLayers = platform.createDefaultLayers();

// Instantiate (and display) a map:
const map = new H.Map(
    document.getElementById("mapContainer"),
    defaultLayers.vector.normal.map, {
        zoom: 12,
        center: {
            lat: 52.51,
            lng: 13.4
        }
    });

// MapEvents enables the event system.
// The behavior variable implements default interactions for pan/zoom (also on mobile touch environments).
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Enable dynamic resizing of the map, based on the current size of the enclosing container
window.addEventListener('resize', () => map.getViewPort().resize());

// Create the default UI:
const ui = H.ui.UI.createDefault(map, defaultLayers)

結果：次の例に示すように、ブラウザーウィンドウにHERE Mapsが表示されます。

Viteバンドラーを使用したHERE Maps
📘

コードを変更すると、Viteは自動的にブラウザーを更新します。

アプリをバンドルする

  1. ビルドプロセスで不要なノイズを防ぎ、Maps APIをビルドするための特定の要件に対応するために、Viteプロジェクトディレクトリにvite.config.jsファイルを作成し、ファイルに次のコードを入力します。

    export default {
    build: {
        rollupOptions: {
            onwarn: function(message) {
                if (/mapsjs.bundle.js/.test(message) && /Use of eval/.test(message)) return;
                console.error(message);
            },
        }
    }
}

  2. 次のコマンドを入力して、buildスクリプトを呼び出します。

    npm run build

    前のコマンドを実行すると、次のアクションが実行されます。

    • 構成された設定を使用してアプリを構築します。
    • JavaScriptコードをコンパイルしてバンドルします。
    • /distディレクトリでアプリのバージョンを生成します。

まとめ

このチュートリアルでは、Viteを使用して簡単なHERE Maps API for Javascriptアプリをバンドルする方法を確認しました。プロジェクトを設定し、カスタムスクリプトを統合することで、Viteのような高速で最新のバンドラーを介してHERE Mapsに依存するWebアプリを最適化するための基礎を習得しました。

次のステップ

その他のバンドラーの詳細については、「HERE Maps API for JavascriptとWebpackおよびRollupをバンドルする」を参照してください。

14 日前の更新