Chrome Dev Summit 2014 では、さまざまなトピックやブランドが新しい API を取り上げましたが、それがすべてというわけではありません。
新しい API を検討し始めたばかりのウェブ デベロッパーや経験豊富なデベロッパーであれば、学習、構築、イテレーションという 3 つのステップを踏むと良いでしょう。
Matt Gaunt が、Chrome Developer Platform チームから、これらの問題に対処するための継続的な取り組みを担当します。
学習
ウェブの基礎は、さまざまなトピックについて取り上げた、ユースケース別のドキュメントです。主な目標は、ほとんどまたはまったく知識がない状態から、デベロッパーにできるだけ早くベスト プラクティスを実装してもらうことです。
ウェブの基礎の主な目標の 1 つは、そのトピックを初めて使用する場合に、ガイダンスによって「選択麻痺」をできるだけ減らすことです。Addy Osmani が Pastry Box で紹介しています。
サイトやそのコンテンツで問題が見つかった場合や、Web Fundamentals で特定のトピックを取り上げてほしいとお考えの場合は、GitHub でフィードバックを送信してお知らせください。
ビルド
新しいウェブ プロジェクトを開始できるように、ウェブ スターター キットを作成しました。必要なものはすべて揃っています。
- しっかりとしたビルドプロセス
- ボイラープレート HTML
- スタイルガイド
ビルドプロセス
ビルドプロセスを初めて使用する方にとって、ビルドプロセスを考える最も簡単な方法は、一連のファイルを受け取り、それらのファイルに対して特定のタスクを実行し、新しいバージョンを別の場所に出力するプログラムとして捉えることです。このタスクでは、ファイルを最適化して、読み込み時間の改善、エラーの可能性のチェック、自動化できるタスクの処理を行います。
Web Starter Kit には、次のプロセスがあります。
CSS と JavaScript は、ブラウザでファイルをすばやく取得できるように圧縮して連結します。また、JavaScript も JSHint を実行し、JavaScript のベスト プラクティスやよくあるコーディングの誤りをチェックしています。画像は imagemin で圧縮され、これを使用するとファイルサイズを大幅に削減できます。また、スタイルガイド CSS を作成するプロセスもあります。
マルチデバイス HTML のボイラープレート
新しいページ用に最初に記述する HTML セットはかなり標準的です。おそらく、複数のデバイスや画面サイズで適切に機能するストック HTML ファイルをなんらかの方法ですぐに入手できる可能性があります。
Web Starter Kit では、プラットフォームとサイトの境界線を曖昧にする機能のサポートを追加することを目的としており、Android、Windows Phone、iOS、Opera Coast 向けのホーム画面に追加とスプラッシュ画面のサポートを追加しました。
スタイルガイド
Web Starter Kit の最後の部分はスタイルガイドです。
これにより、新しいプロジェクトに、スタイル重視の開発が促される優れたデフォルト スタイルとコンポーネントのセットが提供されます。既存のスタイルを要素に変更したり 独自のスタイルを追加したりできます
来年初頭にリリース予定の WSK では、スタイルガイドの組み立てをシンプルにし、デザインをマテリアル デザインに切り替えるよう努めています。Mattが Chrome Dev Summit の初期モックを紹介しました。以下に例を示します。
イテレーション
新しい知識を実践し始めたら、DevTools を使用して作業のデバッグ、改善、メンテナンスを行いたいと考えています。
DevTools には大きな新機能がいくつか追加されています。Matt が以下の新機能に注目します。
デバイスモード
DevTools の新しいセクションであるデバイスモードを使用すると、CSS でメディアクエリを表示しながら、さまざまなモバイル デバイスでサイトがどのように動作するかをすばやく確認できます。
デバイスモードの優れた機能の一つは、ネットワーク速度をスロットリングできることです。これにより、GPRS、EDGE、3G、DSL、Wi-Fi 接続でユーザー エクスペリエンスをシミュレートできます。
ペイント プロファイラ
[Timeline] タブを開いて記録ボタンをクリックすると、ウォーターフォールでペイント イベントが発生しているのを目にしたことがあるはずです。通常これはブラック ボックスであり、ブラウザが実行した理由や実行内容を知る方法がありません。
Paint Profiler は、そのペイント中にブラウザが実際に行っている処理に関する詳細情報を提供します。
無効化の追跡
DevTools では、ペイントまたはレイアウトが発生した理由が可能な限り返されるようになりました。これは、タイムラインやブラウザの動作を理解している人にとって便利で、コードを最適化してパフォーマンスの問題を防止できます。
フレームチャート ビュー
これは、タイムラインで利用可能な情報を表示する方法が大きく異なります。これにより、タスクがどのように重複しているかや、他のタスクの結果として発生したブラウザの動作がはるかに簡単にわかります。
フレーム ビューア
フレームグラフ ビューでは特定のフレームを選択すると、その中で、ページ上のどの要素が複合レイヤにプロモートされたか、およびそれがプロモートされた理由を確認できます。
共に学び、作成し、イテレーション
これらは、デベロッパーがウェブ開発を短期間で進めることができるよう、Chrome チームが行っている取り組みの一部です。ウェブの基礎、Web Starter Kit、Chrome DevTools の新機能をぜひご確認ください。