ヒントとコツ

公開日: 2014 年 2 月 28 日

次のヒントを参考にして、アプリケーションのユーザー エクスペリエンスを向上させましょう。

アプリの読み込み時にちらつく

WebView を使用してアプリが読み込まれるときに、白黒でちらつくことがありますか？これは、通常はテーマで設定されるアプリのウィンドウの背景色の読み込みに続いて、WebView の背景が白く点滅することによって発生する可能性があります。これは、WebView が CSS を含むコンテンツを読み込む前に行われます。

白色のフラッシュを削除するには、WebView の背景色を設定します。この色の表示に遅延が生じるのは、WebView を描画するモバイルアプリでのみです。

mWebView.setBackgroundColor(Color.parseColor("#3498db"));

Android では、Android アプリ リソース ガイドで説明されているように、res/values/colors.xml ファイルで色値を定義することをおすすめします。アプリのリソースで定義された色を選択すると、コードは次のようになります。

mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name));

触覚フィードバック

モバイルアプリとウェブアプリの違いの一つは、多くのウェブアプリにタップ フィードバックがないことです。

この問題を解決するには、:active 疑似クラスを使用します。

たとえば、次のようなスタイルのボタンがあるとします。

.btn {
  display: inline-block;
  position: relative;
  background-color: #f39c12;
  padding: 14px;

  border-radius: 5px;
  border-bottom-style: solid;
  border-width: 4px;
  border-color: #DA8300;
}

押された状態は次のようになります。

.btn:active {
  background-color: #E68F05;
  border-color: #CD7600;
  border-width: 2px;
  top: 2px;
}

これにより、背景色と枠線の色が少し暗くなり、枠線のサイズが小さくなるため、ボタンがページに沈んでいるように見えます。top プロパティは、小さい境界線のバランスをとるために位置を調整します。

Sass を使用している場合は、darken と lighten の mixin を使用して、正確な 16 進数値を知らなくても要素の色を変更できます。hexcolortool.com などのオンライン ツールを使用することもできます。

システムのハイライト

多くのユーザー エージェントは、要素になんらかのタッチ フィードバックを追加するため、特定のスタイルを定義する必要がなくなります。WebView では、要素がオレンジ色で表示されたり、リンクや要素の周りにオレンジ色のリングが表示されたりすることがあります。

カスタムのタップ フィードバックとフォーカス フィードバックを追加する場合は、次の CSS プロパティを使用してデフォルトをオーバーライドできます。

-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
outline: none;

独自の色を設定します。

button {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0,0,0, 0.0);
}

button:focus {
  background-color: #E68F05;
  border-color: #DA8300;
}

button:active {
  background-color: #FFA91F;
  border-color: #E68F05;
}

これにより、デフォルト、フォーカス、アクティブ（「押された」）などの状態に基づいてボタンの色が変更されます。

ボタンだけでなく、入力フィールドやアンカータグにもこれらのプロパティを設定することを検討してください。