Cordova tips 集

Cordovaとは

• HTML5, CSS3, and JavaScript for cross-platform development
• standards-compliant API bindings to access each device's capabilities such as sensors, data, network status

---

理想と現実

• 理想
  • Write once, run anywhere
• 現実
  • Write once, debug everywhere (Java)
  • Write about once, debug everywhere, test everywhere (← New)

---

今日は現実の話をします。

• ユーザにとっての比較対象はNativeアプリ
  • Webアプリではない
  • 素直に書くだけではダメなとこもある
• Nativeアプリと戦うためのtips
  • タッチ, スクロール, キーボード, バックボタン
  • ...

---

タッチ

---

click イベント遅い問題

• clickイベントは発火するまで少しラグがある
  • ズームとかを判定するためだったはず...
• touchstart -> touchmove -> touchend -- 300ms -> click
• よし、touchendを使おう
• でも....

---

touchend色々発火しすぎ問題

• スクロールした後でも発火する
• そもそも要素外で指を離しても発火する!?

---

最終的にこうなりました

• touchend内で判定をしてからハンドラを呼ぶ

1. touchstartでスクロール位置を覚えておいて、touchendで変わってないかチェック
2. touchendでタッチ位置上の要素とe.targetが同じかチェック
   • e.touches じゃなくて e.changedTouches を使う
     • jQueryならe.originalEvent
   • タッチ位置上の要素: document.elementFromPoint()

---

慣性スクロール

---

慣性スクロール

• スマホといえばこれ。
• Androidは何もしなくてもそれなりになっている
• 問題はiOS
  • -webkit-overflow-scrolling: touch;
  • レイアウトによっては、崩れるので要確認
  • 部分スクロールは癖あり

---

慣性スクロール＋部分スクロール

• 具体例：リストビューの上にダイアログを表示。どちらもスクロール可の場合
• 慣性スクロールが優先的に実行される。
  • すでに完成スクロールが発生しているか
  • event.preventDefault()が呼ばれているか

---

キーボード　

---

HTMLとキーボード

• HTMLからはキーボードのVisibilityは取れない
  • フォーカスが当たったら自動的に表示
  • キーボードの閉じるボタンを押してもフォーカスは当たったまま
• plugin を使う
  • 公式のpluginはメンテされていない
  • cjpearson/cordova-plugin-keyboard

---

キーボードとwindow

• Keyboard.shrinkView(Bool);
  • キーボードが出てきた時にwindowをリサイズするかどうか
• position: fixed; と相性悪し

---

キーボードのイベント

• Keyboardのvisibilityの変更のイベントのハンドリング
  • window.addEventListener('keyboardDidShow', () => {});
  • WillShow, DidShow, WillHide, DidHide, HeightWillChangeとか色々ある
    • でもiOSのみ!
  • Androidはwindowのresizeイベントを使った

---

バックボタン

---

バックボタン

• 基本はhistory.backが割り当てられている
  • ルーティングライブラリ使ってれば基本は問題ないはず
• 複雑なことをやろうすると辛い
  • 例：確認ダイアログ・無効化
  • 連打とか考えると目眩がしてくる

---

バックボタンの挙動を変える

• デフォルトの挙動をオーバーライド
  • document.addEventListener('backbutton', function() {});
  • クセあり
    • イベントを登録した時点でデフォルトの挙動をしなくなる
    • documentにしか飛んでこない→e.stopPropagation()使えない
      • ハンドラ内で頑張りましょう

---

いいところもあるよ

• HTML5, CSS3使いたい放題
  • box-sizing神
  • calc とかflex boxとか超便利
  • Androidではcrosswalkを使いましょう
    • WebViewがchromium ベースじゃない頃のAndroid webViewは魔境です。