第２回　ビューアの制作

加工した衛星画像をブラウザ上で閲覧できるようにするため、衛星画像ビューアを制作しました。

最終的には、HTML、CSS、JavaScriptを中心とした比較的単純な構成に落ち着きました。

HTMLはページやビューアの構造、CSSはレイアウトや見た目、JavaScriptは画像の切り替えや利用者の操作に対する処理を担当します。

制作を始めた当初は、「Webサービスを作るのだからPythonやFlaskのようなサーバーサイド技術が必要なのではないか」と考えていました。

しかし、実際に必要な機能を一つずつ整理すると、衛星画像を表示すること、画像を切り替えること、拡大縮小などの操作を行うこと、ダウンロード先へ誘導することなど、多くの処理はブラウザ側のHTML、CSS、JavaScriptだけで実現できます。

ビューア自体を静的なWebページとして作成し、Apacheで公開すればよいことが分かりました。

この回では、JavaScriptの文法やコードを網羅的に解説することより、AIMMearthの衛星画像ビューアが、どのような部品を組み合わせて動いているのかを紹介します。

関連技術・キーワード：HTML / CSS / JavaScript / Web Viewer / Apache / Static Website / Satellite Imagery