情報入力に特化した Web アプリケーションをすぐに作成できます!

Esri のエンジニアによって GitHub で公開されている Web アプリケーション テンプレートは、ダウンロードしてすぐに動作する Web GIS アプリケーションとして利用することができます。開発者の方であれば、これらのテンプレートを利用することで Web GIS アプリケーションの開発工数を抑えたり、実装の参考にしたりすることができます。
以前、本ブログにてソーシャルメディアのデータを地図上に表示する機能を持つテンプレートをご紹介しましたが、今回は情報入力のためにシンプルにデザインされたジオフォーム テンプレート(geoform-template-js)をご紹介します。

00_top_2

ジオフォーム テンプレートは以下のページよりダウンロードできます。ライブ デモのリンクもありますので、ダウンロード前に実際にお試しいただけます。
GitHub:geoform-template-js
https://github.com/Esri/geoform-template-js

■ArcGIS Online と連携
Web アプリケーション テンプレートは基本的に ArcGIS Online で作成した Web マップを参照します。ArcGIS Online 上で表示したい地図情報をレイヤとして追加し、表示の方法等を設定して Web マップという形式で保存することができます。これにより、地図上に表示する情報について Web アプリケーション側で開発する必要がないため、大幅に開発工数を抑えることができます。なお、カスタマイズあるいは独自のサーバにホストする等の必要がない場合には、ArcGIS Online に組み込まれたジオフォーム テンプレートを使って簡単にアプリケーションを設定・公開することができます。

01_agol_3

■参照するデータにアプリの UI が自動対応
上記のように ArcGIS Online の Web マップを参照するため、Web アプリケーション テンプレートは W
eb マップ上に存在するレイヤの情報を自動で取り込みます。今回ご紹介するジオフォーム テンプレートであれば、情報入力の機能を持つため、レイヤの持つ属性情報を参照して、自動的に必要となる入力フォームを生成・配置してくれます。

02_ui_2

■Bootstrap と連携
ジオフォーム テンプレートは以前に本ブログにてご紹介した JavaScript オープンソース プロジェクトの記事にて取り上げました bootstrap-map-js と言われるツールを組み合わせて作成されています。bootstrap-map-js は ArcGIS API for JavaScript と Twitter 社が公開している Bootstrap というフレームワークを組み合わせてレスポンシブな Web GIS アプリケーションを作成するためのシンプルなフレームワークです。Bootstrap はレスポンシブ Web デザインを採用しているため、ジオフォーム テンプレートは参照する端末の画面サイズに合わせて自動的にレイアウトを再配置してくれます。そのため、スマートフォンやタブレットでも扱いやすいユーザ インターフェースとなっています。

03_bootstrap_2
以上、情報入力に特化したジオフォーム テンプレートの説明となりますが、情報の入力と参照を別のアプリケーションとして作成・管理する場合や、端末を選ばずにどこでも情報入力できるようなアプリケーションを作成したい場合に非常に便利なテンプレートです。
Esri が GitHub に公開しているプロジェクトを集約した Esri GitHub ではこれ以外にも多くの Web アプリケーション テンプレートを公開していますので、ぜひ一度ご参照ください。

■関連リンク
ESRIジャパン Web サイト
ArcGIS Online:http://www.esrij.com/products/arcgis/online/arcgis-online/
ArcGIS API for JavaScript:http://www.esrij.com/products/arcgis/developer/arcgis-web-mapping/arcgis-api-for-javascript/

Esri 社(米国)Web サイト
Esri GitHub:http://esri.github.io/
ArcGIS Online:http://www.esri.com/software/arcgis/arcgisonline
ArcGIS API for JavaScript:https://developers.arcgis.com/en/javascript/