jQueryでAjaxメモ

jQueryでAjaxする時のためのメモ（備忘）です。
「初めてのJavaScript 第2版」に出てくるサンプルをjQueryを使ったバージョンと比べてみます。

まずは、本に出てくるAjaxのサンプルです。（scriptの部分のみ抜粋）

コード量が多いし、解説が欲しいですね。

これをjQueryを使うと、かなり記述量が減り、可読性も上がります。jQuery万歳！！な感じです。

※jQueryから操作しやすいようにidを付け加えたりしています。
※$.getよりも$.ajaxの方が、柔軟性があって良いみたい。

通信しているサーバサイドは共通です。
（※SyntaxHighlighterの表示が少しおかしいです）

札幌" .
        "旭川" .
        "根室";
        break;
      case "FU" :
        $result = "福井" .
        "鯖江" .
        "越前";
        break;
      case "NA" :
        $result = "長野" .
        "松本" .
        "Web3.0シティ" .
        "上田";
        break;
      case "OK" :
        $result = "那覇" .
        "石垣";
        break;
      defaut :
        $result = "都市が見つかりません";
        break;
    }
    echo $result;
  }
?>

上記を発展させると、イベントをトリガとして通信し、データを書き換えるという処理がいろいろできると思います。

jQuery日本語リファレンス

jQuery Mobileを試してみた

JavaScriptライブラリの標準といってもいいjQueryから、モバイル向けの「jQuery Mobile」がリリースされました。
バージョンはまだALPHA 1ですが、最も期待しているライブラリですので、早速試してみました。

お題として、以前iUIを利用した「iOS向けに「ぐぐっと！急上昇ワード」のWebアプリ版をつくってみた」と同じものをつくってみました。


画面はこんな感じになりました。（リンク）
iUIに比べると、リストの高さが狭かったり、文字サイズも少し小さいかな。全体的に表示が小さいですね。

コーディングのやり方はiUIと似ています。同一htmlファイル内に、各画面の記述をして、画面遷移の際にうまいこと表示してくれます。大きく違うのは、独自属性を使って各要素や動作を設定しているところでしょうか。また、戻るボタンが自動的に表示される（記述しないで良い）のには、へぇ〜って感じでした。

jQuery Mobileのページで公開されているデモを見ると、複数htmlを使って画面遷移しているようで、どうやら、ページの一部を別htmlの内容に置き換えて表示する方法があるようです。この辺の検証も追々やっていこうかと思ってます。

動作が少し重いと感じましたが、まだまだアルファ、やはり期待できるライブラリです。
jQuery Mobileの登場で、今後スマートフォン向けサイトが増えそうですね。
Webもどんどん変わってきますね。

jQuery Mobile

追記：2010/11/12 Alpha2がリリースされましたので、サンプルもAlpha2に対応させました

ぐぐっと！急上昇ワード Ver.0.6.0

キーワードにあわせてサムネイル画像を表示させたい。

といわけで、今までアプリから直にデータを取得していたのですが、サーバサイドにていったん取得したデータを加工し、取得するという構成に変更しました。
今までアップデートの中で一番大変だったでのブログに書いておこうと思います。

概要はこんな感じになります。

1．キーワード情報（Google）を取得
2．取得したキーワードで画像検索（Yahoo!）を行い、サムネイル画像のURLを取得
3．キーワード情報にサムネイル画像のURLを追加したもの（JSON形式）をデータストアに保存
4．1〜3の処理をcronで定期実行
※サーバサイドはGoogle App Engine（Python）を使っています。

また、今回のアップデートで画面レイアウトの見直しも行い、増えたボタンをスッキリ整理しました。

ボタンを押して検索先を選択するようにしました。当面検索先サイトを増やす予定はないですが、増えても大丈夫なUIです。

たまにキーワードにマッチしない画像を表示したりもしますが、そこはご愛嬌ということで。

機能的には固まってきたので、今後の課題はビジュアル面かな？
まだまだやりますよ！