Chrome Dev Summit は数週間前に終了しました。今回は、その第 1 回となるレポートをご紹介します。特にモバイル開発とクロスデバイス開発が重視されたので 本題から始めましょう
モバイルウェブ アプリに最適な UX パターン（著者: Paul Kinlan）
上位 1, 000 件のサイトのモバイル フレンドリーを分析したところ、問題領域がいくつか見つかりました。53% は依然としてパソコンのみの機能を提供しており、82% のサイトはモバイル デバイスとのインタラクティビティに問題があります。また、64% のサイトにはユーザーが読むのに支障をきたすテキストが含まれています。
モバイル ウェブ エクスペリエンスを大幅に改善するクイックヒット
- 常にビューポートを定義する
- コンテンツをビューポートに合わせる
- フォントサイズを読みやすくする
- ウェブフォントの使用を制限する
- タップ ターゲットのサイズと間隔を適切に配置する
- 入力要素にセマンティック型を使用する
PageSpeed Insights で、サイトのモバイル対応度を判断するためのユーザー エクスペリエンス分析の提供を開始しました。この分析は、サイトのモバイル UX に関するよくある問題を見つけるのに役立ちます。試してみましょう。
Alice Boxhall によるマルチデバイスのユーザー補助
ユーザーは、さまざまなアクセス要件を持つさまざまなデバイスからサイトやサービスにアクセスします。正しいセマンティック要素と正しい ARIA ロールを使用することで、ブラウザと支援技術がページをより正確に理解できるようになります。
ユーザー補助の問題を把握して対処するための主な方法
- キーボードのみのユーザー エクスペリエンスを良好に保つ
- 適切な要素の選択と ARIA を使用してインターフェースのセマンティクスを表現する
- テストには、パソコンで ChromeVox を、Android で TalkBack を使用します。
- ユーザー補助デベロッパー ツール Chrome 拡張機能をお試しください。
- オンライン ユーザーの多様化が進む中、サイトへのアクセスを容易にする必要性が高まっています。
Chrome WebView を使用してモバイルアプリを作成する（Matt Guant）
WebView の開発において、HTML5 機能の制限、デバッグツール、ビルドツールといったデベロッパーが過去に抱えていた問題はご存じのとおりです。Android 4.4（KitKat）での Chromium 搭載の WebView の導入により、デベロッパーは WebView を使った優れたネイティブ アプリを作成するための幅広い新しいツールを自由に使用できるようになりました。
WebView は、Chrome で使用しているのと同じツールによる完全なリモート デバッグをサポートしています。また、Grunt で信頼性の高いウェブ開発ワークフローをネイティブ スタック ツールに統合することもできます。さらに、Chrome DevTools を使用して JavaScript からネイティブ コードをテストするという高度な手法があります。
スライド: Chrome WebView を使用してモバイルアプリを作成する
WebView 開発の効果的なポイント
- 重要な新機能ではなく、ワークフローをスピードアップするために使用できるツール
- ネイティブ UI をエミュレートしようとしないでください。ただし、ウェブ コンテンツであることを示す一部の情報は削除してください。
- 必要に応じて、機能のネイティブ実装を使用してください。すなわち、大きなファイルには XHR ではなく DownloadManager を使用します。
クロスデバイス環境に合わせてワークフローを最適化（Matt Gaunt 著）
デスクトップ、モバイル、タブレット、ウェアラブル、その他のフォーム ファクタ向けの開発が必要な場合、ワークフローをどのように最適化すればストレスを軽減できますか？LiveRetry、Grunt、Yeoman、新たに発表された Mini Mobile Device Lab は、迅速なイテレーションのための確固たるマルチデバイス アプローチを備えています。最後に、テストしたい物理ハードウェアがない場合、プロバイダによっては、それをクラウド経由で利用できるようにしています。
要点
- 対応する必要のあるデバイスの数は増える一方です
- Grunt と Yeoman で適切なワークフローを実現
- Mini Mobile Device Lab でブラウザやデバイスのクロステストを簡素化
- Chrome DevTools エミュレーション、ストック エミュレータ、クラウドベースのエミュレータ（Saucelabs、Browserstack、appexperience など）、サードパーティ エミュレータ Genymotion を使用して、スマートにエミュレーションを選択できます。
- モバイルテストでは、Wi-Fi 接続をテストするだけでなく、プロキシを使用して低速のネットワーク速度をシミュレートできます
ネットワーク接続: オプション（Jake Archibald）
この講演から多くのことを学びました。Jake はプレゼンテーションの際に靴を履いていません。Business Kinlan の新刊はまもなく発表されます。また、ブラウザ ベンダーはオフラインへの対応を真剣に受け止めています。オフラインでも適切に機能する優れたエクスペリエンスの構築に役立つツールを、まもなくお手元にお届けします。
ServiceWorker により、AppCache の悩みの種に悩まされることなく、魅力的なオフライン ファーストのエクスペリエンスを簡単に構築できる柔軟性が得られます。Polyfill を使用して API を試すこともできます。
Service Worker で解決を支援
- 次世代のプログレッシブ エンハンスメントでは、ネットワークを潜在的な機能強化と見なす
- Service Worker を使用すると、ネットワーク リクエストをスクリプトやデバッグなどで完全に制御できます。
- オフラインで視聴している場合は、表示に時間がかかるため、ネットワークの障害を待たずに表示してください。