月別: 2014年3月

themerollerでデザイン作成

自分の欲しいデザインがjQueryMobileから提供されていていない場合、
自作する必要がある

そんなときには、jQueryが提供している
ThemeRollerというツールを使う

http://themeroller.jquerymobile.com
へアクセスし
テーマを作成していく

使い方が日本語で掲載されている
http://dev.screw-axis.com/doc/jquery_mobile/resources/themeroller/overview/
を参考にしながら使えば効率的

また、自分でデザインするのは面倒だったり
デザインまで考えるのはちょっと…という場合には

Androidみたいなデザインにするなら
https://github.com/jjoe64/jquery-mobile-android-theme

iPhoneみたいなデザインにするなら
https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme
で公開されている

Android theme for jQueryMobileの使い方は
githubからzipファイルをダウンロードし
解凍したら
WebアプリのCSSディレクトリ配下へ
.cssファイルをコピー

また、Javascriptファイルも
WebアプリのJSディレクトリ配下へ
コピーする

これであとは
headの中で
script要素の
src=””でファイルパスを指定する

これで使えるようになるけど
テーマフレームワークの代わりに使われるため
data-theme=””
での指定ができなくなる

jQueryMobileのデザイン変更

デフォルトでも使えるけど見た目を変えたいのならデザイン変更が必要

HTMLのサイトならCSSで変えるけど
jQueryMobileなら
テーマフレームワークを使えば簡単にデザイン変更できる

このテーマフレームワークは
a~zまであり
a~eがjQueryMobileから提供されていて
f~zはユーザーが独自定義できる

テーマを指定するには
data-theme=””
で a~z を指定する

例えば、ボタンにテーマaを適用するには

<a href="#" data-role="button" data-theme="a">テーマを変えたボタン</a>

となる

ノーマルのほうも一緒に出すとわかりやすいかも

<a href="#" data-role="button" data-theme="a">テーマを変えたボタン</a>
<a href="#" data-role="button">テーマなしのボタン</a>

テーマは、ボタン以外にも使える
テキストフィールド
チェックボックス
などにも使える

また、1つずつでは面倒くさいので
まとめて設定したいのなら
data-role=”header”
data-role=”content”
へ指定すれば一括変換も可能

ただし、面倒くさいからといって
data-role=”page”
へ設定しても
data-role=”content”
data-role=”navbar”には適用されるけど

data-role=”header”
data-role=”footer”
には適用されない

このため、全部同じテーマにするには
data-role=”page”
data-role=”header”
data-role=”footer”
へテーマを指定することになる

ソースにすると

<div data-role="page" id="top" data-theme="e">

<div data-role="header" data-theme="e">
<h1>テーマ</h1>
</div>

<div data-role="content">
<a href="#" data-role="button">ボタン</div>
</div>

<div data-role="footer" data-theme="e">
</div>


</div>

となる

カスタムデータ属性ではなく、Javascriptでもできる

同じテーマにするには
やり方は

$(document).on("mobileinit",function(e){

$.mobile.page.prototype.options.theme="e";
$.mobile.page.prototype.options.headerTheme="e";
$.mobile.page.prototype.options.footerTheme="e";
});

このJavascriptを共通ファイルへ書いておけば各HTMLファイルへ書く必要がないし
テーマを忘れることもなくなる

便利ツールを使うと開発効率アップするのでメモ

ログ出力でアプリ動作の確認

ログ出力するには

console.log("ログメッセージ");
console.info("情報メッセージ");
console.warn("警告メッセージ");
console.error("エラーメッセージ");

となる

iPod touchの実機でやるにはsafariが必要なのでパス
Androidはadbコマンドから行える

PCでの開発には
Eclipse + jQuery WTPプラグインの組み合わせが便利

このプラグインは
jQueryのコード補完と
PDTサポートもある

ただ、jarファイルか上書きされるため
不安なら
vmware や virtualbox で仮想マシンを作り開発環境をつくるといい

jQueryWTPでプロジェクト作成は
phpで作成する

これは、サーバー用のコード作成もするため

あとプロジェクト作成のときに
Javascriptサポート
にチェックいれないとJavascriptの補完機能が使えないので注意

画面遷移イベントその2

pageglobal

これほ、画面読み込みが完了したイベントとして呼び出される

使い方は

$(document).on("pageglobal","#main",function(e,data){
  //イベント処理
});

dataに入る値は、pagebeforeloadイベントとおなじで
遷移元画面のDOM
遷移先画面のDOM
絶対URL
ホスト内のURLなどになる

キャッシュされた画面を読み込むときには実行されないので注意

pagebeforechange

pagebeforechange
pagebeforehide
pagebeforeshow
は、画面遷移前に呼び出される

違いは、呼び出し場所が
グローバルイベントか
遷移前画面か
遷移後の画面かということ

使い方は

$(document).on("pagebeforechange","#main",function(e,data){
   //イベント処理
});

dataには
遷移先の画面のDOMになる
toPage
画面遷移のオプションになる
options
が設定される

optionsには
画面遷移が呼ばれたときのパラメーターが入ってくる

pagebeforehide

画面遷移により、遷移元の画面が非表示になる前に呼び出される
setInterval()によるタイマー処理の停止
画面の中で行われているアニメーション停止
位置情報やモーションセンサーの値の取得などの停止もここで行う

使い方は

$(document).on("pagebeforehide","#main",function(e,data){
   //イベント処理
});

data.nextPageに遷移先の画面のDOMが設定される

画面遷移元のイベントとして
pageremove
pagehide
があり、そこで画面遷移時のイベント処理もできるけど
これだとDOMがキャッシュされない場合、
pageremove
pagehide
の実行時にはDOMが削除されてしまい
遷移前の画面のDOMにアクセスできないので画面の終了処理はここで実行する

pagebeforeshow

遷移先画面が表示する前に呼ばれる

このイベントは、画面のDOMのキャッシュの有無に関わらず呼び出されるので
画面表示の際に毎回変わるような情報を表示するときに使う
用途としたて考えられるのはニュースとか

pagebeforeshowの使い方は

$(document).on("pagebeforeshow","#main",function(e,data){
  //イベント処理
});

data.prevPageに遷移元画面のDOMが設定される

pageremove

画面のDOMが削除されたときに呼ばれるイベント
画面がDOMにキャッシュされる場合
これは、トップページや明示的にキャッシュ設定されているときには呼び出されない
このイベントが呼ばれたときの状態では
遷移元画面のDOMにはアクセスできない

pageremoveの使い方は
$(document).on(“pageremove”,”#main”,function(e){
//イベント処理
});
[/javascript]

pagehide

画面遷移が完了し、遷移元画面スクリーンが消えると発生するイベント

これも画面がキャッシュされず
DOMが削除されているなら
前の画面のDOMにアクセスすることはできない

さすがにないものには戻れない

pagehideの使い方は

$(document).on("pagehide","#main",function(e,data){
   //イベント処理
});

data.nextPageに遷移元画面のDOMが設定される

pageshow

画面遷移が完了し、遷移先画面がスクリーンに表示された後に発生するイベント

setInterval()によるタイマー処理の開始
画面表示直後のアニメーション開始
位置情報、モーションセンサーなどの値の取得開始などをここで実行する

jqPlotでチャート表示するときには
チャート描写はここで行う
為替とか株のチャートを作るならここのイベントを使う事になりそう

photoSwipeの初期化もここで行うため
結構多用するイベントになる

pageshowの使い方は

$(document).on("pageshow","#main",function(e,data){
  //イベント処理
});

data.prevPageに、遷移前画面のDOMが設定される

pagechange

pagehide
pageshow
とほぼ同じだけど、グローバルイベントとして実行される

pagechangeの使い方は

$(document).on("pagechange","#main",function(e,data){
//イベント処理
});

data.optionsには、画面遷移が呼ばれたときのパラメーターが設定される

data.toPageには遷移元画面のDOMが設定される

pagechangefailed

pagechangefailedは、画面遷移が失敗したときに実行されるイベント

使い方は

$(document).on("pagechangefailed","#main",function(toPage, options){

});

となる

toPageでURLやDOMを取得する

optionsには、画面遷移が呼ばれたときのパラメーターが設定される

画面遷移イベント

pagebeforechange

画面遷移が呼び出される前に呼び出されるイベント

$(document).on("pagebeforechange",function(e, data){
   //イベント処理
});

dataは、
options
toPage属性をもつ

optionsは、画面遷移のオプション
toPageには、遷移先の画面のURL、もしくはDOMが入る

pagebeforeload

HTMLの読み込みがはじまる前に呼び出されるイベント
このイベント発生後、次の遷移する画面のDOMがAjaxにより読み込まれる

読み込まれるDOMは

<div data-role="page">

</div>

で指定された要素の中になる

jQueryMobileの場合、この中がページとして扱うため、ふつうのHTMLとは異なることに注意する

使い方は

$(document).on("pagebeforeload","#main",function(e, data){
     //イベント処理
});

dataにふくまれる情報はかなり多く
絶対URL
ホスト内のURL
遷移元画面のDOM
遷移先画面のDOM
などがふくまれる

pagebeforecreate

DOMのロード完了時に呼ばれるイベント
この状態のDOMは
jQueryMobileで画面部分が初期化される前なので
pagebeforecreateで追加されたDOMは
jQueryMobileのスタイルが適用される
このため、
jQueryMobileのスタイルを適用する静的なDOM追加に使うことになる

<div data-role="page" id="main">
<div data-role="content">
<div id="box"></div>
</div>
</div>

へ

$(document).on("pagebeforecreate","#main",function(e,data){
$(#box).append("<button>ボタン追加</button>");
});

とすれば、

<div id="box"></div>

へボタンが追加される

pagecreate

pagebeforecreateイベントとほぼ同じ
違いは、beforeじゃないから
body要素へスタイルが適用された後になること
通常は
pagebeforecreateを使う

使い方は

$(document).on("pagecreate","#main",function(e){
   //イベント処理
});

pageinit

jQueryMobileでスタイルが適用された後に呼び出される
このタイミングでDOMはjQueryMobileにより変換される

注意点として、pageinitイベント以降に
DOMに要素を追加しても
jQueryMobileのスタイルが適用されないということ

つまり、pageinitイベントの中で要素を追加しても
jQueryMobileのボタンではなく
HTMLだけで作成したボタンになってしまう

$(document).on("pageinit","#main",function(e){
$("#box").append("<button>追加ボタン</button>");
});

これだと、ただのHTMLのボタンになる

このため、jQuerymobileのスタイルを適用するには
追加下要素へ対して
trigger(“create”)
を実行する

$(document).on("pageinit","#main",function(e){
$("#box").append("<button>追加ボタン</button>");
$(#box).trigger("create");

});

とする

pageinitイベント以後に要素を追加したときには
trigger(“create”)
を忘れないこと

また、
日付コンポーネント
jQueryMobile Validation
など、サードパーティーコンポーネントの初期化はここで行うことになる

画面遷移イベントの流れ

画面を読み込んだ後なら
日付を表示するコンポーネント
入力値のチェックをするコンポーネントを動的に押し込む

画面を表示した後なら
ポップアップアニメーション開始、
位置情報取得開始

画面を非表示にする前や、画面遷移する前なら
アニメーション停止、
位置情報取得の終了など

流れとしては、画面遷移スタートで
pagebeforechangeイベント

DOMがロードされ
pagebeforecreate発生して
pagecreate

ウィジェット初期化してから
pageinit

そして
pageload

次に、pagebeforechange
ここまで元画面

pagebeforehideて元画面をかくして
pagebeforeshowで次画面表示

pageremoveで元画面のDOM削除

pagehideでかくして
pageshowで表示

pagechangeで画面切り替え

となる

画面遷移字に発生するイベントは大きく分けて3つ

すべての画面遷移で呼び出されるグローバルイベント
pagebeforechange
pagebeforeload
pageload
pagebeforechange
pagechange

遷移元の画面で発生するイベント
pagebeforehide
pageremove
pagehide

遷移先の画面で発生するイベント
pagebeforecreate
pagecreate
pageinit
pagebeforeshow
pageshow

となる

イベントが発生するフェーズに分けると

次のHTML画面の読み込みフェーズ
pagebeforeload
pagebeforecreate
pagecreate
pageinit
pageload

画面の遷移フェーズ
pagebeforechange
pagebeforehide
pagebeforeshow
pageremove
pagehide
pageshow
pagechange

の2つのフェーズになる

また
条件により実行されるイベントがある

次画面の読み込みフェーズは
画面かDOMにキャッシュされているとき実行されない

jQueryMobileによるWebアプリやサイトのトップページは必ずキャッシュされるため

pagebeforeload
pagebeforecreate
pagecreate
pageinit
pageload

は最初の1回のみ実行される

DOMにキャッシュする画面では
画面遷移時に
pageremove
は発生しない

ブラウザ標準イベントと仮想マウスイベントの違い

反応は仮想マウスイベントのほうが速い

ブラウザ標準のmousemoveイベントだと
スクリーンにタッチした瞬間しかイベントが発生せず
スクリーンをなぞるようなイベントが取得できない

仮想マウスイベントのvmousemoveなら
スクリーンをなぞるようなイベントの取得が可能

ブラウザ標準の
click
mousedown
mouseup
だと連続してスクリーンをタップしたとき
前のイベントを取得するまでは次のイベントを取得できないので
イベントの取りこぼしが頻繁に続出する
つまり反応が悪い

仮想マウスイベントにすると、これより反応がよくなるので
イベントの取りこぼしが減る
なくなるわけではないので注意

このため、仮想マウスイベントのほうがレスポンスのよいアプリになる

仮想マウスイベント

jQueryMobileでは、タッチとマウスによるイベントを透過的に扱う仮想マウスイベントが使える

仮想マウスイベントは、
jQueryで使えるマウスイベントの
click
mousedown
mouseup
mousemove
mouseover
の先頭に
v
を付けたイベント名になる

以下は仮想マウスイベントのメモ

vclick
マウスクリック
もしくは
スクリーンタップ

vmousedown
マウスクリック
もしくは
スクリーンに触れたとき

vmouseup
マウスのボタンを離したとき
もしくは
スクリーンから指を離したとき

vmousemove
マウスが要素内に入ってきたとき
もしくは
スクリーンをタップしたまま指を動かしたとき
座標は現在タップしている位置になる

vmouseover
マウスが要素内に入ってきたとき
もしくは
スクリーンをタップしたまま指を動かしたとき
座標は最初にタップした位置になる

注意点としては、
vmousemove
vmouseover
の場合、スクリーンをタッチして上下に滑らすと
一緒に画面がスクロールし
期待した値が取得できない

このため、
preventDefaultを使い、
ブラウザのイベント伝播を防ぎ
ブラウザのスクロールを防ぐ必要がある

$("#box").on("vmousemove",function(e){

//ブラウザのデフォルト動作無効化
e.preventDefault;

//座標取得
x = e.pageX;
y = e.pageY;

});

となる

スクロールの開始と静止を検知するイベント

スクロールの開始を検知するscrollstartイベント
そして、スクロールの終了を検出するscrollstopイベント
の実装方法

例えば
一番上までスクロールしたら
1px下へスクロールさせ
ブラウザのnavigation bar を隠す

こうすると、画面が見やすくなる

$(window).on("scrollstop",function(e){

//スクロール位置が一番上のなったら
if(document.body.scrollTop== 0){

//縦方向へ1pxスクロールする
window.scrollTo(0,1);
}

});

このように、スクロール位置は
document.body.scrollTop
で取得できる

あと、Twitterみたいに、画面の一番下へ
スクロールしたら次のデータを読み込んで表示する
というように、一番下までスクロールしたことを検知するには

$(window).on("scrollstop",function(e){

//一番下までスクロールしたことを検知
if((document.body.scrollTop + window.innerHeight) == document.height){
//一番下までスクロールしたときの処理

}

});

となる

このように、
一番下までスクロールしたときの
スクロール位置である scrollTop
と
スクリーンの縦幅になる window.innerHeight
を足して
document.height
つまり、画面の縦幅と同じなら
一番下に達したと判断できる

端末の向きを検知するorientationchangeイベント

jQueryMobileでは、端末の向きの変更を検知する
orientationchangeイベントが定義されていて
これを使うには

$(window).on('orientationchange',function(e){
orientation = e.orientation;
});

orientationの値は
縦から横向きになると landscape
縦なら portrait
になる

Androidアプリでも
縦はportrait
横向きなら landscape
になる