Chrome Dev Summit は数週間前に終了しました。ここでは、イベントに関する一連のレポートの 1 つ目をお送りします。モバイルとクロスデバイス開発に重点が置かれていたため、まずはそちらから始めましょう。
モバイルウェブアプリに最適な UX パターン（Paul Kinlan 著）
上位 1, 000 サイトのモバイル フレンドリー度を分析した結果、問題のある領域がいくつか見つかりました。53% のサイトは依然としてパソコン専用で、82% のサイトはモバイル デバイスでの操作性に問題があり、64% のサイトにはユーザーが読みにくいテキストが含まれています。
モバイルウェブ エクスペリエンスを大幅に改善する簡単な方法
- 必ずビューポートを定義する
- コンテンツをビューポート内に収める
- 読みやすいレベルのフォントサイズにする
- ウェブフォントの使用を制限する
- タップ ターゲットのサイズと間隔を適切に設定する
- 入力要素にセマンティック タイプを使用する
PageSpeed Insights に、サイトのモバイル対応度を判断するための UX 分析がリリースされました。この分析は、サイトのモバイル 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 のウェブ開発ワークフローを Gradle を介してネイティブ スタック ツールに統合することもできます。世界をさらに融合させるには、Chrome DevTools を使用して JavaScript からネイティブ コードをテストする賢い方法があります。
スライド: Chrome WebView を使用してモバイルアプリを作成する
WebView 開発の有効なポイント
- 重要なのは新機能ではなく、ワークフローを高速化するために使用できるツールです。
- ネイティブ UI をエミュレートしようとしないでください。ただし、ウェブ コンテンツであることを示す要素は削除してください。
- 必要に応じて、ネイティブ実装の機能を使用します。つまり、サイズの大きいファイルの場合は XHR ではなく DownloadManager を使用します。
クロスデバイス時代のワークフローを最適化する（Matt Gaunt）
パソコン、モバイル、タブレット、ウェアラブルなどのフォーム ファクタ向けに開発する必要がある場合、ワークフローを最適化してストレスを軽減するにはどうすればよいですか？LiveReload、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 の苦労を経験することなく、魅力的なオフライン ファースト エクスペリエンスを簡単に構築するために必要な柔軟性が得られます。ポリフィルを使用して API を試すこともできます。
ServiceWorker の活用
- 次世代の段階的拡張では、ネットワークを潜在的な拡張機能として扱います。
- ServiceWorker を使用すると、ネットワーク リクエストを完全に制御し、スクリプト化、デバッグできます
- オフライン エクスペリエンスがある場合は、ネットワークが機能しなくなるまで待たずに表示してください。ネットワークが機能しなくなるまで待つと、時間がかかりすぎる可能性があります。