このページは Cloud Translation API によって翻訳されました。

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

Paul Kinlan

Chrome Dev Summit 2014 では、さまざまなトピックとまったく新しい API が取り上げられましたが、新しくて目新しいものばかりではありません。

新しい API の探索を開始しようとしている新米ウェブデベロッパーや経験豊富なデベロッパーでも、学習、構築、反復という 3 つのステップに沿って作業することになります。

Matt Gaunt が、Chrome デベロッパープラットフォームチームによるこれらの問題への継続的な取り組みについて説明します。

学習

Web Fundamentals は、さまざまなトピックをカバーするユースケースドリブンのドキュメントセットです。主な目標は、デベロッパーが知識をほとんど、またはまったく持っていない状態から、できるだけ早くベストプラクティスを実装できるようにすることです。

ウェブの基礎の主要な目標の 1 つは、トピックに不慣れな場合でも、ガイダンスによって「選択の麻痺」をできるだけ減らすことです。Addy Osmani が Pastry Box で詳しく説明しています。

サイトまたはそのコンテンツに関する問題を見つけた場合は、GitHub でフィードバックを送信してご報告ください。また、ウェブの基礎で特定のトピックを取り上げてほしい場合は、お知らせください。

構築

新しいウェブプロジェクトを開始できるよう、ウェブスターターキットを作成しました。必要なものがすべて揃っています。

堅固なビルドプロセス
ボイラープレート HTML
スタイルガイド

ビルドプロセス

ビルドプロセスを初めて使用する場合は、ビルドプロセスを、一連のファイルを受け取り、特定のタスクを実行して、別の場所に新しいバージョンを出力するプログラムと考えるのが最も簡単です。タスクは、ファイルを最適化して読み込み時間を短縮したり、考えられるエラーを確認したり、自動化できるタスクを処理したりします。

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

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

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

新しいページ用に最初に記述する HTML は、かなり標準的なものであり、複数のデバイスや画面サイズで適切に機能する標準 HTML ファイルをすばやく入手できる可能性があります。

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

スタイルガイド

ウェブスターターキットの最後の部分はスタイルガイドです。

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

来年初めにリリース予定の WSK の次期バージョンでは、スタイルガイドの統合を簡素化し、マテリアルデザインの外観に変更する予定です。Matt が Chrome Dev Summit で初期段階のモックを公開しました。その例を以下に示します。

繰り返す

新しい知識を実際に活用するようになったら、DevTools を使用して作業のデバッグ、改善、メンテナンスを行うことをおすすめします。

DevTools にいくつかの大きな新機能が追加されています。Matt が以下の新機能を紹介します。

デバイスモード

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

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

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

ペイントプロファイラ

タイムラインタブを開いて記録ボタンを押すと、ウォーターフォールにペイントイベントが表示されます。通常、これはブラックボックスであり、ブラウザが何を実行したのか、何を行っていたのかを把握することはできません。

ペイントプロファイラでは、ペイント中にブラウザが具体的に何を行っているかを確認できます。

無効化の追跡

DevTools で、ペイントまたはレイアウトが発生した理由が可能な限り表示されるようになります。これは、タイムラインやブラウザの動作を学習する際に役立ちます。また、コードを最適化してパフォーマンスの問題を防ぐこともできます。

フレームグラフビュー

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

フレームビューア

フレームグラフビューで特定のフレームを選択すると、そのフレーム内で、ページ内のどの要素が合成レイヤに昇格されたか、また昇格された理由を確認できます。

共に学び、作成し、繰り返す

これらは、デベロッパーがウェブ開発を迅速に習得できるよう Chrome チームが取り組んでいる取り組みの一部です。ウェブの基礎、ウェブスターターキット、Chrome DevTools の新機能もぜひご確認ください。