Web Starter Kitを触った感想とかとか
- 2014/07/09
- てっちゃん
こんにちは、デザイナーのてっちゃんです。
今回は最近Googleの方でリリースされたWeb Starter Kitが気になったので、触ってみました。
私は業務の中でBootstrapを使ってデザイン・コーディングを行っていますが、Bootstrapを使うために色々補助ツールを使っています。Sass、compass、grunt、画像圧縮、ブラウザのオートリロード とかですかね。
こんな感じで環境を整えていますが、もっと簡単に必要な環境を使うことが出来るパッケージになっているツールがWeb Starter Kitです。
Web Starter Kitって何ができるの?
様々なデバイスに対応することができるフレームワークです。
先ほど話しに挙げたBootstrapやFoundationといった有名なツールと似ていますが、決定的に違うのは環境ごと揃えてくれるところです。
- マルチデバイス対応
- スタイルガイド
- ブラウザシンク
- ライブリロード
- JavaScript、CSS、HTMLの最適化
- HTTP Serverの構築
- sassコンパイル
- ページスピードのレポート
これだけの環境が揃っているのに使わない手はないですよね。
必要環境
これらの機能を活用するためには、以下の環境が必要です。
- Node
- Ruby
- Gulp
- Sass
これらがなくてもコードを直接ダウンロードしてきて使うことも可能ですが、
せっかく便利なものがあるのでコマンドを叩いて環境を揃えましょう。
インストール
- githubよりファイルをダウンロード
1 |
git clone https://github.com/google/web-starter-kit.git |
- ディレクトリを移動
1 |
$ cd web-starter-kit/app |
- Node、Ruby、Sassをインストール
- Sassのインストール
1 |
$ sudo gem install sass |
- gulpのインストール
1 |
$ sudo npm install --global gulp |
- ローカルgulpのインストール(web-starter-kitに移動する)
1 2 |
$ cd web-starter-kit $ sudo npm install |
これでインストールは終わりです。続いて…
Web Starter Kitの起動
以下のコマンドでWeb Starter Kitを起動してください。
1 |
$ gulp serve |
これでローカルサーバーが立ち上がり以下のようになります。
PCでの表示
スマホでの表示
起動してすぐに立ち上がるのは、ローカルホストの方です。BrowserSyncを使うには、すぐ下の
「http://192.168.128.128:3000/」を使ってください。
ただし、見たいデバイスとPCが同じネットワークにないと使えません。
これで、制作を進めることが出来ます。
今表示されているファイルは、
1 |
web-starter-kit/app |
なので、こちらを変更していきます。
appの中には、2つのペースとなるファイルが存在しています。
- index.html
- スライドアウトメニューを含んだスタート時に確認できてるファイルです。レイアウトが最初から組まれているので、条件によってこちらのほうが作業スピードが早いでしょう。
- basic.html
- こちらは、表示して何もでてきません。デザインやコンテンツが無い代わりにベースとなるhead内の情報、cssやjsが入っています。こちらからガツガツオリジナルのデザインを構築していく時に便利です。
これら2つのどちらかとスタイルガイドを使って作業を進めていきます。
Web Starter Kitのスタイルガイド
スタイルガイドは、以下に格納されているので確認してみてください。
1 |
web-starter-kit/app/styleguide |
全体的に簡素なスタイルが用意されています。
Bootstrapとは違い、多くのスタイルは用意されていませんので、こちらの自由なデザインを当てていくことを前提とした作りだと感じます。
Gridシステム
このへんもBootstrapと違って、自由度が保たれている感じがします。
画面を4分割で構成していて、web,tabletとスマホの画面サイズで分かれています。
全体のサイズはmax-width:864pxで指定されています。
g-mediumがtabletのレンジ
g-wideがwebのレンジ
となっていてスマホ表示は1カラムになる仕様です。
カラムの組み方もWeb Starter Kitではfloatを使っているので、任意の場所でclearを入れる必要があります。
細かいスタイルガイドは立ち上げて確認して下さい。
gulp
ちょくちょく出てきているgulpなのですが、他にも色々出来ます。
コマンド | 詳細 |
---|---|
gulp | gulpの起動により、アウトプット先のフォルダに結果が反映されます。 |
gulp html | HTMLを圧縮しています。使っているのはgulp-minify |
gulp images | 画像の圧縮です。使っているのはimagemin |
gulp jshint | avaScript構文チェッカーです。使っているのはgulp jshint. |
gulp pagespeed | Webサイトの表示速度やパフォーマンスを計測し、改善点を示してくれます。使っているのは PageSpeed Insights |
gulp serve | ローカルでサーバーが展開される。externalの方を使うとブラウザが同期できます。 |
gulp styles | CSSの圧縮を行ないます。使っているのはgulp-minify-css tool |
試してみるといいと思います。
まとめ
普段自分がbootstrapを使っているので比較しがちですが、使い勝手はbootstrapのほうがスタイルガイドやコンポーネントが豊富に取り揃えているので良いです。フレームワークというより、テンプレートに近い感覚です。自由度も高く、パッケージとして機能が組み込まれているので環境を瞬時に構築出来るのがウリになっています。
今回は、簡単に触っただけの紹介ですが、今後制作で使ってみた感想もかければ良いなと思っています。
これで興味を思った人は自分で触ってみることをおすすめします。
目新しいものを見聞きすることは多いと思いますが、実務含めなかなか自分の手を動かす機会は少ないとおもうので、この機会を是非活かして欲しいです。自戒を込めて...。