コールバック関数の作成
コールバック関数はJSONPでのデータ取得が完了すると実行されます。JSONPのデータ取得を行う方法については次の項で説明します。本項ではまず先に「jsonranking」という名前のコールバック関数を作成します。コールバック関数は以下の書式で記述します。
function 関数名(data){
# 処理
}
「data」の部分にJSONで出力するデータが入ります。JSONのデータにコールバック関数でアクセスする際のイメージは次のようになります。
data内の配列はRSSのitem要素を格納しているので個別の配列内で「title」のキーでランクしている女優の名前が取得できます。data内からRSSのデータを取得してブログパーツとして表示するHTMLを作成します。ブログ内にデータを表示する処理もコールバック関数の中に記述します。表示部分はdivタグで指定している領域のinnerHTMLで指定します。サンプルではidが「ranking」で指定されるdiv領域にデータを表示します。以上のことをまとめるとコールバック関数「jsonranking」は次のように書けます。
function jsonpranking(data){
// データ表示領域を初期化
document.getElementById('ranking').innerHTML = '';
// 表示するHTMLの部分を作成
var html = '';
html = '<table border="0" cellpadding="0" cellspacing="1" bgcolor="#db7093" width="120">';
// データの数分ループ
for (i=0;i<data.item.length;i++) {
// RSS内のitem
var rank = data.item[i];
html += '<tr><td bgcolor="#FFFFFF"> ' + rank.title + '<br /></td></tr>';
}
html += '</table>';
// 作成したHTMLを表示する
document.getElementById('ranking').innerHTML = html;
}
上記の関数で「ドラマに出演していたらつい見てしまう女性有名人ランキング 2009」の女優の名前をランキング順にテーブルで表示できます。
ブログ内からブログパーツを表示するJavaScriptを呼び出す
ブログ内からブログパーツを表示するJavaScriptを呼び出すためのステップは、次のように考えられます。
- ブログ表示時にbodyタグのonLoadメソッドでJSONPを呼び出す
- 1で呼ばれたJSONPでコールバック関数が呼び出される
- コールバック関数でJSONから取得したデータを加工してブログ上に表示する
2、3は前項までで作成できているので、ここでは1のプロセスを実装すればいいことになります。1ではonLoadで呼び出されたJavaScript内でJSONPを出力するURLにアクセスする必要があります。これはHTMLタグのsrc属性にURLを指定することで実装できます。JavaScript内でsrc属性を持つHTML内の要素を生成してsrc属性でURLを指定してリクエストを送信します。
function showRanking() {
url = "http://[ドメイン]/getRank.php";
// 「script」という名の要素を生成する
scriptTag = document.createElement("script");
// 要素のタイプを指定
scriptTag.type = "text/javascript";
// src にJSONPを指定
scriptTag.src = url;
// body部分に要素を付加することでリクエスト送信
document.body.appendChild(scriptTag);
}
上記のshowRankingメソッドをbodyタグのonLoadで呼び出すことで、JSONPからデータを取得できます。
FC2ブログへの実装
前項までで作成したメソッドを実際にFC2ブログ内から呼び出してみます。FC2、DTIブログでは管理画面よりHTMLの編集が可能となっているので、管理画面から次のように操作します。サンプルはFC2ブログの管理画面の例です。DTIブログでも同様の操作でサンプルと同じように実装できます。
［環境設定］－［テンプレート設定］－［HTML CSS編集］まで進み、HTML内に以下のタグを記述します。
<script src="http://[ドメイン]/js/getRank.js"></script>
<body onLoad="showRanking();">
実際の管理画面では以下のようになります。
次にブログパーツを表示する領域を指定します。サンプルでは分かりやすいようにブログの右側の「プロフィール」領域のHTMLにdivタグを記述して表示しています。
［環境設定］－［プラグインの設定］－［プロフィールの編集］－［【HTMLの編集】］まで進み、HTML内に以下のタグを記述します。
<div id="ranking"></div>
管理画面での編集部分はこのようになります。
HTMLの編集が終わった時点でブログにアクセスしてみます。以下の図のようにプロフィール部分に「ドラマに出演していたらつい見てしまう女性有名人ランキング 2009」が表示されています。
ランキングデータに女優が出演しているドラマの情報を追加する
ECサイトとして最大の規模をもつAmazonでは、商品情報を利用するためのAPI（Product Advertising API）を公開しています。このProduct Advertising APIを利用すると、Amazonの外からAmazon内の商品検索を行うことができます。
商品検索の結果はXMLで返却されます。PHPライブラリService_Amazonを利用すると商品検索に必要なパラメータを指定するだけでProduct Advertising APIを利用して商品検索を行い、結果を配列で取得できます。
本項ではService_Amazonを使用して「ドラマに出演していたらつい見てしまう女性有名人ランキング 2009」内にランクインしている女優が出演しているドラマのDVDを検索して、そのタイトルとジャケット画像をブログパーツに追加します。Product Advertising APIを利用するためには「Amazon Web Services Account」へのユーザー登録が必要なので、Amazon Web ServiceのSign Upからユーザー登録を行います。
ユーザー登録が終わると「ACCESS KEY ID」と「SECRET ACCESS KEY」が発行されます。ACCESS KEY IDは利用者ごとに発行されるIDで、SECRET ACCESS KEYはAmazon Web Service利用時の認証用IDです。2009年8月15日にProduct Advertising APIのバージョンアップ移行が行われ、現在Service_AmazonでProduct Advertising APIを利用する際には上記2つの値が必要となっています。
