2010/10/26

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

2010/10/07

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

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

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

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


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

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


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

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

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