jQuery Mobile、正式版になって以降で初のアップグレードが行われました。

jQuery Mobile 1.0.1 Released

とはいえ、以前予告があった通り、1.1への繋ぎとなるマイナーチェンジ。機能的に大きく変わった点は無く、バグフィックスやサポートブラウザの拡張などのメンテナンスが行われたものが1.0.1として公開になっています。

1.1.0は、来月下旬に公開される見通し。 continue reading… [jQuery Mobile] 1.0.1公開

jQuery Mobileのマークアップ用チートシートに続いて、ページ関連イベントのチートシートをつくりました。

» jQuery Mobile Page Event Cheat-sheet

ページ遷移時のイベントは数も多く、「どの順番で呼ばれるんだっけ？」と忘れてしまうことがよくあるので、パッと見られる形であると便利かなと。

実はこのシートは、拙著「jQuery Mobileポケットリファレンス」(今日発売のハズ)に掲載した図の、体裁を整えたものです。各イベントの内容についても解説されていますので、よろしければお手元に(宣伝)。本家ドキュメントの意訳的なものは日本語リファレンスに載せていますが、書籍の方はもう少し噛み砕いたものになっています。 continue reading… [jQuery Mobile] ページイベント・チートシート

jQuery Mobileは、慣れてしまえば非常に扱いやすいシンプルなライブラリなのですが、どうも「とっかかり」が難しいという話を聞きました。

そこで今回は、まだプライベート・ベータですがWYSIWYGでjQuery Mobileサイトを構築できる無料サービス “Codiqa” を使って、ちょっとしたサイトをサクッとつくってみます。端的にホームページビルダーのようなもので、あまりの簡単さにガッカリされてしまうかもしれませんが…

なお、サンプルとしてつくってみるのは、3月末に東京で開催されるラグビー7人制の世界大会「HSBCセブンズ・ワールドシリーズ」の特設サイトという態です。実に11年ぶりとなる日本開催なのですが、あまりにも情報が手に入らないため、せっかくなので少しまとめておこうかと。少しでも興味あれば、是非、秩父宮(秩父ではなく、国立競技場の近く)に足を運んでください。 continue reading… [jQuery Mobile] 1時間でミニサイトをつくる

昨年暮れにようやく正式版1.0がリリースされたjQuery Mobile。先ほど、今後のロードマップとして次にバージョン1.0.1が、そして次にリビジョンが上がりバージョン1.1がリリースされることがアナウンスされました。

Upcoming Releases: 1.0.1, 1.1, and beyond

差し当って、要点をまとめ。 continue reading… [jQuery Mobile] バージョン1.0.1から1.1へのロードマップ

最近、海外のブログなどでも「スマートフォン向けサイトでのSEO」というキーワードが出てくることが増えてきました。SEOは常に正解の分からない得体のしれないオカルトに満ちた世界ですが、それでも今までの様々な試行錯誤から「定石」のようなものは出てきています。

そうした「SEOの定石」と、モバイルサイトでの「ユーザビリティ」を極力両立させるポイントについて、年明けにSEARCH ENGINE LANDで良い記事(How To Improve Mobile Commerce SEO Using JQM)があがっていました。そちらを参考に他の情報を加えつつ、jQuery Mobileを活用したサイト構築について少しまとめてみます。 continue reading… [jQuery Mobile] SEOとユーザビリティを両立させるポイント

jQuery Mobile用プラグイン(?) “Bartender” を試してみました。

これは、フッタなどツールバーのデザインをiOSのネイティブアプリ風にするためのものです。

プラグインと呼ぶには少し抵抗があるのは、スクリプトを一切含まないスタイルシートだけの拡張機能であることです。もちろんそれは悪いことではなく、軽量で動作する望ましいことなのですが。

ともあれ、簡単な実走方法とデモを用意してみました。 continue reading… [jQuery Mobile] BartenderプラグインでフッタをiOSアプリ風にする

I’ve just created jQuery Mobile Markup Cheat-sheet.

» jQuery Mobile Markup Cheat-sheet

This is almost just a “Data- attribute reference” of the official document, but I believe this can be still handy for both developers and designers

jQuery Mobileのマークアップ用チートシートをつくってみました。

» jQuery Mobile Cheat-sheet

jQuery Mobile 日本語リファレンスを拡張していく過程で、あったら便利かなと。

とりあえず、すぐに指定方法を忘れてしまうマークアップから。特に data- で始まる属性のリファレンスが折角公開されたので、手元に置いておきたいなと思い。それから、どんなものがあったかやはりすぐに忘れてしまう、ボタンアイコンの一覧。多分便利だと思います。ボックスの色分けは、なんとなくのグルーピングですが、あまり気にせず。

要望があれば、次はAPIのチートシートもつくろうかな…と思ってます。 continue reading… [jQuery Mobile] チートシートつくりました

jQuery用プラグイン “PhotoSwipe” を、jQuery Mobileに適用したサンプルを試してみました。

これは、jQueryを使ってタッチデバイス上でスタイリッシュなイメージギャラリーを作るためのプラグインです。jQuery Mobileに特化したものではないですが、親和性は高いはずなので、組み合わせてみます。

PhotoSwipeの基本的な機能は、アンカーで参照した先にある複数の画像を、インターフェースのついたスライドとして見せてくれるものです。今回は提供されているサンプルを踏襲して、3×3のサムネイル画面をつくり、サムネイルがクリックされるとスライドショーが開始されるようにしたいと思います。ただし、サンプルにはjQuery Mobile的にまずい点があるので、その辺の修正コードも含むようにしています。

さておき、簡単な実走方法とデモを用意してみました。 continue reading… [jQuery Mobile] PhotoSwipeプラグイン

jQuery Mobile用プラグイン “jQuery Mobile ActionSheet Plugin” を試してみました。

これは、jQuery Mobileで iOS のアクションシート風のインターフェースを簡単に実装するためのプラグインです。

通常、フレームワークでダイアログを表示するには外部に別のページとして作る必要があります。あるいは同ファイル内にページを書くこともできますが、その場合は複数ページテンプレートにしなければなりません。そうした煩雑さを避け、なおかつマークアップだけで簡単にポップアップを実装できるのが、このプラグインの強みでしょう。

とりあえず、簡単な実装方法とデモを用意してみました。 continue reading… [jQuery Mobile] ActionSheetプラグイン