「還暦から始める動的Ｗｅｂサイト構築」学習が一段落
October 26, 2009 – 11:05 pmブログサイトの立ち上げ以来、学習してきた「動的Webサイト」構築のための要素技術を、アマゾンAPIをテストベッドとして、総合化してみた。２週間前、「アマゾンAPIを活用してアフィリエートに挑戦」と題したエントリーを書いたが、今回これを拡張し、複数の「商品」を一括して取り扱う「バナーリンク」を作成し、「動的Ｗｅｂサイト構築」に向けて行ってきた学習のまとめ的な作業とした。
今回作成したリンク用バナー広告を示してみよう。以前のエントリー（「アマゾンAPIを活用してアフィリエートに挑戦」）では、例としてNIKONのデジタル一眼レフカメラD300Sのバナー広告ひとつを表示しているのに対し、この下に示したのは６種類のデジタル一眼レフカメラの情報をこのブログポスト上で確認できる構成にしている。
前回示したものと、一目で分かる違いは、まず一連のバナー広告のタイトルが表示されているところだ。最上部に、「NIKON最新デジタル一眼レフカメラ」というタイトルがご覧になれるだろう。
次に、このタイトルの右側には、「≪Prev. Next ≫ 1 of 6 」 という表示をご覧になれるだろう。このうち、1 of 6 という部分は、タイトルで表した「商品」が６種類登録されており、ポスト上に表示されているのは１番目の「商品」情報であることを示している。
Next≫の部分にカーソルを置き、クリックすると、２番目の「商品」情報をみることができる。
バナー広告の表示に至る手続きを簡単に説明し、具体的に「動的Webサイト」構築技術に含まれる要素技術がどのように活用されているかを見てみよう。このバナー広告を表示させるために、このポストのエディター上では、次の３行を記述しているにすぎない：
<script type="text/javascript" src="/scripts/amazon_ajax.js"></script>
<body onload="getBookByCode02(4,1)"></body>
<div id="Amazon_Area"></div>
以前のエントリー同様、このページが最初にロードされる際、今回作成したJavaScript関数getBookByCode02()が動作する。この関数は、ふたつの引数をもち、１番目の引数、４、は表示対象アイテムの種類を、２番目の引数は、この表示対象アイテムの個別商品番号を表している。
クライアントサイド（ブラウザ上）の動作： このJavaScript関数getBookByCode02()では、「Ajaxの基本XMLHttpRequestを試してみた」そして「アマゾン書籍DB検索をAjaxでやってみた」で説明したXMLHttpRequestが用いられており、これにより関数の引数に与えた二つの数値がサーバー側に送られ、対応する「商品」情報が表示用に整形された形で戻され、divタグで定義されているAmazon_Area上に表示される。
≪Prev., そして Next ≫ 部には、ボタンイベント（onClick）が発生すると、同じgetBookByCode02() 関数が動作し、対応する「商品」情報をうけとり、「商品」情報の更新を行なうことになる。
サーバーサイドの動作： まず、クライアントサイドから送付されてきたデータから、サーバーのＳＱＬデータベース上において目的とする「商品」のＡｍａｚｏｎコード（ＡＳＩＮ）が取得される。このＡｍａｚｏｎの「商品」コードは、Ａｍａｚｏｎ APIを通じて、Ａｍａｚｏｎのサイトに送られ、該当する「商品」情報を取得。これら「商品」情報は、ＨＴＭＬ形式に整形したのち、クライアントサイドに送付される。
なお、ここで記述したように、「商品」情報の表示にあたっては、個々の「商品」情報の取得・表示の都度、アマゾンのデータベースへの問い合わせをしているため、個々の商品情報表示には、１秒程度の時間を要する。
簡単に、「バナー広告」の表示にいたる一連の手続きを記述したが、「動的Ｗｅｂサイト構築技術とＡｊａｘ」に書いた所謂Web２．０と呼ばれる技術をプリミティブなかたちながら適用したものになっていることが理解していただけると思う。
以上、アマゾンのアフィリエートをテストベッドに、これまで学習してきた「動的Ｗｅｂサイト構築」技術を具体的に適用してみたが、アマゾンのアフィリエートに限らず、この技術、様々な場面で活用することができるものと考えている。
本ブログでは、「還暦から始める動的Ｗｅｂサイト構築」ということで、昨年５月からＷｅｂサイトの構築技術について学習してきたわけだが、一応、基本的な技術を習得することができたのではと思う。今後、これまでバラバラに記述してきた要素技術をなんらかの形で（例えば、独立したＨＰとして）系統的にまとめなおす作業もやってみたらと考えている。
1 Trackback(s)