JavaScript でロード画面を実装する

はじめに

アプリケーションを作成していると、どうしても処理に時間がかかる機能ができてしまうことがあります。そのような場合、ユーザーに処理中であることを示すためのロード画面を実装することがあります。ArcGIS Maps SDK for JavaScript でもレイヤーの描画や Web ツール (ジオプロセシングサービス) の実行などで結果が得られるまでに時間がかかってしまう場合があります。ロード画面を実装する場合、「処理の開始」と「処理の終了」をプログラム上で取得できる必要がありますが、ArcGIS Maps SDK for JavaScript ではどのような方法が考えられるでしょうか。

本記事では ArcGIS Maps SDK for JavaScript アプリケーションでロード画面の実装に必要な、「処理の開始」と「処理の終了」を取得する方法をご紹介します。

Promise オブジェクト

ArcGIS Maps SDK for JavaScript のクラスに用意されたメソッドの多くは戻り値として Promise オブジェクトが返します。Promise オブジェクトは JavaScript による非同期処理の状態を監視できるオブジェクトで、then() メソッドを使用して処理の終了を取得できます。

以下は、FeatureLayer.queryFeatures() メソッドを使用してフィーチャの検索を行った例です。

// フィーチャの検索
console.log("フィーチャの検索開始");

featureLayer.queryFeatures(query)
  .then(result => {
    console.log("フィーチャの検索終了");
  });

レイヤーの描画

レイヤーの描画処理の状況は各レイヤークラスの LayerView から確認できます。LayerView は View 上に描画されたレイヤーの情報を管理しているクラスで、LayerView の updating プロパティを使用することで描画処理の状況を取得できます。

以下は、FeatureLayer クラスを対象に LayerView を取得しています。

// FeatureLayer の LayerView を取得
featureLayer.on("layerview-create", evt => {

  const layerView = evt.layerView;

  // LayerView の updating プロパティを監視
  reactiveUtils.watch(
    () => layerView.updating,
    () => {

    if(layerView.updating === true){
      console.log("レイヤーの描画開始");
    } else {
      console.log("レイヤーの描画終了");
    }

  });
});

Web ツールの処理

Web ツールでは元となったジオプロセシングサービスの設定に応じて実行モードが「同期」か「非同期」に分けられます。ArcGIS Maps SDK for JavaScript では geoprocessor オブジェクトを使用して Web ツールを実行できますが、実行モードが同期の場合は geoprocessor.execute() メソッド、非同期の場合は geoprocessor.submitJob() メソッドと使い分ける必要がある点に注意が必要です。

いずれの実行モードの場合も Web ツールを実行するメソッドの呼び出しと実行の終了を取得することでロード画面の実装に必要な情報が得られます。

同期実行の場合：
Promise オブジェクトとして結果を取得できます。

// Web ツールの実行開始
console.log("Web ツールの実行開始");

geoprocessor.execute(
  "<ジオプロセシング サービス タスクの URL>",
  params
)
  .then(result => {
    // Web ツールの実行終了
    console.log("Web ツールの実行終了");
  });

非同期実行の場合：
Promise オブジェクトとして処理毎の ID を含む JobInfo が返され、JobInfo を使用して実行の終了を取得します。

// Web ツールの実行開始
console.log("Web ツールの実行開始")

geoprocessor.submitJob(
  "<ジオプロセシング サービス タスクの URL>",
  params
)
  .then(jobInfo => {
    jobInfo.waitForJobCompletion({
      interval:5000
    })
      .then(result => {
        // Web ツールの実行完了
        console.log("Web ツールの実行完了");
      });

  });

(応用) HTTP リクエスト

ArcGIS Maps SDK for JavaScript を使用してアプリケーションを開発する場合、これまでに紹介してきた場面以外にも、ロード画面を実装する必要のあるケースは様々に考えられます。また ArcGIS でないオープンソースのライブラリやサードパーティのサービスと連携したアプリケーションを作成するようなケースもあるでしょう。

特に HTTP リクエストで実行される処理であれば、config オブジェクトの request プロパティを使用することで、ロード画面の実装に必要な情報を取得できます。config オブジェクトはアプリケーション全般の設定を司るオブジェクトで、request プロパティの interceptors を使用することで、任意の URL に対して行われるリクエストの発行前とレスポンスの取得時に処理を組み込むことができます。

// config を使用して、FeatureLayer に対する query リクエストを取得
esriConfig.request.interceptors.push({
  urls:featureLayer.url + "/0/query",
  before:(params) => {
    console.log("リクエスト発行前");
  },
  after:(response) => {
    console.log("レスポンス取得後");
  }
});

ロード画面の実装

これまではロード画面の実装に必要な情報を取得する方法について見てきましたが、肝心のロード画面についてはどのように配置できるでしょうか。もちろん、独自に DOM 要素を作成しロード画面を表示しても良いですが、ArcGIS では Calcite Design System という UI コンポーネントを使用できます。Calcite Design System は ArcGIS の標準的な UI を Web コンポーネントとして提供しており、カスタムの HTML タグを使用するのみで簡単に UI を構築できます。ロード画面についても Loader として用意されているので、ぜひ活用してみてください。

まとめ

本記事では ArcGIS Maps SDK for JavaScript アプリケーションでロード画面の実装に必要な「処理の開始」と「処理の終了」を取得する方法について、LayerView の活用や config による HTTP リクエストの監視など様々なアプローチをご紹介しました。ユーザーに操作されるアプリケーションはできるだけ軽量なものが望ましいですが、時間のかかる処理が行われてしまうようなケースではロード画面の表示は良好なユーザーエクスペリエンスにとって非常に重要です。ぜひ、これらの方法を参考に、アプリケーションの実装を検討してみてください。

JavaScript でロード画面を実装する