Loading
|
|
|
Loading
|
| ＠IT > MyEclipse ビジュアルJSPデザイナーで商品ページを作ろう |
 |
前回までで、Amazon Webサービスのクライアントができ、商品データを取得できるようになりました。今回は、そのデータを使用して、JSPエディタの使い方を説明しつつ、実際のWebページを作っていきます。
AmazonのWebサービスは非常に詳細な商品データを取得できるようになっているため、オブジェクト構造がかなり複雑です。前回のテストコードを見ても分かるように、商品名を取得するまでに何重にもオブジェクトをたどって行かなければなりません。 しかし、ここでは使うデータ項目も限られていますし、商品の検索の仕方も限られていますので、いちいち複雑なコードを書くのは得策ではありません。そこで、商品情報を取得する部分をユーティリティメソッドにすることで、コードがシンプルになるようにします。 では、ユーティリティメソッドを実装していきましょう。以下のコードをAWSECommerceServiceClient.javaの、最後の「}」の手前に挿入します。
「accessKeyId =XXX」のXXXは、自分で取得したIDに変更してください。このメソッドは、browseNode、つまり「フルーツ」「野菜」といった商品カテゴリのIDを基に、Webサービスを呼び出して商品データを取得します。そして、1商品のデータを1個のHashMapに格納してLinkedListに追加して返します。
次に、Amazon Webサービスから取得した商品情報を表示するページを作成します。MyEclipseには、ソースコードとデザイン画面の双方を確認しながら作業できる「MyEclipseビジュアルJSPデザイナー」が用意されているので、JSPの作成が非常に効率的です。 ■ WYSIWYGでページを作れる 商品ページを作成する前に、第2回で作成したtest.jspを使って、「MyEclipse ビジュアルJSPデザイナー」を紹介しましょう。［パッケージ・エクスプローラ］からtest.jspを開いてください。
「MyEclipse ビジュアルJSPデザイナー」は、WYSIWYG（What You See Is What You Get、見たままに手入れできる）エディタです。ソースに適当な文字列を入力してみてください。リアルタイムに上部の［デザイン］ビューに反映されるのが分かります。また、［デザイン］ビューを直接編集することもでき、行った編集はリアルタイムに下部のソースに反映されます。 WYSIWYGエディタは、デザインが入ってソースが複雑になってくると、特に重宝します。画面上で変更したい場所がソース上でどこなのか見つけるのに苦労することがよくありますが、WYSIWYGエディタなら変えたいところをクリックすれば、変更個所が特定できます。 また、タグの対応を間違えてデザインが崩れるということも起こりにくいし、起こっても原因を調べやすいでしょう。 左下に［スニペット］があります。アクティブになっていなかったらクリックしてください。ここには、さまざまなソースのパーツが置かれていて、ワンタッチでソースを追加することができます。「JSP」「CSS」などのカテゴリに分かれていて、JSFやStrutsでよく使うコードもあります。 ユニークなのは、「フォーム・リスト」のところに「年リスト」「月リスト」などが用意されているところです。「年リスト」をソースのところにドラッグ＆ドロップしてください。<select>タグが追加されます。［デザイン］ビューのところにドラッグ＆ドロップすることもできます。 ［デザイン］ビューで、作成した「年リスト」をクリックしてみてください。右下の［プロパティー］のところに「名前」や「リスト値」が表示されます。ここで、リストの項目の追加や削除、変更ができます。 また［プロパティー］の中には、［基本］［拡張］というタブがあり、［拡張］をクリックすると、<select>タグのほかの属性項目が表示されます。タグの属性を忘れてしまったときでも、すぐに調べることができる便利な機能です。 ［スニペット］から「HTML」の中の「単一表」を［デザイン］ビューにドラッグ＆ドロップしてください。できたテーブルをクリックしてフォーカスを当てます。枠線や三角が表示されます。小さい三角をクリックすると、上下左右に行・列を増やしていくことができます。 三角の間の「×」印をクリックすると、行や列が消えます。右下のプロパティーに「行数」「列数」を指定すると、colspanやrowspanが設定できます。
右上の［アウトライン］は、HTMLタグの構造がツリー状に表示されます。タグの構造で迷子になってしまったときに便利です。 中央のソースの下に［デザイン］［プレビュー］というタブがあります。［プレビュー］をクリックすると、実際のWebブラウザ表示のプレビューができます。Internet ExplorerとMozillaでのプレビュー画面が上下に同時に表示されるので、両方のプレビューが一度にできて非常に便利です。 ■ 商品ページの作成 それでは、商品ページを実際に作ってみましょう。デフォルトで用意されているindex.jspを商品ページにします。［パッケージ・エクスプローラ］からindex.jspを開いてください。 1行目のpageEncodingを以下のように変更します。
2行目に以下のように入力します。
パッケージ名の入力が面倒な場合は、［CTRL］＋［スペース］を押すと、コードアシストの機能が、パッケージ名を自動的に補完してくれます。 次に、JSTL（JSP Standard TagLibrary）を使えるようにするために、3行目に以下を追加します。Java EEプロジェクトにした場合、MyEclipseではJSTLのライブラリがすでに組み込まれた状態になっているのでダウンロードして組み込む作業は必要ありません。
8行目のDOCTYPEの上で、次のように入力します。
getPの後ろで［CTRL］＋［スペース］を押してコードアシストを有効にしてみてください。スクリプトレットの中でもコードの候補が表示されます。MyEclipseのコードアシストの機能は、ほかのJava IDEと比較しても非常に優れています。 「getParameter()」を選択し、最終的に以下のように記述してください。
<body>タグの下の、「<br>This is my JSP page. <br>」の行を削除します。上半分のデザインを見ると、「This is my JSP page」が消えていると思います。削除したら、<body>タグの下に以下のコードを追加してください。
上のデザイン部分を見てください。画像が出るところと、お買い物かごに入れるボタンと、点線が出ていると思います。これが商品1個分で、ループさせて複数商品表示させることになります。JSPソース下のプレビューも見てみるとよいでしょう。 ここまでの作業が終了したら、早速表示させてみましょう。
［MyEclipse Webブラウザ］で次のURLにアクセスします。
プログラムの解説をしましょう。browsenodeの値をリクエストのパラメータから取得します。先ほど作成したユーティリティメソッドで商品データを検索して取得します。requestにセットして、JSTLのEL式で使えるようにしています。 後は<body>タグの下でループして表示します。1商品を1つの<div>タグのブロックにしています。スタイルシートで商品の下に下線を付けています。画像に「float:left」を指定して、画像の右に商品名やボタンが出るようにしています。 「asin」というのが、いわゆる商品コードです。「Amazon Standard Identification Number」の略で、名前から分かるとおりAmazon独自のコードになります。 「お買い物かごに入れる」ボタンはまだ機能しません。後日ショッピングカートを実装した際に機能するようになります。 ■ JSPのデバッグをしてみる MyEclipseでは、JSPのデバッグもできます。index.jspのソースの、「</c:if>」の左の枠のところをクリックすると、ブレークポイントが設定できます。
サーバをデバッグ・モードで起動します。中央下のペインで、［サーバー］タブをクリックします。Tomcatが起動していたら停止します。Tomcatの上で右クリックして［停止］を選択します。次に、同じくTomcatの上で右クリックして［デバッグモードで開始］で開始します。 Webブラウザで、index.jspを開きます。
ブレークポイントで実行が停止し、［デバッグ］パースペクティブに切り替わります。ここで、ステップ実行をすることもできます。
最後に、ロゴやナビゲーションなど、各ページの共通部分を作ってページを仕上げましょう。［WebRoot］で右クリックして、［新規］→［その他］をクリックします。 ウィンドウが開くので、［Web］の中にある、［CSS］を選択します。［次へ］をクリックします。ファイル名のところに「styles.css」と入力して、［終了］をクリックします。styles.cssが新規に作成されて、開いた状態になります。 以下のように入力して保存します。
拡張テンプレートで「header.jsp」というファイルを作成します。以下のように入力します。
index.jspを開きます。<head>タグ下の方で、コメントアウトされている<link>タグのコメントを外します。
<body>タグの下に、includeを追加します。
oisixlogo.gifをローカルに保存して、［WebRoot］にドラッグ＆ドロップして追加します。
さて、Webブラウザで以下のURLにアクセスしてみましょう。
以下のように表示されれば、成功です。
「葉物野菜」「牛乳・バター」をクリックすると、いままでと違う商品が表示されるはずです。これと同じ要領で「browsenode」を変えていけば、もっと多くのカテゴリを表示させることができます。 「browsenode」の調べ方は、Amazon独自なので、Webサービスからリストを取得するのが正しいやり方です。しかし、経験的にはAmazonページのURLから読み取ることができます。 Amazonの中にあるオイシックスのページにアクセスします。
左の方にあるカテゴリ名をクリックします。例えばフルーツをクリックすると、URLは以下のようになっています。
「node=」の後ろが「browsenode」になっているようです。お好みでbrowsenodeをもっと増やしてみるとよいでしょう。 次回は、データベース関連機能の紹介と、ショッピングカートの実装を行います。
※本記事は、日立製作所の『日本語MyEclipseポータルサイト』に掲載された記事を許諾を得て、再構成したものです。 提供：株式会社 日立製作所 企画：アイティメディア 営業局 制作：＠IT編集部 掲載内容有効期限：2008年3月31日 |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
