Google Web Starter Kitをさわってみた
Web Starter Kitは先日リリースされたGoogle製のWeb制作スターターキットです。
マルチデバイス対応のレスポンシブなBoilerplateとなっているとのこと。
とりあえず、使ってみて触り心地を確認してみます。
環境
Linux Mint 16 Petra(Cinnamon 64-bit)
Web Starter Kit インストール
Web Starter Kitに必要なパッケージを揃えてしまえば、次からはgithub上のWeb Starter Kitプロジェクトを落としてきて新規プロジェクトのテンプレートとして利用できます。
ここでは、本家の手順に従い、Web Starter Kitプロジェクトをローカルにcloneしてごにょごにょします。
必要な開発環境の準備
以下のパッケージが必要
sassが古かったので、update。また、追加でGulpをインストール。
% node --version v0.10.26 % ruby --version ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-linux] % gem -v 1.8.23 % sudo gem install sass Fetching: sass-3.3.8.gem (100%) Successfully installed sass-3.3.8 1 gem installed Installing ri documentation for sass-3.3.8... Installing RDoc documentation for sass-3.3.8... % sass -v Sass 3.3.8 (Maptastic Maple) % sudo npm install -g gulp % gulp -v [13:47:53] CLI version 3.8.1 [13:47:53] Local version undefined
Web Starter KitプロジェクトのDownload
% git clone https://github.com/google/web-starter-kit.git % cd web-starter-kit
Web Starter KitでGulpを使えるようにする。
web-starter-kit (master) % npm install
いろいろコマンドをためしてみる
build
app
ディレクトリでgulp
。
dist
ディレクトリにビルド結果が入る。
web-starter-kit (master) % cd app/ app (master) % gulp app (master) % tree -L 2 ../dist/ ../dist/ ├── basic.html ├── images │ ├── hamburger.svg │ ├── icons │ ├── search.svg │ └── touch ├── index.html ├── scripts │ └── main.min.js ├── styleguide │ └── index.html └── styles └── components
browser open と auto reload
web-starter-kit
ディレクトリでgulp serve
でapp
ディレクトリ配下のプロジェクトをブラウザオープン。
ファイルの変更を監視してブラウザリロードしてくれる。
app (master) % cd .. web-starter-kit (master) % gulp serve
chromeを使用していて、自動的にリロードされない場合は、以下のchrome extensionをインストールしてみてください。
mobile emulation
chromeでDeveloper Toolを開いて下のほうにあるEmulation
タブ(隠れている場合はにょにょっとおっきく広げる)でEmulate
ボタン実行。
mobile版のEmulatorをブラウザで表示しながらコーディングできる!
Web Starter Kitを使用した開発
ファイルの追加
イメージファイルを追加してみる。
今回使用したイメージはこちら
web-starter-kit (master) % cp ~/Downloads/awesome-photo.jpg ./app/images/ web-starter-kit (master) % git add app/images/awesome-photo.jpg
app/index.html
に追加した画像の読み込みを追加。
web-starter-kit (master) % git diff app/index.html diff --git a/app/index.html b/app/index.html index 583b28e..eee732f 100644 --- a/app/index.html +++ b/app/index.html @@ -65,6 +65,7 @@ <main> <h1 id="hello">Hello!</h1> <p>Welcome to Web Starter Kit.</p> + <div><img src="/images/awesome-photo.jpg"></div> <h2 id="get-started">Get Started.</h2> <p>Read how to <a href="http://developers.google.com/web/starter-kit">Get Started</a> or check out the <a href="styleguide/index.html">Style Guide</a>.</p>
gulp serve
により自動的にdist/images
ディレクトリに追加したイメージが作成される。
また、ブラウザの画像も自動的にリロードされる。
Don’t forget to resize the browser to see how the image looks on different device sizes.
実際の開発では、いろいろなサイズのブラウザをたちあげておいて確認しながら編集するとよいのかな?
Check performance
Web Starter KitではPageSpeed Insightsが使える。
gulp watch
とかgulp serve
している場合は control-C
でストップ。
gulp pagespeed
コマンドを実行。
web-starter-kit (master) % gulp pagespeed [14:46:47] Using gulpfile ~/src/web-starter-kit/gulpfile.js [14:46:47] Starting 'pagespeed'... Running Pagespeed Insights Pagespeed Insights: Processing results ---------------------------------------------------------------- URL: https://example.com/ Strategy: mobile Score: 99 ---------------------------------------------------------------- Number Resources | 1 Number Hosts | 1 Total Request | 33 B Html Response | 1.57 kB ---------------------------------------------------------------- Avoid Landing Page Redirects | 0 Avoid Plugins | 0 Configure Viewport | 0 Enable Gzip Compression | 0.07 Leverage Browser Caching | 0 Main Resource Server Response Time | 0 Minify Css | 0 Minify HTML | 0 Minify Java Script | 0 Minimize Render Blocking Resources | 0 Optimize Images | 0 Prioritize Visible Content | 0 Size Content To Viewport | 0 Size Tap Targets Appropriately | 0 Use Legible Font Sizes | 0 ---------------------------------------------------------------- [14:46:58] Finished 'pagespeed' after 11 s
他にgulp watch
(gulp serve
の先で呼び出されるタスク)でできること
- css編集時に自動的に
gulp-minify-css
する - jsファイル編集時に自動的に
gulp-jsmin
とgulp jshint
を実行する
やってみて
マルチプラットフォームのアプリを新規に書こうとする場合、パフォーマンスの最適化もすでに行われているようなので、すぐに開発に入ることができるとこがよさそう。 ChromeのEmulation機能に感動。 chromeと組み合わせて使うことで、さくさく開発できそうな感じがステキでした。