これからはjQueryだろーって雰囲気なのでjQuery+楽天ウェブサービスを練習してみます。

これまでjQueryのライブラリは使ったことはあっても自分でスクリプトを組んだことがないのでここらで練習しておきます。今回の目標&やりたいことはこれ！

• 楽天商品検索APIを使用（version:2009-02-03）
• jQueryでAjax
• JSONP
• 検索機能はなし
• 用意するファイル・・・index.htmlとjQuery.js

最初なのでシンプルなサンプルからいきます！。これをベースに機能を追加していく感じで・・・。まずはjQueryの本体をダウンロードしてindex.htmlに読み込みます。

公式サイトからダウンロード：jQuery

<script type="text/javascript" src="jquery.js"></script>

ページの読込み時に実行するjQueryお決まりの書式。

$(document).ready( function () {～処理はここ～});

$(function) {}でもいけるみたい。ajax通信をするので「.ajax()」を使います。
ajax()関数のマニュアル： Ajax/jQuery.ajax – jQuery JavaScript Library

$.ajax({
～ここにオプション～
});

定義したオプションパラメータは次の通り。

• type
  GETかPOSTかを指定。今回はGETです。デフォルトがGETなので書かなくてもOK。
• url
  リクエスト先のベースとなるURL。
• data
  上のurlで指定したURLの後ろにつけるクエリ。オブジェクト形式で指定します。キーワードに日本語を指定しても内部で変換してくれるのでそのまま日本語OKです。
• dataType
  "xml"とか"json"とか、送信するデータの形式。今回は"jsonp"。
• jsonp
  コールバック関数のためのパラメータが「callback」以外のときにここで名前を指定できます。
• success
  通信が成功したときに実行される関数を指定します。

これ以外にもたくさんのパラメータがあるので詳しくはドキュメントを見てください。

パラメータ詳細

type: "GET",

通信タイプは"GET"でいきます。なくてもOKですが、練習なので書きます。

url: "http://api.rakuten.co.jp/rws/1.13/json?",

APIバージョンによって変わってくる値です。これは2009-02-03の場合です。

data: {
        "developerId": "ここにデベロッパーID",
        "affiliateId": "ここにアフィリエイトID",
        "operation": "ItemSearch",
        "keyword": "電卓",
        "hits": "5",
        "version" : "2009-02-03",
         },

送信するクエリです。"keyword"は最近欲しい「電卓」で。ここは「"（ダブルクウォート）」や「,（コンマ）」を忘れがちなので注意ですね。

dataType: "jsonp",

送信するデータ形式はjsonp。

jsonp: "callBack",

楽天APIではコールバック関数を指定するパラメータが「callBack」（Bが大文字）となっているのでここで指定しておきます。実際のクエリは「&callBack=（jQueryによって勝手につけられる名前）」になります。

success: function(data) {
        $("<ul/>").appendTo("div#result");
        $.each(data.Body.ItemSearch.Items.Item, function(i, item) {
            var content = item.itemName;
            $("<li/>").append(content).appendTo("#result > ul");
        });
 }

はじめの関数の引数にはJSONデータがはいっています。取得したデータにアクセスするには$.each()関数を使います。「jQueryではじめるAjax：第2回　jQueryによるAjax実装｜gihyo.jp … 技術評論社」によると第1引数には繰り返す対象のオブジェクト、第2引数には繰り返す処理を定義した関数を指定します。

この関数にも2つの引数があって、1番目は何番目の要素かを示すインデックス、2番目は要素の値が入るということですが、ふたつめはちょっとわかりません。ただ、each()の第1引数に指定したものと同じオブジェクトが入るようです。なのでここのように「item」とすると商品名の「itemName」にアクセスするときは「item.itemName」となります。これでできたのでとりあえずこのままいきます。

説明しなかったそのほかのコードはjQueryの関数をつかって商品名をリスト形式に整形するためのものです。結果はdiv#result内にulリストをつくって出力します。

出来上がったサンプルコードを置いておきます。

コードを見る

Flashで作られたギャラリースクリプトがこのdfGallery 2.0。

パッと見ただけでデザインが秀逸な感じですね。もちろんサンプルの写真は関係なしで。

これまでもたくさんのFlashギャラリーのスクリプトがありましたが、単独のページで表示するものが多かった気がします。その点これは「anywhere」って書いてあるようにどこにでも組み込むことができそうなので、たとえば記事の中で使うなんてことも簡単にできそうです。個人的にはこれだけでも使いたいですね。

あとは、テーマやスキンが変えられるところもいいかも。自サイトのデザインに合わせることができるので。

以下、公式サイトから抜粋。

• Embed the Gallery anywhere [Blog, Facebook, Myspace...]
• Themes – Change the layout and the presentation of the gallery [advanced]
• Skins – Simply edit a PNG file to change the whole look if your gallery [Skin guide in the package]
• Flickr – Gets every Flickr album of any user [api key customizable]
• Picasa – Load any picasa album by just configuring the URL
• Custom Albums
• Full control over the system from the Administration Console.
• AJAX & Multiple Image Uploads
• Customize the background music of the gallery
• Fullscreen feature lets you view images with the highest resolution.
• Built on Flex 3 SDK
• More coming in the upcoming builds…

最近ようやくFlickerを使おうかなという気になってきたので、Flickerにアップロードした画像と連携させたりしてみたいですね。

公式サイト&ダウンロード

dfGallery 2.0 – Free Flash Gallery | Dezinerfolio

おはようございます。

今週は連日招待状の宛名書きをしてます。書く前に一度練習してから清書しているので一通書くのに約１０分くらいかかってしまいます。けっこう疲れます。
それが効いているのか、はじめはかなりヤバイ感じのへた字でしたが少しづつ人に見せてもまぁオッケーなくらいになってきました。こういうのって最後になって納得いく字になっていくんでしょうねー。

ここから本題。
先日から挑戦しているコメント投稿のAjax化ですがうまくいきません。投稿できたり、できなかったりとかなり不安定な状況で困っています。

前記事でも書いたようにこのブログはマルチドメインでMTを利用しているのでJavascriptのクロスドメイン制限に引っかかってしまいます。それで違うドメインにあるmt-comments.cgiにPOSTすることができません。そこでPHPで書いた中継プログラム（プロキシサーバー?）を中継してmt-comments.cgiにPOSTするようにしました。

これでうまくいくかな？と思っていたのですが、サインインして投稿すると匿名投稿になってしまったり、投稿自体ができなかったりとおもったように動いてくれませんでした。

コメントのAjax化の方法は基本的に
Movable Type のコメントを Ajax で投稿する２ – Movable Type 備忘録
の内容を参考にしています。変更した点はJavascriptの冒頭の一部を

var proxy = '<$mt:BlogURL$>proxy.php';
var mt_url = "<$MTCGIPath$><$MTCommentScript$>";

のように変更&追記し、関数ajaxcomment_postとajaxcomment_previewのなかの変数parsを

/*ajaxcomment_post*/
pars = "url="+ encodeURIComponent(mt_url + "?" + pars + "&post=post");
/*ajaxcomment_preview*/
pars = "url="+ encodeURIComponent(mt_url + "?" + pars + "&prevoew=preview");

と変更しているところです。

そのほかは配布されているテンプレートをダウンロードさせてもらってそれを参考に必要箇所をオリジナルテンプレートに追記した感じです。これでいけるはずだったんですが・・・。

サインインしなければいまのとことプレビューと投稿ができるのでコメントはサインインしないでお願いします。

ちなみに今回作成したプロキシはこんなコードです。

<?php
/*
prototype.comment.jsからPOSTされたデータを中継してmt-comments.cgiに再びPOSTする
*/

//URLデコード
$dURL = urldecode($_POST['url']);

//URLを分解
$url = parse_url($dURL);

//クエリ
$query = (isset($url['query'])) ? ('?' . $url['query']) : "";

//リクエストライン
$request = POST . " " . $url['path'] . $query . " HTTP/1.0\r\n";

//リクエストヘッダ
$request .= "HOST: " . $url['host'] . "\r\n";
$request .= "User-Agent: PHP/" . phpversion() . "\r\n";

//POSTデータをヘッダの末尾に追加
parse_otr($url['query'], $post);
while (list($key, $value) = each($post)) {
  $POST[] = $key . "=" . $value;
}
$postdata .= implode("&", $POST);
$request .= "Content-Type: application/x-www-form-urlencoded\r\n";
$request .= "Content=Length: " . strlen($postdata) . "\r\n";
$request .= "\r\n";
$request .= $postdata;

//Webサーバーに接続
$fp = fsockopen($url['host'], 80);

//接続に失敗したときの処理
if (!$fp) {
  die("MovabelTypeへの接続に失敗しました\r\n");
}

//リクエストデータ送信
fputs($fp, $request);

//レスポンスデータ受信
$response = "";
while (!feof($fp)) {
  $response .= fgets($fp, 1024);
}

//接続終了
fclose($fp);

//ヘッダ部分とボディ部分を分離
$out = split("\r\n\r\n", $response, 2);
header("Content-Type: text/html; charset=UTF-8");
header("Pragma: no-cache");
echo $out[1];

?> 

Perlの知識がないのが痛いですが、サインしたときのMTの動作をもっと調べないといけないみたいですね。

2008. 6. 1追記
ちょうどサブドメイン環境で Ajax やってみる – Movable Type 備忘録をいう記事がアップされてました。