年間読まれた記事ランキングTOP20！

＜1位＞
Googleはなぜモバイルに力を入れるのか？これからのWebパフォーマンスで注力すべきポイント
── 川田寛

＜2位＞
モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」
── Tomomi Imura

＜3位＞
Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」
── 中島 直博

＜4位＞
Web Componentsが変えるWeb開発の未来
── 泉水翔吾

＜5位＞
HTML5とかモバイルとかJSフレームワークとか、ぶっちゃけどうなの座談会
── 村地彰

＜6位＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
── 小山田 晃浩

＜7位＞
いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念会
── 佐川 夫美雄

＜8位＞
HTML5で実現できる！環境光に合わせたレスポンシブなUI
── Tomomi Imura

＜9位＞
いま、UXを語るのはなぜ悩ましいのか？─長谷川恭久ロングインタビュー
── 白石 俊平

＜10位＞
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方
── 酒巻瑞穂

＜11位＞
Web技術者も知るべきデモ・プレゼンの極意（西脇資哲氏）「Microsoft de:code」イベントレポート
── 岩瀬 義昌

＜12位＞
HTML5が変える、エンタープライズITの可能性とこれから
── 川田寛

＜13位＞
【速報】Google I/O 2014 キーノート ライブレポート
── 岩瀬 義昌

＜14位＞
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
── 石本 光司

＜15位＞
キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！
── 金井 健一

＜16位＞
話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう
── 佐藤歩

＜17位＞
HTML5ハイブリッドアプリ開発、最新動向はやわかり！
── 久保田 光則

＜18位＞
ミツエーリンクスのCTOに「UXとWebアクセシビリティ」について聞いてきた─木達一仁ロングインタビュー
── 白石 俊平

＜19位＞
Web Componentsを構成する4つの仕様 ー Web Components基礎編
── 泉水翔吾

＜20位＞
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編)
── 高橋 登史朗

モバイルWeb、WebComponets、AngularJS…

モバイルWebというキーワードは今年注目を集めましたね。関連記事がいくつかランクインしています。また、WebComponets、AngularJSという今年話題になった技術の記事もランクインしています。特集では、GoogleI/O特集やExperts Opinions「UX」特集が注目を集めました。UX特集は年明けにも記事公開を予定していますので、お楽しみに！

HTML5 Experts.jpは2014年も多くの方々にご愛読いただきまして、執筆陣・編集部共々感謝しています。ありがとうございました。来年も引き続き宜しくお願いいたします。

Web Starter Kitは、Googleが提供するマルチデバイスでのWeb開発をサポートするボイラープレート(HTMLのひな形)と、開発を補助するツール群です。
特に注目したいのが開発を補助するツール群で、このツールを使えば今どきのWeb開発のワークフローをすぐに取り入れることができます。

Web Starter Kitを開発の出発点とすることで、Web FundamentalsにあるWeb開発のベストプラクティスを取り入れられるながらスムーズ制作に入れるとともに、より効率的な開発を可能にします。

本記事では導入方法と機能の説明を中心に、Web Starter Kitの紹介をしていきます。

Web Starter Kitの導入

入手方法

Web Starter Kitの入手には2つの方法があります。一つはWeb Starter Kitのリポジトリからクローンする方法、もう一つは、Web Starter Kitのサイトからダウンロードする方法があります。

Web Starter Kitは現在Beta版で、アップデートが頻繁に行われています。リリースサイクルが早いため、Webページからのダウンロードの場合最新のバージョンではない可能性もあるのでリポジトリからのクローンをオススメします。

※ 執筆時点でのバージョンは 0.4.0 です。アップデートの変更点を把握するためにもWeb Starter KitのReleasesを定期的にチェックするといいでしょう。

フォルダとファイルの構成

フォルダ構成は以下のようになっています。

/
└── app
    ├── fonts
    ├── images
    ├── scripts
    ├── styleguide
    └── styles

Web Starter Kitのドキュメントルートとなるフォルダには、各種の設定ファイルが含まれています。開発する際の中心となるのは app フォルダ以下で、デフォルトでHTMLのひな形やWebフォントなど、いくつかのリソースが含まれています。

各フォルダの役目は以下のようになっています。

Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。

動作環境の構築

Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。

• Node.js (v0.10.x以上)
• Ruby (1.8.7以上)

これに加えて、以下のツールのインストールが必要になります。

• Nore.js上で動くタスクランナーのgulp (3.5.x以上)
• Sassのコンパイルを行うRubyのgem (3.3.x以上)

それぞれのインストール方法について、簡単に紹介していきます。

※ これらを既にインストール済みの場合は、このセクションは飛ばしてください。

Node.jsのインストール

Node.jsのバージョンは v0.10.x 以上が必要になります。すでにインストールしている場合は、$ node -vで現在のバージョンを確認してください。Node.jsのインストールはhttp://nodejs.org/にあるインストーラーを使うのが簡単です。

※ 「Node.jsのバージョンを管理したい」という場合には、nodebrewがオススメです。

Rubyのインストール

Macを利用している場合は、デフォルトでRubyがインストールされているので、そのまま利用することができます。（ただしその場合でも動作には 1.8.7 以上のバージョンが必要となりますので $ ruby -v で現在のバージョンを確認してください）

Windowsの場合にはRubyの公式サイトかRuby Installerなどからインストーラーを入手してインストールしてください。

Sassのインストール

Rubyのインストール後にSassのコンパイラをインストールします。インストールはRubyのパッケージマネージャのRubyGemsから行います。 コマンドラインツールから以下のコマンドを実行します。

$ gem install sass

※ もし権限に関するエラーが出た場合は、sudoをつけて実行してください。

インストール後、下記コマンドを実行してバージョン番号が表示されることを確認します。

$ sass -v

gulpのインストール

gulpは、Node.jsのパッケージマネージャであるnpmでインストールします。 インストールには、下記のコマンドを実行します。

$ npm install -g gulp

※ もし権限に関するエラーが出た場合は、sudoをつけて実行してください。

モジュールのインストール

最後に、タスクの実行に必要なモジュールをインストールします。Web Starter Kitをクローン(展開)したフォルダに移動して、下記のコマンドを実行します。

$ npm install ※ もし権限に関するエラーが出た場合は、sudoをつけて実行してください。

このコマンドを実行することで、動作に必要なモジュールがインストールされます。インストールされるモジュールは、同じフォルダにある package.jsonに書かれています。

以上で環境構築はおしまいです。

制作・開発

環境が揃えば制作に入れます。制作はひな形とするHTMLを選択することから始めます。

ひな形とするHTMLの選択

Web Starter Kitで用意されているひな形のHTMLは、index.htmlとbasic.htmlの2つがあります。

2つのHTMLの主な違いは以下の点です。

• マルチデバイス向けメニューの有無
• Web Starter Kitが用意しているCSSとJSファイルの読み込み

index.htmlには、マルチデバイス向けのドロワーメニュー用のリソース読み込みが指定されていて、初めからメニューのHTMLが書かれています。メニューをそのまま使う場合に、index.htmlを。プレーンな状態のHTMLから始めたい場合には、basic.htmlを使って制作を進めましょう。

UI Component

Web Starter Kitにはマルチデバイス向けのメニューのほかに、いくつかのUI Componentが用意されています。ボタンやアイコン、テーブルといったComponentのほかにGridシステムもあります。いずれのComponentもマルチデバイス向けに書かれており、レスポンシブ対応されています。Componentの一覧は、app/styleguide/index.htmlで確認することができます。

このComponent群は、Web Fundamentalsで使用されているComponentをまとめたもので、Googleのベストプラクティスが詰め込まれています。

UI Componentが用意されているWeb Starter Kitですが、GoogleはこれらのComponentを使うことを必ずしも推奨しているわけではありません。Web Starter Kitをベースに独自のスタイルを開発し、自分のStarter Kitを作っていきましょう。

gulpによる作業の自動化

Web Starter Kitには開発を補助するツールとして、gulp(Node.js製のタスクランナー)を採用しています。gulpを使えば様々な作業をタスク化し、自動化することができます。

用意されているタスクは以下の様なものです。

• ローカルサーバ
• マルチデバイスでのオートリロード
• Sassのコンパイル
• ベンダープレフィックスの付与
• HTML、CSS、JavaScriptの最適化とminify
• 画像の最適化
• PageSpeed Insightsによるパフォーマンス測定

これらのタスクを活用することでより効率的に開発を進めることができるでしょう。

タスクの実行

gulpのタスクを実行してみましょう。

gulpのタスクは、gulpfile.jsに書かれています。デフォルトで10数個のタスクが記述されていますが、主に使うのは4つです。それぞれを実行して試してみましょう。

ローカルサーバとファイルの監視

ローカルサーバを立ち上げ、各種ファイルの変更を監視してそれぞれのタスクを実行してくれます。 開発中はこのコマンドを実行しておくことになります。

$ gulp serve

コマンドを実行するとブラウザが立ち上がり、app フォルダをドキュメンルートとして、index.htmlが開かれます。

ローカルファイルに変更があった場合、BrowserSyncによって、変更がブラウザに反映されます。試しにトップページ(app/index.html)を編集して保存してみると、自動的にブラウザがリロードされ、最新の内容が反映されるのが確認できます。

ビルドして成果物を生成する

Sassのコンパイルや各種ファイルのminify、画像の最適化などを行うコマンドです。生成したファイルはdistフォルダに格納されます。

$ gulp

このコマンドは以下のようなタスクを含んでいます。

• CSSファイルの生成
  • Sassのコンパイル
  • ベンダープレフィックスの付与
  • 未使用セレクタの削除
  • 結合と縮小
• JSファイルの生成
  • 結合と難読化と縮小
• HTMLの縮小
• 画像の最適化

ビルドしたファイルをローカルサーバで確認する

serveタスクで、開発中のファイル(appフォルダ以下)をローカルサーバで確認しましたが、ビルドした結果を確認する場合には、以下のコマンドを使います。

$ gulp serve:dist

ビルドが行われた後にdistフォルダをドキュメントルートとしたローカルサーバが立ち上がります。

ページのパフォーマンスを確認する

Googleが提供するパフォーマンス診断ツールのPageSpeed Insightsで、Webページのパフォーマンスを測ることができます。

$ gulp pagespeed

このタスクではコマンドラインからPageSpeed Insightsの結果を取得できるpsi(PageSpped Insights for Node)が使われています。

注意したい点として、PageSpeed Insightsはパブリックなサイトしか測定できません。ページのパフォーマンス測定を行いたい場合には、ビルドした成果物をサーバにアップロードして公開状態にしておく必要があります。

測定するURLはgulpfie.jsにて設定することができます。

gulpタスク一覧

このほかにも、いくつかのタスクが用意されています。タスク一覧は以下の通りです。カスタマイズして使う場合には、これら既存のタスクを参考にすると良いでしょう。

それぞれのタスクは、$ gulp タスク名 という形式のコマンドで個別に実行することができます。

おわりに

今回は、Web Starter Kitの概要、機能などについて紹介しました。Web Starter Kitをうまく自身のワークフローに取り入れ、開発の出発点にすれば、開発を始める際の準備が軽減されるかもしれません。

ただし、プリプロセッサやAltJSなど、開発に使用するものは人によって様々です。そういった場合にはWeb Starter Kitをそのまま使うのではなく、カスタマイズしたり、一部だけを参考にしたりするだけでもよいでしょう。

Web Starter Kitはまだ始まったばかりのプロジェクトなので、多くの人にフィットするようになるにはまだ時間がかかるかもしれません。ですが頻繁に更新はされていて、今後はMaterial Designなどが取り込まれていく動きもありますので、要注目のプロジェクトです。