2012年1月18日水曜日

軽量高速のjQ.Mobiを試してみる

かるい、はやい、ものすご〜いフレームワーク「jQ.Mobi」をさっそく試してみようと思う。

前にjQuryMobileでやった簡単なオークション検索を書き換えて使いやすさとか見てみる。ajaxでapi叩いてリストを表示するだけのシンプルなやつ。なので記事タイトルだとちょっと広過ぎで、内容としては『jQ.Mobiのajax関数を使ってみた』がいいところ。
.ajax {
    type:'POST', //defaults to GET
    url:'/api/getinfo', //defaults to window.location
    contentType:'application/json', //defaults to application/x-www-form-urlencoded
    headers:{},
    dataType:'application/json', //defaults to text/html
    data:{username:foo}, //Can be a Key/Value pair string or object.  If it's an object, $.serialize is called to turn it into a Key/Value pair string
    success:function(data){}, //function to call on successful Ajax request
    error:function(data){}, //function to call when an error exists in the Ajax request
 }
READMEを見るとajax関数は同じようにあるので、前作ったそのままで同じように使えそう。
ちゅうことで、前回やったhtmlをjQueryMobile風からjQ.Mobi風に書き換えて試す。
jQ.Mobi風というかは、単にjQueryMobileのdata-roleとかを外すくらい。
強いて言えばinputのclassをjq-ui-formsにしたのはjQ.Mobi風か。

あら、ダメだ。動かない。ソース読むか。

jsonPではdataはserializeされない(そもそもdataは使われてない)のでurlにつけないといけないっぽいのと、callbackもパラメータに持たせてないのがいけないっぽい。
callbackは下記のようにreplaceしてるので、callback=?としてパラメータに加える。
script.src = options.url.replace(/=\?/, '=' + callbackName);

jQueryMobileのときは下記のようだったのを
        dataType: "jsonp",
        data: {
            "appid": appid,
            "query": query
        },
        url: "http://auctions.yahooapis.jp/AuctionWebService/V2/json/search",
jQ.Mobiではこう書いてみる
        dataType: "jsonp",
        url: "http://auctions.yahooapis.jp/AuctionWebService/V2/json/search?appid=" + appid + "&query=" + encodeURI(query) + "&callback=?",

これで、apiリクエストして、sucecssが呼ばれるところまではできた。でも、cloneはないと怒られる。ちょっと疲れてきたので適当にやる。createElementしてappendする方式で下記のようにした。
function a() {
    var appid = '<ヤフーアプリケーションID>';
    var query = $("#query").val();
    $("#result_list li").remove();
    $.ajax({
        dataType: "jsonp",
        url: "http://auctions.yahooapis.jp/AuctionWebService/V2/json/search?appid=" + appid + "&query=" + encodeURI(query) + "&callback=?",
        success: function (data) {
            if (data.ResultSet["@attributes"].totalResultsReturned > 0) {
                $.each(data.ResultSet.Result.Item, function(i,item){
                    var li = document.createElement("li");
                    var img = document.createElement("img");
                    var p = document.createElement("p");
                    var a = document.createElement("a");
                    var span = document.createElement("span");
                    $(img).attr("src", item.Image);
                    $(a).attr("href", item.AuctionItemUrl);
                    $(a).text(item.Title);
                    $(span).text(parseInt(item.CurrentPrice) + "円");
                    $(p).append(a);
                    $(p).append(span);
                    $(li).append(img);
                    $(li).append(p);
                    $("#result_list").append(li);
                });
            }
        }
    });
}

見た目がバラバラ。jQueryMobieみたいにlistViewの書き方あるのかな？jQ.Mobi Kitchen Sinkを見てみるもUIに関しては遷移の挙動と、formのスタイルしかない。仕方ないので自分でcssを適当に書くか。
<style type="text/css"> 
li {clear: both; }
li img, li p { float: left;}
li img { width: 20%; max-width: 20%;}
li p { width: 80%;}
li p a, li p span { display: block;}
</style>
画像の横にタイトル、価格がくるように幅指定しただけなのにbackgroundまで変わったな。
ま、いいや。とりあえずこれで導入完了とする。


導入してみた感じ、ajaxの使い方が微妙で困ったけど、割と簡単に使えた印象。ネット上にはまだ情報は少ないだろうけど、READMEとかソースとか見ればなんとでもなるレベル。
動作については、jQueryMobileでやたら重いと感じていたスクロールもjQ.Mobiだと特にストレスを感じないので速いんだろう。
jQueryMobileで個人的にいいなと思ったのはcss書かなくてもリストとかスマホサイトっぽいUIにできるとこだったけど、jQ.Mobiでも調べたらちゃんとできるのかな？でも、jq.ui.cssみたらliに関してのスタイルはli.groupしかないからできないのかな？cssを自分で書かずに、jQueryMobileのthemeRollerのように作成できると嬉しい。cssを自分で書かないといけないんだったら、ちょっと難しい。
あと、今回の自分でやったのじゃなくて、普通にデモをandroidで弄ってみたら、ハードウェアの戻るキーを押すと真っ白になる。困った困った。「まぁ、試作機にはトラブルは付き物だ。ウルスラ
利用するのはしばらく様子見がいいかな。
以上、雑感。

前にやったjQuryMobileでのオークション検索に関連する記事

最近ブログもあまり書いてなくて、これが今年一発目だったのか。せっかくなので、目標設定。
最低でも月1ではメモ書き程度で良いのでブログを更新する！
我ながらゆるい目標設定だけどこれくらいが丁度良いはず。
ラベル: , ,