Category Archives: jQuery Mobile

jQuery Mobileの一番シンプルなサンプル

Posted on by

jQuery Mobileで開発を始めるときは、次のHTMLをスニペットとして使うと便利かも。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hash watcher</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

</head>
<body>
<div data-role="page">
<div data-role="header">header</div>
<div data-role="content">body</div>
<div data-role="footer">footer</div>
</div>
</body>
</html>

jQuery Mobileのファイル群は、CDN(Contents Delivery Network)を経由して読み込んでいます。data-role属性を付加してdiv要素をいくつか追加すると、最初の土台が出来上がり。ここから、さまざまなプログラムを作っていきましょう。

jQuery Mobile Alpha 4がリリースされました！

Posted on by

大注目のモバイル向けフレームワーク「jQuery Mobile」がバージョンアップいたしました。

α版としては最後のリリースとなる予定の「Alpha 4」となります。リリース文を適当に翻訳してみました。
が・・途中で力尽きました・・また、時間があるときに続きを書きますが、ひとまずご参照くださいませ。

原文はこちら。かなり適当な翻訳なので、間違いがあったら申し訳ありません。

jQuery Mobile teamは、この度いよいよα版のラストとなる「Alpha 4」をリリースしました。本バージョンでは、次のβ版に向けて多くの新しい機能を実装しました。さらに 150以上のバグを修正し、パフォーマンスも改善しました。

さらには、1.0の正式リリースに向けてドキュメントの整備も進めています。まずは、Alpha 4のハイライトをご覧ください。

Windows Phone 7(WP7)をサポートしました

Windows Phone 7（WP7）を対応プラットフォームに加えました。これにより、またデスクトップ版の IE7（8, 9も）も完璧とは言えないまでもサポートをしています。

角丸やドロップシャドウなど、一部の装飾はサポートできていませんが、今後メディアクエリーなどを改良することで、改善してまいります。また、今年の後半には WP7版の IE9にも対応します。

data- 属性がネームスペースに対応しました

HTMLタグに付加される「data-role」などの属性に、ネームスペースを利用できるようになりました。これにより、他のフレームワークやプラグインとの衝突を防ぐことができます。
これを利用するには、jqmData、jqmRemoveDataとjqmHasDataメソッドを使います。

標準の設定はこれまでと同様なため、すでにjQuery Mobileを使って作ったサイトは、そのままで問題ありません。もし、ネームスペースを導入したい場合は、例えば「foo」を使う場合は、「data-foo-role」となります。

この仕組は、jQueryの「noConflict」メソッドの処理に似ており、W3Cからも推奨された方法です。

タッチ/マウスイベントの実装（aka “Fastclick”） ※aka？

私たちはこれまで、モバイルデバイス上でのマウスクリックとタッチイベントの制御に苦心していました。Androidや Blackberryなどの端末がタッチイベントとマウスイベントが重複したりしていたためです。

そこで、「バーチャルイベント」を構築しました。使い方は簡単で、これまで同様jQueryの「bind、delegate、live、one」などのメソッドを使うだけです。
「vmouseover、vmousedown、vmouseup、vmouseclick、vmouseout」などのイベントを捕まえれば、実際のデバイスでのイベントはjQuery Mobileが吸収します。

PhoneGapとの親和性を改善

私たちは、jQuery Mobileでネイティブアプリを作ることを模索しています。しかし、Alpha 3には、大きな問題としてPhoneGap上でURLが壊れてしまうという問題がありました。
これは、jQuery 1.5のファイルシステムに問題があり、1.5.1で改善されました。

加えて、これまで jQuery Mobileではクロスドメインをサポートしていませんでしたが、「$.mobile.allowCrossDomainPages」プロパティの追加で、これをサポートしました。URLを次のようにしてください。

file://dir1/dir2/myPhoneGapApp.html#https://myHomeServer.com/dir1/dir2/foo

こうして、Alpha 4と jQuery 1.5.1の組み合わせで PhoneGapで発生していたバグに対応できました。みなさんの協力に感謝します。

フォームをリストビュー内に

リストビューを改善したことで、フォームの「ラベル」と「コントロール」をリスト内に収めることができるようになり、見た目を整えやすくなりました。
画面幅の広い端末の場合、ラベルがコントロールの左側に回りこんで表示されます。

「読み取り専用リストビュー」はこの改善により、サムネイル画像、アイコン、カウンタバブルなど、さまざまなものをいれこむことができるようになっています。

テキストの変更（多言語化？）をやりやすく

例えばAjax通信中に表示される「loading」の表示や、エラーメッセージ、検索エリアの標準ラベル、戻るボタンやダイアログの閉じるボタンは、オプションで簡単に変更することができるようになりました。

これにより、多言語化がしやすくなりました。

＜詳細省略＞

Ajaxでの画面遷移時にタイトルを自動的に変更されるように

例えば、ページを表示した後「送信」ボタンをクリックした場合、フレームワークはAjaxで次のページを取得します。しかし、この場合はタイトルは書き換わりませんでした。
Alpha 4では、これを引っ張るようにしました。

バグ修正

・・・力尽きました・・

使っていきましょう！

jQuery Mobileのデモサイトでソースを表示する方法

Posted on by

jQuery MobileのDocs&Domosで、ある目的のページに行ってHTMLソースを参照したいと思った場合、単純にソースを表示すると常に最初の画面のソースが表示されてしまいます。

これは、Ajaxでページ遷移がされているため、URLが実際には変わっていないから。しかし、実はURLを少し書き換えるだけで閲覧できるようになります。例えば次のURLの場合・・

Continue reading →