HTML5 Canvasによる三次元図形描画とデータ管理方式－フロアプラン管理アプリケーション

摘要

Webページ上の画面にHTML5のCanvas機能を用いて描画された画像とデータ管理サーバを連携させ，データをビジュアルに三次元表現して管理できる基盤技術を確立する．フロアプランと商品·物品管理を対応付けるようなフロアプランアプリケーションが対象であり，これまでに確立した二次元レイアウトに三次元方向の情報を加えたデータ構造を考案している．三次元的表現のために，現在位置から消失点に向けて斜め方向を含む多角形を描画しユーザ視点から縦方向各段の棚を把握できるようにしている．二次元フロアプランの各桝目に，任意の段数の棚を設定できるよう各段のkey値を区切り符号により連結し，実行時にはそれを分割して各段の棚情報にマッピングさせる．HTMLによる画面操作の際，必要に応じてAjaxによりデータ管理サーバとの間でデータの同期を図る．これらにより，スーパーマーケットでの商品管理を始め，図書館，倉庫などのデータ管理がより強化される．