BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース GoogleによるWeb FundamentalsとWeb Starter Kit

GoogleによるWeb FundamentalsとWeb Starter Kit

ブックマーク

原文(投稿日:2014/06/20)へのリンク

Googleはクロスプラットフォームのレスポンシブウェブデザインに対応する、多数のガイドラインとボイラープレートコードを発表した。

既存の膨大な種類のデバイス、特にモバイル端末に対応するための開発者の課題を鑑み、Googleは最新のweb開発のための一連のガイドラインとベストプラクティスであるWeb Fundamentalsを公開した。Web Fundamentalsには下記分野のHTML、CSS、JavaScriptコードサンプルやアドバイスが含まれている。

  • ツール: エディタの選択、開発ツールのセットアップ、ビルドプロセスのセットアップ、Chrome DevToolsでのデバッグ、エミュレータやクラウド上のデバイスによるテスト、等。
  • レイアウト: 様々なスクリーンサイズに対応する複数のブレークポイントを使用したCSS3メディアクエリ、Fluid Layout、Column Drop、Layout Shifter、Off Canvas等のレスポンシブwebデザインパターン、アプリバー、タブバー、ボタンバー、ナビゲーションドロワー等多数のナビゲーションやアクションパターン等を使用したレスポンシブWebサイトデザインをGoogleは推奨している。
  • フォームとユーザインプット: モバイル端末で動作するフォームの選択、リアルタイムバリデーション対応、タッチ対応やカスタムジェスチャーの実装、等。
  • 画像、音声、映像: <img>の使用、CSSのbackgroundプロパティ、アイコンへのSVG使用、画像のパフォーマンス問題、映像、レガシープラットフォーム、アクセシビリティ問題への対応、等へのアドバイス。
  • パフォーマンス: 重要なレンダリングパスの最適化、PageSpeedの使用、不要なダウンロードを除外することによるコンテンツのパフォーマンスチューニング、エンコーディングや画像の最適化、HTTPキャッシュの使用、等。
  • デバイスセンサと性能: ユーザの位置情報取得、デバイスオリエンテーション、デバイスモーション、通話に関するアドバイス。

ガイドラインの他に、Googleはマルチデバイスウェブサイトを構築するためのツールやボイラープレートコードのパッケージであるWeb Starter Kit(WSK)を提供している。Web Starter KitはMobile Boilerplateの影響を受け、モバイルHTMLページ、レスポンシブレイアウト、ビジュアルコンポーネントのスタイルガイド、gulp.jsのビルドツールオプション等が含まれている。

WSKは最新と1つ古いバージョンのChrome、Firefox、Safari、Opera、IE10と11、さらに、Android、iOS、Windows Phone、Blackberry用のモバイルブラウザにも対応している。

Web Fundamentalsの関連コードWeb Started Kitのコードはどちらもオープンソースであり、GitHubにて公開されている。 

この記事に星をつける

おすすめ度
スタイル

BT