Webアプリケーション開発誌

先日の日記でJavaでWebアプリの開発をしていると書きましたが、今回それが（一応）完成し授業内で発表も済んだので、ちょっとエピソードを晒してみようと思います。

何を作ったか。

ソーシャルブックマーキングサービスを作ったわけですが、それを作ろうと思った経緯を説明しますと。 グループ実験で、他の班は(前例や実験概要の説明の流れから)ショッピングシステムとか多く作っていたようですが、一応新規性を重視して作れと言う話を聞いていたので、Web2.0的な何かを作ればいいんじゃね？って話になりました。
で、何を実際に作ろうと考えたときに、（Java+MySQLでの）Webアプリの開発が初めてな自分たちの力量を考えると、SNSやWikiなどの大規模システムはちょっと厳しいだろうという考えに至り、手頃なところでブックマークなんかが良いんじゃないかと考え、TAの方からただ登録出来るだけじゃダメだよ～と釘を刺されていたので、Web2.0と言ったらフォークソノミーだろってことで、登録されたブックマークのタグ登録を出来るようにしよう。ということで、ソーシャルブックマーキングサービスを作ることに決定したわけです。

というわけで、コンセプト

・実際にあってもおかしくない様なサービス（実用性）
・つまりは動いて当たり前、しかも見た目もすごいぜ！
・見た目は最近の流行に乗って薄めの配色でWeb2.0っぽく。

制作過程1

今回の実験はグループ実験なので、制作過程を詳しく説明する前にメンバの3人についてちょっと説明。
O君…デザイン担当（XHTML、CSS）。アフィリエイトで金儲けを企む為にHTMLを勉強している様子。デザインに興味あり。Javaは全く出来ないらしい。
K君…内部処理担当（Java Servlet、MySQL）HTMLってどうなってるの？な人だったけど、プログラミングはかなり出来る子。
俺…表示処理担当（完成したデザインへJavaを実装しJSPの作成）。Webサイト運営歴7年、Perl、PHP、Java、Cなど様々な言語をそれなりにコードが読めるくらいには（中途半端に）理解してる人。

さて、作る物は決まったが良いが、グループ内でシステムの完成形をイメージ出来ていたのは、どうやら私だけだったらしく、他の二人は何するの？という状態。まず、二人に何を作るのかというイメージを見せるために、既存のオンラインブックマークサービスをいくつか見せ、イメージを説明しました。
O君は直ぐイメージを理解してくれましたが、K君はイメージを理解してくれるまで時間がかかりました。けど、内部処理のフローをどうするか私が説明すると、それについては理解をしてくれました。
ということで、作り始めたわけですが、表示処理をするにしても内部仕様を決めないと私の方は実装が出来なかったので、初めは内部処理担当のK君へのアドバイスと、デザイン担当のO君へWeb標準（XHTML+CSS）でWeb2.0チックに作れとお題を出しアドバイスをしていました。
で、内部処理が出来上がってデザインを抜いた状態で表示処理にあたるJSPの作成を始めたのですが、当初はMySQLの処理でエラーが出まくって困惑しまくりました。エラー文の読み方も理解していませんでしたし、なによりスクリプト自体もリファレンスなどからコピーしてきてそのまま用いている状態だったので、ちゃんと理解が出来ていませんでしたからね。
でも、ちゃんとリファレンスの解説を見ながらやっていくことで段々と理解ができ、3回目に集まった時にはフォームとリンクタグしか作っていないというもの凄くシンプルな状態ですが、システムの原型はほぼ出来ていたかと思います。

データベースの構造

分る人だけ見てくれれば。恐らく第二正規化くらいはしてあるんじゃないかな？
rank_tblとtr_tblはランキング処理をする際に、後から付け足した物なので正規化できていません。

table名	primary key
user_tbl	uid	username	password	email
bm_tbl	bid	uid	url	comment
tag_tbl	tid	bid	tag
url_tbl	aid	url	count	rank
tr_tbl	trid	tag	count	rank

user_tblはユーザ情報を管理しているテーブルです。まぁ…見たまんまですね。UserIDはauto incrementで作成しています。usernameとpassword、emailはユーザ登録フォームからポストされた内容をそのまま登録します。でも、usernameは重複していたら登録はできません。また、passwordは登録する際にMD5でハッシュ化しています。まぁセキュリティを考えたらねぇ。
bm_tblはブックマークの情報を管理しているテーブルです。user_tblのuidと関連づけしています。これでユーザ毎にテーブルを作成しなくても1つのテーブルで管理可能です。
tag_tblは登録されたタグを管理しているテーブルです。bm_tblのbidと関連づけしています。今回は1つのブックマークに対して5件までしかタグを登録出来ないようにしていますが、将来10件に増えようがフィールドやテーブルを増やす必要性がありません。（ってか、そんなことがあるのか謎だけど）
url_tblはそのURLが何件登録され、現在登録件数何位なのか管理するテーブルです。後付なのであれですが、bm_tblと合わせて正規化を行えば後々の処理がもっと楽になったよなぁと後悔してます。
tr_tblはそのタグが何件登録され、現在登録件数何位なのか管理するテーブルです。url_tblと同様に後付です。tag_tblと合わせて正規化を行えばよかった。

制作過程2

O君からデザインが挙がってきたのですが、XHTML1.0 TransitionalでW3CのValidatorに通るように作り直せ！と指示して、修正させました。
なぜそんなことをさせたかというと、貰ったHTMLにJavaの処理を組み込む際、HTMLが不正だと可読性が低くなるので、実装と修正に余計な時間を要すんじゃないかと予想したからです。あとは、一応Web2.0的なもんを目指しているわけだから、Web標準に乗っ取らなくてはダメでしょうっていう気持ちもありました。
あと、酷いことにJSPを実装している最中にO君が作ったデザインが気に入らなくて、デザインに手を加えてしまったりしてしまいました。が、HTMLの構造自体は完成していたので、HTMLには一切手を加えず、CSS側でデザインを変更するにとどまりました。その結果、配色と配置が現在の様な形になりました。
一応、O君にはその後了承を取り、CSSを渡してブラッシュアップするように指示、その結果現在のような画像とグラデーションを用いた、Web2.0っぽくね？っていうようなデザインに落ち着いたわけです。
で、その後JSPの仕上げにかかったわけですが、だんだん完成してくるとともに、色々と機能が欲しくなってきてしまい、実験最終日の発表会まで時間がそんなに（1日しか）無かったにもかかわらず、ページ推移とか、ブックマークを登録した際に関連するブックマークの表示（アマゾンのこの賞品を買った人は、こんな賞品も買っています的な機能）を追加したりしました。
最終的に全てのバグを取り除いたのが、実験最終日の発表会開始直前でしたので、発表までに動かなかったらどうしよう・・・というプレッシャーが結構ありましたね。
まぁともかく、こんな感じでソーシャルブックマーキングサービスは（一応）完成に至りました。

（一応）完成

・トップページ

それなりにWeb2.0的な流行のデザインを取り入れてみました。ブックマークの表示に関しては、Yahoo!ブックマークとLivedoorクリップを足して2で割ったような感じ。

・マイブックマーク一覧ページの下部

初期の頃は、ページ推移が無くって全件表示していたんだけど、50件とかになってくるとそれなりに重たくなってきたので、20件ごとに表示するようにしてみました。
初めはSQLのLimitを知らなくてrs.nextで行数を送ってから～とかメンドクサイ事をしていたのが馬鹿でした。

・登録タグ一覧

一番拘ったタグの表示処理。タグの登録件数が多いほど手前に大きく表示されます。
強度は6段階で、タグの登録件数が多い順に上位1～20番目が1番でかくで21～40が2番目で～って感じに処理しています。
タグの表示順に感じてはSQLでランダムに取得するようにしているので、アクセス毎に微妙に順番が変わります。折角タグクラウドを作って表示を散らしたんだから、その方が変化があって面白いしね。
実際はまだまありますが、ちょっと諸事情で全部はお見せできません。ごめんなさい。

処理フロー
眠い（現在朝7時完徹）ので後日フローチャートを作成して掲載予定

反省と未実装機能

先に謝辞を述べておきますが、ブックマークのサムネイル生成にはこちらの外部APIを利用させていただきました。こんなサービスを無料で公開してくださった一撃様には多大な感謝致します。
IgWebCap [自動サムネイル生成Webサービス]
本来ならこの部位まで実装すべきだったのですが…まぁ研究とかでやる機会があれば、この部位の実装をしてみたいと思いますね。
あと、かなり実用性を重視して作ったのですが、発表会までに間に合わず実装を予定していた機能が未実装なままになっている部分があります。
・ユーザの変更、削除（内部処理としては出来ている）
・ブックマークの変更（同上）
・他ユーザのブックマーク一覧表示（いま考えれば5分あれば作れた）
・URL、タグ、ユーザの検索機能の実装（これももうちょい時間が貰えれば簡単に作れた・・・）
・ブックマーク登録の際、URLを指定するだけでTITLEを自動取得（内部処理としては完成していたが、文字コードの問題で未実装）
・XSS対策
・URLを登録した際に重複している場合は弾く
・パスワードの再発行（emailを登録させてるのはこの為）
・各種登録する際の確認画面（これは直ぐ出来た気もするけど）
・クロスブラウザでの表示（IE6.0、FF2.0では問題なさそうだったけど）
こんなもんかな？この問題をクリアできれば、世の中にリリースしても恥ずかしくないサービスになるかと思う。

戯れ言

こんな具合に紹介してきましたが如何だったでしょうか？
いまだから言える話ですが、実質開発日数は3人で6日くらい（18人日）かかっていますけど、いま同じ程度のものを作成したとしたら3人日あれば作れるような気がします。やっぱり、実際に作ってみるというのは大きな経験になりますね。
さて、何か質問、意見などあればどうぞ。というか、こんなの恥さらしだぜorz