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に対応させました

JavaScriptでマッシュアップ

最近学習に力を入れているJavaScriptでマッシュアップをやってみました。

どのあたりがマッシュアップ？かというと、背景画像をflickrから取ってきてランダムにbackgroundに設定しています。
ちょうど参考になる記事がありましたので、サンプルのソースを流用させて貰いました。

マッシュアップ部分のJavaScriptは以下の通りです。
※全部のソースが見たい場合は上記画像からリンク先にてご確認ください。

/*index.htmlのhead内*/
 

 

/*flickr-search.js*/
// 画像検索を行う関数
function photo_search ( param ) {
    // APIリクエストパラメタの設定
    param.api_key  = 'APIキーを取得して設定';
    param.method   = 'flickr.photos.search';
    param.per_page = 100;
    param.license  = '1,2,3,4,5,6';
    param.sort     = 'date-posted-desc';
    param.format   = 'json';
    param.jsoncallback = 'jsonFlickrApi';

    // APIリクエストURLの生成(GETメソッド)
    var url = 'http://www.flickr.com/services/rest/?'+
               obj2query( param );

    // script 要素の発行
    var script  = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src  = url;
    document.body.appendChild( script );
};

// オブジェクトからクエリー文字列を生成する関数
function obj2query ( obj ) {
    var list = [];
    for( var key in obj ) {
        var k = encodeURIComponent(key);
        var v = encodeURIComponent(obj[key]);
        list[list.length] = k+'='+v;
    }
    var query = list.join( '&' );
    return query;
}

// Flickr検索終了後のコールバック関数
function jsonFlickrApi ( data ) {
    // データが取得できているかチェック
    if ( ! data ) return;
    if ( ! data.photos ) return;
    var list = data.photos.photo;
    if ( ! list ) return;
    if ( ! list.length ) return;
    
    // ランダムに1つ取り出す
    var n = Math.floor(Math.random() * list.length);
    var photo = list[n];
    
    var link = 'http://www.flickr.com/photos/' + photo.owner + '/' + photo.id + '/';
    $('#cc').attr('href',link).text(photo.id);

    var val = 'url("http://static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_b.jpg")';
    //$('body').css('background-image',val);
    $.backstretch(val);
}

大雑把な処理の流れとしては、どんな写真を検索するかパラメータを渡してJSのメソッドを呼びます。
JS側ではflickrApiを使うための手続きをしたり、どんな形式でレスポンスを返してもらうかなどの決め事を元に、写真を検索し、その中からランダムに返ってきた写真のURLをbackground-image jquery-backstretchに渡してブラウザのウィンドウサイズに合わせて背景(7/26追記)にセットします。

仕事ではこんな重い処理を採用することはないと思いますが、いろいろとキレイな写真が見られるので、OKとしましょう。

• jquery-backstretch

iOS向けにiUIで「ぐぐっと！急上昇ワード」のWebアプリ版をつくってみた

以前リリースしたAndroidアプリ「ぐぐっと！急上昇ワード」のWebアプリ版をつくってみました。
どうせならということで、iPhoneっぽいUIライブラリのiUIをつかって、iOSを対象としたiPhoneアプリぽいインターフェースのWebアプリケーションになっています。

http://jp-trends.appspot.com （iOS端末またはWebkit系のブラウザでご覧ください）
自分でプログラム書く場合にデザインが二の次になるのはいかんですなぁ＞俺

Androidアプリの場合はGoogleから直接XMLを取得しているのですが、Webアプリ、そしてJavaScriptということもあり、サーバ側でいったんXMLをJSONに変換しています。

Google急上昇キーワード→GAEでXMLを取得しJSONに変換（cron実行）→JavaScriptでJSON取得・表示

「続・ハイパフォーマンスWebサイト」によると、JSONのパースはeval()ではなくて、JSON.parse()を推奨とのことでしたので、今回そのように実装したのですが、iPod toutch（v2.2.1）やAndroid 1.6の端末ではうまくデータが取得できていないようだったので、もしかしたら、上記2機種のWebkitには、JSONのネイティブパーサが搭載されていないのかも知れません。また、iPad（v3.2）とiPhone 3GS（v4.0）で表示や挙動が若干異なる部分もあるようなので、Safari自体に差があるのか、ライブラリの問題なのか、iOSといえどもWebアプリによくある問題とは無縁ではないことを改めて実感した次第です。
今後はiUI以外のライブラリ（Senchaとか）も試してみたいですね。