Comments
Description
Transcript
H22-16
千葉職業能力開発短期大学校紀要 第 15 号（2010 年 10 月） Bulletin of Chiba Polytechnic College. No.15, October 2010 VRML による映画館座席予約システムの制作 Produce of a Seat Reservation Web System for a Movie Theater using VRML 森下 茂 *1 Shigeru MORISHITA 要約 Web 上で映画館の座席予約が可能な Web データベースアプリケーションを試作した。本システムは 3 次 元仮想空間記述言語である VRML を利用し、座席予約時に、その座席からの見え方を 3 次元的に確認できる点に特 徴がある。本稿では、平成 21 年度の総合制作実習として取り組んだ標記課題について、ひとつの指導事例として 報告する。 １ はじめに 筆者は、長年、情報技術科における総合制作実習の 1 つの柱として、後述する VRML の活用技術について取 り組んできた。1),2)本稿では、平成 21 年度の総合制作 実習として取り組んだ課題について、指導側の観点か ら報告する。なお本課題は、平成 21 年度の「課題情報 シート」として提供したことを申し添える。 ４ 成果 今回の取り組みでは、VRML シーンと Web サイトを連 携し、座席ビューの切り替えを実現することや、デー タベースと連携した予約ページ、HTML/CSS を用いた映 画館 Web ページの実装までを行った。図１にシステム 映画タイトル 予約日時 利用者 ２ VRML について VRML（Virtual Reality Modeling Language）は、Web 上でユーザとの相互作用が可能な 3 次元仮想空間を構 築するためのモデル記述言語である。ISO により、 VRML973)として標準化されたのち、現在、その後継で ある X3D4)へ統合されている（X3D は VRML97 との上位 互換性を保っている） 。VRML は仕様が複雑であり、使 いこなすには習熟が必要、といった声もあり、一般に なかなか普及しないものの、X3D において互換性が保 たれたことからも分かるように、VRML そのものは、オ ープンな Web3D の標準化技術として、今後も有用な技 術である。 VRMLによって作成した3次元仮想世界 （VRMLシーン） の表示は Web ブラウザにプラグインとして組み込まれ た VRML ブラウザ（VRML クライアント）で行うしくみ となっている。これは、Web ブラウザのプラグインソ フトとして種々提供されており、容易に入手可能であ る。今回は代表的な Cortona5)の使用を想定している。 時代となった。予約に際しては、選んだ座席からのス クリーンの見え方（以下、座席ビューと呼ぶ。 ）が気に なるところであるが、ほとんどの Web サイトでは、予 約の時点において確認する手段が提供されていない。 この欠点を克服するために、我々は VRML に着目した。 先述のように VRML は 3 次元仮想空間記述言語であり、 我々が暮らす現実の世界を仮想世界としてモデル化す ることができる。映画館を Web 上に３次元仮想空間と して構築することにより、選んだ座席からの視点でス クリーンの見え方を判断することが可能となる。これ によって、ユーザが好みの座席を手軽に Web 上で予約 することができると考えた。このような背景から、総 合制作実習の課題として、VRML による映画館座席予約 システムの構築に取り組むこととした。 空席情報 座席ビュー ３ テーマの設定とその背景 インターネット技術の発展に伴い、映画館や劇場の 座席予約も、自宅に居ながら、Web 上で手軽に出来る *1 メカトロニクス技術科 Department of Mechatronics Technology 映画館 座席 予約 サイト （3D 仮想空間） 予約情報 座席指定 図 1 システム概要 データベース 千葉職業能力開発短期大学校紀要 第 15 号（2010 年 10 月） Bulletin of Chiba Polytechnic College. No.15, October 2010 の概要を示す。 また図２に VRML による仮想映画館を示す。今回は、 座席とスクリーンのみで構成し、細部までの作り込み は行っていない。 図 2 VRML による映画館モデル 図３は、座席表から右列の座席（図中○印の座席） を選択し、その座席ビューを表示しているところであ る。視野角を 50 度に設定しているため、スクリーンの 一部が欠けて見えるが、マウス操作で視線の方向を変 えることも可能となっている。 図４は、 座席表からスクリーン正面の座席(G14)を選 択したときの座席ビューである。 図 3 と比べ、明ら かに見え方が異なっていることが確認できる。 今回は VRML を活用した座席予約システムが原理的 に可能かどうか動作検証を目的とした実験的なシステ ムであるため、実用化を想定した作り込みまではして いないが、仮想空間を用いた座席予約のしくみと有効 性は示せたと考えている。 本システムのしくみは、映画館に限らず、劇場や、 コンサート会場、カーレース会場等へ応用することも 原理的には可能である。 ５ 制作の概要 5-1 制作過程 制作は以下の手順で行った。 ①映画予約などが行える既存Webサイトの調査（映画館 の構成、会員制等の運用条件、予約方式、手順の明確 化など。 ） ②実験対象とする仮想映画館の仕様（スクリーン数や 座席数等の映画館の構成と予約ルール等の運用条件） の策定 ③Webサイトの設計 ④予約に必要な情報の抽出 図 3 座席ビューの確認（右座席から） 図 4 座席ビューの確認（正面から） 千葉職業能力開発短期大学校紀要 第 15 号（2010 年 10 月） Bulletin of Chiba Polytechnic College. No.15, October 2010 ①映画館のモデリング 今回の映画館モデルで重要なのはスクリーンと座 席、及びその位置関係である。座席は数が多いので 効率よくモデリングする必要がある。今回は VRML の プロトタイプ機能を利用し、効率化を図った。指導にあ たっては、プロトタイプの必要性を指摘し、簡単なモデ ルでその効果を確認させた。 ②座席ビューの実現 座席の指定は、視覚的に行えるように、座席図にク リッカブルマップを利用している。座席表の各座席に 5-2 指導上のポイント 直接リンクを張ってあるので、それをクリックしたときに、 課題の制作をとおし、VRMLとWebサイトの連携技術、 座席ビューの切替えと座席番号の取得を同時に行え Webデータベースプログラミング技術、ユーザの視点に る。 たったシステム設計、構築技術を身につけさせること 座席ビューを提供するにあたってはVRMLとHTML を目指した。また2名体制での開発となることから、役 の高度な連携が必要となる。今回は HTML 上の平面 割分担やスケジュール調整など共同開発をとおしての 座席図の座席番号と映画館モデル（VRML モデル）の コミュニケーション能力の養成といった副次的な効果 対応座席の視点をマッピングする方法を考案した。座 も期待した。 席ビューの切替えは、あらかじめ VRML シーン内の各 以下制作における指導上のポイントについて述べる。 座席に設定した視点（視点ノード）に切替えることで実 （１）準備段階 現している．視点をマッピングする手法として、外部か 本課題に取り組むにあたっては、VRML の他、Web デ ら VRML を制御する方法と JavaScript を使用し VRML ータベースアプリケーションに関する諸知識（PHP、 クライアントのエンジンを直接制御する方法の二方式 JavaScript、HTML/CSS、データベース[今回は MySQL を検討させた。実験の結果、前者は、VRML クライアン トに依存せず実装可能であるが、切替えの度に VRML を使用]、SQL）が必要となる。本課題に取り組む準備 として典型的な Web データベースアプリケーションの シーンの再読み込みが必要なため、データ量に応じ、 例題を提示し、その分析と作成をとおして、要素技術 やや処理が重くなること、後者は、VRML クライアント を習得させた。Web データベースアプリケーションが （Cortona）のエンジンを JavaScript から直接呼び出す どのようなものか、実際に手を動かしながら、理解を深 ため、VRML クライアントに依存するが、VRML シーン めさせることが目的である。 内で直接視点を切替えられるため、高速であることな VRML モデリングについても、例題作成をとおし、 ど、一長一短あることがわかった。今回は VRML クライ VRML の基礎事項を習得させるとともに、VRML の動 アントが容易に入手可能であることから、後者の手法 作環境、原理も理解させた。 を採用することとした。 準備段階には 4 月～6 月の 3 ヶ月をあてた。上記の 取得した座席番号は、予約情報の一部として、サー 技術要素は本格的に取り組めば、それぞれが習得に バサイドスクリプト（PHP）に引き渡し、データベースに １～３ヶ月必要な程の内容とボリュームがあるので正面 格納するしくみとしている。 から取り組めばとても時間が足りない。企業の実際の 本来ならば実現の仕組みを一から学生自身に考案 開発現場でも、このような状況にはしばしば遭遇する させたい所であるが、現実的には、経験、スキルまた が、これまでの知識、学習経験から、実装に必要とな 時間的な制約を考えると難しいものがあった。そこで、 る技術の要点を如何に効率よく把握するかがポイント 今回は簡単なサンプルで原理を示し、その検討結果 となる。このような場合は、実現したいシステムと類似 を自分たちのシステムに応用させることとした。 のシステムを分析、学習することが効果的である。た ③Web サイトの設計 だし、指導にあたっては、学習状況をこまめに把握し、 既存の映画予約サイトを分析し、サイト運営の前提 適切なアドバイスを与え、行き詰らないように配慮し 条件、実際の予約ルールや手順などがどのようになっ た。 ているかを洗い出し、これを基に、今回想定する映画 （２）制作段階 館サイトの仕様を決めた。今回の目的は、VRML との ⑤データベース設計 ⑥実装（映画館のモデリングとWebデータベースプログ ラミング） また、これらと並行して、VRMLとWebサイトを連携す るための基礎実験を行い、座席ビュー選択の手法を考 案した。 今回は扱う技術領域が広範囲に及ぶこと、総合制作 実習の限られた時間(216時間)に対して、作業量が多く なることを鑑み、開発は2名体制で行った。 千葉職業能力開発短期大学校紀要 第 15 号（2010 年 10 月） Bulletin of Chiba Polytechnic College. No.15, October 2010 連携の効果を明らかにすることが主であり、実験的な システムなので、予約機能については単純化すること を提案した。本質を見失わないための措置である。 （１）サーバサイド ・OS：Fedora 10 ・XAMPP for Linux 1.7.1 Web サーバ：Apache 2.2.11 言語：PHP 5.2.9 データベース：MySQL 5.1.33 （２）クライアントサイド ・OS: Windows XP ・VRML クライアント：Cortona VRML Client 5.1 ・言語：JavaScript 今回は時間的な関係からシステムそのものの制作に 的を絞るため、サーバ側の環境構築にはXAMPPを利用し た。時間的に余裕があればWebサーバ、データベースサ ーバの構築も一から行うと一層理解が深まると考える。 図 5 ページ構成 ６ おわりに 本稿では総合制作実習の指導事例を報告した。残念 ④データベースの設計と作成 ながら平成 21 年度をもって、 情報技術科は廃科となっ 上記の仕様を基に、予約に必要な情報を抽出し、 た。これまで培った技術を学生諸子に継承する道が断 正規化作業を経てデータベースを作成した。プログラ たれたことは慙愧の念に堪えないところであるが、時 ミング開始後に発見されたデータベースの設計ミスは、 代の流れに在って、情報技術の重要性が薄れたわけで 修正に多大な手間が掛かるため実装前にコマンドライ はなく、ものづくりの分野に在っても、なくてはなら ンベース（SQL 操作）での十分なチェックを指示した。 い基盤技術として、むしろその重要性は増していくも とのと確信している。今後は、ものづくりの分野にお 映画テーブル ユーザテーブル 予約テーブル 1 いて、情報技術を継承する道を模索したい。 1 会員番号 映画番号 予約番号 タイトル 会員番号 監督 映画番号 主演 ∞ 座席番号 上映開始日 上映回 上映終了日 予約日 パスワード ∞ ユーザ名 ∞ 上映テーブル 1 上映回 上映時間 図６ テーブル構成 ⑤システムの実装 Web ページ間のデータの受け渡しにはセッション 管理を使用した。データベースは MySQL を使用して いる。実装作業は 2 名で作業分担して行った。1 名が VRML のモデリングを中心としたプログラミング作業、 1 名がデータベース周りのプログラミング作業を担当 したが、不具合が発生した時には互いに協力し合っ て解決していかなければならないため、チームワーク の重要性を認識させることができた。 5-3 開発環境 今回の開発環境は、次のとおりである。 参考文献 1）森下茂、青木久恵、佐山鮎美，指文字学習用 3 次 元 Web コンテンツの制作、職業能力開発報文誌， 第 17 巻第 1 号，p37（2005） 2）森下茂，サーバサイドスクリプトによる VRML の 動的生成制御～PHP 用３D 曲面グラフライブラリ の試作と適用例～、関東職業能力開発大学校紀要， 第 5 号，p36（2008） 3）VRML97 仕様書 http://www.web3d.org/x3d/specifications/vrml/IS O-IEC-14772-VRML97/ 4）Web3D Consortium http://www.web3d.org/ 5）Cortona の入手先 http://www.cortona3d.com/cortona 6） 田中成重 他、 Web工房シリーズ VRMLの達人、 森北出版(1999) 7）星野努、いますぐ導入！PHP＋MySQL で作る最 速 Web システム、技術評論社(2005)