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してごにょごにょします。

必要な開発環境の準備

以下のパッケージが必要

• Node v0.10.x以上
• Ruby1.8.7以上
• gemコマンド
• Saas gem 3.3.x以上

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をインストールしてみてください。

• LiveReload

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と組み合わせて使うことで、さくさく開発できそうな感じがステキでした。