JavaScript Sandboxでの開発

LarsSchmitz

<\/HEAD>

ArcGIS API for JavaScriptを使ってWebアプリケーションを作成するには、必ずしもプログラミングの知識が必要というわけではありません。多くの場合、公開されているコード例を理解し、それを調整するだけで十分です。今日は、Webアプリケーションの作成に非常に役立つツールであるSandboxについて説明します。Sandboxを使うと、サーバーやデータは変更せずに、ブラウザ上でコードを簡単かつ視覚的にテストできます。<\/P>

<\/P>

ArcGIS API for JavaScriptのページにあるコード例<\/A>を見てみましょう。例は分析、ジオコーディング、ルーティングなどテーマ別に分類されています。例の一つをクリックすると、ほとんどの場合「Explore in the Sandbox」というオプションがあります。このオプションを選択すると、Sandboxが左右二分割のビューアとして開きます。左側にコードが表示され、右側にアプリケーションが表示されます。左側でコードを変更すると、その変更が右側のアプリケーションに反映されるのが見えます。<\/P>

<\/P>

利用例：Zugspitzeに立ったら何が見える？<\/H1>Sandboxの使い方は、ある地点からの視野を計算するViewshed<\/A>というコード例で紹介します。<\/P>

<\/P>

<\/P>

<\/P>

この例のウェブサイトには、現在のコードでアプリケーションが何をしているか説明があります：地図上をクリックすると、Esriが提供するジオプロセシングサービスを使って、クリックした地点から5マイルの視距離内で見える範囲が計算されます。ドキュメント読み込み時の地図中心はカリフォルニアで、背景地図はストリートマップです。<\/P>

<\/P>

私はこの地図を自分のニーズに合わせて調整したいと思います：例えば今日アルプスでは20キロメートルの視界があるとします。今Zugspitzeに立ったらどの地域が見えるか知りたいです。Zugspitzeや地球上の任意の地点の座標を取得するには、この便利な

ArcGIS API for JavaScriptの例<\/A>を利用できます。コード変更が何をもたらすか視覚的に確認するため、Viewshed例でExplore in the Sandbox<\/A>をクリックします。<\/P>

<\/P>

<\/P>

<\/P>

まず地図中心をSan DiegoからZugspitzeに移動させます。地図中心は常に地理的X座標とY座標を含むcenterパラメータで定義されています。center: [-122.436, 37.73] を Zugspitzeの座標 center: [10.99393, 47.42118] に変更します。右上のオレンジ色ボタンRUNをクリックするとコード変更が反映され、地図中心が地図ウィンドウ内で直接変わります。背景地図をストリートマップからトポグラフィックマップに変えたい場合は basemap: "streets" を basemap: "topo" に変更します。<\/P>

<\/P>

次に視距離の変更を行います。この値は以下のコードブロック内で

公開されているジオプロセシングサービス<\/A>へ渡されます:<\/P>

vsDistance.distance = 5;<\/P>

vsDistance.units = "esriMiles";<\/P>

<\/P>

distanceを20に、unitsを "esriKilometers" に変更するだけです。当然ながら地図レイアウトも自由に変更可能です。例えば<div id=\"info\" class=\"esriSimpleSlider\">タグ内で左下テキストフィールドの内容を書き換えれば、ユーザーに何が期待できるか明確に伝えられます。<\/P>

<\/P>

<\/P>

<\/P>

アプリケーションの変更が完了し満足したら、コードをダウンロードできます。Sandbox左側にあるJavaScriptコード入りHTMLファイルは、そのまま機能するWebアプリケーションとして公開可能です。繰り返しますが、一からコードを書いてアプリケーション設計する必要はなく、既存コードへの少しの修正だけで済みました。また特別なソフトウェアも不要で、Webブラウザだけあれば十分です。<\/P>

<\/P>

その他の利用ケース <\/H1>紹介した例は単純なモデルです。そして特にアルプスでは多くの要因によって視距離は時間的・空間的に大きく変動します。しかしSandboxによる調整可能性にはほとんど制限がないことも明らかでしょう：既存ジオプロセシングサービスの地図特性や入出力パラメータだけでなく、全く異なるサービスを既存サンプルコードに組み込んで別タスクを実行させることも可能です。 <\/P><\/P>TU Dresdenで開催されたEDC開発者フォーラム「Web上のジオプロセシング」<\/A>では、このアプリケーション基盤としてカリフォルニア内ピザ店検索用Yahoo!サービス(Yahoo!-Dienst Pizzerien in Kalifornien in einem gewissen Fahrtzeit-Polygon<\/A>) を使いました。元コードへの少し修正で別検索サービス(Nominatim<\/) を利用し、大規模OpenStreetMapデータベースから徒歩圏内で到達可能なドレスデン市内学校検索アプリケーションも作成しました。<\\/p>

<\\/p>

Esri提供でJavaScriptアプリケーションへ統合可能な無料ジオメトリサービス一覧は

こちら<\\/a>です。<\\/p><\\/body><\\/html>