VisualForceで jQuery Mobile を使用する。

SalesForceがMobileSDKと関連ドキュメントを続々リリースしているようなので、この先あまりニーズは無いかもしれませんが、VisualForce での jQuery Mobile を使用する場合のポイントです。

１．jQueryの取得
jQueryのホームページから、jQuery、jQueryMobileのリソースをダウンロードし、静的リソースに格納。
なお、CSSはThemeRollerを使うと便利ですが、このへんの使い方は割愛します。

２．VisualForcePageの作成
VisualForceでjQueryMobileを使用するには、VisualForce内にhead部とbody部を作成し、通常のjQueryMobileと同様のコードを書けば、問題無く動作します。
タグと静的リソースの参照は以下のようになります。

Visual Force Page

ポイント１

<apex:page>

タグの"standardStylesheets"を"false"にすること。こうしないとページにSalesForceのスタイルシートが適用されてしまいます。

ポイント２
機器の縦横の向きを変更した場合に、自動的に表示幅を合わせるために、metaタグでviewportの設定をしています。jQueryMobileのサンプルでは、

<meta name="viewport" content="width=device-width, initial-scale=1"/>

となっていますが、これだとiPhone,iPadではうまく動作しませんでした（横向きにしたときにサイズがオーバーする）。

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>

とすることで、正しく表示されるようになりました。

なお、一応これでVisualForceの画面がモバイルサイトっぽくなりますが、あくまでこれは個別のページをjQueryMobileで表示しているに過ぎず、ログイン画面やホーム画面はPC用の画面のままということになります。