YEOMAN Advent Calendar 5日目：generator-mobile を紹介します

Webアプリケーションを作る入門的なジェネレータ generator-mobile を紹介します。このエントリーは「YEOMAN Advent Calendar 2014」12月5日の記事です。

YEOMAN Advent Calendar 2014 - Adventar

実はこの generator-mobile は Web Starter Kit のジェネレータなんです。皆さん覚えていらっしゃいますか？まだ現役でメンテナンスされてます。

Web Starter Kit — Web Fundamentals

インストールから実行まで

インストール

いつものようにジェネレータをインストールしてプロジェクトディレクトリを作りyoとgruntの実行です。

$ npm install -g generator-mobile
$ mkdir mobile && $_ 
$ yo mobile
$ grunt serve

途中オプションを聞いてきます：

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.
? Would you like to include a mobile-first UI framework? (Use arrow keys)
❯ No Framework 
  Bootstrap 
  PureCSS 
  TopCoat 
  Foundation 

多くのCSSフレームワークがありどれを利用するか選択します。これらCSSフレームワークをご存知だろうか？実にBootstrap以外にも実に多く存在していることがわかります。

Bootstrap

Bootstrap · The world's most popular mobile-first and responsive front-end framework.

PureCSS

Pure

TopCoat

http://topcoat.io/

Topcoat

Foundation

Foundation | The Most Advanced Responsive Front-end Framework from ZURB

その後にも多くのことを聞かれインストールがはじまります。

? Would you like to include a mobile-first UI framework? Bootstrap
? Would you like to include layout boilerplate for your selection? No
? Would you like to generate multi-resolution images for srcset? No
? Would you like to remove click delays in touch UIs (eg iOS)? No
? Would you like screenshots of your site at various viewport sizes? Yes
? Would you like to use BrowserStack for device testing? No
? Would you like to include RequireJS (for AMD support)? Yes
? Would you like to convert your images to WebP? (y/N) 
? Would you like to include a polyfill for async localStorage? No
? Would you like to include boilerplate for the Fullscreen API? No
? Should builds only include Modernizr feature-detects you actually use? No

実行結果

ホントはこっち

githubページを読んでいたところジェネレータのインストール方法が違うようでした：

yeoman/generator-mobile · GitHub

下記が正解のようです：

$ npm install -g yeoman/generator-mobile
$ mkdir mobile && cd $_ 
$ yo mobile
$ gulp serve

途中オプションを聞いてきます：

? Site name: mobile
? Site description: 
? Site URL (e.g. www.example.org, https://owner.github.io),
  hit enter to skip.
  
? Do you want a default layout? (Use arrow keys)
❯ Yes, supports IE10+ 
  No, barebones HTML file 
? Google Analytics tracking ID, or hit enter to skip.
  (get your tracking ID at https://www.google.com/analytics/web/)
? Where would you like to host the site? (Use arrow keys)
  PaaS (GAE, Heroku) 
  Static (GitHub, GCS, S3) 
  Server (Apache, Nginx, etc.) 
❯ Nowhere, don't worry about it 
? Looks good? Yes

実行結果

Web Starter Kitが立ち上がります。Googleイチオシ（だったのかな？）のレスポンシブデザインです。今見ても普通にかっこいいと思います。

最後に

Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」

と題してHTML5 Experts.jpでも記事になっていました、その時期が掲載されたのが「2014年8月7日」です。

Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」 | HTML5Experts.jp

今話題はMaterial DesignということになっていてUIひとつ取っても移り変わりの早いものだなと思います。どれが「最も良いのか」はわかりませんがユーザが利用しやすいものを選ぶのが無難だと・・・。