tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:VisualforceとJQueryMobile

ドットインストールでJQueryMobileの使い方を勉強しました。JQueryMobileってさわったことなかったので全然わからないところからのスタートだったのですが、すごく分かりやすい動画と説明で大体どんな感じかというのは確認できました。・・というわけでさっそくVisualforceで試してみました。

ちょっと長いですが動かしてみた時のサンプルです。

PCで表示される内容はこんな感じです。
f:id:tyoshikawa1106:20130830212049p:plain

キャプチャに全部は入りきらなかったのですがモバイルっぽい画面になりました。
こういう画面って画像や難しいCSSを使っていると思っていたのですが、JQueryMobileで簡単に表示できるんですね。すごく便利です。


モバイル端末のブラウザ表示したときはこんな感じです。
f:id:tyoshikawa1106:20130830212256p:plain:w200


だいたい雰囲気が掴めたところでもう少しコードを綺麗にしてみようと思います。
JQueryMobileでは基本的に次のような構造になるみたいです。

これで画面毎にHeader,Content,Footerの部分が書き換わる感じになります。
同じ内容なら画面作成の度に繰り返し記載するのは面倒なのでテンプレート化して共通部品として試用できるようにしておきたいと思います。

metaタグの宣言やcssとscriptの宣言の部分もすこし長いので別ページにまとめてから読み込むようにしてみました。

あとは次のような感じでテンプレートを読み込んで使用できます。

<apex:page controller="JQueryMobileSearchController" docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false">
    <apex:composition template="JQueryMobileTemplate">
        <apex:define name="title">
            <apex:outputText value="Account Search" />
        </apex:define>
        <apex:define name="header">
            <h1>
                <apex:outputText value="{!$ObjectType.Account.Label}" />
            </h1>
        </apex:define>
/** 以下省略 **/


テンプレート化すると綺麗にまとまっていろんなことが楽になると思います。


以上のことを踏まえて最後に取引先の検索画面と詳細画面をJQueryMobileを利用して作ってみました。

取引先検索画面はこんな感じになります。
f:id:tyoshikawa1106:20130830215914p:plain

取引先名をクリックすると取引先詳細画面が表示されます。
f:id:tyoshikawa1106:20130830215935p:plain


まだ基礎的なところしか試せていませんがJQueryMobileなかなか楽しかったです。
雰囲気も少しつかめたので、次は以前良くわからなくてあきらめた"Mobile Pack"を試してみたいと思います。


Mobile Pack for jQuery Mobile
http://www2.developerforce.com/mobile/services/mobile-packs
f:id:tyoshikawa1106:20130830220451p:plain