Web Starter Kit とは
Web Starter Kit はウェブ開発用の独自のボイラプレートです。このツールにより、パフォーマンスを優先して、多くの端末に対応した快適なエクスペリエンスを実現することができます。Google の Web Fundamentals に記載されているベスト プラクティスを順守して、生産性を維持する上でも役に立ちます。この業界のプロの方も初心者の方も、まずはご利用ください。
機能
| 機能 | 概要 |
|---|---|
| レスポンシブ ボイラプレート | マルチスクリーン ウェブ用に最適化されたレスポンシブ ボイラプレート。Material Design Lite を活用します。希望に応じて、このボイラプレートを使用するか、basic.html で未加工のボイラプレートを入手できます。 |
| Sass のサポート | Sass を CSS に簡単にコンパイルし、変数や mixin などをサポートできます（本番環境では、gulp serve または gulp を実行します）。 |
| パフォーマンスの最適化 | JavaScript、CSS、HTML、およびイメージを圧縮して連結し、ページのサイズを小さくします（gulp を実行して、プロジェクトの最適化されたバージョンを /dist に作成します）。 |
| コードの Lint チェック | ESLint（JavaScript のパターンを識別およびレポートする柔軟な linter ツール）を使用して、JavaScript コードの Lint チェックを実行します。Web Starter Kit では、ESLint と eslint-config-google を使用して、Google JavaScript スタイルガイドに準拠するよう努めています。 |
| Babel 6.0 を使用した ES2015 | Babel を使用した ES2015 のオプション サポート。ES2015 のサポートを有効にするには、.babelrc ファイル内の"only": "gulpfile.babel.js", の行を削除します。ES2015 のソースコードは、幅広いブラウザ サポートに対応するために、ES5 に自動的にトランスパイルされます。 |
| 組み込みの HTTP サーバー | 開発と反復処理の際にサイトをローカルでプレビューするための組み込みのサーバー。 |
| ライブブラウザの再読み込み | 編集が行われた時点でリアルタイムにブラウザを再読み込みします。拡張機能は必要ありません（gulp serve を実行して、ファイルを編集します）。 |
| 複数端末の同期 | プロジェクトを編集するときに、複数の端末でクリック、スクロール、フォーム、LiveReload を同期します。BrowserSync を活用します（gulp serve を実行し、ネットワーク上の他の端末で指定されている IP を開きます）。 |
| オフライン サポート | Google が作り上げた Service Worker の事前キャッシュ機能により、dist を HTTPS ドメインにデプロイするサイトはオフラインでも動作します。このサポートは、sw-precache により可能になります。 |
| PageSpeed Insights | モバイル上または PC 上でのサイトの性能を示すウェブ パフォーマンス指標（gulp pagespeed を実行します）。 |
クイックスタート
Web Starter Kit をダウンロードするか、リポジトリのクローンを作成して、app ディレクトリのコンテンツを基に環境を構築します。
HTML のベースとなるファイルは、以下の 2 つから選択できます。
index.html- マテリアル デザイン レイアウトが含まれるデフォルトのベース。basic.html- レイアウトはありませんが、モバイル向けの最小限のベスト プラクティスが含まれます。
インストール ドキュメントに目を通して、自身の環境で WSK を実行する準備が整っていることを確認します。システムで WSK を実行できることを確認したら、サイトの構築に使用できるコマンドを確認してください。
ウェブ パフォーマンス
Web Starter Kit は、面倒な作業を必要とせず、ユーザーが最初から高いパフォーマンスを実現できるように作られています。実際、デフォルト テンプレートの中央値ウェブページ テストのスコア は、Service Worker の事前キャッシュを活用したことで、Speed Index が約 1100（1000 が理想値）、再アクセスの Speed Index が約 550 という数値になっています。
ブラウザ対応
現在、次のブラウザの最新バージョンとその直前のバージョンを公式にサポートすることを目指しています。
- Chrome
- Edge
- Firefox
- Safari
- Opera
- Internet Explorer 9+
これは、上記のバージョンよりも古いブラウザでは Web Starter Kit を使用できないという意味ではなく、レイアウトが適切に行われるようにする際は、上記のバージョンに重点を置いているという意味になります。
トラブルシューティング
ツールのインストール中または実行中に問題が発生した場合は、トラブルシューティング ガイドを参照してから、問題をご報告ください。問題の解決方法についてご提案させていただきます。
ボイラプレートのみのオプション
Google が提供するツールを使用しない場合は、プロジェクトから package.json、gulpfile.babel.js、.jshintrc、および .travis.yml ファイルを削除してください。削除すると、代替ビルドシステムを使用して、またはビルドシステムを使わずにボイラプレートを安全に使用できます。
ドキュメントとレシピ
- ファイルの付録 - さまざまなファイルの用途。
- Material Design Lite の Sass の使用 - MDL の Sass と WSK と併用する方法。
- デプロイメント ガイド - Firebase、Google App Engine、およびその他のサービスで利用可能。
- Gulp レシピ - 公式の Gulp レシピ ディレクトリには、プロジェクトに追加できるさまざまなワークフローのガイドを網羅したリストが含まれています。
インスピレーション
Web Starter Kit は、Mobile HTML5 Boilerplate と Yeoman の generator-gulp-webapp から着想を得ています。開発の際には、両プロジェクトに貢献者した方々からの情報を参考にさせていただきました。よくある質問では、プロジェクトに関する一般的な質問に回答しています。
さらに詳しく知る
詳細については、コードを確認するか、問題をご報告ください。または、GitHub リポジトリ（https://github.com/google/web-startfer-kit）をご覧ください。