プロジェクト 最終発表

取組内容

WebGL, PHP, MySQLデータベースを利用し、OBJフォーマットモデルをインタラクティブに表示するWebサービスの開発を行う。

同時に3DCGプログラミングの深い理解も行う。

最終的な使用言語(文)

HTML5, CSS3, JavaScript, jQuery(JS), PHP, SQL

HTML5のcanvas要素を利用して、ユーザーがアップロードしたオブジェクトファイルをインタラクティブに3DCG表示。

localhostにて実行。(XAMPP, Apacheサーバ, MySQLデータベース)

内部処理(JavaScript)

前回発表までは3DCGプログラミング理解の為ライブラリを使用せず実装していたが、あまりにも動作が重い、jQueryとの干渉が発生する等の問題が生じたため、three.jsのOBJローダーを使用。

WebGL関連JavaScriptコード量

前回 : 1004行 → 今回 : 102行

内部処理(MySQLデータベース)

PHPプログラムを組む前に、データベースとして何を保持したいかを明確にするため、テーブル定義書を作成。後にphpMyAdminにてSQL文を発行し、テーブル生成。

作成したテーブル

・モデル情報の保持「items」

・ 会員情報の保持「members」

テーブル定義書と実際のテーブル

内部処理(PHP)

HTMLにてページの基礎を作成しておき、後にPHPにて処理系を記述。

今回作成したウェブサイトでの主なPHP処理による機能

・ アカウントの作成、ログイン、ログアウト処理(create_account.php)

・ オブジェクトのアップロード(add_object.php/upload.php)

・ オブジェクト一覧の表示、検索(index.php)

・ オブジェクト詳細の表示(detail.php)

・ ユーザー登録情報の閲覧(my_page.php)

PHPによる処理 –ログイン/ログアウト

ログインフォームにてユーザー情報を入力、ログインボタン押下

→ POSTメソッド処理によりログイン認証に成功すると、

セッション変数にユーザーIDとユーザー名を保存

ログイン認証は、SQLのSELECT文によりmembersテーブルから一致するものがあればtrueを返すことにより実装。

ログインしなければオブジェクト詳細閲覧、投稿ともに不可能

PHPによる処理 – OBJアップロード

フォームに適切な内容を入力し、登録ボタンを押下

投稿の際にはセッション変数に格納されているユーザーIDとオブジェクトデータが関連付けられる。また、投稿データはAUTO_INCREMENTによる主キー(item_code)とオブジェクト名を合成した名称を付けることにより、重複のないように保存。

PHPによる処理 –一覧表示

itemsテーブルに保存されているデータのすべてを表示。

→ ページング機能未実装。

それらを個々にクリックするとそれぞれのオブジェクト詳細画面に遷移。

GET情報(?code=item_code)をリンクに付加することでオブジェクトを識別。

PHPによる処理 –詳細表示

一覧ページからのGET情報付きリンクからオブジェクトコードを受け取り、そのコードに応じた情報を取得、表示。

その際、セッション処理により、ログインされていなければこのページを閲覧できない。

このページにてobjファイルはWebGLによってインタラクティブ表示される。

改善すべき点

・ 検索フォームにてSQLインジェクション攻撃を行うことができる。

・WebGL処理を覗かれるとobjファイル保存場所が丸見え。

・ PHPのデフォルト設定により2MBまでのファイルしか投稿できない。

・商品サムネイル画像が指定サイズでなければ表示がおかしくなる。

・例外処理を実装していないため、insert系の処理が雑

・ ページング機能がない

などなど…

おすすめ参考サイト等

・ wgld.org ・・・ http://wgld.org/

WebGLの学習サイト

・ポンクソフト ・・・ http://ponk.jp/php/basic/ec

PHPとSQLによるショッピングサイトの作り方.

・CodeZine PHP入門 ・・・ http://codezine.jp/article/detail/3982