jQTouchのノウハウまとめ(その1:動作の基本)
まず、jQTouchの動作について説明します。
基本的な動作は、
「bodyタグ直下のdivタグの表示を入れ替えていく」
が基本になります。
つまり、以下のようなhtmlがあったとします。
<body> <div id='home'> ..... </div> <div id='subA'> .... </div> <div id='subB'> .... </div> <div id='dialog'> .... </div> </body>
まず最初にアクセスすると、idがhomeのdivタグ部分だけが表示されます。
その後、リンクのクリックやJavaScriptの処理で、他のidのdivタグ部分を表示します。
このidが移動のためのkeyになりますので、必ず必要になります。
また最初のアクセス時にhome以外のid部分を表示する事もできますが(classにcurrentと記述)、その場合でも一旦homeが表示され自動的に移動して表示されます(試してないけど、そう書いてありました)。
ただこれだけだと当然最初に取得したhtmlしか表示できないWebアプリになってしまいますが、そこはAjaxを使って他のページを読み込んで表示する機能ももっていますし、普通にJavaScriptでAjaxの処理を追加する事もできます。
それでは、この動作の基本についてのノウハウです。
ノウハウ:URLをどうするか先に決めておく
お気づきだと思いますが、このような仕様のためURLは一つしかありません。
ブログやtwitterなどでは、トップページのURLと個人のURLがないと、ブックマークしたり人に伝えるのに不便になります。
そこでjQTouchを使う場合は、URLが一つでいいのか、分けるのであればどう分けるのかを先に決定しておきましょう。
私が運営するChanTo.me(モバイル版の画面)では、「トップページ」「各ユーザのページ」「各種設定ページ」でURLをわけるようにしています。
ノウハウ:div間の導線を決めておく
普通のhtmlを書いていると、とにかく表示したいURLにどんどんリンクしてたどってしまいます。
しかし、jQTouchでdiv間の移動にリンク(JavaScriptだとgoTo())を使いまくると、戻るボタンを押した時に思いがけないページが開いてしまう事になります。
例えば、ダイアログを開いて閉じる時に、[goBack()]せずに[goTo()]とすると、戻るボタンですでに終わったダイアログを開く事になります。
そこで導線を先に決めて、ちゃんと戻る場合はgoBack()を使うようにしましょう。goBackの引数にidを入れる事もできますので、困ったらgoBack('#home')を使うといいでしょう。
ノウハウ:goBackできない場合は、一旦homeにbackさせてgoToする。
例えば最初に書いたコードで、subAからsubBに移動する時に、直接移動させたくないとします。
この時、私がやったとは、以下のような処理です。
- homeの「pagaAnimationEnd」イベントでdirectionが「in」の時に、後述する保存された移動先情報を参照しあれば移動する処理をbindしておく。(CallBackEventの情報)
- subAで移動前に、JavaScriptの変数かjquery.dataを使って、移動先情報としてsubBと保存する。
- subAからhomeに移動する。
- 最初のcallbackイベントによりsubBに移動する。
以上で、subBのバックボタンで、subAには戻らずhomeに戻るようになり、思いがけない動作はしなくなります。
まず、基本的な動作でのノウハウでした。
他のノウハウはまた書いていきますので、お待ちください。