Home > 技術 > jQueryMobileのかゆいところに手が届くお作法メモ

jQueryMobileのかゆいところに手が届くお作法メモ

jQueryMobileを使ってのスマートフォンサイトの構築メモの記事ではスマートフォン開発環境の構築に関するTipsとjQueryMobile(以降jqm)のちょっとした書き方に関する内容だったので、今回は「こうゆうときjqmではどうするの?」といったものをサンプルコードを交えてまとめてみようと思います。

サクッとデモだけ見たいーという方はjQueryMobileのかゆいところに手が届くお作法メモからどうぞ。

jqmのページロード時イベントの呼ばれる順番

各イベントに関してはこちらのドキュメントを見ていただくとして、jQuery Mobile Docs - Events

初期ページのロード時の順番

  1. pagebeforecreate
  2. pagecreate
  3. pagebeforeshow
  4. pageshow

Ajaxページ遷移時の順番

遷移元のページをhide系のイベントで見えなくして、遷移先のページをshow系のイベントで見えるようにしています。
その順番は以下のようになりました。

  1. pagebeforecreate
  2. pagecreate
  3. pagebeforehide
  4. pagebeforeshow
  5. pagehide
  6. pageshow

表示される前に何か事前に処理しときたい場合は、pagebeforeshowイベントで処理し、画面が表示された後に何かしたい場合は、pageshowイベントを使うとよいかもしれません。

■デモ
jqmイベントの呼ばれる順番

$.mobile.changePageを独自に呼ぶ(get)

mobileinitイベント内で、$.mobile.ajaxEnabledfalseをセットしています。
これが重要で、この設定をしておけばリンククリック時に勝手にAjaxページ遷移がされないようになります。

あとはクリック時に$.mobile.changePageを呼んであげるだけですが、第4引数をtrueにしときます。
これでhash値が書き換えられるので履歴に残るようになります。

「ajaxEnabledをtrueにした状態でリンクをクリックした場合」と、「changePageを独自に呼ぶ(get)でリンクをクリックした場合」とでは最終的に同じchangePageを呼ぶという意味では違いはほとんどありません。

そしてこのパターンのデメリットとしては、いろんなリンクをクリックしてAjaxページ遷移をしまくるとその分親となるbodyにどんどんHTMLがappendされて肥大していきます。
Ajaxページ遷移するボリュームがそこまででないなら問題はないと思いますが、いろんな条件を見ながら検索条件を絞り込むような画面だとこの遷移が頻繁に起こってしまうのでもしかすると重くなってしまうかもしれません。
(ページが肥大しないようにpostを使った方法を次でご紹介します。)

こちらのデモでは、毎回changePageするたびにカウントアップして別のページを読み込んでいると思わせています。
これで次の画面へ行って戻ってくると画面にはどんどんページが追加されていきます。

■デモ
$.mobile.changePageを独自に呼ぶ(get)

$.mobile.changePageを独自に呼ぶ(post)

こちらのサンプルは$.mobile.changePageを独自に呼ぶ(get)とほとんど同じですが、changePageに渡すtypeがpostになっています。
こうするとhash値はtest.htmlのままで、後ろにhoge=fooが付かないので、パラメータが可変でも常に1つのページを読み込むだけという状態になります。

デモを触っていただくと分かりますが、getのときは画面遷移をするとページ数がどんどん増えていきましたが、postのパターンだと常に2個です。
2個というのは、初期に表示したページと次に読み込んだページの2つという意味です。

パーマリンクとしてhash値にパラメータをちゃんと持たせたいという場合には向きませんが、とくにそういった重要性がない場合はpostを考慮してみるのも一つの方法かもしれません。

■デモ
$.mobile.changePageを独自に呼ぶ(post)

HTML装飾をjqmにさせない

まずはdata-role="page"のタグのdata-themeに適当な文字を入れておきます。
つまりthemeとしては存在しない文字列になります。

これだけだと、コントロール系の要素は勝手に装飾されてしまうので、以下のようにkeepNativeにCSSセレクターを指定しておきます。
以後はこのセレクターをclassに指定した要素は装飾されないようになります。

■デモ
HTML装飾をjqmにさせない

page()でHTMLの装飾

「Ajaxでデータを取得して画面にappendするときにHTMLを装飾したい!」という場合にすごく有力なメソッドがこのpage()です。
以下のサンプルのようにjqmのdata-roleを含んだHTMl文字列をappendして、page()を実行するとまるっと装飾されます。

便利!

■デモ
page()でHTMLの装飾

buttonMarkup()でボタンの装飾

data-rolebuttonを持つ要素を装飾したい場合は、このbuttonMarkup()を使います。
でもぶっちゃけpage()すればいいんだと思います。

■デモ
buttonMarkup()でボタンの装飾

listview()でリストの装飾

ul要素を含むHTMLを装飾したい場合はlistview()を使い、li要素しかない場合はlistview('refresh')を使います。
でもぶっちゃけpage()すればいいんだと思います。

■デモ
listview()でリストの装飾

URLを変えずにAjaxページ遷移+戻る

この需要は意外とあるんじゃないカナーと思うのですが、
たとえば詳細ページから写真の一覧を表示したいけど、hash値を変えるとブラウザバック時に写真一覧に戻っちゃうからヤダッ!
というケース。

Ajaxページ遷移で読み込んだページの戻るボタンは、jqmのものではなく独自の挙動にしたいので$.mobile.page.prototype.options.addBackBtnをfalseにしときます。

遷移元ページの進むと遷移先ページの戻るは同じchangePageを呼び出しますが、
戻るのほうは新たにAjaxページ遷移するのではなくすでに画面にロードされているPageに戻ればよいので第1引数にはid(data-url)を指定します。
さらにトランジションとしては戻るアニメーションをしてほしいので、第3引数はtrueをセットしています。

そして第5引数にtrueをセットして、hash値が変わって呼ばれたということにします。
この引数は確かjQueryMobileのアルファ4からいつの間にか追加されててjQuery Mobile Docs - Methodsにも書かれていません。

遷移元となるページのdata-role="page"のタグにはidを指定しておきます。
このidが戻るときのchangePageのtoになります。

■デモ
URLを変えずにAjaxページ遷移+戻る

hashChangeイベントを自分で監視したい

以下のようにするだけです。

■デモ
hashChangeイベントを自分で監視したい

$.mobile.widgetでカスタムな要素を作る

jqmはチェックボックスやラジオボタンを自動的に装飾してくれますが、そういった処理を自分オリジナルに作ることができます。
以下の例ではHTML要素に対してmarquee()というメソッドを呼ぶとその中にmarqueeタグが挿入されるだけのサンプルになります。

jqmの装飾する処理はDom構築が終わったタイミングで$.mobile.page内から呼ばれる_enhanceControlsメソッドにより行われますが、独自に作ったwidgetは呼ばれないので、readyになったタイミングで呼んであげる必要があります。(当たり前ですね)

そしてmarqueeの値を変更したあとにmarquee("refresh")を呼んでいますが、↑のほうで見たことがある記述ですね。
そう!listview('refresh')と同じですね。

こうゆう感じでwidget化しとくとrefreshするだけで再装飾されるので便利かもしれません。

■デモ
$.mobile.widgetでカスタムな要素を作る

$.mobileの拡張

jqmに特化したコードはjQueryのPluginとして作るとあとあと面倒かもしれないので、$.mobile配下に入れておくとよいかもしれません。

■デモ
$.mobileの拡張

僕のmobileinitイベント

最後に今僕が使っているmobileinitイベントの内容をご紹介。
といってもベタな感じではありますが。

個人的にひとつ重要なのが、$.fixedToolbars.setTouchToggleEnabled(false)です。

これは、headerやらfooterをfixedにした場合に画面内のどこかをタップするとfixedな要素が消えてしまうのを防ぎます。
多分ですが、スマホサイトでよく見るfixedな要素は広告が多く、これが常に追従してくるのはさすがにちょっとという人のためにfixedな要素を消すためにあるのかなーなんて思ってたりします。(違うか!)

広告でしたらサイト訪問者がどこかをタップしてfixedな要素を消すのはよいとは思うのですが、サイトとして重要な要素の場合はタップしようが何しようがfixedでいて欲しいと思うので、このプロパティはfalseにしとくのがよいかと思っています。

まとめ

これらのデモはjQueryMobileのかゆいところに手が届くお作法メモから参照いただけます。

まだまだアルファ版なので仕様がどう変わるか分かりませんが、現時点でのjQueryMobileの完成度としては結構よいのではないかと思っています。
またそもそもデザインも何から何までjQueryMobileに依存するサイト製作は今後あまり浸透せず、イベント回りはjQueryMobile使うけどデザインは独自とかある程度関係性は疎結合として使われていくんじゃないかなーと。

いずれテーマをjQueryMobileのサイト上で作れるようになるとデザインの幅がグッと広がるので楽しみです!

これらのTipsがjQueryMobileを使うの人たち助けになれば幸いです。

■追伸:
vclickイベントって何もんなんだろう・・・

■関連記事
jQueryMobileを使ってのスマートフォンサイトの構築メモ

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)
たにぐちまこと
アスキー・メディアワークス
売り上げランキング: 784

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1271
Listed below are links to weblogs that reference
jQueryMobileのかゆいところに手が届くお作法メモ from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > jQueryMobileのかゆいところに手が届くお作法メモ

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top