HTML5 を採用した機能を一挙紹介!

HTML5 は Web ページを構築するための HTML 規格の第 5 版として昨年の 2014 年に勧告されました。単なる HTML 規格だけではなく、Web アプリケーション プラットフォームとして、新しい機能や技術の標準化が行われており、現在では多くの Web サイトや Web アプリケーションに採用されています。ArcGIS の Web アプリケーション開発用ライブラリである ArcGIS API for JavaScript もまた HTML5 を採用した機能が多く含まれています。本記事では、HTML5 の機能ごとにそれぞれ GIS 機能として実装された例を Esri が提供するサンプル アプリを交えてご紹介していきます(一部、ESRIジャパンが提供するサンプル アプリを含みます)。

01_html5

なお、HTML5 の機能は Web ブラウザーによって対応状況が異なります。以下で紹介する機能についても同様にブラウザーの制限があります。アプリ開発に採用される際は各機能の対応状況をご確認ください。
参考:Can I use…(https://caniuse.com/)

■Canvas
Canvas は HTML 要素として採用され、動的な 2 次元ビットマップ画像の描画を実現します。
ArcGIS API for JavaScript では地図の描画方法や表現に特化した機能として扱われています。

02_canvas

ヒートマップ表示(esri/renderers/HeatmapRenderer)
点密度表示(esri/renderers/DotDensityRenderer)
ピクセル フィルタリング(esri/layers/RasterLayer)

■SVG
前出の Canvas がビットマップ画像であるのに対し、SVG は 2 次元のベクター画像を担っています。ブラウザー上でアニメーションやインタラクティブなグラフィックを実現します。
ArcGIS API for JavaScript ではクラス自体が SVG によって作成されているわけではなく、主に独自のシンボル表現やグラフィカルなアニメーション効果を開発者が必要に応じて SVG を操作して地図に組み込むことができます。

03_svg

カスタム マーカー シンボル(esri/symbols/SimpleMarkerSymbol)
CSS シンボル スタイリング(esri/layers/FeatureLayer)

■Geolocation
Geolocation は JavaScript で端末の位置情報を扱うための API として提供されています。
位置情報を扱うことから GIS との親和性が高く、ArcGIS API for JavaScript でもクラスとして実装される以前からサンプル コードが提供されていました。実装された機能としては現在地表示のためのシンプルなボタン UI が用意されています。

04_geolocation

現在地表示ボタン(esri/dijit/LocateButton)

■WebSocket
WebSocket は双方向通信用を実現するプロトコルとして提供されています。サーバー側からのプッシュ送信を可能にするため、リアルタイム性の高いデータ更新を実現します。
WebSocket は配信側のサーバーも対応している必要があるため、ArcGIS for Server のエクステンション製品である ArcGIS GeoEvent Extension for Server とセットで実現します。

05_websocket

ストリーム レイヤー(esri/layers/StreamLayer)
※本サンプルでは 80 番以外のポートを使用しているため、環境によっては正常に表示されない場合がありますのであらかじめご了承ください。

■Web Workers
Web Workers はシングルスレッドの JavaScript の処理をマルチスレッドで行うための API として提供されています。UI あるいは地図のインタラクティブな操作をブロックすることなく、長時間の処理をバックグラウンドで実行することができます。 ArcGIS API for JavaScript では現在ベータ版として実装されたジオメトリ エンジンがそれにあたり、高度な幾何学演算を非同期で行うことができます。従来サーバー側に任せていた複雑な処理を Web Workers を使ってクライアント側でのバックグラウンド実行を実現しています。サーバー側で処理を行っていた機能が今後クライアント側で行うケースが増えていくかもしれません。

06_webworkers

クライアント サイドでの幾何学計算の非同期実行(esri/geometry/geometryEngineAsync)
 (※ソースコードはこちら

以上、HTML5 を採用した機能を一挙紹介してまいりました。今回は API の基本機能として実装された例をご紹介しましたが、開発者のスキルによっては、独自に HTML5 の機能を組み合わせて GIS 機能を拡張することも可能です。また、今月末に開催される GISコミュニティフォーラムにて、本稿で紹介した HTML5 を採用した機能を利用したデモや表現方法などに加え、ArcGIS プラットフォームにおける Web アプリ作成についての最新情報をご案内いたします。

Web アプリ作成に関連するセッションは以下の通りです。

5 月 27 日(水)(プレフォーラム・セミナー)

07_sessions

5 月 29 日(金)

07_sessions2

これらの技術的なセッション以外にも、ユーザー様の事例発表やソリューション ワークショップ、ESRIジャパン製品展示ブースなど、さまざまなセッションやデモがあります。ぜひご参加ください!

GISコミュニティフォーラムについて

■関連リンク
ESRIジャパン Web サイト:
ArcGIS for Developers
ArcGIS API for JavaScript

Esri 社(米国)Web サイト:
ArcGIS for Developers
ArcGIS API for JavaScript

フォローする