BT

GoogleによるWeb FundamentalsとWeb Starter Kit

| 作者: Abel Avram フォローする 7 人のフォロワー , 翻訳者 株式会社オープンストリーム 中村 フォローする 0 人のフォロワー 投稿日 2014年7月1日. 推定読書時間: 2 分 |

原文(投稿日: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にて公開されている。 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT