4. なるべく画像を使わないでCSSで描画する
CSS3が当たり前の時代になって、ほんとに楽ちん＆軽量化できるようになりましたね。その昔テーブルコーディングの時代からピクセルパーフェクトとか、CSS2の時代までも画像のスライスとか、だいぶ手がかかっていました。
角丸も、シャドウも、グラデーションも、全部CSS。
以前あげた記事でも、麻雀点数計算アプリsuzumeで実際に採用してる方法を紹介しています。
ヘルプ画面のアコーディオンリストのアニメーションも、プラグインを使ったりせずに最低限のDOM操作、CSSでの描画を心がけています。
（アプリではこのソースをjQueryでタッチデバイス用に書き換えています）
ただ、positionのtop,right,bottom,left値を変更したり、heightの値を変更する手法は、どうしてもリフロー・リペイントが発生しレンダリングがもっさりになりがちです。
アニメーション中は高さの変わる要素以降の要素もすべてずれていく様子が描画されるので、ガタガタしますね。改善したいところです。
見出し横のアイコンも、通常のWebサイトでChromeで見たら気持ちよく動いてくれるのですが･･･アプリでは、くるっとなってるのがまったくわかりません(；´Д｀)
See the Pen accordion list by natsumi (@mayo31) on CodePen.18228
5. ハイブリッドアプリに限らず、タッチデバイスではonClickを使わない
onClickって、便利なんですよねー。
Webサイトがもともとあって、それをアプリ化しようとした場合にも、そのまま動いてくれるので楽ちん。
･･･ですが、アプリだとやたらともっさもさしませんか？(；´∀｀)
その理由がこちら。
連載：初めての PhoneGap 第6回 クリックイベントの遅延に注意
onClickっていうのは、「クリックしたよ！」っていうことを判定します。
押して、押し続けて（0.000何秒でも）、離した瞬間、「カチッ」とクリックし終わったということになります。
触った瞬間はまだクリックしきっていない。
押している間もクリックしきっていない。
指を離した瞬間、クリックしたことに･･･なると思うところですが、ならないんですね。
先ほどの記事にもあるように300msほどの遅延があります。
これは、ダブルクリックだった場合の判定待ちのためではないかといわれているようです。
6. タップしたときのhover演出をする
純粋なパフォーマンス向上とは少し異なりますが、ユーザーの体感速度と心地よさに影響する点です。
onClickのデフォルトのhover（オンマウスと違って触っているのにhoverっていうのもよくわかりませんが、ここでは便宜的にhoverと呼びます）って、ブラウザによってハイライトのデザインが違いますよね。
そのへんはCSSで吸収できるのですが、さらにpositionとの組み合わせによってはハイライトの位置がずれたり･･･まあこれもCSSで吸収できるのですが、「5. ハイブリッドアプリに限らず、タッチデバイスではonClickを使わない」でも説明したように、デフォルトのonClickの挙動はそもそももっさりしています。
タップして、ずれたところに色がついて、もっさりと動く･･･
( ；´Д｀)いやぁぁぁぁぁー!
かといって、
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
なんて、透明にしたら、押してる感がなくなっちゃう。
ああ、どうして普通に
a:hover {
/* hover時のスタイルを記述 */
}
ってできないんだろうか！
q( ﾟдﾟ)pﾌﾞｰﾌﾞｰﾌﾞｰ
これは実際のソースで、ヘルプボタンをタップしたときの処理です。
jQuery使ってます。
//ヘルプ
$('#help-open').on('touchstart', function(e){
e.preventDefault();
$(this).attr('class', 'hover');
});
$('#help-open').on('touchend', function(e){
e.preventDefault();
$(this).removeAttr('class');
$(this).trigger('touched');
});
$('#help-open').on('touched', function(e){
window.location.href = '#help';
});
touchstartで指が触れたらclass=”hover”（スタイルはCSSで定義しておく）にして、touchendでclassを外してタップした感を演出。
その後、triggerでtouched（という名前を自分でつけたイベント）を起こして、その後の処理を書きます。
面倒でも、onClickに頼らずにタッチイベントを取得してユーザーの体感速度を向上させたいですね。