モバイルウェブ開発の基礎

Chrome Dev Summit 2014 では、新しい API のさまざまなトピックやブランドが盛りだくさんでしたが、必ずしも新しい API が話題になったわけではありません。

新しい API の検討に乗り出すウェブ デベロッパーの方も、経験豊富なデベロッパーの方も、学習、構築、イテレーションという 3 つのステップに従うことをおすすめします。

Matt Gaunt は、Chrome デベロッパー プラットフォーム チームがこれらの問題に対処するための継続的な取り組みを紹介しています。

学習

WebFundamentals on HTML5Rocks

Web Fundamentals は、さまざまなトピックをカバーするユースケース主導のドキュメントです。主な目標は、デベロッパーに知識がほとんどないかまったくない状態で、ベスト プラクティスを可能な限り迅速に実装できるようにすることです。

Web Fundamentals の主な目的は、初心者のトピックに「選択麻痺」を可能な限り軽減できるようにすることです。Addy OsmaniPastry Box で完全にカバーしました。

サイトまたはサイトのコンテンツに問題がある場合や、Web Fundamentals で特定のトピックを扱ってほしい場合は、GitHub でフィードバックを送信して、お知らせください。

ビルド

広範囲デバイスの Web Starter Kit

新しいウェブ プロジェクトを開始する際に役立つ Web Starter Kit を作成しました。必要なものはすべて揃っています。

  • しっかりとしたビルドプロセス
  • ボイラープレート HTML
  • スタイルガイド

ビルドプロセス

ビルドプロセスを初めて使用するユーザーにとっては、ビルドプロセスを簡単に考えると、一連のファイルを受け取り、それらのファイルに対して特定のタスクを実行し、新しいバージョンを別の場所に出力するプログラムと考えることができます。これらのタスクはファイルを最適化して、読み込み時間を改善したり、発生する可能性のあるエラーをチェックしたり、自動化可能なタスクを処理したりします。

Web Starter Kit には、次のプロセスがあります。

Web Starter Kits のビルドプロセスの図

ブラウザがファイルをすばやく取得できるように、CSS と JavaScript を最小化して連結します。また、JavaScript も JSHint を使用して実行され、JavaScript のベスト プラクティスと一般的なコーディングの誤りを確認できます。画像は imagemin で圧縮されるため、これを使用するとファイルサイズを大幅に削減できます。スタイルガイド CSS を作成するプロセスも用意されています。

マルチデバイス HTML のボイラープレート

新しいページ用に最初に記述する HTML のセットは、かなり未成年の標準であるため、複数のデバイスや画面サイズで適切に動作するストック HTML ファイルをすばやく取得できる可能性があります。

Web Starter Kit では、プラットフォームとサイトの境界線を曖昧にするあらゆる機能のサポートを追加したいと考え、Android、Windows Phone、iOS、Opera Coast のホーム画面への追加とスプラッシュ画面のサポートを追加しました。

ホーム画面への Web Starter Kit の追加の例。

スタイルガイド

Chromebook Pixel のウェブ スターター キットのスタイルガイド。

Web Starter Kit の最後の部分はスタイルガイドです。

これにより、新しいプロジェクトには、スタイル主導の開発を促進する優れたデフォルトのスタイルとコンポーネントのセットが提供されます。既存のスタイルを要素に変更したり、独自のスタイルを追加したりできます。

来年初めにリリース予定の WSK の次のバージョンでは、スタイルガイドの統一感をシンプルにし、マテリアル デザインのデザインに切り替える作業を進めています。Mattは Chrome Dev Summit で実際の作業の早期モックを紹介しました。以下に例を示します。

ウェブ スターター キットのマテリアル デザイン スタイルガイドのモックです。

継続的な見直し

習得した知識を実践に移したら、DevTools を使用して作業をデバッグ、改善、保守するとよいでしょう。

DevTools にはいくつかの重要な新機能が追加されています。そこで Matt は次のような新機能について考察します。

デバイスモード

デバイスモードは DevTools の新しいセクションです。CSS でメディアクエリを表示しながら、さまざまなモバイル デバイスでサイトがどのように動作するかをすばやく確認できます。

Chrome DevTools の Device Mode 機能のスクリーンショット。

Device Mode の優れた機能の一つは、ネットワーク速度をスロットリングできることです。これにより、GPRS、EDGE、3G、DSL、Wi-Fi 接続のユーザー エクスペリエンスをシミュレートできます。

Chrome DevTools のネットワーク スロットリングのスクリーンショット。

ペイント プロファイラ

[タイムライン] タブを開いて記録ボタンを押したことがあれば、ウォーターフォールでペイント イベントが発生したことがあると思います。通常、これはブラック ボックスとなり、ブラウザが行った理由や処理内容を知る方法がありません。

Paint Profiler no は、そのペイント中にブラウザが何を行っているかについての詳細情報を提供します。

Chrome DevTools の Paint Profiler のスクリーンショット。

無効化のトラッキング

DevTools により、ペイントまたはレイアウトが発生した理由が可能な限り表示されるようになりました。これは、タイムラインやブラウザの動作について知識がある方にとって有用です。また、コードを最適化してパフォーマンスの問題を防止することもできます。

Chrome DevTools の Invalidation Tracking のスクリーンショット。

フレーム チャート ビュー

これは、タイムラインで利用可能な情報を表示する方法が大きく異なります。これにより、タスクの重複状況や、他のタスクの結果としてブラウザの動作を確認しやすくなります。

Chrome DevTools のフレーム チャート ビューのスクリーンショット。

フレーム ビューア

Flame Chart ビューで特定のフレームを選択すると、そのフレーム内でページ内のどの要素が複合レイヤに昇格したか、およびその理由を確認できます。

Chrome DevTools の [Frame Viewer] のスクリーンショット

共に学び、作成し、継続的な見直し

ここでは、デベロッパーがウェブ開発に習熟できるよう、Chrome チームの取り組みの一部を紹介します。Web FundamentalsWeb Starter KitChrome DevTools の新機能をご確認ください。