Web Starter Kitからはじめるモダンなウェブサイト制作 (201512版)

また、ドリコムアドベントカレンダーその2もあります。

whoami

新卒1年目のエンジニアのFuyaです。社内では「つぶらや」と呼ばれています。 大学時代からプログラミングをはじめて、"ホームページが作れる"Web技術が好きになってしまい今にいたります。

普段はRailsエンジニアとして仕事をしていますが、フロントエンド的なグループにも所属していて、 ユーザさんに近いフロントエンド領域からサービスを作りたいと思ってます。

最近meguro.esという勉強会で発表しました。

フロントエンド界隈について

フロントエンドの分野は新しいものが次々と生まれては消えています。 2週間も情報を集めるのを怠ってしまうと、すぐに周りのエンジニアが何に夢中になっているのわからなくなります。浦島太郎状態です。

全部の技術・ツールを毎日追い続けるのはとてもしんどいです。時間も足りません。楽しいですがしんどいです。 今回は、Web Starter Kitを使ったページ作成を紹介して、最近のWeb技術の美味しいところを少しずつ簡単にいただこうと思います。

Web Starter Kitとは

Web Starter KitはGoogleが提供する、Webページを作成するボイラープレートです。 「静的なWebページを爆速で作るツール」です。

今回の記事では、2015年12月15日時点の最新版、v0.6.0を元にお話しします。*1 github.com

使い方

詳しい使い方は、README.mdにかいてありますのでこの記事では簡単な使い方だけ説明します。 まず、お使いのマシンにNode.js がインストールされている必要があります。

対象のディレクトリに移動して、$ npm install で必要なものをインストールします。 次に、$ gulp serve を叩きます。これだけで終了です。

http://logalhost:3000 にアクセスしてみるとWebページが見られます。

f:id:fuya28:20151221213459p:plain f:id:fuya28:20151221210135p:plain

デフォルトでは、レスポンシブデザインのモダンなサイトが表示されます。 では、このWebページにはどんな技術が使われているか簡単に説明していきます。

headã‚¿ã‚°

Webページで考えなければならないのが、モバイル対応です。 モバイル対応にはデザイン以外にも設定した方がいいものが多くあります。 Web Starter Kitを使って作られたページには、ホーム画面に置いた時のアイコンや色の設定など、おきまりの用意するものが揃っています。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Web Starter Kit">
    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#2F3BA2">

    <!-- Color the status bar on mobile devices -->
    <meta name="theme-color" content="#2F3BA2">

MDL

デフォルトで設定されているCSSのライブラリはMDLです。 MDLは、マテリアルデザイン(Introduction - Material design - Google design guidelines)を実現するGoogle製のCSSライブラリです。Androidで使われるマテリアルデザインの部品「カード」や「ボタン」が使えます。

ServiceWorker

ServiceWorkerを使った、オフラインページ機能もWeb Stater Kitには含まれています。

gulp generate-service-worker これで必要なスクリプトが生成されます。 これだけで、一度見たページはキャッシュを行い通信環境がなくともページを見ることができます。*2

また、ServiceWorkerを使うとプッシュ通知ができます。詳しくはmeguro.esの発表資料をごらんください。 meguroes#1f - Google スライド

deploy

v0.6.0では、 デプロイができるようになりました。 デプロイ先はGAEやHerokuなどいくつか選べますが、今回はGithub Pagesを使って見たいと思います。

はじめに、Githubでリポジトリを作ります。

次にデプロイに必要なモジュールを入れておきます。Web Starter Kitのルートディレクトリで npm install --save-dev gulp-subtree を実行します。

次に、gulpfile.babel.jsにこんなタスクを書いてください。

gulp.task('deploy', ['default'], () => {
  return gulp.src('dist')
    .pipe($.subtree())
});

また、.gitignoreから dist/ を外してください。

これでデプロイ準備は完了です。

最後に、gulp deploy コマンドを打つとgh-pageブランチを作成し、Githubにpushされます。 数分時間が経てばGithub Pagesで閲覧できます。

実際に公開してみました。 http://fuya.github.io/wsk/ オフラインキャッシュにも対応しています。 Github Pagesは全ページがHTTPSなので、ServiceWorkerも使えますね。

おわりに

Web Starter Kitは、多くの技術やツールが含まれています。

流行りの技術(またはGoogleが流行らせたい技術)が含まれているので、試しに触ってみることで 長い付き合いになるツールと出会えるかもしれません。

僕もWeb Starter Kitを使ってgruntからgulpに乗り換えました。 リリースされて1年以上経ちますが、まだまだ更新されて新たな要素が入っています。 忙しい時はWeb Starter Kitの中身だけ追ってみるというのでも良いのではないかと思っています。

よいフロントエンドライフをお送りください＞＜

明日は...

明日は、同期入社のwagiさんの記事です。

*1:12月上旬に触った時と違っていてWebの速さを改めて感じました

*2:iOSを除くChromeなどの一部のブラウザのみ対応です