Google:マルチプラットフォームテンプレのWeb Starter Kitを触ってみた

2014年6月20日(日本時間)に、Google社が発表したマルチプラットフォームテンプレートのWeb Starter Kitを触ってみました。

 

Web Starter Kitとは

 

Web Starter Kitは、インターネットに接続された様々なデバイスにコンテンツを配信するためのフレームワークです。
現在もっとも有名なTwitter Bootstrapや、ZURB Foundationのようなフレームワークと似たものです。

公式サイトではWeb Starter Kitを使用するには、NodeRubyGulp, を必要としているが、もちろん使わずにソースコードをダウンロードし使用する事もできる。
しかしGulpを使うことで、LiveReloadや、cssのminiファイルの自動生成などが行えるので、当ブログでも公式サイトに則った環境構築を紹介いたします。

サポートしているブラウザ:

  • IE10, IE11, IE Mobile 10
  • FF 30, 31
  • Chrome 34, 35
  • Safari 7, 8
  • Opera 23, 24
  • iOS Safari 7, 8
  • Opera Coast
  • Android / Chrome 4.4, 4.4.3
  • Blackberry 1.0

用意されているVisual Style

Typography、Buttons、Lists、Links、Icons、Breadcrumbs、Table、Grid、Colors、Highlights、Editorial header、Article section、Guides section、Page header、Quote、Featured icons、Featured spotlight、Featured list、Featured block、Article navigation

用意されているスタイルは、Bootstrapなどと比べると少ないですが、Googleは多くのサイトでWeb Starter Kitが採用されたとしても、サイトが似ないように独自のスタイルを適用し開発を行ってほしいとのことです。

 

環境構築

 

筆者環境:Mac OS 10.9.3

 

それではさっそく環境を構築していきます。
手順につきましては、こちらを参照しています。
https://developers.google.com/web/fundamentals/tools/setup/setup_kit

 

  1. Web Starter Kitダウンロード
     

    $ cd ~/
    $ git clone https://github.com/google/web-starter-kit.git
    

    ユーザーのホームディレクトリなどに移動し、Web Starter Kitをダウンロードします。
     

  2. NodeJSをインストール

    http://nodejs.org/」にアクセスし、Nodeをインストールしてください。

    導入確認
    ※ $から始まるコードは、コンソール画面(黒い画面)からのコマンド入力になります。

    $ node -v
    v0.10.28
    
  3. Rubyインストール

    導入確認

    $ ruby -v
    ruby 2.0.0
    
    $gem --version
    2.3.0
    

    インストールされていない場合は、下記URLよりダウンロードしくてください。
    https://www.ruby-lang.org/en/downloads/
     

  4. Sassインストール
     

    $ sudo gem install sass
    $ sass -v
    Sass 3.3.8
    

     

  5. Gulpインストール
    $ sudo npm install --global gulp
    

     

    Web Starter Kitディレクトリに移動
    $ cd web-starter-kit
    $ sudo npm install
    

 

環境の準備が整いました。

 

Web Starter Kitを触ってみる

 

  1. localhost serverを起動します。
    $ gulp serve
    


    ページが起動しました。
     

  2. コードを修正する

    現在表示されているページは「/web-starter-kit/app」内のコンテンツが読み込まれています。

    index.htmlを開き、文字を修正してください。
    筆者は、<h1>タグのHello!を、こんにちはに変更しました。

     

  3. 次にスタイルを修正します

    「/web-starter-kit/app/styles/main.css」を開きます。

    筆者はh1にcolor:redを追加しました。
    ファイルを更新すると同時に画面が切り替わったかと思います。


     

  4. 配布用のソースを作成する
    $ gulp
    

    「/web-starter-kit/dist」が作成されました。
    「/dist」を開くと下記の構成になっています。「styles」を開くと、cssやJSファイルが最適化されているのが分かると思います。

    index.html
    basic.html
    images
    scripts
    styleguide
    styles
     

  5. パフォーマンスをチェック

    $ gulp pagespeed

     

  6. その他のWeb Starter Kit Tools

    gulp、gulp html、gulp images、gulp jshint、gulp pagespeed、gulp serve、gulp styles

    詳しくはこちらを参照ください。
    https://developers.google.com/web/fundamentals/tools/build/build_site#summary-of-web-starter-kit-tools

     

最後に

 

今回GoogleがGulpを使った手法を案内したことにより、恥ずかしながら初めてGulpを触ってみました。
感想はGulp良さそうですね。今後のフロントエンジニアが効率化するツールとしては無くてはならないツールになって行きそうですね。

また時間が取れましたら、色々と試してみます。

 

関連記事

 

Gulp Browser-Syncで、iPhone、Andoroid、Mac、Windowsでのテスト効率化

 

 

このエントリーをはてなブックマークに追加

関連タグ:

この記事をシェアする

次へ
前へ